HTML5 für Entwickler: Part 1, 2014

Kochan & PartnerBrandDesignDevelopment

HTML5 für Entwickler 1. Teil !Markus Greve Für den Abendkurs der Typographischen

Gesellschaft München, 2014

markup, noun. A markup language is a modern

system for annotating a document in a way that is

syntactically distinguishable from the text. The idea

and terminology evolved from the »marking up« of

manuscripts

—Wikipedia

Kochan & Partner Brand Design Development 2

Demos, Links, Ressourcen http://www.kochan.de/html5 Slides http://de.slideshare.net/markusgreve/

! Markus Greve KOCHAN & PARTNER BRAND DESIGN DEVELOPMENT ! T +49 89 17860–150 E markus.greve@kochan.de @mrmontezuma

Kochan & Partner Brand Design Development

Organisatorisches

30.01. Einführung Hidden Gems Part 1: Markup !06.02. Part 2: CSS

13.02. Part 3: Javascript

20.02. Hack-a-thon: Thema offen!

Hack-a-thon 2013

Was ist HTML5 und was nicht

...Quelle: Peter Kröner, http://html5-buch.deCreative Commons Namensnennung 3.0 Deutschland-Lizenz

Quelle: Peter Kröner, http://commons.wikipedia.orgCreative Commons Namensnennung 3.0 Deutschland-Lizenz

Update

Was ist HTML5?

HTML 4.01

XHTML 1

W3C, WHATWG

Nicht-Standard wird Standard

Was ist HTML5?

Semantic

Quelle: http://www.w3.org/html/logo/

Offline & Storage Device

Realtime & Communication

Multimedia3D, Graphics

& EffectsPerformance &

Integration CSS3

Unterstützung

Strategie

Graceful degredation

Progressive enhancement

Can I Use?

Volle/teilweise Unterstützung

Detaillierte Versionsinfo

Weiterführende Informationen, Referenz

Quelle: http://caniuse.com

Hilfsmittel

Polyfills

IE–Quickfix (1)

window.document.createElement('section');

IE–Quickfix (2)

Sinngemäße Quelle: http://code.google.com/p/html5shiv/

'abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup menu mark meter nav output progress section summary time video'.replace(/w+/g,function(n){window.document.createElement(n)});

Standard Stylesheet Hack

command, datalist, source { display: none; }

!article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section, summary

{ display: block; } !mark

{ background: #FF0; color: #000; }

Sinngemäße Quelle: http://code.google.com/p/html5shiv/

normalize.css

A modern, HTML5-ready alternative to CSS resets… as used by Twitter, TweetDeck, GitHub, Soundcloud, Rdio, Bootstrap, HTML5 Boilerplate, YUI 3, …

Quelle: http://necolas.github.com/normalize.css/

Modernizr

The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks

—Modernizr

Quelle: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Canvas

Web Storage

Video & Audio

IndexedDB, WebSQL

WebForms

Accessiblity / ARIA

Web Sockets

Geo Location

Application Cache

Browser State Management

–prefix–free

–prefix–free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

—Lea Verou

Quelle: http://leaverou.github.com/prefixfree/

»Hidden Gems«

Standard-Typen für script und style

type=“text/javascript“ language=“javascript“

Standard-Wert für das script-Tag

type=“text/css“

Standard-Wert für das style-Tag

Skript-Ausführungsverhalten mit defer, async

Beispiel

a, area und link (1)

<a target=“_blank“>Link ohne Ziel und Verstand</a> !<a href=“http://www.google.de“ rel=“prefetch“> Descriptiver Rel-Einsatz

Vereinheitlichung von a, area und link

Umschließung

Wiederbelebung target, optionales href-Attribut

Typisierung mittels rel

Beispiel

a, area und link (2)

Umfangreiches Set an Schlüsselworten für rel:

Navigation, Strukturierung index, first, last, prev, next, up

Inhaltlich author, alternate, archives, bookmark, external, help, license, pingback, search, tag

Beeinflussung Browser-Verhalten sidebar, prefetch, nofollow, noreferrer

Typisierend icon, stylesheet

Auto-Fokus erlaubt für input, select, textarea und button

Standardisierung der Fokus-Ermittlung

Auto-Fokus

if (document.hasFocus()) {

var element = document.activeElement(); }

Fokus-Ermittlung

Einbindung svg und MathML (1)

<!DOCTYPE html> ...

<circle cx="120" cy="65" r="40"

fill="red" stroke="green" stroke-width="5" />

</svg> </body>

... !!!!

<!DOCTYPE html> ...

&PlusMinus;</mo> <mi>b</mi> <mo>&PlusMinus;</mo> <msqrt>

</msup> <mo>-</mo> <mn>4</mn> ...

Einbindung svg und MathML (2)

Screenshots: Safari 6/Mac OS X

Standardisierung getElementsByClassName()

document.getElementsByClassName() element.getElementsByClassName()

var allMyActiveDivs = document.getElementsByClassName('active'); !var myOtherLis = myUl.getElementsByClassName('inactive');

Beispiele

querySelector API

document.querySelector(<CSS Selector>); // first match document.querySelectorAll(<CSS Selector>); // all matches

var oddRows = document.querySelectorAll('#table > tr:nth-child(odd)');

Randnotiz: w3C Standard seit vergangenem Freitag, 22. Februar 2013

Beispiel

matchMedia API

// true, when media query matches window.matchMedia(<CSS Media Query>).matches;

if (window.matchMedia('(orientation: portrait)').matches) alert('Hochkant!');

Beispiel: http://lab.kochan.de/mg/device/

Beispiel: Plattform-unabhängige Ermittlung der Orientierung

HTML-Manipulation

element.innerHTML element.outerHTML element.insertAdjacentHTML(<position>, <html>) <position> := 'beforebegin' 'afterbegin' 'beforeend' 'afterend'

myUl.innerHTML = '<li>New Bullet</li>'; myUl.outerHTML = '<ul><li>New Bullet</li></ul>'; !myLi.insertAdjacentHTML('beforebegin', '<li>Vorgänger</li>');

Beispiele

Class List API

element.classList.length .add() .contains() .item() .remove() .toggle()

myDiv.classList.add('active'); // 'active' is added myDiv.classList.remove('active'); // 'active' is removed myDiv.classList.toggle('active'); // add or remove !if (myDiv.classList.contains('active')) alert('Aktiv!')

Beispiele

Frei definierbare Attribute: data-*

Attribute data-*

API element.dataset

<a data-file-type="pdf" data-file-size="73" href="..."> Preisliste und Kundenheft

</a> !// data-* will become dataset-Members, notice "Camel" writing alert(element.dataset.fileType) // alerts "pdf" alert(element.dataset.fileSize) // alerts "73"

Beispiel

History API

history.length .back() .forward() .go(<delta>) .state .pushState(<stateObj>, <title>, <url>) .replaceState() !window.onpopstate = function(e) { // code to be executed after browser-back button // ... };

Zusammenfassung: Markup

Standard-Type für script und style

Skript-Ausführungsverhalten mit defer, async

Fokus-Behandlung mit autofocus, hasFocus() und activeElement()

a, area und link: Vereinheitlichung, Umschließung, Typisierung mit rel

SVG und MathML

Brand Design Development

Zusammenfassung: Javascript

HTML-Manipulation mittels innerHTML, outerHTML, insertAdjacentHTML

Standardisierung getElementsByClassName()

querySelector API: querySelector(), querySelectorAll()

matchMedia API: matchMedia().matches

ClassList API

Frei definierbare Attribute mit data-*

History API

Part 1 Markup

Semantik Formulare Video & Audio Application Cache

Grundgerüst

<!DOCTYPE html> <html>

<head> <meta charset=“utf-8“/> <title>Hello world</title>

</head> <body>

<h1>Hello world</h1> <p>Starting with HTML5</p>

</body> </html>

DOCTYPE

</head> <body>

</body> </html>

Auslassung

</head>

</html>

Well-formed oder nicht? Egal!

<head> <meta charset=“utf-8“ > <title>Hello world</title>

</head> <body>

<h1>Hello world</h1> <p>Starting with HTML5 <p> ... <a href=index.html>No quotation marks!</a> <STRONG>You don't have to like this</STRONG> <eM>I don't</Em>

</body> <html>

Neue Elemente

Kopf- und Fußbereiche header, footer

Seitenabschnitte section

Artikel article

Navigationsbereiche nav

Begleitende Informationen aside

Abbildungen figure, figcaption

Markierung mark

Neue Elemente (2)

Uhrzeit time

Menü menu

Button/Checkbox/Radiobox command

Fortschrittsanzeige progress

Skala meter

Detailansicht details

Zusammenfassung einer Detailansicht summary

Kopf- und Fußbereich: header, footer

Kopfbereich z.B. für Logo, Navigationsbereich

Beide Elemente pro Seite und pro Sektion definierbar

<header> <a href="index.html" rel="index">Huber GmbH</a> <nav>...</nav>

Artikel und Sinnabschnitte: article und section

Zusammenfassung inhaltlich abgeschlossener Bereiche durch article

Inhaltliche Strukturierung der Seite bzw. des Artikels durch section

<body>

<article> ...

Artikel und Sinnabschnitte: article und section

Zusammenfassung inhaltlich abgeschlossener Bereiche durch article

Inhaltliche Strukturierung der Seite bzw. des Artikels durch section

<body>

<article> ...

Navigationsbereiche: nav

Kennzeichnung der Hauptnavigationsbereiche als nav

Nebennavigationen außerhalb, z.B. Meta-Navigation im footer

... <nav> <ul> <li><a href="news.html">News</a></li> <li><a href="about.html">Über uns</a></li> <li>...</li> </ul> </nav> … <footer> <nav> <a href="imprint.html" rel="author">Impressum</a> <a href="license.html" rel=“license”>Nutzung…</a>

Begleitende Informationen: aside

Innerhalb eines articles: sekundärer Inhalt in Bezug auf den Artikel

Außerhalb eines articles: sekundärer Inhalt in Bezug auf die Website als Ganzes

<body>

<aside> Verwandte Themen ! Ganz andere Themen ! ...

</aside>

<aside> Mehr zu diesem Thema

</aside>

Abbildungen: figure und figcaption

Semantische Einheit für eine Abbildung figure, z.B. ein Bild, eine Tabelle oder ein Diagramm, mit optionaleer Abbildungsbeschriftung figcaption.

Reihenfolge der Darstellung kann ohne Verständnisverlust verändert werden.

<body>

<figure> <img src=""... /> <svg... /> <figcaption> Quelle: BMW AG. </figcaption> </figure>

Zeitangaben: time

Maschinenlesbare Kodierung von Zeitangaben des proleptischen Gregorianischen Kalenders

Datumsangabe, Uhrzeit oder eine Kombination aus Datum und Uhrzeit

optional: Kennzeichnung als Veröffentlichungszeitangabe

Das <time datetime="2013-02-28">heutige</time> Seminar...

Jeden Tag um <time datetime="12:00">12</time> Uhr...

<time datetime="2013-03-01T17:00Z">Morgen um fünf</time>...

Veröffentlicht am: <time datetime="2013-02-26" pubdate> 26.02.13</time>

Beispiele

Markierung: mark

Hervorhebung von Text ohne inhaltliche Betonung

Nutzbar insbesondere (ausschließlich?) für Suchergebnisse (SERP)

<h1>Ihre Suche nach <em>entertain</em>:</h1> <ul> <li>Let me <mark>entertain</mark> you: Queen, Jazz, 1978</li> <li>That's <mark>Entertain</mark>ment: Band Waggon, 1953</li> </ul>

Beispiel

Ihre Suche nach entertain:

• Let me entertain you: Queen, Jazz, 1978

• That's Entertainment: Band Waggon, 1953

Fortschrittsanzeige: progress

Darstellung Betriebssystem-spezifisch

Maximum (max) und aktueller Status (value) optional via numerischem Wert

Aktueller Fortschriftt via element.position (0.0 – 1.0, –1 bei unbekannt)

Safari 6/Mac OS X

Firefox 10 /Windows Non-Aqua

Internet Explorer/Windows Phone 8

Skala: meter

Darstellung Betriebssystem-spezifisch

Grenzen (min, max) und aktuellem Wert (value) optional via numerischem Wert

Einfärbung bei Erreichen von Schwellwerten (low, high, optimum) möglich

Safari 6/Mac OS X

Outline-Algorithmus (1)

Beibehaltung des 6-stufiges Überschriften-Modell h1 bis h6

Hierarchie jedoch pro Sektion

Sektionen definiert durch section, nav, aside und article

Outline-Algorithmus (2)

<h1>Agenda</h1> <section> <h1>Begrüßung</h1> <h2>Schirmherr</h2> <h2>Sponsorenvertreter</h2> <h1>Top 1: Gruppen</h1> <h1>Top 2: Plenung</h1> </section> <h1>Anlagen</h1>

Beispiel

1. Agenda

1.1 Begrüßung

1.1.1 Schirmherr

1.1.2 Sponsorenvertreter

1.2 Top 1: Gruppen

1.3 Top 2: Plenum

2. Anlagen

Umdeutung/Änderung bestehender Elemente

Hervorhebung em, strong

Abkürzung und Akronym abbr

Quellcode code

Adresse address

Gleichwertige Abhebung, Fachbegriffe b, i

Inhaltlicher Bruch hr

»Kleingedrucktes« small

Entfernte Elemente

Frames frameset, frame, noframes

Präsentationselementedir, basefont, big, center, font, s, strike, tt, u

Akronyme acronym

Applets applet

Einzeiliges Eingabefeld (?) isindex

Randnotiz: HTML5 definiert, wie diese nicht spezifizierten Elemente dargestellt werden sollen... :-)

A R I A

Accesible Rich Internet Application

WAI-ARIA

Implizite Rollen

Definierte Überschreibbarkeit

Explizite Attribute: Rollen, Beschriftungen, Zustände, ...

Implizite Rollen und Überschreibung

Element Default role Überschreibbar mit

article article document, application, main

aside note complementary, search

header keine banner

li listitem treeitem

ol list tree, directory

output status Alle

section !

region !

document, application, log, contentinfo, search, alert, main, dialog, alertdialog, status, log

table grid treegrid

ul list tree, directory

body document application

Explizite Rollenzuweisung

<ul role="tree" aria-labelledby="Credits"> ! <li role="treeitem" aria-expanded="false"> John Deacon: Bass guitar </li> <li role="group"> Freddie Mercury: <ul> <li role="treeitem">Vocals</li> <li role="treeitem">Piano</li> </ul> </li> ... </ul>

Details: http://w3.org/TR/wai-aria/

Microdata

microformats.org

HTML5-Microdata: vCard, vEvent, work

Attribute itemscope itemprop itemref

API document.getItems() element.properties element.itemValue

Microdata: Google Rich Snippets

Quelle: http://support.google.com/webmasters/bin/answer.py?hl=de&answer=99170

Microdata: Google Rich Snippets (2)

Quelle: http://www.google.com/webmasters/tools/richsnippet

Zusammenfassung: Semantik

Syntax: doctype, well formed, Auslassung

Neue Elemente

Umdeutung/Änderung bestehender Elemente

Entfernte Elemente

Outline-Algorithmus

WAI-ARIA

Microdata

Neue Typen für input (1)

Textfeld text

Suchfeld search

Telefonnummer telephone

URL* url

E-Mail-Adresse* email

Numerischer Wert* number

Bereich* range

Farbwahl / Color picker color

* Eingebaute Validierung

Neue Typen für input (2)

Datum- und Zeit-Angaben datetime

Datum date

Monat month

Woche week

Zeit time

Datum- und Zeit in lokaler Notation datetime-local

Typ number, range

Eingabefeld oder Regler für Fließkomma-Zahlen

optional: Grenzen (min, max) und Schrittweite (step)

Beispiele

Safari 6/Mac OS X

IE 10/WIndows 8

Typ search

Eingabefeld für Suchen

Darstellung nach Art des Betriebssystems

Beispiel

Safari 6/Mac OS X

Typ Farbwahl / Colorpicker color

Leider noch kaum implementiert

Beispiel

Chrome 25/Mac OS X

Opera 12/Mac OS X

Typ für Datum- und Zeitangaben

Validierung, optional mit Beschränkung min und max

Beispiele

Chrome 25/Mac OS X

Neue Elemente

Erzeugung von Schlüsseln keygen

Objekt object

Ausgabebereich output

Auto-Vervollständigung datalist

Auto-Vervollständigung: datalist

<input list="albums" /> !<datalist id="albums"> <option value="Queen" /> <option value="Queen II" /> <option value="Sheer Heart... <option value="A Night At ... <option value="A Day At Th... <option value="The Game" ... <option value="The Works" /> <option value="A kind of m... <option value="The Miracle" <option value="Innuendo" /> ...

Beispiel

Chrome 25/Mac OS X

Neue Attribute

Referenz auf zugehöriges Formular form

Steuerung Auto-Vervollständigung autocomplete

Referenz auf Vorschlagsliste list

Mehrfach-Feld (z.B. bei Datei-Upload) multiple

Platzhalter / Eingabehilfe placeholder

Checkbox mit unbekanntem Zustand indeterminate

Steuerung Button-Verhalten formaction, formenctype, formmethod, formnovalidate

Steuerung Button-Verhalten

<form action="standard.php" method="post"> <button type="submit">Absenden</button> <button type="submit" formaction="alternate.php"> Anderswohin </button> <button type="submit" formnovalidate>Ohne Prüfung</button> </form>

Beispiel

Absenden Anderswohin Ohne Prüfung

standard.php alternate.php standard.php

ValidierungPost

keine ValidierungPost

Validierung

Validierung auf Ebene Element, Feldgruppe oder Formular

Keine Validierung für hidden, submit, image, reset und object

CSS Pseudo-Selektoren für Styling :in-range, :default, :required

Fehlermeldung bei Absenden des Formulars oder manuell via Javascript API

Beeinflussung durch Attribute novalidate, required und pattern z.B. pattern="[0-9]{5}"

Validation API

Member

Bool'scher Wert element.willValidate

Lokalisierte Fehlermeldung element.validationMessage

Datenstruktur zur Fehleranalyse element.validity .valid .valueMissing .typeMismatch .patternMismatch .tooLong .rangeUnderflow .rangeOverflow .stepMismatch .customError

Methoden

Validierung auslösen element.checkValidity()

Eigene Regel setzen element.setCustomValidity()

BrowserUnterstützung?

Mac OS X

Windows 8

iOS (1)

iOS (2)

Windows Phone 8

Zusammenfassung: Formulare

Neue Typen für input

Neue Elemente und Attribute

Validierung und Validation API

Browser-Unterstützung

Audio- und Video-Einbindung

Steuerelemente an/abschaltbar mit controls (»Headless«)

Alternativer Inhalt innerhalb des Elements

Umfangreiche Javascript API zur Steuerung

<audio src="queen-a-day-at-the-races.ogg" controls> Leider unterstützt ihr Browser das audio-Element nicht. Klicken Sie hier, um die <a href="queen-a-day-at-the- races.ogg">Datei herunterzuladen</a>. </audio>

Beispiel

Audio-Attribute

Beispiel

Quellenangabe: src, hier mit Framestart und -ende #t=

Steuerelemente: controls

Automatisches abspielen: autoplay

Preload-Verhalten: none, metadata, auto

Wiederholte Wiedergabe: loop

Video-Attribute

Beispiel

Quellenangabe: src

Steuerelemente: controls

Automatisches abspielen: autoplay

Preload-Verhalten: none, metadata, auto

Wiederholte Wiedergabe: loop

Dimensionen: width und height

Audio-Steuerung: audio="muted"

Thumbnail: poster

Multiple Quellen: Codecs

Implizite Ermittlung via Mime-Type

Explizite Vorgabe

Multiple Quellen: Devices

Media-spezifisch

Audio- und Video API: Member

Lautstärke (0 – 1) element.volume

Pausiert (true, false) element.paused

Ton ausgeblendet (true, false) element.muted

Position auslesen und setzen element.currentTime

Aktuelle Mediendatei element.currentSrc

Abspieldauer (Streams: 'infinity') element.duration

Startzeitpunkt element.startTime

Normale Abspielgeschwindigkeit (0 – 1) member.defaultPlaybackRate

Abspielgeschwindigkeit (0 – 1) member.playbackRate

Audio- und Video API: TimeRanges

Member

(Bereits) Durchsuchbarer Zeitraum element.seekable

Abgespielter Zeitraum element.played

Vorgelden (gepufferter) Zeitraum element.buffered

[TimeRangeObject]

Anzahl der definierten Zeiträume timerange.length

Startzeitpunkt von Zeitraum n timerange.start(n)

Endzeitpunkt von Zeitraum n timerange.end(n)

Audio- und Video API: Methoden

Abspielen element.play()

Pausieren element.pause()

Mediendatei laden element.load(<url>)

Codec-Unterstützung abfragen element.canPlayType(<type>)

var p = document.getElementById('player'); var s = p.canPlayType("video/ogg; codecs='theora'"); switch(s) { case '': alert('Sorry, no way'); break; case 'maybe': if (confirm('Own risk?')) p.play(); break; case 'probably': p.play(); break; }

Beispiel

Events

loadstart Der Ladevorgang wurde begonnen

loadedmetadata Die Meta-Daten der Datei wurden geladen

canplay Abspielen nun möglich

canplaythrough Abspielen nun ohne weiteres Buffering möglich

play Abspielen wurde gestartet

ended Das Medienelement hat sein Ende erreicht

document.getElementById('player').addEventListener('ended', function() { alert('Ende, aufwachen!'); });

Beispiel

Fehlerbehandlung (1)

element.error

null Kein Fehler

1 MEDIA_ERR_ABORTED Abbruch durch den Benutzer

2 MEDIA_ERR_NETWORK Netzwerkfehler

3 MEDIA_ERR_DECODE Fehler beim Dekodieren

4 MEDIA_ERR_SRC_NOT_SUPPORTED Dateiformat/Codec nicht unterstützt

element.networkState

0 NETWORK_EMPTY Ladevorgang noch nicht begonnen

1 NETWORK_IDLE Kein Element zu laden

2 NETWORK_LOADING Ladevorgang

3 NETWORK_LOADED Ladevorgang abgeschlossen

4 NETWORK_NO_SOURCE Keine Mediendatei vorhanden

Fehlerbehandlung (2)

element.readyState

0 HAVE_NOTHING Noch keine Daten vorhanden

1 HAVE_METADATA Metadaten vorhanden (duration, ...)

2 HAVE_CURRENT_DATA Erste Daten liegen vor, jedoch noch nicht ausreichend, um abzuspielen

3 HAVE_FUTURE_DATADaten für aktuelle Position und die nächstenSekunden liegen vor, abspielen kann starten

4 HAVE_ENOUGH_DATAEntweder komplett geladen oder Abschätzung aufgrund aktueller Netzwerkperformance ok

And The Oscar Goes To...

Firefox 3.5+

Safari 4+

Chrome 3+

Opera 10.5+

IE6–8

Theora/Vorbis ü — ü ü — —

H.264/AAC ü 21* ü ü — — ü

MP3 — ü ü — — ü

WAV ü ü ü ü — —

WebM ü 4+ — ü ü 10.6+ — —

* Nur Windows, Linux teilweise, Mac OS X nicht

Zusammenfassung: Audio- und Video

Einbindung

Audio- und Video-Attribute

Multiple Quellen

Audio- und Video API: Member, Methoden und Events

Fehlerbehandlung: error, networkState, readyState

Codecs

Überblick Offline-Techniken

Application Cache

DOM Storage

Web SQL

IndexedDB

User Data

On-/Offline-Events und -Status-Abfrage

HTML-Einbindung

<html manifest="cache.manifest"> <head> <title>The Works offline... </head> ... </html>

index.html

Referenzierung der Manifest- Datei im HTML-Element

Auslieferung der Datei mit dem Mime-Type: text/cache-manifest

Aufbau Cache Manifest (1)

CACHE MANIFEST # Comment your lines with "#" !# Cache these index.html img/assets/band.jpg img/assets/instruments.jpg !!!

cache.manifest

Einleitung der zu cachenden Dateien mit CACHE MANIFEST

Auflistung jeder zu cachender Datei

Mehrere unterschiedliche Sektionen pro Cache-Datei möglich

CACHE MANIFEST # Comment your lines with "#" !# Cache these index.html img/assets/band.jpg img/assets/instruments.jpg !NETWORK only-online.html img/really-current-status.gif !

cache.manifest

Festlegung von Inhalten, die nur über eine Netzwerkverbindung bezogen werden dürfen (= no cache)

CACHE MANIFEST # Comment your lines with "#" !# Cache these index.html img/assets/band.jpg img/assets/instruments.jpg !NETWORK only-online.html img/really-current-status.gif !FALLBACK / sorry-you-are-offline.html

cache.manifest

Alternativ-Inhalte zur Ausgabe bei nicht erreichbaren Ressourcen des NETWORK-Abschnitts

Events

checking Manifest wird erstmalig geladen

noupdate Keine Veränderung des Manifests

downloading Manifest und Dateien werden initial heruntergeladen

progress Dateien werden heruntergeladen

cached Alle Dateien befinden sich im Cache

updateready Alle Dateien wurden aktualisiert und befinden sich nun im Cache

obsolete Cache ist ungültig (z.B. 404) und wird gelöscht

error Fehler oder Änderung während des Downloads

Zusammenfassung: Application Cache

HTML-Einbindung, Mime-Type

Aufbau Cache Manifest: CACHE MANIFEST, NETWORK, FALLBACK

Javascript Events zur Cache Überwachung

Kochan & PartnerBrandDesignDevelopment

Vielen Dank!

HTML5 für Entwickler: Part 1, 2014

Technology

Transcript of HTML5 für Entwickler: Part 1, 2014

cross-mobile-apps.de · zu gewährleisten. Mobile Webbrowser bieten mit HTML5 und CSS3 zahlrei-che neue Möglichkeiten für Entwickler: Mit so genannte “Web-Apps” lassen sichstandard-konformeAnwendungenentwickeln,diedenGroßteildermobi-len

Roland Weigelt UI / UX-Grundlagen für · PDF fileUI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer UG-Tour Berlin, Leipzig, Dresden Roland Weigelt

DotNet Cologne 2015 - Windows 10 AppDev, Teil3: Schönes für Entwickler - (Daniel Meixner)

BASTA C# Workshop - software-architects.com · Agenda (German) Es ist soweit! Nach längerer Durststrecke ist Roslyn fertig, und für C#-Entwickler gibt es jede Menge Neuigkeiten.

Windows 8 für .net Entwickler

DWX 2018 Onlineflyer 210618 - Developer Week€¦ · Event-Sourcing vs CRUD Golo Roden Kuck mal, Node.js! instieg für .NET Entwickler ... Applications Raum Hongkong Python Raum Oslo

ORIGINALS BY OKE BY OKE / OVERVIEW PARTS FOR AUTOMOTIVE INTERIOR. Ein Nachschlagewerk für alle Entwickler, Konstrukteure und Designer von Autositzen. Unser neuer Katalog ORIGINALS

Software Engineering für Softwaretechniker (SEfST) · PDF fileFSP = E / T = 15,20 EM / 7,03 Monate = 2,16 Entwickler ... Early Design Model ... COCOMO II arbeitet mit Source Instructions:

Original patternposter entwickler

Virtual Reality: Chancen für Entwickler und Kunden · Virtual Reality Timeline Stereo Viewer 1838 Head Mounted Display 1960 1939 View Master 1987 Virtual Reality is born Nintendo

Das Event 2016 für .NET-, Web- & Mobile-Entwickler · Java Script, The Web, Mobile and the Rise of the New Virtual Machines. href div} { if string 01000100 ... bis Projektleiter:

Frontend Performance - Web Entwickler Forum

OpenSource im HealthCare · 2019-06-05 · Guacamole Solution –HTML5 Access Gateway • DevOps Team benötigt Ressourcen für aussenstehende Entwickler • Aufzeichnung von Zugriffen

Graphical User Interfaces Unterlagen für den Workshop ...Wie alles bei Apple unterliegt auch die GUI-Gestaltung bei der Entwicklung der Apps klaren Standards: Entwickler haben je

DevOps Chancen für Entwickler, Administratoren & Entscheider · DevOps – Chancen für Entwickler, Administratoren & Entscheider Sebastian Klenk Technical Evangelist, Microsoft

OpenShift 3 für Java Entwickler - Puzzle · Maven / Artefaktrepository Maven Version Mechanismus für Continuous Delivery nicht geeignet Jeder Commit ist ein potentieller Release

HTML5 für Entwickler: Part 1 und 2, 2013

API-Design für Java-Entwickler - jug-da.de · Kai Spichale, API-Design Demnächst im Handel J § Java-APIs § RESTful HTTP, Web-APIs § Messaging § Skalierbarkeit § API-Management

Windows Vista für Entwickler Oliver Scheer & Dirk Primbs Developer Evangelists Microsoft Deutschland GmbH.

Entwickler Magazin 2.15 23. bis 26. März 2015 BIS 26 ......Die SOLID-Prinzipien sind be-lastbare Leitlinien für ein gutes objektorientiertes Design. Christian Buschmann, Diplom Wirtschaftsinformatiker