HTML5 web tarayıcısını uygulama geliştirebileceğimiz bir platforma dönüştürdü. Artık kullanıcı arayüzü mantığını sunucuda değil istemcide, web tarayıcısında oluşturuyoruz. İstemci tarafta uygulama geliştirirken kullanabileceğimiz üç temel teknoloji bulunuyor: HTML, CSS ve Javascript. HTML'i arayüzü oluşturan bileşenlerin biri birileri ile olan ilişkilerini tanımlamak için kullanıyoruz. CSS ise bu bileşenlerin tarayıcıda nasıl görüneceğini kontrol ediyor. Ancak hem HTML hem de CSS durağan bir içerik, kullanıcı arayüzü sunuyor. Kullanıcının arayüzle etkileşimi için bir arayüz mantığının çalıştırılması gerekir. Bunun için ise bir programlama dili olarak Javascript'i kullanıyoruz. HTML5 ise HTML'in en yeni sürümü, daha önceki sürümlerde olduğu gibi HTML5 temelde bir takı teknolojisi. HTML5, geriye doğru uyumlu. Daha önceki takıları yine bu sürümde de kullanabilirsiniz. HTML5 ile birlikte yeni bir çok takı daha geldi. Ancak HTML5'in getirdiği en önemli yenilik bu yeni takılar değil. Yenilik, Javascript üzerinden erişebildiğimiz HTML5 API'leri: WebSocket API, Local Storage API, Battery Status API, FullScreen API, Canvas API, Geolocation API, Vibration API, Multimedia API, Local Storage API, File API, WebGL API, Drag-and-Drop API ve diğerleri.
DOM API web tarayıcısı sayfayı tüm bileşenleri ile birlikte yükledikten sonra bellekte ağaç yapısında bir tür modelini oluşturur. Bu model bileşik tasarım kalıbı (=composite design pattern) kullanılarak gerçekleştirir. DOM API ile Javascript üzerinden bu ağaç üzerinde gezinmek, değişiklik yapmak, düğüm eklemek ve çıkarmak mümkün olur. DOM ağacının tanımladığı dokümana, örtük document nesnesi üzerinden ulaşılır. document nesnesinin getElementById(), getElementsByName(), getElementsByTagName(), getElementsByTagNameNS() gibi metotlarını kullanarak bu ağaç üzerinden takı adına, id değerine, class ismine göre seçim yapmak mümkün olur. Salt Javascript kullanılarak DOM'da değişiklik yapmak uğraştırıcıdır, zaman alır ve kodu daha sonra değiştirmek güç olur. Bunun için jQuery Javascript kütüphanesi kullanılabilir. jQuery'nin seçicilerini kullanarak DOM'da seçim yapmak ve seçilen düğümleri düzenlemek kolaydır. jQuery seçicileri ile ilgili detaylı anlatım için bu yazıyı okuyabilirsiniz. CSS ile de DOM'da seçim yapıp bu seçtiğimiz bileşenlerin tarayıcıda nasıl görüneceğini kontrol ediyoruz. CSS ile çoğu zaman görünümün nasıl olacağını kodlasak da bazen içeriği değiştirmek için kullanabiliriz. Aşağıdaki HTML5 dokümanında çeşitli uzantılı dosyaların listesi veriliyor:
<!DOCTYPE html> <html> <head> <title>Files</title> </head> <body> <table> <tr> <td><a href="java.pdf">Java in action</a></td> </tr> <tr> <td><a href="python.docx">Python tutorial</a></td> </tr> <tr> <td><a href="cobol.pptx">Cobol programming</a></td> </tr> <tr> <td><a href="languages.xlsx">Comparison of programming languages</a></td> </tr> </table> </body> </html>
 |
| HTML'in tarayıcıda görünümü |
Bu dosyaların bağlantılarının yanında dosyanın uzantısına, türüne, formatına göre görüntü göstermek istiyoruz. Bu problemin çözümü için CSS'den yararlanabiliriz:
table tbody a[href$=".pdf"]:after { content: url("../pdf.png"); } table tbody a[href$=".docx"]:after { content: url("../docx.png"); } table tbody a[href$=".pptx"]:after { content: url("../pptx.png"); } table tbody a[href$=".xlsx"]:after { content: url("../xlsx.png"); }
CSS'de uzantısı pdf, docx, pptx ve xlsx ile biten tüm <a> takılarını seçip, bu elemanlardan sonra uzantıyı gösteren bir imge yerleştiriyoruz:
 | |
|
file-extensions.sass:
$ext-list: "pdf", "docx", "pptx", "xlsx" @for $i from 1 through length($ext-list) $ext: nth($ext-list, $i) table tbody a &[href$="#{'.'+$ext}"]:after content: url("../#{$ext}.png")
SASS ön işlemcisi kullanarak file-extensions.sass dosyasından CSS üreteriyoruz:
table tbody a[href$=".pdf"]:after { content: url("../pdf.png"); } table tbody a[href$=".docx"]:after { content: url("../docx.png"); } table tbody a[href$=".pptx"]:after { content: url("../pptx.png"); } table tbody a[href$=".xlsx"]:after { content: url("../xlsx.png"); } /*# sourceMappingURL=file-extension.css.map */
Neyse ki bu sefer CSS'si biz kodlamak zorunda kalmadık!
