HTML5 ile Blog Hazırlamak

HTML5 ile gelen yeniliklerin birçoğu interaktif web sayfaları oluşturmamıza ışık tutuyor.

Bu yeni elemanlar yığını geleneksel Web 1.0 sayfalarımızı daha şematik hale getiriyor. Böylece JavaScript ile yaptığımız birçok işlemin yerini HTML5’in varsayılan elemanları alıyor. Böylece veri boyutu ve açılma hızı düşüyor.

Bu etkinin blog tasarımına etkisini inceleyerek makalemize başlayalım.

Bu makalenin devamında şunları konuşacağız :

HTML5’in ilk gününden bugüne olan gelişmini
Tasarımın iskeletini hangi elementlerle oluşturacağımızı,
Footer, header, content ve nav gibi alanları nasıl şekillendireceğimizi,
HTML5’in article elemanını ile daha düzgün konu alanları hazırlamayı
HTML5 uyumlu tarayıcılarda web sayfamızın kusursuz olarak görüntülenmesini,

konuşacağız.

Şimdi arkanıza yaslanın ve yavaş yavaş işe koyulalım.

HTML5 nedir?

HTML, HTML 4.01 isimleri 1999 yılında hizmete sunulmuştu. Fakat artık yerlerini gelişmekte olan HTML5 ‘e bırakmaktalar.

HTML5 web geliştiricilerinin kodlamalarında kullanabileceği en güncel iskelet sistemdir. Web 1.0‘ın asosyal tasarımları Web 2.0 ile kullanıcılarına kucak açmıştı. Adını sık sık andığımız Web 3.0 ile de etkileşim tavan yapmakta.

HTML5 ve CSS3‘de bu süreci hızlandıran en etkin elemanlar. HTML5 hakkında daha fazla bilgi için sizi buraya alalım.

WordPress teması mı yapmak istiyorsunuz?

Adobewordpress olarak ziyaretçilerimizin WordPress‘i ne kadar sevdiğinin farkındayız. Sizlerle ortak noktalarımız olması sevindirici.

WordPress için HTML5 iskeletinde bir tasarım oluşturmak sizin hünerinize kalıyor. Ama size yardımcı olabileceğimiz konular da var. Makalemizin devamında bu hususları detaylandıracağız.

Roots Theme Ama aceleniz var ve iyi bir okuyucu değilseniz Roots HTML5 WordPress Teması ile iskelet yapıya sahip temel HTML5 temalar hazırlayabilirsiniz.

Roots isimli bu temayı geliştirerek kısa süre içerisinde %100 HTML5 standartlarında tasarımlar oluşturabilirsiniz. Sıfırdan başlamaktansa Roots güzel bir tercih gibi gözüküyor.

DOCTYPE Yapısı

HTML5 temelinde DOCTYPE kullanımına ihtiyaç duymaz. Fakat bazı tarayıcılar DOCTYPE tanımlamasını görmediğinde Quirksmode dediğimiz sisteme geçiş yaparlar. Bu tarayıcılara en büyük örnek tahmin edebileceğiniz gibi Internet Explorer’dır.

Peki nedir bu Quirksmode?

HTML kod satırında DOCTYPE tanımlaması olmadığı zamanlarda tarayıcılar kendilerince bir tanımlama yaparlar. Tarayıcı DOCTYPE olmayan bir tasarımı beklenmedik bir davranış olarak algılar. Ve kendince çözümler üretir.

Quirksmode tanımlaması yapan bir web sayfasına sahip olmamak için tasarımımızın en üstüne aşağıdaki satırı ekleyerek başlıyoruz.

<!DOCTYPE html>

Yeni yapı elemanlarının kullanımı

HTML4 ile tasarlanmış web sayfalarının iskeleti <div> elemanlarından oluşmaktadır. Bu genellemeyi yapıyoruz çünkü Adobewordpress bile ilk kurulduğunda bu yapıya sahipti. Hatırlayacağınız gibi üst kısım için <div class=”header”>, menümüz için <div class=”navbar”>, içerik penceresi için <div class=”article”> ve alt kısım için <div class=”footer”> gibi tanımlamalar yapardık. Eğer elinizin altında hala bu yapıya sahip bir web sayfası varsa üzülmeyin. Çünkü bu yapı hala doğru. Fakat ben HTML5 iskeletine sahip bir web tasarımına sahip demek istiyorsanız bunu

HTML4 Sayfa Yapısı

bununla

HTML5 Sayfa Yapısı

değiştirmek zorundasınız.

Gördüğünüz gibi içeriğimizi <section> içerisine ekliyoruz. Burada her makalemiz için <article> elemanını kullanabiliriz.

Makaleleriniz içerisinde kilit noktaları ve dipnotları <aside> ile belirlemek tasarımınız için faydalı olabilir. Örnek bir kullanım hazırlayalım.

<article>
Bu zor bir matematik soru. Hatta havuz problemi. Can sıkıcı bu soruyu çözmek için çok basit bir formül yeterli. Formülü bilmeden soruyu çözmek neredeyse imkansız.
<aside>Formül : x=a+b/<aside>
</article>

Daha önce <aside> kullanarak button yapıları oluşturmuştuk. Onlara göz atmak ister misiniz?

Konumuza geri dönelim.

Aslına bakarsanız HTML yapımızdaki <div> elemanlarını yenileriyle değiştirmek zor değil. Tek yapmanız gereken eskiden div.header şeklinde yaptığınız CSS tanımlamalarını header olarak değiştirmek. Bu kadar basit.

Yeni medya elemanları

HTML5 ile daha kullanışlı müzik ve video elemanları web tasarımına dahil oldu. Bu yeni tip elemanlar bizi hantal ve kullanışsız oynatıcılardan kurtarıyor.

Bu da ilginizi çekebilir WordPress'i hızlandırmanın bir diğer yolu : Çöpleri dökün!

Yeni form elemanları

Daha önceleri form öğelerinde JavaScript kullanarak bir takım hataları form post edilmeden önce ayıklayabiliyorduk. Örneğin “bu doğru bir elektronik posta adresi değil” gibi bir uyarıyı içerisinde @ olmayan bir gönderime uyarı olarak çıkarabiliyorduk. Fakat HTML5 bu işlemi tarayıcıyla etkileşim kurarak otomatik yapıyor.

Form içerisinde kullandığınız ve ziyaretçinin elektronik posta adresini girmesi gereken bir alan düşünün. Input öğemiz içerisine input type=”email” ekleyerek girilen verinin bir elektronik e-posta adresi olup olmadığını JavaScript desteğine ihtiyaç duymadan kontrol edebiliyoruz.

Bir diğer güzel örnek tarih form öğeleri için gösterilebilir. Tarih bilgisi eklediğiniz klasik form öğesine input type=”date” alanını ekleyin ve farkı görün.

Date

Gördüğünüz gibi form öğemiz fazlasıyla detaylanıyor, etkileyici bir tarih öğesi formun :active elemanına ekleniyor.

Ayrıca input öğelerinin sonuna eklenen required tanımlaması ile form içerisinde bu alanların boş bırakılmasının önüne geçilebiliyor. Kullanıcı doldurulması zorunlu bir alanı boş geçip submit buttonuna bastığında “Bu alanı boş bıraktınız!” uyarısıyla karşılaşıyor.

Sizler için HTML5 form örneği hazırladık. Böylece isim alanındaki required tanımlamasının ne işe yaradığını daha iyi açıklayabilmiş olacağız.

Gayet kullanışlı değil mi? Konuya yavaş yavaş ısındığınızı hisseder gibiyiz.

Yeni elemanlarla yapılandırma

Daha önce söylediğimiz gibi geleneksel <div> yapınızı yeni elemanlarla değiştirmek çok zor değil. Buradan HTML4 için hazırlanmış CSS2 iskeletini görüntüleyebilirsiniz.

Başlangıç için yapmanız gereken HTML5 iskeletinizi oluşturmak olacaktır. Peki mobil cihazlara da uyumlu, estetik ve esnek bir web taslağı nasıl hazırlanır?

Eğer hala bu sorunun cevabını düşünüyorsanız sizi buraya alalım.

Başlangıç için ana elemanlarınızı block hale getirmenizi öneriyoruz. Böylece çoğu tarayıcı da aynı gözüken bir alt yapıya sahip olacaksınız.

header, footer, nav, article {display:block;}

<header> veya <footer> gibi bu yeni elemanların önemi ne?

Akla ilk gelen sorulardan birisi niye böyle bir güncellemeye gerek duyulduğu.

HTML5’in yeni elemanları tarayıcılar tarafından otomatik olarak tanımlanıyor. Siz tarayıcı üzerinden web sayfasını görüntülerken kullandığınız program <footer> elemanını fark ediyor ve o kısmın footer olduğunu otomatik olarak algılıyor. Aynı şekilde tarayıcılar menünün, headerın veya makalelerin nerede olduğunu yine bu elemanlar sayesinde otomatik olarak tanımlıyor.

Bu aşinalık web sayfalarının çalışma hızını arttıyor ve tüm tarayıcılar için tek tip sonuçlandırmaya sebep oluyor. Böylece web geliştiricilerinin yaptıkları tasarımları onlarca tarayıcıya uydurmak için vakit kaybetmesi engellenecek gibi. Tabii bu süreç biraz zaman alacak.

Tarayıcıların dışında bu yeni elemanlar arama motorlarını da sitenize dost ediyor. Bir Google botu olduğunuzu varsayın ve aşağıdaki sayfaları taradığınızı düşünün.

<div class="makale">
Ben bir makaleyim. Çok önemli bilgiler içeriyorum ama o kadar gizli saklı kalmışım ki kimse beni okumuyor.
</div>

Google sadece makale diye sınıflandırılmış bir div görecek ve içerisinde 2 cümlelik bilgi olduğunu algılayacak. Bu bilgiler sitenin hangi bölgesi, header mı, footer mı, yoksa menünün bir parçası mı, bütün bu soru işaretleri SEO değerinizi düşürecektir.

Ve sonra bambaşka bir siteye (unutmayın hala Google botusunuz) giriyorsunuz.

<article>
Hiçbir şey anlatmıyorum. Ama yine de makaleyim ve çok popülerim!
</article>

Google botu sitedeki diğer öğeleri taradıktan sonra makaleye odaklanacaktır. Makalenin article içerisinde bulunduğunu gören bot hızlıca indeks alıp kendinden emin bir şekilde arama kriterini article olarak düzenleyecektir. SEO işte bu kadar detaylardadır.

Kapanış

HTML5 desteğiyle tasarım üzerine genel anlamda konuştuk. Yeni şematik ve interaktif yapıyla HTML4’ün geleneksel yapısını kıyasladık.

Adobewordpress olarak sizlere HTML5 kategorimiz altındaki örneklere ve makalelere göz atmanızı öneriyoruz. Yenilikler düne kadar kapımızdaydı. Fakat bugün HTML5’in kullanımı günden güne yaygınlaşıyor. Yeni oluşum içerisinde yer almak önemli. Bu yüzden sıklıkla HTML5 konusuna değiniyoruz ve değinmeye de devam edeceğiz.

Bir sonraki makalemizde görüşmek üzere, hoşça kalın.