HTML5 Geliştiricilerinin Yaptığı En Yaygın 5 Hata: Başlangıç ​​Kılavuzu

Tim Berners-Lee ve Robert Cailliau'nun, İnterneti oluşturmak için kullanılan standart biçimlendirme dili haline gelen HTML'yi tanımlamasının üzerinden 20 yıldan fazla zaman geçti. O zamandan beri, HTML geliştirme topluluğu bu dilde iyileştirmeler için yalvardı, ancak bu çığlık çoğunlukla meslektaşlarının HTML sorunlarını hafifletmeye çalışan web tarayıcı geliştiricileri tarafından duyuldu. Ne yazık ki bu, birçok tarayıcılar arası uyumluluk sorununa ve geliştirme çalışmalarının tekrarlanmasına neden olan daha da fazla soruna yol açtı. Bu 20 yıl boyunca, HTML 4 kez yükseltildi, tarayıcıların çoğu çift haneli sayıda büyük güncelleme ve çok sayıda küçük yama aldı.

HTML5'in sonunda sorunlarımızı çözmesi ve hepsine (tarayıcılara) hükmedecek bir standart haline gelmesi gerekiyordu. Bu muhtemelen World Wide Web'in yaratılmasından bu yana en çok beklenen teknolojilerden biriydi. Oldu mu? Sonunda, tamamen tarayıcılar arası uyumlu olacak ve tüm masaüstü ve mobil platformlarda çalışacak ve bize istediğimiz tüm özellikleri sağlayacak bir biçimlendirme dili elde ettik mi? Bilmiyorum! Sadece birkaç gün önce (16 Eylül 2014), W3C tarafından inceleme için bir çağrı daha aldık, dolayısıyla HTML5 spesifikasyonu hala eksik.

Umarım, spesifikasyon bir gün kesinleştiğinde, tarayıcılar zaten önemli derecede eski kodlara sahip olmayacaklar ve Web Çalışanları , Çoklu senkronize edilmiş ses ve video öğeleri ve bir için ihtiyaç duyduğumuz diğer HTML5 bileşenleri gibi harika özellikleri kolayca ve düzgün bir şekilde uygulayacaklar. uzun zaman.

Bununla birlikte, işlerini HTML5'e dayandıran ve başarılı olan binlerce şirketimiz var. Ayrıca milyonlarca insan tarafından kullanılan birçok HTML5 tabanlı uygulama ve oyun vardır, bu nedenle başarı kesinlikle mümkündür ve HTML5, spesifikasyonunun durumuna bakılmaksızın kullanılmaktadır ve kullanılmaya devam edecektir.

Ancak bahsettiğim tarif kolayca yüzümüzde patlayabilir ve bu nedenle kaçınılması gereken en temel HTML5 hatalarından bazılarını vurguladım. Aşağıda listelenen hataların çoğu, belirli HTML5 öğelerinin farklı tarayıcılarda eksik veya eksik uygulanmasının sonucudur ve yakın gelecekte bunların geçersiz hale geleceğini ummalıyız. Bu gerçekleşene kadar, HTML5'e yeni başlayan biri veya deneyimli bir veteriner olun, bir sonraki HTML5 uygulamanızı oluştururken listeyi okumanızı ve bunu aklınızda bulundurmanızı öneririm.

Yaygın hata 1: Yerel depolamaya güvenme

Kek yemelerine izin ver! Bu yaklaşım, geliştiricilere uzun zamandır bir yük olmuştur. Güvenlik ihlallerine ve bilgisayarların korunmasına ilişkin makul düzeyde makul korku nedeniyle, İnternet'ten birçok kişinin korktuğu “karanlık çağda”, web uygulamalarının bilgisayarlarda makul olmayan küçük miktarlarda veri bırakmasına izin verildi. Doğru, "Microsoft(r)'dan harika tarayıcı ustalarının" bize verdiği kullanıcı verileri veya Flash'taki Yerel Paylaşılan Nesneler gibi şeyler vardı, ancak bu mükemmel olmaktan çok uzaktı.

Bu nedenle geliştiriciler tarafından benimsenen ilk temel HTML5 özelliklerinden birinin Web Depolama olması mantıklıdır. Ancak, Web Depolamanın güvenli olmadığına dikkat edin. Çerez kullanmaktan daha iyidir çünkü kablo üzerinden iletilmez, ancak şifrelenmez. Güvenlik belirteçlerini kesinlikle orada saklamamalısınız. Kötü niyetli bir kullanıcı, localStorage ve sessionStorage değerlerini istediği zaman kolayca değiştirebileceğinden, güvenlik politikanız hiçbir zaman Web Storage'da depolanan verilere güvenmemelidir.

Web Depolama ve nasıl kullanılacağı hakkında daha fazla bilgi edinmek için bu gönderiyi okumanızı öneririm.

Yaygın hata #2: Tarayıcılar arasında uyumluluk beklemek

HTML5, basit bir biçimlendirme dilinden çok daha fazlasıdır. Davranışı mizanpajla birleştirecek kadar olgunlaştı ve HTML5'i gelişmiş JavaScript'in üstte olduğu genişletilmiş HTML olarak düşünmelisiniz. Statik bir HTML+CSS kombinasyonunu tüm tarayıcılarda aynı göstermek için daha önce yaşadığımız tüm sorunlara bakarsanız, daha fazla karmaşıklığın yalnızca tarayıcılar arası uyumluluğu sağlamak için daha fazla çaba anlamına geleceğini varsaymak adil olur.

Farklı tarayıcılarda HTML5 yorumlaması, tıpkı JavaScript'te olduğu gibi, aynı olmaktan uzaktır. Tarayıcı savaşlarındaki tüm büyük oyuncular HTML5 spesifikasyonuna yardım etti, bu nedenle tarayıcılar arasındaki sapmaların zamanla azalması gerektiğini varsaymak doğru olur. Ancak şimdi bile bazı tarayıcılar belirli HTML5 öğelerini tamamen yok saymaya karar verdi ve bu da temel ve ortak özellikler kümesini takip etmeyi çok zorlaştırdı. Denkleme daha fazla internet bağlantılı cihaz ve platform eklersek, durum daha da karmaşık hale gelir ve HTML5 ile ilgili sorunlara neden olur.

Örneğin, Web Animasyonları, yalnızca Chrome ve Opera tarafından desteklenen harika bir özelliktir; e-posta teslimi gibi bir olay hakkında kullanıcıyı bir web sayfası bağlamı dışında uyarmaya olanak tanıyan Web Bildirimi özelliği, Internet Explorer tarafından tamamen yok sayılır.

HTML5 özellikleri ve farklı tarayıcılar tarafından sağlanan destek hakkında daha fazla bilgi edinmek için www.caniuse.com adresindeki HTML5 kılavuzuna bakın.

Bu nedenle, HTML5 yeni ve iyi tanımlanmış olmasına rağmen, çok sayıda çapraz tarayıcı uyumluluk sorunu beklemeli ve bunları önceden planlamalıyız. Tarayıcıların doldurması gereken çok fazla boşluk var ve platformlar arasındaki tüm farklılıkların üstesinden gelemeyeceklerini beklemek doğru olur.

Yaygın hata #3: Yüksek performans varsaymak

HTML5 hala gelişmekte olmasına rağmen, varlığından önce kullanılan alternatif platformlara göre birçok avantajı olan çok güçlü bir teknolojidir. Ancak, büyük güç, özellikle HTML5'e yeni başlayanlar için büyük sorumluluk getirir. HTML5, masaüstü ve mobil platformlardaki tüm büyük tarayıcılar tarafından benimsenmiştir. Bunu akılda tutarak, birçok geliştirme ekibi, uygulamalarının tüm tarayıcılarda eşit şekilde çalışacağını umarak HTML5'i tercih ettikleri platform olarak seçer. Ancak, HTML5 spesifikasyonu öyle diyor diye hem masaüstü hem de mobil platformlarda makul bir performans varsaymak mantıklı değil. Pek çok şirket (khm! Facebook khm!), mobil platformları için bahislerini HTML5'e yerleştirdi ve HTML5'in planladıkları gibi çalışmamasından muzdaripti.

Yine de, HTML5'e büyük ölçüde güvenen bazı harika şirketler var. HTML5 ve tarayıcıların sınırlarını zorlarken harika şeyler yapan çok sayıda çevrimiçi oyun geliştirme stüdyosuna bir bakın. Açıkçası, performans sorunlarının farkında olduğunuz ve bunlar üzerinde çalıştığınız sürece, harika uygulamalar yaparak harika bir yerde olabilirsiniz.

Yaygın hata #4: Sınırlı erişilebilirlik

Web hayatımızın çok önemli bir parçası haline geldi. Uygulamaları yardımcı teknolojiye güvenen kişiler için erişilebilir kılmak, yazılım geliştirmede genellikle bir kenara bırakılan önemli bir konudur. HTML5, bazı gelişmiş erişilebilirlik özelliklerini uygulayarak bunun üstesinden gelmeye çalışır. Birkaç geliştiriciden fazlası bunun yeterli olduğunu kabul etti ve uygulamalarında ek erişilebilirlik seçenekleri uygulamak için gerçekten zaman harcamadı. Ne yazık ki, bu aşamada HTML5'in uygulamalarınızı herkesin kullanımına sunmasını engelleyen sorunlar vardır ve daha geniş bir kullanıcı yelpazesini dahil etmek istiyorsanız ek zaman ayırmanız gerekir.

HTML5'te erişilebilirlik ve en yaygın erişilebilirlik özelliklerinin mevcut durumu hakkında daha fazla bilgi için burayı kontrol edebilirsiniz.

Yaygın hata #5: HTML5 geliştirmelerini kullanmamak

HTML5, standart HTML/XHTML etiket kümesini önemli ölçüde genişletti. Yeni etiketlere ek olarak, epeyce yeni kural ve davranışa sahibiz. Çok fazla geliştirici, yalnızca birkaç geliştirme aldı ve HTML5'in çok güzel yeni özelliklerinden bazılarını atladı.

HTML5'teki en havalı şeylerden biri istemci tarafı doğrulamadır. Bu özellik, muhtemelen web tarayıcılarının aldığı en eski HTML5 öğelerinden biriydi. Ancak ne yazık ki, formlarına varsayılan olarak novalidate niteliği ekleyen birkaç geliştiriciden fazlasını bulabilirsiniz. Bunu yapmanın nedenleri makul ve eminim ki bu konuda bir tartışma yapacağız. Geriye dönük uyumluluk nedeniyle, birçok uygulama özel JavaScript doğrulayıcıları uygulamıştır ve bunun üzerine tarayıcılar tarafından kullanıma hazır doğrulama yapılması uygun değildir. Ancak, iki doğrulama yönteminin çakışmayacağından emin olmak çok zor değil ve kullanıcı doğrulamasının standart hale getirilmesi, daha önce bahsettiğim erişilebilirlik sorunlarının çözülmesine yardımcı olurken ortak bir deneyim sağlayacaktır.

Bir başka harika özellik de HTML5'te kullanıcı girişinin işlenme şekliyle ilgilidir. HTML5 gelmeden önce, tüm form alanlarımızı <form></form> etiketi içinde tutmamız gerekiyordu. Yeni form özellikleri, şunun gibi bir şey yapmayı tamamen geçerli kılar:

 <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

fname lname birlikte yayınlanacaktır.

Yeni form özellikleri ve geliştirmeleri hakkında daha fazla bilgi için Mozilla Developer Network'e göz atabilirsiniz.

Sarmak

Yukarıdaki hataların çoğu, farklı tarayıcılarda sorunlu HTML5 uygulamasının doğrudan bir sonucu olduğundan, web geliştiricilerinin tarayıcı savaşlarında ikincil zararlar olduğunu anlıyorum. Ancak, yaygın HTML5 sorunlarından kaçınmamız ve HTML5'in yeni özelliklerini anlamak için biraz zaman ayırmamız yine de çok önemlidir. Her şeyi kontrol altına aldığımızda, uygulamalarımız harika yeni geliştirmelerden yararlanacak ve web'i bir sonraki düzeye taşıyacaktır.