Was bringt HTML 5 für die Technische Dokumentation?
|
|
- Irma Hauer
- vor 8 Jahren
- Abrufe
Transkript
1 Was bringt HTML 5 für die Technische Dokumentation?
2 Unterstützung aller Hardware- und Software-Plattformen
3 HTML5 im Volksmund HTML5 =
4 Webtechnologien um HTML5 Quelle: Peter Kröner,
5 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
6 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
7 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.
8 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:
9 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.
10 Unterstützung von HTML5 Quelle: html5readiness.com
11 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.
12 HTML5 - Tools & Technologien? Adobe Edge HTML5/JS/CSS animation/interaction tool - Less Framework CSS grid system/layout - Less alternative CSS syntax supports OO-like syntax referenced by Google at Google IO used in many projects - Saas another alternative CSS syntax similar to Less - Kendo UI Framework (mobile coming soon) - Sencha multiple products including Sencha Touch, Charts, etc. JQuery UI - JQuery (core) - JQuery Mobile - xui -minimalist JQuery-like framework - zepto.js minimalist JQuery-like framework - Backbone.js MVC framework for JavaScript - Underscore.js Kitchen-sink utilities for JavaScript - Modernizr JavaScript library to detect device features very popular - cubiq.org home of iscroll, a very popular scroll/list lib - appmobi web-based dev with emulation, etc. Also has an HTML5-framework - LeviRoutes - lightweight routes framework for hooking in to HTML5 history - Mustache logic-less templates mentioned by Google presenters at Google IO - Midori JavaScript framework JQuery-like with some unique features - Knockout.js JavaScript UI framework implements MVVM pattern recommended by Greg s brother popular - AngularJS MVC framework, two-way data binding, JQuery-compatible - JSFiddle online tool for doing lint/tidy/debugging - HighCharts fantastic looking charts - ZingCharts HTML5/SVG/VML and Flash charts - AMCharts JavaScript/HTML5-based charts. They also offer Flash-based charts. - HTML5 Boiler Plate assist with cross-browser issues and other utils - Bootstrap, from Twitter - Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. Popcorn.js HTML5/JS Media Framework - Three.js JavaScript 3D engine - and PhoneGap PhoneGap Plugins - Require.js - RequireJS is a JavaScript file and module loader Brunch A lightweight approach to building HTML5 applications with emphasis on elegance and simplicity.
13 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;
14 It s only (Rock n Roll) JavaScript, but I like it! Dreamweaver, Notepad++,
15 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
16 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
17 Adobe Edge Edge ist Adobes Reaktion auf die wachsende Bedeutung von HTML5, JavaScript insbesondere jquery und CSS im Bereich der Web-Techniken.
18 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.
19 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.
20 createjs in Flash 6 starten Menü Fenster Andere Bedienfelder Toolkit for CreateJS
21 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
22 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);
23 Ein kleines E-Learning-Programm mit jquery Drag & drop mit jquery
24 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.
25 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.
26 HTML5 schnell und einfach nutzen mit dem Video-Tag 3D-CAD-Daten Videokamera Screengrabber Animation Rendering Video Video Video
27 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)
28 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/ Webdesign ab ab 4 ab 6 - (Google will ein Safari-Plugin für WebM liefern) ab ab 10.60
29 Technologie-Mix Video, HTML, Javascript und XML
30 HTML5, JavaScript, CSS3 Es war einmal ein kleiner unscheinbarer <video> -Tag
31 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.
32 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:
33 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.
34 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.
35 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>
36 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 }
37 Ü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>
38
39 Ü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(); } }
40 Übung 1: HTML5 Video JavaScript-API JavaScript Stumm schalten function stumm() { if(video.muted) { video.muted = false; } else { video.muted = true; } }
41 Ü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>
42 Ü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; }
43 Übung 2: HTML5 Video Navigation des Videos über Text-Links
44 Ü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>
45 Übung 2: HTML5 Video Navigation des Videos über Text-Links Die CSS-Datei für das "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 */ }
46 Ü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>
47 Ü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>
48 Ü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.
49 Ü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.
50 Ü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>
51 Ü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>
52 Ü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>
53 Ü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(); }
54 Übung 3: HTML5 Video: Design der Schaltflächen mit CSS3 gestalten. Hierzu gibt es CSS3-Generatoren im Web! z.b.: oder 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;
55 Übung 3_1: HTML5 Video Übung zur Auswahl von Videos. Erweiterung der Übung 3, um zwei Videoformate (ogg u. mp4) zu verwalten.
56 Ü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.
57 Ü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"; }
58 Ü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();
59 Übung 4: HTML5 Video: Videof ilme automatisch nachladen
60 Ü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>
61 Ü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();
62 Ü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);
63 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.
64 Übung 5: HTML5 Video Zeitabhängig Texte einblenden
65 Ü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.
66 Ü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>
67 Ü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; }
68 Übung 5: HTML5 Video - Zeitabhängig Texte einblenden Der JavaScript-Teil: function myaddlistener(){ myvideo.addeventlistener('timeupdate',mynewsrc, false); } </script>
69 Ü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} }
70 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.
71 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.
72 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')">
73 Übung 6: HTML5 Video, AJAX Interaktive, mehrsprachige Videoanleitung mit HTML5, JavaScript, AJAX und XML
74 Ü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>
75 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.).
76 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 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/.
77 jqtouch Der Scriptcontainer: <script language="javascript"> $.jqtouch({ statusbar: 'black' }); </script> Grundkonfiguration der jqtouch-seite. An dieser Stelle wird lediglich das Aussehen der Statusleiste festgelegt.
78 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>
79 Literatur und Links Hauser, T./ Wenz, C. / Maurice, F. (2008): Das Website Handbuch. Markt + Technik Verlag, München, 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. Wacker, S. (2007): selfhtml.org. SELFHTML e.v., Kiel und
80 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, Karlsruhe Besucheranschrift: Amalienstr Karlsruhe Raum AM 113 fon +49 (0) fax +49 (0) martin.schober@hs-karlsruhe.de
Ab in die App, aber bezahlbar! 06.11.2013 tekom - Wiesbaden Prof. Dipl.-Ing. Martin Schober
Ab in die App, aber bezahlbar! Unterstützung aller Geräte und Betriebssysteme, ohne den SingleSource-Ansatz aufzugeben! Alle App Stores im Überblick: itunes App Store http://www.apple.com/itunes/store
MehrWebseiten und Web-Apps grafisch gestalten mit HTML5 Canvas ohne Flash und sonstige Tools
Webseiten und Web-Apps grafisch gestalten mit HTML5 Canvas ohne Flash und sonstige Tools 1 Kurze HTML-Geschichte Die HTML4-Spezifikation wurde im Dezember 1997 vorgelegt. Seitdem Stagnation! Das W3C arbeitete
MehrMultimediale und mobile Dokumentation erstellen! 18.02.2014 tekom - München Prof. Dipl.-Ing. Martin Schober
Multimediale und mobile Dokumentation erstellen! Unterstützung aller Geräte und Betriebssysteme, ohne den SingleSource-Ansatz aufzugeben! Alle App Stores im Überblick: itunes App Store http://www.apple.com/itunes/store
MehrApp Entwicklung mit Hilfe von Phonegap. Web Advanced II - SS 2012 Jennifer Beckmann
App Entwicklung mit Hilfe von Phonegap Web Advanced II - SS 2012 Jennifer Beckmann http://www.focus.de/digital/internet/netzoekonomie-blog/smartphone-googles-android-laeuft-konkurrenz-in-deutschland-davon_aid_723544.html
MehrEinbindung von Videos im ZMS
Einbindung von Videos im ZMS Videos können auf Ihrer ZMS-Website auf vier verschiedene Arten eingebunden werden: - Video-Link (z.b. You Tube) - Real Media Stream - Video-Datei - Flash-Datei Um ein Video
MehrMit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken.
Seite erstellen Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken. Es öffnet sich die Eingabe Seite um eine neue Seite zu erstellen. Seiten Titel festlegen Den neuen
MehrHilfe bei Adobe Reader. Internet Explorer 8 und 9
Hilfe bei Adobe Reader Internet Explorer 8 und 9 1. Öffnen Sie Internet Explorer und wählen Sie Extras > Add-Ons verwalten. 2. Wählen Sie unter Add-On-Typen die Option Symbolleisten und Erweiterungen aus.
MehrPräsentation Von Laura Baake und Janina Schwemer
Präsentation Von Laura Baake und Janina Schwemer Gliederung Einleitung Verschiedene Betriebssysteme Was ist ein Framework? App-Entwicklung App-Arten Möglichkeiten und Einschränkungen der App-Entwicklung
MehrDie Beschreibung bezieht sich auf die Version Dreamweaver 4.0. In der Version MX ist die Sitedefinition leicht geändert worden.
In einer Website haben Seiten oft das gleiche Layout. Speziell beim Einsatz von Tabellen, in denen die Navigation auf der linken oder rechten Seite, oben oder unten eingesetzt wird. Diese Anteile der Website
MehrBenutzerleitfaden MobDat-CSG (Nutzung des Heimrechners für dienstliche Zwecke)
Benutzerleitfaden MobDat-CSG (Nutzung des Heimrechners für dienstliche Zwecke) Verfasser/Referent: IT-Serviceline Hardware und Infrastruktur, DW 66890 Inhaltsverzeichnis 1 Allgemeines... 3 2 Windows XP
MehrEin- und Umbau von Spielen, Videos, Ton. Seitenstark-Fachtag, 13.Juni 2016
Ein- und Umbau von Spielen, Videos, Ton Seitenstark-Fachtag, 13.Juni 2016 Herausforderung Spieleumbau Ausgangssituation Ein beliebtes, bewährtes Spiel einer Website soll neu aufgelegt werden, damit es
MehrJava Script für die Nutzung unseres Online-Bestellsystems
Es erreichen uns immer wieder Anfragen bzgl. Java Script in Bezug auf unser Online-Bestell-System und unser Homepage. Mit dieser Anleitung möchten wir Ihnen einige Informationen, und Erklärungen geben,
MehrDi 8.4. Silverlight: Windows Presentation Foundation für s Web. Christian Wenz
Di 8.4 January 21-25, 2008, Munich, Germany ICM - International Congress Centre Munich Silverlight: Windows Presentation Foundation für s Web Christian Wenz Silverlight // WPF für s Web OOP 2008 // Di
MehrSeite 1 von 14. Cookie-Einstellungen verschiedener Browser
Seite 1 von 14 Cookie-Einstellungen verschiedener Browser Cookie-Einstellungen verschiedener Browser, 7. Dezember 2015 Inhaltsverzeichnis 1.Aktivierung von Cookies... 3 2.Cookies... 3 2.1.Wofu r braucht
MehrDesignänderungen mit CSS und jquery
Designänderungen mit CSS und jquery In der epages-administration gibt es in den Menüpunkten "Schnelldesign" und "Erweitertes Design" umfangreiche Möglichkeiten, das Design der Webseite anzupassen. Erfahrene
Mehr2. ERSTELLEN VON APPS MIT DEM ADT PLUGIN VON ECLIPSE
2. ERSTELLEN VON APPS MIT DEM ADT PLUGIN VON ECLIPSE 2.1 Die Einrichtung der Benutzeroberfläche Das Einrichten einer Android-Eclipse-Entwicklungsumgebung zur Android-Entwicklung ist grundsätzlich nicht
MehrDCCS Lotusphere Nachlese 2012 Was sind XPages? Mobile Features für XPages
Wir automatisieren und optimieren Ihre Geschäftsprozesse DCCS Lotusphere Nachlese 2012 Was sind XPages? Mobile Features für XPages Thomas Brandstätter 06.03.2012 www.dccs.at Agenda Theorie Was sind XPages
Mehr1. Starte die gewünschte Browseranwendung durch Klick auf den Screenshot.
Benutzerhinweise zur digitalen Datenaufnahme Mit den von Esri kostenfrei bereitgestellten Anwendungen zur digitalen Datenaufnahme kannst du Daten am Computer oder direkt im Gelände mit mobilen Geräten
MehrWindows 10. Vortrag am Fleckenherbst Bürgertreff Neuhausen. www.buergertreff-neuhausen.de www.facebook.com/buergertreffneuhausen
Windows 10 Vortrag am Fleckenherbst Bürgertreff Neuhausen 1 Inhalt Was ist neu (im Vergleich zu Windows 8.1) Wann lohnt sich ein Umstieg Update Installation von Windows 10 Startmenü Windows Explorer Webbrowser
MehrDie i-tüpfelchen: Favicons
Schenken Sie Ihrer URL ein eigenes Icon Sie werden lernen: Wo werden Favicons überall angezeigt? Wie kommen Favicons in die Adressleiste? So erstellen Sie Favicons auf Windows und Mac Ein Favicon für unsere
Mehr1. Laptop: Benutzen Sie die Anleitung ab Seite 2 2. Tablet / Smartphone: Benutzen Sie die Anleitung ab Seite 4. Seite 2 Seite 4
Kanton Schaffhausen Schulentwicklung und Aufsicht Herrenacker 3 CH-8200 Schaffhausen www.sh.ch Anleitung Installation Offline-Version Lehrplan 21 Für die Arbeit mit dem Lehrplan während der Tagung vom
MehrEin mobiler Electronic Program Guide
Whitepaper Telekommunikation Ein mobiler Electronic Program Guide Ein iphone Prototyp auf Basis von Web-Technologien 2011 SYRACOM AG 1 Einleitung Apps Anwendungen für mobile Geräte sind derzeit in aller
MehrSchulung Marketing Engine Thema : Einrichtung der App
Schulung Marketing Engine Thema : Einrichtung der App Videoanleitung : http://www.edge-cdn.net/video_885168?playerskin=48100 Marketing Engine Tool : App Paket : Basis / Premium Version 1.0-09.07.2015 1
MehrRevit Modelle in der Cloud: Autodesk 360 Mobile
Revit Modelle in der Cloud: Autodesk 360 Mobile Die Präsentation Ihrer Revit Modelle kann auf unterschiedlichste Weise erfolgen. Diverse Cloud Plattformen bieten kostenlosen Speicherplatz und Freigabeoptionen
MehrYouTube ist nicht alles!
YouTube ist nicht alles! Über Videopodcasts, HTML5, webm, Matroska und den ganzen anderen modernen Kram. Referent: Fabio Bacigalupo Videocamp, 20. Juni 2010 Der Begriff des Podcasts Was sind, sollen und
MehrLogics App-Designer V3.1 Schnellstart
Logics App-Designer V3.1 Schnellstart Stand 2012-09-07 Logics Software GmbH Tel: +49/89/552404-0 Schwanthalerstraße 9 http://www.logics.de/apps D-80336 München mailto:apps@logics.de Inhalt Ihr Logics Zugang...
MehrCSS-Grundlagen. Etwas über Browser. Kapitel. Die Vorbereitung
Kapitel 1 Die Vorbereitung Vorgängerversionen. Bald darauf folgte dann schon die Version 4, die mit einer kleinen Bearbeitung bis vor Kurzem 15 Jahre unverändert gültig war. All das, was du die letzten
Mehrsm@rt-tan plus Flickerfeld bewegt sich nicht
Technischer Hintergrund Um die Verwendung des Verfahrens Sm@rt-TAN plus des neuen sicheren TAN- Verfahrens so komfortabel wie möglich zu gestalten, wurde eine Möglichkeit geschaffen, die Angaben einer
MehrDie Dateiablage Der Weg zur Dateiablage
Die Dateiablage In Ihrem Privatbereich haben Sie die Möglichkeit, Dateien verschiedener Formate abzulegen, zu sortieren, zu archivieren und in andere Dateiablagen der Plattform zu kopieren. In den Gruppen
MehrInternet Explorer Version 6
Internet Explorer Version 6 Java Runtime Ist Java Runtime nicht installiert, öffnet sich ein PopUp-Fenster, welches auf das benötigte Plugin aufmerksam macht. Nach Klicken auf die OK-Taste im PopUp-Fenster
MehrEinführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK
Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK und dem Responsive Webdesign vertraut. Es wird
MehrAdOps Technische Spezifikationen
AdOps Technische Spezifikationen HTML5-Werbemittel (Desktop) Bei der Verwendung von Redirects müssen diese Spezifikationen nicht beachtet werden. Physische Anlieferung von HTML5-Werbemitteln + Trackings.
MehrWordPress. Dokumentation
WordPress Dokumentation Backend-Login In das Backend gelangt man, indem man hinter seiner Website-URL einfach ein /wp-admin dranhängt www.domain.tld/wp-admin Dabei gelangt man auf die Administrationsoberfläche,
MehrMeldung Lokale Anwendung inkompatibel oder Microsoft Silverlight ist nicht aktuell bei Anmeldung an lokal gespeicherter RWE SmartHome Anwendung
Meldung Lokale Anwendung inkompatibel oder Microsoft Silverlight ist nicht aktuell bei Anmeldung an lokal gespeicherter RWE SmartHome Anwendung Nach dem Update auf die Version 1.70 bekommen Sie eine Fehlermeldung,
MehrEinführung in die Cross-Plattform Entwicklung Das Intel App Framework
Einführung in die Cross-Plattform Entwicklung Das Intel App Framework Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel App Framework vom Intel XDK vertraut. Es wird Schritt für Schritt
MehrDokumentation für Popup (lightbox)
Dokumentation für Popup (lightbox) Für das Popup muss eine kleine Anpassung im wpshopgermany Plugin vorgenommen werden und zwar in der Datei../wp-content/plugins/wpshopgermany/controllers/WarenkorbController.class.php
MehrKlicken Sie auf den Reiter Newsfeed (1) in der oberen Menüleiste und wählen Sie dann links in der schmalen grauen Leiste Neuer Newsfeed (2) aus:
Seite 1 Wenn Sie daran interessiert sind, aktuelle Informationen über Ihr Unternehmen auf Ihrer Internetpräsenz zu veröffentlichen, ist die Newsfeed-Funktion von meltwater news genau das richtige für Sie.
MehrIhr CMS für die eigene Facebook Page - 1
Ihr CMS für die eigene Facebook Page Installation und Einrichten eines CMS für die Betreuung einer oder mehrer zusätzlichen Seiten auf Ihrer Facebook Page. Anpassen der "index.php" Installieren Sie das
MehrTutorial. 1. Neue Animation erstellen 2. Kartenobjekte animieren 3. Film erstellen. Tutorial 1
Tutorial 1 Tutorial Zur Einführung in MapCreator Studio erstellen wir eine animierte Karte für einen Videofilm einer Australienreise. Dazu werden wir aus einer mit MapCreator erstellten Karte eine Animation
MehrEinfügen von Bildern innerhalb eines Beitrages
Version 1.2 Einfügen von Bildern innerhalb eines Beitrages Um eigene Bilder ins Forum einzufügen, gibt es zwei Möglichkeiten. 1.) Ein Bild vom eigenem PC wird auf den Webspace von Baue-die-Bismarck.de
MehrSMART Newsletter Education Solutions April 2015
SMART Education Newsletter April 2015 SMART Newsletter Education Solutions April 2015 Herzlich Willkommen zur aktuellen Ausgabe des Westcon & SMART Newsletters jeden Monat stellen wir Ihnen die neuesten
MehrANLEITUNG EBOOKS. 1. Der Kauf von ebooks über den Onlineshop
ANLEITUNG EBOOKS 1. Der Kauf von ebooks über den Onlineshop Wenn Sie über unseren Onlineshop ein ebook (im Dateiformat epub) erworben haben, erhalten Sie zunächst eine Benachrichtigung per E-Mail (zusätzlich
MehrInstallation von NetBeans inkl. Glassfish Anwendungs-Server
Installation von NetBeans inkl. Glassfish Anwendungs-Server Diese Anleitung führt Sie Schritt für Schritt durch die Einrichtung der Entwicklungsumgebung NetBeans, angefangen beim Download der benötigten
MehrLokale Installation von DotNetNuke 4 ohne IIS
Lokale Installation von DotNetNuke 4 ohne IIS ITM GmbH Wankelstr. 14 70563 Stuttgart http://www.itm-consulting.de Benjamin Hermann hermann@itm-consulting.de 12.12.2006 Agenda Benötigte Komponenten Installation
Mehr«Integration in WebSite» HTML-/Javascript-Code-Beispiele
QuickInfo «Integration in WebSite» HTML-/Javascript-Code-Beispiele Fragen? Ihre Umfrage soll direkt in resp. auf Ihrer WebSite erscheinen? Die Möglichkeiten für eine technische Integration an exakten Stellen
MehrDie derzeit bekanntesten Alternativen zum Browser von Microsoft sind Mozilla Firefox, Google Chrom und Opera.
Webbrowser Webbrowser stellen die Benutzeroberfläche für Webanwendungen dar. Webbrowser oder allgemein auch Browser (engl. to browse heißt stöbern, schmökern, umsehen) sind spezielle Computerprogramme
MehrMetaQuotes Empfehlungen zum Gebrauch von
MetaQuotes Empfehlungen zum Gebrauch von MetaTrader 4 auf Mac OS Auch wenn viele kommerzielle Angebote im Internet existieren, so hat sich MetaQuotes, der Entwickler von MetaTrader 4, dazu entschieden
MehrFEHLER! TEXTMARKE NICHT DEFINIERT.
Inhaltsverzeichnis 1 ALLGEMEINE INFORMATIONEN 2 2 SYNCHRONISATION MIT DEM GOOGLE KALENDER FEHLER! TEXTMARKE NICHT DEFINIERT. 3 OPTIONALE EINSTELLUNGEN 5 1. Allgemeine Informationen Was ist neu? Ab sofort
MehrMeine erste Homepage - Beispiele
Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir
MehrPassword Depot für ios
Password Depot für ios Inhaltsverzeichnis Erste Schritte... 1 Kennwörterdatei erstellen... 1 Neue Einträge erstellen... 3 Einträge / Gruppen hinzufügen... 3 Einträge / Gruppen kopieren oder verschieben...
MehrArbeiten mit UMLed und Delphi
Arbeiten mit UMLed und Delphi Diese Anleitung soll zeigen, wie man Klassen mit dem UML ( Unified Modeling Language ) Editor UMLed erstellt, in Delphi exportiert und dort so einbindet, dass diese (bis auf
MehrMagento Theming Ein Einstieg Rainer Wollthan
Magento Theming Ein Einstieg Rainer Wollthan Überblick Vorbereitung Datei Struktur Adminbereich Layout XML Block Template Magento Theming macht Spaß! Vorbereitung Produkte Marketingmaßnahmen Design Länder
MehrCOSA. Portal Client Installation JAVA J2SE / JRE Version 1.4.2_09, Stand 01.08.2005-08-16. Copyright
Portal Client Installation JAVA J2SE / JRE Version 1.4.2_09, Stand 01.08.2005-08-16 Änderungen in Dokumentation und Software sind vorbehalten! Copyright Copyright 2005 COSA GmbH Alle Rechte vorbehalten.
MehrKlausurteilnehmer. Wichtige Hinweise. Note: Klausur Informatik Programmierung, 17.09.2012 Seite 1 von 8 HS OWL, FB 7, Malte Wattenberg.
Klausur Informatik Programmierung, 17.09.2012 Seite 1 von 8 Klausurteilnehmer Name: Matrikelnummer: Wichtige Hinweise Es sind keinerlei Hilfsmittel zugelassen auch keine Taschenrechner! Die Klausur dauert
MehrGEONET Anleitung für Web-Autoren
GEONET Anleitung für Web-Autoren Alfred Wassermann Universität Bayreuth Alfred.Wassermann@uni-bayreuth.de 5. Mai 1999 Inhaltsverzeichnis 1 Technische Voraussetzungen 1 2 JAVA-Programme in HTML-Seiten verwenden
Mehr1 Medien einbinden... 3 2 Definition der Medientypen... 4 3 Options-Argumente... 5 4 Ein Bild einbinden... 7
Medien einbinden Inhalt 1 Medien einbinden... 3 2 Definition der Medientypen... 4 3 Options-Argumente... 5 4 Ein Bild einbinden... 7 4.1 Bild einbinden mittels Medien-Icon... 7 4.2 Bild einbinden mittels
MehrSchulung Marketing Engine Thema : Einrichtung der App
Schulung Marketing Engine Thema : Einrichtung der App Videoanleitung : http://www.edge-cdn.net/video_885168?playerskin=48100 Marketing Engine Tool : App Paket : Basis / Premium Version 2.0-03.11.2015 1
MehrCross-Platform Mobile Apps
Cross-Platform Mobile Apps 05. Juni 2013 Martin Wittemann Master of Science (2009) Arbeitet bei 1&1 Internet AG Head of Frameworks & Tooling Tech Lead von qooxdoo Plattformen Java ME 12 % Rest 7 % Android
MehrCarolo Knowledge Base
KB 07: Wie stelle ich ein fremdsprachiges Layout ein? (1) My-T-Soft verhält sich bezüglich fremdsprachiger Layouts wie eine physische Tastatur, d.h. sie liefert lediglich die Codes für die einzelnen Tasten.
MehrSeminar DWMX 2004. DW Session 015
Seminar DWMX 2004 DW Session 015 Veröffentlichen der lokalen Website Bis jetzt sind die Daten immer lokal in Dreamweaver bearbeitet und über die interne Vorschau mit F12/Strg.+F12 im Browser betrachtet
MehrMusterlösung für Schulen in Baden-Württemberg. Windows 2003. Basiskurs Windows-Musterlösung. Version 3. Stand: 19.12.06
Musterlösung für Schulen in Baden-Württemberg Windows 2003 Basiskurs Windows-Musterlösung Version 3 Stand: 19.12.06 Impressum Herausgeber Zentrale Planungsgruppe Netze (ZPN) am Kultusministerium Baden-Württemberg
MehrEinführung Responsive Webdesign
Einführung Responsive Webdesign Aktuelle Situation Desktop Webseiten Umsetzungen auch heute noch in den meisten Fällen Pixelbasiert JavaScript schafft Dynamik CSS schafft Trennung von Inhalt und Layout
MehrOutlook Web App 2010 Kurzanleitung
Seite 1 von 6 Outlook Web App 2010 Einleitung Der Zugriff über Outlook Web App ist von jedem Computer der weltweit mit dem Internet verbunden ist möglich. Die Benutzeroberfläche ist ähnlich zum Microsoft
MehrLiferay 6.2. Open Source IT-Dienstleister. Ein modernes Open Source Portal System. forwerts solutions GmbH, Gabriele Maas
Liferay 6.2 Ein modernes Open Source Portal System forwerts solutions GmbH, Gabriele Maas Open Source IT-Dienstleister Liferay 6.2 Was ist neu? Liferay 6.2 Startseite Folie: 3 forwerts solutions GmbH 9.
Mehrc t HTML 5 App Werbemittelanforderung
c t HTML 5 App Werbemittelanforderung Preise und Spezifikationen Werbeform Platzierung Preis Print/App-Kombi Opening Page Opening Page Print/App-Kombi Marktanzeigen (Fullscreen, ½, ¼ Screen) Innerhalb
MehrIHREN BILDSCHIRM MIT STUDENTEN TEILEN, DIE SICH ÜBER EINEN BROWSER VERBINDEN
IHREN BILDSCHIRM MIT STUDENTEN TEILEN, DIE SICH ÜBER EINEN BROWSER VERBINDEN Mit Vision 8.0 können Lehrer einen Klassenraum aus Windows- und Browser-basierten Studentengeräten oder einen Klassenraum nur
Mehrtentoinfinity Apps 1.0 EINFÜHRUNG
tentoinfinity Apps Una Hilfe Inhalt Copyright 2013-2015 von tentoinfinity Apps. Alle Rechte vorbehalten. Inhalt der online-hilfe wurde zuletzt aktualisiert am August 6, 2015. Zusätzlicher Support Ressourcen
MehrTEILEN SIE IHREN BILDSCHIRM MIT STUDENTEN, DIE MIT EINEM BROWSER ODER ÜBER DIE NETOP VISION STUDENT-APP EINE VERBINDUNG HERSTELLEN.
TEILEN SIE IHREN BILDSCHIRM MIT STUDENTEN, DIE MIT EINEM BROWSER ODER ÜBER DIE NETOP VISION STUDENT-APP EINE VERBINDUNG HERSTELLEN. Vision-Lehrer sind nun in der Lage, einen Klassenraum als Mischung aus
MehrBSV Software Support Mobile Portal (SMP) Stand 1.0 20.03.2015
1 BSV Software Support Mobile Portal (SMP) Stand 1.0 20.03.2015 Installation Um den Support der BSV zu nutzen benötigen Sie die SMP-Software. Diese können Sie direkt unter der URL http://62.153.93.110/smp/smp.publish.html
MehrErstellen eines HTML-Templates mit externer CSS-Datei
Erstellen eines HTML-Templates mit externer CSS-Datei Eigenschaften der Lösung Menü mit 2 Ebenen ohne Bilder, Menü besteht aus Text (Links) Durch CSS kann das Menü aber auch die Seite angepasst werden
MehrGeoPilot (Android) die App
GeoPilot (Android) die App Mit der neuen Rademacher GeoPilot App machen Sie Ihr Android Smartphone zum Sensor und steuern beliebige Szenen über den HomePilot. Die App beinhaltet zwei Funktionen, zum einen
Mehr12. Dokumente Speichern und Drucken
12. Dokumente Speichern und Drucken 12.1 Überblick Wie oft sollte man sein Dokument speichern? Nachdem Sie ein Word Dokument erstellt oder bearbeitet haben, sollten Sie es immer speichern. Sie sollten
Mehr1 Dokumentenmanagement
1 Dokumentenmanagement Das Dokumentenmanagement des GV Büro-System ist ein äußerst leistungsfähiges und mächtiges Tool. Es ist in der Lage, nahezu sämtliche Arten von Dokumenten auf einfache Art und Weise
MehrAnleitung für die Registrierung und das Einstellen von Angeboten
Anleitung für die Registrierung und das Einstellen von Angeboten Das FRROOTS Logo zeigt Ihnen in den Abbildungen die wichtigsten Tipps und Klicks. 1. Aufrufen der Seite Rufen Sie zunächst in Ihrem Browser
MehrLeitfaden zur ersten Nutzung der R FOM Portable-Version für Windows (Version 1.0)
Leitfaden zur ersten Nutzung der R FOM Portable-Version für Windows (Version 1.0) Peter Koos 03. Dezember 2015 0 Inhaltsverzeichnis 1 Voraussetzung... 3 2 Hintergrundinformationen... 3 2.1 Installationsarten...
MehrEinmalige Einbindung in Ihre Netzwerkumgebung
Einmalige Einbindung in Ihre Netzwerkumgebung Den IB-MP401Air verbinden - Bitte bringen Sie die Antenne an dem IB-MP401Air an. - Verbinden Sie das micro USB Kabel mit dem Netzteil und stecken Sie dieses
MehrFlash Videos einbinden
Flash Videos einbinden Im Kapitel Videos einbinden ( - ) haben Sie gesehen, wie man einfach und ohne Zusatzprogramme kleine Videoclips auf seiner einbinden kann. Ich persönlich würde jedem dieses Verfahren
MehrDiese Ansicht erhalten Sie nach der erfolgreichen Anmeldung bei Wordpress.
Anmeldung http://www.ihredomain.de/wp-admin Dashboard Diese Ansicht erhalten Sie nach der erfolgreichen Anmeldung bei Wordpress. Das Dashboard gibt Ihnen eine kurze Übersicht, z.b. Anzahl der Beiträge,
MehrDOK. ART GD1. Citrix Portal
Status Vorname Name Funktion Erstellt: Datum DD-MMM-YYYY Unterschrift Handwritten signature or electronic signature (time (CET) and name) 1 Zweck Dieses Dokument beschreibt wie das auf einem beliebigem
MehrAlbert HAYR Linux, IT and Open Source Expert and Solution Architect. Open Source professionell einsetzen
Open Source professionell einsetzen 1 Mein Background Ich bin überzeugt von Open Source. Ich verwende fast nur Open Source privat und beruflich. Ich arbeite seit mehr als 10 Jahren mit Linux und Open Source.
MehrTTS - TinyTimeSystem. Unterrichtsprojekt BIBI
TTS - TinyTimeSystem Unterrichtsprojekt BIBI Mathias Metzler, Philipp Winder, Viktor Sohm 28.01.2008 TinyTimeSystem Inhaltsverzeichnis Problemstellung... 2 Lösungsvorschlag... 2 Punkte die unser Tool erfüllen
MehrTipps und Tricks zu den Updates
Tipps und Tricks zu den Updates Grundsätzlich können Sie Updates immer auf 2 Wegen herunterladen, zum einen direkt über unsere Internetseite, zum anderen aus unserer email zu einem aktuellen Update. Wenn
Mehr1 Was ist das Mediencenter?
1 Was ist das Mediencenter? Das Mediencenter ist Ihr kostenloser 25 GB Online-Speicher. Mit dem Mediencenter erleben Sie überall Ihre Fotos, Musik und Videos und teilen Ihre schönsten Momente mit Familie
MehrWerten Sie mit hochwertigen Apps das Image Ihrer Firma auf!
SERVICE - Frank Werten Sie mit hochwertigen Apps das Image Ihrer Firma auf! Eine eigene Firmen-App Präsentieren Sie Ihren Kunden Ihre eigene Firmen-App auf dem Tablet und Smartphone. Ideal für Firmenpräsentationen,
MehrROFIN App Benutzerhandbuch. Version 1.0
ROFIN App Benutzerhandbuch Version 1.0 Inhaltsverzeichnis 1. Beschreibung 2. Passwort und Einstellungen 3. Support Tab 4. Vertriebs Tab 5. Web Tab 6. Häufig gestellte Fragen BESCHREIBUNG Die ROFIN App
MehrFalls Sie den Hintergrund der Website schon kennen, wählen Sie am einfachsten die gleiche Farbe in Photoshop für die Schaltfläche.
1. Schritt Schaltfläche vorbereiten In Photoshop eine neue Datei in Größe der Schaltfläche erstellen. Hier: Breite: 100 Pixel Höhe: 50 Pixel Auflösung 72 dpi Hintergrund: Weiß* Der weiße Hintergrund ist
MehrDokumentation. Mindestanforderungen: Das Board
Dokumentation Mindestanforderungen: 1. Einen Computer (Mac oder Pc) oder flash-unterstutztes System 2. Flash Player oder Browser mit Flash PlugIn 3. Das Board 4. Tondateien zum Abspielen Je mehr Tondateien
MehrAnleitung. Für folgende Produkte: BeoSound 5 / BeoSound 5 Encore / DLNA Client Stereoanlagen
Anleitung Musik mit itunes verwalten Fehlende Albumcover ergänzen Für folgende Produkte: BeoSound 5 / BeoSound 5 Encore / DLNA Client Stereoanlagen Voraussetzungen: - itunes 11 - gültiger itunes Account
MehrHTML5. Wie funktioniert HTML5? Tags: Attribute:
HTML5 HTML bedeutet Hypertext Markup Language und liegt aktuell in der fünften Fassung, also HTML5 vor. HTML5 ist eine Auszeichnungssprache mit der Webseiten geschrieben werden. In HTML5 wird festgelegt,
MehrErste Schritte mit Sharepoint 2013
Erste Schritte mit Sharepoint 2013 Sharepoint ist eine webbasierte Plattform zum Verwalten und Teilen (speichern, versionieren, suchen, sortieren, mit Rechten und Merkmalen versehen, ) von Informationen
MehrMobiler Ratgeber. TILL.DE Google Partner Academy
Mobiler Ratgeber TILL.DE Google Partner Academy Warum mobil sein? Eine Webseite, die mobil nicht gut zu erreichen ist, ist mit einem geschlossenen Geschäft gleichzusetzen! Warum mobil sein? Darüber informieren
MehrComputeria Solothurn
Computeria Solothurn Seniorinnen und Senioren entdecken den Computer und das Internet Sich mit «TeamViewer» von einem Supporter helfen lassen Diese Anleitung und die Illustrationen wurden unter Mac OS
MehrCOMPUTERIA VOM 29.1.14. Wenn man seine Termine am Computer verwaltet hat dies gegenüber einer Agenda oder einem Wandkalender mehrere Vorteile.
COMPUTERIA VOM 29.1.14 DESKTOP-TERMINKALENDER: VORTEILE GEGENÜBER EINER AGENDA RAINLENDAR Wenn man seine Termine am Computer verwaltet hat dies gegenüber einer Agenda oder einem Wandkalender mehrere Vorteile.
MehrDokumentation Externe Anzeige von Evento Web Dialogen
Dokumentation Externe Anzeige von Evento Web Dialogen Autor: Roger Guillet Telefon 058 404 83 57 E-Mail roger.guillet@crealogix.com CREALOGIX Evento Postfach 112, Baslerstrasse 60 CH-8066 Zürich Telefon
MehrSystemeinstellungen im Internet Explorer für WEB-KAT
im Internet Explorer für WEB-KAT V 20151123 DE - Copyright 1998-2015 by tef-dokumentation 1 / 12 Inhaltsverzeichnis Systemeinstellungen im Internet Explorer 1 1. Hardware 3 1.1 Computer 3 1.2 Internetverbindung
MehrMeine Welt auf einen Blick erleben.
Daten- Synchronisation Sie haben Fragen? Hier finden Sie Antworten. Meine Welt auf einen Blick erleben. Die folgenden Anleitungen helfen Ihnen dabei Ihre vorhandenen Daten mit einem Windows Phone 7 weiter
MehrTevalo Handbuch v 1.1 vom 10.11.2011
Tevalo Handbuch v 1.1 vom 10.11.2011 Inhalt Registrierung... 3 Kennwort vergessen... 3 Startseite nach dem Login... 4 Umfrage erstellen... 4 Fragebogen Vorschau... 7 Umfrage fertigstellen... 7 Öffentliche
MehrÖKB Steiermark Schulungsunterlagen
ÖKB Steiermark Schulungsunterlagen Fotos von Online-Speicher bereitstellen Da das hinzufügen von Fotos auf unsere Homepage recht umständlich und auf 80 Fotos begrenzt ist, ist es erforderlich die Dienste
MehrOnline-Hilfe KREAMAN (DE)
Online-Hilfe KREAMAN (DE) Was ist KREAMAN? KREAMAN ist ein System zur Individualisierung der EXACOMPTA Artikel zum Ordnen, Präsentieren und Organisieren. Mit Hilfe von KREAMAN können Sie Ihre eigenen Etiketten
Mehr