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

1,304 views

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
1,304
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
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

×