F06 – HTML5orion.lnu.se/pub/education/course/1IK415/ht13/lecture/F06/F06-HTML5.pdf · HTML5 Metadata content Flow content Sectioning content Heading content Phrasing content Embedded

F06 – HTML5 Föreläsning 06, HT2013 HTML5

Johan Leitet

F06 – HTML5 Dagens agenda •  HTML5 •  Struktur •  Outline •  Nya element •  APIr •  Microdata/RDF/Microformats

WHAT Working Group? Initiativ, 2004, startat av Apple, Mozilla och Opera

Web Hypertext Application Technology

Webforms 2

Web Applica1ons

1.0 Error handl

ing

WHATWG adapterades 2007 av W3C och rekommendationen drivs nu av dem med editors från Apple och Google.

HTML5 SVG

Geoloca*on

Web Storage

Web Workers

Struktur

audio

video

Nya och omarbetade

taggar

canvas

CSS3

Web Sockets

Offline Web applica*ons

Drag and drop API

Webforms

Specifikationen

hEp://www.w3.org/html/wg/draJs/html/master/

WHATWGs HTML

hEp://www.whatwg.org/specs/web-‐apps/current-‐work/mul*page/

W3C HTML5

Webbläsarstöd

hEp://caniuse.com

hEp://findmebyip.com/

HTML-struktur <div> #top

<div> #extra

<div> #naviga*on

<div> #content

<div> #footer

<div> .post

<div> .post

<div> .post

HTML5-struktur <header>

<aside>

<nav>

<main>

<footer>

<ar*cle>

<ar*cle>

<ar*cle>

<sec*on> <sec*on>

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

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:

#header { float: left; margin: 0 auto 10px auto; }

header { float: left; margin: 0 auto 10px auto; }

<div id="header"> <header>

Blockelement

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display: block; }

Se till att de nya taggarna presenteras som blockelement i alla webbläsare, även webbläsare som inte stödjer taggarna.

Använder du exempelvis Meyers reset CSS eller html5boilerplate så görs detta där.

IE-fix

Detta fix behövs för IE8 och lägre.

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

Javascriptet läggs i <head>-taggen:

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

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.

inline block

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




base command link meta noscript script style title

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

HTML5




De flesta element som vi återfinner i body-taggen. Specifikationen talar inte om hur dessa ska presenteras, block eller inline

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

Taggar

HTML5




div skapar inte en ny sektion!

article, aside, nav, section Taggar

(h1-h6 skapar även sektioner)

Outline

gsnedders.html5.org/outliner/

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

HTML5




Definierar en rubrik till en sektion.

h1 h2 h3 h4 h5 h6 hgroup Taggar

hgroup hgroup grupperar rubriker utan att skapa sektioner för varje rubriknivå.

<hgroup> <h1>Webbprogrammerare</h1> <h2>För dig som letar utbildning inom webbprogrammering och webbutveckling</h2> </hgroup>

h1 blir sektionsrubriken

Endast h-taggar får finnas i hgroup.

HTML5


Sectioning content Heading content

Phrasing content Embedded content Interactive content

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

Taggar

Dokumentets text. Kan oftast bara innehålla andra phrasing content objekt.

HTML5




audio canvas embed iframe img math object svg video

Taggar

Bäddar in andra resurser i dokumentet.

HTML5




a audio button details embed iframe img input keygen label menu object select textarea video

Taggar

Element som kan interagera med användaren. (Video, audio etc. om kontroller finns)

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.

Audio/Video

Se demo html->bilder/video/audio

Canvas

Se demo html->bilder/video/audio

Formulär

Se demo om tabeller

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

Documents

F06 – HTML5orion.lnu.se/pub/education/course/1IK415/ht13/lecture/F06/F06-HTML5.pdf · HTML5 Metadata content Flow content Sectioning content Heading content Phrasing content Embedded