Föreläsning 06, HT2013 HTML5 F06 HTML5 Johan Leitet
F06 HTML5 Dagens agenda HTML5 Struktur Outline Nya element APIr Microdata/RDF/Microformats
WHAT Working Group? Web Hypertext Application Technology Initiativ, 2004, startat av Apple, Mozilla och Opera Web Applica1ons 1.0 Error handling Webforms 2 WHATWG adapterades 2007 av W3C och rekommendationen drivs nu av dem med editors från Apple och Google.
HTML5 Struktur Offline Web applica*ons Drag and drop API video audio canvas Nya och omarbetade taggar Webforms SVG Web Workers Web Sockets Web Storage Geoloca*on CSS3
Specifikationen W3C HTML5 hep://www.w3.org/html/wg/drajs/html/master/ WHATWGs HTML hep://www.whatwg.org/specs/web- apps/current- work/mul*page/
Webbläsarstöd hep://caniuse.com hep://findmebyip.com/
HTML-struktur <div> #top <div> #content <div>.post <div> #naviga*on <div>.post <div> #extra <div>.post <div> #footer
HTML5-struktur <header> <nav> <main> <ar*cle> <ar*cle> <ar*cle> <aside> <sec*on> <sec*on> <footer>
Header <header> Header-elementet beskriver en sektions huvud. Alltså inte bara sidans huvud!
Nav <nav> Nav beskriver en sektion på sidan som länkar till andra sidor eller till delar på sidan. Används inte till alla länkar men till den huvudsakliga navigationen på sidan.
Main <main> Main kapslar in sidans huvudinnehåll. Det får enbart finnas ett mainelement på sidan. Main får inte vara barn till article, aside, footer, header eller nav. Jmfr. klassiska div#content
<article> Artikel syftar på delar på sidan som kan "leva" utan resten av sidan och som med andra ord kan återpubliceras för sig själv någon annanstans. Article Bloggposter, nyhetsartiklar etc.
Section <section> En generisk sektion/del av sidan, oftast med en rubrik. Typiskt kapitel. Rubriker skapar nya sektioner. Om du behöver dela upp något bara för att stila om det, använd <div> istället.
Aside <aside> Sektion innehållande information som är relaterad till innehållet kring sektionen. Typiskt: reklam, tag-clouds,
Footer <footer> Fot till den sektion det tillhör. Behöver inte ligga sista i sektionen.
Men hur stila med CSS? Inga problem: <div id="header"> #header { float: left; margin: 0 auto 10px auto; } <header> header { float: left; margin: 0 auto 10px auto; }
Blockelement Se till att de nya taggarna presenteras som blockelement i alla webbläsare, även webbläsare som inte stödjer taggarna. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display: block; } Använder du exempelvis Meyers reset CSS eller html5boilerplate så görs detta där.
IE-fix Javascriptet läggs i <head>-taggen: <script> document.createelement("header"); document.createelement("hgroup"); document.createelement("footer"); document.createelement("article"); document.createelement("main"); document.createelement("section"); document.createelement("nav"); document.createelement("aside"); document.createelement("address"); </script> Detta fix behövs för IE8 och lägre. Om du använder javascriptbiblioteket modernizr så görs detta där. HTML5boilerplate använder modernizr. Du kan även använda: https://github.com/afarkas/html5shiv
HTML block inline Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia aliquet auctor. Morbi lacinia ultricies condimentum. Donec ut nisi at tellus aliquet adipiscing a vitae velit. Nunc mauris est, blandit ac consectetur at, mollis quis nunc. Ut at ante sit amet nisl volutpat cursus. Praesent feugiat turpis eget orci semper fringilla porta augue hendrerit. Proin interdum, turpis eget semper congue, purus metus dapibus nibh, vitae semper sapien tellus accumsan sapien. Morbi feugiat ultricies risus. div h1-h6 p ul, ol, dl... img a b, i strong, em...
HTML5 Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content
HTML5 Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content " Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information. Taggar base command link meta noscript script style title
HTML5 Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content De flesta element som vi återfinner i bodytaggen. Specifikationen talar inte om hur dessa ska presenteras, block eller inline Taggar a abbr address area article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label main map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style sub sup svg table textarea time u ul var video wbr text
HTML5 Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content Taggar article, aside, nav, section (h1-h6 skapar även sektioner) div skapar inte en ny sektion!
Outline <!doctype html> <title>outline</title> <h1>huvudrubrik</h1> <nav> <h2>navigation</h2> </nav> <section> <h1>underrubrik 1</h1> </section> <section> <h2>underrubrik 2</h2> </section> <h1>rubrik 2</h1> 1. Huvudrubrik 1. Navigation 2. Underrubrik 1 3. Underrubtik 2 2. Rubrik 2 gsnedders.html5.org/outliner/
HTML5 Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content Taggar Definierar en rubrik till en sektion. h1 h2 h3 h4 h5 h6 hgroup
hgroup hgroup grupperar rubriker utan att skapa sektioner för varje rubriknivå. h1 blir sektionsrubriken <hgroup> <h1>webbprogrammerare</h1> <h2>för dig som letar utbildning inom webbprogrammering och webbutveckling</h2> </hgroup> Endast h-taggar får finnas i hgroup.
HTML5 Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content Dokumentets text. Kan oftast bara innehålla andra phrasing content objekt. Taggar a abbr area audio b bdi bdo br button canvas cite code command datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time u var video wbr text
HTML5 Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content Bäddar in andra resurser i dokumentet. Taggar audio canvas embed iframe img math object svg video
HTML5 Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content Element som kan interagera med användaren. (Video, audio etc. om kontroller finns) Taggar a audio button details embed iframe img input keygen label menu object select textarea video
Nya element <figure> <figcaption> <figure> <img src="bild.png" alt="bild på en bild" /> <figcaption>denna bild beskriver hur en bild kan se ut.</figcaption> </figure> Behöver inte vara bilder, kan vara tabeller, illustrationer, grafik etc.
Time <time> 24 timmars tid eller ett datum. Apple kommer att hålla ett event <time datetime="2011-10-04">i början av oktober</time> då man troligtvis kommer att presentera en ny telefon. Slashat kommer att live-sända från klockan <time>18:00</time>.
Javascript
Drag and drop API
Offline web applications manifest-file för att styra cachen.
Se demo html->bilder/video/audio Audio/Video
Se demo html->bilder/video/audio Canvas
Se demo om tabeller Formulär
Relaterade tekniker Följande tekniker är inte en del av HTML5 men nämns ofta i samband med HTML5.
CSS3
Geolocation
Web Storage Session storage Local storage
Web Sockets
Web workers
En semantisk webb En webb inte bara för människor utan också maskiner. RDFa Microdata Microformat Web 3.0?
Microdata Utökning av HTML5 specifikationen. Använder "itemscope", "itemtype" och "itemprop" http://dev.w3.org/html5/md/
Microformats Äldre och välspridd teknik. Baserar sig på HTML utan tillägg. hcard http://microformats.org/
http://html5boilerplate.com
address? Inte ny men förändrad small? Inte ny men förändrad -> det finstilta mark? Ny. Sökning, markeringar i citat etc. attributet rel på a och link