Digitale dokumenter 1

Digitale dokumenter 1 Struktur: HTML5 Tine Lodberg Frost Digitale dokumenter 11.11.2013 Delvis basert på forelesningsnotater av Tor Arne Dahl

Dagens forelesning Introduksjon Praktisk informasjon Bakgrunn og historikk XML og markeringsspråk Elementer i HTML Oppgave 1

Over eller under panseret Under panseret: «Maskinlesbarhet» Over panseret: «Sluttbrukerlesbarhet» Introduksjon 26. august 2013

Strukturering av data Bibliografiske data Data i databaser *000 c *0011227254 *008120207 a 10eng 2 *015 $a0274847$bbibbi *015 $a5128129$bbibliofilid *019 $bl$dr *020 $a978-0-00-744803-6$bh.$cnkr 130.00 *090 $ceng$dmar/1 *100 0$aMartin, George R.R.$d1948- $jam.$322698300 *24510$aA game of thrones$cgeorge R.R. Martin *260 $alondon$bharper Voyager$c2011 *300 $a801 s. *440 0$aA song of ice and fire$vb. 1$332521500 *590 $a12-uke21a *599 $a12x0207aks f1202 09.09.2013

Digitale dokumenter Tekstbehandling Regneark

Digitale dokumenter Fra Bokhylla.no: epub-fil fra Bokselskap.no: Datautveksling 14.10.2013

Digitale dokumenter Vevpublisering HTML + CSS = Illustrasjoner hentet fra: http://www.bruceontheloose.com/htmlcss/ 09.09.2013

Ulike tilnærminger til vevpublisering Visuell utforming Vevpublisering som formgiving Grafisk design Strukturerte dokumenter Kunnskapsorganisasjon Forutsetning for å forstå XML og markeringsspråk generelt Det er ingen motsetning! Bruk kreative grafiske evner, men sørg for at dokumentstrukturen er riktig

Hvorfor lære HTML? Struktur og semantikk = kunnskapsorganisasjon Allsidig yrke Ansvar for bibliotekets nettsted Webredaktør Innkjøp av webbaserte tjenester og produkter Informasjonsarkitekt Datautveksling Vi lever på nettet Enklere å forstå andre markeringsspråk XML (datautveksling) RDF (linked data /semantisk web)

Praktisk informasjon Arbeidsform Forelesninger Seminarer Hjemmoppgaver Pensum Castro, E. & Hyslop, B. (2012). HTML5 & CSS3. Berkeley, CA: Peachpit Press. http://www.bruceontheloose.com/htmlcss/ Google. (2010, 3. oktober). Search Engine Optimization Starter Guide. Hentet fra http://static.googleusercontent.com/external_content/untrusted_dlcp/ww w.google.com/no//webmasters/docs/search-engine-optimization-starterguide.pdf Schema.org. (2011, 29. juni). Getting started with schema.org. Hentet fra http://schema.org/docs/gs.html http://www.w3schools.com/

Forelesningsplan Digitale dokumenter Forelesninger/seminarer Tidspunkt Tema Forelesning 1 11. nov. Struktur: HTML5 Forelesning 2 13. nov. HTML5 og presentasjon med CSS Seminar 1 14./15. nov. HTML5 og CSS3 Forelesning 3 18. nov. Tabeller og sideutlegg Seminar 2 21./22. nov. HTML5 og metadata

World Wide Web Tim Berners-Lee, CERN, 1990 Mål: Deling av informasjonsressurser på tvers av teknologiske plattformer URL (Uniform Resource Locator) HTTP (HyperText Transfer Protocol) HTML (HyperText Markup Language) Nytt fokus på tre «gamle» teknologier Internett Hypertekst Markeringsspråk

Internett «Et nettverk av nettverk» Lokale nettverk koblet sammen til et globalt TCP/IP er kommunikasjonsprotokollen for dataoverføring mellom maskiner Startet som ARPAnet i USA 1969, finansiert av det amerikanske forsvarsdepartementet Internett er ikke det samme som World Wide Web

Internett WWW er en tjeneste på Internett som bruker protokollen http Andre tjenester på Internett: E-post (protokollen smtp) Filoverføring (protokollen ftp) Terminalemulering for innlogging på eksterne maskiner (protokollen telnet) P2P-/fildelingsnettverk (BitTorent-protokollen og Spotify, blant annet)

Hypertekst Omtalt som idé av Vannevar Bush i 1945 Artikkelen As We May Think Omtalt ved navn av Ted Nelson i 1965. Ikke-sekvensiell tekst, i motsetning til tradisjonelle tekster som for eksempel bøker Det er ingen forhåndsdefinert rekkefølge som teksten skal leses i Leseren velger selv WWW er et hypertekstsystem

Hypertekst Eksempel hentet fra: Nielsen, J. (1995). Multimedia and Hypertext: the Internet and Beyond. Boston, MA: AP Professional A, B, C, D, E og F er tekstsider Hypertekststrukturen har seks noder og åtte lenker Leseren starter med siden A Flere mulige lesemåter: A B C F E D A B E D A E D A D...

Slik virker www Nettleser Microsoft Internet Explorer, Firefox, Google Chrome, Opera, Safari m.fl. Leseenheter: PC-er, mobiltelefoner, nettbrett, utstyr for blinde og svaksynte m.m. Webtjener En maskin på Internett satt opp med webtjenerprogramvare Eksempler: Apache, Microsoft Internet Information Server m.fl.

World Wide Web Consortium (W3C) Misson: "To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web. URL: http://www.w3.org/ Opprettet oktober 1994 ved MIT (Massachusetts Institute of Technology) Ledes av Tim Berners-Lee Skal sikre felles standarder for WWW-teknologien Open web Både akademiske og kommersielle institusjoner er medlemmer For eksempel Apple, Google, IBM og Microsoft

SGML Standard Generalized Markup Language Utviklet på 70-80-tallet ISO-standard for dokumentutveksling: ISO 8879:1986 En samling regler for hvordan man lager markeringsspråk Skille mellom innhold/struktur og presentasjon Strukturen markeres med tagger (<eksempel> </eksempel>) Lagring i ren tekst, kan leses som det er: I teorien lett å lage program som tolker dokumentene Et markeringsspråk en applikasjon av SGML beskrives i en DTD (Document Type Definition)

HTML HyperText Markup Language Utviklet på 90-tallet (Tim Berners-Lee, CERN) Kommet i flere utgaver, den forrige var HTML 4.01 Støtte for hypertekstkoblinger HTML er et markeringsspråk og en applikasjon av SGML beskrives dermed også i en DTDStandarden Vedlikeholdes av W3C (World Wide Web Consortium) Enkelt, men ofte blanding av struktur og presentasjon (i eldre versjoner) Ble raskt populært og utbredt

XML Extensible Markup Language Også et verktøy for å lage markeringsspråk som strukturerer data (altså som SGML) Ofte omtalt som en "lettversjon" av SGML W3C-standard Har høstet erfaringer fra HTML Er tilpasset dokumentutveksling på World Wide Web Støtter hypertekst og URL-er XML-prosessorer er små og passer i nettlesere Brukes til utveksling av data/tekst

XHTML Extensible Hypertext Markup Language XHTML er en applikasjon av XML XHTML 1.0: W3C-standard i 2000 «En reformulering av HTML 4 i XML» Mindre tvetydige syntaksregler Tre varianter (DTD er): XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset

XML og markeringsspråk (Illustrasjon ved Gerd Berget 2005)

HTML5 Samarbeid mellom WHATWG og W3C Startet i 2006 (HTML4 er fra 1999) Ikke en ferdig standard enda http://www.w3.org/html/wg/drafts/html/cr/ Støtte i nettlesere? Regler for HTML5 (fra http://www.w3schools.com/html/html5_intro.asp) New features should be based on HTML, CSS, DOM, and JavaScript The need for external plugins (like Flash) needs to be reduced Error handling should be easier than in previous versions Scripting has to be replaced by more markup HTML5 should be device-independent The development process should be visible to the public

HTML5 Semantikk Nye elementer og attributter Elementer fjernet eller omformulert All presentasjon overlates til CSS (stilark) Mikrodata Medietyper Tegning (<canvas> og javascript) Video (<video>) Lyd (<audio>) Webapplikasjoner Lokal lagring av data Offline kjøring

XML og markeringsspråk?

HTML5 som XML Illustrasjon fra W3C blog

HTML5 kort sagt Markeringsspråk Skrives som ren tekst Er definert med et vokabular og en grammatikk i en DTD Inneholder et begrenset antall språklige elementer (tags) Brukes for å angi dokumentets struktur Presentasjon angis med stilark (CSS) Skille mellom dokumentets struktur og presentasjon!

Elementer Byggesteinene i HTML-dokumenter Alle elementnavn skrives med små bokstaver Eksempel: <h1>overskrift</h1> Dette elementet heter h1 Elementets innhold er Overskrift Start-tagg: <h1> Slutt-tagg: </h1> Alle elementer må åpnes med en start-tagg og lukkes med en slutt-tagg Elementer uten innhold kalles tomme Eksempel: <br /> eller <br> (linjeskift) Kan lukkes med eller uten ordskiller og skråstrek ifølge HTML5 spesifikasjonen. I dette kurset må dere lukke med skråstrek, på grunn av innstillinger på serveren.

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 Inneholder informasjon om innholdet i elementet, men er ikke innhold selv. Brukes ofte som knagger til CSS Tilfører også semantikk

Obligatoriske elementer i HTML5 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> </html> <head> </head> <body> </body> <meta charset="utf-8" /> <title>et HTML-dokument</title> <h1>et HTML-dokument</h1> <p>her kommer selve dokumentinnholdet.</p>

Obligatoriske elementer i HTML5 <!DOCTYPE html> Dokumenttypedeklarasjonen forteller hvilken versjon av HTML dokumentet er kodet etter. Dokumenttypedeklarasjonen for HTML5 er forenklet i forhold til tidligere versjoner av HTML. For eksempel XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Dette er dokumentets rotelementet Rotelementet kan bare forekomme 1 gang Attributtet xmlns="http://www.w3.org/1999/xhtml"> angir navnerommet for XHTML. Her kan man også angi språket i dokumentet Inneholder elementene head og body. </html>

Obligatoriske elementer i HTML5 <head> Dokumentets hode Inneholder metadata om HTML-dokumentet Inneholder elementene meta og title <meta charset="utf-8" /> Dette meta-element er obligatorisk. Her angis hvilket tegnsett som brukes i dokumentet UTF-8. Tomt element (ingen slutt-tag) Det finnes også andre meta-elementer, som vi skal snakke mer om senere. <title>et HTML-dokument</title> Title-elementet gir en kort beskrivelse av dokumentets innhold, og kan bare forekomme én gang. </head>

Obligatoriske elementer i HTML5 Husk å lage en god tittel på dokumentet! Innholdet i title-elementet vises i nettleserens tittellinje og tabs. Søkemotorer legger vekt på title-elementet og tillater direkte søk. Innholdet i title-elementet brukes som standardnavn for bokmerker

Obligatoriske elementer i HTML5 <body> </body> <h1>et HTML-dokument</h1> <p>her kommer selve dokumentinnholdet.</p> Dokumentets kropp Innholdet i body er selve dokumentet som vises i nettleseren. Kan inneholde en mengde andre elementer!

Obligatoriske elementer i HTML5 DTD Rotelement <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> Hode Kropp </html> <head> </head> <body> </body> <meta charset="utf-8" /> <title>et HTML-dokument</title> <h1>et HTML-dokument</h1> <p>her kommer selve dokumentinnholdet.</p>

Hierarki <HTML> <head> <body> <meta /> <title> <h1> <p>

Hva inneholder en nettside? Elementer/markering Tekst/innhold Referanser til andre filer (bilder, film, links )

Sidekonstruksjon Del inn siden i områder Tenk semantikk først, presentasjon etterpå! Overskrifter hierarki! <h1> - <h6> Elementer som deler siden inn i seksjoner <header> <article> <section> <aside> <nav> <div> (har ikke semantisk verdi) <footer>

Mye brukte elementer Avsnitt <p>her kommer selve dokumentinnholdet.</p Lenker <a href="http://www.hioa.no/">lenke til HiOA</a> Bilder <img src="bilder/textpad1.png" alt="illustrasjon som viser vinduet til TextPad." />