Yenilenen Arayüz

Yeni nesil bir çok tarayıcıda gördüğümüz içeriğe daha fazla alan bırakan yeni tasarım kabulünü Firefox 4’de de görüyoruz. İnternet Explore 9’da dediğimiz gibi hepsi ortalama olarak doğru yolu buluyor.

Daha derli toplu bir arayüze kavuşmuş Firefox4. Gerçi o kadarda problememiz yoktu arayüzü ile ilgili, ama yenilenmiş daha hoş olmuş. Sekmeler Chrome’daki gibi üste alınmış. Ana bir Menü Sağ üst köşeye Firefox başlığı ile eklenmiş. Ana Sayfa ve Yerimleri arama kutusu yanına yerleştirilmiş. Ayrıca Yeni Eklenti Düzenleme arayüzü eklenmiş.

Performans

Bencee en büyük artıyı hızdan, performanstan yana olmuş. Bellek kullanımda uzun süreli kullanımda şişmeler oluyor ve can sıkıcı sonuçlar doğruyordu. İlk kullanım deneyimlerime göre gayet başarılı bir gelişme olmuş bu konuda. Google Chrome’un öncülüğünde artık tüm tarayıcıların önceliğini hız konusuna veriyor. Bence bu güzel bir gelişme.

Yenilenen javascript motoru(Jägermonkey) ve HTML5 motoru sayesinde bir önceki sürüme göre 6 kat daha hızlı olduğunu söylüyor Mozilla. Bunu kullanırken hissediyorsunuz. Ayrıca “hardware acceleration” sayesinde hızlanma daha fazla hissediliyor. İnternet Explorer 9’dan hatırladığımız bu özellik grafik işlemciyide devreye sokuyor.

Eklentileri güncellemeleri arkaplanda yükleyerek eklentilerin eski sürümlerdne dolayı yavaşlamasını engelliyor. Eklenti güncellemeleri sonrası tarayıcı kapatıp açmaya gerek yok artık.

Yeni Sekme Özellikleri

Panorama özelliği sayesinde çok fazla sekme kullanan kullancılar için bir düzeni sağlamak artık daha kolay olacak.

Sekmeli yapıya geçtikten sonra bir çok insan sekmelere alıştı, bunun sonucu olarakta sekmeleri düzenleme ihtiyacı duydular. Bu ihtiyacı çok iyi gören Firefox mart ayındaki bu yeni tarayıcı sürümleri içinde belki en iyi özelliği kullanıcılarına sundu.

Ayrıca sekmeleri sabitleme özelliğide eklendi. Daha önce Chrome’dan alışık olduğumuz uygulama sekmeleri sabitleme özelliği artık Firefox’da da var. Çok kullandığımız özellikleri veya uygulamaları sabitleyerek devamlı göz önünde tutuyoruz. Sabitlenen sekmeler görüntü olarakta sadece ikonları görünür kalıyor, bölylelikle fazla yer kaplamıyor.

Senkronize Firefox (Firefox Sync)

Daha önce eklenti olarak sunduğu bu özelliği artık program içinde geliyor. Farklı araçlar ile internete girenler için ve farklı yerlerde tarayıcısının özelliklerini her kullandığı yere taşımak isteyenler için güzel bir özellik. Tüm tarayıcı bilgileriniz ve ayarlarınızı her kullandığınız yerden erişmenizi sağlıyor bu özellik.

Web Standartları Desteği Arttı

• HTML5 yorumlama motoru geliştirildi,
• HTML5 Form elemanları, form doğrulama ve form özellikleri desteğini arttırıldı,
• HTML 5 Yapısal elemanları desteği sunuyor. <article>, <section>, <nav>, <aside>, <hgroup>, <header> ve <footer>,
• HTML5 hidden özelliğini destekliyor,
• Yeni HTML5 özelliklerini destekliyor: <mark>, <figure> ve <figcaption>,
• WebSocket APı desteği sağlıyor,
• WebGL desteği sunuyor,
• Google’un çıkardığı WebM video formatı desteği sunuyor,
• SVG animasyonu SMIL desteği sunuyor,
• Medya elementlerinin(video, audio) buffered özelliğini destekliyor,
• Medya elementlerinin(video, audio) preload özelliğini destekliyor,
• CSS geçiş(transitions) özelliği desteği sunuyor,
• Matematiksel işlemler yapmayı sağlayan -moz-calc özelliği desteği sunuyor,
• CSS dokunma özellikleri desteği sunuyor,
• -moz-font-feature-settings, -moz-tab-size, resize özelliklerini destekliyor
• CSS3 :-moz-handler-crashed, :-moz-placeholder, :-moz-submit-invalid, :-moz-window-inactive, :invalid, :optional, :required ve :valid sözde sınıflarını ve :-moz-focusring sözde seçici desteği sunuyor
• -moz-background-size yerine background-size, -moz-border-radius yerine border-radius ve -moz-box-shadow yerine box-shadow isim değişikliklerini yapıyor
• Firebug’dan alışık olduğumuz Web Konsol özelliğini sunuyor

Diğer Özellikler

Beni izleme(Do Not Track) özelliği eklenmiş,  Çoklu dokunma özelliği ve daha güvenli gezintiler için bazı özellikler sunuyor. Ayrıca Chrome’dan alışık olduğumuz otomatik güncelleme özelliği ile biz indirmeden yeni sürümler kurulacak artık. Bu özellik tüm tarayıcılara gelirse çok güzel olur.

Sonuç

Mart ayı tarayıcılar için kendilerini gösterme zamanı olarak geçiyor. Her yeni özellik bizi heyecanlandırıyor. Gelişen web teknolojilerine ayak uyduran tarayıcılar ayrıca yeni ve kullanışlı özelliklerde sunuyor. Firefox’un hız sorununu bu sürümde düzelttiği kanısına varsam da uzun süreli kullanımlardaki performansını görmeden kesin bir şey söylemek zor.

Firefox’a FireBug ile olan göbek bağım nedeni ile benim için Firefox birincil tarayıcımdır ve bu yeni sürüm ile birlikte bu daha çok pekişecektir.

Son olarak rekabet güzel şey.

Yeni nesil tarayıcıların Hız testi http://lifehacker.com/#!5784396/browser-speed-tests-firefox-4-internet-explorer-9-chrome-11-and-more

Kaynaklar

• http://www.mozilla-europe.org/tr/firefox/features/
• http://limi.net/articles/firefox-4
• http://www.youtube.com/watch?v=gFmuNApHFec&feature=autoshare
• http://hacks.mozilla.org/2010/07/firefox4-beta2/
• http://hacks.mozilla.org/category/firefox-4/
• http://hacks.mozilla.org/category/firefox-4/
• http://blog.mozilla.com/blog/2011/03/18/check-out-what%E2%80%99s-coming-soon-in-firefox-4-2/
• http://www.webrazzi.com/2011/03/22/firefox-4/
• http://lifehacker.com/#!5784255/whats-new-and-awesome-in-firefox-4
• http://hacks.mozilla.org/2011/03/firefox4-performance/
• http://www.favbrowser.com/download-firefox-4-final/
• https://developer.mozilla.org/en/Firefox_4_for_developers

Web mecrasında çalışanları tarayıcıları ve yetenekleri konusunda çok iyi bilgi sahibi olması gerekir. Helede Arayüz Geliştiricileri için çok önemlidir. Çünkü kodumuzu yazarken farklı tarayıcılara göre yazıyoruz. 

Bu yazımda İnternet Explorer 9′un önemli özelliklerinde bahsedeceğim. 

Yeni Görünüm

En büyük değişimlerden biri görünümde gerçekleşmiş. Yeni nesil tarayıcılardaki anlayış ile hareket edilmiş menü ve adres çubuklarının kapladığı alan en aza indirilerek gösterilen sayfa alanı genişletilmiştir. 

Yukarıda görüldüğü gibi gittikçe tarayıcılar orta noktada buluşuyorlar.

Bunun dışında;

• Sekmelerin yapısı ve görünümüde değiştirilmiş.
• Yeni sekme açıldığında karşımıza çıkan boş ve anlamsız bir sayfa yerine split görünmlü en sık açtığımız siteler listeleniyor.
• Yeni bir bildirim alanı eklenmiş. İndirilen dosyalara ait bilgililerin gösterilmesi, popup pencerelerini ait bilgiler, güvenliğe ait uyarılar, şifre kayıtları vd. bildirimleri artık tarayıcının alt kısmında gösteriliyor.
• Dosya yüklemek için kullanılan Yükleme Yöneticisi kısmı yenilenmiş ve kullanışlı bir yapıya kavuşturulmuş.

Standartlar ve Performans

İnternet Explorer 9′un alt yapısal olarak en büyük yeniliği GPU destekli yani "Hardware Acceleration" destekli yeni javascript tarama motoru(çakra) sayesinde web sitelerini daha hızlı yorumluyor. 

İnternet Explore 9′un geneline baktığımızda diğer tarayıcılara göre en büyük avantajı GPU destekli tarama motoru olarak görünüyor. Bu sayede web sayfalarını masaüstü programlar gibi hızlı ve beklemeksizin kullanım imkanı sunmayı düşünüyor. GPU destekli "Hardware Acceleration" kastımız şudur; grafik desteğini bilgisayar işlemcisinden(cpu) grafik işlemcisine(gpu) taşımayı sağlayan javascript motoru sayesinde ana işlemci üzerindeki yükü dağıtarak daha fazla verim almayı sağlıyor. Buda bize web’de görsel bakımdan zengin içerikli siteleri daha hızlı gezme imkanı sağlıyor.

Bu yenilenen ve hızlandırılan tarama motorları HTML5 desteğini sunuyor. Burada şöyle bir liste var. Destekleme konusunda İnternet Explorer’un eski sürümlerine göre çok büyük eklemeler var, ancak diğer tarayıcıların son sürümlerini dikkate aldığımızda neredeyse yarı yarıya bir eksiklik var.

http://www.findmebyip.com/litmus

Sitesini incelemenizi öneriyorum. 

Aşağıda İnternet Explorer 9′un desteklemediği özelliklerin belli başlıları listesi var.

• Application Cache (offline)
• Web Workers (threads in JavaScript)
• HTML5 Forms (validation mechanism, CSS3 selectors)
• JavaScript Strict Mode
• ForeignObject (embed external content in SVG)
• SMIL Animations (SVG animations)
• File API
• WebGL (3D)
• CSS3 Transitions (for animations)
• CSS3 Text Shadow
• CSS3 Gradients
• CSS3 Border Image
• CSS3 Flex box model
• ClassList APIs
• FormData
• HTML5 History API
• Drag’n Drop from Desktop

Pek iç açıcı bir tablo değil.

Performansla ilgili bir çok yayınlanan grafik var. Bunlara bakıldığında İnternet Explorer 9 kendi ailesinin en hızlı ve yeni nesil tarayıcılara yaklaşan performansı var. 

Windows 7 ile Sorunsuz ve Tümleşik Çalışma

Masaüstünüzü ikiye ayırarak geniş ekranlarda iki farklı siteyi tek ekran görme imkanı sağlayan bir yapıyı kullanabilirisiniz. 

Windows 7′nin programlar için sunduğu en sık kullanılan sitelere daha hızlı erişimi sağlayan yapı web sitelerinde sağlanmış. Sık kullandığımız web sitelerini programlar gibi alt barımıza sabitleyebiliyoruz.

Eklenti Desteği ve Eklenti Performans Göstergesi

Eklenti Performans göstergesi bize eklentilerin ne kadar zaman kaybına neden olduğunu gösteriyor. Biz bu verilere göre eklentiyi kaldırıyor veya bize lazım ise kalmasına karar veriyor. Bence diğer tarayıcılarında edinmesi gereken bir özellik bu.

Gelişmiş Adres Çubuğu

Adres çubuğu hem arama yapmamıza, hemde web sitelerinde gezmeye yarayan bir yapıya kavuşturulmuş. Buna "Tek Kutu" adı verilmiş. Bir çok yeni nesil tarayıcının yöneldiği bu sisteme İnternet Explorer 9′da getirilmesi güzel.

Diğer tarayıcılardan elimizin alıştığı ve bize çok hız kazandıran bu yapı tüm tarayıcılar için güzel bir gelişme.

Sonuç

Sonuç olarak şunu söyleyebilirim ki yukarıda açıkladığım ve araştırdığım kadarı ile bir çok yönü ile gayet başarılı bir tarayıcı olarak görünüyor İnternet Explorer 9, ancak gerek HTML5 ve gerekse CSS3 özelliklerini destekleme konusundaki eksiklikleri beni düşündürüyor. Anlayamadığım bir olay varki bir çok yönden gelişmiş bir tarayıcı sunmasına rağmen nasıl oluyorda bu özellikleri desteklemiyor, anlam verebilmiş değilim. Ayrıca Windows XP’ye yüklenemeyecek olmasıda ilginç.

Chrome’daki güncelleme mantığı ile gelen bir yapıya sahip olsa idi bu durumda bir türlü geçiştirilebilirdi, ancak böyle bir yapıda olmadığını görünce üzülüyorum açıkçası. Hala %60 seviyelerinde kullanıcısı olan bir tarayıcıdan daha sorunsuz bir tarayıcı çıkarmasını bekliyordum. 

Mevcut tarayıcıları düşündüğümde belki sadece GPU nedeni ile belki kullanılabilir ama bu sene içinde çıkacak diğer tarayıcılarında bu özelliği kazanacağını ve İnternet Explorer 9 ile belki geçici bir yükselme yaşansa bile daha sonra düşüşün devam edeceğini düşünüyorum.

Kaynaklar

• http://articles.sitepoint.com/article/whats-new-in-ie9
• http://lifehacker.com/#!5638885/internet-explorer-screenshot-tour-the-best-new-features-in-ie9
• http://windows.microsoft.com/tr-TR/internet-explorer/products/ie-9/features/fast
• http://blogs.msdn.com/ie/archive/2010/03/16/IE9-Platform-Preview-Feedback.aspx
• http://blogs.msdn.com/ie/archive/2010/03/16/html5-hardware-accelerated-first-ie9-platform-preview-available-for-developers.aspx
• http://blogs.msdn.com/ie/archive/2010/03/18/the-new-javascript-engine-in-internet-explorer-9.aspx (yeni javascript motoru ile ilgili)
• http://blogs.msdn.com/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx (ie9′un svg desteği)
• http://arstechnica.com/microsoft/news/2010/03/platform-preview-gives-web-developers-first-taste-of-ie9.ars
• http://robertnyman.com/2010/03/17/testing-the-internet-explorer-platform-preview-ie9-reviewing-the-good-the-bad-and-the-main-letdown/
• http://msdn.microsoft.com/en-us/ie/ff468705.aspx
• http://www.guardian.co.uk/technology/blog/2010/mar/16/internet-explorer-9-preview-microsoft
• http://daron.yondem.com/tr/PermaLink.aspx?guid=619ab009-08e7-4d56-9017-1b85cc2d806a
• http://mashable.com/2010/03/16/ie9-preview/
• http://www.techradar.com/news/internet/ie9-crazy-fast-but-rivals-still-have-the-speed-edge-677295
• http://blogs.msdn.com/ie/archive/2010/03/17/test-drive-104-new-professional-grade-tests-for-web-standards.aspx
• http://shiftdelete.net/internet-explorer-9dan-yeni-detaylar-19151.html
• http://shiftdelete.net/internet-explorer-9dan-kotu-haber-19178.html (windows xp desteğinin olmamaası)
• http://web.archive.org/web/20010602021058/microsoft.com/windows/ie/preview/default.asp
• http://www.computerworld.com/s/article/9185338/Internet_Explorer_9_beta_strips_down_for_speed
• http://www.bildirgec.org/yazi/internet-explorer-9-un-beta
• http://gizmodo.com/5638742/internet-explorer-9-uh-nice
• http://lifehacker.com/5638885/internet-explorer-screenshot-tour-the-best-new-features-in-ie9
• http://www.turk.internet.com/portal/yazigoster.php?yaziid=29437
• http://www.nuricankaya.com/default.asp?gunluk_id=455
• http://www.nuricankaya.com/resimler/2010_Eylul/ie9guide.pdf
  
• http://www.engadget.com/2011/03/14/internet-explorer-9-launches-tonight-weve-got-your-early-look/
  
• http://msdn.microsoft.com/en-us/ie/ff468705 (css3 ve html5 desteği)

HTML5 bizim div ile oluşturduğumuz yapı yerine kendi yapısal etiketleri yerleştirdi ve bu hareketli ile tablolu yapı ile site yapısına son darbeyi indirdi.

Alışkanlıkları kolay bırakamayan insanlar hala tablo ile kodlamaya devam ediyor. Ben çalışma hayatımın belli bir bölümün tablolu yapı ile kodlama yaparak geçirdim, daha sonra div ile kodlamaya başladım. Her ikisininde kolaylıklarını ve zorluklarını gördüm. Div ile kodlamanın tek dezavantajı dikeyde ortalama diyebilirim. Onun dışında tablolu yapıya göre avantajlıdır. Aşağıda genel başlıklar ile div’li yapının tablolu yapıya olan avantajlarından bahsedeceğim.

• Daha hızlı sayfa yükleme zamanları
  Tabloların yapısından kaynaklanan fazla kod ve kod karmaşası yazılan kodun boyutunu arttırır buda sitenin daha yavaş yüklenmesine nedendir. Siteyi hızlandırmak için divli yapıda çeşitli yöntemler vardır. Örn:(CSS sprite tekniği)
• Daha Düşük Barındırma ücretleri
  Daha az yüklenme zamanı barındırma ücretleri ve bant genişliğinin az kullanılması demektir ve bunun sonucu barındırma hizmeti aldığımız şirkete daha az ödeme yaparız. Küçük sitelerde değilde büyük çaplı sitelerde bu konu büyük önem kazanır.
• Site düzenlemek daha daha kolay
  Tablolu yapının zorluklarından biri karmaşık yapısından dolayı düzenlemek çok zor olur. Div ile hazırlana sitelerde düzenleme yapmak daha kolay olur
• Tekrar tasarlama daha ucuzdur
  Hazır sistemlerde gördüğümüz gibi(wordpress vb.) aynı yapı üzerine farklı tasarımların adapte edilmesi kolaydır.
• Web sitesinde Görsel tutarlılık vardır
  Tek yerden(css) kontrol edilen div’li yapı tablolu yapıya göre daha tutarlı olur.
• Daha iyi SEO için
  Daha az kod olması ve kodlama yapısının tablolu yapıya göre daha düzenli olması arama motorlarının indekslemesi için bir avantajdır. Ayrıca h1, h2, h3 … ve ilgili elementlerin yerinde kullanılması ile arama motorlarına daha uygun kodlama yapabiliriz. Ayrıca CSS ile birçok javascript ile yapabileceğimiz işleri yapabiliriz. Örneğin menüler gibi.
• Hızlı web sitesi çapında güncellemeleri
  CSS ile kontrol edilen siteler daha hızlı kontrol edilir ve düzenlenir. Bu projelerin daha hızlı oluşması için bir avantajdır.
• Takım çalışmalarına daha uygundur
  Web sitesi önyüzü ve arka planı ayrımı yapılır. Bu sayede daha organize site üretimi yapılabilir. Arayüz geliştirici ve programcı arasında daha kolay ve güzel iletişim sağlanır. İki ayrı koldan iş yürür.
• Kullanılabilirlik ve Erişilebilirlik Artar
  Farklı tarayıcılara göre kod yazmak daha kolaydır. ie6 ile uğraşırken bu başlığı pek inandırıcı bulmayabilirsiniz, ancak eskiden tablolu yapı zamanımda Netscape ile ie5.5 ile az uğraşmazdık ve bir çok yerinde sabunlardık(es geçerdik)

  Div ile kodlama yapılırken yazılan kodlar css yardımı ile farklı araçlar için ayrı ayrı kodlanmadan sadece css kodu değiştirilerek elde edilebilir. Mesela yazıcıdan çıktı almak için print medya tipi kullanılan css yorumlanır, benzer şekilde mobil araçlar için handle medya tipli css dosyası kullanır. Şimdi iPone, iPad içinde benzer ayrımı yapabiliyoruz.

• Daha karmaşık düzenler ve tasarımlar
  Tablolar ile oluşturulan karmaşık yapılı siteler bazen içinden çıkılmaz haller alabiliyordu, ancak div ile kodlama yaparken birçok yapı kolay bir şekilde oluşturulabiliyor.
• Boş GIF kullanımı
  Tablolu kodlamada düzeni sağlamak için kullandığımız 1×1 lik bir saydam gif hazırlanır ve tablo düzeni bu gifler yardımı ile sağlanır. Div ile kodlamada böyle bir ihtiyaca gerek yoktur. Bu fazla kod ve yükten bizi kurtarır.
• Geleceğe dönük bir yapıdır
  HTML5 ile birlikte gelen yeni etiketler ve HTML5’in yapısı div ile kodlamanın devamı niteliğindedir. Daha önce yazdığım HTML5’in yapısal elemanları adlı makaleye göz atın.

Sonuç olarak şunu söyleyebilirim ki, 2002’den beri div ile kodlama yapıyorum ilk başlarda çok zorlanıyordum, hatta ilk projemde(koc.net) yarı div yarı tablolu bir yapı kurdum zorluklarında dolayı. Ama şimdi daha fazla kaynak, örnek mevcut, birçok yöntem teknik ve araç  ile div’li yapıda kodlama yapmak artık daha kolay.

Hala tablo ile kodlama yapanlara önerim bir sonraki projenizi muhakkak div ile yapın ve ne kadar zorlansanız da tabloya geri dönmeyin, yani gemileri yakın.

HTML5’in filizlenmeye başladığı bir dönemde bu konuya dikkat çekmek istedim.

Kalın sağlıcakla

Kaynaklar

• http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/
• HTML Utopia Designing Without Tables Using CSS, 2nd Edition.pdf 1.konu
• http://phrogz.net/css/WhyTablesAreBadForLayout.html (madde madde)
• http://resources.bravenet.com/articles/site_building/CSS/tables_bad_css_good/ (genel anlatım)
• http://www.sitepoint.com/article/tables-vs-css/ (güzel anlatım, ama geniş)
• http://webdesign.about.com/od/layout/a/aa111102a.htm (güzel)
• http://www.chromaticsites.com/web-design-blog/2008-04-03/13-reasons-why-css-is-superior-to-tables-in-website-design/ (çok geniş ve güze lanlatım)
• http://www.andybudd.com/archives/2004/05/an_objective_look_at_table_based_vs_css_based_design/ (farklı bakış açısı)
• http://www.stopdesign.com/present/2004/ddw-seattle/tables/ (grafiklerle anlatım)
• http://osman.borutecene.com/tablosuz-tasarim-fetisi-ve-erisilebilirligi-zayif-web-standartlari/ (karşı görüş)
• http://erkana.wordpress.com/2006/09/15/tablosuz-tasarim-tableless/
• http://eskiz.ksahin.com/?category=web-tasarim/tablosuz-tasarm-tablolu-tasarma-kar
• http://alastairc.ac/2006/08/why-css-is-important-for-accessibility/
• http://www.w3.org/TR/CSS-access

Bir çok makale okuyorum ve uygulama görüyorum ama HTML5 ile bir şey yapmak daha nasip olmadı bana. HTML5 hakkında okuduklarım ve araştırdıklarım konulardan bir tanesi de konu başlığından anlaşılabileceği gibi. HTML dokümanının yapısını oluşturan elemanlar hakkında ufak bir yazı yamayı planladım. Aslında mevcut HTML’de farkını yazacağım. Daha bir sadeleştirilmiş diyebiliriz.

DOCTYPE

Doğru DOCTYPE Kullanımı hakkında bir makalem vardır. Doctype, dokümanın tipi gösteriyor yorumlayıcıya(tarayıcıya). Bu tanımlar çok uzun metinler içeriyordu ancak HTML5 bu tanımı kısaltmış ve çok güzel yapmış.

Şimdiye kadar ve hala kullanmakta olduğumuz bir doctype örneği,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Yukarıdaki HTML etiketi bize bu html dokümanının xhtml 1.0 olduğunu ve Transitional ise hem HTML hemde XHTML kurallarının bu dokümanda geçerli olduğunu gösteriyor. Peki HTML5’de bu işi nasıl yapıyoruz.

<!DOCTYPE html>

Bu kadar, kısa ve hafıza da kalıcı. HTML kodlarını Not Defteri ile  yazdığım dönemlerde çok çekerdim bu Doctype tanımlarında. Git bir yerden örneğini al falan. Sonra Dreamweaver bunu otomatik ekliyordu da yazmaktan kurtulmuştum. Açıkçası ben hiç bir zaman yukarıdaki HTML5 öncesi kodu aklıma yazamadım.

Doctype Etiketinin kapama etiketi ve işareti yoktur ve küçük büyük harf duyarlılığı yoktur.

HTML5 öncesi sürümler SGML kökenli diller olduğu için DTD tanımlarına gereksinim duyardı ancak HTML5 SGML kökenli olmadığı için buna gerek duymaz.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
...
</body>
</html>

Peki burada bir sürüm numarası yok nasıl sonraki sürümler ile bunu ayıracağız?

Burada şöyle bir şey var HTML5 geliştirilirken eğer buraya bir sürüm numarası verilse idi mevcut bütün web siteleri bu kapsam dışında kalacaktı, ama bu şekilde bir tanım ile eski ve yeni tüm dokümanlar aynı kefeye konmuş oldu. Geçmişide destekleyen bir yapıya kavuşturulmuş oldu.

Aslında yeni nesil tarayıcılar bir tanım yapılmasa daha standart modda belgeyi tanımladığı için Doctype’ın pek bir geçerliliği kalmamış idi ama yinede bir tanım yapmak iyidir. İE’nin ne yapacağı belli olmaz.

<html> Elemanı

Html dokümanlarını çevreleyen kapsayıcı bir elemandır <html> html5 öncesinde tanımımız

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Şeklinde idi. Buradaki xmlns değeri bu dokümanın anaçatısının http://www.w3.org/1999/xhtml kullandığını gösteriyor. HTML5 anaçatısı belli olduğu için tekrar tanımlamaya gerek duymuyor ve ayrıca iki adet dil tanımınında gereksiz olduğunu kabul ediyor ve sonuçta html5’teki tanımımız;

<html lang="en"></html>

şeklinde oluyor.

<head> içi tanımlar

HTML5 sadece Doctype tanımını değil ayrıca <head> içinde kullandığımız etiketleride ciddi manada basit hale getirmiştir.

Karakter kodu için kullandığımız

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Yerine HTML5 karışılığı

<meta charset="UTF-8">

Gayet basit ve akılda kalıcı.

Gelelim script eklemek için kullandığımız koda;

<script type="text/javascript" src="dosya_adi.js"></script>

HTML5′de ise;

<script src="file.js"></script>

Benzer şekilde ilişkilendirilmiş dokümanlar için kullandığımız

<link rel="stylesheet" href="style-original.css" type="text/css" />

yerine HTML5′de

<link rel="stylesheet" href="style-original.css" />

İşin kısacası, tüm tanımları olabildiğince kısaltmışlar. Süperde yapmışlar, şimdiye kadar bize çektirdikleri eziyet neydi kardeşim.

Sonuç olarak bir HTML5 basit yapısı

<!DOCTYPE html>
<html lang="">
<head>
 <meta charset="utf-8">
   <title></title>
   <meta name="description" content="" />
     <meta name="keywords" content="" />
   <meta name="robots" content="" />
</head>
<body>
</body>
</html>

Şeklinde olacaktır.

Kaynaklar

• http://www.w3schools.com/html5/tag_doctype.asp
• http://diveintohtml5.org/semantics.html
• http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/
• http://boblet.tumblr.com/post/141239118/html5-structure4

Yeni sürüm ile birlikte gelen yenilikler ;

CSS Inspection

Aslında Live View özelliği bir önce sürümde de mevcut ancak bu sürümden tam anlamıyla geliştirilmiş bu özellik Inspect butonu yardımı ile gerçek zamanlı kodumuza müdahale edebiliyor, düzenleme yapabiliyoruz.

Bu özelliğe biz pek yabancı değiliz Firefox’un FireBug eklentisi bize bu imkanı sağlıyor aslında ve daha fazlasını sağlıyor. Bir önceki sürümde bunu tam ekleyemediklerini söylemiştik, bu sefer tam anlamıyla eklenmiş.

En büyük yeniliklerden birisi bu olmuş.

Adobe BrowserLab

Adobe firmasının daha önce açtığı bu çevirimiçi tarayıcı test etme aracı bu yeni sürüm ile birlikte programdan direk erişilebilir hale getirilmiş. Örnek sayfanızı direk siteye gönderip test edebiliyoruz.

Ben aslında bu konuda pek tatmin olmadım. Çünkü BrowserLab zaten yeterli bir araç değildi. IETester tarzı bir test aracı daha makbul olacak bir araç olabilirdi.

Her şeye rağmen bir artıdır ama eksik olduğu kesin.

CSS Aktik/Pasif

Mevcut kod üzerinde gezerken elemanlara atanan css özellikleri bir tıklama ile aktif ve pasif hale getirme özelliği.

FireBug ile alışık olduğumuz bu özellik yeni sürüm ile birlikte kullanıcının kullanımına sunulmaktadır. Güzel bir özellik.

CSS başlangıç sayfaları

Bir önceki sürüme göre daha fazla hazır sayfa yapısı imkanı sunuyor yeni sürüm bizlere.

Ben bu özelliği kullanmasam da kullananlar için artı bir özellik.

HTML5 ve CSS3 Desteği

Program ilk çıktığında beraber çıkmaması çok büyük bir eksiklikti, ancak sonradan bir güncelleme ile bu paketi eklemeleri hatalarını çok çabuk anlamları güzel oldu. HTML5 ve CSS3 tanımlarını otomatik tamamlama ile ekleyebliyoruz artık.

Hele CSS3′te farklı tarayıcılardaki bu önek karmaşasına bir çzöüm olması güzel oldu.

PHP Tabanlı CMS Desteği

Bu sürümdeki en büyük atılım bence bu dur. PHP tabanlı CMS’leri WordPress, Drupal ve Joomla tam anlamıyla düzenleme imkanı sağlıyor bu yeni sürüm.

Bu CMS’leri geliştirenler için biçilmiş kaftan bence yeni sürüm.

Kolay entegrasyon, düzenleme, dosya upload etme vb. özellikleri ile tam bir CMS editörü olmuş Dreamweaver. Dinamik yapılı bu CMS’leri tam anlamıyla bir statik sayfa gibi kolayca değiştirebilme ve test edebilmeyi sağlıyor bizlere. Ayrıca otomatik tamamlama özelliği ile çok büyük kolaylık sağlıyor.

PHP özel sınıfı kod ipuçları

PHP ile oluşturulan özel sınıflar içinde otomatik tamamlama özelliği eklenmiş. PHP’ye yönelik bir editör olma eğilimi sergilemiş yeni sürümde Dreamweaver, bence mantıklı Visual Studio’yu geçemeyeceğini anlayınca PHP’ye yönelmiş.

Dinamik İlişkili Dosyalar

Bir önceki sürümde statik sayfalar için sunulan ilişkili dosyalar özelliği şimdi dinamik dosyalar içinde eklenmiş. Dreamweaver üzerinden PHP yaznalar için çok güzel bir özellik bence.

SVN(Subversion) Desteği Geliştirilmiş

Daha öncedende sunulan SVN(Subversion) özelliği bu sürüm ile birlikte bayağı bir geliştirilmiş. Diğer SVN programları ile uyum ve çerçevenin geliştirilmesi bu özelliği daha kullanılabilir yapmış.

Business Catalyst® ile uyum

Programlamaya gerek kalmadan güçlü çevrimiçi işletmeler oluşturmak için Dreamweaver ile Adobe Business Catalyst® hizmeti uyumu sağlanmış.

Basit Site Kurulumu

Mevcut site kurulumu penceresi biraz daha geliştirilerek kullanıcıya daha fazla seçenek ve kolaylık sunulmuş. Site kontrolünü Dreamweaver üzerinden sağlayanlar için güzel bir gelişme.

Widget Browser Özelliği

Bu özellik bize diğer insanların geliştiridiği yapıları sitemize ekleme imkanı sunuyor. Güzel bir özellik eğer uygulama sayısı artarsa gayet kullanışlı bir özellik

Özellik hakkında daha fazla bilgi için  http://tv.adobe.com/watch/learn-dreamweaver-cs5/using-the-widget-browser/ videoyu izlemenizi tavsiye ederim.

İlişkili Dosyaları Filtreleme

Dreamweaver çalıştığımız doküman ile ilgili dosyalarıda gösteriyor, yeni sürüm ile birlikte dinamik dosyalarıda göstermeye başlıyor. Bu bazen karmşaya neden oluyor, bunu içni bir çözü üretilmiş. Filtreleme menüsünden itediğimiz dosya tipini veya dosyaları filtreleye biliyoruz. Bu sayede ilişkili dosyaları daha düzenli bir hale getirme imkanımız oluyor.

Sonuç

Yeni sürümün CSS ve PHP üzerine yoğunlaşmış bir sürüm olmuş. PHP CMS geliştirenler için bir çok yenilik var. CSS için getirilen yenilikler ve daha fazlası zaten mevcut kullanımımda vardı benim. Gerek FireBug ve gerekse IETester. Benim asıl beklentim büyük bir ivme kazana javascript kütüphaneleri hakkında bir gelişme idi. Örneği jquery kütüphanesi ile çok çalışan biri olarak jquery otomatik tamamlama özelliği olması benim çok sevindirirdi, ne yapalım bundan sonraki sürümleri bekleyeceğiz artık bunun için.

Yukarıda belirttiğim gibi sitelerimiz farklı platformlarda ve tarayıcılarda test için AdobeLabs yeterli gelmiyor bence daha fazla gelişmiş bir araç ile bu açık kapatılmalıdır.

Kalın sağlıcakla.

Kaynaklar

• http://tv.adobe.com/watch/learn-dreamweaver-cs5/getting-started-gs-what-is-dreamweaver-cs5-/ (video)
• http://www.mymac.com/2010/07/cs5-dreamweaver-whats-new/
• http://webdesign.about.com/od/dreamweaver/p/differences-dreamweaver-cs5-and-dreamweaver-cs4.htm
• http://www.wpbeginner.com/news/wordpress-themes-made-easy-with-adobe-dreamweaver-cs5/
• http://www.thinkdigit.com/Features/Adobe-Dreamweaver-CS5-Review_4420.html
• http://www.pcmag.com/slideshow_viewer/0,1205,l%253D249944%2526a%253D249895%2526po%253D9,00.asp?p=y
• http://cs5.org/?p=1373
• http://www.adobe.com/tr/products/dreamweaver/whatsnew/

Html’in yeni versiyon çalışmaları sürüyor. Şimdiye kadar bazı elementler ve özellikler üzerinde mutabakat sağlanmış durumda. HTML5′in yeni özellikleri hakkında burada kısa bilgi vererek yenilikler hakkında bilgi edineceğiz.

Yapısal Elementler

Web sitelerini kodlarken belli yapısal kısımlara ayırırız. Üst kısım, içerik kısmı, sol-sağ kolonlar, menü alanı, alt kısım ve içerik alanı. HTML5 geliştiricileride bunları düşünmüşler ve bu alanların her biri için bir element tanımlamışlar. Biz şu an kodlama yaparken bu alanlar için genel <div> elementini kullanmaktayız, yeni elementlerle bu tekil element(<div>) yerine her kısım için bir element kullanma imkanımız olacak. Bu web sayfalarını kodlarken bize bir çok avantaj sağlayacaktır. CSS kodlması açısındanda Buelementlere biraz göz atalım.

section: Kitabın bir bölümü, bölümün bir kısmı veya gerçekte HTML sayfamızın herhangi bir kısmını tanımlamak için kullanabiliriz.
header: Web sayfamızın üst kısım olarak belirlediğimiz kısımı tanımlamak için kullanabiliriz. <head> ile karıştırmayalım.
footer: Web sitemizde alt kısım olarak belirlediğimiz kısımı tanımlamak için kullanabiliriz.
nav: Diğer sayfalara link verilen kısımlar, menü oluşturduğumuz kısımları tanımlamak için kullanabiliriz.
article: Günlüğümüzdeki(blog) bir konu, ansiklopedideki bir bölümü tanımlamak için kullanabiliriz.

Anlamlı Blok Elementler

Yapısal elementlerden daha çok ayrıntıya inen elementlerde bulunmaktadır. Kısacabu yeni elementleri incelersek:

aside: İçerik ile ilişkili ayrıntılar, notlar vb alanlar için içeriğin yanına iliştirilmiş alanları tanımlamak için kullanabiliriz.
figure: Genelde kullandığımız şekil ve açıklaması için eklenmiş güzel element. Hem şekil hemde açıklmasını içeren bir element
dialog: Bu element ismindende anlaşıldığı gibi diyalog, karşıklık sohbet içeren sayfaları daha kolay kodlamamız için eklenmiştir. Bu element <dd> ve <dt> elementlerini alt element olarak kullanır.

Anlamlı Satıriçin  Elementler

Html4′de bilgisayar kodlaması için satıriçin element olarak 5 kod var var, code, kbd, tt, samp. Html5 bunlara bir kaç tane dahaeklemiş.

m(marked): m elementi işaretlenmiş metin olarak tanımlanabilir. Anahtar kelime tabanlı çalışan ara motorları için biçilmiş kaftan olarak değerlendirebileceğimiz bu element, programcılarında işine yarayacaktır.
time: Metin içindeki zaman bilgilerini normal içerikten ayırmamıza yarayan bir element. Bilgiye kolay erişimimizi sağlayan bir element.
meter: Meter elementi özel oranları tanımlayan sayısal değerleri için kullanılır. Altı adet özniteliği vardır: value, min, low, high, max, optimum.
progress: İlerleyen prosesin durmunu göstermek için tanımlanır. Yüklenen resimler için kullanılablir %45 yüklendi yazısını göstermek için mesela. İki adet özniteliği vardır: value ve max. Javascript yardımı ile kolaylıkla yükleme işlemlerimizi yapabilmemizi sağlayacak güzel bir element.

Medya Elementerini

Gelişen web alemi bize artık görsel ve işitsel öğelerin daha çok önem kazandığını gösteriyor. HTML’in bu yönü biraz zayıf kalıyordu bunun için HTMLgeliştiriciler iki adet element eklemişler.

video: Bir çok medya türünü destekleyen video elementi, görsel  medya dosyalarını sitemize  eklememizi kolaylaştıracaktır.
audio: İşitsel medya elementlerini sayfalarımıza eklemek için kullanabilceğimiz bu elementin autoplay ve loop öznitelikleri var.

İnteraktif Elementler

HTML5 Web Aplication1.0 özel bölümünüde içermektedir. Bunun anlamı HTML5 dinamik içeriğe yardımcı olacak elementlerde içerecek olmasıdır. Yeni eklenen bu elementler kullanıcı tercihlerine ve sayfanın sunucudan yeni sayfa açılmasını beklemeden yapacamız işlemler için kullanılacaktır. Sırası ile bu elementleriinceleyelim:

details: Detay elementi başlangıçta gösterilmeyen içerikleri tanımlamak için kullanılır.  legend özniteliği  detayın özetini tanımlamak için kullanılır.
altbilgi veya dipnot olarak kullanılabileceği gibi araç ipucu olarakta kullanılabilir. Eğer open özniteliği kullanılırsa sayfada görüntülenir. Ayrıca kullanıcının tetiklemesi ile gösterip gizleyebiliriz.
datagrid: Datagrid elementi etkileşimli listeler, veri tabloları ve ilişkili listeler için tanımlanır. Bu element javascript yardımı ile çok güzel çalışmlar yapmamıza yardımcı olacaktır. Bir çok veri ile ilişkili işlerimizi çözmemize yardımcı olacak bir element, ajax ile kullanılan veri tabloları, listeleri, vb için hazırlanmış bir element olarak algıladım ben.
menu ve command : menu elementi her biri kendi işlevini yapabilecek command elementlerini içerir. Bir çok amaç için kullanılabilir. type özniteliğinin iki özelliği mevuct toolbar ve popup. İçiçe menu elementi kullanılabilir. Uygulama olarak Windows başlangıç menüsü, popup tipi için örnek ise renk paletini verebiliriz.

Sonuç

Sonuç olarak şunu söyleyebilrimki nesne tabanlı bir kodlama dünyasına uygunolarak genel elementler yerine daha özel elementler kullanmamıza olanaksağlayacak olan Html5.0 bence çok büyük yenilikler ve kolaylıklar sağlayacaktır.Daha temiz ve basit kodlar ile sayfalarımızı oluşturabileceğimizi düşünüyorum.

Web Applications 1.0 ise başlı başına bir güzellik. Bu standardın Ajax’a yardımcı vetamamlayıcı olarak görüyorum.

Kaynaklar

• http://www.ibm.com/developerworks/xml/library/x-html5/
  
• http://www.w3.org/html/wg/html5
  
• http://xhtml.com/en/future/x-html-5-versus-xhtml-2/
• http://www.whatwg.org/specs/web-apps/current-work/
• http://www.bernzilla.com/item.php?id=876
• http://edward.oconnor.cx/2007/04/marking-up-figures