En innføring i HTML5 – Kim A. Martinsen, Steria AS

View Github Repository Open presentation in a new window

KimAM

See all presentation from KimAM

En innføring i HTML5 – Kim A. Martinsen, Steria AS

0 0

html5-reveal-js-presentation

On Github KimAM / html5-reveal-js-presentation

En innføring i HTML5

Kim A. Martinsen, Steria AS

1998: Stanset utviklingen av HTML 4.01

2000: Lanserte XHTML 1.0

Deler XHTML i to: XHTML Transitional og XHTML Strict Det meste står på foilen

Web Hypertext Application Technology Working Group (WHAT WG)

WHATWG ble grunnlagt av Apple, Mozilla Foundation, og Opera Software i 2004, etter en W3C workshop. De var bekymret for retningen W3C gikk med XHTML.

HTML5 er hovedsaklig et buzzword som refererer til moderne web teknologier

Del 1: Feilhåntering

Litt fakta før vi fortsetter..

Et latterlig stort antall nettsider inneholder feil i markupen. Veldig få nettsider er utviklet av profesjonelle utviklere

90%
Nettsider som inneholder feil. Kilde: Ingen (..men sikkert close enough) 
					
<html>
  <head>
    <title>Pwning the web</title>
  </head>

  <body>
    <h1>Sweeeet hjemmeside</h1>
  </body>

</html>
<small>Copyright awesome-developer2012</small> //iiiiiiikk

Feilhåndtering i HTML 4

					
//Support for really broken html. We never close the body tag, 
//since some stupid web pages close it before the actual end of the doc.
//Let's rely on the end() call to close things.

if(t->tagName == htmlTag || t->tagName == bodyTag )
	return;
Utdrag fra kildekoden til Webkit som bla. brukes i Safari og Chrome

Feilhåndtering i XHTML 1.0 Strict

XHTML 1.0 Strict

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml>

 <head>
   <title>Min nettside med syntaksfeil</title>
   <meta http-equiv="content-type" 
		content="text/html;charset=utf-8">
 </head>
 
 <body>
  <ul>
   <li>List item one</li>
   <li>List item two</ul>
  </li>
 </body>
 
</html>

Feilhåndtering i HTML 5

Recognizing that many authors produce non-conformant documents and that apps need to deal with such documents, HTML5 precisely specifies handling of markup errors and other classes of errors — so that such errors will be handled in an interoperable way across UAs/browsers

Del 2: Semantikk

Semantikk

Elementer definerer meningen av innholdet så godt som mulig, og ikke hvordan det presenteres. Nye elementer er kommet til i spesifikasjonen.

<div> i HTML4

<div id="header">  
  <h1>I can the Interwebs</h1>
    <!-- Slogans ftw i headeren -->
</div>
<div id="nav">  
   <!-- Naviger i min awesome meny -->
</div>
<div id="article">
  <div class="section">
    <!-- Blogger ftw -->
  </div>
  <div class="section">
    <!-- Kan bli for lite blogging -->
  </div>
</div>

<div id="footer">
  <!-- Copyright: You wouldnt steal a car.. -->
</div>

Semantikk i HTML5

<header>  
  <h1>I can the Interwebs</h1>
    <!-- Slogans ftw i headeren -->
</header>
<nav>  
   <!-- Naviger i min awesome meny -->
</nav>
<article>
  <section>
    <!-- Blogger ftw -->
  </section>
  <section>
    <!-- Kan bli for lite blogging -->
  </section>  
</article>

<footer>
  <!-- Copyright: You wouldnt steal a car.. -->
</footer>

Del 3: Web Forms

HTML5 forms

<form> 
  <input type="text" name="name" required placeholder="Navn">
  <label for="name">Navn</label>

  <input type="email" name="email" required placeholder="email@me.com">
  <label for="email">Epost</label> 
	
  <input type="url" name="website" placeholder="www.me.com">
  <label for="website">Nettside</label> 

  <input type="number" name="number" min="0" max="10" 
	step="2" required placeholder="Tall < 10">
  <label for="number">Tall</label> 

  <input type="range" name="range" min="0" max="10" step="2">
  <label for="range">Range</label> 

  <input type="submit" value="Registrer">
</form>
Registrer deg

Navn

Epost

Nettside

Tall

Range

Padda skjønner forms!

Del 4: API

Video

<video width="640" height="480" controls >
  <source src="video/movie.mp4" type="video/mp4" />
  <source src="video/movie.ogg" type="video/ogg" />
  <source src="video/movie.webm" type="video/webm" />
  <object data="video/movie.mp4" width="320" height="240">
    <embed src="video/movie.swf" width="320" height="240" />
  </object> 
</video>

Video

Audio

<audio>
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

Canvas

Start video i bakgrunnen Stopp video i bakgrunnen Kopier video inn i canvas

GeoLocation

<script>
  function getLocation(){
    if (navigator.geolocation){
      navigator.geolocation.getCurrentPosition(showPosition);
    }
    else{
	  x.innerHTML="Geolocation is not supported by this browser.";
	}
  }
  function showPosition(position){
    console.log("Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude; 
  }
</script>
Eksempel på geolocation

HTML5 web storage

LocalStorage og SessionStorage er sikrere og raskere enn cookies. Lagrer data på klienten

localStorage.skole = 'NTNU'
localStorage.event = 'itDagene'

Del 4: Hvordan komme igang med HTML5?

<!DOCTYPE html>

<!DOCTYPE html>
  <html>
    <head>
      <title>Min HTML5 nettside</title>
    </head>

    <body>
     < -- Din nettside her -- >
    </body>
  </html>

Funksjoner i HTML5 støttes enda ikke fullt ut i alle nettlesere. Hvis man skal bruke funksjoner fra HTML5 bør man sjekke hva nettleseren støtter.

Modernizr

if (Modernizr.localstorage) {
  // window.localStorage is available!
} else {
  // no native support for HTML5 storage :(
}	
if (Modernizr.geolocation) {
  // navigator.geolocation is available!
} else {
  // no native support for HTML5 storage :(
}

Oppsummering

  • Feilhåndtering
  • Semantikk
  • Web Forms
  • API
  • Komme igang

Spørsmål?

Takk for meg

Slidene er tilgjengelig på github.com