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

2,634 views

Published on

Fortsetzung des ersten Teils mit dem Abschluss des Kapitels Sematik und dem vollständigen zweiten Teil zum Thema CSS3.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,634
On SlideShare
0
From Embeds
0
Number of Embeds
136
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 für Entwickler: Part 1 und 2, 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. 4 Kochan & Partner Brand Design Development
  5. 5. Was ist HTML5 und was nicht...Quelle: Peter Kröner, http://html5-buch.deCreative Commons Namensnennung 3.0 Deutschland-Lizenz5 Kochan & Partner Brand Design Development
  6. 6. Was ist HTML5?HTML 4.01XHTML 1W3C, WHATGCNicht-Standard wird Standard6 Kochan & Partner Brand Design Development
  7. 7. Was ist HTML5? Offline & Semantic Device Connectivity Storage 3D, Graphics Performance & Multimedia CSS3 & Effects IntegrationQuelle: http://www.w3.org/html/logo/7 Kochan & Partner Brand Design Development
  8. 8. Unterstützung8 Kochan & Partner Brand Design Development
  9. 9. Can I Use? Suche Volle/teilweise Unterstützung Detaillierte Versionsinfo Weiterführende Informationen, ReferenzQuelle: http://caniuse.com9 Kochan & Partner Brand Design Development
  10. 10. HTML5 & CSS3, findmebyIP CSS3 Properties CSS3 Selectors Web Applications Graphics & embedded Content Audio codecs Video codecs WebForms 2.0Quelle: http://www.findmebyip.com/litmus/10 Kochan & Partner Brand Design Development
  11. 11. Strategie Graceful degredation Progressive enhancement11 Kochan & Partner Brand Design Development
  12. 12. Hilfsmittel Polyfills12 Kochan & Partner Brand Design Development
  13. 13. IE–Quickfix (1) window.document.createElement(section);13 Kochan & Partner Brand Design Development
  14. 14. 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/14 Kochan & Partner Brand Design Development
  15. 15. 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/15 Kochan & Partner Brand Design Development
  16. 16. normalize.cssA modern, HTML5-ready alternative to CSS resetsused by Twitter Bootstrap, HTML5 Boilerplate andmany more.Quelle: http://necolas.github.com/normalize.css/16 Kochan & Partner Brand Design Development
  17. 17. 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-Polyfills17 Kochan & Partner Brand Design Development
  18. 18. –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/18 Kochan & Partner Brand Design Development
  19. 19. »Hidden Gems«19 Kochan & Partner Brand Design Development
  20. 20. 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“20 Kochan & Partner Brand Design Development
  21. 21. 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>21 Kochan & Partner Brand Design Development
  22. 22. 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>22 Kochan & Partner Brand Design Development
  23. 23. 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, stylesheet23 Kochan & Partner Brand Design Development
  24. 24. 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(); }24 Kochan & Partner Brand Design Development
  25. 25. 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> ...25 Kochan & Partner Brand Design Development
  26. 26. Einbindung svg und MathML (2)Screenshots: Safari 6/Mac OS X26 Kochan & Partner Brand Design Development
  27. 27. 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;27 Kochan & Partner Brand Design Development
  28. 28. Standardisierung getElementsByClassName()API document.getElementsByClassName() element.getElementsByClassName()Beispiele var allMyActiveDivs = document.getElementsByClassName(active); var myOtherLis = myUl.getElementsByClassName(inactive);28 Kochan & Partner Brand Design Development
  29. 29. 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>);29 Kochan & Partner Brand Design Development
  30. 30. 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!)30 Kochan & Partner Brand Design Development
  31. 31. 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 201331 Kochan & Partner Brand Design Development
  32. 32. 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"32 Kochan & Partner Brand Design Development
  33. 33. 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 // ... };33 Kochan & Partner Brand Design Development
  34. 34. 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 Rechtschreibhilfe34 Kochan & Partner Brand Design Development
  35. 35. Zusammenfassung: JavascriptHTML-Manipulation mittels innerHTML, outerHTML, insertAdjacentHTMLStandardisierung getElementsByClassName()ClassList APIQuery Selector APIFrei definierbare Attribute mit data-*History API35 Kochan & Partner Brand Design Development
  36. 36. Part 1 Markup36 Kochan & Partner Brand Design Development
  37. 37. SemantikFormulareVideo & AudioApplication Cache37 Kochan & Partner Brand Design Development
  38. 38. SemantikFormulareVideo & AudioApplication Cache38 Kochan & Partner Brand Design Development
  39. 39. 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>39 Kochan & Partner Brand Design Development
  40. 40. 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>40 Kochan & Partner Brand Design Development
  41. 41. Auslassung <!DOCTYPE html> <html> <head> <meta charset=“utf-8“/> <title>Hello world</title> </head> <!-- --> <h1>Hello world</h1> <p>Starting with HTML5</p> <!-- --> </html>41 Kochan & Partner Brand Design Development
  42. 42. 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>42 Kochan & Partner Brand Design Development
  43. 43. Neue ElementeKopf- und Fußbereiche header, footerSeitenabschnitte sectionArtikel articleNavigationsbereiche navBegleitende Informationen asideAbbildungen figure, figcaptionMarkierung mark43 Kochan & Partner Brand Design Development
  44. 44. Neue Elemente (2)Uhrzeit timeMenü menuButton/Checkbox/Radiobox commandFortschrittsanzeige progressSkala meterDetailansicht detailsZusammenfassung einer Detailansicht summary44 Kochan & Partner Brand Design Development
  45. 45. 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>45 Kochan & Partner Brand Design Development
  46. 46. 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> ...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. 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>48 Kochan & Partner Brand Design Development
  49. 49. 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>49 Kochan & Partner Brand Design Development
  50. 50. 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>50 Kochan & Partner Brand Design Development
  51. 51. 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>51 Kochan & Partner Brand Design Development
  52. 52. 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, 195352 Kochan & Partner Brand Design Development
  53. 53. 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-Aqua53 Kochan & Partner Brand Design Development
  54. 54. 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 X54 Kochan & Partner Brand Design Development
  55. 55. Outline-Algorithmus (1)Beibehaltung des 6-stufiges Überschriften-Modell h1 bis h6Hierarchie jedoch pro SektionSektionen definiert durch section, nav, aside und article55 Kochan & Partner Brand Design Development
  56. 56. 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. Anlagen56 Kochan & Partner Brand Design Development
  57. 57. Umdeutung/Änderung bestehender ElementeHervorhebung em, strongAbkürzung und Akronym abbrQuellcode codeAdresse addressGleichwertige Abhebung, Fachbegriffe b, iInhaltlicher Bruch hr»Kleingedrucktes« small57 Kochan & Partner Brand Design Development
  58. 58. 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... :-)58 Kochan & Partner Brand Design Development
  59. 59. A R I A59 Kochan & Partner Brand Design Development
  60. 60. Accesible Rich Internet Application60 Kochan & Partner Brand Design Development
  61. 61. WAI-ARIAImplizite RollenDefinierte ÜberschreibbarkeitExplizite Attribute: Rollen, Beschriftungen, Zustände, ...61 Kochan & Partner Brand Design Development
  62. 62. 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 application62 Kochan & Partner Brand Design Development
  63. 63. 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/63 Kochan & Partner Brand Design Development
  64. 64. MicrodataRDFamicroformats.orgHTML5-Microdata: vCard, vEvent, workAttribute itemscope itemprop itemrefAPI document.getItems() element.properties element.itemValue64 Kochan & Partner Brand Design Development
  65. 65. Microdata: Google Rich SnippetsQuelle: http://support.google.com/webmasters/bin/answer.py?hl=de&answer=9917065 Kochan & Partner Brand Design Development
  66. 66. Microdata: Google Rich Snippets (2)Quelle: http://www.google.com/webmasters/tools/richsnippet66 Kochan & Partner Brand Design Development
  67. 67. Zusammenfassung: SemantikSyntax: doctype, well formed, AuslassungNeue ElementeUmdeutung/Änderung bestehender ElementeEntfernte ElementeOutline-AlgorithmusWAI-ARIAMicrodata67 Kochan & Partner Brand Design Development
  68. 68. SemantikFormulareVideo & AudioApplication Cache68 Kochan & Partner Brand Design Development
  69. 69. Neue Typen für input (1)Textfeld textSuchfeld searchTelefonnummer telephoneURL* urlE-Mail-Adresse* emailNumerischer Wert* numberBereich* rangeFarbwahl / Color picker color* Eingebaute Validierung69 Kochan & Partner Brand Design Development
  70. 70. Neue Typen für input (2)Datum- und Zeit-Angaben datetimeDatum dateMonat monthWoche weekZeit timeDatum- und Zeit in lokaler Notation datetime-local70 Kochan & Partner Brand Design Development
  71. 71. 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 871 Kochan & Partner Brand Design Development
  72. 72. Typ searchEingabefeld für SuchenDarstellung nach Art des BetriebssystemsBeispiel <input type="search" placeholder="Suche" /> Safari 6/Mac OS X72 Kochan & Partner Brand Design Development
  73. 73. Typ Farbwahl / Colorpicker colorLeider noch kaum implementiertBeispiel <input type="color" /> Chrome 25/Mac OS X Opera 12/Mac OS X73 Kochan & Partner Brand Design Development
  74. 74. 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 X74 Kochan & Partner Brand Design Development
  75. 75. Neue ElementeErzeugung von Schlüsseln keygenObjekt objectAusgabebereich outputAuto-Vervollständigung datalist75 Kochan & Partner Brand Design Development
  76. 76. 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" /> ...76 Kochan & Partner Brand Design Development
  77. 77. 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, formnovalidate77 Kochan & Partner Brand Design Development
  78. 78. 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.php78 Kochan & Partner Brand Design Development
  79. 79. 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}"79 Kochan & Partner Brand Design Development
  80. 80. 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()80 Kochan & Partner Brand Design Development
  81. 81. Browser Unterstützung?81 Kochan & Partner Brand Design Development
  82. 82. Mac OS X82 Kochan & Partner Brand Design Development
  83. 83. Windows 883 Kochan & Partner Brand Design Development
  84. 84. iOS (1)84 Kochan & Partner Brand Design Development
  85. 85. iOS (2)85 Kochan & Partner Brand Design Development
  86. 86. Windows Phone 886 Kochan & Partner Brand Design Development
  87. 87. Zusammenfassung: FormulareNeue Typen für inputNeue Elemente und AttributeValidierung und Validation APIBrowser-Unterstützung87 Kochan & Partner Brand Design Development
  88. 88. SemantikFormulareVideo & AudioApplication Cache88 Kochan & Partner Brand Design Development
  89. 89. 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>89 Kochan & Partner Brand Design Development
  90. 90. 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: loop90 Kochan & Partner Brand Design Development
  91. 91. 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: poster91 Kochan & Partner Brand Design Development
  92. 92. 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>92 Kochan & Partner Brand Design Development
  93. 93. Multiple Quellen: DevicesMedia-spezifisch <video> <source src="small.ogg" media="handheld" /> <source src="high-res.ogg" media="all" /> </video>93 Kochan & Partner Brand Design Development
  94. 94. 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.playbackRate94 Kochan & Partner Brand Design Development
  95. 95. 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)95 Kochan & Partner Brand Design Development
  96. 96. 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; }96 Kochan & Partner Brand Design Development
  97. 97. 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!); });97 Kochan & Partner Brand Design Development
  98. 98. 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 vorhanden98 Kochan & Partner Brand Design Development
  99. 99. 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 ok99 Kochan & Partner Brand Design Development
  100. 100. 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+ — —100 Kochan & Partner Brand Design Development
  101. 101. Zusammenfassung: Audio- und VideoEinbindungAudio- und Video-AttributeMultiple QuellenAudio- und Video API: Member, Methoden und EventsFehlerbehandlung: error, networkState, readyStateCodecs101 Kochan & Partner Brand Design Development
  102. 102. SemantikFormulareVideo & AudioApplication Cache102 Kochan & Partner Brand Design Development
  103. 103. Überblick Offline-TechnikenApplication CacheDOM StorageWeb SQLIndexedDBUser DataOn-/Offline-Events und -Status-Abfrage103 Kochan & Partner Brand Design Development
  104. 104. 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>104 Kochan & Partner Brand Design Development
  105. 105. 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.jpg105 Kochan & Partner Brand Design Development
  106. 106. 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.gif106 Kochan & Partner Brand Design Development
  107. 107. 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-Abschnitts107 Kochan & Partner Brand Design Development
  108. 108. 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 Downloads108 Kochan & Partner Brand Design Development
  109. 109. Zusammenfassung: Application CacheHTML-Einbindung, Mime-TypeAufbau Cache Manifest: CACHE MANIFEST, NETWORK, FALLBACKJavascript Events zur Cache Überwachung109 Kochan & Partner Brand Design Development
  110. 110. Part 2 CSS110 Kochan & Partner Brand Design Development
  111. 111. SelektorenTextflussTransformationenTransitionen, Animationen111 Kochan & Partner Brand Design Development
  112. 112. 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"...112 Kochan & Partner Brand Design Development
  113. 113. Selektoren CSS2.1: Demo113 Kochan & Partner Brand Design Development
  114. 114. 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 Radiobox114 Kochan & Partner Brand Design Development
  115. 115. 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 Selektionsbedingungen115 Kochan & Partner Brand Design Development
  116. 116. Selektoren CSS3: Demo116 Kochan & Partner Brand Design Development
  117. 117. 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 Schreibschutz117 Kochan & Partner Brand Design Development
  118. 118. Selektoren für WebForms 2.0: Demo118 Kochan & Partner Brand Design Development
  119. 119. SelektorenTextflussTransformationenTransitionen, Animationen119 Kochan & Partner Brand Design Development
  120. 120. TextflussEingebundene Block-Darstellung display: inline-blockMehrspaltiger Textfluss column-count, column-rule, column-gapTextkürzung text-overflow: ellipsisTipp: white-space: nowrap nicht vergessen120 Kochan & Partner Brand Design Development
  121. 121. Textfluss: Demo121 Kochan & Partner Brand Design Development
  122. 122. SelektorenTextflussTransformationenTransitionen, Animationen122 Kochan & Partner Brand Design Development
  123. 123. TransformationenKoordinatensystem & PerspektiveHardware-BeschleunigungKombinierbare Transformationen • Rotation • Skalierung • Translation • Neigung • Ursprung • Matrizen-Manipulation123 Kochan & Partner Brand Design Development
  124. 124. Transformationen: Demo (1)124 Kochan & Partner Brand Design Development
  125. 125. Transformationen: Demo (2)125 Kochan & Partner Brand Design Development
  126. 126. Transformationen: Demo 2D126 Kochan & Partner Brand Design Development
  127. 127. SelektorenTextflussTransformationenTransitionen, Animationen127 Kochan & Partner Brand Design Development
  128. 128. Transitions: Übergänge zwischen Property-WertenProperties all, none, <properties>DauerTiming-Funktion linear, ease*, cubic-bezierStart-Verzögerung128 Kochan & Partner Brand Design Development
  129. 129. 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;129 Kochan & Partner Brand Design Development
  130. 130. Transitions: Demo130 Kochan & Partner Brand Design Development
  131. 131. AnimationenKeyframe-Defintionen Start/Ende from, to oder Prozentwert 0 – 100%Animations-Property • Dauer • Anzahl Wiederholungen • Timing-Funktion • Richtung131 Kochan & Partner Brand Design Development
  132. 132. Animationen: Demo132 Kochan & Partner Brand Design Development
  133. 133. Zusammenfassung: CSSSelektoren CSS 2.1, CSS 3Textfluss: Blocks, Mehrspaltigkeit, TextkürzungTransformationen 2D, 3DÜbergänge mit TransitionsKeyframe Animationen133 Kochan & Partner Brand Design Development
  134. 134. to be continued...134 Kochan & Partner Brand Design Development
  135. 135. 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

×