Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Html 5 Yenlikleri & SEO
Başlangıç
• www: WorldWideWeb (Dünya Çapında Ağ) kelimerinin kısaltılmış hâlidir.
Alternatif adıW3'dir. Siteleri internete...
Başlangıç
• HTTP: HyperTextTransfer Protocol (Zengin MetinTransfer Protokolü)
kelimelerinin kısaltmasıdır. Site adlarında ...
Başlangıç
• FTP: Açılımı FileTransfer Protocol (DosyaTransfer Protokolü) şeklindedir.
Web sitesi sahibinin oluşturduğu sit...
Başlangıç
• SEO: Search EngineOptimization (Arama Motoru Optimizasyonu)
kelimelerinin kısaltmasıdır. Sitelerin arama motor...
Başlangıç
• Domain: Alternatif ismi "alan adı"dır. Web sitelerinin internet üzerindeki adıdır.
Örneğin; google.com bir dom...
Baslangıç
• İnternet sitelerinin görsel tasarımında kullanılan HTML dili, 1980 senesinden bu yana
gelişerek, sitelerin kul...
Html 5’te artık desteklenmeyen Html elementleri
• <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>...
Yeni Gelen Html Elementleri
• <canvas>, <audio>, <video>, <progress>, <caption>, <header>, <nav>,
<footer>, <article>, <as...
HTML5 DOCTYPE!
• HTML dosyanınız HTML5 özelliklerinde olacağını tanımlamak için şu etiket
kullanılır:
• <!DOCTYPE html>
• ...
Minimum HTML5 Dökümanı
• <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Başlık</title>
</head>
<body>
Döküman...
HTML5 Semantik Elementler
• Semantik = Anlamlandırma / Anlam
Semantik Elementler = Anlamı olan elementler.
• Semantik elem...
HTML5'tekiYeni Semantik Elementler
• Günümüzde bir çok HTML sayfası şu şekilde kodlanmıştır: <div id="nav">,
<div class="h...
HTML5'tekiYeni Semantik Elementler
• HTML5'in bu tip bildirimler için daha iyi çözümleri vardır:
• <header>
• <nav>
• <sec...
HTML5 <section> Elementi
• <section> elementi bir döküman içindeki bir kısımı belirtir.
Örnek
<!DOCTYPE html>
<html>
<body>
<section>
<h1>WWF</h1>
<p>WorldWide Fund for Nature (WWF) doğanın zarar görmesini durd...
HTML5 <article> (Makale) Elementi
Bir makale web sayfasının geri kalanından bağımsız olarak dağıtılabilmelidir.
Nerelerde ...
Örnek
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (kısaca IE9) 14 Mart 2011, saat 21'de
yayınlan...
HTML5 <nav> Elementi
• <nav> elementi navigasyon bağlantıları büyük sayfalar için tasarlanmıştır.
Ancak, belgedeki tüm lin...
HTML5 <aside> Elementi
• <aside> elementi ile sidebar’larınızı kolayca belirtebilir, CSS ile tüm önce ki
elementler gibi ş...
HTML5 <header> Elementi
• <header> elementi bir döküman(sayfa) ya da bir kısım (section) için bir
başlık belirtir.
• <head...
Örnekler
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-
15"></time></p>
</header>
<p>...
HTML5 <footer> Elementi
• <footer> elementi bir döküman ya da bir kısım için alt bilgi belirtir.
• Bir footer (alt bilgi) ...
Örnekler
<article>
<h1> yorum</h1>
<p> yorum yorum yorum </p>
<footer>
<p>Gönderen: Steve Jobs</p>
<p><time pubdate dateti...
HTML5 <figure> ve <figcaption> Elementleri
<figure> etiketi, içerisinde bir resim, gösterim, diyagram, kod listeleri vs. g...
Örnek
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304"
height="228">
<figcaption>Fig.1 -The Pulpit Roc...
HTML5Yeni GirişTipleri
• HTML5 formlar için bir kaç yeni input tipine sahiptir. Bu yeni özellikler daha
iyi kontrol ve doğ...
GirişTipi: color
• Giriş alanının bir renk içermesi için color kullanılır.
<form>
Bir renk seçin:<input type="color" name=...
GirişTipi: date
• Bir tarih seçmenize yardımcı olur.
<form>
Doğum günü:<input type="date" name="bday">
</form>
GirişTipi: datetime
• Bir tarih ve saat seçmenizi sağlar (time zone ile).
Doğum günü (tarih ve saat): <input type="datetim...
GirişTipi: datetime-local
• Bir tarih ve saat seçmenizi sağlar (time zone olmadan).
Doğum günü (tarih ve saat): <input typ...
GirişTipi: email
• Input alanında bir e-posta adresi olması gerektiğinde kullanılır.
E-mail: <input type="email" name="ema...
GirişTipi: month
• Kullanıcının bir ay ve yıl seçmesine olanak verir.
Doğum günü (ay ve yıl): <input type="month" name="bd...
GirişTipi: number
• Input alanı numerik bir değer gerektirdiği zaman kullanılır.
• Ayrıca hangi sayıların kabul edilebilec...
GirişTipi: range
• Belirli bir aralıkta olan bir sayıyı seçmenizi sağlar
• Ayrıca hangi sayıların kabul edilebileceğini be...
GirişTipi: search
• Arama işleri için search tipi kullanılır. (bir search alanı tipik bir metin (text)
alanı gibi davranır...
GirişTipi: tel
• Telefon numarası girmeye yarar:
Telefon: <input type="tel" name="usrtel">
GirişTipi: time
• Bir saat seçmenizi sağlar.
Bir saat seçin: <input type="time" name="usr_time">
GirişTipi: url
• Bir giriş alanı bir URL bağlantısı içerecekse kullanılır.
• Bu özellik, form gönderildiği sırada doğrulan...
GirişTipi: week
• Bir hafta ve yıl seçmenizi sağlar.
Bir hafta seçin: <input type="week" name="week_year">
HTML5 Form Elementleri
• HTML5 aşağıdaki yeni form elementlerine sahiptir:
• <datalist>
• <keygen>
• <output>
HTML5 <datalist> Elementi
• <datalist> elementi, bir <input> elementi için önceden belirlenmiş bir dizi
seçeneğin listesin...
HTML5 <keygen> Elementi
• <keygen> elementinin amacı, kullanıcıları yetkilendirmek için güvenli bir yol
kullanmaktır.
• <k...
HTML5 <output> Elementi
• <output> elementi bir hesaplamanın sonucunu gösterir (bir script gibi)
<form oninput="x.value=pa...
HTML5 Form Özellikleri
• HTML5 <form> ve <input> için bir kaç yeni özelliğe sahiptir.
<form> için yeni özellikleri:
•autoc...
<form> / <input> autocomplete özelliği
• autocomplete özelliği bir form ya da input alanının autocomplete özelliğinin on y...
HTML5 Inline (Sıralı) SVG
• SVG Nedir?
• SVG Skala edilebilir Vektör Grafikleri (ScalableVector Graphics) anlamına gelir.
...
SVG'nin Avantajları
Resim dosyalarında SVG kullanmanın avantajları (JPEG ve GIF gibi):
• SVG resimleri herhangi bir metin ...
SVG'yi Doğrudan HTML Sayfalarına Gömmek
• HTML5 ile SVG elementlerini doğrudan sayfanıza gömebilirsiniz :
<svg width="300"...
Canvas ve SVG Karşılaştırması
Canvas SVG
•Çözünürlüğe bağımlı
•Olay (event)
işleyicilerini desteklemez
•Zayıf render kapas...
HTML5Video
• HTML5'te video görüntülemek için yapmanız gereken tek şey:
<video width="320" height="240" controls>
<source ...
Video Formatları veTarayıcı Desteği
Tarayıcı MP4 WebM Ogg
Internet
Explorer
EVET HAYIR HAYIR
Chrome EVET EVET EVET
Firefox...
Video Formatları için MIMETipleri
Format MIME Tipi
MP4 video/mp4
WebM video/webm
Ogg video/ogg
HTML5 Audio
• HTML5'ten önce, ses dosyalarının web'de çalınması için bir standard yoktu.
• HTML5'ten önce, audio dosyaları...
HTML5 Audio - Nasıl Çalışır?
• Bir ses dosyasını bir HTML5 dosyası içinde çalmak için yapmanız gereken tek
şey aşağıdaki g...
Ses Formatları veTarayıcı Destekleri
Tarayıcı MP3 Wav Ogg
Internet Explorer EVET HAYIR HAYIR
Chrome EVET EVET EVET
Firefox...
Ses formatları için MIME tipleri
Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
Hakkımda
• serkanakyurek@outlook.com
• www.sakyurek.com
• www.twitter.com/srknakyurek
Upcoming SlideShare
Loading in …5
×

Html5 Yenilikleri & SEO

Html5 Yenilikleri & SEO

  • Login to see the comments

  • Be the first to like this

Html5 Yenilikleri & SEO

  1. 1. Html 5 Yenlikleri & SEO
  2. 2. Başlangıç • www: WorldWideWeb (Dünya Çapında Ağ) kelimerinin kısaltılmış hâlidir. Alternatif adıW3'dir. Siteleri internete bağlamak için oluşturulmuş bir sistemdir. "Web'de yeni arama motorları" tabirindeki 'Web' kelimesi, WWW'ya ithaf etmektedir. • W3C: WorldWideWeb Consortium kelimelerinin kısaltmasıdır. Web'in standartlarını belirleyen ve geliştiren uluslararası bir topluluktur.
  3. 3. Başlangıç • HTTP: HyperTextTransfer Protocol (Zengin MetinTransfer Protokolü) kelimelerinin kısaltmasıdır. Site adlarında www'dan önce http:// şeklinde yazılır. Adından da anlaşılacağı üzere sitelerin ekranımızda görüntülenmesi içinW3C tarafından oluşturulan bu protokol esas alınır. Bir web sitesi ile sunucu arasındaki veri transferini belli standartlara oturtmak için geliştirilmiştir. Bu transferin daha güvenli bir versiyonu olan HTTPS (HTTP Secure) bugün tüm ticarî alışveriş sitelerinde veri güvenliğini sağlamak amacıyla kullanılmaktadır.
  4. 4. Başlangıç • FTP: Açılımı FileTransfer Protocol (DosyaTransfer Protokolü) şeklindedir. Web sitesi sahibinin oluşturduğu site dosyalarını sunucuya gönderebilmesi amacıyla oluşturulmuş bir protokoldür.Web sitesi sahiplerinin sunuculara ulaşabilmesi oluşturulmuş FTP yazılımları geliştirilmiştir. SmartFTP, CuteFTP gibi birçok yazılım olsa da bunlar arasında en popüler FileZilla adlı yazılımdır. Kullanımı oldukça basittir. • HTTP, ziyaretçi ~ sunucu (visitor ~ server) arasındaki ilişkiyi belirlerken; FTP, site sahibi ~ sunucu (client ~ server) arasındaki ilişkiyi belirler.
  5. 5. Başlangıç • SEO: Search EngineOptimization (Arama Motoru Optimizasyonu) kelimelerinin kısaltmasıdır. Sitelerin arama motorları tarafından index'lenebilmesi için HTML etiketleri içine yazılan bazı tanımlamalar dahilinde yapılır. SEO konusu başlı başına bir inceleme alanıdır ve ileride bu konuya değineceğiz.
  6. 6. Başlangıç • Domain: Alternatif ismi "alan adı"dır. Web sitelerinin internet üzerindeki adıdır. Örneğin; google.com bir domain'dir.Temelinde bir IP adresi vardır. Kullanıcıların bu IP adresini yazıp sitelere erişmesi zor olduğu için böyle bir sistem geliştirilmiştir. • Hosting: Alan adlarının 7/24 Web'de erişilebilmesi için çeşitli firmalar tarafından sağlanan hizmet, hosting olarak adlandırılır. Hosting firmalarının sabah akşam hiç kapatılmadan çalışan server'ları, diğer bir ifade ile sunucuları vardır.Web sitesi sahibi oluşturduğu site dökümanlarını bu sunuculara gönderir ve yaptığı sitenin tüm dünya tarafından ziyaret edilmesine olanak tanır.
  7. 7. Baslangıç • İnternet sitelerinin görsel tasarımında kullanılan HTML dili, 1980 senesinden bu yana gelişerek, sitelerin kullanıcılarına ve arama motorlarına daha faydalı hale gelmeye çalışıyor. En son HTML 5 dilinin çıkarılmasıyla, HTML dilinde önemli değişiklikler ve yenilikler meydana geldi. • Web tarayıcı standardını belirleyen WC3 kurumu, HTML 5 kodlama dilinin baz alınması gerektiğine dair kararını açıkladı. Bu karar herkesin sıcak baktığını söylemeliyiz. Çünkü HTML 5, kullanıcı dostu sitelerin ortaya çıkmasını sağlayacak olan bir web teknolojisini ifade ediyor. Aynı zamanda Google tarafından da desteklenerek, yaygınlaşması sağlanan HTML 5 tasarım dilinin bugün, tüm tasarımcı ve web programcısı tarafından kullanıldığını söylemek mümkün.
  8. 8. Html 5’te artık desteklenmeyen Html elementleri • <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp>
  9. 9. Yeni Gelen Html Elementleri • <canvas>, <audio>, <video>, <progress>, <caption>, <header>, <nav>, <footer>, <article>, <aside>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <rp>, <rt>, <ruby>, <section>, <source>, <summary>, <time>
  10. 10. HTML5 DOCTYPE! • HTML dosyanınız HTML5 özelliklerinde olacağını tanımlamak için şu etiket kullanılır: • <!DOCTYPE html> • Tarayıcı Desteği
  11. 11. Minimum HTML5 Dökümanı • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Başlık</title> </head> <body> Döküman içeriği...... </body> </html>
  12. 12. HTML5 Semantik Elementler • Semantik = Anlamlandırma / Anlam Semantik Elementler = Anlamı olan elementler. • Semantik elementler nelerdir? Semantik bir element hem tarayıcıya hem de geliştiriciye kendisinin anlamını açıkça belirtir. Semantik olmayan elementlere örnekler: <div> ve <span> - İçerik hakkında bir şey söylemez. Semantic elementlere örnekler: <form>, <table>, ve <img> - İçeriği açıkça belirtir.
  13. 13. HTML5'tekiYeni Semantik Elementler • Günümüzde bir çok HTML sayfası şu şekilde kodlanmıştır: <div id="nav">, <div class="header">, or <div id="footer">, • HTML5'in bu tip bildirimler için daha iyi çözümleri vardır.
  14. 14. HTML5'tekiYeni Semantik Elementler • HTML5'in bu tip bildirimler için daha iyi çözümleri vardır: • <header> • <nav> • <section> • <article> • <aside> • <figure> • <figcaption> • <footer> • <details> • <summary> • <mark> • <time>
  15. 15. HTML5 <section> Elementi • <section> elementi bir döküman içindeki bir kısımı belirtir.
  16. 16. Örnek <!DOCTYPE html> <html> <body> <section> <h1>WWF</h1> <p>WorldWide Fund for Nature (WWF) doğanın zarar görmesini durdurmayı ve verilen zararları onarmayı amaçlayan uluslararası bir sivil toplum kuruluşudur. 1961'de kurulmuştur.</p> </section> <section> <h1>WWF'nin Panda sembolü</h1> <p>PandaWWF'nin sembolü olmuştur. İyi bilinen bu Panda sembolü, ChiChi isimli, WWF'nin kurulduğu yıl Pekin hayvanat bahçesinden Londra hayvanat bahçesine transfer edilmiştir.</p> </section> </body> </html>
  17. 17. HTML5 <article> (Makale) Elementi Bir makale web sayfasının geri kalanından bağımsız olarak dağıtılabilmelidir. Nerelerde kullanılabileceğine dair örnekler: • Forum mesajları • Blog gönderileri • Haber Hikayesi • Yorumlar
  18. 18. Örnek <article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9 (kısaca IE9) 14 Mart 2011, saat 21'de yayınlanmıştır.</p> </article>
  19. 19. HTML5 <nav> Elementi • <nav> elementi navigasyon bağlantıları büyük sayfalar için tasarlanmıştır. Ancak, belgedeki tüm linkler bu element içinde olmak zorunda değildir. Örnek : <nav> <a href="index.php">Ana Sayfa</a> <a href="dersler.php">Dersler</a> </nav>
  20. 20. HTML5 <aside> Elementi • <aside> elementi ile sidebar’larınızı kolayca belirtebilir, CSS ile tüm önce ki elementler gibi şekillendirebilirsiniz. Örnek : <aside> <h4>Epcot Center</h4> <p>Epcot Center, Florida'daki Disney World'da...</p> </aside>
  21. 21. HTML5 <header> Elementi • <header> elementi bir döküman(sayfa) ya da bir kısım (section) için bir başlık belirtir. • <header> elementi içerdiği içeriği kapsayıcı olmalıdır. • Bir dökümanda bir kereden fazla kullanabilirsiniz.
  22. 22. Örnekler <article> <header> <h1>Internet Explorer 9</h1> <p><time pubdate datetime="2011-03- 15"></time></p> </header> <p>Windows Internet Explorer 9 (kısaca IE9) 14.....</p> </article> <header> <h1>Serkan AKYÜREK</h1> <p>Kişisel Sayfası</p> </header> <p>İçerik </p>
  23. 23. HTML5 <footer> Elementi • <footer> elementi bir döküman ya da bir kısım için alt bilgi belirtir. • Bir footer (alt bilgi) genelde dökümanın yazarını, telif haklarını, kullanım gizliliği, iletişim vs. gibi bilgileri içerir. • Bir dökümanda bir kereden fazla kullanabilirsiniz.
  24. 24. Örnekler <article> <h1> yorum</h1> <p> yorum yorum yorum </p> <footer> <p>Gönderen: Steve Jobs</p> <p><time pubdate datetime="2012-03-01"></time></p> </footer> </article> <footer> <center> <p>Coppyright @ Steve Jobs</p> </center> </footer>
  25. 25. HTML5 <figure> ve <figcaption> Elementleri <figure> etiketi, içerisinde bir resim, gösterim, diyagram, kod listeleri vs. gibi şeylerin olduğunu belirtir. <figure> elementi ana akış ile ilgili olsa da, konumu ana akıştan bağımsızdır ve çıkarılırsa dökümanın akışını engellemez. <figcaption> etiketi, <figure> elementinin belirttiği resime başlık koymaya yarar..
  26. 26. Örnek <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig.1 -The Pulpit Rock, Norway.</figcaption> </figure>
  27. 27. HTML5Yeni GirişTipleri • HTML5 formlar için bir kaç yeni input tipine sahiptir. Bu yeni özellikler daha iyi kontrol ve doğrulama olanağı sağlar. •color •date •datetime •datetime-local •email •month •number •range •search •tel •time •url •week
  28. 28. GirişTipi: color • Giriş alanının bir renk içermesi için color kullanılır. <form> Bir renk seçin:<input type="color" name="favcolor"> </form>
  29. 29. GirişTipi: date • Bir tarih seçmenize yardımcı olur. <form> Doğum günü:<input type="date" name="bday"> </form>
  30. 30. GirişTipi: datetime • Bir tarih ve saat seçmenizi sağlar (time zone ile). Doğum günü (tarih ve saat): <input type="datetime" name="bdaytime">
  31. 31. GirişTipi: datetime-local • Bir tarih ve saat seçmenizi sağlar (time zone olmadan). Doğum günü (tarih ve saat): <input type="datetime-local" name="bdaytime">
  32. 32. GirişTipi: email • Input alanında bir e-posta adresi olması gerektiğinde kullanılır. E-mail: <input type="email" name="email">
  33. 33. GirişTipi: month • Kullanıcının bir ay ve yıl seçmesine olanak verir. Doğum günü (ay ve yıl): <input type="month" name="bdaymonth">
  34. 34. GirişTipi: number • Input alanı numerik bir değer gerektirdiği zaman kullanılır. • Ayrıca hangi sayıların kabul edilebileceğini belirtebilirsiniz: Miktar girin (1 ve 5 arasında): <input type="number" name="quantity" min="1" max="5">
  35. 35. GirişTipi: range • Belirli bir aralıkta olan bir sayıyı seçmenizi sağlar • Ayrıca hangi sayıların kabul edilebileceğini belirtebilirsiniz: <input type="range" name="points" min="1" max="10">
  36. 36. GirişTipi: search • Arama işleri için search tipi kullanılır. (bir search alanı tipik bir metin (text) alanı gibi davranır). Google'da ara: <input type="search" name="googlesearch">
  37. 37. GirişTipi: tel • Telefon numarası girmeye yarar: Telefon: <input type="tel" name="usrtel">
  38. 38. GirişTipi: time • Bir saat seçmenizi sağlar. Bir saat seçin: <input type="time" name="usr_time">
  39. 39. GirişTipi: url • Bir giriş alanı bir URL bağlantısı içerecekse kullanılır. • Bu özellik, form gönderildiği sırada doğrulanır. Ana sayfanızı ekleyin: <input type="url" name="homepage">
  40. 40. GirişTipi: week • Bir hafta ve yıl seçmenizi sağlar. Bir hafta seçin: <input type="week" name="week_year">
  41. 41. HTML5 Form Elementleri • HTML5 aşağıdaki yeni form elementlerine sahiptir: • <datalist> • <keygen> • <output>
  42. 42. HTML5 <datalist> Elementi • <datalist> elementi, bir <input> elementi için önceden belirlenmiş bir dizi seçeneğin listesini belirtir. • <datalist> elementi <input> elementleri için bir "autocomplete" özelliği sağlar. Kullanıcılar, input verisi için önceden tanımlanmış bir açılır kutu listesi göreceklerdir. • Bir <datalist> elemanı ile birlikte bağlamak için <input> elemanının "list" özelliğini kullanın. <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
  43. 43. HTML5 <keygen> Elementi • <keygen> elementinin amacı, kullanıcıları yetkilendirmek için güvenli bir yol kullanmaktır. • <keygen> etiketi, bir form içerisinde bir anahtar çifti (key-pair) jeneratörü belirtir. • Form gönderildiğinde, iki anahtar oluşturulur, biri özel biri ise genel. • Özel anahtar sizin lokalinizde saklanır, genel olanı ise sunucuya gönderilir. Genel anahtar, kullanıcının ileride tekrar kullanabilmesi için bir istemci sertifikası oluşturmak için kullanılır. <form> Kullanıcı adı: <input type="text" name="usr_name"> Şifreleme: <keygen name="security"> <input type="submit"> </form>
  44. 44. HTML5 <output> Elementi • <output> elementi bir hesaplamanın sonucunu gösterir (bir script gibi) <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>
  45. 45. HTML5 Form Özellikleri • HTML5 <form> ve <input> için bir kaç yeni özelliğe sahiptir. <form> için yeni özellikleri: •autocomplete •novalidate <input> için yeni özellikler: •autocomplete •autofocus •form •formaction •formenctype •formmethod •formnovalidate •formtarget •height ve width •list •min ve max •multiple •pattern (regexp) •placeholder •required •step
  46. 46. <form> / <input> autocomplete özelliği • autocomplete özelliği bir form ya da input alanının autocomplete özelliğinin on ya da off olacağını belirtir. • autocomplete açık olduğunda, tarayıcı otomatik olarak kullanıcı tarafından önceden girilen bilgileri tamamlar. • İpucu: form'larda autocomplete on yapmak ve belli input alanlarında off yapmak mümkündür, ya da tam tersi. • Not: autocomplete özelliği <form> ile ve şu <input> tipleri ile çalışır: text, search, url, tel, email, password, datepickers, range, ve color. <form autocomplete="on"> İsim:<input type="text" name="fname"><br> Soyisim: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form>
  47. 47. HTML5 Inline (Sıralı) SVG • SVG Nedir? • SVG Skala edilebilir Vektör Grafikleri (ScalableVector Graphics) anlamına gelir. • SVG vektör temelli grafikleri ifade etmek için kullanılır. • SVG grafikleri XML formatında tanımlar • SVG grafikleri zoom'lansalar da yeniden boyutlandırılsalar da kaliteleri düşmez. • SVG dosyaları içindeki her element, her özellik (attribute) hareketlendirilebilir (anime)
  48. 48. SVG'nin Avantajları Resim dosyalarında SVG kullanmanın avantajları (JPEG ve GIF gibi): • SVG resimleri herhangi bir metin editörü ile yaratılabilir ya da düzenlenebilir • SVG resimleri aranabilir, indekslenebilir, script kodu ile yazılabilir ya da sıkıştırıabilir • SVG resimleri skale edilebilir. • SVG resimleri tüm çözünürlüklerde yüksek kalite ile yazdırılabilir (yazıcı) • SVG resimleri zoom edilebilir (ve kalite düşmez)
  49. 49. SVG'yi Doğrudan HTML Sayfalarına Gömmek • HTML5 ile SVG elementlerini doğrudan sayfanıza gömebilirsiniz : <svg width="300" height="200"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>
  50. 50. Canvas ve SVG Karşılaştırması Canvas SVG •Çözünürlüğe bağımlı •Olay (event) işleyicilerini desteklemez •Zayıf render kapasitesi (metinler için) •Sonuçları .png veya .jpg olarak kaydedebilme •Oyunlar için uygun •Çözünürlükten bağımsız •Olay (event) işleyicilerini destekler •geniş render alanları olan uygulamalar için en uygun çözüm(Google Maps) •Karmaşıksa yavaş render işlemi •Oyunlar için uygun değil
  51. 51. HTML5Video • HTML5'te video görüntülemek için yapmanız gereken tek şey: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Tarayıcınız video etiketini desteklemiyor. </video>
  52. 52. Video Formatları veTarayıcı Desteği Tarayıcı MP4 WebM Ogg Internet Explorer EVET HAYIR HAYIR Chrome EVET EVET EVET Firefox NO EVET EVET Safari EVET HAYIR HAYIR Opera HAYIR EVET EVET
  53. 53. Video Formatları için MIMETipleri Format MIME Tipi MP4 video/mp4 WebM video/webm Ogg video/ogg
  54. 54. HTML5 Audio • HTML5'ten önce, ses dosyalarının web'de çalınması için bir standard yoktu. • HTML5'ten önce, audio dosyalarının çalınması için eklentilere (flash gibi) ihtiyaç vardı. Bununla beraber, farklı tarayıcılar farklı eklentileri de destekliyordu. • HTML5 bir ses dosyasını bir web sayfasına gömmek için yeni bir element kullanır: <audio> element.
  55. 55. HTML5 Audio - Nasıl Çalışır? • Bir ses dosyasını bir HTML5 dosyası içinde çalmak için yapmanız gereken tek şey aşağıdaki gibidir: <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Tarayıcınız audio elementini desteklemiyor. </audio>
  56. 56. Ses Formatları veTarayıcı Destekleri Tarayıcı MP3 Wav Ogg Internet Explorer EVET HAYIR HAYIR Chrome EVET EVET EVET Firefox HAYIR Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3 EVET EVET Safari EVET EVET HAYIR Opera HAYIR EVET EVET
  57. 57. Ses formatları için MIME tipleri Format MIME-type MP3 audio/mpeg Ogg audio/ogg Wav audio/wav
  58. 58. Hakkımda • serkanakyurek@outlook.com • www.sakyurek.com • www.twitter.com/srknakyurek

×