bildirgec.org

Çoğu zaman kendimi tutamıyor ve güzel görünen her sitenin kaynak kodlarını görüntüleyip inceliyorum. Tıpkı sokakta gördüğünüz her insanın temel kemik yapısını ve iç çamaşırlarını gösteren X-Ray gözlükler gibi doğrusu. Nasıl kendinize karşı koyup kodlara bakmazsınız ki?

Güzel bir sitenin güzel kodlarla yaratılışını görmek oldukça etkileyici doğrusu. Bazen de güzellik sadece dış görünüşte kalıyor. SEO’ya dikkat etmeyen arkadaşlarımız yüzünden olsa gerek. Ancak güzel kod nasıl olur? Şunun şurasında “Code is Poetry” (“Kod şiirdir”) diyen wordpress’i hepimiz bir şekilde kullanmışızdır. Sadece HTML’den ne olabilir ki? Topu topu sabit bir dil işte sadece ve dinamik özellikleri de hiç yok. Ancak gene de kodu yaratanın temel özelliklerini gösterir.

Bu konu da beni düşüncelere itiyor. Bir kodu ne güzel yapar? Konu HTML olunca, ustalığa bakar! Hadi güzel bir iskeletin, yazılması gerektiği şekilde yazıldığında nasıl göründüğüne bir bakalım.

Mükemmel HTML nasıl görünür?

Resim, isterseniz bir kağıda çıktısını alıp, duvarınıza asabileceğiniz kadar büyük.

• HTML5 – HTML5 hem yeni, hem de html’yi şu ana kadarki en güzel haline getirdi.
• DOCTYPE – HTML5 ile beraber, doctype da inanılmaz sade ve güzel bir hale geldi.
• Sekmeler – Kodlar, ana/çocuk ilişkisini açıkça gösterecek şekilde ayrılmalı ve sekmelenmeli.

Firebug

Firebug daima web geliştiricileri arasında en yoğun kullanılan en popüler araçlardan birisi olmuştur. Firefox‘u muhteşem yapan eklentilerden birisi bence. Bu yazıda firebug kullanmanız için sizi ikna edebilecek 10 konudan bahsedeceğim.

Sebep 1: Konsol

Firebug – Konsol

firebug’ı açınca ilk farkedeceğiniz şey (ister sağ alttaki simgeye tıklayarak açın, ister ctrl+f12 kısayolunu kullanın) karşınıza çıkacak olan konsol paneli olacaktır. Firefox’un hata konsolu ile çok benzeştiğini düşünseniz de, ortak özellikleri şunlar:
– Hata, uyarı, ikaz görüntüleme
– Javascript kodu çalıştırabilme
Ancak firefugkonsolu eşsiz kılan ek özellikler şunlar:
– Javascript, CSS, XML, xmlhttprequest (ajax) ve firefox’un kendi iç hatalarını görüntüleyebilir.
– mevcut sayfa üzerinde javascript kodu çalıştırabilir.
Örnek bir sayfa üzerinde incelemek gerekirse.

sebep 2: HTML

Firebug – Html

Firebug’un panelleri arasında belki de en çok zaman geçireceğiniz panel html paneli.
– 1. Ögeyi incele olarak çevirebileceğimiz bu düğme, hem hangi ögeyi incelediğinizi kısaca size gösterirken, hem de istediğiniz tag’i seçme konusunda inanılmaz bir kolaylık sağlıyor.
– 2. Burada seçili olan tag’in hiyerarşik yapısını görebilir ve üzerinde değiştirmekten silmeye kadar her türlü işlemi yapabilirsiniz.

Offical Google Blog‘u ziyaret ettiğimde Google’ın Twitter‘daki adreslerinden bahseden bir yazıyla karşılaştım. Belki bu adreslerden1-2 tanesini biliyorsunuzdur, ancak birçoğundan habersiz olduğunuzdan eminim. Google bu listeyle twitter kullanıcılarına ulaşırken bir taraftan da twitter üzerinden Google adını kullanarak bir şekilde nemalanmayı hayal eden sahte hesapları devre dışı bırakmış oluyor. Yazıda listeyi sürekli güncel tutacaklarını söylüyorlar. İşte Google’ın Twitter üzerindeki adresleri:

GetaFreeLance kendi programlama bilginize güveniyorsanız, sadece programlama değil, veri girişi, logo design ve bir çok alanda proje bulmanıza avantaj sağlıyor.

ScriptLance ise Getafreelancer gibi aynı mantıkla çalışan fakat fiyat tekliflerinde biraz daha hassas davranmış bir sitedir.

tüy gibi hafif jquery eklentileri

Web sayfanızda bir sürü jQuery eklentisi kullanmak istiyorsunuz ama bir yandan da sayfanın yüklenme hızını kendinize dert ediniyorsunuz. O halde aşağıdaki eklentilere mutlaka göz atmak isteyeceksiniz…

1. idTabs (2.1 kb): Basit ve esnek bir şekilde sekmeli arayüzler oluşturmanızı sağlar.

2. jCarousel Lite (2.1 kb): çok seçenekli bir karosel (carousel) uygulaması

delicious çok küçük bir kod eklemekle bir sayfa üstündeki sonu .mp3 ‘le biten bağlatıları çalınabilir hale getiriyor.
Playtagger adı verilen bu hizmeti kendi sayfalarınıza eklediğiniz gibi yer imleri kısmına eklediğinizde ise sörf yaparken karşılaştığınız aynı .mp3 ‘le biten dosyaları indirmeden yanına bir oynat düğmesi eklenerek dinleme şansına sahip oluyorsunuz sabit ve işlevsel güzel bir uyguluma.

web sayfalarında bilgi girişleri için kullanılan html formlarının gerek görsellikleri gerekse işlevsellikleri üzerinde bazen uzun süreli çalışmalar yapılması gerekir. aşağıdaki jquery eklentileri sayesinde hem zamandan önemli ölçüde kazanç sağlayabilirsiniz, hem de kullanıcıların beğenisini kazanacak tasarımlar yapabilirsiniz.

Form Skinning(form kaplamaları):
jQuery jNice

Styling input file

jqTransform

özellikle flash ile hazılanmış web sitelerinde imleç ile herhangi bir objenin üzerine geldiğimizde hoş efektler oluşur.flash kullanmadan hazırlanmış ve xhtml, css ve jquery ile hazırlanmış hoş bir Hover Effect’inin demosuna buradan ve eğitimine de buradan erişebilirsiniz.

jquery için hazırlanmış bu eklentiler ile web sayfanıza oldukça kolay ve kullanışlı slider’lar (kaydırma) ekleyebilirsiniz.

loopedSlider

Easy Slider

bu çalışmamız web sayfası yapmaya yeni başlayan arkadaşlarımız için. basitçe bir dinamik site yapacağız. bunu denedikten sonra eminimki kafanızda bir sürü fikir canlanacaktır. ama kendinizi daha da geliştirmek isterseniz şu siteyiöneriyorum. dinamik sayfamıza gelince ilk önce basit bir tablo ile yapılmış sayfamızı hazırlayalım. dreamweaver programını çalıştıralım. karşımıza aşağıda görünen sayfa gelecektir. burdan