1 / 19

HTML5

HTML5. Hva er HTML5 og hva er nytt? Erlend Garåsen, Webseksjonen. 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.)

fala
Download Presentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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' }); } });

More Related