Embed Size (px)
Citation preview
Html 5 Yenlikleri & SEO
Başlangıç• www: World Wide Web (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: World Wide Web Consortium kelimelerinin kısaltmasıdır.
Web'in standartlarını belirleyen ve geliştiren uluslararası bir topluluktur.
Başlangıç• HTTP: HyperText Transfer Protocol (Zengin Metin Transfer 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çin W3C 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.
Başlangıç
• FTP: Açılımı File Transfer Protocol (Dosya Transfer 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.
Başlangıç
• SEO: Search Engine Optimization (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.
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.
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.
Html 5’te artık desteklenmeyen Html elementleri
• <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp>
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>
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
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>
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.
HTML5'teki Yeni 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.
HTML5'teki Yeni 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>
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>World Wide 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>Panda WWF'nin sembolü olmuştur. İyi bilinen bu Panda sembolü, Chi Chi isimli, WWF'nin kurulduğu yıl Pekin hayvanat bahçesinden Londra hayvanat bahçesine transfer edilmiştir.</p></section></body></html>
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
Ö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>
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>
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>
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.
Ö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>
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.
Ö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>
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..
Örnek
<figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption></figure>
HTML5 Yeni 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
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>
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="datetime" name="bdaytime">
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">
Giriş Tipi: email
• Input alanında bir e-posta adresi olması gerektiğinde kullanılır.
E-mail: <input type="email" name="email">
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">
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">
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">
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">
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ır.
Ana sayfanızı ekleyin: <input type="url" name="homepage">
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 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>
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>
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>
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
<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>
HTML5 Inline (Sıralı) SVG
• SVG Nedir?• SVG Skala edilebilir Vektör Grafikleri (Scalable Vector 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)
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)
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>
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
HTML5 Video
• 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>
Video Formatları ve Tarayıcı Desteği
Tarayıcı MP4 WebM OggInternet Explorer
EVET HAYIR HAYIR
Chrome EVET EVET EVETFirefox NO EVET EVET
Safari EVET HAYIR HAYIROpera HAYIR EVET EVET
Video Formatları için MIME Tipleri
Format MIME TipiMP4 video/mp4WebM video/webmOgg 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ı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.
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>
Ses Formatları ve Tarayıcı Destekleri
Tarayıcı MP3 Wav OggInternet Explorer EVET HAYIR HAYIR
Chrome EVET EVET EVETFirefox HAYIR
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3
EVET EVET
Safari EVET EVET HAYIROpera HAYIR EVET EVET
Ses formatları için MIME tipleri
Format MIME-typeMP3 audio/mpegOgg audio/oggWav audio/wav
![HTML5 - W3C...HTML4 + CSS 56 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language] Novos elementos (semânticos) HTML5 + CSS E o que ficou de fora do HTML5?](https://img.pdfslide.tips/doc/110x75/5f9769938559bc0a406dee44/html5-w3c-html4-css-56-html5-futuro-da-web-futuro-da-web-html5-html.jpg)
