HTML5 Nedir? Ne Değildir?

HTML5Bundan 4-5 sene öncesini hatırlıyorum, bir uyanış vardı web dünyasında. Web 2.0 denen bu uyanışta artık kullanıcı daha etkindi, hatta içeriği üreten artık oydu. Kimileri Web 2.0’ı mor veya pembe arayüz zannettiler, kimileri de arayüz kodlamada tabloları bırakıp div etiketleri ile kodlama yapmayı buna yakıştırdılar. Herkes tablolarla web sitesinin yapısal kısmını yapmayı bırakıp div denen katman veya layer olarak da adlandırabilecek etiketleri çeşitli css kodları ile tasarımı oluşturacak hale getirdiler.

O zaman div ile arayüz kodlama diye bir şey vardı. Tablolarla site yapısını oluşturanlar ötelendi. XHMTL 1.1 kullanımdaydı. img, br, hr, link gibi etiketler self closed olmalıydı. Şunun gibi;

<img src="resim.jpg" />

Sonra siteleri W3C’nin Validate(Doğrulama) kısmına uygun kodlamaya çalıştık. Mesela resimlere alt  parametresi verilmek zorundaydı. Şöyle;

<img src=”resim.jpg” alt=”Resim Açıklaması” />

Aslında bu alt özelliği tarayıcılarda resim yüklenemediği (herhangi bir nedenle) zamanlarda resmin yerinde yazan yazıydı. Ayrıca görme engelli kullanıcılar için geliştirilen tarayıcılar bu metinleri sesli hale getirip kullanıcıya görsel hakkında bilgi veriyordu. Bu kullanıcı için de iyiydi, hem de sayfamız valid(geçerli) şekilde testten geçer not alıyordu. Bir kodlama standardımız ve kurallarımız vardı ama çoğu anlamsızdı. Kurallara uymayı o kadar seviyorduk ki, bazen validate için ikinci parti kodları saklayıp sahte geçer not alıyorduk. Google geçerli XHTML sayfaları severdi, biz de SEO için kodlarımızı geçerli yazardık tabi. Ama aslında hiçbir anlamı yoktu. Kullandığımız etiketler içerik hakkında bir ipucu vermiyordu. Sadece belirlenmiş kurallara uyuyorduk.

Sonra W3C, XHTML 2.0 üzerinde çalışmaya başladı. Ama yine semantik Web’e doğru bir yönelim söz konusu değildi. Bunun üzerine sektörün önde gelenleri birleşip yeni bir standartlar bütünü oluşturmaya giriştiler. Kendilerini whatwg adıyla tanımladılar. Daha sonra W3C’de olaya dahil olup bu standartlar bütününü HTML5 olarak adlandırdılar. HTML5 bitmiş bir olgu değildir. Sürekli yenilenmektedir. Bir süre önce hgroup etiketi standartlardan çıkarılıp  üç gün sonra yeniden yerine koyuldu. Yani yaşayan standartlarla baş başayız.

HTML5 için şunlar söylenebilir;

  • XHTML’in garip kuralları HTML5’de yoktur. Mesela özellikler tırnaksız da tanımlanabilir. img, br, hr, link gibi etiketler self closed olmak zorunda değillerdir. Hatta önerilmese de p tagı açıp kapatmadan yeni bir etiket ile devam edebilirsiniz ve bu HTML5 validasyonu için gerekli değildir.
  • HTML5 etiketleri arayüz kodlarının sunduğu içeriği taşımasını öngörür. Yani bir paragraf yazacaksanız <p> etiketini kullanırsınız. Bunun yanında yapısal elementler ile anlamsız <div> etiketlerinden daha iyi bir yapı söz konusudur. (section, article, aside, figure, footer, header, nav gibi etiketler kullanılır) .
  • HTML5 bitmiş değildir. Sürekli güncellenir, arayüzü kodlayan kişiyi semantik etiketlemeye zorlamaz ama bunun için gerekli imkanları sunar.
  • HTML5 video, ses gibi çoklu ortam içeriklerini görüntüleyebilen API’ler sunar.
  • HTML5 neredeyse her tarayıcıda farklı oranlarda ve şekillerde desteklenir. Neyi kullanıp kullanamayacağınız için bazı kaynaklara bakmanız gerekir. Mesela Can i use? bunun için güzel bir servistir.
  • Yine tekrarlarsak HTML5 sürekli değişen canlı bir yapıya sahiptir ve takip edilmesi gerekir. Bunu şu adresten yapabilirsiniz.

Bazı kurallar da HTML5 ile değişiyor haliyle. Mesela normal bir HTML sayfasında bir tane <h1> etiketinin olması mantıklı gelir. Çünkü sayfanın başlığıdır. Diğer alt başlıklar h2, h3 diye sıralanır. Ama HTML5 de özendirilen yöntem her section’ın kendi footer’ı veya h1 etiketi ayrı olarak yer alabilir. Bu da sayfanın kodlamasının içerik hakkında ipuçları ile dolu olmasını sağlar. Yani etiketler sadece stil vermek için gruplama yapan terimler değil, sayfanın içeriği hakkında ipuçları da veren etiketler haline geliyor.

Bir HTML5 dökümanını doctype ile HTML5 olarak belirleyebilir ve eski kod alışkanlıklarınızı kullanabilirsiniz. Zamanla HTML5’in kendine has özelliklerini kodlamalarınızda kullanabilirsiniz. Yani ben tamamını öğrenip öyle geçeyim demeyin,  çünkü sürekli geliştiğinden, stabil yakalama şansınız yok.

Ayrıca canvas özelliği ile oyun ve interaktif uygulamalar dahil zengin içerikler yapabilirsiniz. Doğrusu canvas konusuna ben de henüz giriş yapmış değilim 🙂

Kullanın, öğrenin, takipte kalın.

Fazlasını Oku

Lazy Loading İle Tasarruf

Lazy LoadingLazy Loading bir Jquery eklentisi. Kendisi basitçe sizin henüz ulaşmadığınız web site bölümlerindeki görselleri siz o bölüme ulaşıncaya kadar yüklememesi. Zaten adı da buradan geliyor. Keza Lazy “tembel”, “üşengeç” anlamlarına geliyor. Kurulumu ve ayarları çok kolay yapılabiliyor. Aşağıda eklentinin sayfası var;

http://jquery.eisbehr.de/lazy/

Bu eklentiyi kurmak için daha önceki satırlarda Jquery’nin güncel sürümünü sayfaya dahil etmeniz gerekiyor. Ondan sonra yapmanız gereken kütüphane script dosyasını sayfaya dahil etmek ve metodu çağırmak. İnanılmaz basit bir işlem.

jQuery(document).ready(function() {
    jQuery(“img.lazy”).lazy();
});

 

Resim dosyalarınız da aşağıdaki şekilde olacak;

<img data-src=”yol/imaj.jpg” class=”lazy” src=”blank.gif”>

Diğer parametreleri eklentinin adresinden öğrenebilirsiniz.

 

 

Fazlasını Oku

Arayüz Kodlama Tarayıcı ve Platform Testi

Şu anda tam zamanlı olarak çalıştığım şirkette arayüz kodlamadan sorumluyum. Böyle bir konuya odaklanmak daha iyi sonuçlar verir, zaman gösterecek. İşe başladığımda bir gazete arayüzü HTML5 & CSS & Javascript olarak kodladım. Sonra çeşitli platform ve tarayıcı versiyonlarında tabi olarak farklılıklar gördüm. Bunlar aman aman siteyi komple bozacak farklar olmasa da işlevselliği etkileyen farklardı.

Bundan 3-4 sene öncesine kadar Internet Explorer 6 ile uğraşıp dururduk. Neyse ki artık kullanımı yok denecek kadar azaldığı için IE 6 dikkate alınmıyor. Ama yine de Internet Explorer yeni tarayıcı motorunda farklılıklar sürüyor. Safari özellikle Mac OS ortamında ve iOs cihazlarda farklılıklar çıkarabiliyor. Keza Firefox da öyle. Her tarayıcıda aynı görüntüyü almak ana amaç değil, ana amacımız her tarayıcı ve platformda benzer deneyimi kullanıcılara sunmak. Bunun için bugün bir tarayıcı uyumluluk formu hazırladım. Sizin de işinize yarayabilir diye buraya da yüklüyorum. İşte aşağıda;

Tarayıcı Uyum Kontrol Formu

Öncelikle C, C1 ve C2 değişkenlerine atama yapıyoruz. Bunlar tarayıcıların güncel sürümü ve 2 alt ana sürümünü oluşturuyor. Hepsi farklı platformlar için test ediliyor ve sorun varsa altta Internet Explorer örneği gibi sorunu yazabiliyoruz. Özellikle stajyer çalışma arkadaşlarınız varsa onlar için de güzel bir deneyim ve sağlıklı bir kodlama sağlanır. Bu format değişebilir ama hali hazırda olan kısmı bana bir yere kadar yeterli geldi. Peki bunları nereden kontrol edecek arkadaşımız? Bunun için de araçlar İnternet’te meevcut. Altta bununla ilgili birkaç araç yazıp bitiriyorum.

Bu da ilgili Excel dosyası

 

Fazlasını Oku

Webtures ve Halkla İlişkiler

Webtures firmasını İnternet’te bir iş ilanı sayesinde duydum. SEO Hocası‘nı da bünyesinde barındıran başarıl bir dijital ajans. İş görüşmesine gidecekken aniden bir tanıdık vasıtası ile işe girmem bu görüşmenin gerçekleşmemesine neden oldu. Siteye bakarken görüşeceğim kişi olan Kaan Gülten‘in Sorularla SEO ve Uzmanından SEO kitaplarının yazarı olduğunu gördüm. Ondan sonra bu görüşmenin olmasını çok istedim ama vaktim olmadı. Kaan Bey kahve içmeye de davet etti sağ olsun, bir gün tanışma fırsatına yakalarım umarım.

Sitede gezerken engelli vatandaşlarımız için yapılan bir kampanya gördüm. Kaan Gülten’in iki kitabını da engelli bireylere kargo ücretini de ödeyerek gönderiyorlardı. Çok şaşırdım doğrusu. Bu sektörde engellerden çok bahsetmeyiz, ben de bir engelli olarak kitapları istedim. Çok güzel bir paket elime geçti. İçinde 3 şeker olan bir poşet, 2 kitap, bardak altlığı ve 2 adet ayraç. Çok hoşuma gitti. Özellikle engelli bireyler için böyle bir girişim çok anlamlı. Hayatında engelleri olan insanlara daha fazla engel çıkarmaktansa, engelleri aşmalarına yardım etmek çok önemli. Paketi de blog yazım için geldiği gibi çektim. Aşağıda görebilirsiniz.

Webtures

Daha önceleri SEO Hocası ile ilgili yazılarım olmuştu. Mesela şu yazı var. Ben SEO Hocası hangi firma altında, ne zaman Webtures bünyesine geçti bilmiyorum ama yazıda yazdıklarımın hala arkasındayım. Ama Webtures’in halkla ilişkiler konusunda çok doğru yolda olduğunu görüyorum. Bilgisayara bakmayı bırakıp, pencereden engelli bir bireyin varlığı dikkatlerini çekmiş olmalı. Buna da kayıtsız kalmayıp böyle güzel bir uygulama yapmışlar. Kitapları kısa süre sonra okuyup, onlar hakkında da düşüncelerimi yazacağım. Sonuçta yeni şeyler öğreneceğime inanıyorum.

Bravo Webtures, Teşekkürler Kaan Gülten.

 

 

Fazlasını Oku

İnternet Kötü Çocuk mu?

İnternetDünyada artık bir senede üretilen bilgi geçmişte bir asırda üretilen bilgiyi geçecek duruma geldi. Bunun da en önemli sebeplerinden biri bilgisayar sistemleri ve İnternet. İletişimin, bilgiye ulaşmanın bu kadar kolaylaştığı bu dönemde nimet olarak görülmesi gereken İnternet, devlet büyükleri tarafından, aile büyükleri tarafından kötü işlerin yapıldığı bir ortam olarak düşünülmeye başlandı.

Evet İnternet telif hakları konusunda değişimler yarattı, her ortamda olduğu gibi kendi suç potansiyeli olan bir ortam. Fakat bunun sebebi İnternet mi? İnternet’te işlenen suçlar günlük hayatta yok da, insanlar İnternet’e girdiklerinde canavarlaşıyor mu? Bu tür soruların cevabı kocaman bir “Hayır”. Şuan Türkiye’de İnternet kullanıcı sayısı 35 Milyon. Taşrayı, yaş büyüklüğü ve küçüklüğü gibi durumları dışarı çıkardığınızda neredeyse toplum, yani sokaktaki insanların çoğu İnternet’te.

Bizim öncelikle bakmamız gereken sokaklar. Gerçek hayatta suç işlenmiyor mu? Evet, işleniyor. Karısını bilmem kaç defa bıçaklayan adam da İnternet’te, engelli bir kıza defalarca tecavüz eden insanlar da İnternet’te. Hayvanlara eziyet eden, çalan, gasp, darp eden insanlar da İnternet’te. Bu yönden bakıldığında bu kadar suçlu insanın İnternet’te melek olmaları mı bekleniyor anlamıyorum. Bu insanlar suça meyilli ise İnternet’te de suç işleyecektir ya da İnternet’i bu yönde kullanacaktır.

Eski başbakan Recep Tayyip Erdoğan Facebook için “pislik yuvası” tanımlamasını yapmıştı. Sokaklar düzeldi, her şey günlük güneşlik, sokakta suç yok da Facebook kendi kendine pislik yuvası oldu. İnsanların çok homojen bir şekilde üye olduğu bu tür bir platforma bunları demek, halka “pislik” demektir. Hayır efendim, suç işleme potansiyeli olan insan sokakta da suç işler, İnternet’te de. İnternet’i ve başlıca sosyal platformları kötü çocuk ilan etmek hiçbir şeye yaramaz.

Gidip marketten bıçak alan kişi bu bıçak ile ne yapacak bilemeyiz ama genelde ev gereci olarak alır ya da birine zarar vermek için. Siz her İnternet’e girene böyle bir suçlama yapamazsınız. İnsanların bu tür topluluklardan o kadar çok yarar gördüğüne şahit oldum ki, bu tür asılsız suçlamaları kesinlikle doğru bulmuyorum.

Aslında Facebook ile Twitter arasında çokbüyük fark var. Facebook, daha çok insanların tanıdığı kişiler ile iletişime geçtiği bir yer. Fakat Twitter’da insanlar çok hızlı örgütlenebilir. Zaten devletin korktuğu veya kaçındığı durum da budur. Bir etiketi takip eden herkes sokağa dökülebilir. Bu görece Facebook’un kullanım tarzı değildir. Bir sayfayı Facebook’da kapattırabilirsiniz ama Twitter’da etiketleri bu kadar kolay engelleyemezsiniz.

İnternet sunduğu olanaklarla yüzyılın en önemli buluşlarından biridir ve kontrol edemeyenlerin yasaklama, suçlama gibi saldırılarına maruz kalmaktadır. O kadar sunduğu iletişim kanalına, bilgi alışverişine, bilgi oluşumuna temel sağlayan bir platformun bu şekilde kirletilmesi çok yanlış.

Fazlasını Oku