Digitale dokumenter 3 HTML5 og metadata Digitale dokumenter 18.11.2013 Delvis basert på forelesningsnotater av Tor Arne Dahl
Dagens forelesening Praktisk informasjon Oppgave 2 Søkemotoroptimalisering Metadata og HTML Microdata Schema.org Oppgave 3
Praktisk informasjon Hermetegn som skaper krøll Har du hatt problemer med å koble stilark til HTML? Klipp og lim lenken fra eksemplet på nytt. Det var noe feil med et hermetegn. Tomme elementer i må avsluttes med skråstrek, fordi vi jobber med HTML5 som XML. <br /> Vanskelig å finne årsaken til feilen? Sjekk ut kap. 20 i Castro og Hyslop (2012)
Oppgave 2 Bygg videre pa nettsiden du allerede har laget, eller lag en ny hvis det frister mere. Hent innholdet fra et annet sted (f.eks. programplanen, e-bok fra Project Gutenberg, wikipedia, annet materiale som dere har lov å spre.) Ikke bruk for lang tid pa innholdet, fokuser pa strukturen. Fyll på med mere innhold (Se forelesningsnotatene for inspirasjon) Overskrifter Avsnitt Strukturelle elementer (article, section, nav etc.) Elementer i løpende tekst Lister Lenker Bilder Tenk semantikk, og bruk elementer med mening. Eksempel på en løsning: http://www.jbi.hio.no/bibin/kog1/2013/html/seminar/eksempel.html
HTML5 Semantikk Nye elementer og attributter Elementer fjernet eller omformulert All presentasjon overlates til CSS (stilark) Microdata Medietyper Tegning (<canvas> og javascript) Video (<video>) Lyd (<audio>) Webapplikasjoner Lokal lagring av data Offline kjøring
HTML 5 demo-video Giorgio Sardo (Microso< Corpora>on), 16. november 2011: «HTML5 Demo Fest: The Best from the Web», fra W3Conf: Prac>cal Standards for Web Professionals Noe av terminologien som brukes i videoen: SVG Scalable Vector Graphics, en W3C-spesifikasjon. Canvas Et skjermområde å tegne på, del av HTML5-spesifikasjonen. DOM Document Object Model, en W3-spesifikasjon. JavaScript Et skriptspråk for webklienter (nettlesere o.l.), formalisert i ECMAScript-specifikasjonen. Tett forbindelse til DOM. Web apps Webapplikasjoner som er laget med HTML5 og andre W3C-teknologier. Kan kjøres on- og offline på alle plattformer og enheter. Local storage Lokal lagring av data. Kalles formelt for Web Storage, som inngår i familien av HTML5-teknologier utviklet av W3C. Tett forbindelse til Web apps.
Lyst til å lese mer om HTML5? Pilgrim, M. (2010). HTML5: Up and running. Sebastopol, CA: O Reilly. Online- versjon: hzp://diveintohtml5.info/
Over eller under panseret Under panseret: «Maskinlesbarhet» Over panseret: «Sluttbrukerlesbarhet»
Søkemotorer En søkemotor består av tre deler: Et robotprogram (også kalt spider eller web crawler) Et indekseringsprogram Søkemotorens database
Slik virker en søkemotor Illustrasjon fra: hzp://www.searchcatalyst.co.uk/learn/how- do- search- engines- work
Søkemotoroptmialisering (SEO) Optimalisering for både søkemaskiner OG brukere Best practice Basisoptimalisering Optimalisering av innhold WebCrawlere Nettsider for mobiltelefoner Promotering og analyser Basert på Google (2010)
God bruk av <title>-elementet Korte presise titler Lag unike titler for hver underside Vises i trefflister
Beskrivelse i <meta />-elementet Oppsummerer sidens innhold Litt lengre beskrivelse enn <title> <head> </head> <meta name="description" content="dette er en litt lengre beskrivelse av hva nettsiden din handler om. " /> Brukes til snippets i Google trefflister, hvis ikke andre deler av siden er mer relevante.
URL-struktur Lag deskriptive kategorier og filnavn på dokumenter Bedre organisering Enklere for søkemotorer Enklere å lenke til Eksempel side1.html Hvilken av disse er mest beskrivende?? Bowlingsiden.html Ha en enkel men beskrivende mappestruktur! Avspeiles i URL en HiO(A) Utg. Fag År Emne Kategori Filnavn www.jbi.hio.no/bibin/kog1/2013/html/ressurser/publisering.html
Linktekst (anchor text) <a href="www ">Linktekst</a> Sier noe om hvilken side du lenker til Både interne og eksterne lenker Lag konsise linktekster Ha synlige lenker Universell utforming
Eksempel fra VG
Hvor ser det ut bak panseret? <div class="article-content"> <span style="width: 464px;" class="df-img-container"> <span class="df-img-container-inner"> <a href="http://www.vg.no/sport/fotball/norsk/landslaget/artikkel.php?artid=10136776"> <img width="462" height="282" src="http://static.vg.no/drfront/images/2013/11/17/ w=462;h=282;119044.jpg" alt=" " class="article-image" /> </a><span class="df-img-layer"><a href="http://www.vg.no/sport/fotball/norsk/landslaget/ artikkel.php?artid=10136776"> </a> </span></span></span> Bildet er en lenke <h3><span style="font-size: 30px;"><a title="dæhli om heftig flytur: - Glad for å være på bakken " href="http://www.vg.no/sport/fotball/norsk/landslaget/artikkel.php?artid=10136776"> Dæhli til hektene etter heftig flytur: </a></span></h3> ( ) <p><strong><span style="font-size: 23px;">MOLDE (VG) </span> <span style="font-size: 24px;"> <a href="http://www.vg.no/sport/fotball/norsk/landslaget/artikkel.php?artid=10136776"> Les hele saken</a></span></strong></p><div class="clearer"></div> </div> Overskri<en er lenket opp i flere deler, og har beskrivelse i <>tle> Denne typen lenke er ikke beskrivende, og anbefales ikke!
Bilder <img src="bilder/filezilla-koble.png" alt="tilkobling med FileZilla" /> Filnavn med mening (kort og presist) Alternativ tekst med alt-attributtet Vises hvis ikke bildet kan vises Gir informasjon om bildet Brukes i tjenester som Pinterest, Google bildesøk osv. Begrens bruken av bilder som lenker Bruk tekstlenker der det er mulig Lagre bildene dine samlet Bruk filformater som støttes av mange nettlesere
Overskrifter Bruk overskriftene hierarkisk Som å lage en disposisjon Ikke hopp over nivåer Ikke bruk for mange overskrifter Enklere navigasjon
Navigasjon Hvordan skal brukeren navigere rundt på siden? Breadcrumb Delbare URL er site map Brukere Søkemaskiner (XML Sitemap) Bruk tekst som navigasjon Tilpasset 404-side (Not Found) Eksempel fra ww.ravelry.com
Kvalitet er viktig Sider med interessant innhold blir populære på egen hånd. Til brukere på ulike nivå Skriv let-leselig tekst Vær organisert Lag friskt unikt innhold Lag innhold for brukere, ikke søkemaskiner
Attributter De fleste HTML-elementer kan ha ett eller flere attributter Eksempel: <a href="http://www.hioa.no/">lenke til HiOA</a> Attributter er par av navn og verdi Verdien skrives med anførselstegn rundt Gir ekstra informasjon om elementet Brukes ofte som knagger til CSS
Attributter id Unik ID (dvs. må være unikt i dokumentet) Brukes til bokmerker/navigasjon Kan brukes som CSS-selektor, men det anbefales ikke. class Brukes ofte til å knytte CSS til grupper av elementer Gjør det enkelt å endre utseende på elementer som tilhører samme klasse. Velg navne som har semantisk verdi IKKE class= blue (du endrer kanskje mening om fargen i morgen!) Kan brukes med et sett forhåndsbestemte verdier fra microformats.org title Brukes til å gi elementer en merkelapp som synes når man holder musen over (tool tip). Også nyttige for universell utforming Digitale dokumenter 13.11.2013
Microdata Foreløpig spesifikasjon: http://www.w3.org/tr/microdata/ Legger til semantikk fra standardiserte vokabularer i et sett med attributter (tags), som kan brukes på alle elementer. En item består av en gruppe med par av navn/verdi Formål: Bidra til den semantiske weben og forbedre gjenfinning i søkemotorer "Hey search engine, this informa3on describes this specific movie, or place, or person, or video (schema.org, 2011).
Schema.org Felles vokabular til å markere opp HTML-dokumenter Brukes sammen med microdata-formatet (etter hvert også andre formater) Tilføyer informasjon (metadata) om innholdet i HTMLdokumentet Forstås av søkemaskiner som Google, Bing (Microsoft), Yandex og Yahoo! Kan muliggjøre nye verktøy og apps som drar nytte av strukturen.
Itemscope og itemtype Eksempel: HTML- dokument om filmen Avatar Informasjon om regissør Link >l trailer <article> <h1>avatar</h1> </article> <span>director: James Cameron (born August 16, 1954)</span> <span>science fiction</span> <a href="../movies/avatar-theatricaltrailer.html">trailer</a>
Itemscope og itemtype <article itemscope> <h1>avatar</h1> </article> <span>director: James Cameron (born August 16, 1954)</span> <span>science fiction</span> Ved å >lføye itemscope sier jeg at innholdet i <ar>cle>- elementet er OM noe bestemt (item). <a href="../movies/avatar-theatricaltrailer.html">trailer</a>
Itemscope og itemtype <article itemscope itemtype="http://schema.org/movie"> <h1>avatar</h1> </article> <span>director: James Cameron (born August 16, 1954)</span> <span>science fiction</span> Ved å >lføye itemtype spesifiserer jeg hva det egentlig handler om. Nemlig film, her definert av schema.org. <a href="../movies/avatar-theatricaltrailer.html">trailer</a>
itemprop Brukes for å markere egenskaper (properties) ved noe (item). For å markere regissør tilføyes itemprop="director" til elementnavnet rundt regissørens navn. For å markere navnet på filmen brukes itemprop="name" For å markere sjanger brukes itemprop="genre" For å markere traileren brukes itemprop="trailer" Se http://schema.org/movie for flere itempropegenskaper knyttet til filmer.
Eksempel - itemprop <article itemscope itemtype ="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> </article> <span>director: <span itemprop="director"> James Cameron</span> (born August 16, 1954)</ span> <span itemprop="genre">science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">trailer</a>
Innebygde (embedded) items Brukes når verdien i en itemprop (egenskap) har sitt eget sett med egenskaper. Eksempel: En Regissør av en film er også en person, som har egenskapene navn (name) og fødselsdag (birthdate) For å angi at verdien av itemprop er en annen item startes det en ny itemscope rett etter den itemprop den hører sammen med.
Eksempel innebygde items <article itemscope itemtype ="http://schema.org/movie"> <h1 itemprop="name"&g;avatar</h1> <div itemprop="director" itemscope itemtype="http://schema.org/person"> Director: <span itemprop="name">james Cameron</span> (born <span itemprop="birthdate">august 16, 1954)</span> </div> <span itemprop="genre">science fiction</span> <a href="../movies/avatar-theatrical- trailer.html" itemprop="trailer">trailer</a> </article>
Schema.org som vokabular Beskriver et bredt utvalg av forskjellige typer item, som alle sammen har sitt eget sett med egenskaper. Thing er den bredeste type item Egenskaper arves fra items som er mer generelle, dvs. foreldrene. Eksempel: LocalBusiness er barn av Place og Organization, som igjen er barn av Thing. LocalBusiness arver egenskaper fra både Place og Organization.
Mye brukte item types Creative works: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries... Embedded non-text objects: AudioObject, ImageObject, VideoObject Event Organization Person Place, LocalBusiness, Restaurant... Product, Offer, AggregateOffer Review, AggregateRating Her er den fulle listen over alle item types.
Gode vaner Mer er bedre, bortsett fra ved skjult tekst Dess mer som markeres med microdata, dess bedre Forhåndsdefinerte verdier vs tekst Expected types er valgfrie Det er greit å bare bruke ren tekst eller URL URL som egenskap Brukes pa sider som har en samling av items F.eks. en serie av personer Tilføy egenskapen url til hver enkel person
Oppgave 3 - oppsummering Last ned css-fil (stilark.css) fra Fronter (i oppgavemappen), og lagre på din M:\public_html\html5 Koble stilarket (CSS-filen) pa html-dokumentet ditt Som vist i presentasjonen fra seminar 1 Undersøk hvordan stilarket påvirker dokumentet ditt. Alt er kommenter, så ta deg tid til å se pa det Regler knyttet til elementer blir utført uansett, hvis du har brukt disse elementene Lag klasser og id er som passer til stilarket, slik at disse reglene ogsa tas i bruk. Gjør endringer i stilarket, for å se effekten Gjerne med utgangspunkt i ditt eget dokuments klasser og elementer. Eksempel med CSS http://www.jbi.hio.no/bibin/kog1/2013/html/seminar/eksempel.html