Ein Überblick zu Web Components
|
|
|
- Jürgen Knopp
- vor 6 Jahren
- Abrufe
Transkript
1 Ein Überblick zu Web Components tekom Jahrestagung 2015 Stuttgart, 11. November Dr. Thomas Meinike Hochschule #tekom15 Merseburg T. Meinike: FB Ein Informatik Überblick und zu Kommunikationssysteme Web Components 1 merseburg.de/~meinike/ thomas.meinike@hs merseburg.de
2 Motivation Moderne Webanwendungen sind mehr als nur miteinander verknüpfte HTML-Dokumente. Es kommt eine Vielzahl an Modulen, Bibliotheken und Frameworks zum Einsatz, insbesondere auf JavaScript-Basis. Web Components sind nach frühen Ansätzen von Microsoft (HTML Components / W3C-Note von 1998) ein um 2010 geprägtes Konzept. Insbesondere durch Aktivitäten von Google und einem seit 2014 vom W3C angestrebten Standardisierungsprozess wird das Thema für die praktische Webentwicklung zunehmend interessant. #tekom15 T. Meinike: Ein Überblick zu Web Components 2
3 {Standards & Technologien } #tekom15 T. Meinike: Ein Überblick zu Web Components 3
4 Standards & Technologien Web Components setzen bekannte Technologien voraus: HTML5 : Auszeichnung von Inhalten (Markup) CSS3 : Formatierungsregeln (Stylesheets) JavaScript : Programmatisches Bindeglied (Aktionscode) Dieses Fundament wird erweitert durch: HTML Templates : Wiederverwendbare Vorlagen (bereits Teil von HTML5) Custom Elements : Eigene Elementdefinitionen Shadow DOM : Interaktion und Kapselung HTML Imports : Auslagerung/Einbindung externer Komponenten W3C-Arbeitsentwürfe unter: w3c.github.io/webcomponents/ #tekom15 T. Meinike: Ein Überblick zu Web Components 4
5 Standards & Technologien HTML Templates: Bestandteil der HTML5-Spezifikation Ablage von Dokumentteilen und Stylesheets zur Wiederverwendung Inhalte werden erst nach Zugriff auf die Fragmente mit JavaScript sichtbar Nützlich als Vorlagen für die Umsetzung von Custom Elements Ansatz (im HTML <head> oder extern abgelegt): <template id=" "> <style> /* Stylesheet Regeln */ </style> <div class=" "> <! Markup > </div> </template> WebComponents.org #tekom15 T. Meinike: Ein Überblick zu Web Components 5
6 Standards & Technologien Custom Elements: Neue Elemente, im <body> einsetzbar wie vorhandene Elementnamen benötigen Bindestrich, z. B. <mein element> </mein element> Bekanntmachung im DOM mit der Methode registerelement() Ansatz (im HTML <head> oder extern abgelegt): <script> window.onload = function() { var meinprototype = Object.create(HTMLDivElement.prototype); // Element formal vom div Blocktyp meinprototype.createdcallback = function() { /* Aufbau des Elementinhalts (Shadow DOM) auf Basis eines Templates */ } document.registerelement("mein element", {prototype: meinprototype}); } </script> WebComponents.org #tekom15 T. Meinike: Ein Überblick zu Web Components 6
7 Standards & Technologien Shadow DOM: Wird zusätzlich zum vorhandenen DOM etabliert Versteckte, von außerhalb nicht zugreifbare Kapselung der Komponenten Getrennte Behandlung und Verarbeitung der selbst definierten Elemente Anlegen u nterhalb eines Host-Elements mit der Methode createshadowroot() Ansatz (in der Prototype-Funktion): meinprototype.createdcallback = function() { var shadow = this.createshadowroot(); /* Templatezugriffe, in tcontent liegt der geklonte/angereicherte Templateinhalt */ shadow.appendchild(tcontent); } WebComponents.org #tekom15 T. Meinike: Ein Überblick zu Web Components 7
8 Standards & Technologien HTML Imports: Komponenten in.html-datei auslagern und einbinden Im einbindenden Dokument stehen dann nur noch die Custom Elements und sonstigen HTML-Elemente Ansatz (im <head>): <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf 8" /> <title>web Components</title> <link rel="import" href="meine komponente.html" /> </head> <body> <h1>web Components</h1> <mein element> </mein element> </body> </html> WebComponents.org #tekom15 T. Meinike: Ein Überblick zu Web Components 8
9 Standards & Technologien Browser-Tipps: Aktuellen Polyfill webcomponents.min.js von WebComponents.org einbinden: <script src="webcomponentsjs/webcomponents.min.js"></script> Experimentelle Unterstützung im Firefox aktivieren: dom.webcomponents.enabled true Chrome bzw. Chromium-Browser (Iron, Opera 30+) mit diesem Parameter starten, falls die Anzeige nur via HTTP (z. B. localhost) funktioniert: allow file access from files #tekom15 T. Meinike: Ein Überblick zu Web Components 9
10 {Anwendungsbeispiele } #tekom15 T. Meinike: Ein Überblick zu Web Components 10
11 Anwendungsbeispiele Record-Widget 1/3 CustomElement tm-record mit Attributen für jeweils ein Musikalbum: <body> <h1>record Widget Demo</h1> <tm record name="die KRUPPS" title="v Metal Machine Music" year="2015" medium="cd" stars="10" cover="diekrupps.png"></tm record> </body> Template: <template id="record_widget"> <style> /* Formate */ </style> <div class="record"> <img src="" alt="cover" /><! Coverbild > <h1></h1><! Bandname > <h2></h2><! Plattentitel > <h3><span class="year"></span><span class="stars"></span></h3><! Jahr (Medium) und Sterne > </div> </template> #tekom15 T. Meinike: Ein Überblick zu Web Components 11
12 Anwendungsbeispiele Record-Widget 2/3 Die JavaScript-Magie im Hintergrund (in der Prototype-Funktion): var shadow = this.createshadowroot(); var template = document.queryselector("#record_widget"); var tcontent = document.importnode(template.content, true); tcontent.queryselector("h1").textcontent = this.getattribute("name"); tcontent.queryselector("h2").textcontent = this.getattribute("title"); tcontent.queryselector(".year").textcontent = this.getattribute("year") + " (" + this.getattribute("medium") + ")"; var stars = this.getattribute("stars") * 1; var stars_str = ""; if(stars > 0) { for(var i = 1; i <= stars; i++) stars_str += " "; } tcontent.queryselector(".stars").textcontent = stars_str; var cover = this.getattribute("cover"); if(cover == "")cover = "cover.png"; tcontent.queryselector("img").src = cover; shadow.appendchild(tcontent); #tekom15 T. Meinike: Ein Überblick zu Web Components 12
13 Anwendungsbeispiele Record-Widget 3/3 Ergebnis und Elementstruktur in der Browser-Konsole (hier Opera 32): #tekom15 T. Meinike: Ein Überblick zu Web Components 13
14 Anwendungsbeispiele Pie-Chart 1/3 CustomElement tm-piechart mit Kindelementen tm-data für Kreissegment-Daten: <tm piechart chtitle="demochart 1"> <tm data value="10" color="#ff0">text 1</tm data> <tm data value="20" color="#f00">text 2</tm data> <tm data value="30" color="#090">text 3</tm data> <tm data value="40" color="#ccc">text 4</tm data> <tm data value="50" color="#00f">text 5</tm data> </tm piechart> Template mit div-container und SVG-Grundgerüst (g kapselt ein Segment): <template id="piebasis"> <style> </style> <div id="tmpiechart"> <svg xmlns=" width="480" height="320" viewbox=" "> <text id="title" x="0" y="0"></text> <g> <path d="" fill="none"/> <rect x="0" y="0" width="0" height="0" fill="none"/> <text x="0" y="0"></text> </g> </svg> </div> </template> #tekom15 T. Meinike: Ein Überblick zu Web Components 14
15 Anwendungsbeispiele Pie-Chart 2/3 Der JavaScript-Code im Hintergrund ist umfangreich berechnet im Wesentlichen die Kreissegmente als Pfade sowie die Legendeneinträge: #tekom15 T. Meinike: Ein Überblick zu Web Components 15
16 Anwendungsbeispiele Pie-Chart 3/3 Browsertests mit dieser Komponente (zum Entstehungzeitpunkt 08/15 aktuell): #tekom15 T. Meinike: Ein Überblick zu Web Components 16
17 {Web Components mit Polymer } #tekom15 T. Meinike: Ein Überblick zu Web Components 17
18 Web Components mit Polymer Was ist Polymer? Eine von Google initiierte Bibliothek sowie Polyfill zur vereinfachten Erstellung und Nutzung von Web Components (weitere Ansätze: Bo sonic, Skate, X-Tag) Projektseite mit Downloads und Dokumentation: polymer-project.org Vorgefertigte Elemente verfügbar unter: elements.polymer-project.org Aktuelle Version 1.2.x (lt. Inhalt von archive.zip, 11/2015) Installation mit Bower oder unter»get started«mit dem ZIP-Archiv anfangen: #tekom15 T. Meinike: Ein Überblick zu Web Components 18
19 Web Components mit Polymer Wie wird Polymer verwendet? Im <head> einbinden: <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> <link rel="import" href="bower_components/polymer/polymer.html" /> Im <body> oder in externer.html-datei sog. DOM-Module anlegen: <dom module id="mein element"> <style> </style> <template> </template> <script> Polymer({ is: "mein element", /* weiterer JS Code */ }); </script> </dom module> #tekom15 T. Meinike: Ein Überblick zu Web Components 19
20 Web Components mit Polymer Beispiel-Umsetzung von Sicherheitshinweisen 1/6 CustomElement tm-safety: <tm safety logo="flurfoerderzeuge.png" signal="gefahr" quelle="staplerfahrer Klaus ist wieder da!" abwehr="rette sich, wer kann!"></tm safety> #tekom15 T. Meinike: Ein Überblick zu Web Components 20
21 Web Components mit Polymer Beispiel-Umsetzung von Sicherheitshinweisen 2/6 DOM-Module: <dom module id="tm safety"> <style> </style> <template> <div id="warnblock"> <img src="{{logo}}" alt="{{signal}}" /> <h1>{{signal}}</h1> <p><strong>{{quelle}}</strong></p> <p><em>{{abwehr}}</em></p> {{Blöcke}} werden mit den Custom-Inhalten ersetzt. </div> </template> <script> Polymer({ is: "tm safety", /* weiterer JS Code */ }); </script> </dom module> #tekom15 T. Meinike: Ein Überblick zu Web Components 21
22 Web Components mit Polymer Beispiel-Umsetzung von Sicherheitshinweisen 3/6 CSS-Auszug der Klassennamen für die JS-Zuweisung: h1.symbol ::before { content: "\26A0"; padding: 0 3px; font size: 22px; } h1.vorsicht { color: #000; background color: #EFCB00; } h1.gefahr { color: #FFF; background color: #BB2724; } h1.warnung { color: #000; background color: #DE7D00; } h1.hinweis { color: #FFF; background color: #005989; font style: italic; } #tekom15 T. Meinike: Ein Überblick zu Web Components 22
23 Web Components mit Polymer Beispiel-Umsetzung von Sicherheitshinweisen 4/6 JavaScript-Auszug zur erweiterten Behandlung der Inhalte: Polymer({ is: "tm safety", ready: function() { // Farben nach ANSI Z535.1 zuweisen: var signal = this.signal.tolowercase(); var h1_obj = this.queryselector("h1"); if(signal == "vorsicht")h1_obj.classname += " symbol vorsicht"; else if(signal == "gefahr")h1_obj.classname += " symbol gefahr"; else if(signal == "warnung")h1_obj.classname += " symbol warnung"; else if(signal == "hinweis")h1_obj.classname += " hinweis"; } }); #tekom15 T. Meinike: Ein Überblick zu Web Components 23
24 Web Components mit Polymer Beispiel-Umsetzung von Sicherheitshinweisen 5/6 Als externe Komponente nutzen: Im <head> Polyfill und DOM-Module importieren: <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> <link rel="import" href="dom module tm safety.html" /> In der externen.html-datei zunächst Polymer referenzieren und DOM-Module ablegen: <link rel="import" href="bower_components/polymer/polymer.html" /> <dom module id="tm safety"> <! > </dom module> #tekom15 T. Meinike: Ein Überblick zu Web Components 24
25 Web Components mit Polymer Beispiel-Umsetzung von Sicherheitshinweisen 6/6 Ergebnis mit mehreren Elementen tm-safety: Texte der Si-Hinweise 1 bis 3 geborgt von Lesegefahr.de Browser-Ergebnisse: Chrome / Opera ok IE / Edge nur extern via HTTP Firefox ohne Ausgabe #tekom15 T. Meinike: Ein Überblick zu Web Components 25
26 Fazit und Ausblick Web Components bieten interessante konzeptionelle Erweiterungen für die Webentwicklung noch optimistischer ausgedrückt: Nutzung ist durch die noch unzureichende Browserunterstützung beschränkt. Hier ist jedoch mit schnellen Fortschritten zu rechnen. Als besonders praktikabel erscheint die Einarbeitung in Polymer, um nicht alle benötigten Techniken neu erfinden zu müssen. #tekom15 T. Meinike: Ein Überblick zu Web Components 26
27 Feedback erwünscht URL direkt aufrufen (auch nach der Tagung möglich): IN19.honestly.de Oder QR-Code scannen: Danke für Ihr Interesse! #tekom15 T. Meinike: Ein Überblick zu Web Components 27
HTML5 2 1 / 6. Doing Web Apps HTML5 2. Letzte Änderung: 2014-10-24 Version: 1.1
1 / 6 Doing Web Apps HTML5 2 Autor: Rüdiger Marwein Letzte Änderung: 2014-10-24 Version: 1.1 Dieses Dokument darf mit Nennung des Autoren - frei vervielfältigt, verändert und weitergegeben werden. Der
Digitale Whiteboard-Software mit HTML5, SVG und WebSockets
Digitale Whiteboard-Software mit HTML5, SVG und WebSockets Webprogrammierung und Web 2.0-Technologien 30.11.2011 Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann Gliederung 2 1. Aufgabenstellung 2.
Dr. Thomas Meinike Hochschule Merseburg
XSLT Programmierung effektiv und schmerzfrei! Dr. Thomas Meinike Hochschule Merseburg thomas.meinike@hs merseburg.de http://www.iks.hs merseburg.de/~meinike/ @XMLArbyter Zusatzmaterial Februar
Webdesign-Multimedia HTML und CSS
Webdesign-Multimedia HTML und CSS Thomas Mohr HTML Definition ˆ HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache (engl. markup language) zur Strukturierung digitaler Dokumente
Responsive Web Design
Responsive Web Design mit APEX Theme 25 Christian Rokitta APEX UserGroup NRW Treffen 20.01.2014 Oracle DB & APEX Entwickler (selbstständig) Deutschland ( 1996) Niederlanden ( 1996) themes4apex: APEX UI
Scalable Vector Graphics (SVG)
Scalable Vector Graphics () Beschreibungssprache für Vektorgraphiken. Basiert auf XML, daher ähnlich zu (X)HTML, SMIL, VRML, RSS, etc.
Dokumentation 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
Ein UI in zwei Welten - Controls in HTML5 und WPF. Timo Korinth
Ein UI in zwei Welten - Controls in HTML5 und WPF Timo Korinth Timo Korinth Lead Developer HTML5 bei maximago Zuvor.NET / WPF Entwicklung Warum überhaupt HTML5 und WPF? Was bedeutet Control-Entwicklung
Cross-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
AdOps 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.
Informatik I: Einführung in die Programmierung
Informatik I: Einführung in die Programmierung 21. Das WWW befragen Albert-Ludwigs-Universität Freiburg Bernhard Nebel 13.01.2015 1 13.01.2015 B. Nebel Info I 3 / 17 Oft braucht ein Programm Informationen,
Social Data Mining. Albert Weichselbraun. May 2009
Social Data Mining Albert Weichselbraun Vienna University of Economics and Business Administration Department of Information Systems and Operations Augasse 2-6, 1090 Vienna albert.weichselbraun@wu.ac.at
HTML5 / CSS3. 19.10.2009 - Webtreff - Konstanz Lars Messmer - COMSOLIT GmbH
HTML5 / CSS3 19.10.2009 - Webtreff - Konstanz Lars Messmer - COMSOLIT GmbH Seite / 68 COMSOLIT GmbH Fullservice Agentur die erfolgreich professionelle Gesamtlösungen umsetzt. Zu den Kernkompetenzen zählen:
Web Data Mining. Albert Weichselbraun
Web Data Mining Albert Weichselbraun Vienna University of Economics and Business Department of Information Systems and Operations Augasse 2-6, 1090 Vienna albert.weichselbraun@wu.ac.at May 2011 Agenda
HTML-Grundlagen (X)HTML:
HTML-Grundlagen (X)HTML: < > beginnender HTML Tag schließender HTML Tag < /> leere HTML Elemente Attribute und Werte &.; Sonderzeichen, HTML Entities Aufbau einer Datei Ein
D2PDATA TO PDF. Installation von Data2Pdf(D2P) Übersicht. Version 1.3
Installation von Data2Pdf(D2P) Übersicht Version 1.3 Freitag, 21. Februar 2014 Übersicht Seite 2/15 1 INHALT 1 Inhalt... 2 2 Historie... 3 3 Überblick... 3 4 Vorgaben... 3 5 Erste Installation... 4 5.1
Übungen. DI (FH) Levent Öztürk
Übungen DI (FH) Levent Öztürk Übersicht Entwicklungsumgebung PHPMYADMIN Datenbank anlegen User anlegen Tabellen Anlegen Datenbankzugriffe über PHP 01.04.2014 DI (FH) Levent Öztürk 2 Entwicklungsumgebung
Aufbau einer HTML Seite:
1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,
Webdesign Grundlagen. Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de
Webdesign Grundlagen Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de Bürokratie Termine & Kursliste & http://hawk.herrkraft.de Wer bin ich? michael kraft ba ma 2006 2012 hawk tutor interaction digital
Design anpassen eine kurze Einführung
Design anpassen eine kurze Einführung Das gesamte Layout von Papoo basiert auf modernen CSS Layouts die vollständig ohne Layout Tabellen funktionieren. Um schnell vorhandene Designs anpassen zu können
ASICMS. Das einfache php-framework. Anleitung und Referenz. ASICMS Das einfache php-framework by Andreas Kasper 25. August 2007.
ASICMS Das einfache php-framework Anleitung und Referenz Seite 1 Inhaltsverzeichnis Inhaltsverzeichnis... 1 Inhaltsverzeichnis... 2 Einführung... 3 Was ist ASICMS?... 3 Was ist ein Widget?... 3 Installation...
Wo steht HTML5 Überblick, Möglichkeiten, Zukunft (ohne Anspruch auf Vollständigkeit)
1 Wo steht HTML5 Überblick, Möglichkeiten, Zukunft (ohne Anspruch auf Vollständigkeit) Sven Brencher 2 Wie ich zu Webentwicklung stehe Yeah Flexbox! Entwickler vs. Unternehmer ROI? 3 Wie kann man HTML5
HTML und CSS. Eine kurze Einführung
HTML und CSS Eine kurze Einführung Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett
Joomla Schulung. Open Source CM-System. Projekt-Nr. 398. Thomas Haussener, MA. 20. Juni 2007
Joomla Schulung Projekt-Nr. 398 Open Source CM-System Projektteam: Christian Wüthrich, PL Thomas Haussener, MA 20. Juni 2007 BiCT AG Güterstrasse 5 3072 Ostermundigen Tel. 031 939 40 30 Fax 031 939 40
High Performance Websites1/ 18 MBit
High Performance Websites1 / 18 MBit Harte Fakten 2 Website-Wachstum: Top 1000 Websites laut Alexa Quellen: http://video.yahoo.com/watch/4156174/11192533 http://www.websiteoptimization.com/speed/tweak/average-web-page/
Was ist SVG? Inhalt: Allgemeines zu SVG Besondere Merkmale Vor- und Nachteile Dateiformat Standardobjekte Koordinatensystem Beispiele Links
Was ist SVG? Was ist SVG? Inhalt: Allgemeines zu SVG Besondere Merkmale Vor- und Nachteile Dateiformat Standardobjekte Koordinatensystem Beispiele Links SVG: Allgemeines zu SVG SVG = Scalable Vector Graphics
VideoPlus. Shopware Video-Plugin. Handbuch
VideoPlus Shopware Video-Plugin Handbuch VideoPLUS SHOPWARE PlugIn Inhaltsverzeichnis Wo erhalte ich den Code des von mir gewünschten Videos 04 Youtube MyVideo vimeo Sevenload Yahoo! Screen Netzr Allg.
Der transparente Look. Die Struktur, die oben angegeben wurde, ist im Anwendungsdesigner, wie in der nächsten Grafik ersichtlich, abgebildet.
Intrapact Layout Allgemeines Das Layout einer Firma wird im Intrapact Manager, und dort im Layout Designer erstellt. Alle Eingaben im Layout Designer dienen dazu um die CSS/ASP Dateien zu generieren, die
SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1
SASS für Einsteiger WordCamp Köln 2015 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 Wer bin ich? Bernhard Kau Wahlberliner PHP-Entwickler WordPress-Plugin Hobby-Entwickler CSS-Tüftler Organisator der
FAQ - Script gaesteform
FAQ - Script gaesteform www.kundencenter.ws 9. April 2009 Salvatore Spadaro 1 2 Inhaltsverzeichnis 1 Script - gaesteform 3 1.1 Welchen Funktionumfang bietet das Script gaesteform und welche Technik steckt
Wahlpflichtfach Streaming Media
Wahlpflichtfach Streaming Media Gregor Franzen TM061023 Ines Schwaighofer TM061102 In dem Wahlpflichtfach Streaming Media beschäftigen sich verschiedene Gruppen von Studierenden mit unterschiedlichen Streaming-Technologien.
BFV Widgets Kurzdokumentation
BFV Widgets Kurzdokumentation Mit Hilfe eines BFV-Widgets lassen sich die neuesten Ergebnisse und die aktuellen Tabellen des BFV auf der eigenen nicht kommerziellen Webseite mit wenig Aufwand einbeten.
Webseiten-Bericht für opencart.com
Webseiten-Bericht für opencart.com Generiert am 22 Dezember 2015 08:23 AM Der Wert ist 41/100 SEO Inhalte Seitentitel Just a moment... Länge : 16 Perfekt, denn Ihr Seitentitel enthält zwischen 10 und 70
Einfü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
Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten.
Benutzerhandbuch Gästebuch Software - YellaBook v1.0 http://www.yellabook.de Stand: 01.08.2012 Inhalt 1 Funktionen... 3 2 Systemanforderungen... 4 3 Installation... 4 4 Einbinden des Gästebuchs... 5 5
JavaScript & Ajax Debugging. Marcel Bsufka 16.05.2011
JavaScript & Ajax Debugging Marcel Bsufka 16.05.2011 2 http://www.phdcomics.com/comics/archive.php?comicid=673 Agenda 3 1. Was ist JavaScript? a. Merkmale b. Probleme beim Debuggen 2. Debugging Werkzeuge
Web-Anwendungsentwicklung mit dem Delivery Server
Web-Anwendungsentwicklung mit dem Delivery Server Java-Framework auf Basis der Open API Bernfried Howe, Webertise Consulting GmbH WEBertise Consulting Dipl. Informatiker (Wirtschaftsinformatik) 2001-2010
WEBSEITEN ENTWICKELN MIT ASP.NET
jamal BAYDAOUI WEBSEITEN ENTWICKELN MIT ASP.NET EINE EINFÜHRUNG MIT UMFANGREICHEM BEISPIELPROJEKT ALLE CODES IN VISUAL BASIC UND C# 3.2 Installation 11 Bild 3.2 Der Webplattform-Installer Bild 3.3 IDE-Startbildschirm
D.5 Eine Klasse für serielle Geräte schreiben
D.5 Eine Klasse für serielle Geräte schreiben 285 D.5 Eine Klasse für serielle Geräte schreiben Man kann viel lernen, wenn man in einer interaktiven Umgebung mit einer neuen Bibliothek herumspielt. Allerdings
Firefox Add-ons. Präsentation in WAP WS09/10 von Christoph ASCHBERGER, Andreas BERTOLIN, Robert MUTTER und Yunzhou XU
Firefox Add-ons Präsentation in WAP WS09/10 von Christoph ASCHBERGER, Andreas BERTOLIN, Robert MUTTER und Yunzhou XU Agenda Technisches Überblick XUL JavaScript CSS XPI-Pakete Einreichen bei Mozilla Sicherheitsüberlegungen
Destructive AJAX. Stefan Proksch Christoph Kirchmayr
Destructive AJAX Stefan Proksch Christoph Kirchmayr AJAX-Einführung Asynchronous JavaScript And XML Clientseitiger JavaScript-Code Asynchrone Kommunikation XML DOM Klassisches Client-Server Modell AJAX-Modell
Magento 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
Designä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
DCCS 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
Programmierschnittstelle API 2 für CMS Day Communiqué: Beispiele Standort
Eidgenössisches Departement für Verteidigung, Bevölkerungsschutz und Sport VBS armasuisse Bundesamt für Landestopografie swisstopo Programmierschnittstelle API 2 für CMS Day Communiqué: Beispiele Standort
Webdesign mit HTML und CSS Einführungsabend
Einführungsabend Die eigene Internetseite Hypertext und html Das HTML Grundgerüst HTML-Editoren Skriptsprachen im WWW Rechtliche Absicherung Suchmaschinenoptimierung Das HTML Grundgerüst HTML ist ein Kompromiss
XPages Good to know. Benjamin Stein & Pierre Hein Stuttgart 7. Mai 2015
XPages Good to know Benjamin Stein & Pierre Hein Stuttgart 7. Mai 2015 Agenda 1. Einführung Was sind XPages? 2. Allgemeine Tipps Allgemeine Tipps für die Verwendung von XPages 3. Designer Tipps Tipps für
Dokumentation BKU-Erkennung
www.egiz.gv.at E-Mail: post@egiz.gv.at Telefon: ++43 (316) 873 5514 Fax: ++43 (316) 873 5520 Inffeldgasse 16a / 8010 Graz / Austria Dokumentation BKU-Erkennung Version 1.1.1, 06.11.2006 DI Peter Danner
VoiceXML 3.0. Jan Pit Wagner Fachbereich Informatik Seminar Moderne Webtechnologien 25. November 2009
VoiceXML 3.0 Jan Pit Wagner Fachbereich Informatik Seminar Moderne Webtechnologien 25. November 2009 Zielsetzungen dieses Vortrages VoiceXML vorstellen. Zeigen, dass VoiceXML einfach ist. Für den Einsatz
Robert R. Agular Thomas Kobert. 5. Auflage HTML. Inklusive CD-ROM
Robert R. Agular Thomas Kobert 5. Auflage HTML Inklusive CD-ROM Vorwort 13 Einleitung 14 Arbeitsschritte 14 Wichtige Stellen im Buch 14 Buffi-Infokästen 14 Aufgaben 15 Wohin mit den Übungen? 15 HTML-Ordner
Webengineering. jquery
Webengineering jquery Marcel Vilas 1 DHBW - Stuttgart jquery - Allgemein jquery ist eine JavaScript-Bibliothek (API) jquery ist eine Funktion (Funktionen sind Objekte) Vorteile: einfacher als vanilla JavaScript
Klausurteilnehmer. 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
Frank Kleine, Nico Steiner 1&1 Internet AG. Frontend-Performance mit PHP
Frank Kleine, Nico Steiner 1&1 Internet AG Frontend-Performance mit PHP Vorstellung Frank Kleine Head of Web Infrastructure Nico Steiner Experte für Frontend T&A Frontend-Performance mit PHP 2 Vorstellung
PERFORMANCE-OPTIMIERUNG
PERFORMANCE-OPTIMIERUNG BARRIEREFREIHEIT BEGINNT MIT LADEZEITEN Best of Accessibility (Düsseldorf, 24.09.2009) von David Maciejewski und Dirk Jesse DAVID MACIEJEWSKI @macx Teamlead Software Developer in
{ Light up the Web } Oliver Scheer. Evangelist Microsoft Deutschland
{ Light up the Web } Oliver Scheer Evangelist Microsoft Deutschland { Light up the Web } Oliver Scheer Evangelist Microsoft Deutschland Was ist Silverlight? Tools für Silverlight Designer-Developer-Workflow
Übung Open Data: Daten mit D3.js visualisieren
Übung Open Data: Daten mit D3.js visualisieren Termin 6, 26. März 2015 Dr. Matthias Stürmer und Prof. Dr. Thomas Myrach Universität Bern, Institut für Wirtschaftsinformatik Abteilung Informationsmanagement
TemplaVoila T3AK07 - TYPO3 Akademie 2.0
TemplaVoila T3AK07 - TYPO3 Akademie 2.0 23.02.2007 2 TemplaVoila - Geschichtliches Ursprünglich entwickelt von Kasper Skårhøj für Dassault Systèmes Weiterentwicklung durch Robert Lemke Wurde auf der T3BOARD04
BOSS 2 BSZ One Stop Search
BOSS 2 BSZ One Stop Search 16. BSZ-Kolloquium in Stuttgart 22.09.2015 Cornelius Amzar 1 Responsive Design Smartphone, Tablet, Fernseher, PC, Laptop Benutzer erwarten einen gleichwertigen Dienst für alle
Hypertext Markup Language HTML. Stefan Szalowski Internet-Technologien HTML
Hypertext Markup Language HTML Hypertext Markup Language HTML Cascading Style Sheets CSS Zwei Sprachen, mit denen Webseiten erstellt werden HTML: Strukturieren von Inhalten durch Elemente Überschriften,
Erstellen eigener HTML Templates für die Clanplanet Webseite. www.clanplanet.de
Erstellen eigener HTML Templates für die Clanplanet Webseite Version 2 vom 12.11.2012 Copyright by Clanplanet www.clanplanet.de Teil 1: Einführung in die CP Templates Teil 2: Template des Newsbeitrages
Inhaltsverzeichnis. Bank Thalwil Genossenschaft Version vom 25.2.2014, Seite 1/19
Inhaltsverzeichnis 1. Sicherheitshinweise... 2 2. Internet Explorer... 3 2.1. Internet Explorer, Version 8.0... 3 2.2. Internet Explorer, Version 9.0... 5 2.3. Internet Explorer, Version 10.0... 7 2.4.
Responsive Webdesign
ebusiness Praxistag Thüringen 2014 Responsive Webdesign BASISWISSEN UND MÖGLICHKEITEN DER UMSETZUNG Maik Grunitz Geschäftsführer Forward Marketing GbR Inhalte 1. Warum Responsive Design? 2. Geschichte
TIMERATE AG Tel 044 422 65 15 Falkenstrasse 26 timerate@timerate.ch 8008 Zürich www.timerate.ch. Joomla Templates Kursunterlagen
TIMERATE AG Tel 044 422 65 15 Falkenstrasse 26 timerate@timerate.ch 8008 Zürich www.timerate.ch Joomla Templates Kursunterlagen Ordnerstruktur in Joomla Inhaltsverzeichnis Ordnerstruktur in Joomla... 3
Generic Quickstart Guide zuerst Email: Tel: Flashtalking Creative Interface http://www.flashtalking.net/creative
Generic Quickstart Guide!!! Sollten Sie bisher noch keine Zugangsdaten für unser System haben, wenden Sie sich bitte zuerst an Ihr Flashtalking Team. Email: studiode@flashtalking.com Tel: +49 221 922 350
Webseiten-Bericht für duhard.fr
Webseiten-Bericht für duhard.fr Generiert am 30 Dezember 2015 05:28 AM Der Wert ist 47/100 SEO Inhalte Seitentitel Website unavailable Länge : 19 Perfekt, denn Ihr Seitentitel enthält zwischen 10 und 70
Erstellen 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
Bernhard Kau @2ndkauboy http://kau-boys.de #wpcb13
Bernhard Kau @2ndkauboy http://kau-boys.de #wpcb13 1 Übersicht der PageSpeed Produkte Installation von Mod_Pagespeed Übersicht der verfügbaren Filter Vorstellung einiger wichtiger Filter Ersetzung von
YouTube 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
HTML5. 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,
Eine wirklich große Hilfe war die Typo3-Dokumentation der Firma Mittwald: https://www.mittwald.de/fileadmin/pdf/dokus/typo3-dokumentation.
Die neue Internetseite mit Typo3 (Stand vom 25.12.2015) Ein Anfang Also, ich habe längst nicht alles verstanden, einige Befehlsketten einfach rein kopiert und deshalb sicher auch sinnlose Programmteile
Advanced CMS. Copyright 2015 silbersaiten.de Service&Support: https://addons.prestashop.com/en/write-to-developper?
Advanced CMS Copyright 2015 silbersaiten.de Service&Support: https://addons.prestashop.com/en/write-to-developper?id_product=19835 1. Installation Nachdem Sie das Modul Advanced CMS heruntergeladen und
SPEZIFIKATIONEN TECHNISCHE SPEZIFIKATIONEN
TECHNISCHE SPEZIFIKATIONEN Inhaltsverzeichnis Guidelines: HTML5-Werbemittelanforderungen.....3-5 Guidelines: Flash-Werbemittelanforderungen AS2 und AS3...6-8 Guidelines: Interstitial medienhaus:nord....9
TimeMachine. Installation und Konfiguration. Version 1.4. Stand 21.11.2013. Dokument: install.odt. Berger EDV Service Tulbeckstr.
Installation und Konfiguration Version 1.4 Stand 21.11.2013 TimeMachine Dokument: install.odt Berger EDV Service Tulbeckstr. 33 80339 München Fon +49 89 13945642 Mail rb@bergertime.de Versionsangaben Autor
Daten als XML empfangen Ajax und Server-Programme bieten ein DOM-Document-Objekt, das bereits fertig ist.
#4 Daten als XML empfangen HACK #4 Hack Daten als XML empfangen Ajax und Server-Programme bieten ein DOM-Document-Objekt, das bereits fertig ist. #4 Viele Techniken tauschen momentan Daten im XML-Format
XML Eine Einführung. XML-Dokumente Im Internet Darstellen. XML (C) J.M.Joller 1
XML Eine Einführung XML-Dokumente Im Internet Darstellen XML (C) J.M.Joller 1 XML Eine Einführung XML-Dokumente Im Internet Darstellen XML-Dokumente Mithilfe Der Datenbindung Anzeigen XML (C) J.M.Joller
WEBAPPLIKATIONEN MIT PHP. Wo gibt es Hilfe? Wie fang ich an?
WEBAPPLIKATIONEN MIT PHP Wo gibt es Hilfe? Wie fang ich an? Tools Webapplikationen bestehen aus Textdateien Lassen sich in Texteditoren schreiben Alternativen: Eclipse (PDT) Netbeans (Dynamic Languages)
Hochschule Darmstadt Fachbereich Informatik
Hochschule Darmstadt Fachbereich Informatik Entwicklung webbasierter Anwendungen Tipps und Tricks zur Software Installation 1 Vorbemerkung Auf den Laborrechnern ist natürlich alles installiert! Die Installation
Visual Web Developer Express Jam Sessions
Visual Web Developer Express Jam Sessions Teil 1 Die Visual Web Developer Express Jam Sessions sind eine Reihe von Videotutorials, die Ihnen einen grundlegenden Überblick über Visual Web Developer Express,
jquery! JavaScript Frameworks Dr. Cora Burger
jquery! JavaScript Frameworks Dr. Cora Burger Überblick 1. Anwendungsbeispiele 2. Einstieg 3. jquery 4. Erweiterung jqueryui 5. Plugin-Beispiele 6. Erweiterung jquery Easing 7. Zusammenfassung, Ausblick
OSM-API. API = Application Programming Interface Fenster der OSM-DB zur Welt. Zentrale OSM-DB. API planet.osm daily.osc
OSM-API API = Application Programming Interface Fenster der OSM-DB zur Welt Zentrale OSM-DB http://wiki.openstreetmap.org/wiki/planet.osm API planet.osm daily.osc OSM-Editor Download/Anwendung OSM-API
Applets I. Grundlagen der g Applet-Programmierung
Applets I Grundlagen der g Applet-Programmierung 2 Inhalt Applets Was sind Applets Entwicklung Grundlagen Zustandssteuerung eines Applets Methoden zum Nachrichtentransfer Soundausgabe Animation Einbindung
Der SCHWEIZER WELTATLAS interaktiv als Web Applikation
16. Januar 2014 Der SCHWEIZER WELTATLAS interaktiv als Web Applikation Ein Prototyp realisiert mit ArcGIS API for JavaScript Masterarbeit am Institut für Kartografie und Geoinformation Leitung Prof. Dr.
Online Kataloge. Wie binde ich einen SGVSB-Online-Katalog in eine Webseite ein. Versionsnummer: 1.0 Änderungsdatum: 26.06.12.
Online Kataloge Wie binde ich einen SGVSB-Online-Katalog in eine Webseite ein. Versionsnummer: 1.0 Änderungsdatum: 26.06.12 Autor: Manuel Ginesta Kontakt: m.ginesta@ncag.ch Versionsliste Version Datum
Ablauf Unit2. Walkthrough
Ablauf Unit2 Vertiefendes Uebungsprojekt - SQL II Gerhard Wohlgenannt Test Vorstellung der Arbeitsumgebung (Software, Locations) Walkthrough Gruppeneinteilung + Themenvergabe Vorstellung der Arbeitsumgebung
«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
Leichtgewichtige Web 2.0-Architektur für komplexe Business-Anwendungen Nicolas Moser PRODYNA AG
05.07.2012 Leichtgewichtige Web 2.0-Architektur für komplexe Business-Anwendungen Nicolas Moser PRODYNA AG Agenda 01 Einführung 02 Architektur 03 Lösungen 04 Zusammenfassung 2 2 Agenda 01 Einführung 02
Inhalt. Hintergrund HTML CSS. JavaScript und das Document Object Model
Andreas Heß Inhalt Hintergrund HTML CSS JavaScript und das Document Object Model Netz-Protokolle Schichtenmodell OSI DoD Beispiele 7 Anwendung 6 Darstellung 5 Sitzung Anwendungen HTTP, HTTPS, SMTP,
XML Kurs 2005-8 LRZ 1
XML Kurs 2005-8 LRZ 1 Inhalt 2005-8 LRZ 2 Werbung 1: XML steht für strukturierte Daten March 2008 2005-8 LRZ 3 Werbung 2: XML ist lizenzfrei, plattformunabhängig und gut unterstützt March 2008 2005-8 LRZ
Allgemeines zur Fehlerbehebung. Browser-Cache löschen. Chrome
Allgemeines zur Fehlerbehebung Das ist eine Allgemeine Hilfe für die häufigsten Probleme. Diese betreffen vor allem den Browser- Cache, Popups, die die Befunde nicht anzeigen, fehlende Adobe Reader Installation
Responsive Webdesign
Responsive Webdesign Anlass sind 2 Probleme: 1. Darstellung der HU-Homepage auf mobilen Geräten ist nicht optimal (Überprüfung der Anzeige mit Strg+Shift+M oder Simulatoren www.responsinator.com) 2. Summe
HTML5 offline - Fallstricke von Web-Apps und Webseiten. Ulrich Schmidt (Sevenval GmbH)
HTML5 offline - Fallstricke von Web-Apps und Webseiten Ulrich Schmidt (Sevenval GmbH) HTML5 offline 1. Warum? 2. Konzepte 3. Techniken 4. Schritte zur offline WebApp 5. Fallstricke / Grenzen 6. Empfehlung
IAB Switzerland Anlieferung
IAB Switzerland Anlieferung Stand: 10. März 2010 Flash Spezifikation Bei Flash Werbemitteln ist die Klickzählung nicht automatisch durch den Adserver steuerund implementierbar. Deshalb ist bei der Erstellung
Veröffentlichen von mit der Kamera aufgenommenen Videos auf Webseiten
Veröffentlichen von mit der Kamera aufgenommenen Videos auf Webseiten Dieses Dokument enthält Informationen über das Veröffentlichen von mit der Kamera aufgenommenen Videos auf einer Webseite. Anpassen
1.1 Worum es in diesem Buch geht... 3. Moving Target: Offene Webstandards... 4. 1.3 Web-Animationen: Status quo... 5
VII Inhalt 1 Einführung 2 1.1 Worum es in diesem Buch geht... 3 1.2 Moving Target: Offene Webstandards... 4 1.3 Web-Animationen: Status quo... 5 2 Das Autorenwerkzeug Adobe Edge Animate 8 2.1 Zielgruppen...
Informatik I: Einführung in die Programmierung
Informatik I: Einführung in die Programmierung 23. Das WWW befragen Albert-Ludwigs-Universität Freiburg Bernhard Nebel 15.01.2016 15.01.2016 B. Nebel Info I 2 / 19 Oft braucht ein Programm Informationen,
Template Programmierung mit Joomla!
Joomla! DAY TM AUSTRIA 2015 Template Programmierung mit Joomla! Inhalt Einstieg in die Joomla! Template Programmierung Inhalt Einleitung Planung Joomla! Template Programmierung Joomla! Template Demo Fragen
Informatik I: Einführung in die Programmierung
Informatik I: Einführung in die Programmierung 23. Das WWW befragen Albert-Ludwigs-Universität Freiburg Bernhard Nebel 15.01.2016 1 15.01.2016 B. Nebel Info I 3 / 19 Oft braucht ein Programm Informationen,
Einstieg. Über mich. Über Sie/dich. Lernziele. verheiratet, Aargau Trainer bei switchplus. Christian.Zumbrunnen @switchplus.ch. Ziele.
Über mich verheiratet, Aargau Trainer bei switchplus Im Web unterwegs seit 1995 Christian.Zumbrunnen @switchplus.ch Einstieg Wie komme ich zu meinem eigenen Internet-Auftritt? begeistert von Yola, Wordpress,
Clemens H. Cap http://wwwiuk.informatik.uni-rostock.de http://www.internet-prof.de. Bedarf an Zeit, Speicher, Netz und anderen Ressourcen
Performance Bedarf an Zeit, Speicher, Netz und anderen Ressourcen Lernziel Warum ist Performance bei Ajax so wichtig? Was sind die Fallen bei Ajax Programmierung? Welche Werkzeuge gibt es? Ausgewählte