XII. Türkiye’de İnternet Konferansı 8-10 Kasım 2007

XII. Türkiye’de İnternet Konferansı 8-10 Kasım 2007

Anlamsal HTML’e Yeni Bir Bakış:

MİKROFORMATLARAbdullah Çetin

Ç[email protected]

MertDUATEPE

[email protected]

mailto:[email protected]

mailto:[email protected]


Abdullah Çetin ÇAVDARMert DUATEPE

İçerik

• Web’e Genel Bakış

• Nedir?

• Türleri

• Tasarım Örüntüleri

• Yararları

• Kullanım Alanları

• Sonuçlar



Web’e Genel Bakış

İÇERİK

İÇERİKİÇERİKİÇERİK




ANLAM

<p> <table>

<ul> / <li><adr>

<cite>

<a>




Web Geliştirici?

?

??? ?

? ?




• Üyelik

• Onay Mekanizması

• Değiştirme/Silme

• Gizlilik Politikası



Mikroformatlar Nedir?

• Mikroformatlar, öncelikle insanlar, ardından makineler (bilgisayarlar) için tasarlanmış olup günümüzde geniş kitleler tarafından kullanılan standartlar üzerine kurulmuş ve verinin biçimlendirilmesine olanak tanıyan basit yapılardır.




PROBLEM

İletişim bilgilerinin paylaşımı

Etkinliklerin takibi

Yorumların merkezi olmayan bir şekilde yazılması

İçeriklerin etiketlenmesi




• Tekerleği yeniden keşfetme

• Kolay çözüm üret

• Günümüz standartlarını kullan




EN UYGUN ÇÖZÜM




ÖNCE İNSAN SONRA MAKİNE




MODÜLERHerhangi bir XHTML kodu içinde

kolaylıkla yerleştirilebilir




MERKEZİ OLMAYAN SERVİS VE İÇERİKLER






Mikroformatların Türleri



Mikroformatların Türleri

• Basit Mikroformatlar (Elemental)– Kolay – Temel oluşturur

• Bileşik Mikroformatlar (Compound)– Karmaşık – Birçok basit mikroformatın bir araya

gelmesiyle oluşur.



Basit Mikroformatlar - XFN• XHTML Friend Network (XFN)

– Profesyonel ya da Kişisel İlişki Tanımlama

– Arkadaşlık (Friendship): friend, acquaintance, contact – Fiziksel (Physical): met – Profesyonel (Professional): co-worker, colleague – Coğrafi (Geographical): co-resident, neighbor – Ailevi (Family): child, parent, sibling, spouse, kin – Romantik (Romantic): muse, crush, date, sweetheart – Kişisel (Identity): me



Basit Mikroformatlar - XFN<a rel="friend met colleague" href="

http://mertduatepe.blogspot.com">Mert DUATEPE</a>

<a rel="me" href="http://www.cavdar.net/">Abdullah Çetin ÇAVDAR</a>



Basit Mikroformatlar - XFN

http://gmpg.org/xfn/creator



Basit Mikroformatlar - TAG

• Etiketleme (Tagging): Anlamsal anahtar sözcükler verme

• Arama, ilişki kurma, dizinleme

• Web 2.0



Basit Mikroformatlar – rel-tag

• İçeriği anlamsal olarak tanımlayacak anahtar sözcükler veriyoruz.



Basit Mikroformatlar - TAG• Etiket Havuzu







<a rel=”tag” lang=”tr” href=”http://technorati.com/tag/microformats”>

Mikroformatlar</a>






Bileşik Mikroformatlar - hCard

• 1:1 vCard

• Kişi, Konum, Şirket, Organizasyon

• Kök elemanı “vcard”



Bileşik Mikroformatlar - hCard• İsim ve Kişisel Detaylar

– İsim – N (name)– Takma Ad (nickname) – Doğum Tarihi (bday)– Fotoğraf (photo) – Bağlantı (url)

• İletişim Bilgileri

– Adres (adr)– Coğrafi konum (geo)– E-posta (email) – Telefon (tel)

• Organizasyonel Detaylar

– Organizasyon (org)– Rol (role)– Görev (title) – Logo (logo)




<a class="url fn n" href="http://www.cavdar.net"><span class="given-name">Abdullah</span> <span class="additional-name">Çetin</span> <span class="family-name">ÇAVDAR</span></a>




<div class="org">Milsoft Yazılım Teknolojileri A.Ş</div><a class="email" href="mailto:[email protected]">[email protected]</a>



Bileşik Mikroformatlar - hCard<div class="adr"><div class="street-

address">Cahit Sıtkı S. No:28/7 Çankaya</div><span class="locality">Ankara</span>, <span class="postal-code">06450</span> <span class="country-name">Türkiye</span></div>

<div class="tel">+903121234567</div>




<div class="vcard"><a class="url fn n" href="http://www.cavdar.net"><span class="given-name">Abdullah</span> <span class="additional-name">Çetin</span> <span class="family-name">ÇAVDAR</span></a><div class="org">Milsoft Yazılım Teknolojileri A.Ş</div><a class="email" href="mailto:[email protected]">[email protected]</a><div class="adr"><div class="street-address">Cahit Sıtkı S. No:28/7 Çankaya</div><span class="locality">Ankara</span>, <span class="postal-code">06450</span> <span class="country-name">Türkiye</span></div><div class="tel">+903124797026</div>

</div>









Bileşik Mikroformatlar - hCard• http://microformats.org/code/hcard/creator



Tasarım Örüntüleri (ABBR)

İnsan – İçerik

Makine – Title

<abbr class="dtstart" title="20071108" lang="TR">8 Kasım, 2007</abbr>

<abbr class="geo" title="39.877864; 32.726555" lang="TR">Hacettepe Üniversitesi Beytepe Kampüsü</abbr>



Tasarım Örüntüleri (REL)

Kaynak – Hedef ilişkisi

<a href=" http://en.wikipedia.org/wiki/Semantic_HTML#Semantic_HTML" rel="tag" lang=”tr”>Anlamsal HTML</a>

<a href="http://creativecommons.org/licenses/by/2.5/" rel="license">Creative Commons Lisansı sürüm 2.5</a>



Yararları

• Standartlaşma

• Merkezi olmayan servislerin kurulmasına olanak sağlama

• Web tabanlı içerik ile Masaüstü Uygulamalarının birlikte çalışabilirliğini sağlama



Kullanım Alanları

hReview ve hCard:

hCard ve geo-tag:

hCalendar:



Kullanım Alanları

hReview, hCard ve XFN:

hListing:

rel-tag:



Tarayıcı Desteği

FF 3.0 IE 8.0 SAFARI

√ √ ?



Sonuçlar

• Açık standart

• Anlamsal zenginlik

• Merkezi olmayan bir yapı

• Etkili bilgi paylaşımı, arama, dizinleme

• Geniş çevrelerce desteklenme



Kaynaklar

• Tantek Çelik (www.tantek.com)• microformats.org• John Allsopp (Microformats: Empowering Your Markup for Web 2.0)



Demo



Sorular



Teşekkür

Teşekkürler…

Abdullah Çetin ÇAVDAR [email protected]

Mert DUATEPE [email protected]

Documents

XII. Türkiye’de İnternet Konferansı 8-10 Kasım 2007