F13 HTML5 Dagens agenda

Full text

(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

SVG

Geolocation Web Storage Web Workers

Struktur

audio video

Nya och omarbetade

taggar canvas

CSS3 Web Sockets

Offline Web applications

Drag and drop API

Webforms

(4)

Specifikationen

http://dev.w3.org/html5/spec-author-view/

WHATWGs HTML

http://www.whatwg.org/specs/web-apps/current-work/multipage/

W3C HTML5 Web Authors Spec

(5)

Webbläsarstöd

http://caniuse.com

http://findmebyip.com/

(6)

HTML-struktur

<div> #top

<div>

#extra

<div>

#navigation

<div>

#content

<div> #footer

<div> .post

<div> .post

<div> .post

(7)

HTML5-struktur

<header>

<aside>

<nav>

<div>

#content

<footer>

<article>

<article>

<article>

<section><section>

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

#header {

float: left;

margin: 0 auto 10px auto;

}

header {

float: left;

margin: 0 auto 10px auto;

}

<div id="header"> <header>

(15)

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.

(16)

IE-fix

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

IE9 har stöd för de nya taggarna

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

Javascriptet läggs i <head>-taggen:

Om du använder javascriptbiblioteket modernizr så görs detta där.

HTML5boilerplate använder modernizr.

(17)

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

(18)

HTML5

Metadata content

Flow content

Sectioning content

Heading content

Phrasing content

Embedded content

Interactive content

(19)

HTML5

Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content

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

(20)

HTML5

Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content

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

(21)

HTML5

Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content

div skapar inte en ny sektion!

article, aside, nav, section Taggar

(h1-h6 skapar även sektioner)

(22)

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

(23)

HTML5

Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content

Definierar en rubrik till en sektion.

h1 h2 h3 h4 h5 h6 hgroup Taggar

(24)

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.

(25)

HTML5

Metadata content Flow content 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.

(26)

HTML5

Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content

audio canvas embed iframe img math object svg video

Taggar

Bäddar in andra resurser i dokumentet.

(27)

HTML5

Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content

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)

(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="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>.

(30)

Javascript

(31)

Drag and drop API

(32)

Offline web applications

manifest-file för att styra cachen.

(33)

Audio/Video

Se föreläsning: 05 - Media

(34)

Canvas

Se föreläsning: 05 - Media

(35)

Formulär

Se föreläsning: 06 – A table form

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

http://dev.w3.org/html5/md/

(44)

Microformats

Äldre och välspridd teknik.

Baserar sig på HTML utan tillägg.

hCard

http://microformats.org/

(45)

http://html5boilerplate.com

Figur

Updating...

Relaterade ämnen :