Embed Size (px)
Citation preview
HTML5
Mer än bara HTML5
• HTML5
• CSS3
• JavaScript
Nyheter i HTML5
• Enklare syntax
• Nya element och attribut
• Inbäddad (embedded) media
• Canvas
• Offline-sparning
• ”Drag and drop”
• Positionering
Varför ska jag använda HTML5 redan nu? • Fördelar
• Bättre och enklare semantik
• Renare kod
• Bättre användarerfarenhet
• Nackdel
• Stöds inte av alla webbläsare, speciellt äldre versioner
html5shiv
• Ändrar nya html5-element till html4 element
• <header> blir <div id=”header”>
• Skapades för äldre versioner av IE
• En stor andel av användarna använder äldre webbläsare, speciellt IE
• En zip-fil som kan laddas ner
<head>
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
<style>
article {
font-size: 22px; color: orange; }
</style>
</head>
Nya taggar
<article>-For external content, like text from a news-article, blog, forum, or any other content from an external source
<aside>-For content aside from the content it is placed in. The aside content should be related to the surrounding content
<command>-A button, or a radiobutton, or a checkbox
<details>-For describing details about a document, or parts of a document
<summary>-A caption, or summary, inside the details element
<figure>-For grouping a section of stand-alone content, could be a video
<figcaption>-The caption of the figure section
<footer>-For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
<header>-For an introduction of a document or section, could include navigation
Nya taggar
<hgroup>-For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings <mark>-For text that should be highlighted <meter>-For a measurement, used only if the maximum and minimum values are known <nav>-For a section of navigation <progress>-The state of a work in progress <ruby>-For ruby annotation (Chinese notes or characters) <rt>-For explanation of the ruby annotation <rp>-What to show browsers that do not support the ruby element <section>-For a section in a document. Such as chapters, headers, footers, or any other sections of the document <time>-For defining a time or a date, or both <wbr>-Word break. For defining a line-break opportunity.
<video>
• .ogg – Firefox, Opera, Chrome
• MPEG4 – IE, Chrome, Safari
• WebM – Firefox, Opera, Chrome
• audio muted • autoplay autoplay
• controls controls • height pixels • loop loop • poster url • preload preload
• src url • width pixels
Enbart HTML kod - video
• <!DOCTYPE HTML>
• <html>
• <body>
• <h1>Mina semesterbilder</h1>
• <video src="Wildlife.ogg" width="500" height="340" controls="controls">
• your browser does not support the video tag
• </video>
• </body>
• </html>
2011-01-22_1734
http://www2.tfe.umu.se/systemteknik/webbteknik/HTML/2011-01-
22_1734.swf
<audio>
<html> <head> <title>Canvas tutorial</title> <script type="text/javascript"> </script> </head> <body> <audio src="Sleep Away.mp3" controls="controls"> Your browser does not support the audio element. </audio> </body> </html>
<embed>
• Kan användas för att bädda in externa applikationer eller interaktiv multimedia
• <embed src=”flashfilm.swf">
• <embed type="video/quicktime" src=”teknikhuset.mov" style="width:100%;">
• http://www.quackit.com/html_5/tags/html_embed_tag.cfm
Drag-and-drop
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev){ev.preventDefault();}
functiondrag(ev){ev.dataTransfer.setData ("Text",ev.target.id);}
function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChi ld(document.getElementById(data));}
</script>
</head>
Drag-and-drop
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
<command>
<!DOCTYPE HTML>
<html>
<link href="O_command.css" rel="stylesheet" type="text/css">
<body>
<menu>
<command onclick="alert('DU TORDES - GÖR INTE OM DET')">
Klicka Här - om du törs</command>
</menu>
</body>
</html>
<meter>
• <!DOCTYPE HTML>
• <html>
• <link href="O_command.css" rel="stylesheet" type="text/css">
• <body>
• <meter value="2" min="0" max="10">2 out of 10</meter><br />
• <meter value="0.6">60%</meter>
• </body>
• </html>
Mathematical Markup Language MathML Skalbar vektorgrafik
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<p>en röd och en blå cirkel<svg> <circle r="75" cx="75" cy="75" fill="blue"/><circle r="50" cx="50" cy="50" fill="red"/> </svg> </p>
</body>
</html>
HTML5 strukturelement
• Det finns flera nya strukturelement i HTML5
• Förenklar kod jämfört med HTML 4.01
• Har samma funktionalitet som en div med id
HTML4 – så gjorde man <body>
<div id="header"> <h1>Detta är rubriken</h1>
</div> <div id="sidebar">
<h2>Meny</h2> <ul> <li><a href="">alt. 1</a></li> … <li><a href="">alt. 6</a></li> </ul>
</div> <div class="post">
<h2>Underrubrik</h2> <p>aklösdfjas dasö asd dj d dlkajsd lj löksa asödk aökd aks js alsj lkadj lasjd l dklas dlfjkdh alskjd alsjd l</p>
</div>
<div class="post"> <h2>Underrubrik</h2> <p>aklösdfjas dasö asd dj d dlkajsd lj klsda skdö öadk öalksd aökd öaks döakls döasöldkf öaskd öas ödk aösd </p>
</div> <div id="footer">
<p><small>Copyright Nisse Pärlemor och hans morsa och några andra jag känner</small> </p>
</div> </body>
HTML4 – stylesheet
#sidebar {float:left;width:20%;}
.post {float:right;width:79%;}
#footer {clear: both}
HTML5 <!DOCTYPE HTML> <body> <header>
<h1>Detta är rubriken</h1>
</header> <nav>
<h2>Meny</h2> <ul> <li><a href="">alt. 1</a></li> … <li><a href="">alt. 6</a></li> </ul>
</nav> <article>
<h2>Underrubrik</h2> <p>aklösdfjas ….. dklas dlfjkdh alskjd alsjd l</p>
</article>
<article>
<h2>Underrubrik</h2> <p>aklösdfjas dasö asd dj d dlkajsd lj klsda skdö öadk öalksd aökd öaks döakls döasöldkf öaskd öas ödk aösd </p>
</article> <footer>
<p><small>Copyright Nisse Pärlemor och hans morsa och några andra jag känner</small> </p>
</footer> </body>
HTML5 - stylesheet
header, nav, footer, article {display:block;}
nav {float:left;width:20%;}
article{float:right;width:79%;}
footer {clear: both}
<canvas>
• <canvas> är ett nytt HTML-element som kan användas för att rita grafik med hjälp av skript (vanligtvis JavaScript). Det kan till exempel användas för att rita grafer, göra foto kompositioner eller göra enkla (och inte så enkel) animeringar.
• Att använda <canvas>element är inte svårt men du behöver en grundläggande förståelse för HTML och JavaScript.
• <canvas> stöds inte i alla moderna webbläsare, men stöds i Firefox, Chrome, Opera 9, Safari och IE9
<canvas id="tutorial" width="150" height="150"></canvas> • Det liknar <img> men saknar attributen src och alt.
• Elementet <canvas>har bara två attribut - bredd och höjd.
• När ingen bredd och höjd attributen anges, kommer ursprungligen arbetsytan 300 pixlar bred och 150 pixlar hög.
• ID-attributet är inte specifika för elementet <canvas>men är en av standard HTML-attribut som kan användas med (nästan) alla HTML-element (som klass till exempel).
• Det är alltid bra att lämna ett id eftersom detta gör det mycket lättare att identifiera det i vårt skript.
Om läsaren inte stödjer Canvas
<canvas id="stockGraph" width="150" height="150">
Text som beskriver vad som finns i canvas
</canvas>
….
<canvas id="clock" width="150" height="150"> Bild som motsvarar det som finns i canvas
</canvas>
Om läsaren inte supportar Canvas <body onload="draw()">
<canvas id="canvas" width="300" height="300">
HÄR BORDE FINNAS EN LUSTIG BILD MED 9 FIGURER
</canvas>
</body>
När canvas inte fungerar
Chrome
Internet Explorer 8
Blogg
<article>
<header>
<h1>Tentamen kommer att ges den <time datetime=2011-06-01>1 juni</time></h1>
<p>Publicerad <time datetime=2011-03-30 pubdate> 30 mars</p>
</header>
<p>tag med fusklappar, mobiltelefoner och annat som kan underlätta …. </p>
<footer>Kursansvarig i samarbete med resten av lärarna</footer>
</article>
<article>
<header>
<h1><a href="">student</a> <time datetime=2011-04-02 pubdate>kommentar 2 april</p>
</header>
<p>Gillar detta - en slant till mutor skulle kanske också underlätta asd slkd lösd fölas ökdj d fökl ölkdfj </p>
<footer>asdk alsd alsf alsdjf alskf lasdf alsd asdhj</footer>
</article>
header, nav, footer, article {display:block;}
nav {float:left;width:10%;}
article{float:right;width:89%;}
aside {clear:both}
footer {
clear: both;
color: #36F;
font-size: 12px;
}
