PB162 Java - Přednáška 10
Tomáš Pitner April 24, 2012
Web 2.0
• Co je to Web 2.0?
• Zatím není stručná, úplná odpověď.
• Charakteristika
• stírá rozdíly mezi producentem obsahu a jeho konzumentem
• sdílení myšlenek
• snadná znovupoužitelnost.
Technologie Web 2.0
• llncrementální vývoj místo skokového.
• Občas kritizován, že nepřináší nic nového.
• Využívá stávající technologie:
• komunikace client-server
• sítová architektura IP
• standardní prohlížeč jako uživatelský klient
• interaktivní aplikace (Rich Internet Applications - RIA)
• postaven na:
• skriptování na straně klienta (JavaScript)
• flash
• Java Applets
Toi
Používané formáty dat
• postaveny na XML
• overený - průmyslový standard od 1998
• podpora - všichni výrobci a platformy
• existující technologie pro zpracování - od parserů po nativní XML databáze
• ...
Toi
Platformy pro vývoj
• Celá škála platforem od enterprise po jednoduché a levné:
• Java EE, .NET
• Dynamické a agilní jazyky a platformy (Ruby, ...)
• jednoduché (LAMP)
• Levné hostování (PHP)
Toi
Další zdroje
Viz přednáška z konference Datakon 2009
RIA
• Webové aplikace, které mají řadu charakteristik desktopových aplikací
• interaktivita
• uživatelské rozhraní a ...
• Možnosti Implementace:
a plugin pro porhlížeč pro danou aplikaci
a běhové prostředí s omezeným přístupem k prostředkům
počítače (sandbox) a intenzivní využití JavaScriptu a virtuálních strojů
Toi
Platformy pro implementaci RIA na straně klienta
• Adobe Flash
• Java (Applety, JavaFX)
• Microsoft Silverlight
• Podpora pro tvorbu RIA v HTML5
Toi
Príklady RIA
• Google Does (http://docs.google.com/)
• YouTube (http://youtube.com)
• On-line Zpravodajské pokrytí významných (sportovních) udalostí - Olympiáda Peking, Vancouver, ...
Toi
Základ
• Architektura client - server
• Server
• běžná serverová řešení:
• Java EE
• .NET
• PHP, Ruby, Groovy, Python, Perl, ... a ...
• Klient:
• Flash
• Java
• Silverligh
• Skriptování na straně klienta (JavaScript)
o AJAX - Asynchronous Javascript And XML
AJAX
• Technologie pro vývoj interaktivních webových aplikací.
• Umožňuje provádění změny obsahu stránky bez nutnosti znovunačtení.
• Využívá technologie:
• (X)HTML a CSS pro prezentaci
• DOM a JavaScript pro zobrazování a dynamickou manipulaci s daty na stánce
• XMLHttpRequest - rozhraní umožňující klientu asynchroní komunikaci se serverem
• Formáty pro výměnu dat:
• XML
• HTML
• plain text
• JSON
Toi
Obsah
• Co to jsou mikroformáty?
• Proč se používají?
• Čím se dají nahradit?
• Jejich výhody před vlastním značkováním.
• Jejich nevýhody.
• Nej běžnější používané mikroformáty
• Návrhové vzory používané s mikroformáty
• Další zdroje informací
Toi
Co to jsou mikroformáty?
• Mikroformáty jsou způsob, jak přidat jednoduché značkování do lidsky čitelných údajů tak, aby je bylo možné programově zpracovávat.
• získání dat z dokumentů
• indexace
• prohledávání
• ukládání
• vzájemné odkazování
» Mikroformáty jsou prvky sémantického značkování využívající staré dobré sémantické (X)HTML
(?http://microformats.org/wiki/PDSH)(Plain Old Semantic (X)HTML)
• Proč vzniklo v CERNu (Conseil Européen pour la Recherche Nucléaire
(http://dg-rpc.web.cern.ch/dg-rpc/Scale.html)) v roce 1991 HTML?
Toi
Ukázka mikroformátu
<ol class=)xoxo;> <li>První bod <ol>
<li>Podbod a</li> <li>Podbod b</li> </ol> </li>
<li>Druhý bod
<ol compact="compact"> <li>Podbod c</li> <li>Podbod d</li> </ol> </li> </ol>
Proč se mikroformáty používají?
Mikroformáty spojují řadu trendů:
• logický další krok ve vývoji webového designu a informační architektury
» způsob jak mohou lidé a organizace publikovat bohatší obsah bez závislosti na centralizovaných službách
• "souhlas" s tím, že přínos "tradičních" metadat buď selhal a nebo jejich adopce trvala tak dlouho, že bylo zapotřebí nalézt jiné řešení (nevhodně používaná metadata)
• mikroformáty opět využívají metadata. :-)
• využití (X)HTML pro data.
Toi
Cím lze mikroformáty nahradit?
• Vložením dat ve vlastním formátování v jiném jmenném prostoru
• XHTML + Voice Profile
(http://www.voicexml.org/specs/multimodal/x+v/12/)
• (X)HTML + SVG
• XLink
• XHTML+RDF
• ...
• Výhody:
• Snadná vizualizace (přímá podpora v prohlížečích, např. pomocí CSS);
• nezávislé na centralizovaných službách.
• Nevýhody:
• Jsou závislé na hostitelském značkování.
• Mohou být obtížněji strojově zpracovatelné.
Toi
Standardizované mikroformáty
• hCalendar - značkování událostí v kalendářích
• hCard - značkování pro elektronické vizitky
» rel-license - značkování licenčních informací u cíle odkazu
• rel-nofollow - cíl nemá být zpracován při analýze odkazů
• rel-tag - umožňuje přiřadit uživatelskou značku k hypertextovému odkazu.
• VoteLinks - umožňuje přiřadit doporučení/nedoporučení k hypertextovému odkazu.
• XFN - the Xhtml Friends Network - jednoduchý způsob reprezentace mezilidských vztahů pomocí hypertextových odkazů
• XMDP - značkování pro definici metadatových profilů, které jsou snadno čitelné pro uživatele i aplikace (využívány ostatními mikroformáty k definici značek)
• XOXO - mikroformát pro psaní bodových scénářů.
Toi
Vyvíjené mikroformáty
• adr - značkování adres v dokumentech
• geo - značkování geografických souřadnic v dokumentech
• hAtom - značkování pro sdružování obsahu
• hProduct - mikroformát pro publikování a vkládání dat o produktech do (X)HTML stránek.
• hReceipe -mikroformát pro publikování a vkládání dat o receptech do (X)HTML stránek.
• hResume - mikroformát pro publikovania vkládání životopisu do (X)HTML stránek.
• hReview - mikroformát pro publikování a vkládání recenzí produktů, služeb, ... do (X)HTML stránek.
• ... (více viz microformats.org/Wiki
(http://microformats.org/wiki/Main_Page))
Toi
Úvod
• jednoduchý, otevřený, distribuovaný formát pro kalendáře a události
• vychází ze standardu iCalendar (RFC2445 (http://www.ietf.org/rfc/rfc2445.txt))
• využívá se např. pro synchronizaci kalendářů v organizérech, mobilních telefonech, PDA, ... s počítačem, výměnu informací časové povahy mezi uvedenými zařízeními, ...
• hCalendar odpovídá 1:1 standardu iCalendar
• Definován XMDP profilem na
http://microformats.org/profile/hcalendar
• Odkaz by měl být vložen do (X)HTML souboru, který ho používá:
<head profile="http://microformats.org/profile/hcalendai <link rel="profile" href="http://microformats.org/profi] Tento obsah používá <a rel="profile" href="http://microformats.org/profile/hcalendar">hCaler
Ukázka události ve formátu iCalendar
BEGIN:VCALENDAR BEGIN:VEVENT UID:guid-l.hostl.com DTSTAMP:19980309T231000Z DESCRIPTION:Project XYZ Review Meeting SUMMARY:XYZ Project Review DTSTART:19980312T133000Z DTEND:19980312T143000Z LOCATION:1CP Conference Room 4350 END:VEVENT END:VCALENDAR
To i
Ukázka odpovídající události ve formátu hCalendar
<div class="vevent">
<h3 class="summary">XYZ Project Review</h3> <p class="description">Project XYZ Review Meeting</p> <p>To be held on <abbr class="dtstart" title="1998-03-12T0J until <abbr class="dtend" title="1998-03-12T09:30:00-05:00' <p>Location: <span class="location">lCP Conference Room 43J <small>Booked by: <span class="uid">guid-l.hostl.com</span: <abbr class="dtstamp" title="19980309T231000Z">9 Mar 1998 ( </div>
To i
Tvorba a publikovaní udalostí a kalendám ve formátu hCalendar
• hCalendar Creator
(http://microformats.org/code/hcalendar/creator)
• Midgard CMS (http://www.midgard-project.org/ documentation/net-nemein-calendar/)
• Firefox Greasemonkey (http://www.decafbad.com/blog/ 2005/06/08/greasemonkey_magic)
• Event plugin pro Windows Live! Writer
(http://gallery.live.com/liveltemDetail.aspx?li= 9751e563-1408-4fc3-8028-bd4351edblfb&l=8)
• ... (viz hCalendar implementation (http://microformats. org/wiki/hcalendar-implementations))
To i
Úvod
• Jednoduchý, otevřený, distribuovaný formát pro reprezentaci lidí, společnosti a míst.
• Obsahově odpovídá standardu vCard (RFC2426 (http://www.ietf.org/rfc/rfc2426.txt)).
• (X)HTML dokumentu, který ho používá je vhodné přiřadit odpovídající profil:
<head profile="http://microformats.org/profile/hcard"> <link rel="profile" href="http://microformats.org/profi Tento obsah používá
<a rel="profile" href="http://microformats.org/profile/
Toi
Ukázka vCard
BEGIN:VCARD VERSIDN:3.0 N:Bártek;Luděk FN:Luděk Bártek
URL:http://www.f i.muni.cz/~bar END:VCARD
Toi
Odpovídající hCard
<div class="vcard"> <a class="url" href="http://www.fi.muni.cz/~bar/"> <span class="fn n"> <span class="given-name">Luděk</span> <span class="family-name">Bártek</span> </span> </a> </div>
Toi
Nástroje pro tvorbu a manipulaci s hCard
• hCard creator
(http://microformats.org/code/hcard/creator)
• Wordpress Addressbook plugin
(http://wordpress.org/extend/plugins/addressbook/)
Úvod
• Slouží k zapisování bodových scénářů a tvorbě online prezentací
• Sestává se z následujících XHTML modulů:
• Strukturní modul (elementy body, head, html, title)
• hypertextový modul (a)
• modul seznamů (dl, dt, dd, ol, ul, li)
• modul metainformací (meta)
• modul stylu (element style)
• modul atributu styl (atribut style)
• modul linku (link)
• modul zastaralých uzlů (atribut compact u ol a ul)
• Pokud dokument používá tento mikroformát je vhodné ho propojit s odpovídajícím profilem:
<head prof ile="http://microformats.org/prof ile/xoxo"> <link rel="profile" href="http://microformats.org/profi
Toi
Ukázkové XOXO značkování
<ol class=)xoxo;> <li>Subject 1 <ol>
<li>subpoint a</li> <li>subpoint b</li> </ol> </li>
<li>Subject 2
<ol compact="compact"> <li>subpoint c</li> <li>subpoint d</li> </ol> </li>
<li>Subject 3 <ol>
<li>subpoint e</li> </ol>
Možný CSS pro vizualizaci ukázky
ol.xoxo { list-style:decimal; } ol.xoxo ol { list-style:lower-latin; } ol[compact="compact"] { display:none; }
To i
Tvorba XOXO dokumentů
• Online nástroj (http://www.s5easy.com/) pro tvorbu slideshow
• Slimey (http://sourceforge.net/projects/slimey/)
• ...
Toi
Popis
• Slouží k publikování životopisů.
• Využívá další microformáty:
• hCard
• hCalendar
• rel-tag
• Pokud dokument používá hResume je vhodné ho propojit s odpovídajícími profily:
• pro hResume
<head profile="http://microformats.org/profile/hresume"> <link rel="profile" href="http://microformats.org/profi]
• hCard
• hCalendar
• popř. geo, ...
• Ukázka viz příklady z přednášky.
Toi
Úvod
• Dávají autorovi slovník pro vyjádření myšlenek v souladu s tím, co již bylo vytvořeno.
• Základní návrhové vzory:
• abbr-design-pattern
• class-design-pattern
• datetime-design-pattern, date-design-pattern
• jména tříd definovaných ve všech návrhových vzorech
• include-pattern, include-pattern-feedback
• rel-design-pattern
• atomické mikroformáty
• složené mikroformáty
Toi
Abbr-design-pattern
• Používá se k tomu, aby lidsky čitelný text byl také strojově čitelný
• Obaluje lidsky čitelný text pomocí elementu abbr, který obsahuje strojově čitelný ekvivalent příslušné hodnoty.
• <abbr class="author" title="Danny Ayers">Danny</abbr>
• Nemusí být vhodný, pokud má být dokument přístupný pro screenreadery
• we have a party in
<abbr class="ďtstart" title="20070312T1700-06">
March 12, 2007 at 5 PM </abbr>
Toi
Class-design-pattern
• Vždy by se měl používat nejvhodnější sémantický (X)HTML element.
• Sémantika se elementům přidává pomocí názvů sémantických tříd.
• <div class="vcard">
<a class="url fn" href="http://www.fi .muni. cz/~bar">L\: <span class="org">FI MU Brno</span> </div>
Toi
Datetime-design-pattern
• Slouží k tomu, aby lidsky čitelný časový údaj byl i strojově čitelný.
• Lidsky čitelný čas je uzavřen do elementu abbr
• Strojový ekvivalent je zadán pomocí atributu title ve formátu odpovídajícím standardu ISO8601
• <abbr class="ďtstart" title="20051010T10:10:10-0100">
10 o'clock on the 10th </abbr>
Toi
Atomické mikroformáty
• Jedná se o nejmenší řešení konkrétního problému.
• Skládají se ze standardních (X)HTML elementů.
• Slouží jako základ pro složené mikroformáty.
• Obvykle používají jeden atribut class resp. rel.
• Atomické mikroformáty jsou např.:
• rel-license
• xoxo
a ...
Toi
Složené mikroformáty
• Složené mikroformáty se skládají z atomických mikroformátů a/nebo standardních (X)HTML elementů.
• Jsou navrženy tak, aby mohly být přímo začleněny do webových stránek.
• Obvykle používají kombinaci několika class resp. rel atributů.
• Patří sem např.:
• hCalendar
• hCard
o hResume a ...
Toi
Další zdroje informací
• microformats.org (http://microformats.org)
• What are microformats
(http://www.xml.com/pub/a/2005/03/23/deviant.html) na xml.com
• Microformats in Context (http://www.xml.eom/pub/a/ 2006/04/26/microformats-grddl-rdfa-nvdl.html) na xml.com
a ...
To i