F13 HTML5 Dagens agenda

Storlek: px

Starta visningen från sidan:

Download "F13 HTML5 Dagens agenda"

Daniel Eriksson
för 8 år sedan
Visningar:

1 F13 HTML5 Dagens agenda HTML5 Struktur Outline Nya element APIr Microdata/RDF/Microformats

2 WHAT Working Group? Initiativ, 2004, startat av Apple, Mozilla och Opera WHATWG adapterades 2007 av W3C och rekommendationen drivs nu av dem med editors från Apple och Google.

3 HTML5 Struktur Offline Web applications Drag and drop API video audio canvas Nya och omarbetade taggar Webforms SVG Web Workers Web Sockets Web Storage Geolocation CSS3

4 Specifikationen W3C HTML5 Web Authors Spec WHATWGs HTML

5 Webbläsarstöd

6 HTML-struktur <div> #top <div> #content <div>.post <div> #navigation <div>.post <div> #extra <div>.post <div> #footer

7 HTML5-struktur <header> <nav> <div> #content <article> <article> <article> <aside> <section> <section> <footer>

8 Header <header> Headerelementet beskriver en sektions huvud. Alltså inte bara sidans huvud!

9 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.

10 Article <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. Bloggposter, nyhetsartiklar etc.

11 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.

12 Aside <aside> Sektion innehållande information som är relaterad till innehållet kring sektionen. Typiskt: reklam, tag-clouds,

13 Footer <footer> Fot till den sektion det tillhör. Behöver inte ligga sista i sektionen.

14 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; }

15 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.

createelement("section"); document.createelement("nav"); document.createelement("aside"); document.

16 IE-fix Javascriptet läggs i <head>-taggen: <script> document.createelement("header"); document.createelement("hgroup"); document.createelement("footer"); document.createelement("article"); document.createelement("section"); document.createelement("nav"); document.createelement("aside"); document.createelement("address"); </script> Detta fix behövs för IE8 och lägre. IE9 har stöd för de nya taggarna Om du använder javascriptbiblioteket modernizr så görs detta där. HTML5boilerplate använder modernizr.

17 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...

18 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

19 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.

20 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 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

21 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!

22 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/

23 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

24 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.

25 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

26 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

27 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

28 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.

29 <time> Time 24 timmars tid eller ett datum. Apple kommer att hålla ett event <time datetime=" ">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>.

30 Javascript

31 Drag and drop API

32 Offline web applications manifest-file för att styra cachen.

33 Se föreläsning: 05 - Media Audio/Video

34 Se föreläsning: 05 - Media Canvas

35 Se föreläsning: 06 A table form Formulär

36 Relaterade tekniker Följande tekniker är inte en del av HTML5 men nämns ofta i samband med HTML5.

37 CSS3

38 Geolocation

39 Web Storage Session storage Local storage

40 Web Sockets

41 Web workers

42 En semantisk webb En webb inte bara för människor utan också maskiner. RDFa Microdata Microformat Web 3.0?

43 Microdata Utökning av HTML5 specifikationen. Använder "itemscope", "itemtype" och "itemprop"

44 Microformats Äldre och välspridd teknik. Baserar sig på HTML utan tillägg. hcard

Relevanta dokument

Föreläsning 06, HT2013 HTML5 F06 HTML5. Johan Leitet

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,