1. HTML5 Hva er HTML5 og hva er nytt? Erlend Garåsen, Webseksjonen

2. Hva er HTML5 • Femte revisjon av HTML-standarden • Fortsatt under utvikling • Blir anbefalt av W3C i slutten av 2014 • Kan overta for mobile applikasjoner • Nye semantiske tagger (<nav>, <footer> etc.) • Nye API (geolokalisering, filbehandling etc.)

3. Hva er nytt? • Færre avhengigheter til proprietær teknologi • Støtte for lyd og video • Ny elementer (f.eks. <article>, <section>) • Forbedret webskjema (html form) • Lokal lagring • Websockets • Canvas

4. Mindre proprietær teknologi • Ikke lenger nødvendig med egne mobilapper • HTML5, CSS og JS gir fullverdig erstatning • Bedre plattformstøtte (iPad støtter ikke Flash)

5. Lyd og video • Plugins ikke lenger nødvendig (QuickTime) • Støttede videoformater: OGG, MP4, WebM • Støttede lydformater: MP3, WAV, OGG • Varierende nettleserstøtte • <video src="video.mp4 "height="480" width="720" controls="controls"></video> • <audiosrc="audio.mp3" controls="controls"></audio>

6. Nye elementer 1 <!DOCTYPE html> <!-- HTML5-deklarasjon--> <html lang=”no”> <head> <metacharset=”utf-8”> <title>Min tittel</title> </head> <body>

7. Nye elementer 2 <header> <!– Angir metainformasjon --> <figure> <img id=”header” src=”images/banner.png” alt=”Banner”> </figure> <nav> <!-- Navigasjonsblokk (menyer etc.) --> <ul> <li><a href=”side1.html”>Side 1</a></li> <li><a href=”side2.html”>Side 2</a></li> </ul> </nav> <aside id=”right”> <!– F.ekshøyrekolonne med reklame --> <div>Bla bla</div> </aside> </header>

8. Nye elementer 3 <section> <!– Kan oppstykkes i flere seksjoner --> <article> <!-- Start på artikkel --> <header> <!-- Metainformasjon for artikkelen --> <h1>Min side</h1> <figure> <!-- Media innkapsles i figure-blokk --> <imgsrc=”bilde.jpg” alt=”Bilde”> <figcaption>Foto: Kari Nordmann</figcaption> </figure> </header> Velkommen til Min side. </article> </section> <footer>Kopirett 2014. Kontaktopplysninger.</footer> </body></html>

9. Webskjema 1 • Ledetekst i tekstfelter • Klientsidevalidering • Autofokus • Nye input-felttyper

10. Webskjema 2 <input name=”navn” type=”text” placeholder=”Fyll inn navn” requiredautofocuspattern=”[a-zæøåA-ZÆØÅ]*”> <input type=”email” name=”email”> <input type=”date” name=”dato”> <input type=”number” name=”antall” min=”1” max=”5”> <input type=”range” name=”skala” min=”1” max=”10”> <input type=”tel” name=”telefon”> <input type=”url” name=”hjemmeside”>

11. Webskjema 3

12. Webskjema 4 iPhone visertilpassettastaturvedbrukav de forskjellige input-typene. I detteeksempeletvedbrukav email-typen.

13. Lokal lagring – manifest-fil • Webapplikasjonenlagreslokaltogblirtilgjengelig i frakoblet modus (offline). <html manifest=“my.manifest”> my.manifest index.html side2.html images/bilde1.png ../script/jquery.js FALLBACK: / /offline.html # offline.htmli stedet for allealt under / NETWORK: search.jsp # Skalaldri vises/caches offline

14. Lokal lagring – web storage • Alternativ til cookies • Lagrer inntil 5 MB • Mindre trafikk og bedre sikkerhet if (typeof(Storage) !== ”undefined”) { localStorage.setItem(”navn”, ”Erlend”); // Lagrer uten utløpsdato localStorage.getItem(”navn”); // Lese localStorage.removeItem(”navn”); // Slette sessionStorage.setItem(”navn”, ”Erlend”); // Lagrer kun for en sesjon }

15. Dataoverføring - SSE • Server-sent Events (SSE) • API som lar tjeneren sende data til klienten var source = newEventSource('sse.php'); source.onmessage = function(e) { // hendelse når tjeneren sender data document.body.innerHTML += e.data + '<br>'; };

16. Dataoverføring - Websockets • Applikasjoner med høye realitetskrav • Toveiskommunikasjon – begge sender data når de selv ønsker • Egen separat protokoll, normalt over TCP/80 • Mangelfull nettleser- og webtjenerstøtte

17. Dataoverføring – XHR2 • XMLHttpRequest2 • Overføring av binære data • Dynamisk framdriftsindikator med <progress>

18. Begrensninger • Varierende nettleserstøtte • Spekken ikke ferdig, endringer kan skje • Fallback-løsninger anbefalt • Modernizr-biblioteket

19. Modernizr • Fallback for <input type=”date”>: Modernizr.load({ test: Modernizr.inputtypes.date, nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js'], complete: function () { $('input[type=date]').datepicker({ dateFormat: 'yy-mm-dd' }); } });