Uzun bir aradan sonra yeniden merhabalar. Bu makalemizde Css ve Xhtml ile klasik bir yatay açılır menü yapacak daha sonra bu menümüzü jQuery ile biraz dinamik hale getireceğiz.

Menümüzü oluştururken Css3′ün bir takım özelliklerinden de yararlanacak ve görünümü daha iyi hale getirmek adına menü kodlarımızda kullanacağız. Şimdi dilerseniz hemen uygulamamıza geçelim.

UYGULAMA ÖNİZLEME UYGULAMA İNDİR (3kb)

jQuery şüphesiz en çok bilinen ve kullanılan Javascript kütüphanesi. Bunda kısa kodlarla büyük işler başarmasının elbette çok büyük payı var. jQuery’nin sunduğu efekt, olay ve işlemler sayesinde çok az bir kodla muhteşem şeyler yapılabiliyor. Ben bu yazımızda çok kısa olarak jQuery ile web sayfalarımızda kullanmak üzere bir açılır panelin nasıl yapılacağını anlatacağım. Makalemizin sonunda neler yaptığımızı anlatacak ve çalışır bir örneğimizi sizlerle paylaşacağız.

(Makalemize başlamadan önce jQuery’nin temel dosyasını indirmiş olmanız gerekiyor. jQuery’nin kararlı son sürümünü kendi sayfasından indirebilir ve üzerinde uygulamalar geliştirebilirsiniz)

Öncelikle panelimizin görünümünü düzenleyen Css kodlarını yazarak başlayalım…

Merhabalar. Photoshop’ta metinlere 3 boyut etkisi vermek için birçok yöntem kullanılıyor. Photoshop’un kendi nimetlerinden yararlanabileceğimiz gibi Photoshop dışı programlar kullanarakta bu etkiyi oluşturmak mümkün. Ben bu yönde bir çalışma yapacaksam her zaman bana en basit gelen yolu izliyorum. Bu nedenle 3 boyut etkisini Photoshop ile oluşturuyorum. Bu yazımızda hem yazımızı 3 boyutlu bir görünüme kavuşturak hem de Pen, Brush gibi araçlar kullanarak tatlı ışık efektleri ile çalışmamızı süsleyeceğiz.

Merhabalar. Ext Core tıpkı bilindik diğer Javascript kütüphaneleri gibi bir kütüphane. Bu kütüphane ile oluşturulan uygulamaları çok seviyorum. Hızlı ve kolay uygulanabilir yapısı nedeniyle son projemde bu kütüphaneyi kullanmaya karar verdim. Özellikle uygulamalara giydirilen tasarımlar çok hoş ve uygulamanın göz alıcı olmasını sağlıyor.

Bu yazımızda sizlere Ext Core Menu bileşeni kullanarak Wordpress sitelerimizde kategorilerimizi bu menü ile nasıl göstereceğimizi anlatacağım. Bir nevi Ext Core Menu’yü Wordpress tabanlı sitemize entegre edeceğiz ve böylelikle kategorilerimizin açılır bir menü ile görünmesini sağlayacağız.

Yeniden merhabalar. Bu gönderimizde sizlerle Css Sprite tekniğini konuşacak, hazırlamış olduğumuz örnekler ile konumuzu destekleyecek, Türkçe ve yabancı kaynakları paylaşaçağız. Dilerseniz hemen başlayalım.

Css Sprite kullanılışı itibariyle bir “image replacement” (resim yer değiştirme) tekniğidir. Css sprite çok yeni bir teknik olmamakla birlikte uzun zamandır büyük siteler tarafından kullanılmaktadır. Css sprite tekniği özünde birden fazla resmi bünyesinde barındıran “tek” bir resmin arkaplan pozisyonlarının değiştirilmesiyle gösterilmesi mantığını taşımaktadır. Bu söylediğimi uygulamalı olarak gördüğünüzde ne demek istediğimi daha iyi anlayacaksınız.

Css sprite birçok yönden hem site sahiplerini hem de ziyaretçileri mutlu etmektedir. Çünkü birçok resim bağlantı ve resim ögenin kullanıldığı bir sitede bu resimlerin her biri için sunucumuza bir istek gitmektedir. Sizlerin de bildiği üzere Http request’lerin fazla olması sunucuya olan yükü fazlalaştırmakta ve site açılış hızını etkilemektedir. Css sprite bu yönden kullandığı tek bir resim dosyası nedeniyle birçok bağlantı isteğine gerek kalmadan işlevini yerine getirmektedir. Bununla birlikte sitemizi ziyaret eden ziyaretçiler de kullandığımız resim bağlantılarda (kısa bir süre de olsa) yeni resmin yüklenmesini beklemeyecektir.

Makalemizin başında söylediğimiz gibi Css sprite tekniğini birçok büyük site kullanmaktadır. Google, Youtube, Yahoo, Amazon, Digg gibi siteler bunların başında gelmektedir. Bu kısa girişten sonra dilerseniz tekniği daha iyi anlayabilmek için örneğimize geçelim.

Merhabalar. Bu gönderimizde sizlere t-infection.com sidebar üzerinde kullanmış olduğumuz Easy Tabs menüyü ve kullanımını anlatacağız. İletişim formu yoluyla bize ulaşan Oğuz’a selamlar :)

Efendim, sitemizde kullanmış olduğumuz tabmenü Koller Jürgen‘in geliştirmiş olduğu EasyTabs‘ın 1.2 sürümüdür. Bu menü kullanımının kolay oluşu, onmouseover özelliği sayesinde tab’lar arası kolay geçiş sayesinde tercihim oldu. Ayrıca biraz Css bilginiz varsa menünün birçok alanına müdahale edebiliyorsunuz. Tüm bunlarla birlikte menünün “Autochange” özelliği ile tablar kendi arasında otomatik olarak sırayla açılabiliyor. (dilerseniz bu özelliği kaldırabiliyorsunuz)

Şimdi gelgelelim menümüzü indirip kullanmaya. Öncelikle Kollermedia.at sitesinden menümüzü indiriyoruz. İndirmiş olduğumuz paketi klasör olarak dışarıya çıkarıyoruz. Sonrasında yapmamız gereken adımlar şunlar;

Adobe Illustrator ile 3 boyutlu nesneler yaparak tasarımlarımızı zenginleştirmek sanıldığı kadar zor değil. Illustrator’un Efektlerinden faydalanarak bu işi çok kısa bir süre içinde yapabiliriz. Şimdi dilerseniz basit bir örnek yapalım ve nasıl bir etki oluşturacağını görelim. Yazımızın devamında Illustrator’da yer alan Sembollerle aynı etkiyi nasıl yaptığımızı da kısa bir şekilde anlatacağız.

Mootools çalışmalarımda sıkça kullandığım ve çokta sevdiğim bir Javascript kütüphanesidir. Basit ve esnek yapısı sayesinde birçok dinamik web ögesini Mootools ile oluşturabilirsiniz. Ben bu makalemizde Mootools’un Akordion özelliğini kullanarak nasıl bir Akordion menü yapacağımızı anlatacağım. Yazımızın sonunda (ve gönderi yanındaki resmimizde de) yapmış olduğumuz menüye ait önizlemeyi görebilir dilerseniz de bilgisayarınıza indirip kullanabilirsiniz.

Herşeyden önce başlıktada belirttiğimiz gibi biz bu menüyü Mootools kütüphanesini kullanarak oluşturacağız. O yüzden Xhtml dokümanımızda öncelikle Mootools’u çağıracak olan kodu yazıyoruz. Bu sayede sayfamız Mootools betiğini okuyacak ve işlemi buna göre yapacaktır. Bu kodları Head bölümüne yazıyoruz.

Rss okuyucumda kısa bir süre önce David Walsh‘ın yaptığı Css ile sabit div pozisyonlama gönderisini gördüm. Çok hoşuma gitti sizlerle Css ipucu olarak paylaşmak istedim.

Css ile oluşturduğumuz bir sınıfı arkaplanda sabit olarak göstermek için Css stil dosyamıza şu kodu girmemiz yeterli;

.element { position:fixed; top:2%; right:2%;}

Bu kodu ekledikten sonra Xhtml/Html sayfamızda çağırmak içinse;

<div class=”element”>Sabit div içinde yer alacak metnimiz</div>

kodunu kullanmamız gerekiyor. Böylelikle “element” ismiyle oluşturduğumuz sınıf position:fixed parametresi sayesinde arkaplanda sabit olarak kalacak. Sayfanız aşağı doğru inse bile sabit şekilde görünmeye devam edecek. Daha önce de sitemizde sabit arkaplanlar oluşturmayla ilgili bir makale yayınlamıştık. Bu da sizin için faydalı olabilir.

Html dilinin şu anda kullanılan 4. versiyondan 5′e geçiş sürecini yaşadığını biliyoruz. Bu alanda W3C grubunun yaptığı ara çalışmaları da görme imkanımız oldu. Html 5.0 dili gerçekten bünyesine katılan yeni özellikler sayesinde sanıyorum yeniden gönüllerimizi fethedecek. 2003 yılının son dönemlerinde geliştirilmeye başlanan Html5.0 yapılan öngörüye göre 2010 yılının sonlarına doğru final sürümüyle karşımızda olacak. Sanıyorum bu döneme kadar yapılan ara çalışmalarla da gelişimi daha yakından görebileceğiz. Tabi yine tarayıcı uyumu konusu gündeme geliyor. Html5.0′ın final sürümü duyurulduğunda tarayıcı cephesinde ne gibi bir gelişme yaşanır bunu zaman gösterir. Ancak kişisel görüşüm daha önce yaşadığımız tarayıcı uyumsuzluğu sorunlarının bu sefer daha az olacağıdır. (Bazı kaynaklarda 2012 gibi tarihler gördüm ama umarım bu kadar uzun bir süreç olmaz)

Bu yazımızda sizlerle Html5.0 ile hayatımıza girecek olan bazı yeni etiketleri tanıtacağız. Html5.0′ın biraz daha esnek yapıya bürünerek geliştiğini görmek gerçekten heyecan verici. Dilerseniz hemen yeni etiketlerimize bir bakalım.

Header, Section, Nav, Article, Aside, Footer Etiketleri

Html5.0′ın biraz daha esnek bir yapıya büründüğünü söylemiştik. Bu esnek yapıyı yeni kullanmaya başlayacağımız Yapısal etiketlerde de görebiliyoruz.