markup, noun. A markup language is a modern                                        system for annotating a document in a w...
Markus Greve                                     KOCHAN & PARTNER                                     BRAND DESIGN DEVELOP...
Organisatorisches28.02. Einführung       Hidden Gems       Part 1: Markup07.03. Part 2: CSS14.03. Part 3: Javascript21.03....
Hack-A-ThonThemenvorstellung, Gruppenbildung ca. 15minGruppen von 2 – 3 Personen, d.h. 4 – 5 GruppenHacking ca. 120minStan...
5   Kochan & Partner Brand Design Development
Was ist HTML5 und was nicht...Quelle: Peter Kröner, http://html5-buch.deCreative Commons Namensnennung 3.0 Deutschland-Liz...
Was ist HTML5?HTML 4.01XHTML 1W3C, WHATGCNicht-Standard wird Standard7                              Kochan & Partner Brand...
Was ist HTML5?                                         Offline &                          Realtime &                       ...
Unterstützung9               Kochan & Partner Brand Design Development
Can I Use?                                  Suche                                  Volle/teilweise                        ...
HTML5 & CSS3, findmebyIP                                                CSS3 Properties                                    ...
Strategie            Graceful degredation        Progressive enhancement12                           Kochan & Partner Bran...
Hilfsmittel              Polyfills13                       Kochan & Partner Brand Design Development
IE–Quickfix (1)  window.document.createElement(section);14                                            Kochan & Partner Bran...
IE–Quickfix (2)  abbr article aside audio bdi canvas data datalist details  figcaption figure footer header hgroup menu mar...
Standard Stylesheet Hack  command, datalist, source    { display: none; }  article, aside, figcaption, figure, footer, hea...
normalize.cssA modern, HTML5-ready alternative to CSS resetsused by Twitter Bootstrap, HTML5 Boilerplate andmany more.Quel...
ModernizrThe All-In-One Entirely-Not-Alphabetical No-BullshitGuide to HTML5 Fallbacks                                     ...
–prefix–free–prefix–free lets you use only unprefixed CSSproperties everywhere. It works behind the scenes,adding the current...
»Hidden Gems«20            Kochan & Partner Brand Design Development
Standard-Typen für script und styleStandard-Wert für das script-Tag         type=“text/javascript“ language=“javascript“St...
Skript-Ausführungsverhalten mit defer, asyncBeispiel  <script defer>      // code that runs after DOM finished loading    ...
a, area und link (1)Vereinheitlichung von a, area und linkUmschließungWiederbelebung target, optionales href-AttributTypis...
a, area und link (2)Umfangreiches Set an Schlüsselworten für rel:Navigation, Strukturierung             index, first, last...
FokusAuto-Fokus erlaubt für input, select, textarea und buttonStandardisierung der Fokus-ErmittlungAuto-Fokus  <input type...
Einbindung svg und MathML (1)  <!DOCTYPE html>                       <!DOCTYPE html>  ...                                 ...
Einbindung svg und MathML (2)Screenshots: Safari 6/Mac OS X27                               Kochan & Partner Brand Design ...
WYSIWYG und RechtschreibhilfeMögliche Werte für contenteditable und spellcheck:true, false, inheritBeispiele  <div id="myE...
Standardisierung getElementsByClassName()API  document.getElementsByClassName()  element.getElementsByClassName()Beispiele...
HTML-ManipulationAPI  element.innerHTML  element.outerHTML  element.insertAdjacentHTML(<position>, <html>)                ...
Class List APIAPI  element.classList.length                   .add()                   .contains()                   .item...
Query-Selector APIAPI  document.querySelector(<CSS Selector>);                            // first match  document.querySe...
Frei definierbare Attribute: data-*Attribute                         data-*API                               element.datase...
History APIAPI  history.length         .back()         .forward()         .go(<delta>)         .state         .pushState(<...
Zusammenfassung: MarkupStandard-Type für script und styleSkript-Ausführungsverhalten mit defer, asyncFokus-Behandlung mit ...
Zusammenfassung: JavascriptHTML-Manipulation mittels innerHTML, outerHTML, insertAdjacentHTMLStandardisierung getElementsB...
Part 1     Markup37            Kochan & Partner Brand Design Development
SemantikFormulareVideo & AudioApplication Cache38                  Kochan & Partner Brand Design Development
SemantikFormulareVideo & AudioApplication Cache39                  Kochan & Partner Brand Design Development
Grundgerüst  <!DOCTYPE html>  <html>    <head>      <meta charset=“utf-8“/>      <title>Hello world</title>    </head>    ...
DOCTYPE  <!DOCTYPE html>  <html>    <head>      <meta charset=“utf-8“/>      <title>Hello world</title>    </head>    <bod...
Auslassung  <!DOCTYPE html>  <html>    <head>      <meta charset=“utf-8“/>      <title>Hello world</title>    </head>    <...
Well-formed oder nicht? Egal!  <!DOCTYPE html>  <html>    <head>      <meta charset=“utf-8“ >      <title>Hello world</tit...
Neue ElementeKopf- und Fußbereiche       header, footerSeitenabschnitte            sectionArtikel                     arti...
Neue Elemente (2)Uhrzeit                               timeMenü                                  menuButton/Checkbox/Radio...
Kopf- und Fußbereich: header, footerKopfbereich z.B. für Logo, NavigationsbereichBeide Elemente pro Seite und pro Sektion ...
Artikel und Sinnabschnitte: article und section  <body>     <article>     ...     <article>                               ...
Artikel und Sinnabschnitte: article und section  <body>     <article>     ...     <article>                               ...
Navigationsbereiche: navKennzeichnung der Hauptnavigationsbereiche als navNebennavigationen außerhalb, z.B. Meta-Navigatio...
Begleitende Informationen: aside  <body>     <article>    <aside>                   Verwandte      <section>    Themen    ...
Abbildungen: figure und figcaption                                        <body>                                         <...
Zeitangaben: timeMaschinenlesbare Kodierung von Zeitangaben des proleptischenGregorianischen KalendersDatumsangabe, Uhrzei...
Markierung: markHervorhebung von Text ohne inhaltliche BetonungNutzbar insbesondere (ausschließlich?) für Suchergebnisse (...
Fortschrittsanzeige: progressDarstellung Betriebssystem-spezifischMaximum (max) und aktueller Status (value) optional via n...
Skala: meterDarstellung Betriebssystem-spezifischGrenzen (min, max) und aktuellem Wert (value) optional via numerischem Wer...
Outline-Algorithmus (1)Beibehaltung des 6-stufiges Überschriften-Modell h1 bis h6Hierarchie jedoch pro SektionSektionen defi...
Outline-Algorithmus (2)Beispiel  <h1>Agenda</h1>                   1. Agenda  <section>                           1.1 Begr...
Umdeutung/Änderung bestehender ElementeHervorhebung                           em, strongAbkürzung und Akronym             ...
Entfernte ElementeFrames                                                                 frameset, frame, noframes        ...
A     R     I     A60       Kochan & Partner Brand Design Development
Accesible     Rich     Internet     Application61            Kochan & Partner Brand Design Development
WAI-ARIAImplizite RollenDefinierte ÜberschreibbarkeitExplizite Attribute: Rollen, Beschriftungen, Zustände, ...62          ...
Implizite Rollen und Überschreibung Element   Default role   Überschreibbar mit article   article        document, applica...
Explizite Rollenzuweisung  <ul role="tree"      aria-labelledby="Credits">    <li role="treeitem" aria-expanded="false">  ...
MicrodataRDFamicroformats.orgHTML5-Microdata: vCard, vEvent, workAttribute                              itemscope         ...
Microdata: Google Rich SnippetsQuelle: http://support.google.com/webmasters/bin/answer.py?hl=de&answer=9917066            ...
Microdata: Google Rich Snippets (2)Quelle: http://www.google.com/webmasters/tools/richsnippet67                           ...
Zusammenfassung: SemantikSyntax: doctype, well formed, AuslassungNeue ElementeUmdeutung/Änderung bestehender ElementeEntfe...
SemantikFormulareVideo & AudioApplication Cache69                  Kochan & Partner Brand Design Development
Neue Typen für input (1)Textfeld                   textSuchfeld                   searchTelefonnummer              telepho...
Neue Typen für input (2)Datum- und Zeit-Angaben               datetimeDatum                                 dateMonat     ...
Typ number, rangeEingabefeld oder Regler für Fließkomma-Zahlenoptional: Grenzen (min, max) und Schrittweite (step)Beispiel...
Typ searchEingabefeld für SuchenDarstellung nach Art des BetriebssystemsBeispiel  <input type="search" placeholder="Suche"...
Typ Farbwahl / Colorpicker colorLeider noch kaum implementiertBeispiel  <input type="color" />                            ...
Typ für Datum- und ZeitangabenValidierung, optional mit Beschränkung min und maxBeispiele  <input    type="datetime" />  <...
Neue ElementeErzeugung von Schlüsseln   keygenObjekt                     objectAusgabebereich             outputAuto-Vervo...
Auto-Vervollständigung: datalistBeispiel  <input list="albums" />  <datalist   id="albums">    <option   value="Queen" /> ...
Neue AttributeReferenz auf zugehöriges Formular       formSteuerung Auto-Vervollständigung        autocompleteReferenz auf...
Steuerung Button-VerhaltenBeispiel  <form action="standard.php" method="post">    <button type="submit">Absenden</button> ...
ValidierungValidierung auf Ebene Element, Feldgruppe oder FormularKeine Validierung für hidden, submit, image, reset und o...
Validation API                                  MemberBoolscher Wert                       element.willValidateLokalisiert...
Browser     Unterstützung?82               Kochan & Partner Brand Design Development
Mac OS X83         Kochan & Partner Brand Design Development
Windows 884          Kochan & Partner Brand Design Development
iOS (1)85        Kochan & Partner Brand Design Development
iOS (2)86        Kochan & Partner Brand Design Development
Windows Phone 887                Kochan & Partner Brand Design Development
Zusammenfassung: FormulareNeue Typen für inputNeue Elemente und AttributeValidierung und Validation APIBrowser-Unterstützu...
SemantikFormulareVideo & AudioApplication Cache89                  Kochan & Partner Brand Design Development
Audio- und Video-EinbindungSteuerelemente an/abschaltbar mit controls (»Headless«)Alternativer Inhalt innerhalb des Elemen...
Audio-AttributeBeispiel                                Quellenangabe: src,  <audio                                hier mit...
Video-AttributeBeispiel                                 Quellenangabe: src  <video      src="video.ogg"            Steuere...
Multiple Quellen: CodecsImplizite Ermittlung via Mime-Type  <video>      <source src="video.ogg" />      <source src="vide...
Multiple Quellen: DevicesMedia-spezifisch  <video>      <source src="small.ogg" media="handheld" />      <source src="high-...
Audio- und Video API: MemberLautstärke (0 – 1)                   element.volumePausiert (true, false)               elemen...
Audio- und Video API: TimeRanges                                    Member(Bereits) Durchsuchbarer Zeitraum      element.s...
Audio- und Video API: MethodenAbspielen                         element.play()Pausieren                         element.pa...
Eventsloadstart           Der Ladevorgang wurde begonnenloadedmetadata      Die Meta-Daten der Datei wurden geladencanplay...
Fehlerbehandlung (1)                         element.errornull                            Kein Fehler1 MEDIA_ERR_ABORTED  ...
Fehlerbehandlung (2)                      element.readyState0 HAVE_NOTHING                 Noch keine Daten vorhanden1 HAV...
And The Oscar Goes To...                Firefox   Safari   Chrome    Opera              IE                IE              ...
Zusammenfassung: Audio- und VideoEinbindungAudio- und Video-AttributeMultiple QuellenAudio- und Video API: Member, Methode...
SemantikFormulareVideo & AudioApplication Cache103                 Kochan & Partner Brand Design Development
Überblick Offline-TechnikenApplication CacheDOM StorageWeb SQLIndexedDBUser DataOn-/Offline-Events und -Status-Abfrage104   ...
HTML-Einbindungindex.html  <html    manifest="cache.manifest">      Referenzierung der Manifest-    <head>                ...
Aufbau Cache Manifest (1)cache.manifest  CACHE MANIFEST                  Einleitung der zu cachenden Dateien  # Comment yo...
Aufbau Cache Manifest (2)cache.manifest  CACHE MANIFEST  # Comment your lines with "#"  # Cache these  index.html  img/ass...
Aufbau Cache Manifest (3)cache.manifest  CACHE MANIFEST  # Comment your lines with "#"  # Cache these  index.html  img/ass...
Eventschecking      Manifest wird erstmalig geladennoupdate      Keine Veränderung des Manifestsdownloading   Manifest und...
Zusammenfassung: Application CacheHTML-Einbindung, Mime-TypeAufbau Cache Manifest: CACHE MANIFEST, NETWORK, FALLBACKJavasc...
Part 2       CSS111          Kochan & Partner Brand Design Development
SelektorenTextflussTransformationenTransitionen, Animationen112                         Kochan & Partner Brand Design Devel...
Selektoren CSS2.1Pseudo-Klassen:first-child                    Genau das erste Kind:last-child                     Genau d...
Selektoren CSS2.1: Demo114                       Kochan & Partner Brand Design Development
Selektoren CSS3 (1)Pseudo-Klassen:root                  Das root-Element des Dokuments, body:nth-child(n)          Das n-t...
Selektoren CSS3 (2)Pseudo-Elemente:first-line                     Die erste Zeile des Textes:first-letter                 ...
Selektoren CSS3: Demo117                     Kochan & Partner Brand Design Development
Selektoren für WebForms 2.0Pseudo-Elemente:default          Default-submit Button des Formulars:indeterminate    Unbestimm...
Selektoren für WebForms 2.0: Demo119                                 Kochan & Partner Brand Design Development
SelektorenTextflussTransformationenTransitionen, Animationen120                         Kochan & Partner Brand Design Devel...
TextflussEingebundene Block-Darstellung display: inline-blockMehrspaltiger Textfluss column-count, column-rule, column-gapTe...
Textfluss: Demo122              Kochan & Partner Brand Design Development
SelektorenTextflussTransformationenTransitionen, Animationen123                         Kochan & Partner Brand Design Devel...
TransformationenKoordinatensystem & PerspektiveHardware-BeschleunigungKombinierbare Transformationen  • Rotation  • Skalie...
Transformationen: Demo (1)125                          Kochan & Partner Brand Design Development
Transformationen: Demo (2)126                          Kochan & Partner Brand Design Development
Transformationen: Demo 2D127                         Kochan & Partner Brand Design Development
SelektorenTextflussTransformationenTransitionen, Animationen128                         Kochan & Partner Brand Design Devel...
Transitions: Übergänge zwischen Property-WertenProperties all, none, <properties>DauerTiming-Funktion linear, ease*, cubic...
Transitions: BeispieleVollständige Notation  transition-property: width;  transition-duration: 2s;  transition-timing-func...
Transitions: Demo131                 Kochan & Partner Brand Design Development
AnimationenKeyframe-Defintionen Start/Ende from, to oder Prozentwert 0 – 100%Animations-Property  • Dauer  • Anzahl Wiederh...
Animationen: Demo133                 Kochan & Partner Brand Design Development
Zusammenfassung: CSSSelektoren CSS 2.1, CSS 3Textfluss: Blocks, Mehrspaltigkeit, TextkürzungTransformationen 2D, 3DÜbergäng...
Part 3      Javascript135            Kochan & Partner Brand Design Development
Was ist HTML5?                                         Offline &                          Realtime &                       ...
Was ist HTML5?                                         Offline &                          Realtime &                       ...
Was ist HTML5?                                         Offline &                          Realtime &                       ...
CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API139                  ...
3D, Graphics and Effects140                       Kochan & Partner Brand Design Development
CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API141                  ...
CanvasUmfangreiche Browser-Unterstützung (IE ab 9)Markup mit Fallback  <canvas id="c" width="600" height="220">Fallback</c...
Koordinatensystem & RasterQuelle: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Applying_styles_and_colors...
API: Setup und Zeichnen  // Basic setup  var canvas = document.getElementById(c);  var ctx    = canvas.getContext(2d);  //...
API: Setup und Zeichnen (2)  ctx.lineTo(x, y);  ctx.moveTo(x, y);  ctx.arc(x, y, radius, startAngle, endAngle, antiClockWi...
API: Grafiken  ctx.drawImage(HTMLimageObject, x, y);  ctx.drawImage(HTMLimageObject, x, y, width, height);  ctx.drawImage(H...
API: Füllung und Linien  // Füllangaben für Objektfüllung und -outline  ctx.fillStyle   = <Füllangabe>;  ctx.strokeStyle =...
API: Verläufe und Muster  var linGradient = ctx.createLinearGradient(x1, y1, x2, y2);  linGradient.addColorStop(pos, color...
Demo149    Kochan & Partner Brand Design Development
Device150            Kochan & Partner Brand Design Development
CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API151                  ...
GeolocationAbfrage der geografischen PositionErlaubnis durch den BenutzerEinmal-Abfrage oder kontinuierliche ÜberwachungQue...
API                          navigator.geolocation                                     getCurrentPosition(Position abfrage...
Optionen                              [PositionOptions]Hohe Genauigkeit einschalten             enableHighAccuracy true / ...
Fehlerbehandlung                             error.code0                                  Kein Fehler1 PERMISSION_DENIED  ...
Demo156    Kochan & Partner Brand Design Development
CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API157                  ...
Device OrientationAbfrage der Orientierung im dreidimensionalen RaumKonkurrierende Spezifikationen: DeviceOrientation oder ...
Z                              Y                                   X159       Kochan & Partner Brand Design Development
Z                                  Y          α                                       X160           Kochan & Partner Bran...
Z                                  Y          β                                       X161           Kochan & Partner Bran...
Z                                  Y          γ                                       X162           Kochan & Partner Bran...
API                       window.DeviceOrientationEventNeigung Links/Rechts        –90° ... +90°   deviceorientation.gamma...
Demo164    Kochan & Partner Brand Design Development
Realtime & Communication165                      Kochan & Partner Brand Design Development
CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API166                  ...
Notifications(Visuelle) Benachrichtigung des Users außerhalb des BrowserfenstersAusprägungen: Notification oder HtmlNotific...
API                        window.webkitNotificationsBerechtigung überprüfen              checkPermission()Berechtigung ei...
Demo169    Kochan & Partner Brand Design Development
CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API170                  ...
WebSocketBidirektionale KommunikationReduktion des HTTP-OverheadsTechnische Basis: HTTP Upgradesystem, ggf. Probleme bei P...
Server-ImplementierungStandard LAMP tendenziell ungeeignet, da anderes Nutzungsmuster:  • kein starrer Anfrage/Antwort-Zyk...
APIKonstruktor                   new WebSocket(<url>)Nachricht vom Client senden   send(<message>)Verbindung beenden      ...
Demo174    Kochan & Partner Brand Design Development
Performance & Integration175                       Kochan & Partner Brand Design Development
CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API176                  ...
Web WorkerAsynchrone BerechnungAusgelagert in eigene ThreadsParallele Ausführung weiterer Skripte (»non blocking«)Kein Zug...
API                   [Worker]Konstruktor            new Worker(<js-file)Nachricht senden       postMessage(<text>)Worker ...
Genereller Ablaufindex.html                       worker.js  w = new worker(worker.js);  w.postMessage(cmd);            se...
Demo5 Millionen-maliges Aufsummieren einer Zufallszahl, die mit 100,1 multipliziert wurde.180                             ...
Offline & Storage181                  Kochan & Partner Brand Design Development
CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API182                  ...
Web StorageBezeichnet auch als DOM StorageSession (sessionStorage) oder Sessionübergreifend (localStorage)Key/Value-PaareZ...
API             window.localStorage | window.sessionStorageKey/Value-Paar setzen              setItem(<key>, <value>)Value...
Event storageevent.key                       Key des auslösenden Speicherzugriffsevent.oldValue                  Bisherige...
Demo       Zweites Fenster186                Kochan & Partner Brand Design Development
CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API187                  ...
Web SQL Eingestellt   zugunsten von Indexed DB!Verbreitung: Chrome, Safari, Opera, Mobile Safari, AndroidRelationale Daten...
Erläuterung zum Demo  var db;  function   storeDB() {}  function   deleteDB(what) {}  function   retrieveDB() {}  function...
Demo190    Kochan & Partner Brand Design Development
CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API191                  ...
Indexed DB Experimentell!Verbreitung: Chrome, Firefox, IE10, kein Mobil-BrowserVollständiger Name: Indexed Database APINoS...
Genereller Ablauf, Terminologie(1) Datenbank öffnen(2) Wenn nicht vorhanden: Speicherbereich objectStore (≈ Tabellen in   ...
Erläuterung zum Demo  var db;  function storeDB() {}  function deleteDB(what) {}  function retrieveDB() {}  window.onload ...
Demo195    Kochan & Partner Brand Design Development
CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API196                  ...
File APIwindow.filewindow.FileReaderwindow.FileListwindow.Blob window.requestFileSystem   derzeit nur Chrome window.fileEntr...
File Reader APIKonstruktor                new FileReader()Abbruch des Ladevorgangs   abort()Datei laden                rea...
Demo: FileList199              Kochan & Partner Brand Design Development
Demo: FileReader200                Kochan & Partner Brand Design Development
Geschafft.CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API201        ...
Vielen Dank!   Kochan & Partner               Brand               Design               Development               © 2013 – ...
Upcoming SlideShare
Loading in...5
×

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

914

Published on

Und hier der dritte und abschließende Teil zum Thema Javascript mit Demos zu den API: Canvas, Geolocation, Device Orientation, Notifications, WebSockets, Worker, Storage, Web SQL, Indexed DB und File API.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
914
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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 —WikipediaHTML5 für Entwickler Kochan & Partner Brand DesignMarkus Greve DevelopmentFür den Abendkurs der TypographischenGesellschaft München, 2013
  2. 2. Markus Greve KOCHAN & PARTNER BRAND DESIGN DEVELOPMENT T +49 89 17860–150 E markus.greve@kochan.de  @mrmontezumaDemos, Links, Ressourcen  http://www.kochan.de/html5Slides  http://de.slideshare.net/markusgreve/2 Kochan & Partner Brand Design Development
  3. 3. Organisatorisches28.02. Einführung Hidden Gems Part 1: Markup07.03. Part 2: CSS14.03. Part 3: Javascript21.03. Hack-a-thon: Thema offen!3 Kochan & Partner Brand Design Development
  4. 4. Hack-A-ThonThemenvorstellung, Gruppenbildung ca. 15minGruppen von 2 – 3 Personen, d.h. 4 – 5 GruppenHacking ca. 120minStandup 5min pro Gruppe: Vorstellung4 Kochan & Partner Brand Design Development
  5. 5. 5 Kochan & Partner Brand Design Development
  6. 6. Was ist HTML5 und was nicht...Quelle: Peter Kröner, http://html5-buch.deCreative Commons Namensnennung 3.0 Deutschland-Lizenz6 Kochan & Partner Brand Design Development
  7. 7. Was ist HTML5?HTML 4.01XHTML 1W3C, WHATGCNicht-Standard wird Standard7 Kochan & Partner Brand Design Development
  8. 8. Was ist HTML5? Offline & Realtime & Semantic Device Communication Storage 3D, Graphics Performance & Multimedia CSS3 & Effects IntegrationQuelle: http://www.w3.org/html/logo/8 Kochan & Partner Brand Design Development
  9. 9. Unterstützung9 Kochan & Partner Brand Design Development
  10. 10. Can I Use? Suche Volle/teilweise Unterstützung Detaillierte Versionsinfo Weiterführende Informationen, ReferenzQuelle: http://caniuse.com10 Kochan & Partner Brand Design Development
  11. 11. HTML5 & CSS3, findmebyIP CSS3 Properties CSS3 Selectors Web Applications Graphics & embedded Content Audio codecs Video codecs WebForms 2.0Quelle: http://www.findmebyip.com/litmus/11 Kochan & Partner Brand Design Development
  12. 12. Strategie Graceful degredation Progressive enhancement12 Kochan & Partner Brand Design Development
  13. 13. Hilfsmittel Polyfills13 Kochan & Partner Brand Design Development
  14. 14. IE–Quickfix (1) window.document.createElement(section);14 Kochan & Partner Brand Design Development
  15. 15. IE–Quickfix (2) 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)});Sinngemäße Quelle:: http://code.google.com/p/html5shiv/15 Kochan & Partner Brand Design Development
  16. 16. 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/16 Kochan & Partner Brand Design Development
  17. 17. normalize.cssA modern, HTML5-ready alternative to CSS resetsused by Twitter Bootstrap, HTML5 Boilerplate andmany more.Quelle: http://necolas.github.com/normalize.css/17 Kochan & Partner Brand Design Development
  18. 18. ModernizrThe All-In-One Entirely-Not-Alphabetical No-BullshitGuide to HTML5 Fallbacks —ModernizrSVG Accessiblity / ARIACanvas Web SocketsWeb Storage Geo LocationVideo & Audio Application CacheIndexedDB, WebSQL Browser State ManagementWebForms ....Quelle: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills18 Kochan & Partner Brand Design Development
  19. 19. –prefix–free–prefix–free lets you use only unprefixed CSSproperties everywhere. It works behind the scenes,adding the current browser’s prefix to any CSScode, only when it’s needed. —Lea VerouQuelle: http://leaverou.github.com/prefixfree/19 Kochan & Partner Brand Design Development
  20. 20. »Hidden Gems«20 Kochan & Partner Brand Design Development
  21. 21. Standard-Typen für script und styleStandard-Wert für das script-Tag type=“text/javascript“ language=“javascript“Standard-Wert für das style-Tag type=“text/javascript“21 Kochan & Partner Brand Design Development
  22. 22. Skript-Ausführungsverhalten mit defer, asyncBeispiel <script defer> // code that runs after DOM finished loading // ... </script> <script async> // code that runs in the background // not blocking other scripts // ... </script>22 Kochan & Partner Brand Design Development
  23. 23. a, area und link (1)Vereinheitlichung von a, area und linkUmschließungWiederbelebung target, optionales href-AttributTypisierung mittels relBeispiel <a target=“_blank“>Link ohne Ziel und Verstand</a> <a href=“http://www.google.de“ rel=“prefetch“> Descriptiver Rel-Einsatz </a>23 Kochan & Partner Brand Design Development
  24. 24. a, area und link (2)Umfangreiches Set an Schlüsselworten für rel:Navigation, Strukturierung index, first, last, prev, next, upInhaltlich author, alternate, archives, bookmark, external, help, license, pingback, search, tagBeeinflussung Browser-Verhalten sidebar, prefetch, nofollow, noreferrerTypisierend icon, stylesheet24 Kochan & Partner Brand Design Development
  25. 25. FokusAuto-Fokus erlaubt für input, select, textarea und buttonStandardisierung der Fokus-ErmittlungAuto-Fokus <input type="text" name="search" autofocus />Fokus-Ermittlung if (document.hasFocus()) { var element = document.activeElement(); }25 Kochan & Partner Brand Design Development
  26. 26. Einbindung svg und MathML (1) <!DOCTYPE html> <!DOCTYPE html> ... ... <body> <body> <svg width="300" height="150"> <math> <rect <mrow> width="120" height="120" <mi>x</mi> fill="green" <mo>=</mo> stroke="red" <mfrac> stroke-width="10" /> <mrow> <circle <mo form="prefix"> cx="120" cy="65" r="40" &PlusMinus;</mo> fill="red" <mi>b</mi> stroke="green" <mo>&PlusMinus;</mo> stroke-width="5" /> <msqrt> </svg> <msup> </body> <mi>b</mi> ... <mn>2</mn> </msup> <mo>-</mo> <mn>4</mn> ...26 Kochan & Partner Brand Design Development
  27. 27. Einbindung svg und MathML (2)Screenshots: Safari 6/Mac OS X27 Kochan & Partner Brand Design Development
  28. 28. WYSIWYG und RechtschreibhilfeMögliche Werte für contenteditable und spellcheck:true, false, inheritBeispiele <div id="myEditor" contenteditable="true" spellcheck="false">...</div> element.isContentEditable document.designMode = on;28 Kochan & Partner Brand Design Development
  29. 29. Standardisierung getElementsByClassName()API document.getElementsByClassName() element.getElementsByClassName()Beispiele var allMyActiveDivs = document.getElementsByClassName(active); var myOtherLis = myUl.getElementsByClassName(inactive);29 Kochan & Partner Brand Design Development
  30. 30. HTML-ManipulationAPI element.innerHTML element.outerHTML element.insertAdjacentHTML(<position>, <html>) <position> := beforebegin afterbegin beforeend afterendBeispiele myUl.innerHTML = <li>New Bullet</li>; myUl.outerHTML = <ul><li>New Bullet</li></ul>; myLi.insertAdjacentHTML(beforebegin, <li>Vorgänger</li>);30 Kochan & Partner Brand Design Development
  31. 31. Class List APIAPI element.classList.length .add() .contains() .item() .remove() .toggle()Beispiele 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!)31 Kochan & Partner Brand Design Development
  32. 32. Query-Selector APIAPI document.querySelector(<CSS Selector>); // first match document.querySelectorAll(<CSS Selector>); // all matchesBeispiel var oddRows = document.querySelectorAll(#table > tr:nth-child(odd));Randnotiz: w3C Standard seit vergangenem Freitag, 22. Februar 201332 Kochan & Partner Brand Design Development
  33. 33. Frei definierbare Attribute: data-*Attribute data-*API element.datasetBeispiel <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"33 Kochan & Partner Brand Design Development
  34. 34. History APIAPI history.length .back() .forward() .go(<delta>) .state .pushState(<stateObj>, <title>, <url>) .replaceState() window.onpopstate = function(e) { // code to be executed after browser-back button // ... };34 Kochan & Partner Brand Design Development
  35. 35. Zusammenfassung: MarkupStandard-Type für script und styleSkript-Ausführungsverhalten mit defer, asyncFokus-Behandlung mit autofocus, hasFocus() und activeElement()a, area und link: Vereinheitlichung, Umschließung, Typisierung mit relSVG und MathMLWYSIWYG und Rechtschreibhilfe35 Kochan & Partner Brand Design Development
  36. 36. Zusammenfassung: JavascriptHTML-Manipulation mittels innerHTML, outerHTML, insertAdjacentHTMLStandardisierung getElementsByClassName()ClassList APIQuery Selector APIFrei definierbare Attribute mit data-*History API36 Kochan & Partner Brand Design Development
  37. 37. Part 1 Markup37 Kochan & Partner Brand Design Development
  38. 38. SemantikFormulareVideo & AudioApplication Cache38 Kochan & Partner Brand Design Development
  39. 39. SemantikFormulareVideo & AudioApplication Cache39 Kochan & Partner Brand Design Development
  40. 40. 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>40 Kochan & Partner Brand Design Development
  41. 41. DOCTYPE <!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>41 Kochan & Partner Brand Design Development
  42. 42. Auslassung <!DOCTYPE html> <html> <head> <meta charset=“utf-8“/> <title>Hello world</title> </head> <!-- --> <h1>Hello world</h1> <p>Starting with HTML5</p> <!-- --> </html>42 Kochan & Partner Brand Design Development
  43. 43. Well-formed oder nicht? Egal! <!DOCTYPE html> <html> <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 dont have to like this</STRONG> <eM>I dont</Em> </body> <html>43 Kochan & Partner Brand Design Development
  44. 44. Neue ElementeKopf- und Fußbereiche header, footerSeitenabschnitte sectionArtikel articleNavigationsbereiche navBegleitende Informationen asideAbbildungen figure, figcaptionMarkierung mark44 Kochan & Partner Brand Design Development
  45. 45. Neue Elemente (2)Uhrzeit timeMenü menuButton/Checkbox/Radiobox commandFortschrittsanzeige progressSkala meterDetailansicht detailsZusammenfassung einer Detailansicht summary45 Kochan & Partner Brand Design Development
  46. 46. Kopf- und Fußbereich: header, footerKopfbereich z.B. für Logo, NavigationsbereichBeide Elemente pro Seite und pro Sektion definierbar <header> <a href="index.html" rel="index">Huber GmbH</a> <nav>...</nav> </header> ... <footer> &copy; 2013 <a href="imprint.html" rel="author">Huber GmbH</a> <a href="license.html" rel="license">Nutzungsbedingungen</a> </footer>46 Kochan & Partner Brand Design Development
  47. 47. Artikel und Sinnabschnitte: article und section <body> <article> ... <article> Zusammenfassung inhaltlich <section class="intro"> abgeschlossener Bereiche durch article Inhaltliche Strukturierung der Seite <section class="copy"> bzw. des Artikels durch section <article> ...47 Kochan & Partner Brand Design Development
  48. 48. Artikel und Sinnabschnitte: article und section <body> <article> ... <article> Zusammenfassung inhaltlich <section class="intro"> abgeschlossener Bereiche durch article Inhaltliche Strukturierung der Seite <section class="copy"> bzw. des Artikels durch section <article> ...48 Kochan & Partner Brand Design Development
  49. 49. Navigationsbereiche: navKennzeichnung der Hauptnavigationsbereiche als navNebennavigationen 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> ... <a href="imprint.html">Impressum</a>49 Kochan & Partner Brand Design Development
  50. 50. Begleitende Informationen: aside <body> <article> <aside> Verwandte <section> Themen Ganz Innerhalb eines articles: andere sekundärer Inhalt in Bezug Themen <section> auf den Artikel ... </aside> Außerhalb eines articles: sekundärer Inhalt in Bezug <aside> auf die Website als Ganzes Mehr zu diesem Thema </aside>50 Kochan & Partner Brand Design Development
  51. 51. Abbildungen: figure und figcaption <body> <article>Semantische Einheit für eine <section>Abbildung figure, z.B. ein Bild, eineTabelle oder ein Diagramm, mitoptionaleer Abbildungsbeschriftung <figure>figcaption. <img src=""... /> <svg... />Reihenfolge der Darstellung kann <figcaption>ohne Verständnisverlust verändert Quelle: BMW AG.werden. </figcaption> </figure> <section>51 Kochan & Partner Brand Design Development
  52. 52. Zeitangaben: timeMaschinenlesbare Kodierung von Zeitangaben des proleptischenGregorianischen KalendersDatumsangabe, Uhrzeit oder eine Kombination aus Datum und Uhrzeitoptional: Kennzeichnung als VeröffentlichungszeitangabeBeispiele 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>52 Kochan & Partner Brand Design Development
  53. 53. Markierung: markHervorhebung von Text ohne inhaltliche BetonungNutzbar insbesondere (ausschließlich?) für Suchergebnisse (SERP)Beispiel <h1>Ihre Suche nach <em>entertain</em>:</h1> <ul> <li>Let me <mark>entertain</mark> you: Queen, Jazz, 1978</li> <li>Thats <mark>Entertain</mark>ment: Band Waggon, 1953</li> </ul> Ihre Suche nach entertain: • Let me entertain you: Queen, Jazz, 1978 • Thats Entertainment: Band Waggon, 195353 Kochan & Partner Brand Design Development
  54. 54. Fortschrittsanzeige: progressDarstellung Betriebssystem-spezifischMaximum (max) und aktueller Status (value) optional via numerischem WertAktueller Fortschriftt via element.position (0.0 – 1.0, –1 bei unbekannt)Safari 6/Mac OS X Internet Explorer/Windows Phone 8 Firefox 10 /Windows Non-Aqua54 Kochan & Partner Brand Design Development
  55. 55. Skala: meterDarstellung Betriebssystem-spezifischGrenzen (min, max) und aktuellem Wert (value) optional via numerischem WertEinfärbung bei Erreichen von Schwellwerten (low, high, optimum) möglich Safari 6/Mac OS X55 Kochan & Partner Brand Design Development
  56. 56. Outline-Algorithmus (1)Beibehaltung des 6-stufiges Überschriften-Modell h1 bis h6Hierarchie jedoch pro SektionSektionen definiert durch section, nav, aside und article56 Kochan & Partner Brand Design Development
  57. 57. Outline-Algorithmus (2)Beispiel <h1>Agenda</h1> 1. Agenda <section> 1.1 Begrüßung <h1>Begrüßung</h1> 1.1.1 Schirmherr <h2>Schirmherr</h2> <h2>Sponsorenvertreter</h2> 1.1.2 Sponsorenvertreter <h1>Top 1: Gruppen</h1> 1.2 Top 1: Gruppen <h1>Top 2: Plenung</h1> 1.3 Top 2: Plenum </section> <h1>Anlagen</h1> 2. Anlagen57 Kochan & Partner Brand Design Development
  58. 58. Umdeutung/Änderung bestehender ElementeHervorhebung em, strongAbkürzung und Akronym abbrQuellcode codeAdresse addressGleichwertige Abhebung, Fachbegriffe b, iInhaltlicher Bruch hr»Kleingedrucktes« small58 Kochan & Partner Brand Design Development
  59. 59. Entfernte ElementeFrames frameset, frame, noframes dir, basefont, big, center,Präsentationselemente font, s, strike, tt, uAkronyme acronymApplets appletEinzeiliges Eingabefeld (?) isindexRandnotiz: HTML5 definiert, wie diese nicht spezifizierten Elemente dargestellt werden sollen... :-)59 Kochan & Partner Brand Design Development
  60. 60. A R I A60 Kochan & Partner Brand Design Development
  61. 61. Accesible Rich Internet Application61 Kochan & Partner Brand Design Development
  62. 62. WAI-ARIAImplizite RollenDefinierte ÜberschreibbarkeitExplizite Attribute: Rollen, Beschriftungen, Zustände, ...62 Kochan & Partner Brand Design Development
  63. 63. 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 application63 Kochan & Partner Brand Design Development
  64. 64. 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/64 Kochan & Partner Brand Design Development
  65. 65. MicrodataRDFamicroformats.orgHTML5-Microdata: vCard, vEvent, workAttribute itemscope itemprop itemrefAPI document.getItems() element.properties element.itemValue65 Kochan & Partner Brand Design Development
  66. 66. Microdata: Google Rich SnippetsQuelle: http://support.google.com/webmasters/bin/answer.py?hl=de&answer=9917066 Kochan & Partner Brand Design Development
  67. 67. Microdata: Google Rich Snippets (2)Quelle: http://www.google.com/webmasters/tools/richsnippet67 Kochan & Partner Brand Design Development
  68. 68. Zusammenfassung: SemantikSyntax: doctype, well formed, AuslassungNeue ElementeUmdeutung/Änderung bestehender ElementeEntfernte ElementeOutline-AlgorithmusWAI-ARIAMicrodata68 Kochan & Partner Brand Design Development
  69. 69. SemantikFormulareVideo & AudioApplication Cache69 Kochan & Partner Brand Design Development
  70. 70. Neue Typen für input (1)Textfeld textSuchfeld searchTelefonnummer telephoneURL* urlE-Mail-Adresse* emailNumerischer Wert* numberBereich* rangeFarbwahl / Color picker color* Eingebaute Validierung70 Kochan & Partner Brand Design Development
  71. 71. Neue Typen für input (2)Datum- und Zeit-Angaben datetimeDatum dateMonat monthWoche weekZeit timeDatum- und Zeit in lokaler Notation datetime-local71 Kochan & Partner Brand Design Development
  72. 72. Typ number, rangeEingabefeld oder Regler für Fließkomma-Zahlenoptional: Grenzen (min, max) und Schrittweite (step)Beispiele <input type="number" min="-10" max="87" step="1" /> <input type="range" min="-10" max="87" step="1" /> Safari 6/Mac OS X IE 10/WIndows 872 Kochan & Partner Brand Design Development
  73. 73. Typ searchEingabefeld für SuchenDarstellung nach Art des BetriebssystemsBeispiel <input type="search" placeholder="Suche" /> Safari 6/Mac OS X73 Kochan & Partner Brand Design Development
  74. 74. Typ Farbwahl / Colorpicker colorLeider noch kaum implementiertBeispiel <input type="color" /> Chrome 25/Mac OS X Opera 12/Mac OS X74 Kochan & Partner Brand Design Development
  75. 75. Typ für Datum- und ZeitangabenValidierung, optional mit Beschränkung min und maxBeispiele <input type="datetime" /> <input type="date" /> <input type="month" /> <input type="week" /> <input type="time" /> <input type="datetime-local" /> Chrome 25/Mac OS X75 Kochan & Partner Brand Design Development
  76. 76. Neue ElementeErzeugung von Schlüsseln keygenObjekt objectAusgabebereich outputAuto-Vervollständigung datalist76 Kochan & Partner Brand Design Development
  77. 77. Auto-Vervollständigung: datalistBeispiel <input list="albums" /> <datalist id="albums"> <option value="Queen" /> Chrome 25/Mac OS X <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" /> ...77 Kochan & Partner Brand Design Development
  78. 78. Neue AttributeReferenz auf zugehöriges Formular formSteuerung Auto-Vervollständigung autocompleteReferenz auf Vorschlagsliste listMehrfach-Feld (z.B. bei Datei-Upload) multiplePlatzhalter / Eingabehilfe placeholderCheckbox mit unbekanntem Zustand indeterminateSteuerung Button-Verhalten formaction, formenctype, formmethod, formnovalidate78 Kochan & Partner Brand Design Development
  79. 79. Steuerung Button-VerhaltenBeispiel <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> Absenden Anderswohin Ohne Prüfung Validierung Validierung keine Validierung Post Post Post standard.php alternate.php standard.php79 Kochan & Partner Brand Design Development
  80. 80. ValidierungValidierung auf Ebene Element, Feldgruppe oder FormularKeine Validierung für hidden, submit, image, reset und objectCSS Pseudo-Selektoren für Styling :in-range, :default, :requiredFehlermeldung bei Absenden des Formulars oder manuell via Javascript APIBeeinflussung durch Attribute novalidate, required und patternz.B. pattern="[0-9]{5}"80 Kochan & Partner Brand Design Development
  81. 81. Validation API MemberBoolscher Wert element.willValidateLokalisierte Fehlermeldung element.validationMessageDatenstruktur zur Fehleranalyse element.validity .valid .valueMissing .typeMismatch .patternMismatch .tooLong .rangeUnderflow .rangeOverflow .stepMismatch .customError MethodenValidierung auslösen element.checkValidity()Eigene Regel setzen element.setCustomValidity()81 Kochan & Partner Brand Design Development
  82. 82. Browser Unterstützung?82 Kochan & Partner Brand Design Development
  83. 83. Mac OS X83 Kochan & Partner Brand Design Development
  84. 84. Windows 884 Kochan & Partner Brand Design Development
  85. 85. iOS (1)85 Kochan & Partner Brand Design Development
  86. 86. iOS (2)86 Kochan & Partner Brand Design Development
  87. 87. Windows Phone 887 Kochan & Partner Brand Design Development
  88. 88. Zusammenfassung: FormulareNeue Typen für inputNeue Elemente und AttributeValidierung und Validation APIBrowser-Unterstützung88 Kochan & Partner Brand Design Development
  89. 89. SemantikFormulareVideo & AudioApplication Cache89 Kochan & Partner Brand Design Development
  90. 90. Audio- und Video-EinbindungSteuerelemente an/abschaltbar mit controls (»Headless«)Alternativer Inhalt innerhalb des ElementsUmfangreiche Javascript API zur SteuerungBeispiel <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>90 Kochan & Partner Brand Design Development
  91. 91. Audio-AttributeBeispiel Quellenangabe: src, <audio hier mit Framestart und -ende #t= src="audio.ogg#t=10,20" controls Steuerelemente: controls autoplay preload="auto" Automatisches abspielen: autoplay loop > Preload-Verhalten: ... none, metadata, auto </audio> Wiederholte Wiedergabe: loop91 Kochan & Partner Brand Design Development
  92. 92. Video-AttributeBeispiel Quellenangabe: src <video src="video.ogg" Steuerelemente: controls controls autoplay Automatisches abspielen: autoplay preload="auto" Preload-Verhalten: loop none, metadata, auto width="640" height="480" audio="muted" Wiederholte Wiedergabe: loop poster="videoframe.jpg" > Dimensionen: width und height ... </video> Audio-Steuerung: audio="muted" Thumbnail: poster92 Kochan & Partner Brand Design Development
  93. 93. Multiple Quellen: CodecsImplizite Ermittlung via Mime-Type <video> <source src="video.ogg" /> <source src="video.mp4" /> </video>Explizite Vorgabe <video> <source src="video.ogg" type="video/ogg; codecs=theora, vorbis" /> <source src="video.mp4" type="video/mp4" /> </video>93 Kochan & Partner Brand Design Development
  94. 94. Multiple Quellen: DevicesMedia-spezifisch <video> <source src="small.ogg" media="handheld" /> <source src="high-res.ogg" media="all" /> </video>94 Kochan & Partner Brand Design Development
  95. 95. Audio- und Video API: MemberLautstärke (0 – 1) element.volumePausiert (true, false) element.pausedTon ausgeblendet (true, false) element.mutedPosition auslesen und setzen element.currentTimeAktuelle Mediendatei element.currentSrcAbspieldauer (Streams: infinity) element.durationStartzeitpunkt element.startTimeNormale Abspielgeschwindigkeit (0 – 1) member.defaultPlaybackRateAbspielgeschwindigkeit (0 – 1) member.playbackRate95 Kochan & Partner Brand Design Development
  96. 96. Audio- und Video API: TimeRanges Member(Bereits) Durchsuchbarer Zeitraum element.seekableAbgespielter Zeitraum element.playedVorgelden (gepufferter) Zeitraum element.buffered [TimeRangeObject]Anzahl der definierten Zeiträume timerange.lengthStartzeitpunkt von Zeitraum n timerange.start(n)Endzeitpunkt von Zeitraum n timerange.end(n)96 Kochan & Partner Brand Design Development
  97. 97. Audio- und Video API: MethodenAbspielen element.play()Pausieren element.pause()Mediendatei laden element.load(<url>)Codec-Unterstützung abfragen element.canPlayType(<type>)Beispiel 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; }97 Kochan & Partner Brand Design Development
  98. 98. Eventsloadstart Der Ladevorgang wurde begonnenloadedmetadata Die Meta-Daten der Datei wurden geladencanplay Abspielen nun möglichcanplaythrough Abspielen nun ohne weiteres Buffering möglichplay Abspielen wurde gestartetended Das Medienelement hat sein Ende erreichtBeispiel document.getElementById(player).addEventListener(ended, function() { alert(Ende, aufwachen!); });98 Kochan & Partner Brand Design Development
  99. 99. Fehlerbehandlung (1) element.errornull Kein Fehler1 MEDIA_ERR_ABORTED Abbruch durch den Benutzer2 MEDIA_ERR_NETWORK Netzwerkfehler3 MEDIA_ERR_DECODE Fehler beim Dekodieren4 MEDIA_ERR_SRC_NOT_SUPPORTED Dateiformat/Codec nicht unterstützt element.networkState0 NETWORK_EMPTY Ladevorgang noch nicht begonnen1 NETWORK_IDLE Kein Element zu laden2 NETWORK_LOADING Ladevorgang3 NETWORK_LOADED Ladevorgang abgeschlossen4 NETWORK_NO_SOURCE Keine Mediendatei vorhanden99 Kochan & Partner Brand Design Development
  100. 100. Fehlerbehandlung (2) element.readyState0 HAVE_NOTHING Noch keine Daten vorhanden1 HAVE_METADATA Metadaten vorhanden (duration, ...)2 HAVE_CURRENT_DATA Erste Daten liegen vor, jedoch noch nicht ausreichend, um abzuspielen Daten für aktuelle Position und die3 HAVE_FUTURE_DATA nächstenSekunden liegen vor, abspielen kann starten Entweder komplett geladen oder4 HAVE_ENOUGH_DATA Abschätzung aufgrund aktueller Netzwerkperformance ok100 Kochan & Partner Brand Design Development
  101. 101. And The Oscar Goes To... Firefox Safari Chrome Opera IE IE 3.5+ 4+ 3+ 10.5+ 6–8 9Theora/Vorbis ü — ü ü — —H.264/AAC — ü ü — — üMP3 — ü ü — — üWAV ü ü ü ü — —WebM ü 4+ — ü ü 10.6+ — —101 Kochan & Partner Brand Design Development
  102. 102. Zusammenfassung: Audio- und VideoEinbindungAudio- und Video-AttributeMultiple QuellenAudio- und Video API: Member, Methoden und EventsFehlerbehandlung: error, networkState, readyStateCodecs102 Kochan & Partner Brand Design Development
  103. 103. SemantikFormulareVideo & AudioApplication Cache103 Kochan & Partner Brand Design Development
  104. 104. Überblick Offline-TechnikenApplication CacheDOM StorageWeb SQLIndexedDBUser DataOn-/Offline-Events und -Status-Abfrage104 Kochan & Partner Brand Design Development
  105. 105. HTML-Einbindungindex.html <html manifest="cache.manifest"> Referenzierung der Manifest- <head> Datei im HTML-Element <title>The Works offline... </head> Auslieferung der Datei mit dem ... Mime-Type: text/cache-manifest </html>105 Kochan & Partner Brand Design Development
  106. 106. Aufbau Cache Manifest (1)cache.manifest CACHE MANIFEST Einleitung der zu cachenden Dateien # Comment your lines with "#" mit CACHE MANIFEST Auflistung jeder zu cachender Datei # Cache these index.html Mehrere unterschiedliche img/assets/band.jpg Sektionen pro Cache-Datei möglich img/assets/instruments.jpg106 Kochan & Partner Brand Design Development
  107. 107. Aufbau Cache Manifest (2)cache.manifest CACHE MANIFEST # Comment your lines with "#" # Cache these index.html img/assets/band.jpg img/assets/instruments.jpg Festlegung von Inhalten, die nur NETWORK über eine Netzwerkverbindung only-online.html bezogen werden dürfen (= no cache) img/really-current-status.gif107 Kochan & Partner Brand Design Development
  108. 108. Aufbau Cache Manifest (3)cache.manifest 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 Alternativ-Inhalte zur Ausgabe bei / sorry-you-are-offline.html nicht erreichbaren Ressourcen des NETWORK-Abschnitts108 Kochan & Partner Brand Design Development
  109. 109. Eventschecking Manifest wird erstmalig geladennoupdate Keine Veränderung des Manifestsdownloading Manifest und Dateien werden initial heruntergeladenprogress Dateien werden heruntergeladencached Alle Dateien befinden sich im Cacheupdateready Alle Dateien wurden aktualisiert und befinden sich nun im Cacheobsolete Cache ist ungültig (z.B. 404) und wird gelöschterror Fehler oder Änderung während des Downloads109 Kochan & Partner Brand Design Development
  110. 110. Zusammenfassung: Application CacheHTML-Einbindung, Mime-TypeAufbau Cache Manifest: CACHE MANIFEST, NETWORK, FALLBACKJavascript Events zur Cache Überwachung110 Kochan & Partner Brand Design Development
  111. 111. Part 2 CSS111 Kochan & Partner Brand Design Development
  112. 112. SelektorenTextflussTransformationenTransitionen, Animationen112 Kochan & Partner Brand Design Development
  113. 113. Selektoren CSS2.1Pseudo-Klassen:first-child Genau das erste Kind:last-child Genau das letzte KindAttribut-spezifische Selektionelement[attribute] element mit Attribut attributea[target="_blank"] Anchor mit Attribut target und Attributwert exakt "_blank"div[class~="copytext"] Division mit einer mindestens der Klasse copytext (= div.copytext)div[lang|="de"] Division mit Attribut lang matcht alle Werte, die von links mit de beginnen, z.B. lang="de", lang="de-de, de-at"...113 Kochan & Partner Brand Design Development
  114. 114. Selektoren CSS2.1: Demo114 Kochan & Partner Brand Design Development
  115. 115. Selektoren CSS3 (1)Pseudo-Klassen:root Das root-Element des Dokuments, body:nth-child(n) Das n-te Kind, z.B. nth-child(7), nth-child(odd)oder nth-child(even):nth-last-child(n) dito, umgekehrte Zählung:first-of-type:last-of-type:nth-of-type(n):nth-last-of-type(n):only-child Ein Einzelkind:empty Ein leeres Element:enabled, :disabled Ein- oder ausgeschaltetes Element, z.B. Button:checked Markiertes Element, z.B. Checkbox oder Radiobox115 Kochan & Partner Brand Design Development
  116. 116. Selektoren CSS3 (2)Pseudo-Elemente:first-line Die erste Zeile des Textes:first-letter Der erste Buchstabe des Textes:before Generierter Inhalt vor dem Element:after Generierter Inhalt nach dem ElementAttribut-spezifische Selektiondiv[lang^="de"] Attributwert beginnt mit "de"div[lang$="de"] Attributwert endet mit "de"div[lang*="de"] Attributwert beinhaltet "de"Negation:not(<CSS 3 Selector>) Invertierung von Selektionsbedingungen116 Kochan & Partner Brand Design Development
  117. 117. Selektoren CSS3: Demo117 Kochan & Partner Brand Design Development
  118. 118. Selektoren für WebForms 2.0Pseudo-Elemente:default Default-submit Button des Formulars:indeterminate Unbestimmte Check- und Radioboxen:valid Gültiger Wert:invalid Ungültiger Wert:in-range Innerhalb des Wertebereichs:out-of-range Außerhalb des Wertebereichs:required Pflichtfeld:optional Elemente ohne required und ohne Validierung:read-only Schreibgeschützte Elemente:read-write Elemente ohne Schreibschutz118 Kochan & Partner Brand Design Development
  119. 119. Selektoren für WebForms 2.0: Demo119 Kochan & Partner Brand Design Development
  120. 120. SelektorenTextflussTransformationenTransitionen, Animationen120 Kochan & Partner Brand Design Development
  121. 121. TextflussEingebundene Block-Darstellung display: inline-blockMehrspaltiger Textfluss column-count, column-rule, column-gapTextkürzung text-overflow: ellipsis Hinweis! white-space: nowrap nicht vergessen121 Kochan & Partner Brand Design Development
  122. 122. Textfluss: Demo122 Kochan & Partner Brand Design Development
  123. 123. SelektorenTextflussTransformationenTransitionen, Animationen123 Kochan & Partner Brand Design Development
  124. 124. TransformationenKoordinatensystem & PerspektiveHardware-BeschleunigungKombinierbare Transformationen • Rotation • Skalierung • Translation • Neigung • Ursprung • Matrizen-Manipulation124 Kochan & Partner Brand Design Development
  125. 125. Transformationen: Demo (1)125 Kochan & Partner Brand Design Development
  126. 126. Transformationen: Demo (2)126 Kochan & Partner Brand Design Development
  127. 127. Transformationen: Demo 2D127 Kochan & Partner Brand Design Development
  128. 128. SelektorenTextflussTransformationenTransitionen, Animationen128 Kochan & Partner Brand Design Development
  129. 129. Transitions: Übergänge zwischen Property-WertenProperties all, none, <properties>DauerTiming-Funktion linear, ease*, cubic-bezierStart-Verzögerung129 Kochan & Partner Brand Design Development
  130. 130. Transitions: BeispieleVollständige Notation transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: .5s;Kurzschreibweise und multiple Übergänge transition: width 2s linear, height 1s ease-in, left .5s ease-in-out;130 Kochan & Partner Brand Design Development
  131. 131. Transitions: Demo131 Kochan & Partner Brand Design Development
  132. 132. AnimationenKeyframe-Defintionen Start/Ende from, to oder Prozentwert 0 – 100%Animations-Property • Dauer • Anzahl Wiederholungen • Timing-Funktion • Richtung132 Kochan & Partner Brand Design Development
  133. 133. Animationen: Demo133 Kochan & Partner Brand Design Development
  134. 134. Zusammenfassung: CSSSelektoren CSS 2.1, CSS 3Textfluss: Blocks, Mehrspaltigkeit, TextkürzungTransformationen 2D, 3DÜbergänge mit TransitionsKeyframe Animationen134 Kochan & Partner Brand Design Development
  135. 135. Part 3 Javascript135 Kochan & Partner Brand Design Development
  136. 136. Was ist HTML5? Offline & Realtime & Semantic Device Communication Storage 3D, Graphics Performance & Multimedia CSS3 & Effects IntegrationQuelle: http://www.w3.org/html/logo/136 Kochan & Partner Brand Design Development
  137. 137. Was ist HTML5? Offline & Realtime & Semantic Device Communication Storage 3D, Graphics Performance & Multimedia CSS3 & Effects IntegrationQuelle: http://www.w3.org/html/logo/137 Kochan & Partner Brand Design Development
  138. 138. Was ist HTML5? Offline & Realtime & Semantic Device Communication Storage 3D, Graphics Performance & Multimedia CSS3 & Effects IntegrationQuelle: http://www.w3.org/html/logo/138 Kochan & Partner Brand Design Development
  139. 139. CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API139 Kochan & Partner Brand Design Development
  140. 140. 3D, Graphics and Effects140 Kochan & Partner Brand Design Development
  141. 141. CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API141 Kochan & Partner Brand Design Development
  142. 142. CanvasUmfangreiche Browser-Unterstützung (IE ab 9)Markup mit Fallback <canvas id="c" width="600" height="220">Fallback</canvas>Breiten- und Höhen-Angabe: HTML, CSSContext: 2D, 3D: WebGLTransformationen: translate, rotate, scale, transform142 Kochan & Partner Brand Design Development
  143. 143. Koordinatensystem & RasterQuelle: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Applying_styles_and_colors143 Kochan & Partner Brand Design Development
  144. 144. API: Setup und Zeichnen // Basic setup var canvas = document.getElementById(c); var ctx = canvas.getContext(2d); // rectangles ctx.strokeRect(x, y, width, height); ctx.fillRect(x, y, width, height); ctx.clearRect(x, y, width, height); // path ctx.beginPath(); ... ctx.stroke(); // or/and ctx.fill();144 Kochan & Partner Brand Design Development
  145. 145. API: Setup und Zeichnen (2) ctx.lineTo(x, y); ctx.moveTo(x, y); ctx.arc(x, y, radius, startAngle, endAngle, antiClockWiseBool); ctx.quadraticCurveTo(cX, cY, x, y); ctx.bezierCurveTo(c1x, c1y, c2x, c2y, x, y); x,y c x,y c1 x,y x,y Ausgangspunkt Ausgangspunkt c2 x,yQuelle: http://commons.wikimedia.org/wiki/File:Bezier_grad123.svg145 Kochan & Partner Brand Design Development
  146. 146. API: Grafiken ctx.drawImage(HTMLimageObject, x, y); ctx.drawImage(HTMLimageObject, x, y, width, height); ctx.drawImage(HTMLimageObject, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight );146 Kochan & Partner Brand Design Development
  147. 147. API: Füllung und Linien // Füllangaben für Objektfüllung und -outline ctx.fillStyle = <Füllangabe>; ctx.strokeStyle = <Füllangabe>; // Beispiele für Füllangaben ctx.fillStyle = red; ctx.fillStyle = #ff00ff; ctx.fillStyle = rgb(255, 127, 0); ctx.fillStyle = rgba(255, 127, 0, 0.5); // Linienstärke, -abschluss, -verbindung, -gehrungsbegrenzung ctx.lineWidth = <Zahlwert>; ctx.lineCap = <Abschluss: butt, round, square>; ctx.lineJoin = <Verbindung: round, bevel, miter = Gehrung>; ctx.miterLimit = <Zahlwert>; // globale Transparenz ctx.globalAlpha = 0.3;147 Kochan & Partner Brand Design Development
  148. 148. API: Verläufe und Muster var linGradient = ctx.createLinearGradient(x1, y1, x2, y2); linGradient.addColorStop(pos, color); // pos: 0.0 ... 1.0 ... var radGradient = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2); ... ctx.createPattern(HTMLimageObject, type) // type: repeat // repeat-x // repeat-y // no-repeat148 Kochan & Partner Brand Design Development
  149. 149. Demo149 Kochan & Partner Brand Design Development
  150. 150. Device150 Kochan & Partner Brand Design Development
  151. 151. CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API151 Kochan & Partner Brand Design Development
  152. 152. GeolocationAbfrage der geografischen PositionErlaubnis durch den BenutzerEinmal-Abfrage oder kontinuierliche ÜberwachungQuelle je nach Endgerät: GPS, GSM-Interpolation, WLAN...Neben Koordination • Höhe über Normalnull • Richtung • Geschwindigkeit152 Kochan & Partner Brand Design Development
  153. 153. API navigator.geolocation getCurrentPosition(Position abfragen <callback>, <error>, <options>)Position überwachen watchPosition(<dito>)Überwachung beenden clearWatch(<watchId>) [Geoposition]Genauigkeit coords.accuracyBreitengrad, Längengrad coords.latitude, .longitudeRichtung coords.headingGeschwindigkeit coords.speedGenauigkeit Höhe coords.altitudeAccuracyHöhe coords.altitudeErmittlungszeitpunkt timestamp153 Kochan & Partner Brand Design Development
  154. 154. Optionen [PositionOptions]Hohe Genauigkeit einschalten enableHighAccuracy true / falseMaximale Laufzeit für Ermittlung timeoutMaximales Alter maximumAgeBeispiel var threadId; if (navigator.geolocation) { threadId = navigator.geolocation.watchPosition( update, // function callback error, // error callback {enableHighAccuracy: true} // options as JSON object ); } function update(pos) { alert(pos.coords.latitude); } function errorCallback(error) { alert(error.message);}154 Kochan & Partner Brand Design Development
  155. 155. Fehlerbehandlung error.code0 Kein Fehler1 PERMISSION_DENIED Zugriff nicht gestattet2 POSITION_UNAVAILABLE Position nicht verfügbar3 TIMEOUT Ermittlung abgelaufen error.message Lokalisierte Fehlermeldung zur Ausgabe155 Kochan & Partner Brand Design Development
  156. 156. Demo156 Kochan & Partner Brand Design Development
  157. 157. CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API157 Kochan & Partner Brand Design Development
  158. 158. Device OrientationAbfrage der Orientierung im dreidimensionalen RaumKonkurrierende Spezifikationen: DeviceOrientation oder MozOrientationQuelle je nach Endgerät: Beschleunigungssensor158 Kochan & Partner Brand Design Development
  159. 159. Z Y X159 Kochan & Partner Brand Design Development
  160. 160. Z Y α X160 Kochan & Partner Brand Design Development
  161. 161. Z Y β X161 Kochan & Partner Brand Design Development
  162. 162. Z Y γ X162 Kochan & Partner Brand Design Development
  163. 163. API window.DeviceOrientationEventNeigung Links/Rechts –90° ... +90° deviceorientation.gammaNeigung Vorne/Hinten –90° ... +90° deviceorientation.betaHimmelsrichtung 0° ... 360° deviceorientation.alpha window.OrientationEventNeigung Links/Rechts –1 ... +1 mozorientation.xNeigung Vorne/Hinten –1 ... +1 mozorientation.yVertikale Beschleunigung mozorientation.z163 Kochan & Partner Brand Design Development
  164. 164. Demo164 Kochan & Partner Brand Design Development
  165. 165. Realtime & Communication165 Kochan & Partner Brand Design Development
  166. 166. CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API166 Kochan & Partner Brand Design Development
  167. 167. Notifications(Visuelle) Benachrichtigung des Users außerhalb des BrowserfenstersAusprägungen: Notification oder HtmlNotificationDarstellung Systemabhängig, z.B. Mac OS X Mountain Lion: MitteilungszentraleLeider derzeit exklusiv in Webkit implementiert167 Kochan & Partner Brand Design Development
  168. 168. API window.webkitNotificationsBerechtigung überprüfen checkPermission()Berechtigung einholen requestPermission(<callback>)Benachrichtigung erzeugen createNotification()Beispiel if (window.webkitNotification.checkPermission() == 0) { var n = window.webkitNotification.createNotification( , // icon, unused Hammer to fall, // title Here I stand or... // body ); n.show(); }168 Kochan & Partner Brand Design Development
  169. 169. Demo169 Kochan & Partner Brand Design Development
  170. 170. CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API170 Kochan & Partner Brand Design Development
  171. 171. WebSocketBidirektionale KommunikationReduktion des HTTP-OverheadsTechnische Basis: HTTP Upgradesystem, ggf. Probleme bei Proxy-VerbindungenURL-Schema: ws:// bzw. wss://Format derzeit Text, binäre Daten in Vorbereitung171 Kochan & Partner Brand Design Development
  172. 172. Server-ImplementierungStandard LAMP tendenziell ungeeignet, da anderes Nutzungsmuster: • kein starrer Anfrage/Antwort-Zyklus • große Anzahl an offenen VerbindungenVielfältige Serverseitige Implementierungen verfügbaru.a. für Node.js, Java, Ruby, Python172 Kochan & Partner Brand Design Development
  173. 173. APIKonstruktor new WebSocket(<url>)Nachricht vom Client senden send(<message>)Verbindung beenden close()Eventsonopen Verbindung aufgebautonerror Fehleronmessage Eingehende Nachricht des Servers173 Kochan & Partner Brand Design Development
  174. 174. Demo174 Kochan & Partner Brand Design Development
  175. 175. Performance & Integration175 Kochan & Partner Brand Design Development
  176. 176. CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API176 Kochan & Partner Brand Design Development
  177. 177. Web WorkerAsynchrone BerechnungAusgelagert in eigene ThreadsParallele Ausführung weiterer Skripte (»non blocking«)Kein Zugriff auf DOM-Elemente: window, document, parent177 Kochan & Partner Brand Design Development
  178. 178. API [Worker]Konstruktor new Worker(<js-file)Nachricht senden postMessage(<text>)Worker beenden terminate()178 Kochan & Partner Brand Design Development
  179. 179. Genereller Ablaufindex.html worker.js w = new worker(worker.js); w.postMessage(cmd); self.addEventListener( // ... message, // do more stuff, script is function(e) // not blocked { // ... // do the real heavy // calc stuff // ... var result = /* ... */; w.onmessage = function(e) postMessage(result) { }, false alert(e.data); ); w.terminate(); }179 Kochan & Partner Brand Design Development
  180. 180. Demo5 Millionen-maliges Aufsummieren einer Zufallszahl, die mit 100,1 multipliziert wurde.180 Kochan & Partner Brand Design Development
  181. 181. Offline & Storage181 Kochan & Partner Brand Design Development
  182. 182. CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API182 Kochan & Partner Brand Design Development
  183. 183. Web StorageBezeichnet auch als DOM StorageSession (sessionStorage) oder Sessionübergreifend (localStorage)Key/Value-PaareZugriffsbeschränkung auf »same origin«, d.h. Protokoll/Domain/PortSpeicherplatz abhängig von Browser und BenutzereinstellungDefaults pro origin: Webkit 2,5MB, Firefox 5MB, IE 10MBEvent-Überwachung183 Kochan & Partner Brand Design Development
  184. 184. API window.localStorage | window.sessionStorageKey/Value-Paar setzen setItem(<key>, <value>)Value zu Key ermitteln getItem(<key>)Key/Value-Paar löschen removeItem(<key>)Speicher leeren clear()Anzahl Key/Value-Paare lengthKey des n-ten Paares key(<index>)184 Kochan & Partner Brand Design Development
  185. 185. Event storageevent.key Key des auslösenden Speicherzugriffsevent.oldValue Bisheriger Wertevent.newValue Neuer Wertevent.url / event.uri Adresse des verändernden Dokumentsevent.storageArea localStorage oder sessionStorage Hinweis! Der Event wird nicht in dem Dokument ausgelöst, in dem der Schreibzugriff erfolgt ist, sondern nur in allen anderen...!185 Kochan & Partner Brand Design Development
  186. 186. Demo Zweites Fenster186 Kochan & Partner Brand Design Development
  187. 187. CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API187 Kochan & Partner Brand Design Development
  188. 188. Web SQL Eingestellt zugunsten von Indexed DB!Verbreitung: Chrome, Safari, Opera, Mobile Safari, AndroidRelationale DatenbankEinfaches, direktes API188 Kochan & Partner Brand Design Development
  189. 189. Erläuterung zum Demo var db; function storeDB() {} function deleteDB(what) {} function retrieveDB() {} function setupDB() {} window.onload = function() { db = openDatabase( /* ... */ ); db.transaction(function(tx) { tx.executeSql( <SQL>, [<Array of parameters>], successCallback(tx, result), errorCallback(tx, result) ); }); }189 Kochan & Partner Brand Design Development
  190. 190. Demo190 Kochan & Partner Brand Design Development
  191. 191. CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API191 Kochan & Partner Brand Design Development
  192. 192. Indexed DB Experimentell!Verbreitung: Chrome, Firefox, IE10, kein Mobil-BrowserVollständiger Name: Indexed Database APINoSQL DatenbankKeine starre Tabellenstruktur sondern Key/Value-Paare mit ObjektenFunktioniert nicht in dem Privacy-Modus (»privates Surfen« ö.ä.)Schemagröße pro Origin variabel, mindestens 50MB192 Kochan & Partner Brand Design Development
  193. 193. Genereller Ablauf, Terminologie(1) Datenbank öffnen(2) Wenn nicht vorhanden: Speicherbereich objectStore (≈ Tabellen in SQL-Datenbanken) anlegen oder auf neue Version des Schemas updaten(3) Datenbank-Operation (1) Transaktion erzeugen, Typ festlegen: readonly, readwrite (2) objectStore festlegen (3) Anfrage ausführen: add(), delete(), openCursor()(4) Den Abschluss der Operation mit Hilfe des richtigen Events (onsuccess) überwachen(5) Ergebnisse verarbeiten193 Kochan & Partner Brand Design Development
  194. 194. Erläuterung zum Demo var db; function storeDB() {} function deleteDB(what) {} function retrieveDB() {} window.onload = function() { /* ... */ request = window.indexedDB.open(); request.onerror = function(event) { /* ... */ } request.onsuccess = function(event) { db = request.result; } request.onupgradeneed = function(event) { /* setupDB */ } }194 Kochan & Partner Brand Design Development
  195. 195. Demo195 Kochan & Partner Brand Design Development
  196. 196. CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API196 Kochan & Partner Brand Design Development
  197. 197. File APIwindow.filewindow.FileReaderwindow.FileListwindow.Blob window.requestFileSystem derzeit nur Chrome window.fileEntry197 Kochan & Partner Brand Design Development
  198. 198. File Reader APIKonstruktor new FileReader()Abbruch des Ladevorgangs abort()Datei laden readAsArrayBuffer(<file>) readAsBinaryString(<file>) readAsDataURL(<file>) readAsText(<file>, <encoding>)Eventsonload Datei fertig geladenonloadend Abschluss des Ladevorgangsonloadstart Ladevorgang begonnenonprogress Fortschritt erzieltonabort, onerrer Abbruch oder Fehler198 Kochan & Partner Brand Design Development
  199. 199. Demo: FileList199 Kochan & Partner Brand Design Development
  200. 200. Demo: FileReader200 Kochan & Partner Brand Design Development
  201. 201. Geschafft.CanvasGeolocationDevice OrientationNotificationsWebSocketWebWorkerWeb StorageWeb SQLIndexed DBFile API201 Kochan & Partner Brand Design Development
  202. 202. Vielen Dank! Kochan & Partner Brand Design Development © 2013 – Alle Rechte vorbehalten. Kochan & Partner GmbH Hirschgartenallee 25 80639 München Telefon +49 89 178 49 78 Fax +49 89 178 1235 kontakt@kochan.de www.kochan.de
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×