HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!
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 makalenin devamında şunları konuşacağız :
Bu makalenin devamında şunları konuşacağız :
- HTML5′in ilk gününden bugüne olan gelişimini,
- 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, şmdi 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 CSS3de bu süreci hızlandıran en etkin elemanlar.
HTML5, internet'in çekirdek teknolojilerinden HTML işaretleme standardının beşinci sürümüdür.Internet Explorer, Mozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından kısmen desteklenmektedir, Kısaca H5 Google Chrome ve Safari tarayıcılarının güncel sürümleri üzerinde, deneme aşamasında da olsa çok daha iyi bir şekilde çalışmaktadır.
Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda kodlanırsa kodlansın, yine de fazladan yazılan kodların işlevselliği bozduğu bilinmektedir. Bu yüzden HTML 5 bu ihtiyaçları karşılamak adına geliştirilmeye başlanmıştır. Video paylaşım sitesi Youtube, deneme aşamasında HTML5'i kullanıcılarına sunmaktadır.
HTML5 kullanmak aynı zamanda UI (kullanıcı arabirimi) mühendislerinin ve back end (sunucu uygulama) geliştiricilerinin sadece tek codebase kullanımından yararlanabiliyor olmaları demektir. Yapının temelleri aynı kalsa da, her platforma entegre edilmiş back end layerlar ve görüntüler olabilecektir. Bu, birbirine bağlı bir ürün tecrübesinin yaratılmasına yardım eden ürün çizgisinin karşısında, gelişimin yayılma sürecini hızlandırmaktadır.
Ses veya film etiketleri gibi birçok spesifik yönleriyle birlikte kullanılması gereken HTML 5, sadece bir biçimleme dili olmasından ziyade web uygulamaları yaratmakta da kullanılabilmektedir. CSS3 ve JavaScript ile birleştirmek çok daha güçlü uyumlu ve sağlam uygulamaları mümkün kılmaktadır. Uygulamalar bu sayede binlerce cihazda birçok ihtimale uygun şekilde kullanılabilmektedir. Özellikle de iliştirilmiş platformlar ve bağlanmış cihazlarla çok daha güçlü olacaklardır.
HTML5 tüm HTML Sürümleri (HTML1.0 vb) ile uyumludur.
--------------------------------
- Oluşum
Web Köprü Uygulama Teknolojisi Çalışma Grubu web formları ve uygulamaları üzerine çalışırken, World Wide Web Konsorsiyumu XHTML 2.0. üzerinde çalışıyordu. Ve bu iki isim HTMLi geliştirmek amacıyla bir araya geldi.
W3C ve WHATWG isimlerinin işbirliğiyle oluşumunu sürdüren HTML5, yeni olmasına rağmen birçok güçlü browser tarafından desteklenmekte.
HTML5 için oluşturulmuş bazı kurallar :
- Yeni özellikler HTML, CSS, DOM, ve JavaScript üzerinden olmalı.
- Dışarıdan eklenen uygulamaların sayısı düşmeli. (Flash gibi)
- Daha iyi hata raporlaması olmalı.
- Yazılım düzeni için daha fazla biçimlendirme imkanı olmalı. (markup)
- Aygıttan bağımsız çalışmalı.
- Gelişim süreci kullanıcıya açık olmalı.
--------------------------------
- Yapı
HTML5 için sadece bir adet <!doctype> belirtilmeli ve o aşağıdaki gibi olmalı,
Kod:
<!DOCTYPE html>Küçük bir HTML5 sayfa yapısı örneği :
Kod:
<!DOCTYPE html>
<html>
<head>
<title><em>Başlık</em></title>
</head>
<body>
<em>İçerikler</em>
</body>
</html>- Dikkat Çeken Özellikleri
- 2 boyutlu çizim için <canvas> elemanı.
- Multimedyalar için <video> ve <audio> elemanları.
- Yerel depolama desteği.
- Belirli alanlar için yeni elemanlar : <article>, <footer>, <header>, <nav>, <section>
- Yeni form kontrol araçları : calendar, date, time, email, url, search.
- Not : An itibariyle HTML5 resmi standart HTML versiyonu değildir ve tüm tarayıcı desteğini içermez. Fakat günden güne Safari, Chrome, Firefox, Opera ve Internet Explorer gibi tarayıcılar HTML5 özelliklerini güncellemelerle eklemekte.
HTML5′i temel anlamda tanıdık. 
WordPress Teması Mı Yapmak İstiyorsunuz ?
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.
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 Explorerdı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.
Kod:
<!DOCTYPE html>Yeni Yapı Elemanlarının Kullanımı
HTML4 ile tasarlanmış web sayfalarının iskeleti <div> elemanlarından oluşmaktadır.
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 ;
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. aşağıdaki gibi örnek bir kullanım hazırlayalım
Kod:
<article>
Türkmmo büyük bir forumdur. 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>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.
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ım örnek kod aşağıdaki gibidir
HTML Kodu;
Kod:
<form>
<div>
<label for="email">İsim</label>
<input type="name" required>
</div>CSS Kodu;
Kod:
*{font:12px Helvetica; margin:4px;}
label{display:table-cell;}
input{display:inline;}
div{display:table-row;}Gayet kullanışlı değil mi, konuya yavaş yavaş ısındığınızı hisseder gibiyim.
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,
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
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.
Kod:
header, footer, nav, article {display:block;}
[CENTER]
[/CENTER]
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.
Kod:
<div class="makale">
Ben bir makaleyim. Çok önemli bilgiler içeriyorum ama o kadar gizli saklı kalmışım ki kimse beni okumuyor.
</div>
Ve sonra bambaşka bir siteye (unutmayın hala Google botusunuz) giriyorsunuz.
Kod:
<article>
Turkmmo paylaşımları beni mutlu ediyor..
</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.
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ğiniyorum ve değinmeye'de devam edeceğim.
Bir sonraki konuda görüşmek üzere, hoşça kalın.
Son düzenleme:
