Microformats Webintegrator Det kunne være en supersmart feature, hvis vi kunne oprette en webside, der tilbød, at brugeren med et enkelt klik kunne tilføje personoplysninger fra siden til sin egen adressebog eller oplysninger om et arrangement direkte til sin kalender i f.eks. ical eller Outlook Det kan vi faktisk! Vi skal kigge på et projekt, som kaldes Microformats, og som allerede har været på markedet nogle år. Selv med HTML5 s øgede fokus på semantisk markup er der ingen mulighed for at markere personoplysninger på en semantisk måde. Der findes en hel række standarder for Microformats: hcard til person- og adresseoplysninger hcalendar til kalender- /arrangementoplysninger hreview til anmeldelser hrecipe til bage- og madopskrifter hresume til CV er Når ordet starndarder er sat i anførselstegn, skyldes det at Micorformats slet ikke er en rigtig standard, men snarere et slags design pattern. hcard De fleste adresse- / kontaktbogs systemer strukturerer deres information efter en standard ( denne gang en rigtig standard ), som hedder vcard. 1
Hvis man, som ovenfor åbner et vcard åbnet i en text-editor, finder man strukturerede oplysninger om: navn (FN betyder formatted name), adresse (ADR), telefon (TEL), emailadresse (EMAIL) osv. hcard (h et kommer fra HTML) benytter sig af man anvender de samme begreber som classnames i sit markup. Opgave 1 Opret et par hcards vha. Microformats.org s hcard creator http://microformats.org/code/hcard/creator Måske får du et resultat som ligner dette: Det ser måske overvældende ud ved første øjekast med den mange(!) classes, men de er vigtige for at gøre vort indhold læsbart for maskiner og bots. Opgave 2 Installer plugin et Operator i din Firefox og afprøv om den kan finde dit hcard og konvertere den til en vcard. Opbygning af en hcard Al info som skal indgå i et hcard skal pakkes ind i en class ved navn vcard. Man kan benytte et hvilket soim helst egnet HTML element: div, span, p, section Navne Der findes to formater at angive navne på: 1. en komplet formatteret version Vi kan angive et komplet navn ( som på et navneskilt) ved at anvende classname: fn. Dette er den eneste class som skal findes i et hcard. 2. en struktureret version inkl. Titler, fornavne, mellemnavne, efternavne mv. Lad os strukturere et navn. Dertil tilføjer vi værdien n, som fortæller parseren, at navnet består af flere dele. Vi starter med værdierne given-name og family-name 2
Vi kan også tilføje en titel som Hr., Fr., Professor, Dr. Eller lignende med værdien honorific-prefix, eller hvad med et kæle- /øgenavn: nickname. URLs En adressebog kan også indeholde info om personens website, ved at der angives værdien url. Dette span fungere 100% i forhold til hcard, men sådan et link er jo meningsløst på en hjemmeside, men husk, at vi kan tildele disse hcard-classes til alle egnede HTML elementer, så måske er flg. bedre Organisationer Organisationer kan enten optræde i en adressebog som sig selv eller som en attribut i ansattes/medlemmers hcards. Selve organisationen kan oprettes ved at benytte både fn og org: I de ansattes hcard kan deres tilhørsforhold til organisationen anføres med organisationens navn, deres title og deres role. Vi kan såmænd også tilknytte organisationens logo til den ansattes hcard. Adresser For at angive adresser anvendes værdien adr sammen med de underordnede værdier street-address, locality, region, postal-code og country-name: 3
Flere adresser Hvis man har behov for mere end én adresse tilføjes en class med værdien type. Mulige typer er: work, home, postal (til postleverancer) og parcel (til pakkeleverancer). Telefonnumre Telefonnumre tilføjes til et hcard med værdien tel. Telefonnumre kan ligesom adresser tilføjes en type: home, work, fax, cell og pager. Email Det kan efterhånden ikke komme som en overraskelse, at for at tilføje en emailadresse, skal vi bruge værdien email. Er der flere emailadresser på et hcard, kan vi angive den foretrukne med værdien pref. Fødselsdage Fødselsdage kan angives med værdien bday. Det giver god mening at bruge HTML5 s time element. 4
Desværre kan microformats parsers ikke læse dette format (endnu?), så vi må ty til en lille omvej med et såkaldt value-title design pattern. Opgave 3 Indsæt nedenstående visitkort formatteret som hcards på HTML-sider. 5
6
Begivenheder Et andet og ligeledes anvendeligt microformat er kalenderbegivenheder. Det bagvedliggende format hedder vevent og benyttes af f.eks. ical på Mac en og Outlook s kalender på Windowsplatformen. I HTML udgaven kaldes formate hcalendar, og opbygningen er for så vidt som allerede set ved hcard. En kalenderbegivenhed vil oftest indeholde: navn eller resume begivenhedens type beskrivelse startdato og tid slutdato og tid sted url til begivenhedens website kontaktinformation til stedet Det er også her muligt at snyde sig til et første forsøg på: http://microformats.org/code/hcalendar/creator Herunder ses en kalenderevent for en film, der spiller i Svendborg Scala: 7
Eksport af hcards og hcalendars Nu da vi kan oprette og fromattere kontakt- og kalenderoplysninger vil vi også gerne give vore brugere mulighed for at eksportere informationerne fra browseren til hhv. deres adressebog eller kalender. Man kan bruge plugins som f.eks. Operator, men en anden mulighed er at oprette et link på siden til Brian Suda s open source projekt: http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=dit_site eller http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri=dit_site Opgave 4 Opret en html side med oplysninger om kommende koncerter på Posten i Odense 8