bildirgec.org

internette iphoneiçin yapılmış birçok masa aparatı görmüşsünüzdür. Ama şimdi göreceğiniz gerçekten çok başka. Masa şeklini almış koca bir ekran düşünün. iPhone’unuzu bu masaya bağlıyorsunuz ve hop iphone ekranınız masanın ekranında çıkıyor ve kocaman bir iphone sahip oluyorsunuz 🙂

iphone için masa bağlantısı

Web 2.0 ile yaygınlaşan ve kullanılmaya başlanan sekmeli tablolar artık birçok web uygulamasında yer edinmiştir. Bir sayfaya birden fazla sayfayı sığdırmak veya ziyaretçilerimizi yeni sayfa yüklenmesinden kurtarmak gibi birçok hoş özelliği bulunan bu uygulama jQuery ile oldukça hoş bir hal aldı. Farklı geçiş efektleri ile güzelleşen bu özelliği aşağıdaki birçok uygulamaya bakarak inceleyebilirsiniz. Yararlı jQuery Sekmeli Navigasyon Uygulamaları;

Create A Tabbed Interface Using jQuery
(jQuery ile Sekmeli Tablo Arayüzü Oluşturun)

Sweet AJAX Tabs With jQuery 1.4 & CSS3
(jQuery 1.4 & CSS3 ileTatlı Ajax Seklemeri)

Web 2.0 ile başlayan içinde bulunduğumuz cilalı görsel iletişim çağında karmaşık ve çok sayıda bilginin analiz edilip görselleştirilmesinde kullanılan bilgilendirici / infografik tasarımlara en güzel örnekleri sıralayalım. Kelime ve yazılardan ibaret karmaşık ve anlaşılması imkansız görünen büyük miktarda veriyi açıklamak için grafik öğelerin ve tipografinin nasıl kullanıldığını aşağıdaki örneklerde inceleyelim:
Space Exploration 50 Yıl. uzay araştırmalarının son 50 yılda göstermek büyük bir infografik. Bu inanılmaz infografik çalışma Sean McNaughton ve Samuel Velasco tarafından National Geographic için oluşturulmuştur.

50 Years of Space Exploration

50 Years of Space Exploration

uzay araştırmalarının son 50 yıldaki durumunu gösteren büyüleyici tasarım. Bu inanılmaz çalışma Sean McNaughton ve Samuel Velasco tarafından National Geographic için oluşturulmuş.
Prism Social Media 2010

prism social media

internetteki Sosyal ağlar, paylaşım siteleri ile sosyal medya ve paylaşım araçlarını gösteren çalışma ise Serge Esteves tarafından yapılmış.

Merhabalar geçmiş sayfalardan örnek bir datagrid html modelinin sıfırdan html’e aktarılış hikayesini tüm incelikleriyle açıklamaya çalıştığımız bu yazımızı okuyanlarımız hatırlayacaktır.

O gün için CSS3 multiple background özelliğine destek veremeyen tarayıcıların kodumuza yansıttığı zahmeti belirtmişdik. Bu gün ise explorer haricindeki tarayıcılarımız bu zahmetleri, rahmete çevirecek desteklerine kavuşdukları görünmektedir.

Bu yazımızda jQuery ile sitemizdeki sağ yada sol sütunu, tabloyu yada paneli nasıl gizle/göster yapabileceğimizle ilgili uygulama hazırladım. Çalışma mantığı, daha önce anlattığım (jQuery İle “Tab” Uygulaması Geliştirmek) yazısındaki uygulama ve çalışma mantığıyla neredeyse aynıdır. Tek farkı! Bu uygulamada animasyonun daha fazla olması. Çalışan örneği için BU bağlantıya bakabilirsiniz.

Şimdi öncelikle site içeriklerini Ana Tablo içine aldım;

1
2
3

<div class="ana-tablo">
...
</div>

Ana Tablo için eklediğim stil;

1

.ana-tablo { overflow:hidden; position:relative; padding-bottom:10px; }

Şimdide sırayla içerikleri doldurmaya başlıyorum. Öncelikle Gizle/Göster butonlarını ekledim;

1
2

<div class="gizle">»</div>
<div class="goster">«</div></code>

Gizle/Göster butonları için eklediğim stil;

1

.gizle, .goster { font-size:25px; position:absolute; top:0; right:10px; background:#000; color:#fff; padding:5px 5px 8px 5px; line-height:0.2em; cursor:pointer; overflow:hidden; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:5px; -webkit-border-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

Tabii bu bölümde de atlamamak lazım! Kullanıcılarımıza sadece “Gizle” butonu gösterileceğinden, “Göster” butonunu stille ekstra olarak gizledim;

1

.goster { display:none; }

Ardından Sağ Sütunu ekledim;

1
2
3
4

<div class="sag-sutun">
<div>...</div>
<div>...</div>
</div>

Sağ Sütun için eklediğim stil;

1
2

.sag-sutun { width:220px; float:right; overflow:hidden; padding-right:10px; margin-right:40px; }
.sag-sutun div { width:200px; padding:10px; margin-bottom:10px; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

ve son olarak da Sol Sütunu ekledim;

1
2
3

<div class="sol-sutun">
...
</div>

Sol Sütun için eklediğim stil;

1

.sol-sutun { margin-right:280px; padding:10px; background:#fefee0; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

Sayfa için kullanacağımız XHTML kodları burada bitiyor. Buradan sonrasında jQuery ile yazacağımız fonksiyonlar çalışacak.

jQuery kodlarını vermeden önce hazırladığım fonksiyonların ne işe yaradığından bahsetmek istiyorum. Öncelikle ilk fonksiyonumuz, “Gizle” butonu tıklanınca “Sağ Sütun” ve “Gizle” buttonu kaybolacak, kaybolan sütun yerine “Sol Sütun“‘u genişletecek, genişleyecek ama bir yandan da sağdan “Göster” butonu kadar boşluk bırakacak. İkinci fonksiyonumuzda ise “Göster” butonu tıklanınca “Gizle” butonu kaybolacak, “Sol Sütun” belirttiğimiz ölçüde tekrar daraltılacak, “Sağ Sütun” ve “Gizle Butonu” gösterilecek, gösterilecek ama “Sağ Sütun“‘un sağına “Gizle” butonun sığıcağı kadar boşluk ekleyecek. Aman dikkat!!! Anlattıklarımdan kafanız karışmasın. Sadece anlattıklarımı hayal edip, “- tabi ya! böle yapınca bu olucak, şöle yapınca şu olucak.” gibisinden düşünebilirsiniz…

Neyse, yukarıda anlattıklarım hayal ürünü olmaktan çıkıp, kodsal olarak bu şekli alıyor;

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function(){
	$(".gizle").click(function(){
		$(".gizle").animate({opacity:0}, 250).hide("slow");
		$(".goster").animate({opacity:1}, 250).show("normal");
		$(".sag-sutun").animate({marginRight:"-220px", opacity:0}, 250);
		$(".sol-sutun").animate({marginRight:"40px"}, 250);
	});
	$(".goster").click(function(){
		$(".gizle").animate({opacity:1}, 250).show("normal");
		$(".goster").animate({opacity:0}, 250).hide("slow");
		$(".sag-sutun").animate({marginRight:"30px", opacity:1}, 250 );
		$(".sol-sutun").animate({marginRight:"270px"}, 250);
	});
});

Herşeyi bu şekilde yaptıktan sonra, aşağıdaki gibi kodlara sahip olucaktınız;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery İle "Gizle/Göster" Sütun ve Tablo Yapımı</title>
<script src="http://arsiv.pilli.com/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".gizle").click(function(){
		$(".gizle").animate({opacity:0}, 250).hide("slow");
		$(".goster").animate({opacity:1}, 250).show("normal");
		$(".sag-sutun").animate({marginRight:"-220px", opacity:0}, 250);
		$(".sol-sutun").animate({marginRight:"40px"}, 250);
	});
	$(".goster").click(function(){
		$(".gizle").animate({opacity:1}, 250).show("normal");
		$(".goster").animate({opacity:0}, 250).hide("slow");
		$(".sag-sutun").animate({marginRight:"30px", opacity:1}, 250 );
		$(".sol-sutun").animate({marginRight:"270px"}, 250);
	});
});
</script>
<style type="text/css">
.ana-tablo { overflow:hidden; position:relative; padding-bottom:10px; }
.sag-sutun { width:220px; float:right; overflow:hidden; padding-right:10px; margin-right:30px; }
.sag-sutun div { width:200px; padding:10px; margin-bottom:10px; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
.sol-sutun { margin-right:270px; padding:10px; background:#fefee0; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
.gizle, .goster { font-size:25px; position:absolute; top:0; right:10px; background:#000; color:#fff; padding:5px 5px 8px 5px; line-height:0.2em; cursor:pointer; overflow:hidden; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:5px; -webkit-border-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
.goster { display:none; }
</style>
</head>
<body>
<div class="ana-tablo">
<div class="gizle">»</div>
<div class="goster">«</div>
<div class="sag-sutun">
<div>...</div>
<div>...</div>
</div>
<div class="sol-sutun">...</div>
</div>
</body>
</ html>

Bu tasarım sayesinde masanın etrafında çirkin bir görüntü oluşturan uzatma kablosu çekmek artık tarihe karışıyor. Bu pratik prizler, şık bir masanın ayağına toplanmış. Prizli masa sayesinde masanın üzerinde laptop kullanırken ya da masaüstü lamba için harici kablolara gerek duyulmayacak.
konu: Red Dot Award, prizle donatılmış masa

Veritabanları, xml veya txt dosyaları gibi birçok veri depolama veya paylaşım noktalarında bulunan verilerin, web sitenizi veya blogunuzu ziyaret eden kullanıcıların çok kolay bir şekilde anlayabileceği/anlamladırabileceği bir arayüzle sunulması oldukça önemlidir.

Bu sunum için en fazla kullanılan düzenlerin/yöntemlerin başında ise; tablolar (table) gelmektedir.

Şu anda 3.versiyonu ile geliştiricilerin kullanımına sunulan ve Javascript ile hazırlanmış bir tablo tasnifçisi/sınıflandırıcısı olan TinyTable V3 eklentisi/aracı, veri kaynaklarından çekeceğiniz çeşitli türdeki verileri, ziyaretçilerinize düzgün bir yapıda sunmanızın yanında, ziyaretçilerinize tablo üzerinde; sıralama, sınıflama ve arama yapabilme olanağı tanıyarak, ziyaretçilerinizin tablodaki verilerden elde edecekleri verimi artırmakta.

Table Partitioning’in ana amacı görece büyük bir tablo içerisinde yer alan verilerin belirli bir kritere göre ayrı ayrı fiziksel alanlarda saklanarak verilere erişim hızını ve disk kapasitesini optimum kullanmak, ölçeklenebilir ve daha kolay bakımı sağlanabilir kılmaktır.

Böyle bir yapıda kurmak isediğimiz bir tablodaki verilerin belli bir tarihten eski olanlarını bir partitionda, bu tarihten yeni kayıtları da farklı bir partitionda tutmak isteyebiliriz. Sık kullandığımız veriler elbetteki daha yakın tarihteki veriler olacaktır.

Siteleri profesyonel gösteren Yuvarlatılmış table köşeleri

yuvarlak köşeli table örnekleri

yeni web tasarımcılarının daima ilgisini çeken bir konu da sitelerdeki yuvarlak köşeli table‘lardır. Peki bu profesyonel görünümü nasıl kazandıklarını kısaca öğrenmek ister misiniz?

yuvarlak table köşesi

aslında bu konu göreceli olarak birçok grafik editörüyle kolayca yapılabilecek bir düzenlemedir. Kullanıldığı zaman siteye yumuşak ve akıcı bir hava katmaktadır. Biz burada açıklamalarımızı photoshop kullanarak yapacağız ama genelde diğer çoğu grafik düzenleme aracında da hemen hemen aynı öğeler kullanılarak yapılabilir.

Kullandığınız programa bakmaksızın kullanılacak teknik aynıdır: bir daire ya da yuvarlatılmış kare (rectangle) çiz, sonra da onu table’a uygulamak üzere parçala. Mesela biz burada 20 pixellik köşeleri olan bir table yapacağız.

1- Güneş Enerjili Mp3 Player!
mp3 player bu alet usb’den şarj olabildiği gibi güneş enerjisiyle de şarj olabilme yeteneğine sahip. 1gb hafızası var. Ve üzerindeki panelle bir saatte 10 mA şarj olabiliyormuş.

Özellikle yazlıkta pil ve şarj derdiyle uğraşmamak için çok iyi bir alet bu. tabii çin malı gibi duruyor o ayrı mesele 😀
27 dolardan satılıyor burada.

diğer bir resim

2-Güneş Enerjili Turn Table!

Dikkat turntable değil, turn table. Üzerinde bir şeyler döndürmek için basit bir tabla. Reklam için mağaza vitrinlerinde olur bazen. Ya da hiç aklınıza gelmez ama bir şeyleri döndürmeniz gerekebilir. Dairesel hareket deneylerinde de bunlardan kullanılıyor, döner tabla denen şey bu işte:D