Nachdem die großen Plattformen wie Flickr und Facebook vorgemacht haben, wie aus einer kontinuierlichen Entwicklung auch eine kontinuierliche Produktion werden kann, wird das Thema DevOps auch für kleinere LAMP-Projekte relevant. Welche Methoden und Tools für N Deploys pro Tag und Feature für Production-Zeiten von einer Woche sorgen, zeigt dieser Talk.
Este documento presenta resúmenes de 6 exposiciones realizadas en la Jornada de Olmué el 4 de julio de 2009. La primera exposición discute la innovación autóctona como motor para el desarrollo territorial y la necesidad de flujos de conocimiento entre lo local y global. La segunda habla sobre la importancia de medir resultados para mejorar a través de un sistema de monitoreo. La tercera trata sobre la gestión de innovación y empresas derivadas. La cuarta presenta la experiencia en consultoría de gestión de negocios. La quinta anal
Photography by Gemma Reynolds
Dresses from Luella's Boudoir, Wimbledon Village. Hair/Make-up Mel & Sem. Director, Tiffany Grant-Riley of Grant-Riley Weddings
Flowers from Wimbledon Village Florist
Third Sector Digital Edge "Driving Mobile Success" presentationOisin Lunny
I was honoured to present at the Third Sector Digital Edge conference today about "Driving Mobile Success" alongside Mark Weber from Save The Children #TSDigitalEdge
Bifold brochure for International Mobile Top-UpiPayStation
iTop-Up permite recargar cuentas de teléfonos celulares internacionales en tiempo real desde Estados Unidos. El servicio aplica fondos a la cuenta del destinatario, quien recibe un mensaje de texto notificándole de la recarga. iTop-Up conecta a remitentes y destinatarios en todo el mundo de manera rápida y conveniente.
Nachdem die großen Plattformen wie Flickr und Facebook vorgemacht haben, wie aus einer kontinuierlichen Entwicklung auch eine kontinuierliche Produktion werden kann, wird das Thema DevOps auch für kleinere LAMP-Projekte relevant. Welche Methoden und Tools für N Deploys pro Tag und Feature für Production-Zeiten von einer Woche sorgen, zeigt dieser Talk.
Este documento presenta resúmenes de 6 exposiciones realizadas en la Jornada de Olmué el 4 de julio de 2009. La primera exposición discute la innovación autóctona como motor para el desarrollo territorial y la necesidad de flujos de conocimiento entre lo local y global. La segunda habla sobre la importancia de medir resultados para mejorar a través de un sistema de monitoreo. La tercera trata sobre la gestión de innovación y empresas derivadas. La cuarta presenta la experiencia en consultoría de gestión de negocios. La quinta anal
Photography by Gemma Reynolds
Dresses from Luella's Boudoir, Wimbledon Village. Hair/Make-up Mel & Sem. Director, Tiffany Grant-Riley of Grant-Riley Weddings
Flowers from Wimbledon Village Florist
Third Sector Digital Edge "Driving Mobile Success" presentationOisin Lunny
I was honoured to present at the Third Sector Digital Edge conference today about "Driving Mobile Success" alongside Mark Weber from Save The Children #TSDigitalEdge
Bifold brochure for International Mobile Top-UpiPayStation
iTop-Up permite recargar cuentas de teléfonos celulares internacionales en tiempo real desde Estados Unidos. El servicio aplica fondos a la cuenta del destinatario, quien recibe un mensaje de texto notificándole de la recarga. iTop-Up conecta a remitentes y destinatarios en todo el mundo de manera rápida y conveniente.
German: Softwareprodukte aus einem Source Code mit JavascriptRalf Schwoebel
Erstellung von Software-Produkten mit Javascript aus einem Quelltext: Diese Präsentation der EnterJS Entwicklerkonferenz in Köln 2014 zeigt den Weg der Erstellung von Software-Lösungen mit Javascript mit den Frameworks Cordova/Phonegap und Node-Webkit.
Vom Setup bis zur App-Store Anmeldung des fertigen Produktes wird auf 44 Folien dargestellt, welche Lernkurve hinter einer solchen Entwicklung steht.
CSS3 als Untermenge von HTML5 bietet viele tolle Neuerungen. Aufgrund der fehlenden Spezifikationen braut hier jedoch jeder Browser sein eigenes Süppchen.
Was für Vorteile CSS3 dennoch bietet und wie die Nachteile mit den richtigem Tool ausgeglichen werden können soll dieser Vortrag von Alberto Assmann exemplarisch zeigen.
Die Mozilla Audio Data-API erlaubt neue Interaktionen mit Audiodateien, die über HTML 5 in Webseiten eingebettet sind. So ist etwa eine Spektrum-Anzeige im Browserfenster und in Echtzeit möglich. Auch das erzeugen von Audio-Daten durch den Browser sind durch die Schnittstelle möglich.
Lange Jahre wurde Javascript von vielen Entwicklern nicht so ernst genommen. Durch den vermehrten Einsatz von AJAX und der einfachen Handhabung von Javascript-Frameworks und Libraries ist die Akzeptanz gestiegen und Javascript ist aus der Webentwicklung nicht mehr wegzudenken.Unter dem Titel "Best Practises- Debugging und Logging JS" zeigt uns Martin Ruprecht in zwei Vorträgen Mittel und Wege, wie man effektiv die Fehlersuche mit Javascript betreibt. In diesem ersten Vortrag werden qualitätssichernde Maßnahmen für die Entwicklung mit Javascript aufgezeigt.
Die "Donnerstags-Vorträge" werden sowohl in Würzburg als auch in München gehalten. Bei Interesse einfach das Blog beobachten, um auf dem Laufenden zu bleiben!
- Eckdaten des Frameworks
- Architektur & Internals
- Mikrokernel und Architektur des Frameworks
- Architektur des Frameworks mit eigenen Bundles
- Überblick Kernel-Komponenten
- Der EventDispatcher
- Der DependencyInjectionContainer
- Beispiel-Konfigurationdes des DICs
- Der HttpKernel
- Projektstruktur - apps-, web-, src- und vendor-Verzeichnis
- Beispiel-FrontController
- Beispiel-AppKernel
- Beispiel-Controller-Klasse
- Die Templating-Engine Twig
- Beispiel Layout/Templates
- Demo
Ein subjektiver Zwischenstand zu HTML5 ergänzt mit Statistiken und vielen weiterführenden Links. Die herausgepickten Aspekte sind: Geolocation, Video Support, Web Storage, Web Sockets, PushState, Web Forms, Drag and Drop, Semantik und Canvas.
Native Cross-Platform-Apps mit Titanium Mobile und AlloyMayflower GmbH
Dank der Webtechnologien stehen Ihnen viele Möglichkeiten bereit, auf dem mobilen Markt präsent zu sein. Da sind unter anderem W3C Widgets, mobile Webseiten, Webapplikationen und als native App verpackte Webapplikationen. Eine weitere Möglichkeit stellt das Titanium-Mobile-SDK dar. Das Besondere: Mit Titanium erstellte Apps sind nativ. Aus nur einer Codebasis können Sie eine native Anwendung für iOS, Android, BlackBerry und Tizen generieren, sowie eine Webapplikation. Nativ bedeutet, die Apps werden nicht nur sehr schnell ausgeführt, sondern es stehen Ihnen für eine optimale Usability auch native UI Widgets zur Verfügung. Interessant ist das SDK daher nicht nur für Webentwickler, sondern auch für Entwickler, die ihre Apps bisher aufwändig individuell nativ entwickelt haben. Mit Titanium benötigen Sie lediglich JavaScript-Kenntnisse.
Ein Blick in die Kristallkugel mit dem Ziel spannende und relevante Online-Trends für das Jahr 2007 hervorzusagen. Auf der Liste sind:
- Enterprise Wikis
- Software as a Service (SES)
- OpenID
- WPF/E (=Windows Presentation Foundation / Everywhere) Neu: Microsoft Silverlight
- SIP/IMS
- Online TV
- Wireless Commons / OLSR
- Live Clipboard
- Scrum
- Geo tagging
Ein Blick in die Kristallkugel mit dem Ziel spannende und relevante Online-Trends für das Jahr 2005 hervorzusagen. Auf der Liste sind:
- Open Source / Free Software
- WebAnalytics
- Compression
- VoIP
- Rich Thin Clients
- WiFi/WiMax
- SOA (Service-oriented architecture)
- Flash Streaming
- DAISY
- Folksonomy
Webanalytics Software scheitert an einigen Faktoren: zu teuer, zu schwer, zu langsam. Hier stellen wir einen Ansatz vor, wie Videotracking funktionieren kann. Wann dürfen wir dies für Sie tun?
Franz Pletz möchte mit seinem Vortrag, nachdem vor einigen Wochen bereits Martin Brotzeller in die grundlegende Shell- und UNIX-Tools-Benutzung eingeführt hat, in die Customization der eigenen Shell und in sinnvollen weiteren Tools, die den Developer-Alltag erleichtern, einführen. Dies sind einerseits Standardtools mit ungeahnter Zusatzfunktionalität, die allerdings häufig nicht bekannt sind aber auch Zusatztools, die erst neu zu installieren sind.
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...Mayflower GmbH
Nach dem erfolgreichen Launch einer Software gibt es immer das gleiche Dilemma: Neue Features konkurrieren mit Bugs und Anpassungen an der bestehenden Software, die aus dem operativen Betrieb kommen. Und die Gretchenfrage nach dem dringenden und dem wichtigsten stellt sich kontinuierlich und es braucht einen Mechanismus um diese zu Balancieren. Ich möchte die Auswirkungen von Maintenance parallel zur Produktentwicklung aufzeigen, die Folgeprobleme benennen und Strategien vorstellen um dieses Dilemma zu umgehen.
This document provides an overview of the Go programming language, including its history, design goals, key features, and tooling. Go was created at Google in 2007 and released as an open source project in 2009. It aims to provide simplicity, concurrency, and robustness for building large-scale distributed systems. Some of its core features include garbage collection, static typing, interfaces, goroutines for lightweight threading, and a large standard library.
German: Softwareprodukte aus einem Source Code mit JavascriptRalf Schwoebel
Erstellung von Software-Produkten mit Javascript aus einem Quelltext: Diese Präsentation der EnterJS Entwicklerkonferenz in Köln 2014 zeigt den Weg der Erstellung von Software-Lösungen mit Javascript mit den Frameworks Cordova/Phonegap und Node-Webkit.
Vom Setup bis zur App-Store Anmeldung des fertigen Produktes wird auf 44 Folien dargestellt, welche Lernkurve hinter einer solchen Entwicklung steht.
CSS3 als Untermenge von HTML5 bietet viele tolle Neuerungen. Aufgrund der fehlenden Spezifikationen braut hier jedoch jeder Browser sein eigenes Süppchen.
Was für Vorteile CSS3 dennoch bietet und wie die Nachteile mit den richtigem Tool ausgeglichen werden können soll dieser Vortrag von Alberto Assmann exemplarisch zeigen.
Die Mozilla Audio Data-API erlaubt neue Interaktionen mit Audiodateien, die über HTML 5 in Webseiten eingebettet sind. So ist etwa eine Spektrum-Anzeige im Browserfenster und in Echtzeit möglich. Auch das erzeugen von Audio-Daten durch den Browser sind durch die Schnittstelle möglich.
Lange Jahre wurde Javascript von vielen Entwicklern nicht so ernst genommen. Durch den vermehrten Einsatz von AJAX und der einfachen Handhabung von Javascript-Frameworks und Libraries ist die Akzeptanz gestiegen und Javascript ist aus der Webentwicklung nicht mehr wegzudenken.Unter dem Titel "Best Practises- Debugging und Logging JS" zeigt uns Martin Ruprecht in zwei Vorträgen Mittel und Wege, wie man effektiv die Fehlersuche mit Javascript betreibt. In diesem ersten Vortrag werden qualitätssichernde Maßnahmen für die Entwicklung mit Javascript aufgezeigt.
Die "Donnerstags-Vorträge" werden sowohl in Würzburg als auch in München gehalten. Bei Interesse einfach das Blog beobachten, um auf dem Laufenden zu bleiben!
- Eckdaten des Frameworks
- Architektur & Internals
- Mikrokernel und Architektur des Frameworks
- Architektur des Frameworks mit eigenen Bundles
- Überblick Kernel-Komponenten
- Der EventDispatcher
- Der DependencyInjectionContainer
- Beispiel-Konfigurationdes des DICs
- Der HttpKernel
- Projektstruktur - apps-, web-, src- und vendor-Verzeichnis
- Beispiel-FrontController
- Beispiel-AppKernel
- Beispiel-Controller-Klasse
- Die Templating-Engine Twig
- Beispiel Layout/Templates
- Demo
Ein subjektiver Zwischenstand zu HTML5 ergänzt mit Statistiken und vielen weiterführenden Links. Die herausgepickten Aspekte sind: Geolocation, Video Support, Web Storage, Web Sockets, PushState, Web Forms, Drag and Drop, Semantik und Canvas.
Native Cross-Platform-Apps mit Titanium Mobile und AlloyMayflower GmbH
Dank der Webtechnologien stehen Ihnen viele Möglichkeiten bereit, auf dem mobilen Markt präsent zu sein. Da sind unter anderem W3C Widgets, mobile Webseiten, Webapplikationen und als native App verpackte Webapplikationen. Eine weitere Möglichkeit stellt das Titanium-Mobile-SDK dar. Das Besondere: Mit Titanium erstellte Apps sind nativ. Aus nur einer Codebasis können Sie eine native Anwendung für iOS, Android, BlackBerry und Tizen generieren, sowie eine Webapplikation. Nativ bedeutet, die Apps werden nicht nur sehr schnell ausgeführt, sondern es stehen Ihnen für eine optimale Usability auch native UI Widgets zur Verfügung. Interessant ist das SDK daher nicht nur für Webentwickler, sondern auch für Entwickler, die ihre Apps bisher aufwändig individuell nativ entwickelt haben. Mit Titanium benötigen Sie lediglich JavaScript-Kenntnisse.
Ein Blick in die Kristallkugel mit dem Ziel spannende und relevante Online-Trends für das Jahr 2007 hervorzusagen. Auf der Liste sind:
- Enterprise Wikis
- Software as a Service (SES)
- OpenID
- WPF/E (=Windows Presentation Foundation / Everywhere) Neu: Microsoft Silverlight
- SIP/IMS
- Online TV
- Wireless Commons / OLSR
- Live Clipboard
- Scrum
- Geo tagging
Ein Blick in die Kristallkugel mit dem Ziel spannende und relevante Online-Trends für das Jahr 2005 hervorzusagen. Auf der Liste sind:
- Open Source / Free Software
- WebAnalytics
- Compression
- VoIP
- Rich Thin Clients
- WiFi/WiMax
- SOA (Service-oriented architecture)
- Flash Streaming
- DAISY
- Folksonomy
Webanalytics Software scheitert an einigen Faktoren: zu teuer, zu schwer, zu langsam. Hier stellen wir einen Ansatz vor, wie Videotracking funktionieren kann. Wann dürfen wir dies für Sie tun?
Franz Pletz möchte mit seinem Vortrag, nachdem vor einigen Wochen bereits Martin Brotzeller in die grundlegende Shell- und UNIX-Tools-Benutzung eingeführt hat, in die Customization der eigenen Shell und in sinnvollen weiteren Tools, die den Developer-Alltag erleichtern, einführen. Dies sind einerseits Standardtools mit ungeahnter Zusatzfunktionalität, die allerdings häufig nicht bekannt sind aber auch Zusatztools, die erst neu zu installieren sind.
Mit Maintenance umgehen können- Fixt du noch Bugs oder lieferst du schon neue...Mayflower GmbH
Nach dem erfolgreichen Launch einer Software gibt es immer das gleiche Dilemma: Neue Features konkurrieren mit Bugs und Anpassungen an der bestehenden Software, die aus dem operativen Betrieb kommen. Und die Gretchenfrage nach dem dringenden und dem wichtigsten stellt sich kontinuierlich und es braucht einen Mechanismus um diese zu Balancieren. Ich möchte die Auswirkungen von Maintenance parallel zur Produktentwicklung aufzeigen, die Folgeprobleme benennen und Strategien vorstellen um dieses Dilemma zu umgehen.
This document provides an overview of the Go programming language, including its history, design goals, key features, and tooling. Go was created at Google in 2007 and released as an open source project in 2009. It aims to provide simplicity, concurrency, and robustness for building large-scale distributed systems. Some of its core features include garbage collection, static typing, interfaces, goroutines for lightweight threading, and a large standard library.
Unsere Anti-Pattern Karten sind aus unserer jahrelangen Arbeit mit Kunden, und den daraus gewonnenen Erfahrungen entstanden. Sie sollen euch dabei helfen, selbst Fettnäpfchen zu erkennen, die wir schon von außen erlebt haben, oder in die wir sogar teilweise selbst schon getreten sind. Wenn ihr noch andere Anti-Patterns kennt, dann schickt sie uns unter https://mayflower.de/agile-antipattern.
Wenn der größte Teil der Logik in JavaScript stattfindet, dann findet auch der größere Teil der Sicherheitsrisiken dort sein Zuhause. Und auch Angreifer finden mit JavaScript eine interessante neue Spielwiese, denn die Sprache selbst und auch Ihre Heimat in Browser und Node.js bringen neue Probleme.
Genau da setzt der Vortrag an: die verblüffenden Unterschiede von JavaScript zu anderen Sprachen, wenn es um Security geht. Die Risiken und auch die Besonderheiten von Browsern und anderen JavaScript-Engines wie Node.js. Die Security-Implikationen von JavaScript-Frameworks bis hin zu speziellen Problemen wie mXSS, ReDOS und HTML5-Security.
Warum gilt Management bei Entwicklern als notorisch schlecht? Wie kann es kommen, dass ein Entwickler der eben noch auf die Leitung schimpfte sich selbst identisch verhält, sobald er in die Funktion rückt? Wie würde gutes Management in der IT denn aussehen? Wir berichten über unserer naiven Fehler am Anfang, unsere Erfahren auf der agilen Reise und über das, bei dem wir heute angekommen sind. Und wir haben wirklich viel falsch gemacht.
Salt and pepper — native code in the browser Browser using Google native ClientMayflower GmbH
Native client (NaCl) allows running native code securely in the browser. It uses a sandboxed execution environment and static analysis to ensure safety. Portable native client (PNaCl) compiles code to an architecture-independent format. The Pepper API provides access to browser capabilities like filesystem and networking. While currently only supported in Chrome, NaCl enables efficient execution of existing C/C++ code in the browser for tasks like audio/video processing, games, and packaging desktop applications as Chrome apps.
This document discusses JavaScript memory leaks and how to debug them. It defines a memory leak as occurring when memory is allocated but not freed by a program. In JavaScript, memory allocation happens through object creation, and garbage collection frees memory. Memory leaks can happen if objects remain referenced and cannot be collected. The document provides tips on how to use Chrome DevTools to analyze heap snapshots and timelines to find leaks, including cases around scopes, properties, closures, events, and detached DOM trees. It suggests strategies like naming functions, tracking individual objects, and handling leaky libraries.
Viele PHP-Applikationen sind über Jahre erfolgreich, haben jede Änderung mitgemacht und sind inzwischen weder wartbar noch entsprechen sie aktuellen Standards. Doch um am Markt zu bestehen braucht man neue Features, und damit einen Rewrite auf ein modernes Framework wie Zend Framework 2, Laravel 4 oder Symfony 2. Aber Rewrites schlagen häufig durch jede Deadline oder ganz fehl, und währenddessen übernimmt die Konkurrenz den Markt. Wie man aus der Rewrite-Falle kommt und verlässlich eine wartbare Version der Software herstellt – das erklärt dieser Talk mit Methoden, Beispielen und Praxiswissen.
Wenn der größte Teil der Logik in JavaScript stattfindet, dann findet auch der größere Teil der Sicherheitsrisiken dort seine Heimat. Und Angreifer finden mit JavaScript eine interessante neue Umwelt, denn die Sprache selbst und auch Ihre Heimat im Browser und Node.js bringen viele neue Probleme. Und genau da setzt der Vortrag an: die verblüffenden Unterschiede von JavaScript zu anderen Sprachen, wenn es um Security geht. Die Risiken und auch die Besonderheiten von Browsern und anderen JavaScript-Engines wie Node.js. Die Securityimplikationen von JavaScript-Frameworks bishin zu speziellen Problemen wie mXSS, ReDOS und HTML5-Security.
50 mal produktiver - oder warum ich gute Teams brauche und nicht gute Entwick...Mayflower GmbH
Soll ich Entwickler pro Stunde einkaufen? Lohnt es sich für mich, spontan ein Team zu staffen? Brauche ich einen Rockstar-Developer im Team, um die Deadline zu retten?
Woher kommt die Performance von Development-Teams? Ist es wirklich eine magische Eigenschaft von bestimmten Entwicklern, die Produkte erfolgreich macht? Oder kommt herausragende Performance von einer ganz anderer Seite?
Was Responsive Webdesign meint, ist klar: Ein Layout, das sich flexibel an die Bildschirmgröße des Clients anpasst. Für einen perfekten Auftritt auf dem Smartphone ebenso wie dem UltraHD-TV.
Was so schön klingt, birgt aber auch viele Fallstricke. Der Vortrag wird einige von ihnen Vorstellen: Von extravaganten Kundenwünschen, überraschender Browser-Inkompatibilität und der Verwendung von iFrames bis hin zu responsiven HTML-Newslettern. Abgerundet wird der Talk durch verschiedene Beispiele für den Workflow, Testing-Strategien und dem Thema SEO im Zusammenhang mit Responsive Webdesign.
Aussagen wie "Pair Programming ist langsam", "Pair Programming ist nur was für Junior Entwickler zum Übertragen von Domainwissen", "Pair Programming verbrennt zu viele Resourcen und ist nichts für mein Projekt", "Meine Tasks sind zu komplex fürs Pair Programming" oder "Im Moment haben wir keine Zeit fürs Pair Programming, wir müssen liefern (fertig werden)" werden oft als Argumente gegen Pair Programming vorgebracht.
Mit diesem Talk/Webinar möchte Martin Ruprecht den Aussagen entgegentreten und seine Erfahrungen aus den letzten Kundenprojekten weitergeben und zeigen, wann Pair Programming sinnvoll eingesetzt werden kann und warum in jedem Projekt im Pair programmiert werden sollte.
Zielgruppe:
Wenn Sie Entwickler oder Projektverantwortlicher sind, dann ist dieser Talk/dieses Webinar genau richtig für Sie.
Über Martin Ruprecht:
Martin Ruprecht arbeitet seit mehreren Jahren bei Mayflower und ist JavaScript und PHP-Entwickler. Zuvor studierte er erfolgreich Medientechnik/Medieninformatik an der FH Deggendorf. Neben seiner Tätigkeit als Entwickler bei Mayflower organisiert Martin regelmäßig Coding Dojos in München, tritt auf Konferenzen auf und hält Vorträge und Workshops zum Thema JavaScript, Testing und Qualitätssicherung in Webprojekten.
Vorstellung der Technologiedemo www.shoeism.de mit unserem LSH Algorithmus zur Ähnlichkeitssuche von hochdimensionalen Daten am Beispiel von E-Commerce Produktbildern.
Kennen Sie das? Während Sie noch fleißig wochen- und monatelang an Ihrer mobilen App konzipieren/konzipieren lassen, stehen schon die Mitbewerber auf dem Plan und haben eine ähnliche App herausgebracht. Besonders mobile Apps müssen zügig auf den Markt kommen, um Wettbewerbsvorteile in einer neuen, sich immer schneller drehenden Welt für sich entscheiden zu können. Doch welches Handwerkzeug braucht es hierzu?
Der Vortrag möchte Sie entführen in die agile Welt, in der in regelmäßigen, kurzen Zyklen neue Teilabschnitte Ihres Gesamtprojekts für Ihre Nutzerschaft veröffentlicht werden. Richtig angewendet bekommen Sie so einen Nutzersog, der Ihre Mitbewerber in den Schatten stellen wird. Warum warten, bis alle Funktionen komplett fertig sind, wenn Sie zunächst auch mit dem "Minimum Viable Product" starten können, um gleichzeitig wertvolle automatisierte Marktforschung über Nutzerfeedback für die nächsten Versionen zu erhalten? Wir stellen Ihnen hier das konzeptionelle Rüstzeug vor, das Sie hierfür benötigen.
Mit weit über 1 Million Downloads hat sich die quelloffene Piwik-Suite als zuverlässige und beliebte Alternative zu Traffic-Analysewerkzeugen wie Google Analytics etabliert. Heute lassen sich mit Piwik nahezu beliebige Statistiken zur Nutzung von Webseiten erfassen, auch das Monitoring komplexer Marketing-Kampagnen ist möglich. Das besondere an der Software: Ihr Funktionsumfang lässt sich über ein Plug-in-System nahezu beliebig erweitern.
Im Webinar zeigt Ihnen Thomas Steur, selbst Core-Mitglied im Piwik-Projektteam und Lead Developer für Piwik Mobile, wie Entwickler Piwik richtig nutzen können, was es mit der Plug-in-Entwicklung auf sich hat und worauf man im Umgang mit Echtzeit-Traffic-Daten (Stichwort: Skalierung) achten muss.
7. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 7
- Laufen im Hintergrund
- Mehrere Threads, Vorteile bei Multicore CPU
- Keine Warnmeldung bei langlaufenden Skripts
- Erhöhte Responsivität der Webanwendung
HTML5 Web Workers - Vorteile
8. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 8
- Keine Unterstützung im IE
- Kein direkter Zugriff auf die Website und die DOM API (window,
window.document, alert(), …)
- Etwas schwieriger zu debuggen
- Same Origin (scheme, host, port)
- Manches funktioniert noch nicht so, wie man es erwartet
HTML5 Web Workers - Nachteile
9. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 9
Thread Thread
I Kommunikation über Nachrichten und Callbacks
HTML5 Web Workers - Funktionsweise
Applikation Worker
10. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 10
HTML5 Web Workers - Lebenszyklus
if (typeof(Worker) !== „undefined“) {
}
var worker = new Worker(„worker.js“);
worker.terminate();
11. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 11
HTML5 Web Workers - Client
function messageHandler(message) {
var data = message.data;
}
worker.addEventListener("message", messageHandler, true);
function errorHandler(e) {
…
}
worker.addEventListener(„error", errorHandler, true);
worker.postMessage(message);
12. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 12
HTML5 Web Workers - Worker
function messageHandler(message) {
var data = message.data;
}
addEventListener("message", messageHandler, true);
postMessage(message);
13. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 13
HTML5 Web Workers - Worker
var subWorker = new Worker(“subworker.js“);
importScripts(“helper.js”, “util.js”)
14. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 14
FRAGEN ?
15. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 15
Hands-On
16. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 16
HTML5 Web Workers – Hands-On
math.html math.js
Erstellt Worker
Schickt jede Primzahl
zum Anzeigen zurück
18. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 18
Storage
19. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 19
I Werte existieren nur solange das Fenster/Tab geöffnet ist
I Werte nur aus dem Fenster / Tab zugreifbar, in dem sie erstellt
wurden
Storage – SessionStorage
20. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 20
I Werte existieren auch nachdem der Browser / Tab geschlossen
wurde weiter
I Werte können aus dem Fenster / Tab zugreifbar, in dem sie
erstellt wurden
Storage – LocalStorage
21. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 21
Storage - Support
if (window.sessionStorage) {
var storage = window.sessionStorage;
…
}
if (window.localStorage) {
var storage = window.localStorage;
…
}
22. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 22
Storage - API
getItem(key) Gibt das Element zum key oder null zurück
setItem(key, value) Speichert einen Wert im Storage
removeItem(key) Entfernt einen Wert im Storage
length Elemente im Storage
key(index) Gibt den x-ten Key zurück
clear() Löscht den Storage Inhalt
storage.key = value;
alert(storage.key);
23. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 23
Storage - Event
function storageListener(event) {
var key = event.key; // Key
var oldValue = event.oldValue; // Alter Wert im Storage
var newValue = event.newValue; // Neuer Wert im Storage
var url = event.url; // Origin Url
var storageArea = event.storageArea; // Storage Objekt
}
window.addEventListener(“storage“, storageListener, true);
24. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 24
I WebSQL DB in Safari, Chrome und Opera implementiert, wird
allerdings nicht in Firefox implementiert werden, da die
Spezifikation an der Stelle „stalled“ ist (IE Support ganz zu
schweigen)
I Indexed Database (früher WebSimpleDB) ist eine neuere
Spezifikation, allerdings noch in keinem Browser implementiert
Storage - Database
25. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 25
FRAGEN ?
26. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 26
Hands-On
27. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 27
Storage – Hands-On
I Formular zum Abspeichern von Key-Value Paaren
I Funktion zum Auslesen des kompletten Storage
I Funktion zum Löschen des kompletten Storage
29. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 29
WebSockets
30. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 30
I TCP basiertes Protokoll
I Weniger Traffic / Overhead
I Geringere Latenz
I Full-Duplex Kommunikation
I ws:// bzw. wss:// Prefix
WebSockets
31. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 31
WebSockets – Protokoll - Request
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Protocol: sample
Upgrade: WebSocket
Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5
Origin: http://example.com
^n:ds[4U
32. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 32
WebSockets – Protokoll - Response
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://example.com
Sec-WebSocket-Location: ws://example.com/demo
Sec-WebSocket-Protocol: sample
8jKS'y:G*Co,Wxa-
33. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 33
I Jetty / Netty (Java)
I Glassfish (Java)
I jWebSocket (Java)
I xLightweb (Java)
I Mojolicious (Perl)
I PyWebsocket (Python)
I phpwebsockets (PHP Daemon)
WebSockets - Implementierungen
34. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 34
I Nur zwei Byte pro Frame
• 0x00 und 0xFF
I Keine Binärdaten in Frames unterstützt
• Terminator vs. Längenprefix
I UTF-8 Daten im Frame
WebSockets - Protokoll
35. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 35
WebSockets - API
if (window.WebSocket) {
…
}
var socket = new WebSocket(“ws://www.test.de/echo“);
socket.close();
36. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 36
WebSockets - API
socket.onopen = function() {}
socket.onclose = function() {}
socket.onmessage = function(message) {
var data = message.data;
}
socket.send(“Some Text“);
37. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 37
FRAGEN ?
38. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 38
Hands-On
39. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 39
WebSockets – Hands-On
I Chat Client
• Aufbauen von 3 Connections zum Server
• Input Feld und 3 Buttons zum Absenden
• Anzeigen von empfangenen Nachrichten
41. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 41
File API
42. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 42
File API
<form>
<input type="file" id="fileElem" multiple=„true“ accept="image/*"
style="display:none" onchange="handleFiles(this.files)">
</form>
<a href="javascript:doClick()">Select some files</a>
function doClick() {
var el = document.getElementById("fileElem");
if (el) { el.click(); }
}
function handleFiles(fileList) {
…
}
43. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 43
File API - FileList
var fileInput = document.getElementById(„fileElem");
var files = fileInput.files;
var file = null;
for (var i = 0; i < files.length; i++) {
file = files.item(i);
file = files[i];
alert(file.name);
}
44. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 44
File API - File
name Name der Datei
lastModifiedDate Änderungsdatum der Datei
size Anzahl Bytes
type MIME-Type
slice(start, length, contentType) Teil der Daten zurückgeben
45. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 45
File API - FileReader
var reader = new FileReader();
reader.onload = function (e) {
showImage(e.target.result);
};
reader.readAsDataURL(file);
readAsArrayBuffer(blob) Einlesen als ArrayBuffer
readAsBinaryString(blob) Einlesen als Binär Daten
readAsText(blob, encoding) Einlesen als Text
readAsDataURL(blob) Einlesen als DataURL
abort() Abbrechen des Lesevorgangs
46. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 46
File API - FileReader
data:[<mediatype>][;base64],<data>
data:,Hello%2C%20World!
Einfacher Text
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
base64 kodierter Text (von oben)
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E
HTML Dokument mit <h1>Hello, World</h1>
data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBT
UEAALGP……….
47. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 47
File API - FileReaderSync
NOT_FOUND_ERR 1
SECURITY_ERR 2
ABORT_ERR 3
NOT_READABLE_ERR 4
ENCODING_ERR 5
var reader = new FileReaderSync();
image.src = reader.readAsDataURL(file);
FileException
48. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 48
Hands-On
49. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 49
File API – Hands-On
I Auswählen von mehreren Bilddateien
I Darstellen als Thumbnail
52. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 52
Canvas
<canvas id=“canvas“ width=“500“ height=“500“>
Alternativer Text
</canvas>
var canvas = document.getElementById(“canvas““);
if (canvas.getContext) {
…
}
var context = canvas.getContext(‘2d‘);
var context = canvas.getContext(‘webgl‘);
53. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 53
Canvas – 2D – Einfaches Beispiel
var context = canvas.getContext(‘2d‘);
context.fillStyle = ‚rgb(255, 0, 0)‘;
context.fillRect(20, 40, 240, 160);
X-Achse
Y-Achse
(0,0)
(20,40)
(240,160)
54. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 54
Canvas – API Überblick – Rechtecke und Pfade
clearRect(x1, y1, x2, y2) Löscht den Inhalt eines Rechtecks
strokeRect(x1, y1, x2, y2) Rahmen eines Rechtecks
fillRect(x1, y1, x2, y2) Füllt ein Rechteck
beginPath() Begin eines Pfades
moveTo(x, y) Sprung zum Punkt
lineTo(x, y) Linie vom aktuellen zum nächsten Punkt
arc(x, y, r, sw, ew, d) Kreis (Startpunkt, Radius, Start/Endwinkel, Drehung)
closePath() Beendet den Pfad
55. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 55
Canvas – API Überblick - Styling
strokeStyle Linieneigenschaften
fillStyle Fülleigenschaften
lineWidth Linienstärke
lineCap butt (standard), round, square
lineJoin miter (standard), bevel, round
stroke() Zeichnet den Umriss des Objekts
fill() Füllt das Objekt
context.fillStyle = ‚#FFF‘;
context.fillStyle = ‚rgba(r, g, b, a)‘;
context.lineWidth = ‚3.0‘;
56. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 56
Canvas – API Überblick - Text
fillText(text, x, y) Füllt einen Text aus
strokeText(text, x, y) Zeichnet Umriss des Textes
font Identisch zu CSS3 Eigenschaften
textAlign Horizontale Orientierung
baseline Vertikalte Einordnung
context.fillText(‘Bazinga‘, 50, 50)
57. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 57
Canvas – API Überblick - Bilder
var image = new Image();
img.src = ‘picture.png‘;
img.onload = function() {
context.drawImage(img, 20, 100);
}
drawImage(object, x, y, width, height, x1, y1, x2, y2)
58. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 58
Canvas – API Überblick - Manipulation
getImageData(x1, y1, x2, y2) Array mit Bilddaten
putImageData(data, x, y) Malt Bilddaten an eine Position
toDataUrl() base64 kodiertes Bild
var oldData = context.getImageData(0, 0, 100, 100); //
var newData = [];
for (var i=0; oldData.data.length;) {
newData[i] = 255 – oldData.data[i++]; // Rot
newData[i] = 255 – oldData.data[i++]; // Grün
newData[i] = 255 – oldData.data[i++]; // Blau
newData[i] = oldData.data[i++]; // Alpha
}
oldData.data = newData;
context.putImageData(oldData, 500, 500);
59. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 59
Canvas – Context Stack
context.save();
context.restore();
fillStyle (Grün)
save
fillStyle (Rot)
fillRect (Rot)
fillStyle (Gelb)
save
fillRect (Gelb)
restore
fillStyle (Grün)
save
fillStyle (Rot)
fillRect (Rot)
fillStyle (Gelb)
fillRect (Gelb)
restore
fillStyle (Grün)
fillRect (Grün)
context.canvas.height = context.canvas.height;
60. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 60
Canvas - Transformationen
context.translate(x, y);
context.rotate(angle); // als Radiant (Winkel*PI)/180
context.scale(x, y);
context.transform(m11, m12, m21, m22, dx, dy);
TranslationDrehung
Skalierung
61. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 61
Und WebGL?
62. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 62
I Hardwarebeschleunigt
I OpenGL ES 2.0
I Vertex- und Pixel-Shader
I Texturen
I BufferObjects
I Workshop nächstes Jahr
Canvas – WebGL in einer Folie
63. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 63
FRAGEN ?
64. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 64
Hands-On
65. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 65
HTML5 Geolocation – Hands-On
I Smiley
• Gelbes Gesicht
• Rote Nase
• Schwarze Augen
• Grüner Mund (Halbkreis reicht)
67. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 67
Geolocation
68. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 68
I IP Adresse
I GPS
I Wi-Fi
I Handy
I Benutzerdefiniert
Geolocation - Sources
69. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 69
PRIVACY
70. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 70
Geolocation
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback,
options
);
var id = navigator.geolocation.watchPosition(
successCallback,
errorCallback,
options
);
navigator.geolocation.clearWatch(id);
if (navigator.geolocation) {
}
71. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 71
Geolocation - SuccessHandler
function successHandler(position) {
}
position.coords.latitude Breitengrad
position.coords.longitude Längengrad
position.coords.accuracy Genauigkeit in Metern
position.timestamp Zeitstempel der Koordinaten
position.coords.altitude Höhe in Metern (*)
position.coords.altitudeAccuracy Genauigkeit in Metern (*)
position.coords.heading Richtung relativ zum Geografischen
Nordpol (*)
position.coords.speed Geschwindigkeit in m/s (*)
72. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 72
Geolocation - ErrorHandler
function errorHandler(error) {
switch(error.code) { … }
}
UNKNOWN_ERROR 0 Ein anderer Fehler
PERMISSION_DENIED 1 Erlaubnis vom User verweigert
POSITION_UNAVAILABLE 2 Position konnte nicht bestimmt werden
TIMEOUT 3 Zeitlimit überschritten
73. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 73
Geolocation - Options
enableHighAccuracy Sofern unterstützt wird eine besserer
Positions- erkennungstechnik verwendet
(true / false, Standard: false)
timeout Wie lange darf die Berechnung der
Position in Millisekunden dauern
(Standard: Infinity)
maximumAge Wie alt darf die Position maximal sein in
Millisekunden (Standard: 0)
var options = {
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 1000000
};
74. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 74
FRAGEN ?
75. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 75
Hands-On
76. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 76
HTML5 Geolocation – Hands-On
I One-Shot Position Request
I Weiterleiten auf
http://maps.google.de/maps?f=q&source=s_q&hl=de&geocode=
&q=[latitude],[longitude]&ie=UTF8&z=9