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

1. Anlamsal HTML’e Yeni Bir Bakış: MİKROFORMATLAR Abdullah Çetin ÇAVDAR cetin@cavdar.net Mert DUATEPE duatepe@cs.bilkent.edu.tr XII. Türkiye’de İnternet Konferansı 8-10 Kasım 2007

2. Web’e Genel Bakış Nedir? Türleri Tasarım Örüntüleri Yararları Kullanım Alanları Sonuçlar İçerik

3. İÇERİK İÇERİK İÇERİK Web’e Genel Bakış

4. ANLAM Web’e Genel Bakış <table> <p> <cite> <a> <ul> / <li> <adr>

5. Web’e Genel Bakış ? ? ? ? ? Web Geliştirici ? ? ?

6. Web’e Genel Bakış • Üyelik • Onay Mekanizması • Değiştirme/Silme • Gizlilik Politikası

7. 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.

8. Mikroformatlar Nedir? • PROBLEM İletişim bilgilerinin paylaşımı Etkinliklerin takibi İçeriklerin etiketlenmesi Yorumların merkezi olmayan bir şekilde yazılması

9. Mikroformatlar Nedir? • Tekerleği yeniden keşfetme • Kolay çözüm üret • Günümüz standartlarını kullan

10. Mikroformatlar Nedir? • EN UYGUN ÇÖZÜM

11. Mikroformatlar Nedir? • ÖNCE İNSAN SONRA MAKİNE

12. Mikroformatlar Nedir? • MODÜLER • Herhangi bir XHTML kodu içinde kolaylıkla yerleştirilebilir

13. Mikroformatlar Nedir? • MERKEZİ OLMAYAN SERVİS VE İÇERİKLER

14. Mikroformatlar Nedir?

15. Mikroformatların Türleri

16. Basit Mikroformatlar (Elemental) Kolay Temel oluşturur Bileşik Mikroformatlar (Compound) Karmaşık Birçok basit mikroformatın bir araya gelmesiyle oluşur. Mikroformatların Türleri

17. 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

18. <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

19. http://gmpg.org/xfn/creator Basit Mikroformatlar - XFN

20. Etiketleme (Tagging): Anlamsal anahtar sözcükler verme Arama, ilişki kurma, dizinleme Web 2.0 Basit Mikroformatlar - TAG

21. İçeriği anlamsal olarak tanımlayacak anahtar sözcükler veriyoruz. Basit Mikroformatlar – rel-tag

22. Etiket Havuzu Basit Mikroformatlar - TAG

23. Basit Mikroformatlar - TAG

24. <a rel=”tag” lang=”tr” href=”http://technorati.com/tag/microformats”> Mikroformatlar</a> Basit Mikroformatlar - TAG

25. Basit Mikroformatlar - TAG

26. 1:1 vCard Kişi, Konum, Şirket, Organizasyon Kök elemanı “vcard” Bileşik Mikroformatlar - hCard

27. İ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) Bileşik Mikroformatlar - hCard

28. <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> Bileşik Mikroformatlar - hCard

29. <div class="org">Milsoft Yazılım Teknolojileri A.Ş</div><a class="email" href="mailto:cetin@cavdar.net">cetin@cavdar.net</a> Bileşik Mikroformatlar - hCard

30. <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> Bileşik Mikroformatlar - hCard

31. <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:cetin@cavdar.net">cetin@cavdar.net</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

32. Bileşik Mikroformatlar - hCard

33. Bileşik Mikroformatlar - hCard

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

35. İ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 (ABBR)

36. 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> Tasarım Örüntüleri (REL)

37. 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 Yararları

38. Kullanım Alanları • hReview ve hCard: • hCard ve geo-tag: • hCalendar:

39. Kullanım Alanları • hReview, hCard ve XFN: • hListing: • rel-tag:

40. Tarayıcı Desteği FF 3.0 IE 8.0 SAFARI ? √ √

41. Açık standart Anlamsal zenginlik Merkezi olmayan bir yapı Etkili bilgi paylaşımı, arama, dizinleme Geniş çevrelerce desteklenme Sonuçlar

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

43. Demo

44. Sorular

45. Teşekkürler… Abdullah Çetin ÇAVDAR cetin@cavdar.net Mert DUATEPE duatepe@cs.bilkent.edu.tr Teşekkür