Was bringt HTML 5 für die Technische Dokumentation?
Unterstützung aller Hardware- und Software-Plattformen
HTML5 im Volksmund HTML5 =
Webtechnologien um HTML5 Quelle: Peter Kröner, http://html5-buch.de
Mobile Endgeräte sind die Technologietreiber Welche Technologie, welches Unternehmen setzt sich langfristig durch? Android (Google) Windows 8 mobile iox (Apple) unterstützt Flash unterstützt Flash boykottiert Flash Größter Zugewinn an Marktanteilen liegt derzeit bei Android
Web App vs. native App Web Wichtige Entscheidungskriterien Marketing Native Kosten Native Funktionen Offline Daten Entwicklung Gebrauch Freiheit beim Veröffentlichen Bedienoberfläche Nach Do I really need a app von Headscape.co.uk
Frameworks Phonegap Open-Source-Plattform Mit Hilfe der Plattform PhoneGap können Entwickler Programme für iphone, BlackBerry und Android- Handys schreiben, basierend auf HTML5, CSS3 und JavaScript. PhoneGap ist ein Projekt, das ein vorgefertigtes Set von Objective-C-Klassen mitliefert, mit Hilfe derer dann iphone-apps in JavaScript und HTML erstellt werden können. Vorteil von PhoneGap: iphone-apis können genutzt werden und so lassen sich in den JavaScript-Apps auch Funktionen wie Accelerometer oder Ortungsfunktion nutzen. Mit PhoneGap wird die Entwicklung insgesamt einfacher, da keine Kenntnisse in Objective-C und Cocoa benötigt werden.
Frameworks Phonegap ist ein Open Source Framework, um schnell und kostengünstig cross-plattform mobile Apps zu erstellen. Der Quellcode wird mit HTML5, JavaScript und CSS erstellt. Quelle: http://www.phonegap.com
Frameworks Sencha Touch 2.0 für App-Entwickler Mit Sencha Touch lassen sich Webapplikationen erstellen, die unter ios und Android im Browser laufen. Zusätzlich ist es möglich, ähnlich wie bei Phonegap, Hybride Apps zu generieren, die wie native Apps installierbar sind und als natives Paket in den App Store gestellt werden können. Sencha Touch 2.0 steht für Open-Source-Projekte quelloffen unter der GPLv3 zum Download zur Verfügung. Alternativ stehen weitere Lizenzoptionen für eine kommerzielle Verwendung und den Einsatz in Embedded-Umgebungen zur Auswahl.
Unterstützung von HTML5 Quelle: html5readiness.com
Interessante HTML5-Neuerungen für die TD HTML5 wird von einer Arbeitsgruppe (Microsoft, Apple, Mozilla, Opera und Adobe) betrieben und vom W3C toleriert und anerkannt. Neuerungen von HTML5, die sich für die Technische Dokumentation eignen: Native Unterstützung von Audio- und Videodateien. Canvas: Grafiken mit JavaScripts erstellen und animieren. SVG kann über ein <svg>-tag einfach eingebunden werden. Native 3D-Unterstützung mit WebGL.
HTML5 - Tools & Technologien? Adobe Edge HTML5/JS/CSS animation/interaction tool - http://labs.adobe.com/technologies/edge/ Less Framework CSS grid system/layout - http://lessframework.com/ Less alternative CSS syntax supports OO-like syntax referenced by Google at Google IO used in many projects - http://lesscss.org/ Saas another alternative CSS syntax similar to Less - http://sass-lang.com/ Kendo UI Framework (mobile coming soon) - http://www.kendoui.com/ Sencha - http://www.sencha.com/ - multiple products including Sencha Touch, Charts, etc. JQuery UI - http://jqueryui.com/ JQuery (core) - http://jquery.com/ JQuery Mobile - http://jquerymobile.com/ xui -minimalist JQuery-like framework - http://xuijs.com/ zepto.js minimalist JQuery-like framework - http://zeptojs.com/ Backbone.js MVC framework for JavaScript - http://documentcloud.github.com/backbone/ Underscore.js Kitchen-sink utilities for JavaScript - http://documentcloud.github.com/underscore/ Modernizr JavaScript library to detect device features very popular - http://modernizr.com/ cubiq.org home of iscroll, a very popular scroll/list lib - http://cubiq.org/ appmobi web-based dev with emulation, etc. Also has an HTML5-framework - http://www.appmobi.com/ LeviRoutes - lightweight routes framework for hooking in to HTML5 history - https://github.com/paulkinlan/leviroutes Mustache logic-less templates mentioned by Google presenters at Google IO - http://mustache.github.com/ Midori JavaScript framework JQuery-like with some unique features - http://www.midorijs.com/ Knockout.js JavaScript UI framework implements MVVM pattern recommended by Greg s brother popular - http://knockoutjs.com/ AngularJS MVC framework, two-way data binding, JQuery-compatible - http://angularjs.org/ JSFiddle online tool for doing lint/tidy/debugging - http://jsfiddle.net/ HighCharts fantastic looking charts - http://www.highcharts.com/ ZingCharts HTML5/SVG/VML and Flash charts - http://www.zingchart.com/#welcome AMCharts JavaScript/HTML5-based charts. They also offer Flash-based charts. - http://www.amcharts.com/javascript/ HTML5 Boiler Plate assist with cross-browser issues and other utils - http://html5boilerplate.com/ Bootstrap, from Twitter - Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. http://twitter.github.com/bootstrap/ Popcorn.js HTML5/JS Media Framework - http://popcornjs.org/ Three.js JavaScript 3D engine - https://github.com/mrdoob/three.js and http://www.aerotwist.com/lab/getting-started-with-three-js/ PhoneGap http://phonegap.com PhoneGap Plugins - https://github.com/phonegap/phonegap-plugins Require.js http://requirejs.org - RequireJS is a JavaScript file and module loader Brunch - http://brunch.io/ - A lightweight approach to building HTML5 applications with emphasis on elegance and simplicity.
Es gibt viele Möglichkeiten, HTML5 zu erzeugen 1. Editoren (Dreamweaver, notepad++,..); 2. Animationswerkzeuge wie Sencha Animator exportiert HTML5; 3. Tumult Hype ein reines Mac-Tool, um HTML5 zu erstellen; 4. Adobe Edge exportiert HTML5; 5. Adobe Flash 6 Export von HTML5 mittels Framework createjs; 6. Adobe Captivate 6 HTML5-Konvertierung, HTML5-Export 7. JavaScript Frameworks;
It s only (Rock n Roll) JavaScript, but I like it! Dreamweaver, Notepad++,
Sencha Animator Erstellt Web-Animationen auf Basis von CSS3; animiert Text sowie Bilder mit sanften Übergängen und erstellt Knöpfe mit Rundungen; unterstützt außer WebKit auch Browser von Mozilla. $ 199
Hype Hype" ist ein HTML5-Animations-Tool für Mac OS X, mit dem sich interaktive Websites in HTML5 realisieren lassen. There are no plans for a windows version yet. 40
Adobe Edge Edge ist Adobes Reaktion auf die wachsende Bedeutung von HTML5, JavaScript insbesondere jquery und CSS im Bereich der Web-Techniken.
HTML5-Export mit Adobe Captivate 6 möglich Wenn die Dateien einmal in HTML5 konvertiert sind, können sie mit jedem Editor weiter bearbeitet werden.
Adobe Flash 6 wiederbelebt durch createjs Für die Aufbereitung im HTML5-Format, bietet Adobe eine kostenlose Erweiterung für Adobe Flash Professional CS6: das Toolkit für CreateJS. Mit diesem Toolkit können die Animations- und Zeichenwerkzeuge von Flash bei der Entwicklung von HTML5-Inhalten genutzt werden.
createjs in Flash 6 starten Menü Fenster Andere Bedienfelder Toolkit for CreateJS
jquery Framework Ein Framework ist eine Erweiterung einer Programmiersprache. Das jquery Framework ist eine Erweiterung von JavaScript. Außer dem jquery Framework gibt es noch viele weitere JS-Frameworks, z.b.: Dojo Ext JS Prototype scripta.culo.us jquery ist das Framework, um Elemente zu finden, Elemente zu manipulieren, Inhalte einzufügen (AJAX), Bestandteile einer Seite zu animieren, Event Handling durchzuführen
Multimedia Dokumentation mit jquery $("#Elektromotor").mouseover( function() { $(this).css('cursor','pointer'); $("#" + this.id + "text").show(800); $("#" + this.id + "text").html(begriff[0]); }); $("#Abtriebswelle").mouseover( function() { $(this).css('cursor','pointer'); $("#" + this.id + "text").show(800); $("#" + this.id + "text").html(begriff[1]); }); $("#Elektromotor, #Abtriebswelle").mouseout( function() { $(this).css('cursor','auto'); $("#" + this.id + "text").hide(1500);
Ein kleines E-Learning-Programm mit jquery Drag & drop mit jquery
HTML5 in native Apps wandeln PhoneGap: Native Apps für Smartphones mit HTML5 entwickeln. Phone-Gap ist ein Open-Source-Framework, welches die Entwicklung von Apps für Smartphones auf Basis von HTML5 und JavaScript erlaubt - mit nativer Unterstützung der sieben größten Plattformen, sodass im Gegensatz zu Web Apps über ios, Windows Phone und Android hinweg auf Kamera, GPS, Kontakte, Speicher, Notifications und vieles mehr zugegriffen werden kann. Der Hersteller von PhoneGap, Nitobi, wurde von Adobe gekauft.
HTML5 in native Apps wandeln Sencha Touch Auf Basis von Ext JS und HTML 5 hat die Firma Sencha mit Sencha Touch ein Framework entwickelt, mit dem sich sehr einfach mobile Anwendungen für touch-fähige Geräte (Smartphones und Tablets) entwickeln lassen. Sencha Touch 2.0 für App-Entwickler Mit der Betaversion der separat erhältlichen Sencha SDK Tools gibt es jetzt die Möglichkeit, eine Anwendung als natives Paket für den App-Store aufzubereiten.
HTML5 schnell und einfach nutzen mit dem Video-Tag 3D-CAD-Daten Videokamera Screengrabber Animation Rendering Video Video Video
Videoformate für HTML5 HTML5 - Safari-Browser, Google Chrome benötigen mp4-dateien HTML5 Firefox, Internet Explorer benötigen ogg-dateien HTML5 Google + On2 forcieren das WebM-Format (*.webm) Einige Videokonverter VLC media player (*.ogg, *.mp4, *.webm ) Xmedia Recode (*.mp4, *.ogg, *.webm) AVS video converter (*.ogg, *.mp4, *.webm)
Von Browsern unterstützte Videoformate Internet Explorer Firefox Chrome Safari Opera Ogg Theora - ab 3.5 ab 3 Durch codec oder Plug-in-Installation H.264 ab 9 - noch (soll zukünftig nicht mehr unterstützt werden laut Google) WebM - (Google arbeitet an einem MSIE-Plugin für WebM) Quelle: nach ix Kompakt 2/2012 - Webdesign ab 3.1 - ab 4 ab 6 - (Google will ein Safari-Plugin für WebM liefern) ab 10.50 ab 10.60
Technologie-Mix Video, HTML, Javascript und XML
HTML5, JavaScript, CSS3 Es war einmal ein kleiner unscheinbarer <video> -Tag
HTML5 Video <video> as easy as <img>, so lautet die Botschaft. Manipulierbar durch JavaScript. Nutzbar für Spielereien wie rotierende oder zoomende Video-Fenster, aber auch zur script-gesteuerten Kontrolle von Videos. Beispiel: <video src="movie.ogv" controls="controls"> your browser does not support the video tag </video> Tipp: Es ist möglich Text zwischen die Tags zu schreiben, der nur angezeigt wird, wenn der Browser HTML5 nicht darstellen kann.
HTML5 Video Die Attribute des Video-Tags Attribute Value Beschreibung autoplay autoplay Das Video wird sofort abgespielt. controls controls Die Steuerelemente werden dargestellt. height pixels Die Höhe des Videoplayers in der HTML-Seite. width pixels Bestimmt die Breite des Videoplayers. preload preload Das Video wird in die Seite geladen und ist bereit zum abspielen. Das Attribut wird ignoriert, wenn autoplay gesetzt ist. src url Die URL des videos. loop loop Das Video wird, sobald es am Ende ist, wieder gestartet. muted muted Regelung der Lautstärke des Videos. Poster URL Die URL eines Bildes, das während das Video geladen wird an dessen Stelle sichtbar ist. Tutorials und Referenz zu HTML5 im Web: http://www.w3schools.com/html5/
HTML5 Video Der Source-Tag erlaubt mehrere Medienquellen für ein Element Der Source-Tag definiert Medienresourcen wie <video> und <audio>. <video controls="controls" autoplay="autoplay"> <source src="rollerfilm1.mp4" type='video/mp4; codecs="avc1.42e01e, mp4a.40.2"' /> // Safari, IE9, Chrome <source src="rollerfilm1.ogv" type='video/ogg; codecs="theora, vorbis"' /> // Mozilla, Firefox, Opera, Chrome </video> Attribute Wert Beschreibung media media_query Definiert den Typ der Medienquelle, um zu entscheiden ob das Medium herunter geladen wird oder nicht. src url Die URL der Medien. type MIME-Type Definiert den MIME-Type des Mediums.
HTML5 Video Dateiauswahl nach Media-Typ. Ähnlich wie in CSS können Media_queries ausgewählt werden. Zum Beispiel einen bestimmten Film für eine Smartphone-Auflösung. <video controls="controls" autoplay="autoplay"> <source src="video_klein.ogg" media="handheld"> <source src="video_normal.ogg" media="all"> </video> Source wird der Reihe nach verarbeitet. Findet ein Gerät das für sich Passende, z.b. handheld, dann wird nicht weiter gesucht.
HTML5 Video Das poster-attribut Falls ein Video nicht verfügbar sein sollte, kann als Ersatz ein statisches Bild angezeigt werden. <video src="video.ogv" width="427" height="240" controls="controls" poster="platzhalter.jpg"> </video>
HTML5 Video: DOM: Attribute Playback Attribute: currenttime: Anzeige abgespielte Zeit starttime: Die Startzeit des Videos (Streams) duration: Laufzeit in sec paused: Wurde das Video angehalten? ended: Ist das Video zu Ende? autoplay: Ist autoplay vorhanden? loop, autobuffer, seeking, defaultplaybackrate, playbackrate, seekable, buffered, played, volume, muted, readystate, networkstate, error var video = document.getelementbyid('video'); function springezu() { video.currenttime = 20; // Setzt Zeitstrahl auf die zwanzigsten Sekunde }
Übung 1: HTML5 Video JavaScript-API Filme einbinden und Schaltflächen anlegen <body> <video id="video" height="400" width="600"> <source src="bigbucktheora.mp4" type="video/mp4"> <source src="bigbucktheora.ogg" type="video/ogg"> </video> <p> <button id="start" onclick="start()">start/pause</button> <button id="stumm" onclick="stumm()">stummschalten</button> <button id="lauter" onclick="lauter()">lauter</button> <button id="leiser" onclick="leiser()">leiser</button> </p> </body>
Übung 1: HTML5 Video JavaScript-API Javascript Start/Pause <script type="text/javascript"> var video = document.getelementbyid('video'); function start() { if (video.paused == true) { video.play(); } else { video.pause(); } }
Übung 1: HTML5 Video JavaScript-API JavaScript Stumm schalten function stumm() { if(video.muted) { video.muted = false; } else { video.muted = true; } }
Übung 1: HTML5 Video JavaScript-API Javascript Lautstärkeregelung function lauter() { if(video.volume < 1) { video.volume = video.volume + 0.2; } } function leiser() { if(video.volume > 0) { video.volume = video.volume - 0.2; } } </script>
Übung 1: HTML5 Video Navigation des Videos Die Schaltfläche und das Textfeld für die Zeiteingabe: Zeit: <input name="" type="text" id="zeit"/> <button id="springe" onclick="springezu()">springe zu</button> Die Funktion springezu(), die zur gewünschten Sequenz führt: function springezu() { video.currenttime = document.getelementbyid('zeit').value; }
Übung 2: HTML5 Video Navigation des Videos über Text-Links
Übung 2: HTML5 Video Navigation des Videos über Text-Links <div class="container"> <video id="video" autoplay="autoplay" control="control" > <source src="bigbucktheora.mp4" type="video/mp4"> <source src="bigbucktheora.ogg" type="video/ogg"> </video> <a href="#" onclick="springezu(0)">1. Beginning </a><br /> <a href="#" onclick="springezu(4)">2. Using bow </a><br /> <a href="#" onclick="springezu(24)">3. The hit </a><br /> </div>
Übung 2: HTML5 Video Navigation des Videos über Text-Links Die CSS-Datei für das Layout: @charset "utf-8"; /* CSS Document */ div.container { margin: 0 auto; /* Container mittig setzen */ background-color: #333333; /* Hintergrundfarbe */ padding: 20px; /* Abstand des Inhalts zum Rand */ width: 600px; color: #EE3F20; -moz-border-radius: 20px; /* Eckenradiusangabe für Mozilla-Browser */ border-radius: 20px; /* Eckenradiusangabe für Webkit-Browser */ }
Übung 2: HTML5 Video Navigation des Videos über Text-Links Verlinkung der CSS-Datei in der HTML-Datei: <head> <title>demo: HTML5 video controls with JavaScript</title> <link href="example03.css" rel="stylesheet" type="text/css"> </head>
Übung 2: HTML5 Video Navigation des Videos über Text-Links Externe JavaScript-Datei: var video = document.getelementbyid('video'); function springezu(zeit) { video.currenttime = zeit; } Verlinkung der JS-Datei in der HTML-Datei: <script src="example03.js" type="text/javascript"></script>
Übung 3: HTML5 Video Übung zur Auswahl von Videos. Wir verwenden in diesem Beispiel nur ein Video-Format, um die Programmierung zunächst einfacher zu gestalten.
Übung 3: HTML5 Video Die Schritte: 1. Das Video in die HTML-Seite mit dem Video-Tag einbinden 2. Die Schaltflächen für das Starten und Stoppen, sowie das Eingabetextfeld und die Schaltfläche zum Springen einsetzen. 3. Die Select-Auswahl und die Schalfläche zum Laden des ausgewählten Videos erstellen. 4. Erstellen der Funktion lade(), um das ausgewählte Video zu laden und abzuspielen 5. Die Schaltflächen mit CSS3 gestalten mit Schaltflächenwerkzeugen aus dem Web, wie z.b. http://css3generator.com/.
Übung 3: HTML5 Video Übung zur Auswahl von Videos 1. Die Videoformate für die verschiedenen Browser einbinden (*.ogv, *.mp4) <video id="video" controls="controls" > <source src="kuehlturm_720_576.ogv" type="video/ogg"> <p>ihr Browser unterstützt den Video-Tag nicht! </p> </video>
Übung 3: HTML5 Video: Übung zur Auswahl von Videos 2. Die Funktionen springezu() und start() wurden auf den vorherigen Folien erläutert. <p> <button id="start" onclick="start()">start/pause</button> <input type="text" id="zeit" /> <button id="springe" onclick="springezu()">zu Szene springen</button> </p>
Übung 3: HTML5 Video: Übung zur Auswahl von Videos 3. Auswahl der Filme und die Funktion des Ladens des ausgewählten Films. Der Select-Tag mit den Auswahloptionen. <p> <select id="auswahl"> <option value="kuehlturm_720_576.ogv">kühlaggregat</option> <option value="tisch_720_576.ogv">klappmechanik</option> </select> <button id="laden" onclick="lade()">neue Sequenz laden</button> </p>
Übung 3: HTML5 Video: 4. Die Funktion, um ein ausgewähltes Video zu laden var myvideo = document.getelementbyid("video"); var zeit; function lade() { if (document.getelementbyid('auswahl').options[1].selected) { var film = document.getelementbyid('auswahl').options[1].value; } else { var film = document.getelementbyid('auswahl').options[0].value; } myvideo.src = film; myvideo.currenttime = 0; myvideo.load(); }
Übung 3: HTML5 Video: Design der Schaltflächen mit CSS3 gestalten. Hierzu gibt es CSS3-Generatoren im Web! z.b.: http://css3generator.com/ oder http://www.css3.me/ oder } button, input, #auswahl { border-top: 1px solid #96d1f8; background: #65a9d7; background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7)); background: -webkit-linear-gradient(top, #3e779d, #65a9d7); background: -moz-linear-gradient(top, #3e779d, #65a9d7); background: -ms-linear-gradient(top, #3e779d, #65a9d7); background: -o-linear-gradient(top, #3e779d, #65a9d7); padding: 5px 5px; -webkit-border-radius: 11px;
Übung 3_1: HTML5 Video Übung zur Auswahl von Videos. Erweiterung der Übung 3, um zwei Videoformate (ogg u. mp4) zu verwalten.
Übung 3_1: HTML5 Video: 5. Erweiterung des Beispiels um das zweite Video-Format mp4. <video id="video" controls="controls" height="576" width="768"> <source src="kuehlturm_720_576.ogv" type=video/ogg> <source src="kuehlturm_720_576.mp4" type=video/mp4> <p>video tag is not supported by your browser! </p> </video> Änderung der <select>-auswahl. Die Dateiendung wird weg gelassen und erst nach der Browser-Weiche über eine kleine Funktion an die Filmbezeichnung angehängt.
Übung 3_1: HTML5 Video: 6. Erkennung des Browsers indexof ermittelt das erste Vorkommen einer Zeichenkette innerhalb einer Zeichenkette. Wenn die Suche erfolglos ist, wird -1 zurückgegeben. var browser; if (navigator.useragent.indexof("opera")!= -1) { browser = "Opera"; } else if (navigator.useragent.indexof("safari")!= -1) { browser = "Safari"; } else if (navigator.useragent.indexof("netscape")!= -1) { browser = "Netscape"; } else if (navigator.appname.indexof("internet Explorer")!= -1) { browser = "Internet Explorer"; } else if (navigator.useragent.indexof("firefox")!= -1) { browser = "Firefox"; } else { browser = "Unbekannt"; }
Übung 3_1: HTML5 Video Übung zur Auswahl von Videos 7. Die Browserauswahl übergibt den Browser-Namen an die globale Variable browser. Die richtige Ausführung des Films (*.ogv, *.mp4) wird je nach Browser-Name in der Funktion lade() ausgewählt. function lade() { var film = document.getelementbyid('auswahl').value; } if (browser!= "Safari") { film = film + ".ogv"; video.src = film; } else { film = film + ".mp4"; video.src = film; } video.load();
Übung 4: HTML5 Video: Videof ilme automatisch nachladen
Übung 4: HTML5 Video: Videof ilme automatisch nachladen Die Schritte 1. Ein Videofilm wird mit dem Video-Tag eingebunden. 2. Eine Funktion zum Erkennen des Filmendes mit der addeventlistener()-methode wird erstellt. 3. Eine Funktion, um den neuen Film per Mausklick und automatisch zu laden, wird erstellt. Der HTML-Teil: <body onload="myaddlistener()"> </body> <video id="video" controls src="tisch_720_576.ogv" type="video/ogg" > </video> <br /> <button onclick="mynewsrc()"/>nächstes Video</button>
Übung 4: HTML5 Video: Videof ilme automatisch nachladen var myvideo = document.getelementbyid('video'); function myaddlistener(){ myvideo.addeventlistener('ended', mynewsrc, false); } function mynewsrc() { } if (myvideo.src.indexof("kuehlturm_720_576.ogv")!= -1){ myvideo.src="tisch_720_576.ogv"; } else{ myvideo.src="kuehlturm_720_576.ogv"; } myvideo.load(); myvideo.play();
Übung 4: HTML5 Video: addeventlistener() und DOM-Events Um einem Element die Events onmouseover, onmouseout oder onclick zuzuweisen, kann man die addeventlistener()-methode nutzen. Bsp.: var myvideo = document.getelementbyid("video"); myvideo.addeventlistener('mouseover', function() { myvideo.play(); }, false); myvideo.addeventlistener('mouseout', function() { myvideo.pause(); myvideo.currenttime = 0; }, false);
HTML5 Video Weitere DOM-Events der addeventlistener-methode ended Das Ende der Datei ist erreicht. abort Der Browser hat den Download abgebrochen. Die Datei ist nicht vollständig heruntergeladen. load Die Datei wurde vollständig heruntergeladen. loadeddata Die ersten Daten der Datei können abgespielt werden. progress Die Datei wird heruntergeladen. ratechange Die Die Wiedergabegeschwindigkeit hat sich geändert. timeupdate Die aktuelle Position des Zeitstrahls hat sich geändert.
Übung 5: HTML5 Video Zeitabhängig Texte einblenden
Übung 5: HTML5 Video Die Schritte 1. Die Videos werden in die HTML-Seite eingebunden. 2. Die beiden Texte, die zu unterschiedlichen Zeiten erscheinen sollen, werden innerhalb eines DIV-Containers erstellt. 3. Eine externe CSS-Datei, die die Position und das Aussehen der einzublendenden Texte bestimmt, wird erstellt. 4. Erstellung der Funktion, die ständig die Zeitposition des Filmes abfragt. 5. Erstellung der Funktion, die den entsprechenden Text aus- bzw. einblendet.
Übung 5: HTML5 Video - Zeitabhängig Texte einblenden Der HTML-Teil: <body onload="myaddlistener()"> <div id="container"> <video id="video" width="600px" height="450px" controls autoplay> <source src="tisch_720_576.mp4" type="video/mp4"> <source src="tisch_720_576.ogv" type="video/ogg"> </video> <div id="klappfuss">tischbeinhalterung mit Klappmechanismus</div> <div id="montage">montage des Tischbeins in der Tischbeinhalterung</div> </div> </body>
Übung 5: HTML5 Video - Zeitabhängig Texte einblenden Der CSS-Abschnitt: #Klappfuss { position:relative; padding:4px; width:590px; height:25px; z-index:2; left: 0px; top: -100px; font-family: Verdana, Geneva, sans-serif; font-size: 14pt; color: #FFF; visibility: hidden; font-weight: bold; background-color: #000000; text-align:center; border: thin solid #FF0; opacity: 0.3; }
Übung 5: HTML5 Video - Zeitabhängig Texte einblenden Der JavaScript-Teil: function myaddlistener(){ myvideo.addeventlistener('timeupdate',mynewsrc, false); } </script>
Übung 5: HTML5 Video - Zeitabhängig Texte einblenden Der JavaScript-Teil: <script type="text/javascript"> var myvideo = document.getelementbyid('video'); function mynewsrc() { if ((myvideo.currenttime > 5) && (myvideo.currenttime < 15)) { document.getelementbyid("klappfuss").style.visibility="visible"; } else { document.getelementbyid("klappfuss").style.visibility="hidden"; } if ((myvideo.currenttime > 18) && (myvideo.currenttime < 35)) { document.getelementbyid("montage").style.visibility = "visible"; } else {document.getelementbyid("montage").style.visibility = "hidden} }
AJAX-Einführung AJAX steht für Asynchronous Javascript And XML. Der Ursprung von AJAX ist Microsoft. Seit dem Internet Explorer 5 ist es möglich diese Technik einzusetzen. Zu Beginn nur ein Feature, implementiert als ein ActiveX-Control,. so wird es in den neuen Browsern als natives Browserobjekt implementiert Wozu ist AJAX gut? AJAX ermöglicht zum Beispiel die Sprachumschaltung einer HTML-Seite von Deutsch nach Englisch, ohne die HTML-Seite neu zu laden. Es werden in der bestehenden HTML-Seite nur die Texte ausgetauscht.
Was bei AJAX passiert 1. Aufruf einer URL per Link oder über die Adressleiste. 2. Der Webserver liefert eine HTML-Seite mit JavaScript. 3. Das JavaScript erzeugt auf dem Client-Rechner das XMLHttpRequest-Objekt. 4. Das Objekt schickt bei einem beliebigen JavaScript-Ereignis eine Anforderung an ein XML-Dokument. 5. JavaScript in der HTML-Seite auf dem Client-Rechner erhält den Inhalt des XML-Dokuments. 6. JavaScript tauscht Texte auf der HTML-Seite gegen Texte aus dem XML-Dokument aus.
Wie funktioniert AJAX? Erweiterung des Beispiels um Sprachen 1. Erstellen je einer XML-Datei pro Sprache. deutsch.xml und englisch.xml 2. Übersetzen des Textes in der englischen Datei englisch.xml. 3. Einfügen eines DIV-Containers für die Textausgabe. 4. Schreiben des Textes in den DIV-Container in der Funktion alertcontents. document.getelementbyid("apdiv1").innerhtml = root_node.firstchild.data; 5. Einfügen der Flaggen-Bilder und deren Verlinkung mit #. 6. URL-Zugriff auf die XML-Datei in eine Funktion sprachauswahl(sprachdatei) einbinden. 7. Aufruf der Funktion mit einem Klick auf die jeweilige Flagge und Übergabe der entsprechenden Sprachdatei an die Funktion. <a href="#" onclick="sprachauswahl('englisch.xml')">
Übung 6: HTML5 Video, AJAX Interaktive, mehrsprachige Videoanleitung mit HTML5, JavaScript, AJAX und XML
Übung 6: HTML5 Video, AJAX Die deutsche XML-Datei <?xml version='1.0' encoding='utf-8'?> <films> <filme>4</filme> <filmtyp>.ogg</filmtyp> <filmtyp>.mp4</filmtyp> <filmname>planeten_dem_seq</filmname> <filmtexte>gehäuse öffnen</filmtexte> <filmtexte>gehäuse auseinander ziehen</filmtexte> <filmtexte>planetenträger lösen</filmtexte> <filmtexte>zahnräder demontieren</filmtexte> </films>
jqtouch Web-Seiten für mobile Geräte mit jqtouch und jquery_mobile Die wesentlichen Unterschiede zu normalen Computern: Touch-Events sind keine Mouse-Events. Die Bedienungsmetaphern sind andere (wischen, blättern). Es treten neuartige Events wie Mehrfingergesten auf (für Zoom etc.).
jqtouch Ins mobile Web mit jquery und jqtouch Die einzubindenden Dateien: <link rel="stylesheet" type="text/css" href="../jqtouch/jqtouch/jqtouch.css"/> <link rel="stylesheet" type="text/css" href="../jqtouch/themes/jqt/theme.css"/> <script type="text/javascript" src="../jqtouch/jqtouch/jquery-1.4.2.min.js"></script> <script src="../jqtouch/jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"> </script> jqtouch wurde im gleichen Ordner installiert wie die Übungsordner. Deshalb beginnt der Pfad immer mit../jqtouch/.
jqtouch Der Scriptcontainer: <script language="javascript"> $.jqtouch({ statusbar: 'black' }); </script> Grundkonfiguration der jqtouch-seite. An dieser Stelle wird lediglich das Aussehen der Statusleiste festgelegt.
jqtouch Die Home-Seite <body> <div id="s1"> // Die erste Seite wird über ein div und eine id initiiert <div class="toolbar"> // Zuweisen der toolbar <h1>home</h1> // Der Text home wird in der toolbar angezeigt </div> <ul class="edgetoedge"> // Eine Navigation wird durch eine <ul>- // Liste definiert, das Aussehen durch // die CSS-Klasse edgetoedge. <li><a href="#s2">seite 2</a></li> <li><a href="#s3">seite 3</a></li> <li><a href="#s4">seite 4</a></li> </ul> </div>
Literatur und Links Hauser, T./ Wenz, C. / Maurice, F. (2008): Das Website Handbuch. Markt + Technik Verlag, München, 248-349 Hogan, Brian P. (2011) HTML5 & CSS3. Webentwicklungen mit den Standards von morgen. 1. Aufl. Köln, O Reilly Verlag GmbH & Co.KG. ix Kompakt Webdesign (2012) HTML5 und CSS3. Hannover, Verlag Heise Koch, Daniel. (2011) HTML5 - Grundlagen & Praxislösungen. Düsseldorf, Verlag Data Becker. Kröner, Peter (2010) HTML5 Webseiten innovativ und zukunftssicher. München, Verlag Open Source Press. Vollendorf, Maximilian./ Bongers Frank. (2010): jquery Das Praxishandbuch. Bonn, Galileo Press. Wenz, Christian (2007) Javascript & AJAX. Das umfassende Handbuch. 7. Aufl. Bonn, Galileo Press. Vollendorf, M./ Bongers F. (2010): jquery Das Praxishandbuch. Bonn, Galileo Press. Wenz, Christian (2007): Javascript & AJAX. Das umfassende Handbuch. 7. Aufl. Bonn, Galileo Press. Wenz, Christian (2007) Javascript & AJAX. Das umfassende Handbuch. 7. Aufl. Bonn, Galileo Press. http://openbook.galileocomputing.de/javascript_ajax/ Wacker, S. (2007): selfhtml.org. SELFHTML e.v., Kiel http://selfhtml.org/ und http://de.selfhtml.org/javascript/index.htm http://www.html-world.de/program/ajax_2.php http://jquery.com http://jquerymobile.com/demos/1.0/ http://slides.html5rocks.com/#landing-slide
Kontakt: Prof. Martin Schober Informations- und Medientechnik Leiter Studiengang Kommunikation und Medienmanagement Bachelor KMM Hochschule Karlsruhe - Technik und Wirtschaft Fakultät für Informationsmanagement und Medien Postanschrift: Postfach 24 40, 76012 Karlsruhe Besucheranschrift: Amalienstr. 81-87 76133 Karlsruhe Raum AM 113 fon +49 (0)721 925-2990 fax +49 (0)721 925-1125 martin.schober@hs-karlsruhe.de www.technischeredaktion.com