Coders' Grave » video element http://codersgrave.com Tue, 11 Dec 2012 17:27:55 +0000 tr-TR hourly 1 http://wordpress.org/?v=3.5 HTML5 – Yeni Öğeleri Daha İyi Anlayınhttp://codersgrave.com/253-html5-yeni-ogeleri-daha-iyi-anlayin/ http://codersgrave.com/253-html5-yeni-ogeleri-daha-iyi-anlayin/#comments Fri, 20 Aug 2010 05:22:26 +0000 Sevil Yılmaz http://www.codersgrave.com/?p=253 Continue reading →]]> Bu blogu tasarladıktan sonra HTML5 hakkında birşeyler yazmam kaçınılmazdı. İlk duyduğum andan beri merak konusu oldu bende bu HTML5. “Ne gibi gelişmeler var, neden kullanmalıyız, ne kazancı var?” soruları kafamda uçuşmaya başladı. Kahvenizi hazırlayın, arkanıza yaslanın. İşte başlıyor…

Hepsinden önce modern bir tarayıcı kullandığınızdan emin olun ve sürekli güncel tutun. Tarayıcınızın HTML5 ve CSS3‘ün hangi özelliklerini desteklediğini öğrenmek için mükemmel bir script yazılmış. Adı Modernizr. Siteye girdiğinizde hemen karşınıza çıkıyor zaten nelerin desteklenip desteklenmediği.

HTML5‘de bazı özellikler native (doğuştan) geliyor. En genel örneği; bir video izlemek ya da bir ses dosyasını dinlemek için eklenti yükleme gereksimini ortadan kaldırıyor. Bunun için video ve audio elementlerini kullanmak yeterli. Bir resime, videoya, istatistik tablosuna alt başlık girmek için içiçe bölümler yapmak yerine figure ve figcaption elementlerini kullanabiliriz…

Anlamsal Elementler

HTML’de (HTML4) birtakım anlamsal yetersizlikler var. Tasarımcılar bu yetersizlikleri class ve id‘ler kullanarak çözmeye çalışıyorlar. Ancak iş karmaşıklaştıkça, ziyaretçiye daha heyecan verici tasarımlar sunmak istendiğinde, anlamsal isimler bulmak gitgide daha da zorlaşıyor.

HTML5′te bu sorunlara anlamsal elementler (semantic elements) kullanarak yanıt verilmeye çalışılmış. Basit bir blog sayfasında mimari genel olarak şu şekildedir.

HTML Altyapısı

div elementini kullanıp ona sınıflar vererek temel mimari bu şekilde oluşturulabilir. Ancak gördüğünüz gibi HTML4′de bölümleri anlamsallaştırmak için çokça yazı yazmak gerekiyor. HTML5′te ise bu bölümler için bazı elementler tanımlanmış. Örneğin bir bölümü tanımlamak için section, başlık alanını tanımlamak için header, makaleyi tanımlamak için article, altalanı tanımlamak için footer…

HTML5 Altyapısı

Header

Başlık alanını temsil eder. Sadece başlığınız olacaksa altı seviyeli başlıklardan (h1-h6) birini kullanmanız yeterli. Ancak başlığı temsil eden başka öğeler de varsa -örneğin altbaşık gibi- bunu header elementiyle sarmanız gerekir.

<header>
 <h1>Başlık alanı</h1>
 <h2>Sitemizin tanımını</h2>
</header>

<header>
  <h1>Lorem ipsum dolor</h1>
  <p>Lorem ipsum dolor sit amet</p>
</header>

Nav

Gezinti (navigation) alanını temsil eder. Gezinti bağlantıları ya da içerik listesi için kullanılabilir. (Navigasyon kelimesini kullanmak istemedim, diğer seçenekler de çok kötüydü…)

<nav>
  <ul>
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Kategoriler</a></li>
    <li><a href="#">İletişim</a></li>
    <li><a href="#">Arşiv</a></li>
  </ul>
</nav>

Footer

Altalanı temsil eder. Bu bir sayfanın, bir bölümün ya da bir yazının altalanı olabilir.

<footer>Copyright © Coders' Grave</footer>

<footer>
  <p class="etiketler">
    <a href="#">lorem</a>,
    <a href="#">ipsum</a>,
    <a href="#">dolor</a>
  </p>
</footer>

Section

Genel bölümleme öğesidir. Bu, içinde başlığı ve altalanı olan bir makale olabilir. Genel kapsayan bir element değildir. Bazı istisnai durumlar dışında eğer section başlık ile başlamamışsa yanlış kullanılmış demektir. Bir gezinti kısmında ya da aside‘da başlık olmayabilir.

<section>
  <h1>Başlık</h1>
  <p>Lorem ipsum dolor sit amet</p>
</section>

section genel bölümlemeler için kullanılır. Daha özel bölümlemeler için article, nav, aside elementlerini kullanın. Eğer kullanacağınız alan section tanımına uymuyorsa kullanmayın. Hala div elementini istediğiniz zaman kullanabilirsiniz.

Article

Bir makale ya da yazı alanını temsil eder. Bu bir blog yazısı, yorum alanı, haber v.b. olabilir. Bu gibi özel durumlarda section yerine kullanılan blok elemettir.

<article>
  <header>
   <h3>Başlık</h3>
   <p><time datetime="2010-08-20T08:22:26+00:00">20-08-2010</time></p>
  </header>
  <p>Lorem ipsum dolor sit amet</p>
</article>

Aside

Onu kapsayan içerikle yüzeysel bir bağlantısı olan içeriğe denir. sidebar ya da kelime açıklaması için kullanılabilir. Kullanımı biraz kafa karıştırabilir. Bunu örneğin içinde açıklayayım.

<body>
  <h1>Coders' Grave</h1>
  <article>
    <h3>Yazı Başlığı</h3>
    <p>Lorem ipsum dolor sit amet</p>
      <aside>
        <!--Bu kısım yazı ile doğrudan ilişkili. Ancak yazının devamı değil.-->
        <h3>Sözlük</h3>
        <dl>
          <dt>Lorem ipsum nedir?</dt>
          <dd>Lorem ipsum...</dd>
        </dl>
      </aside>
  </article>
  <aside>
    <!--Bu kısım yazı ile doğrudan ilişkili değil. Sayfadaki yazıların devamı da değil. Ancak sayfanın kendisiyle ilişkili-->
    <h2>Kategoriler</h2>
      <ul>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
      </ul>
  </aside>
</body>

Tekrar söylüyorum; hala div elementini kullanabilirsiniz. Eğer elementlerin kullanımını tam anlayamadıysanız yanlış yapmak yerine hiç kullanmayın.

Video

YouTube (her ne kadar Türkiye’de yasaklı olsa da), Daily Motion, Vimeo gibi video sitelerinin kullanım grafikleri her geçen gün yükseliyor. Bu sitelerde video izleyebilmek için tarayıcımıza Flash Player, Media Player gibi eklentiler kurmamız gerekiyor. video elementiyle bu eklentileri yüklemekten kurtuluyoruz. Aynı zamanda kodu da daha kısa ve temiz. Eskiden video gömmek için böyle bir kod kullanıyorduk.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="480" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
  <param name="allowFullScreen" value="true" />
  <param name="allowscriptaccess" value="always" />
  <param name="src" value="video.mp4" />
  <embed type="application/x-shockwave-flash" width="640" height="480" src="video.mp4" allowscriptaccess="always" allowfullscreen="true" pluginpage="http://www.macromedia.com/go/getflashplayer">
  </embed>
</object>

Şimdi basitçe şu şekilde yapabiliriz.

<video width="640"  height="480" src="video.mp4" controls autobuffer poster="poster.jpg">
  <p>HTML5 uyumlu bir tarayıcı kullanmalısınız.</p>
</video>

Ya da tarayıcıların codec desteğini düşünüp şu şekilde de yazabiliriz. Böylece bütün modern tarayıcılar desteklemediği uzantıyı atlayıp desteklediklerini oynatmaya başlar.

<video width="640px" height="480px" autobuffer="autobuffer" autoplay="autoplay">
  <source src='video.mpg' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src='video.mp4' type='video/mp4; codecs="amp4v.20.8, mp4a.40.2"'>
  <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
</video>

Tarayıcı video codec destekleri:

Tarayıcı Video Codec Desteği

“Değişken“: Opera, Linux ve FreeBSD’de GStreamer ile tüm formatları destekler.

Autoplay, videonun butona basma ihtiyacı duymadan başlaması için kullanılır. Sayfa açılışıyla video oynatılmaya başlar. Ancak tercih edilmez. Çünkü video çalıştığı anda sayfanın taranması güçleşir. Daha ayrıntılı bilgiyi buradan bulabilirsiniz.

Controls, videonuza Başlat/Duraklat butonlarını ekler.

Autobuffer, autoplay kullanılmadığı zaman, ancak videonun izlenileceği düşünülerek videoyu arkadan yükleme işlemi yapmasını sağlar.

Loop, video dosyalarının sonuna geldiğinde tekrardan başa dönmesini sağlar.

Poster, videonun bir karesi ya da onu temsil eden bir görsel olabilir.

Audio

video elementi gibi yine eklenti kullanmadan ses dosyalarını oynatmamızı sağlar. Yukarıda yazdığım, autoplay, autobuffer, controls, loop özellikleri bunun için de geçerli.

<audio src="ses.oga" controls autobuffer></audio>

Burada ses dosyasının bağlantısını verirken hangi tarayıcının hangi codec‘i desteklediğini bilmemiz gerekiyor.

Tarayıcı Audio Codec Desteği

Safari değişken: Mac OS’de Quicktime ile bu format desteklenmektedir.

Opera değişken: Linux ve FreeBSD işletim sistemlerinde GStreamer ile bu formatlar desteklenmektedir.

Bunları bildikten sonra source özelliğini kullanarak bütün formatları ekleyelim ki ses dosyamız tüm modern tarayıcılarda oynatılabilsin.

<audio>
  <source src="ses.oga" type="audio/ogg">
  <source src="ses.mp3" type="audio/mpeg">
</audio>

Canvas

canvas elementi script‘ler ve API‘ler yardımı ile iki boyutlu şekiller çizmemize yardımcı olur. Temel kullanımı şu şekildedir.

<!DOCTYPE html>
<head>
  <title>Canvas</title>
  <script type="text/javascript">
    var canvas = document.getElementById("ornek"),
      context = canvas.getContext("2d");
  
    context.fillRect(10, 20, 200, 100);
  </script>
  <style type="text/css">
    canvas {border: 1px solid #ccc;}
  </style>
</head>
<body>
  <canvas id="ornek"></canvas>
</body>
</html>

Bu örnekte javascript kullanılarak koordinatlar verip ana kareden belli bir uzaklıkta dikdörtgen çizildi.

Canvas Dikdörtgen

Figure

figure, içeriğe kaynak gösterilen, genelde tek birimden oluşan, çıkarıldığı zaman içeriğin akışını bozmayan, isteğe bağlı olarak altyazı içeren bir elementtir.

Görseller, kitaplar, grafikler, istatistikler v.b. içerebilir.

figcaption, figure elementine altyazı eklememizi sağlayan elementtir.

Figure Örneği

<figure>
  <img src="images/alt-belkemigi.jpg" alt="Alt Belkemiği">
  <figcaption>Alt Belkemiği</figcaption>
</figure>

figure elementinin yukarıdaki gibi görünmesi için stiller kullandım. Varsayılan hali o şekilde değil.

DOCTYPE

HTML5′de sadeliği getiren özelliklerden birisi de DOCTYPE. Herşeyden arındırılmış. Bu yüzden akılda kalması çok kolay.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Sayfası</title>
  </head>
  <body>
    <h1>Lorem</h1>
    <p>Lorem ipsum dolor sit amet</p>
  </body>
</html>

HTML5 Kopya Kağıdı

HTML etiketlerini ve kısaca nerede kullanıldıklarını gösteren, güzel hazırlanmış bir referans. HTML5 kodları farklı renklerle vurgulanmış.

HTML5 Kopya Kağıdı

Faydalanılan Siteler

Şimdilik anlatacaklarım bu kadar. Bunlar sıkça kullanılan öğelerdi. Daha anlatılacak çok şey var. Bunu bir önizleme gibi düşünün.

Konu içinde yanlış bilip de yanlış yazdığım yerler varsa düzeltmekten çekinmeyin. Emin olun her zaman verecek bir cevabım vardır.

]]> http://codersgrave.com/253-html5-yeni-ogeleri-daha-iyi-anlayin/feed/ 5