HTML5 - Zumbrunn
Werbung
HTML5 [email protected] <shortbio> <name>Christian Cueni</name> <edu>FH Biel Elektrotechnik</edu> <working> Swisscom Eurospot / Swisscom Innovations / 89grad </working> <skills>Web / Mobile Web / iPhone</skills> </shortbio> Ziele ● ● Möglichkeiten von HTML5 Wie können Webseiten im mobilen Bereich eingesetzt werden Web 101 HTML CSS Javascript } Bausteine einer Webseite Web 101 - HTML HTML CSS Javascript HTML = Hypertext Markup Language } Inhalt Web 101 - HTML ...<body> } Beginn darstellbarer Inhalt <h1>I'm a heading</h1> } Überschrif <p>A paragraph</p> } Abschnit <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> } Ungeordnete Liste </body>... } Listen Element Web 101 - id und class ● ● Jedes Element einer Webseite kann ein id und/oder class-Atribut haben id-Atribute müssen einmalig sein <p id=“introduction“>...</p> ● class-Atribute können mehreren Elementen zugeordnet werden <li id=“home“ class=“nav_link“>...</li> <li id=“about“ class=“nav_link“>...</li> Web 101 - CSS HTML CSS Javascript CSS: Cascading Stylesheet } Design Web 101 - CSS ... h1 { font-size: 36px; } } Überschrif } Abschnit p { Background-color: #ddd; Border: 1px solid #000; } ul { margin: 10px 20px; } ... } Ungeordnete Liste Web 101 – CSS Selectors h1 {...} h1, p {...} #navigation {...} .nav_link {...} p.alert {...} p .alert {...} Alle h1-Elemente werden selektiert Alle h1- und p-Elemente werden selektiert Das Element mit id navigation wird selektiert Alle Elemente mit class nav_link werden selektiert Alle p-Elemente mit class alert werden selektiert Alle Elemente welche ein p-Element als Elternelement haben und von der class alert sind, werden selektiert htp://www.w3.org/TR/CSS2/selector.html Web 101 - Javascript HTML CSS Javascript CSS: Cascading Stylesheet } Funktionalität/ Interaktion Web 101 - Javascript HTML <input id=“answer“ class=“userinput “type=“text“ /> Javascript var input = document.getElementById('answer').value; if(!input) { alert(„Missing input“); } ... Web 101 – Javascript Einbindung ● Einbindung von Javascript-Dateien <script src="file.js"></script> ● Direkt im HTML <script> ... </script> Basic Demo htp://fh.trivialview.ch/basic/ htp://fh.trivialview.ch/basic/basic.zip Anatomie einer HTML5 Seite <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> ...... </body> </html> Mehr Infos zu HTML5: htp://www.w3schools.com/html5/html5_reference.asp Validator:htp://validator.w3.org/ HTML5 & CSS3 HTML5 { } CSS3 Geschichte von HTML5 ● ● ● ● HTML wurde bisher vom W3C (World Wide Web Consortium) definiert. Die Spezifikation von XHTML 2 führte zu einem Bruch mit der Browser Industrie Apple, Mozilla und Opera formten die Web Hypertext Application Technology Working Group (WHATWG) und definierten nach Web Forms 2.0 Web Apps 1.0 den Standard HTML5 Das W3C hat den WHATWG HTML5 Standard als Basis für ihren eigenen HTML 5 Standard übernommen Geschichte von HTML5 - Versionen W3C HTML 2.0 HTML 3.2 HTML 4.0 XHTML 1.0 HTML 4.01 WHATWG Web Apps 1.0 Webforms 2.0 XHTML 2.0 XHTML 5 HTML 5 HTML5 Wann kommt HTML5? ● ● ● ● Das WHATWG erwartet, dass HTML5 den „recommendation“ Status 2014 erhalten wird Viel wichtiger ist, dass HTML5 2012 den „candidate recommendation“ Status erreicht (Das W3C rechnete mit 2010, ist aber im Verzug) HTML5 ist heute recht verbreitet Was man heute schon einsetzen kann: htp://caniuse.com/ HTML5 Quelle: Wikipedia Was kann HTML5? Semantik Multimedia Offline & Storage Grafik & 3D Geräte Zugrif Performance Kommunikation CSS3 http://www.w3.org/html/logo/ Semantik ● ● Maschinen können die Bedeutung einzelner Elemente besser verstehen ● Neue Tags (article, section, ...) ● Microdata Support für WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) Semantik - Tags HTML4.01 HTML5 <div id=“header“>..Header..</div> <header>...Header...</header> <div id=“nav“>. ...Seiten Navigation... </div> <nav> ...Seiten Navigation... </nav> <div class=“section“> <div class=“article“> <h1>Titel</h1> <p>Text</p> </div> </div> <div class=“section“> <div class=“article“> <h1>Titel</h1> <p>Text</p> </div> </div> <section> <article> <h1>Titel</h1> <p>Text</p> </article> </section> <section> <article> <h1>Titel</h1> <p>Text</p> </article> </section> <div id=“footer“>..Footer..</div> <footer>..Footer..</footer> Semantik - WAI-ARIA ● Hilfe für Screenreader etc. Ohne WAI-ARIA: Mit WAI-ARIA: <div id=“progress“> <div id=“display“>25%</div> <div style=“width:25%;“ id=“played“> </div> <div id=“progress“ role=“progressbar“ aria-valuemin=“0“ aria-valuemax=“100“ aria-valuenow=“25“> <div id=“display“>25%</div> <div style=“width:25%;“ id=“played“> </div> Semantik - Microdata <section itemscope itemtype="http://data-vocabulary.org/Person"> Hello, my name is <span itemprop="name">Christian Cueni</span>, I am a <span itemprop="title">developer</span> at <span itemprop="affiliation">89grad</span>. My friends call me <span itemprop="nickname">Chrigu</span>. You can visit my homepage at <a href="http://www.sample.com" itemprop="url">www.sample.com</a>. <section itemprop="address" itemscope itemtype="http://datavocabulary.org/Address"> I live at <span itemprop="street-address">Mottrastrasse 1</span> , <span itemprop="region">Bern</span>. </section> </section> Forms Forms – Input Typen < HTML5 <input type=“text“ name=“aName“ /> { button checkbox file hidden image password radio reset submit text Multimedia ● Audio und Video Support im Browser (ohne Flash) ● htp://html5demos.com/video-canvas Forms – Neue input Typen <input type=“text“ name=“aName“ /> { search tel url email datetime date month week time datetime-local number range color Unterstützung: http://www.miketaylr.com/code/input-type-attr.html Forms – input Demo htp://fh.trivialview.ch/forms.html Forms - Validierung ● ● Mit HTML5 können Forms ohne Javascript validiert werden Dazu können das required- und patern-Atribut verwendet werden <input required pattern=“<regex>“... ● Ersetzt nicht die Überprüfung auf Serverseite Cache & Storage ● ● ● ● Webseiten können mit Application Cache lokal gespeichert und somit offline verwendet werden Mit WebStorage können Daten wie bei Cookies lokal gespeichert werden Daten können in einer DB im Browser abgespeichert werden (Web SQL, Indexed DB) Webseiten können im Browser lokale Dateien auslesen (File API) Application Cache ● ● Ein Cache Manifest definiert welche Dateien lokal gespeichert (oder auch nicht) gespeichert werden sollen. Die Dateien werden in einem sogenannten Application Cache gespeichert. Dieser Cache hat nichts mit dem normalen Cache des Browsers zu tun Application Cache – Was es braucht ● ● Ein Cache Manifest: muss UTF-8 kodiert und vom MIME-Type her text/cache-manifest sein Im html-Element der Seite wird als manifestAtrribut die Datei angegeben <html manifest=“cache-manifest.appcache“> Für Apache: In der .htaccess Datei folgenden Eintrag machen AddType text/cache-manifest manifest <Files *.appcache> ExpiresActive On ExpiresDefault "access" </Files> Application Cache – Manifest File CACHE MANIFEST } Muss in der ersten Zeile stehen #VERSION 1 } Kommentar CACHE: important.html important.css important.js } Gibt an was gecached werden soll NETWORK: foo.html bar.html } Gibt an welche Ressourcen zwingend vom Netz geladen werden müssen FALLBACK: index.html offline.html } Definiert Ersatzinhalte Application Cache ● ● Damit der cache geupdated wird, muss der Inhalt vom Manifest-File ändern Resultate (vor allem für FALLBACK) können von Browser zu Browser varieren Application Cache Demo http://fh.trivialview.ch/calculator/calc.html htp://fh.trivialview.ch/calculator/calculator.zip WebStorage ● ● ● ● Wird in localStorage und sessionStorage unterteilt localStorage muss vom Benutzer gelöscht werden oder wird gelöscht wenn Sicherheitseinstellungen geändert werden sessionStorage wird nach jeder Browsersession gelöscht (Browser oder Tab wird geschlossen) Beide speichern Key/Value-Paare: Key = 'Some value' WebStorage localStorage oder sessionStorage Objekt: Option Return Beschreibung length Long Anzahl der gespeicherten Datensätze key(long index) String Name des Schlüssels an Position index getItem(string key) String Liest die Daten des Schlüssels key setItem(string key, string data) void Speichert die Daten data unter dem Schlüssel key removeItem(string key) void Löscht die Daten des Schlüssels key clear() void Löscht alle Daten Web SQL ● ● Web SQL wurde im November 2010 aus dem HTML5 Draf entfernt, es findet aber immer noch grosse Unterstützung unter den Webkit-Browsern Wie der Name vermuten lässt, ist es eine relationale Datenbank welche mit SQL-Queries (Sqlite) angesprochen werden kann Web SQL ● Erstellen/öfnen einer DB var db = openDatabase(<name>, <version>, <display name>, <estimated size in bytes>); ● Queries Ausführen db.transaction(function(tx) { tx.executeSql('some SQL query', arguments*, successCallback*, errorCallbac*); }); * = Optional Web SQL - Beispiel db.transaction(function(tx) { tx.executeSql('SELECT * FROM table WHERE column = ?', [value_for_questionmark], function(tx, results){ var len = results.rows.length, i; for (i = 0; i < len; i++) { console.log(results.rows.item(i).column); } }, function(tx, results{console.log('error')}); }); IndexedDB ● Speichert Key/Value-Paare ● Ist eine Objekt-orientiere Datenbank ● ● ● Im Gegensatz zu Webstorage können nicht nur Strings gespeichert werden (auch JSON Objekte) Die Objekte benötigen einen eindeutigen Key Es lassen sich Indexe erstellen um Objekte schneller zu finden. Dies können z.B. Eigenschafen von Objekten sein. IndexedDB - Daten CustomerData = [ { ahv: "111.111.111.111", name: "Bill", age: 35, email: "[email protected]" }, { ahv: "222.222.222.222", name: "Donna", age: 32, email: "[email protected]" } ]; ● Ahv ist in diesem Beispiel der key ● Für email und name können Indexe erstellt werden ● ● Indexe können auch Regeln für Eigenschafen bestimmen (z.B. uniqueness) Beispiel auf developer.mozilla.org Offline Detektion ● ● ● Es kann überprüf werden ob der Browser online ist Es gibt jedoch einen Unterschied bei Chrome, Safari und Firefox: Firefox meldet online wenn die Netzkarte abgeschaltet ist. Die anderen melden Offline htp://html5demos.com/nav-online Offline Detektion - Code ● Überprüfung: navigator.onLine ● Listener (alle ausser IE): window.addEventListener('offline', function(){...}, false); window.addEventListener('online', function(){...}, false); ● Listener (IE): document.body.attachEvent('onoffline', function(){...}); Geräte Zugrif ● Heute: ● ● Geolocation API Noch in Definitions/Entwicklungs-Phase ● Audio/Video Zugrif ● Zugrif auf Kontakte & Kalendereinträge ● Ausrichtung Gerät Kommunikation ● ● ● Web Sockets halten einen Kanal zwischen Client und Server ofen und bieten einen bi-direktionalen Kommunikationskanal z.B. für Chat Server-Sent Events ermöglicht ohne zu Pollen vom Server updates zu erhalten. htp://html5demos.com/web-socket Grafik & 3D ● 3D Grafiken mit WebGL ● ● ● ● htp://www.ro.me/ 3D Efekte in CSS SVG (Scalable Vector Graphics, Vektorgrafiken die mit XML beschrieben werden können) Support Canvas für 2D Grafiken ● htp://canvasrider.com/ ● htp://www.nihilogic.dk/labs/wolf/ Performance ● ● WebWorker erlauben es Skripte im Hintergrund laufen zu lassen. So können Skripte komplexe Berechnungen durchführen ohne das User Interface Skripte dabei zu stören. htp://juliamap.googlelabs.com CSS3 ● Abgerundete Ecken bei Elementen ● Transparente Elemente ● Schaten-Efekte ● Farbverläufe ● Media Queries ● htp://css3exp.com/moon/ ● htp://tympanus.net/Tutorials/AnimatedButons/index. HTML5 - Vorteile ● ● Gute Unterstützung bei iPhone und Android (beide Webkit) -> Cross-Platform Entwicklung Mit Hilfe von jQuery Mobile oder Sencha Touch können einfach nativ-ähnliche GUIs erstellt werden ● Webseiten bieten eine echte Alternative zu Apps ● Standard Tools & Sprachen ● Einfaches Deployment HTML5 - Nachteile ● ● ● ● ● Unterschiedliche Unterstützung bei Browsern Drag & Drop API und das Canvas-Element können leiden an Zugänglichkeitsproblemen. Einige Features funktionieren manchmal nicht immer wie man es erwartet Teilweise langsamer als native Apps Viele mobile Benutzer/firmen denken heute noch in Apps Übungen jQuery 101 jQuery kann heruntergeladen und über das <script>-Tag eingebunden werden. Alternativ kann es auch über ein CDN eingebunden werden z.B. von jQuery ( htp://code.jquery.com/jquery-1.8.3.min.js) htp://jquery.com/ JQuery Cheatsheet 1/2 $('#someid') Gibt das Element mit der id someid zurück document.getElementById('someid') $('.someclass') Gibt ein Array mit allen Elementen welche class = someclass haben zurück $('tagname') Gibt ein Array mit allen Elementen welche Tag = tagname haben zurück $(document).ready(function() { Führt JS-Code aus sobald das DOM geladen ist. Sicherer als window.onload = function() {} }) jQuery Tutorial JQuery Cheatsheet 2/2 $('someselector').atr('atrname') Gibt den Wert von Atribut atrname vom selektierten Element zurück $('someselector').atr('atrname', 'value') Setzt von selektierten Elementen das Atribut atrname auf Wert value $('someselector').removeAtr('atrname') Entfernt für die selektierten Elemente das Atribut atrname $('someselector').bind('action', function() { Fügt den selektierten Elementen einen Listener auf den action Event hinzu(ähnlich element.addEventListener('action', function(){}, false);) }) Javascript Cheatsheet 1/3 var a; Deklaration einer Variable a = Array(); Leeres Array erzeugen a.push(value); Wert zu ein Array hinzufügen a[0]; Auf das erste Element im Array zugreifen a.length; Länge von Array a document.getElementById('someid') Gibt das Element mit der id someid zurück document.getElementsByTagName('tagname') Gibt ein Array mit allen Elementen welche Tag = tagname haben zurück Javascript Cheatsheet 2/3 element.addEventListener('action', function() {}, false); Fügt dem Element einen Listener für die Aktion 'action' hinzu, welche dann Methode function aufruf If (typeof element.function !== 'undefined'){} Überprüf ob ein Element über die Methode function verfügt. So kann überprüf werden ob Funktionen von z.B HTML5 vorhanden sind for(var i=0;i<a.length;i++) { For-Loop um durch ein Array durchzugehen <loop code> } Javascript Cheatsheet 3/3 element.hasAtribute('key'); Überprüf ob ein Element das Atribut mit Namen key hat element.setAtribute('key','value') Setzt das für Atribute key den Wert value element.removeAtribute('key') Entfernt Atribut key für das Element Offline – Schrit 1 ● ● Erstelle eine einfache HTML-Seite welche ein pElement hat Erstelle ein Javascript-File und definiere darin eine $ (document).ready(function() {}); Funktion ● Rufe darin alert('test'); auf ● Lade jQuery (siehe basic.html) ● Lade das Javascript im HTML-File und überprüfe ob das JS-File geladen und ausgeführt wird Offline – Schrit 2 ● ● ● Erstelle 2 Listener für das offline- und online-Event Erstelle in der Funktion welche bei beiden Events aufgerufen wird und darin eine Variable welche das p-Element referenziert (siehe basic.js). Es gibt zwei Möglichkeiten (eine bedingt, dass das HTML angepasst werden muss) Überprüfe ob der Browser online ist oder nicht und gib dies im p-Elment aus (Tipp: jQuery Dok) WebStorage - Schrit 1 ● Erstelle eine HTML5-Seite mit: <div id="local_stuff"> <p>Local Value:</p> <p id="local_value"></p> </div> <div id="session_stuff"> <p>Session Value:</p> <p id="session_value"></p> </div> ● Füge darunter ein Text-Input Element ein ● Füge einen Buton zur Seite hinzu <button id=“save“ type=“button“>Add to storage</button> WebStorage - Schrit 2 ● ● ● Erstelle ein Javascript-File und definiere darin eine $ (document).ready(function() {}) Funktion Erstelle ein Variable welche den buton referenziert (siehe basic.js). Gib die Variable mitels console.log(variable); aus WebStorage - Schrit 3 ● ● ● ● Füge dem buton ein Listener auf das Click-Event hinzu (siehe basic.js) Speichere die Eingabe im localStorage und dem sessionStorage. Die Eingabe erhältst du, wenn du auf beim input-Element .val() aufrufst. Überprüfe zuerst aber, ob localStorage und sessionStorage vom Browser unterstützt werden. Gib diese Werte in den p-Elementen aus (Tipp: jQuery Dok) Schau mit dem Developer Tool, ob die Daten auch wirklich gespeichert werden (Webkit -> unter dem Tab Ressources) WebStorage - Schrit 4 ● ● ● Überprüfe nun in der ready-Funktion, ob die Keys gespeichert sind oder nicht. Falls ja, gib die Inhalte (localStorage und sessionStorage) in den pElementen aus („Saved value: <value>“) Gib „Empty“ aus falls keine Werte im Storage sind Lade die Seite neu und schau was passiert. Schliesse das Tab und öfne ein neues mit der Seite. Entspricht das Verhalten den Erwartungen? WebStorage - Schrit 5 ● Erstelle einen zweiten Buton, der so die gespeicherten Daten löscht Ideen für weitere Übungen ● ● ● Lade dir htp://fh.trivialview.ch/websql/websql.zip hinunter. Versuche den Code zu verstehen. Versuche die Storage Übung mit WebSQL zu realisieren. Speichere alle Eingaben in der DB ab und stelle die EingabeHistory dar Schau das CSS Cheatsheet an htp://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ und versuche die Seiten zu stylen
