Mobile Web

The Power of HTML5

 

Mobile Forum Stuttgart, 17.05.2013
Sven Wolfermann | maddesigns

Wer ist die Flitzpiepe da überhaupt?

Sven Wolfermann - maddesigns

Bildquelle

Mark Zuckerberg: Our Biggest Mistake Was Betting Too Much On HTML5

The Making of Fastbook: An HTML5 Love Story

HTML5-Geschichte

HTML-Geschichte

HTML

HTML 2.01995
HTML 3.21997
HTML 4.01997
HTML 4.011999

XHTML

XHTML 1.02000
XHTML 1.12001
XHTML 2 

HTML5-Geschichte

HTML5 Logo

HTML5 Zukunft

 HTML 5.0HTML 5.1HTML 5.2
2012Candidate Rec1st WD
2013Call for Review
2014RecommendationLast Call
2015Candidate Rec 1st WD
2016Recommendation
WD = Working Draft

Doctype

HTML 4.01

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

XHTML 1.0

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

HTML5

<!DOCTYPE html>

Charset

HTML 4.01

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

XHTML 1.0

<?xml version="1.0" encoding="UTF-8"?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
HTML5
<meta charset="utf-8">

HTML

<link rel="stylesheet" type="text/css" href="file.css">

<style type="text/css"></style>

<script type="text/javascript"></script>

HTML5

<link rel="stylesheet" href="file.css">

<style></style>

<script></script>

Verlinkung

(X)HTML

<h2>
  <a href="/path/to/resource">Headline text</a>
</h2>
<p>
  <a href="/path/to/resource">Paragraph text.</a>
</p>

HTML5

<a href="/path/to/resource">
  <h2>Headline text</h2>
  <p>Paragraph text.</p>
</a>

Neue Elemente in HTML5

neue Elemente für bessere Semantik

article, aside, audio, bdi, canvas, command, data, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, track, video, wbr
hgroup – nicht mehr in HTML5.1

Neue Formelemente-Typen

dates, times, email, url, search, number, range, tel, color

HTML5 Periodic Table

Beispiel HTML

<body>
  <div id="header">...</div>
  <div id="navigation">...</div>
  <div id="main">...</div>
  <div id="sidebar">...</div>
  <div id="footer">...</div>
</body>

Beispiel HTML5

<body>
  <header>...</header>
  <nav>...</nav>
  <div id="main">...</div>
  <aside>...</aside>
  <footer>...</footer>
</body>

HTML5 vorher/nachher

HTML5 before HTML5 after

 

NEU in HTML5.1: <main>

(bereits in Firefox 21 unterstützt)

Meta-Viewport <head>

<meta name="viewport" content="width=device-width">
<!-- bzw. -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">

bald im CSS (Support für Opera Mobile, IE10)

@viewport {
  width: device-width;
}
/* IE10 mobile */
@media screen and (max-width:400px) {
    @-ms-viewport{
        width: 320px;
        /* the viewport for small devices is set to 320px  */
        /* width: device-width is buggy in IE10 */
    }
}

<video>

native Videoeinbindung

<video src="video.ogv"
controls
autoplay
poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>

Video Formate – H.264 vs Ogg Theora

H.264: weitverbreitet, aber Patente / Lizenz
Theora: lizenzfrei, aber nicht fürs Web optimiert

WebM:
neues Format, Opera, Firefox, Chrome, Android unterstützen es, Internet Explorer 9, Safari mit installiertem Codec

Ein WebM VP9 Video soll 50% kleiner als ein H.264 Video der gleichen Qualitätsstufe sein. In Chrome 29 stable ab 20. August 2013.

Cross-Browser Video Einbindung

<video controls autoplay poster="…" width="…" height="…">
<source src="movie.webm" type="video/webm" />
<source src="movie.ogv" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<!-- fallback content -->
</video>

video.canPlayType('video/webm');

alten Browsern Flash servieren

querySelector/querySelectorAll
es muss nicht immer jQuery sein

querySelector/querySelectorAll

jQuery Elemente selektieren

$('.foo .bar')

nativ HTML5 ab IE8!

document.querySelector('.foo .bar')
document.querySelectorAll('.foo .bar')

jQuery Suche innerhalb des Selektors

$(element).find('.bar')

nativ

element.querySelector('.bar')

attr/setAttribute, css/style

jQuery Element Attribut setzen

$(element).attr(key, value)

nativ

element.setAttribute(key, value)

jQuery CSS Eigenschaften setzen

$(element).css(name, value)

nativ

element.style[name] = value

createElement/appendChild

jQuery neues Element anlegen

var div = $('<div>')

nativ

var div = document.createElement('div')

jQuery Element anfügen

$(a).append(b)

native

a.appendChild(b)

html/innerHTML, remove/removeChild

jQuery Elementinhalt ändern

$(element).html(htmlString)

nativ

element.innerHTML = htmlString

jQuery Element entfernen

$(element).remove()

nativ

element.parentNode.removeChild(element)

addClass/classList

jQuery HTML-Klasse zum <body> hinzufügen

$('body').addClass('hasJS');

nativ

document.body.classList.add('hasJS');

jQuery Klassen wechseln

$('div').toggleClass('my-class')

nativ

div.classList.toggle('visible'); //now it's added
div.classList.toggle('visible'); //now it's removed
http://davidwalsh.name/classlist

querySelector/querySelectorAll

querySelector im IE 8 nur auf CSS 2.1 Selektoren

Vanilla JS vs. jQuery Links

weaning yourself off jquery

http://substack.net/weaning_yourself_off_jquery

I know jQuery. Now what?

http://remysharp.com/2013/04/19/i-know-jquery-now-what/

Moving from jQuery

https://gist.github.com/liamcurry/2597326

Prüfung für moderne Browser

(Cutting the mustard - BBC Webdev)

isModernBrowser: (
    'querySelector' in document &&
    'addEventListener' in window &&
    'localStorage' in window
)

kann der Browser querySelector, addEventListener und localStorage, dann ist es ein moderner Browser

Cutting the mustard

Modernizr

Browser Feature Detection

http://modernizr.com/

neue Formelemente / -attribute

neue Formelemente / -attribute

<progress>
<meter>
<datalist>

<input type="text" placeholder="new placeholder attribute">
<input type="number" pattern="[0-9]*">
<input type="email" required>
<input type="url">
<input type="tel">
<input type="time">
<input type="date">
<input type="month">
<input type="week">
<input type="datetime">
<input type="datetime-local">
<input type="color">
<input type="range">

Camera - Media Capture

Foto mit dem Device aufnehmen

<input type="file" capture accepts="image/*"  id="cam">
var cam = document.getElementById("cam");
cam.onchange = function(event) {
  // An image has been captured.
  if(event.target.files.length == 1 &&
     event.target.files[0].type.indexOf("image/") == 0) {
     // We have an image, most likely from a camera
  }
}
http://mobile-html.appspot.com/#33

HTML5 E-Mail-Input-Feld

 

<input type="email">
<input type="email" required>

HTML5 URL-Input-Feld

 

<input type="url">

HTML5 Date-Input-Feld

 

<input type="date">

native OS-Funktionen triggern – Zahlentastatur

 

<input type="number">

pattern Attribut 'pattern="[0-9]*"' Nummerfeld triggern

 

<input type="text" pattern="[0-9]*">

Touch Events

[element].ontouchstart = function(event) {};
[element].ontouchmove = function(event) {};
[element].ontouchend = function(event) {};

neue HTML5 Pointer Events

onpointerdown, onpointerup, onpointermove, onpointerover,
onpointerout, onpointerenter, onpointerleave.

localStorage – Cookies on steroids

localStorage.setItem("key1", "value1");
localStorage["key1"] = "value1";
  
localStorage.getItem("key1");
localStorage["key1"];
  
localStorage.removeItem("key1");
  
localStorage.length;
  
localStorage.clear();
http://php-html.net/tutorials/html5-local-storage-guide/

Offline - HTML5 Application Cache

Der Application Cache (AppCache) legt fest welche Dateien der Browser offline verfügbar machen soll.

<!DOCTYPE HTML>
<html manifest="/my.manifest">
// my.manifest
CACHE MANIFEST
/my-hero-image.jpg
/fallback.html
...

AddType text/cache-manifest .manifest
IE Firefox Safari Chrome Opera iPhone Android
8+ 3.5+ 4.0+ 4.0+ 10.5+ 2.0+ 2.0+

Don't cache the manifest!

http://vimeo.com/43336762
http://www.html5rocks.com/en/tutorials/appcache/beginner/

Geolocation

Standortdaten abfragen

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(position);
}
else {
  alert("Geolocation wird nicht unterstützt");
}

Position auf GoogleMaps ausgeben

  var longitude = position.coords.longitude;
  var latitude  = position.coords.latitude;
  var pos = new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude);

Canvas

Rechteck zeichnen

function draw(){
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.fillRect(25,25,100,100);
  ctx.clearRect(45,45,60,60);
  ctx.strokeRect(50,50,50,50);
}

Fireworks Demo

MDN Canvas Tutorial

History API

function addClicker(link) {
  link.addEventListener("click", function(e) {
    swapPhoto(link.href);
    history.pushState(null, null, link.href);
    e.preventDefault();
  }, false);
}
history.pushState(null, null, link.href);
  1. state – kann eine JSON data Struktur
  2. title – irgendein String
  3. url – eine URL
http://diveintohtml5.info/history.html

getUserMedia/WebRTC

Inline camera and mic access

navigator.getUserMedia({audio:true, video: true},
  function(stream) {
    // An image has been captured.
    video.src = URL.createObjectURL(stream);
    video.play();
});

Accessing the Device Camera with getUserMedia

WebRTC Video Chat z.B. zwischen Firefox und Chrome

Embedding WebRTC Video Chat Right Into Your Website

Firefox OS

Firefox OS Web APIs

https://hacks.mozilla.org/2013/02/using-webapis-to-make-the-web-layer-more-capable/

Übersicht HTML5 APIs Unterstützung

http://mobilehtml5.org/

HTML5 Test

http://html5test.com/results/mobile.html

jQuery 2.0

jQuery 2.0 wurde leicht entschlackt und Polyfills für alte Browser entfernt

kein Support mehr für IE 6/7/8!

seit 1.8 möglich ein angepasstes Build zu erstellen

http://blog.jquery.com/2013/04/18/jquery-2-0-released/

Zepto anstatt jQuery

Zepto ist eine minimale JS-Library für moderne Browser

Funktionen wie bei jQuery

auch kein IE-Support

Porting from jQuery to Zepto

http://zeptojs.com/

Frameworks


http://angularjs.org/


http://backbonejs.org/


http://hood.ie

Fragen?

Danke für die Aufmerksamkeit!

HTML5 slideshow by Google

Sven Wolfermann | maddesigns

 

http://maddesigns.de