Posts Tagged "jquery"
Jquery öğrenmek ve kullanmak için 5 neden
Bu yıl web tasarım dünyasında en çok konuşulan konulardan biri hiç şüphesiz Jquery oldu ve olmaya da devam ediyor. Yazılımcıların haricinde biz web tasarımcılara da Javascript’i sevdirmeyi başardı Jquery. Jquery‘nin bu kadar sevilmesinin ve şu sıralar en meşhur Javascript kütüphanesi olmasının başlıca nedenleri nedir diye düşündüğümde, sıralayacağım nedenlerin bir iki taneden daha fazla olduğunu farkettim. Hatta MooTools ve Prototype gibi diğer bilinen Javascript kütüphaneleri ile kıyaslarsak bu nedenlerin sayısını artırabiliriz.
Yazılımla pek de arası olmayan web tasarım uzmanlarının standart donanımı genelde arayüz tasarımı ile CSS ve Html kodlaması, biraz da Adobe Flash bilgisinden ibarettir. Tarayıcı teknolojisinin hızla geliştiği günümüzde, CSS ve Html kodlamasında uzman olan web tasarımcılar için bir sonraki aşama olan Jquery’i öğrenmeye zaman kaybetmeden başlamak gerektiğini düşünüyorum. Sıfırdan Javascript yazılımı öğrenmekte zorlanacağına inanan web tasarımcıların da, en azından hazır Jquery eklentilerinin web sitelerinde nasıl kullanılacağını öğrenmelerini ısrarla tavsiye ediyorum. Yani toplamda 2 ana başlıktan söz ediyorum:
1. Jquery öğrenmek
2. Jquery kullanmak
Web tasarımcılar olarak, Jquery öğrenmemiz veya en azından sitelerimizde hazır Jquery efektleri kullanmamız için 5 nedenin ne olduğuna açıklamalı ana başlıklar halinde bakalım.
Günümüzün web trendi
Makalenin başında da dediğim gibi, Jquery son zamanlarda oldukça meşhur. Web sitelerinde bu kadar çok kullanılması ile birlikte bir süredir kendi modasını oluşturdu. Bununla birlikte, yeni nesil web tasarımcı olmanın temel prensibinin de web trendlerini takip etmek olduğunu göz önünde bulundurduğumuzda, kendi projelerimizde Jquery kullanmak şart oldu. Çünkü web sitesi yaptırmak isteyen müşteriler, her zaman yenilikleri takip eden ve kendini yenileyen tasarımcıları tercih ederler.
Ben de her yeni nesil web tasarımcı gibi son projelerimde mutlaka Jquery kullanmaya önem veriyorum. Arayüz tasarımından kodlamasına kadar her aşamasıyla bana ait olan Cama Teknik ve DefenderTurk sitelerini incelediğinizde navigasyon menü, resim galerisi ve slayt efektlerinde Jquery kullandığımı göreceksiniz. Siz de bu tarz efektleri sitenizde kullanmak için sıfırdan Jquery yazmayı öğrenmek zorunda değilsiniz. Sadece hazır Jquery eklentisinin html yapısına nasıl eklendiğini öğrenmeniz yeterli olacaktır.
CSS’e uyumlu yapısı ile tasarımcı dostu
Jquery’nin, uzun bir süredir hayatımızda olan CSS ve yeni yeni kullanmaya başladığımız CSS 3 ile uyumlu yapısı, sitelerimizde kullanırken önemli bir avantaj sunuyor bize. Navigasyon menü, resim galerisi gibi bölümlere, hiç zorlanmadan ve fazla zaman kaybı yaşamadan Jquery efektleri ekleyebiliyorsunuz. Özellikle de CSS 3 ile birlikte gelen transition ve transform özelliklerinin Jquery ile birlikte kullanılmasıyla, muhteşem çalışmalar çıkıyor ortaya. CSS 3′ün yeni özelliklerinden dolayı bir çoğu şimdilik sadece yeni nesil tarayıcılar tarafından sorunsuz görüntülenebilse de sonuç ortada. Aşağıdaki resime tıklayarak, basit bir butonu Jquery ile ne denli etkileyici yapabileceğinizi görebilirsiniz. (Firefox, Safari veya Google Chrome kullanın)
Jquery ile Flash zahmetine son
Flash’ın (ve Action Script’in) web teknolojisindeki önemi gözardı edilemez tabiki. Ama siz de benim gibi, Flash’ı çoğunlukla animasyonlu menüler ve resim galerileri oluşturmak için kullanıyorsanız, şunu bilin ki ben bu zahmetten Jquery sayesinde bir süredir kurtuldum : ) Özellikle slaytlı resim galerilerinde flash tek çaremizdi ve bu da benim için fazladan harcanan zaman ve emek demekti. Jquery ile birlikte, sitenize aynen Flash ile yapılmış gibi görünen animasyonlu menüler, resim galerileri, mesaj pencereleri ve daha bir çok efekti Flash kadar zaman ve emek harcamadan eklemeniz mümkün. Sonuç olarak, müşterilerinizi arayüz tasarımı haricinde de görsel olarak etkilemek için elinize fazladan bir koz daha geçmiş olur. Çünkü onlar arayüz tasarım örneğini gördüklerinde sitedeki hareketli bölümlerin nasıl görüneceğini tahmin edemeyebilirler. Böylelikle, tarayıcı testi aşamasında onları şaşırtabilir ve sonuçtan daha fazla memnun edebilirsiniz. Aşağıdaki resme tıklayarak, Jquery ile hazırlanmış bir navigasyon menü örneğini inceleyin ve kararı kendiniz verin. Daha fazla örnek için, daha önce yayınladığım CSS 3 & Jquery uygulamaları ‘na ve blogdaki Jquery ile ilgili diğer makalelere göz atabilirsiniz.
Siteye ekleme ve düzenleme kolaylığı
Hazır Flash efektlerinin üstünde küçük bir değişiklik yapmak için ne kadar uğraştığınızı hatırlıyor musunuz? Ya da sitelerinizde kullandığımız Javascript kodlarında düzenleme yaparken ne kadar zorlandığınızı? Bir de bunları Html yapısına eklemek için ne kadar uğraştığınızı hatırlayın. Jquery size, sade ve basit mantığı ile hem sitenize ekleme kolaylığı hem de hazır eklentiler üzerinde istediğiniz değişikliği çok kolay bir şekilde yapma imkanı verir. Yapısı gerçekten o kadar sade ve basittir ki siteye sadece tek bir satırla ekleyebilirsiniz. Ayrıca istediğiniz düzenleme için hangi bölümü değiştirmeniz gerektiğini bir bakışta anlarsınız. Tasarımcılar için bu özelliğin ne kadar önemli olduğunu söylemeye gerek yok herhalde. Zaten sloganı “Write less, do more” olan Jquery’den de bu beklendirdi.
Daha az boyut ile hızlı yükleme
Jquery’nin diğer Javascript kütüphanelerine nazaran çok daha az yer kaplaması ve hızlı yüklenmesi de kendi rüşdünü ispat etmesinde önemli bir rol oynuyor. Sıkıştırılmış hali ile sadece 25 KB civarında yer kaplaması, hem tarayıcı hem de bant genişliği açısından oldukça kullanışlı olduğunun bir göstergesi. Ayrıca Jquery’i sitenize Google üzerinden eklediğinizde bant genişliği konusundaki sorununuz da ortadan kalkmış oluyor. Jquery’nin mevcut son sürümünü Google üzerinden sitenize eklemek için aşağıdaki satırı html kodlarına eklemeniz yeterli oluyor.
|
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:0--></script> |
Web tasarımcıların Jquery öğrenmesi ve kullanması için aklıma gelen nedenler bunlar. Unuttuğum nedenler olabilir ama bunlar bile Jquery öğrenmek için yeter de artar bence. Yine de unuttuğumu düşündüğünüz nedenler varsa yorum olarak gönderebilirsiniz. Jquery öğrenmeye karar verirseniz Jquery.com’daki Türkçe Jquery derslerinden başlamanızı tavsiye ederim.
Devamını OkuJquery galeri ve slayt eklentileri
Çok değil, bundan bir kaç yıl öncesini hatırlıyorum da web sitelerimize animasyonlu resim galerileri eklemek için Flash kullanmaktan başka çözüm yolumuz yoktu. Oysa şimdi internetin her köşesinde, javascript ile hazırlanmış resim galeri ve slayt eklentisine rastlamak mümkün. Özellikle de Jquery’nin yaygın olarak kullanılmaya başlanmasıyla birlikte hareketli resim galerileri ve slayt gösterileri de günden güne daha popüler oluyor. Web geliştiricilerinin Jquery’i sevmesi ve resim galerisi ve slayt gösterileri ile ilgili her geçen gün yeni scriptler yazması bu popülerliğin en önemli etkeni tabiki.
Aşağıda Jquery ile yazılmış resim slayt gösterileri ile ilgili yepyeni 6 eklenti bulunuyor. Bunları sitenize eklemek de son derece basit. Eklentinin tanıtım sayfasında, nasıl ekleneceği ile ilgili bütün detaylar mevcut.
Ama öncesinde hala bilmeyenler için, Jquery’nin şu sıralar en meşhur javascript kütüphanesi olduğunu ve resmi sitelerinden Jquery ile ilgili detaylı bilgi alabileceklerini belirtmek isterim.
Şimdi geçelim Jquery ile hazırlanmış resim slayt eklentilerine…
Supersized
Supersized, Jquery resim eklentilerinin en yenisi sanırım. Çünkü diğerlerinden çok farklı bir uygulama. Sitenizin arkaplan resmini tarayıcınızın ekran çözünürlüğüne göre yeniden boyutlandırıyor ve sitenin arkaplan resmini slayt gösterisi şeklinde belli zaman aralıklarında değiştiriyor. Scrollbar yok, boş alan yok, sadece değişen arkaplan resmi var. Bütün tarayıcılarda (Firefox, Safari, Opera, IE7, and IE6…) sorunsuz çalışıyor.
SimpleSli.de
SimpleSli.de sıkıştırılmış hali ile yalnızca 4 KB yer kaplayan çok küçük ve bir o kadar da sade bir Jquery eklentisi. Sadece resim ile kalmayıp, html içeriğinizi de slayta dahil edebiliyorsunuz. Düzgün CSS ve Script yapısı ile renk, genişlik ve hız gibi kriterleri istediğiniz gibi değiştirebilirsiniz. IE 6.0 hariç bütün tarayıcılarda ve versiyonlarında düzgün çalışıyor.
jqFancyTransitions
jqFancyTransitions, resimlerinizi farklı efektlerle slayt şeklinde gösteren bir Jquery eklentisi. Dalgalanma, perde ve sıkıştırma gibi 3 farklı efektten birini seçebiliyorsunuz. Animasyonla ilgili olan sayısal değerleri istediğiniz gibi değiştirerek sitenize uygun resim galerileri oluşturabilirsiniz.
ColorBox
ColorBox, resim, fotoğraf albümü, html içerik ve hatta ajaxı destekleyen oldukça küçük (9 KB) bir Jquery eklentisi. CSS dosyası ile istediğiniz görsel değişikliği yapmaya uygun. Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8 gibi en çok kullanılan tarayıcıların bütün versiyonlarında test edilmiş ve sorunsuz çalıştığı görülmüştür.
YoxView
YoxView, diğerlerine göre oldukça gelişmiş özelliklere sahip bir Jquery eklentisi. Resimleri tarayıcınızın o anki büyüklüğüne göre yeniden boyutlandırarak görüntüleyerek ekranda scrollbar çıkmasını önlüyor. İsterseniz tek tek resimlere tıklayarak görüntüleyebiliyor, isterseniz de çok güzel bir slayt efekti ile otomatik olarak çalıştırabiliyorsunuz. Cache özelliği ile daha önce açtığınız resimleri hafızasında tutarak, bir sonraki işlemde yeniden yüklenmesini beklemeden anında o resmi açabiliyor. Bütün tarayıcılarda da sorunsuz çalıştığı test edilmiş.
Horinaja
Horinaja, Jquery ve Prototype olmak üzere iki farklı versiyon şeklinde yazılmış bir slayt eklentisi. Kullandığı Div elementinin içine ne yerleştirirseniz onu slayt edebilme özelliğine sahip. Horinaja’yı diğerlerinden ayıran en önemli özellik mouse’unuzun tekerleği ile de hareket ettirilebiliyor olması. Slayt gösterisi hem otomatik hem de manuel olarak çalışabiliyor.
Yeni nesil web tasarımcı olmak
Makaleme, her web tasarımcıyı ilgilendirecek bir soru ile başlamak istiyorum. Web tasarım trendlerini takip ediyor musunuz? Yoksa “Hayır, bildiğim bana yeter” diyenlerden misiniz? Eğer bu sektörde itibar kazanmak istiyorsanız trendi takip etmeli ve yeniliklere açık olmalısınız. Ve bu yeniliklere tasarımlarınızda yer vermekten çekinmemeniz gerekiyor. Yenilenmek, hayatta kalmaktır. Öyle ki kendini yenilemeyen hücrelerin öldüğü gerçeğini de hatırlayarak, kendinizi yenilemenin yollarını arayın. Aksi takdirde, web tasarım gibi çağımızın en geniş freelance sektörlerinden birinde farkınızı yaratamazsınız.
En son web teknolojilerini destekleyen tarayıcılara “yeni nesil tarayıcı” denildiği gibi o teknolojiyi kullanan tasarımcıya da “yeni nesil web tasarımcı” diyebiliriz bence. Ve bu konuyla ilgili giriş paragrafından iki ana başlık çıkarabiliriz.
1. Trendi takip etmenin yolları
2. Web tasarım trendleri
Konuyu birbiriyle doğrudan bağlantılı bu başlıklar halinde incelediğimizde, yeni nesil web tasarımcı olmak için gerekli ipuçlarını öğrenmiş olacaksınız.
1. Trendi takip etmenin yolları
Yeni nesil web tasarımcı olmanın yolu bu sektörde trendi takip etmekten geçiyor. Hızla gelişen ve dolayısıyla değişen web teknolojisini takip etmek kolay sayılsa da işiniz sadece takip etmekle bitmiyor. Bir de o teknolojiyi öğrenip web sitelerinizde kullanmanız gerekiyor. Bu da tabi ki fazladan efor ve zaman kaybı demek. Ama bunu başardığınızda, size getirdiği itibar ve finansal kazanç, harcadığınız emeğe kesinlikle değer.
Blogları takip edin: Web tasarım trendini takip etmenin en kolay yolu, dünyanın belki de en iyi freelance tasarımcılarının düzenli olarak yazdığı web tasarım bloglarını okumaktır. İngilizceniz olmasa bile “mavi renk kullanılan web siteleri”, “grunge efektli web siteleri” gibi güzel web sitelerinden derlenen harika örnekler yayınlanıyor. Bu tasarımları incelemek için ingilizcenizin olması gerekmiyor. Ayrıca Webrazzi, Bilgirgec gibi internet dünyasını yakından izleyen Türkçe blogları mutlaka düzenli olarak okuyun.
Sosyal Medyada Yer Alın: Zamanınızı Facebook’ta sadece Farmville oynayıp, komik video izleyerek geçirmek yerine sosyal medyayı iş konusunda lehinize çevirebilirsiniz. Sosyal medya ortamlarında tasarım gruplarına katılın ve aktif olarak yer alın. Beğendiğiniz web tasarımcıların Twitter sayfalarını takip edin. Araştırmalara göre, haberler en hızlı sosyal medya ortamlarında yayılıyormuş. Tasarım dünyasındaki haberleri de en hızlı sosyal medyadan öğrenebilirsiniz.
Sörf yapın: Sörf yapma sözünü uzun zamandır kullanmıyorum sanırım. İnternette gezmenin adına “sörf yapmak” diyorduk yıllar önce : ) Sadece blogları değil, ne kadar çok web sitesi gezerseniz aklınızda o kadar fazla tasarım kalacaktır. Sitelerde ilk defa karşılaştığınız özellikleri ve stilleri inceleyin. Sadece “güzelmiş” diyip geçmeyin. Beğendiyseniz onu öğrenmenin bir yolunu bulun. İnternette istemediğiniz kadar tasarım dersi bulunuyor.
Esinlenin: Tasarımda trendi takip ederken kendinizi geliştirmenin en basit yolu esinlenmektir. Beğendiğiniz tasarımlardaki yeni stilleri öğrenerek tekniğinizi geliştirin. Bu noktada dikkat etmeniz gereken nokta, tasarımın aynısını kopyalayıp çalmak yerine esinlenerek kendi tarzınızı yaratmaya çalışmaktır. Böylelikle trendi kendinize göre yorumlamış olacaksınız.
2. Web tasarım trendleri
Web tasarım trendleri bir yana, yeni nesil web tasarımcı olmanın bana göre ilk koşulu, öncelikle Table‘lardan tamamıyla vazgeçip html kodlaması için DIV kullanmaya başlamanızdır. Eğer hala Table ile kodlama yapıyorsanız daha fazla geç kalmamak için bir an önce Div yapısına alışsanız iyi olur.
Hiç kuşkusuz, web tasarım trendine bu yıl CSS 3 ve Jquery hakim. Tarayıcıların CSS 3′ü hala bütün özellikleriyle desteklememesini de düşünürsek, bu trend en az bir kaç yıl daha devam edecek gibi geliyor. CSS 3 ve Jquery’nin hayatımıza girişi ile birlikte bakalım web sitelerinde neler moda?
@font-face:
Arial, Times New Roman gibi standart sistem fontlarını web sitelerinde kullanmaktan sıkılanlar ya da başlıklarda ve Header, Banner gibi özel alanlarda farklı yazı tipi kullanmak isteyenler, daha önce sIFR, Cufon gibi Flash ve Javascript’in ortak uygulamalarını kullanmak zorunda kalıyordu. Bu da oldukça zahmetli bir uygulamaydı. CSS 3 dahilinde @font-face özelliğinin yayınlanmasıyla birlikte kullanım kolaylığı dolayısıyla hızlıca yaygınlaştı. Neredeyse bütün yeni web sitelerinde karşılaşmaya başladık.
Siz de aşağıdaki satırları CSS dosyasına ekleyerek, sitenizde @font-face kullanmaya bir an önce başlasınız iyi olur. Böylece daha etkileyici başlıklar ve Header’lar oluşturabilirsiniz.
|
1 2 3 4 |
@font-face {
font-family: Helvetica;
src: url(http://site/fonts/Helvetica.ttf);
} |
Bütün tarayıcılarda sorunsuz olarak çalışması için Fatih Hayrioğlu‘nun konuyla ilgili bu yazısından yardım alabilirsiniz.
Text-shadow:
Şüphesiz CSS 3′ün en çekici özelliklerinden biri text-shadow. Internet Explorer ısrarla desteklememeye devam etse de Firefox, Chrome, Safari gibi yeni nesil tarayıcı kullanıyorsanız, sitelerde sıkça kullanılmaya başlanan gölgeli yazılarla siz de karşılaşmışsınızdır.
Kullanımı da çok basit. text-shadow: #000 1px 1px 1px şeklinde yazarak istediğiniz gibi düzenleyebilirsiniz.
border-radius: explorer desteklemiyormuş, kimin umurunda? Explorer’ın kendisi utansın.
Box-shadow:
Son zamanlarda web sitelerinde gölgeli kutulara rastlıyoruz. CSS 3′te box-shadow özelliği ile DIV’lere gölge vererek sitedeki kutuların gölgeli görünmesini sağlayabiliyorsunuz. Explorer desteklemese de diğer tarayıcılarda sitenizin daha şık görünmesini sağlayabilirsiniz.
Box-shadow’un Mozilla (Firefox) ve Webkit (Safari, Chrome..) tarayıcıları şeklinde olmak üzere 2 farklı şekilde kullanımı var.
-moz-box-shadow: #000 1px 1px 1px
-webkit-box-shadow: #000 1px 1px 1px
Renk kodu ve gölge değerleri ile oynayarak farklı stiller elde edebilmeniz mümkün. Bu sayfadaki örnekler işinize yarayabilir.
Border-radius:
Ve nihayet yuvarlak köşeler yapmak için imaj kullanmak zorunda değiliz artık. DIV’lerin köşelerini box-radius özelliği ile istediğimiz yarı çapta yuvarlayabiliyoruz. Box-shadow ve box-radius’ü bir arada kullanarak çok şık kutular oluşturulabiliyor. Siz de bu şekilde bir kullanıma alışmakta iyi edersiniz.
Border-radius de aynen box-shadow’da olduğu gibi mozilla ve webkit için ayrı ayrı yazılmak zorunda.
Bütün köşelerin yarı çapı aynı olduğu durumlarda;
-moz-border-radius: 5px
-webkit-border-radius: 5px
Ancak her köşe için ayrı ayrı yarı çap yazılan durumlarda kullanımı Mozilla ve Webkit özelliklerinin yazılımı biraz farklı.
Mozilla tarayıcıları için;
-moz-border-radius-topleft:5px-moz-border-radius-topright:4px
-moz-border-radius-bottomleft:5px-moz-border-radius-bottomright:2px
Webkit tarayıcıları için;
-webkit-border-top-left-radius: 5px-webkit-border-top-right-radius: 4px-webkit-border-bottom-left-radius: 5px-webkit-border-bottom-right-radius: 2px
Jquery:
Yazılımcıların yanında tasarımcıların da yeniden javascript’e yönelmesini sağlayan bir javascript kütüphanesi, Jquery. Özellikle görsel etkiler üzerine geliştirilmiş yapısıyla birbirinden güzel animasyonlu menüler, resim slaytları ve daha bir çok hareketli yapılar hazırlanabiliyor Jquery ile. Ajax bilen yazılımcılar çok daha gelişmiş uygulamalar hazırlayabilir pek tabi. Ama hiç javascript bilmeyen tasarımcıların bile html kodlarına kolaylıkla ekleyebileceği şekilde basit ve kullanışlı bir yapısı var. Bu nedenle 2009′dan itibaren en çok kullanılan, neredeyse 3 siteden 2′sinde karşılaştığımız Jquery ile küçük ama etkileyici uygulamalar oluşturabilirsiniz. Bu müşterilerinizin de hoşuna gidecektir.
Örnek olarak referanslarımdan biri olan www.camateknik.com ‘da ana menüye Jquery ile uyguladığım animasyonu inceleyebilirsiniz. Sitelerinizde hala flash menü kullanıyorsanız, Jquery’e geçme vaktiniz gelmiş demektir.
Tipografi:
Web 2.0 anlayışının iyice benimsenmesi ve yaygın olarak kullanılmaya başlanmasıyla birlikte, web tasarımında da tipografi düzenine çok önem veriliyor artık. Önem sırasına göre düzenlenen yerleşim düzeni ve yazı tipi boyutlarının doğru seçimi ile siz de web tasarımında tipografiye önem vermelisiniz. Web tasarımında tipografi ile ilgili daha kapsamlı bir yazı yazmayı düşünüyorum. Şimdilik aşağıdaki örnekleri inceleyerek ne demek istediğimi anlayabilirsiniz.
Makaleyi beğendiniz mi?
Konu ile ilgili aklıma gelenler bunlar. Umarım beğenmişsinizdir. Web tasarımcıların kendini yenilemesi ve geliştirmesi için önemli ipuçlarından bahsettiğimi düşünüyorum. Eğer unuttuğum varsa sizin yorumlarınızla eksikleri beraber tamamlayabiliriz.
Makale ile ilgili yorum ve eleştiri yapmaktan çekinmeyin.
Devamını OkuAjax Teknikleri ve Dersleri
Hem kullanışlı olması hem de ihtiyacı karşılaması bakımından, şu sıralar web sitelerinde Ajax uygulamaları kullanmak moda oldu. Sürükle-bırak alışveriş sepetleri, otomatik tamamlayan arama motorları, puan verme sistemleri gibi eğlenceli uygulamalar web sitelerimiz için gerçekten çok çekici olabiliyor. Ben de bunun üzerine, javascript, php ve ajax’la arası iyi olan daha profesyonel tasarımcılar için bir makale yayınlama gereği duydum.
Ama öncelikle bilmeyenler için Ajax’ın ne olduğuna kısaca değinmekte fayda görüyorum.
Ajax Nedir?
Hemen belirteyim bir çok kişinin yeni yeni tanışıp kullanmaya başladığı Ajax bir program dili ya da teknolojisi değildir. İsim olarak Asynchronus Javascript and XML‘in kısaltması olan Ajax, adından da anlaşılabildiği üzere Javascript ve XML’in bir arada kullanıldığı bir yöntemdir. Ajax yönteminde Javascript ve XML bir arada kullanılırlar ve farklı zamanlarda çalışabilirler.
Ne olduğundan kısaca bahsettikten sonra Ajax derslerine geçebiliriz artık.
Ağırlıklı olarak Jquery ve Php kullanılarak hazırlanan bu Ajax uygulamalarını önizleme linkleri ile test edebilir, resimlerin üzerine tıklayarak derslere ulaşabilirsiniz.
Alışveriş sepetine sürükle bırak tekniği
Bu derste, Php, CSS ve Jquery kullanılarak veritabanından çağırılan bütün ürünleri sürükle bırak yönetimiyle alışveriş sepetine ekleme tekniği anlatılıyor.
Linkleri Bit.ly şeklinde kısaltma
Bu Ajax tabanlı teknikle, Twitter’ın link kısaltma servisi Bit.ly ve Jquery kullanarak kendi sayfanıza ekleyebileceğiniz bir URL kısaltma uygulaması geliştirebilirsiniz.
Ajax tabanlı Twitter listesi
Bildiğiniz üzere Twitter‘ın kategorilere göre düzenleyebileceğiniz “liste oluşturma” özelliği bulunmakta. Bu dersteki API ile Twitter’daki gibi bir widget nasıl oluşturulur öğrenebilirsiniz.
Jquery – Ajax ile Silme işlemi
Web tasarımcılar için çok kullanışlı bir uygulama olan bu teknik sayesinde, bir içeriği hem sayfadan -ajax sayesinde- hem de veritabanından silebiliyorsunuz. Demo’daki X işaretlerine tıklayarak silme işleminin nasıl gerçekleştiğini görebilirsiniz.
Puan verme sistemi
Jquery, Ajax ve Php ile bir içeriğe puan verilebilen oylama sistemi hazırlayabilirsiniz. Web siteniz için özgün bir uygulama olabilir.
Dosya yükleme sistemi
Jquery-Ajax kullanarak oluşturabileceğiniz dosya yükleme sistemi ile sayfa yenilemeden çoklu dosya yükleyebilirsiniz.
Facebook tarzı arama motoru
Bu derste Jquery, Php ve Ajax kullanarak Facebook tarzı otomatik tamamlama yapan bir arama motoru hazırlayabilirsiniz.
Vista tarzı Ajax takvim
Otomatik ya da isteğe göre değişen stilleri ile Vista görünümlü çok şık bir takvim hazırlama dersi. Javascript efektleri, takvime ekstra güzellik katmış.
Ajax Captcha Güvenlik Scripti
Sitenizdeki formlara güvenlik scripti olarak ekleyebileceğiniz çok farklı bir captcha scripti. Scriptte güvenlik gereği, sizden istediği objeyi dairenin içine sürüklemeniz gerekiyor. Görünümü bakımından da çok çekici bir captcha sistemi.
Ajax ile çoklu dosya yükleme sistemi
Jquery kullanılan bu Ajax uygulamasında çoklu dosya yükleme sisteminin nasıl hazırlanacağı anlatılıyor.
Jquery İle PHP İletişim Formu
Freelance web tasarımcılar statik web sitesi işi aldığında istisnalar durumlar haricinde yazılımcıya ihtiyaç duymazlar. Bu istisna durumların en başında da çoğu zaman iletişim formları gelir. Siteye sadece bir iletişim formu eklemek için de bir yazılımcı ile anlaşmak, web tasarımcının işine gelmez:) Ancak bu noktadan sonra, internette bütün özellikleri ile çalışan bir php iletişim formu bulmak ve onu siteye eklemek web tasarımcılar için bazen zor ve can sıkıcı olabiliyor.
Hazır Jquery de web siteleri için trend haline gelmişken bunu php iletişim formu oluşturmak için kullanmamak olmazdı. Php iletişim formu arayan web tasarımcıların çok işine yarayacak bir uygulama bu. Bütün özellikleri ile çalışmaya hazır bir Php / MySql iletişim formu… Onay (Submit) butonunda ve görsel düzenlemesinde Jquery kullanılarak çok şık bir hale getirilen bu iletişim formunu diğerlerinden ayıran en büyük özelliği; sadece mesaj göndermekle kalmayıp, ayrıca bu mesajları veritabanında saklayıyor olması. Böylece iletişim formundan yollanan bütün mesajların yedeğini alabiliyorsunuz.
Mesajları veritabanında saklayan tablo aşağıdaki gibi:
|
1 2 3 4 5 6 7 8 9 |
CREATE TABLE CONTACT(
pk_contact INT UNSIGNED NOT NULL auto_increment,
name VARCHAR(120) NOT NULL,
email VARCHAR(120) NOT NULL,
website VARCHAR(120) NOT NULL DEFAULT "",
message VARCHAR(300) NOT NULL,
added_date TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
primary key(pk_contact)
)type=innodb DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; |
Bu tablo sayesinde mesajı yollayan kişinin adı, e-mail adresi, mesaj tarihi ve mesajın kendisi veritabanında saklanıyor.
İletişim Formunun Diğer Özellikleri
1) Tabloda görülen alanların karakter sınırlarını değiştirebilirsiniz. Ancak php dosyasında da aynı değişiklikleri yapmayı unutmamanız gerekiyor.
2) Formdaki bütün kontroller ve onaylar sunucuda gerçekleşiyor. Böylece, eğer kullanıcı tarafından bir alan boş bırakılırsa ya da yanlış doldurulursa hata uyarısı görüntüleniyor.
3) İletişim formu tarafından bir mesaj yollandığında, yani veritabanına yeni bir mesaj eklendiğinde yöneticiye e-mail yoluyla yeni bir mesajın geldiği haber veriliyor.
4) İletişim formuna ait 2 farklı tasarımda CSS şablonu bulunuyor. Web sitenize uygun olanını kullanabilir ve üstünde istediğiniz değişikliği yapabilirsiniz.
Kurulum
Kurulum için yapmanız gereken tek şey, indirdiğiniz .zip dosyasının içinde yer alan veritabanı scriptini (db_main_script.sql) çalıştırmak ve config.php dosyasındaki veritabanı ayarlarını (aşağıda görünen ayarları) yapmak.
|
1 2 3 4 |
define('DB_SERVER', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '');
define('DB_NAME', 'ContactForm'); |
Ayrıca isteğe bağlı olarak “mesajın konusu” gibi e-mail ile ilgili bölümleri de düzenleyebilirsiniz.
Kurulumun tamamlanması için tabi ki bütün dosyaları sunucunuza yüklemeniz gerekiyor.
Kullanmaya başlamadan önce önizleme link ile formu test edebilirsiniz. Güle güle kullanın:)
Önizleme | İndir
Devamını OkuCSS3 & Jquery Uygulamaları
Her geçen gün CSS 3 ve Jquery’nin kullanımı yaygınlaşıyor ve ikisinin birlikte kullanımıyla, flash (ve actionscript) ile uğraşmadan yaratıcılığın sınırlarını zorlayan şahane uygulamalara rastlıyorum. Yapılan çalışmaları gördükçe CSS’in geleceğini iyice merak etmeye başladım şahsen.Jquery de aynı şekilde Javascript’in animasyon ve görsel efekt konusunda gelebileceği en iyi yerde şu an.
“Bunu kesinlikle web sitemde kullanmalıyım” dediğim ve sizin de mutlaka beğeneceğinizi düşündüğüm tam 10 adet CSS3 & Jquery çalışmasını bir araya getirdim. Özellikle düzenli olarak takip ettiğim Tympanus.net bu konuda etkileyici örnekler sunmaya ve ücretsiz paylaşıma açmaya devam ediyor. Ben de bu makaleyi hazırlarken Tympanus’tan faydalandım.
Bu uygulamaları kullanmak için dosyaları indirip, javascript ve css dosyası ile birlikte html sayfasındaki ilgili yapıyı kendi sayfanıza ekleyin. Daha ayrıntılı bilgi için resimlere tıklayarak istediğiniz uygulamanın orijinal sayfasına gidebilir ve ingilizce açıklamalardan faydalanabilirsiniz. Ayrıca yine hatırlatmakta fayda var: Bu uygulamaların bir çoğu Internet Explorer’da çalışmıyor. Bütün özellikleri ile birlikte görüntülemek için Safari’yi tercih edin.
Kayarak açılan buton
Photoshop.com‘da Flash kullanılarak yapılan bir butondan etkilenerek hazırlanmış sevimli bir uygulama. Ve hiç imaj dosyası kullanmadan sadece CSS 3 ile şekil verilip Jquery ile de hareketlendirilerek hazırlanmış.
Demo | İndir
Kayarak ortaya çıkan nagivasyon menü
Menüdeki butonların üstüne gelindiğinde kayarak ortaya çıkan butonlarda gidilecek sayfayla ilgili bir de açıklama yer alıyor. Menünün siyah-beyaz olması da ayrı bir güzellik katmış.
Demo | İndir
Grunge tarzı açılı sayfa ve kayan menü
CSS 3′ün transform özelliği ile sayfanın ve menünün belli bir açıda görünmesi sağlanarak hazırlanmış konsept bir çalışma. Butonlar üstüne gelindiğinde farklı açılarda kayarak ortaya çıkıyor.
Demo | İndir
Yeniden boyutlandırılabilen menü
Bazı durumlarda navigasyon menünüzü bulunduğu alana göre kısaltmak ya da uzatmak isteyebilirsiniz. Bunu, CSS 3 ve biraz da Jquery ile hazırlanmış bu çalışmayı kullanarak sağlayabilirsiniz.
Demo | İndir
Kayarak ortaya çıkan navigasyon menü
Üstüne gelindiğinde ikon ile birlikte ortaya çıkan butonlardan oluşan çok güzel bir navigasyon.
Demo | İndir
Gündüz & Gece Animasyonu
Gündüzden geceye dönüşümü animasyon şeklinde gösteren, ağırlıklı olarak Jquery ile hazırlanmış oldukça yaratıcı ve güzel bir çalışma.
Demo | İndir
Reklam Panosu Şeklinde Resim Galerisi
Reklam panosunda hareketli değişen resimlerden oluşan çok yaratıcı bir resim galerisi.
Demo | İndir
Kayarak gelen mesaj penceresi
Artık neredeyse her sitede kullanılan mesaj pencerelerine Jquery ile hareket vererek, bu örnekteki gibi kayarak gelmesini sağlayabilirsiniz.
Demo | İndir
Foto galerileri için mouse over efekti
Özellikle foto galerilerinizde kullanabileceğiniz Jquery ve CSS 3 ile yapılmış çok şık bir efekt. Demoda resimlerin üstüne gelince oluşan efekti görebilirsiniz.
Demo | İndir
Gerçek zamanlı değiştirilebilen stiller
Bu uygulama ile sayfanızın görünümünü gerçek zamanlı olarak değiştirebilirsiniz. Demodaki style menüsü ile ne demek istediğimi uygulamalı olarak görebilirsiniz.
Demo | İndir
Devamını Oku35+ CSS 3 & Javascript Uygulaması
Bilindiği üzere CSS 3 tamamıyla gelmek üzere ve henüz malesef sınırlı sayıda tarayıcı CSS 3′ü destekliyor. Tasarımcılar olarak CSS 3′ün kullanışlı ve çekici özellikleriyle deneyim kazanmaya başladıkça demode olmuş eski tarayıcılara burun kıvırmaya başlayıp, yeni nesil modern tarayıcıları tercih eder olduk. Bu sektörde güncel kalmanın en akla yatkın çözümü de modern tarayıcılara geçerek gelecekte daha çok kullanacağımız CSS 3′ü öğrenmek zaten. Aslında bu makalenin amacı yakın gelecekte CSS 3 tekniğiyle neler yapmanın mümkün olacağına kısaca göz atmak diyebiliriz. Çünkü aşağıdaki örnekler günümüzde çok da yaygın olmayan uygulamalar.
Bu uygulamalar, deneyimli tasarımcıların CSS 3 tekniklerini geliştirmek ve modası geçmiş tasarımlarını yenisiyle değiştirmek için son derece kullanışlı ve etkili olacaktır. Böylelikle artık Internet Explorer 6′yı tamamen terk etmek için biraz daha yol alabilirsiniz. Yalnız şunu da belirteyim, bu örneklerin bir çoğu Jquery, Mootools gibi javascript kütüphaneleri ile bir arada kullanılmış CSS 3 teknikleridir.
CSS 3 İLE GÖRSEL EFEKTLER
Analog Saat
CSS 3′ün webkit (Safari, Google Chrome…) uyumlu transform ve transition özellikleri ile analog saatin nasıl yapıldığını görebilirsiniz. Javascript, sadece saatin gerçek zamanı göstermesi için kullanılıyor. Firefox ve Explorer’ın şu anki versiyonlarında çalışmamakta.
Hareketli Kart Destesi
Bu örnekte, sadece Html ve CSS (transform ve transition özellikleri) kullanarak hareketli kart desteleri oluşturuluyor. Ayrıca font-face, box-shadow, border-radius gibi CSS’in yeni özelliklerinin de nasıl kullanıldığını görmek için güzel bir uygulama.
PNG resimlerde Hareketli Gölge ve Işık
Önce ışığı yakın. Sonra ışığın ve logonun yerlerini mouse ile sürükleyerek değiştirin. Işığın bulunduğu konuma göre logonun gölgesinin de değiştiğini göreceksiniz. Hoşunuza gideceğini düşündüğüm çok farklı bir uygulama.
Jquery ve CSS 3 ile kayarak açılan bölüm
Sayfa içinde kayarak açılan bölümlerle ilgili bir çok javascript ve CSS 3 uygulaması var. Ancak bu diğerlerinden şıklığı ve biraz da esnek görünümü ile farkını gösterip güzel bir alternatif oluyor. Örnekteki “infos” butonuna basınca ne demek istediğimi göreceksiniz.
CSS 3 ile oluşturulmuş gösterişli overlay
Bu uygulamadaki asıl nokta, CSS’e sonradan eklenen özelliklerden biri olan border-image özelliği ile çerçevede gradient resim (turuncudan sarıya doğru renk geçişini görebilirsiniz) kullanılmış olması.
CSS 3 ile değişik arabirim tasarımları
Özellikle mobil internet sitelerinde kullanılan arabirim tasarımları çok hoşuma gidiyor. Bu örnekte de aynen mobil tasarımlardaki gibi arabirimler yapabileceğiniz uygulamalar mevcut. İncelemenizi tavsiye ederim.
Sadece CSS ile 3D şerit tasarımları
Daha çok ribbon adı ile bildiğimiz şeritleri sadece bir kaç CSS 3 özelliğini kullanarak oluşturabilirsiniz.
Jquery ve CSS 3 ile şık diyalog kutusu
Bir çok web sitesinde karşılaştığımız, diyalog kutusu diye tabir edilen ama bizim daha çok mesaj penceresi adını verdiğimiz uygulamalara sade ve şık bir örnek.
Kayarak Açılan Pencere
Sadece webkit tarayıcılar (Safari, Chrome..) için CSS 3′ün animation ve transform gibi yeni özellikleriyle oluşturulmuş bir pencere uygulaması.
CSS 3 ile sütunlu gazete taslağı
Şu sıralar gazete görünümlü bu tarz sitelere ve bloglara sık sık rastlamaya başladım. CSS 3 ile oluşturulmuş hazır gazete taslağı bu tarz bir çalışma için epey kullanışlı görünüyor.
CSS 3 İLE NAVİGASYON MENÜLER
Navigasyon Menü
Bu uygulamada Jquery ve CSS 3 kullanılarak AJAX destekli sekmeli (tab) menü yapımı anlatılıyor.
CSS 3 ile Sekmeli Navigasyon Menü
Yine CSS 3′ün yeniliklerinden faydalanarak yukarıdaki menüye alternatif bir sekmeli navigasyon oluşturabilirsiniz. Buton ve sayfalar arasındaki bağlantıyı sağlamak için elbette jquery’den faydalanılıyor.
Animasyonlu Transparan Menü
PNG resimlerde Hareketli Gölge ve Işık uygulamasından sonra en çok hoşuma giden bu oldu. Her butonun üstüne gelindiğin yan tarafta akarak beliren transparan objeler sayfanızın çekiciliğini artırabilir.
Coverflow efektli Resim Geçişleri
Coverflow efekti, flow’dan yani kayarak gelen anlamında kullanılan efektten türeyen bir tabir. Bu efektin bir çok metodu var aslında. Ancak bu örnekte CSS 3′ün Transform özellikleriyle yapılıyor.
Sadece CSS İle Tab Menü
Javascript kullanmadan, sadece CSS ile üstüne gelindiğinde değişen tab menü yapabilirsiniz. Ancak Internet Explorer’ın desteklemediğine şaşırmamanız gerekiyor.
CSS 3.0 GEÇİŞLERİ VE ANİMASYONLARI
Transition (Geçiş) özelliği ile sıradışı olun
Resim galerilerinizi diğerlerinden farklı yapmak isteyenler için şahane bir örnek. Transform ve Webkit Transition özellikleri kullanılarak yapılıyor. Bu da şimdilik sadece Safari ve Chrome’da bütün özellikleriyle birlikte düzgün çalıştığı anlamına geliyor. Diğer tarayıcılarda animasyon kısmı çalışmasa da oldukça güzel ve canlı görünüyor.
CSS 3 ile Dönerek Gelen Plak
Bir kaç albüm kapağı, bir tutam Html ve biraz da CSS 3 transitions ve transform özelliğini bir kaba koyup karıştırıyoruz. 10 dakika sonra karışımımız hazır. Karşınızda kutusundan dönerek çıkan Plak (ya da CD ile yapabilirsiniz) efekti. Bu efekt yalnızca Safari’de sorunsuz çalışıyor.
Mootools ve CSS 3 İle Sitenizi Daha Eğlenceli Yapın
Mootools’da yeni yeni kullanılmaya başlanan bir özelliği CSS 3 ile birleştirince oldukça eğlenceli işler ortaya çıkıyor. Firefox, Safari ve Google Chrome’un son versiyonlarında sorunsuz çalışıyor. Demoya kesinlikle göz atmanızı tavsiye ederim.
HTML ve CSS İle STARWARS: Yeni Umut
“Uzun bir zaman önce, çok uzak bir galakside yıldız savaşları devam ediyordu” Hiç bir şey anlamadınız değil mi? :) Örneği izleyin ve Html 5 ve CSS 3 ile neler yapılabileceğini görün.
CSS İle 3 Boyutlu Sayfalar ve Açılı Videolar
Zach Johnson, CSS 3 ile izometrik küpün yüzeylerine yazı ve video ekleyerek 3 boyutlu sayfa tasarımları yapmayı başarmış. Çok da güzel görünüyor.
CSS 3 ile Jquery Benzeri Animasyonlar
Jquery ile yapılan bazı animasyon efektlerinin aynısı CSS 3 ile yapılabiliyor. CSS 3 ve Jquery ile yapılan aynı animasyonları demoya göz atarak karşılaştırabilirsiniz. Tabi ki şu an için sadece Webkit tarayıcılarında düzgün çalışıyor.
“Yükleniyor” Animasyonu
Gezdiğiniz web sitesinin ya da evinizdeki internetin ne kadar hızlı olduğu önemli değildir. “Preload” diye ifade ettiğimiz genelikle dönerek “Yükleniyor” mesajını veren görsellere her zaman ihtiyacımız olur. “Bu sadece CSS 3 ile yapılabilir mi?” diye merak edenler için en güzel örnek.
Kar Yağma Efekti
Fazla söze gerek yok. Safari ve Chrome’da çalışan bu efekt sayesinde CSS 3 ile web sayfanıza kar yağdırabilirsiniz.
Küp Şeklinde 3 Boyutlu Sayfalar
Yukarda benzerini verdiğimiz uygulamanın başka bir örneği. Modern CSS tekniklerini kullanarak Javascript’e ihtiyaç duymadan sayfalarınızı 3 boyutlu hale getirebilmenin en kolay yolu.
CSS Transform Özelliği ile Daha Fazla 3 Boyut
Nesneleri CSS Transform özelliği ile 3 boyutlu bir görünümde dizmeyi sağlayan bir animasyon efekti.
CSS 3′TE RGBa VE HSL RENK KODLARI
RGBa Renkleriyle Çalışmak
CSS 3 bize renklerle ilgili çalışmak için yeni imkanlar sunuyor. Bunlardan bir tanesi de RGBa. Sonundaki “a” harfi rengin opasite seviyesini ( ya da transparanlık değerini) belirleyen Alpha’yı temsil ediyor. Bu teknik sayesinde Photoshop’ta tasarladığımız görsellerin benzerini CSS 3 ile oluşturabiliriz.
Resim Kullanmadan Gradient Buton Yapmak
Bütün özellikleriyle birlikte en düzgün şekilde sadece webkit tarayıcılarında görünen bu örnekte, hiç resim kullanmadan Photoshop’ta tasarladığınız gradientli parlak butonların aynısını CSS 3 ile nasıl yapabileceğiniz anlatılıyor.
CSS 3′te HSL Ve HSLA Renk Kodları
CSS 3′ün bize sunduğu diğer bir renk kodu tekniği de HSL. Bütün tarayıcıların desteklediği bu teknik, CSS 3 ile gradient oluşturmak için oldukça kullanışlı görünüyor.
CSS 3 ile Şık Buton Tasarımı
CSS 3′ün en güzel nimetlerinden biri de Photoshop’la uğraşmadan oldukça şık buton tasarımları yapmak için gerekli bütün özelliklere sahip olması sanırım. Ne kadar az resim dosyası kullanırsak sitemizde o kadar az yer kaplayacağı için sitenin daha hızlı olması açısından da çok kullanışlı bir teknik bu.
CSS 3′TE GÖLGE ÖZELLİĞİNİN KULLANIMI
Text-shadow Özelliği ile gömülü yazı efekti
Son zamanlarda ben dahil bir çok web tasarımcının en çok kullandığı CSS 3 özelliklerden biri olan text-shadow sayesinde içe doğru gömülü gibi görünen yazılar oluşturabilirsiniz. Firefox, Safari, Chrome gibi bütün modern tarayıcıların bu özelliği destekliyor olması da tercih edilmesindeki en büyük etken sanırım. Çok kolay ve kullanışlı bu teknik sayesinde web sitenizde kusursuz bir görünüm elde edebilirsiniz.
CSS 3 İle Gelen Gölge Efektleri
Artık neredeyse bütün tasarımlarımda kullandığım box-shadow ve text-shadow özellikleriyle web sitelerinde hem yazılara hem de kutulara (çerçevelere) gölge verebilisiniz. Aslında aşağıdaki örnek her şeyi açıklıyor. Fazla söze gerek yok, siz en iyisi örneği inceleyin.
CSS 3 İLE RESİM GALERİLERİ
CSS 3 ile Polaroid Fotoğraf Galerisi
CSS’in yeni özelliklerini bir arada kullandığımız zaman, artık sihir yapmak bile mümkün hale geldi :) Polaroid fotoğraf görünümlü kusursuz bir resim galerisinin CSS ile nasıl yapıldığına bir göz atalım.
Jquery ve CSS 3 İle Lightbox Resim Galerisi
Bu derste Jquery ve CSS 3′ün en yeni teknikleri ile lightbox (tıklanınca açılan kutu içinde resim gösterimi) ve sürükle & bırak özelliğine resim galerisi yapımı anlatılıyor. Ve scriptin en önemli özelliği web sunucunuzda bulunan bir resim klasörünün içindeki resimlerle bir galeri oluşturabilmesi.
Düzenlenebilir CSS 3 Resim Galerisi
Html 5, Jquery ve CSS 3′ün birlikte kullanımı ile oluşturulan bu resim galerisi, aynı zamanda web tasarımcıların kullandığı bir içerik yönetim sistemi olan Pagelime için uyumlu bir yapıya sahip.
CSS 3 HACKLERİ
CSS 3 İle Internet Explorer ‘da Yuvarlak Köşe
CSS 3′ün yuvarlak köşe oluşturmayı sağlayan border-radius özelliğini Internet Explorer hariç şu an piyasadaki bütün tarayıcılar destekliyor. Bu htc dosyası sayesinde Internet Explorer da bu özelliği desteklemeye başlıyor.
Bu hack’le Overflow: hidden ‘a güle güle
Özellikle divlere gölge veren box-shadow özelliğinde yaşadığımız sorun bu hack ile ortadan kaldırılıyor.
CSS ve JQuery ile hareketli navigasyon menü
Apple’ın kurumsal kimliği dahilindeki grafik tasarım stili her zaman hoşuma gitmiştir. Bu stili web sitelerinde kullanmak isteyen tasarımcılar için tympanus.net, CSS ve Jquery ile hazırlanmış çok güzel bir navigasyon menü dersi yayınlamış. Menü ilk bakışta gerçekten de Apple stiline çok benziyor. Ancak butonların üstüne gelindiğinde kayarak ortaya çıkan ikonlar, menüyü Apple stilinden bir adım öteye taşıyıp kendine özgü göz alıcı bir fark yaratıyor. Fare imlecini butonun üstünden çektiğimizde ikonlar tekrar kayarak kayboluyor. Diğer yandan ikonların butonların üstünden gelip, altına gitmesi bir anlamda “oyun kartı karıştırma” efektini andırıyor.
Menüde kullanılan ikonlar Dyricons.com‘da lisanslı olarak bulunduğundan burada paylaşmak istemedim. Ancak yine aynı sitede bulunan ücretsiz ikon setlerinden faydalanabilir ya da kendi arşivinizden istediğiniz ikonu kullanabilirsiniz.
Şimdi gelelim menünün hazırlanışına…
HTML
Html yapısı sırasız olarak dizilmiş liste elementlerinden ve bunların içine link ve ikonlar için yerleştirilmiş span elementlerinden oluşuyor.
CSS
CSS Stili sırasız olup aşağıdaki gibidir.
|
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<span style="color: #252525;">.navigation{
position:relative;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"Verdana",sans-serif;
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}
ul.menu li a{
text-decoration:none;
background:#7E7E7E url(../images/bgMenu.png) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:13px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
text-shadow: 0 1px 1px #fff;
}
ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor:pointer;
}
ul.menu li span.ipod{
background-image:url(../icons/ipod.png);
left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
background-image:url(../icons/video_camera.png);
left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
background-image:url(../icons/television.png);
left:293px;
}
ul.menu li span.monitor{
background-image:url(../icons/monitor.png);
left:423px;
}
ul.menu li span.toolbox{
background-image:url(../icons/toolbox.png);
left:553px;
}
ul.menu li span.telephone{
background-image:url(../icons/telephone.png);
left:683px;
}
ul.menu li span.print{
background-image:url(../icons/print.png);
left:813px;
}
</span> |
JAVASCRIPT
İlk önce ikonların kaybolma efekti oluşturuluyor, daha sonra üstüne gelince ortaya çıkması için li elementleri tanımlanıyor.
|
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 |
<span style="color: #252525;">$(function() {
var d=1000;
$('#menu span').each(function(){
$(this).stop().animate({
'top':'-17px'
},d+=250);
});
$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).addClass('hover');
$('span',$this).stop().animate({
'top':'40px'
},300).css({
'zIndex':'10'
});
},
function () {
var $this = $(this);
$('a',$this).removeClass('hover');
$('span',$this).stop().animate({
'top':'-17px'
},800).css({
'zIndex':'-1'
});
}
);
});
</span> |
Hepsi bu kadar!
Jquery 1.3.2.js’i ve html sayfasına eklenmesi gereken diğer satırları menüyü indirerek görebilirsiniz.
Devamını OkuCSS3 / XHTML Website Template
Tutorialzine tarafından One-Page Website Template adı ile yayınlanan tek sayfalık website şablonu CSS 3 ve Html 5 gibi en son web teknolojisi ve teknikleri ile oluşturuldu. Ancak bütün tarayıcıların Html 5‘i henüz desteklememesinden dolayı aynı sitenin Xhtml versiyonunu da hazırlayıp ücretsiz olarak paylaşıma sundular. One-Page Website Template, Google SEO (Arama Motoru Optimizasyonu), Jquery ile efektli geçişler, bütün tarayıcıların mevcut sürümleriyle uyumluluk ve kolay düzenlenebilir yapısı ve şık tasarımıyla tam bir kullanıcı dostu.
Sade ve Şık Tasarım
Photoshop’ta tasarımı yapılan websitesi, özellikle kişisel portföyünü yayınlamak isteyenlerin işine çok yarayabilecek kullanışlı yapısı ve sade tasarımı ile dikkat çekiyor.
Düzgün CSS 3 / XHTML Yapısı
Websitesinin Html yapısı, modern Web 2.0 kurallarına göre CSS 3 ve xHTML ile hazırlanmış, çok düzgün bir çatıya sahip. Bu yönüyle, websitesini birebir kullanmak istemeyenlerin bile işine yarayabilecek bir kaynak.
Jquery ile Efektli Geçişler
Neredeyse artık her web sitesinde kullanılan javascript kütüphanesi olan jQuery ile hazırlanmış geçiş efekti ile zenginleştirilerek, sitenin çekiciliği artırılmış.
Tercih Sizin!
Bu noktadan sonra tercih size kalıyor. İsterseniz olduğu gibi kişisel web siteniz olarak kullanabilir, isterseniz ileride faydalanmak üzere arşivinize ekleyebilirsiniz.
Önizleme – İndir
Devamını OkuJquery İle Hareketli Linkler
Jquery’i bu kadar sevmemizin en önemli sebebinin animasyon kabiliyeti olduğunu biliyoruz sanırım. Hatta Jquery çıktıktan sonra Javascript öğrenmeye karar veren web tasarımcıların sayısında artış olduğu da bilinmektedir. Bu küçük uygulama da Jquery‘nin kendini bu kadar sevdirebilmesinin en basit örneklerinden.
Sitenizdeki linklerin alt çizgisine animasyon ekleyerek, linklerinizi çekici hale getirebilirsiniz. Belki de bu sayede linklerin tıklanma sayısı da artar, belli mi olur:) Bunun için yapacağınız işlem gerçekten çok basit ama daha önce kimsenin aklına gelmeyen (en azından benim daha önce hiç görmediğim) yaratıcı bir efekt. İlk olarak Css-Tricks sitesinden Chris Coyier’in aklına gelmiş ve yayınlamış.
Başlıyoruz o halde;
Öncelikle linkinizin stiline position:relative özelliğini ekliyoruz. Sonra da bütün linklerimize span elementini eklemek için Jquery kullanıyoruz. Eklediğimiz position:absolute şeklinde konumlandırılarak linkin hemen 1 px altına yerleştiriliyor. Ve yüksekliğini 1px, genişliğini de 100% vererek sanki linkin alt çizgisiymiş gibi bir görünüm kazandırılıyor. CSS olarak yazmak gerekirse;
|
1 2 3 4 5 6 |
span{
position:absolute;
bottom:-1px;
height:1px;
width:100%
} |
şeklinde oluyor. Tabi bu css’i Jquery otomatik olarak oluşturduğundan sizin ayrıyeten eklemenize gerek yok. Linkin üstüne gelince alt çizginin hareket etmesi için, span’ın satır yüksekliğine (line-height) animasyon eklenerek son halini alması sağlanıyor. Ve sonuç mükemmel.
Demo’da efektin 3 farklı tekniği bulunuyor. 3. teknik, 2. tekniğin biraz değiştirilmiş hali.
Siz de linklerinize bu efekti eklemek isterseniz aşağıdaki javascript kodlarını kullanabilirsiniz. Aşağıdaki kodların çalışması için sayfanıza Jquery’i de eklemeniz gerekiyor. Bunun için sayfanızın <head> bölümüne aşağıdaki satırı ekleyin.
|
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.3.2" type="text/javascript"><!--mce:0--></script> |
Şimdi aşağıdaki tekniklerden istediğinizi sayfanıza uygulayabilirsiniz.
1. TEKNİK
|
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 |
$(function() {
var $el = $(),
linkHeight = parseInt($("p").css("line-height")),
speed = 175; // 1000 = 1 second
$("#first a").each(function() {
$el = $(this);
// If the link spans two lines, put a line break before it.
if ($el.height() > linkHeight) {
$el.before("
");
}
$el.prepend("");
}).hover(function() {
$el = $(this);
$el.find("span").stop().animate({ height: linkHeight, opacity: 0.3 }, speed);
}, function() {
$el = $(this);
$el.find("span").stop().animate({ height: "1px", opacity: 1 }, speed);
});
}); |
2. TEKNİK
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(function() {
var $el = $(),
speed = 175; // 1000 = 1 second
// SECOND TECHNIQUE
$("#second a").hover(function() {
$el = $(this);
$el.stop().animate({ backgroundPosition: "(0px 0px)", color: "white" }, speed);
}, function() {
$el = $(this);
$el.stop().animate({ backgroundPosition: "(0px 15px)", color: "#900" }, speed);
});
}); |
Yalnız Internet Explorer 8.0′da düzgün çalıştığı halde IE 6.0 ve IE 7.0 versiyonlarında düzgün çalışmayabilir. Sitenizde kullanmadan önce kontrol etmenizde fayda var.
Devamını OkuSponsorlar
