HTML5 & CSS3

für mobile Endgeräte

kurze Übersicht

HTML5 - Wer hat’s erfunden?
Aller Anfang ist leicht
fette Features
CSS3 - leider geil
Mobile Äpfel
Zukunftsmusik
one more thing..

1. HTML5 - Wer hat’s erfunden?

3 Parteien

World Wide Web Consortium (W3C)
Browser Vendors
Webdeveloper

Es war einmal...

HTML 4 => XHTML 1.0 => XHTML 2.0

- XHTML 2.0 war komplett anders und nicht abwärtskompatibel
- Gründung der WHATWG
- (Zusammenschluss von Mozilla, Opera und Apple)
- Arbeit an anderem Standard (HTML5)

Back to the future

HTML 4 => XHTML 1.0 => XHTML 2.0 => HTML 5

W3C und WHATWG schließen sich zusammen
=> gemeinsame Arbeit an HTML5

… und sie leben glücklich und zufrieden seit dem Ende von Flash

2. Aller Anfang ist leicht

HTML4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

Wer merkt sich das?

Kurz & knackig

HTML5

<!doctype html>

mehr schauen sich die Browser beim Parsen nicht an

Der neue Standard

Grundgerüst

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>		
   </head>	
   <body>
	
   </body>	
</html>

erweitertes Fundament:

HTML5Boilerplate

mobiles Grundgerüst

HTML5Boilerplate Mobile

mobile Unterstützung?

Modernizr

enthält das html5shiv

3. Fette Features

Can I use HTML5? - Yes, we can!

Die Fünften Elemente

<header>, <footer>, <nav>, <section>, <article>, <aside>, <figure> …

header: einleitende Sektion, Navigationshilfe, Logo…
footer: weiterführende Informationen über Autor, Copyright, Links zum Thema…
nav: enthält Navigationselemente
section: thematische Gruppierung von Inhalt
article: Forum post, Magazin- oder Zeitungsartikel, Blogeintrag...
aside: weiterer Inhalt bezogen auf das Thema (Seitenleiste)

HTML5 Parser

Chrome 7, Safari, FF4, Opera 11.60, IE 10

	<p><span></p></span>

In welcher Reihenfolge soll der Code gerendert werden?

1. Möglichkeit

	<p></p><span></span>

2. Möglichkeit

	<p><span></span></p>

Multimedia ohne Flash

<audio>

Darstellung per CSS ändern und per JS auf Funktionen zugreifen:

<video>

JS pageVisibilty:
Sieht der Nutzer die Seite?

Offline / Storage

navigator.onLine:
Ist der Nutzer online?
localStorage['key']:
speichern von Informationen für die offline-Nutzung
manifest="name.appcache":
Bilder, Dateien… im Cache sichern, um offline-Nutzung möglich zu machen
window.openDatabase( name, version, displayname, size ):
Datenbank auf dem Klienten

navigator.geolocation

draggable="true"

new WebSocket('url');

3D für den Browser

(Chrome 9+, Firefox 4+)

Webcam support bereits in den Alpha Versionen..

new FileReader()

el.webkitEnterFullScreen()

neue Formulartypen

4. CSS3 - leider geil

CSS3 Spielplatz

Transformationen

transitions

Media Queries

<meta name="viewport" content="width=device-width">

@media only screen and (min-width: 1025px) {
  /* Desktop */
}

@media only screen and (max-width: 1024px) and (orientation: landscape) {
  /* iPad landscape */
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  /* iPad portrait */
}

@media only screen and (max-width: 480px) {
  /* iPhone Landscape */
}

@media only screen and (max-width: 320px) and (orientation: portrait) {
  /* iPhone Portrait */
}

Retina Media Queries

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
       only screen and (min-device-pixel-ratio : 1.5) {
  /* Retina Displays */
}

Responsive Design Tests:

border-radius

Schattenspiel

box-sizing

content-box:
width = Breite des Inhalts
border-box:
width = Breite des Inhalts + padding (Innenabstand)

colors

rgba(rot,grün,blau,alpha)
hsl(hue,saturation,lightness)
hsla(hue,saturation,lightness,alpha)

selectors

opacity

5. Apple <3 mobile Web Apps

Native Touch Scrolling

overflow: scroll funktionierte im mobile Safari nicht

=> Box mit fixer Breite und Höhe, konnte nicht gescrollt werden

position: fixed

fixierte Bereiche beim Scrollen ermöglichen Kopf- und/oder Fußzeilen als Navigationselemente

touch me!

touch & gesture events in iOS

Touch Events

var element, startX, startY, currentX, currentY;

element.ontouchstart = function(e) { 	// Touch Start
	startX = e.touches[0].clientX;
	startY = e.touches[0].clientY;
}

element.ontouchmove = function(e) { 	// Touch Move
	e.preventDefault();		// verhindert Scrollen
	currentX = e.touches[0].pageX;
	currentY = e.touches[0].pageY;
}

element.ontouchend = function(e) { 	// Touch End
	startX = 0;
	startY = 0;
	currentX = 0;
	currentY = 0;
}

Gesture Events (Pinch)

var element;

element.ongesturechange = function(e) { 	// Pinch Start
		e.preventDefault();		// verhindert Zoomen
		element = e.target;
}

element.ongestureend = function(e) { 		// Pinch End
		element = e.target;
}

Device Orientation Events

var body = document.querySelector('body');
	
body.onorientationchange = function(e) {

  switch(window.orientation) {
				
    case 0:
              body.innerHTML = "Portrait";
    break;        
    case -90:
              body.innerHTML = "Landscape rechts";
    break;
    case 90:
              body.innerHTML = "Landscape links";
    break;      
    case 180:
              body.innerHTML = "auf dem Kopf";
    break;      
  }			
}

iOS Meta Tags

Web App aktivieren

<meta name="apple-mobile-web-app-capable" content="yes">

Status Bar Color (default,black,black-translucent)

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Homescreen Icon

// For iPhone 4 with high-resolution Retina display:
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon.png">
// For first-generation iPad:
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon.png">
//For non-Retina iPhone, iPod Touch, and Android 2.1+ devices:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

iOS Meta Tags

Startup Image

<!-- <script>(function(){ var a;
if(navigator.platform==="iPad"){
  a=window.orientation===90 || window.orientation===-90 ?
    "img/startup-tablet-landscape.png" : "img/startup-tablet-portrait.png"
} else {
a=window.devicePixelRatio===2?"img/startup-retina.png":"img/startup.png"
}
document.write('<link rel="apple-touch-startup-image" href="'+a+'"/>')
})()
</script> -->

6. Zukunftsmusik

Web Notifications

Responsive Images

<picture>

<picture alt="Beschreibung">
  <!-- smallest size first - no @media qualifier -->
  <source src="bild.jpg">
  <!-- medium size - send to viewport widths 400px wide and up -->
  <source src="bild2.jpg" media="(min-width: 400px)">
  <!-- large size - send to viewport widths 800px wide and up -->
  <source src="bild3.jpg" media="(min-width: 800px)">
  <!-- extra large size - send to viewport widths 1000px wide and up -->
  <source src="bild4.jpg" media="(min-width: 1000px)">
  <!-- extra large size - send to viewport widths 1300px wide and up -->
  <source src="bild5.jpg" media="(min-width: 1200px)">
  <!-- Fallback content for non-JS or non-media-query-supporting browsers.
  Same img src as the initial, unqualified source element. -->
  <noscript><img src="bild.jpg" alt="Beschreibung"></noscript>
</picture>

7. One more thing..

Vorsicht bei der Internetrecherche!

Mozilla Developer Network

Thanks for listening!

Slides:
htmldocs.de/vortrag

Noch Fragen?
- ss268 (Stefan)
- mh174 (Max)

Let's connect: @max_hoffmann