HTML5 revolutioniert das Plakat! Wie der neue Webstandard digitale Info- und Werbedisplays (Digital Signage) verändern wird

1. HTML5 revolutioniert das Plakat! Wie der neue Webstandard digitale Info- und Werbedisplays (Digital Signage) verändern HTML5 revolutioniert das Plakat! wird Ein Vortrag von: Ibrahim Mazari, dimedis GmbH

2. Digital Signage

3. HTML5 revolutioniert das Plakat! Was ist Digital Signage?  Einsatz digitaler Medieninhalte  Elektronische Plakate  Werbe- und Informationssysteme  Wegeleitung  Elektronische Schilder

4. HTML5 revolutioniert das Plakat! Was ist kompas?  Digital Signage Lösungen  Leistungsfähig & flexibel  Netzwerk von über 3000 Systemen  Wegeleitung  Preisgekrönte Software: viscom Digital Signage Best Practice Award (2008 und 2011) + POPAI Digital Award Gold

5. HTML

6. HTML5 revolutioniert das Plakat! HTML Historie  1989 CERN Projekt: HTML zum plattformübergreifenden Informationsaustausch  1992 Erste Version  1995 HTML 2.0 - Formulare  1997 HTML 3.2 – Tabellen, Einbindung Applets  1997 HTML 4.0 – Stylesheets  ...12 Jahre nur moderate Weiterentwicklung  2009 HTML 5 – Working Draft

7. HTML5 revolutioniert das Plakat! HTML & Multimedia  Multimediafähigkeiten nur sehr eingeschränkt  Audio & Video nur über Plugins  Mangels Standards viele Probleme mit Videoformaten  Animationen mit JavaScript möglich, aber nur mit mäßiger Performance  Der Ausweg: Flash

8. HTML5 revolutioniert das Plakat! Flash Historie  1997 Erste Version, Macromedia  1998 Flash 3.0 – Verbesserung Interaktion  1999 Flash 4.0 . ActionScript  2000 Flash 5.0 – ECMA-Script (Basis von JavaScript)  2005 Adobe übernimmt Macromedia  2008 Offenlegung Spezifikationen  2012 -Ankündigung Linux Player nur noch für Google Chrome -Verzicht Flash für Android

9. HTML5 revolutioniert das Plakat! Flash & Multimedia  Flash ist primär für die Darstellung multimedialer Animationen ausgelegt  Gute Performance  Gute Videofähigkeiten vorhanden, wenn auch auf wenige Formate beschränkt  Sehr gute Authoring-Software zur Erstellung von Flash Animationen & Anwendungen  Plugin lange Zeit für alle wichtigen Betriebssysteme verfügbar  Mit Aufkommen von HTML5 aber ein Auslaufmodell...

10. HTML5 revolutioniert das Plakat! HTML5 Historie  2004 Entwicklung unter WHATWG, einer Arbeitsgruppe von Browser-Herstellern  2007 W3C & WHATWG entwickeln gemeinsam weiter  Veröffetnlichung als ”Living Standard” ohne feste Versionsnummern

11. HTML5 – Ein Standard für viele Webtechnologien  HTML5 bildet Dach für eine ganze Reihe von Webtechnologien, u.a. -Audio & Video Einbindung -Canvas (zeichen in 2D & 3D) -SVG (vektorzeichnen in 2D) -Offline-Applikationen, Datenbank im Browser -Touch-Fähigkeit Einheitlliche Javascript Programm- Schnittstellen für alle Bereiche HTML5 revolutioniert das Plakat!

12. HTML5 revolutioniert das Plakat! Flash vs. HTML5  Flash war lange Zeit ”Quasi- Standard”  Aber proprietär und abhängig vom Hersteller Abobe  Ablösung steht an: Adobe selbst setzt mit Edge Produktfamilie voll auf HTML5  Flash schon länger nicht mehr für allen Plattformen verfügbar (z.B. Apple IOS, Android nur eingeschränkt)

13. HTML5 revolutioniert das Plakat! HTML5 vs. Flash  HTML5 ist offener Standard  Verfügbar auf allen aktuellen Endgeräten und Betriebssystemen  Viele große Hersteller stehen dahinter, u.a. - Adobe - Google - Apple - Microsoft  Standard entwickelt sich schnell  Abspiel-Performance wird durch Hardware-Beschleunigung immer besser

14. Was hat das alles mit Digital Signage zu tun? HTML5 revolutioniert das Plakat!  Flash hat als Animationsformat bislang auch Digital Signage dominiert  Weil Flash nicht mehr weiterentwickelt wird, müssen Digital Signage Systeme zukünftig HTML5 unterstützen  HTML5 wird das Internet dominieren und Kunden werden das als Standard auch für Digital Signage erwarten

15. HTML5: Ein Standard für viele Kanäle HTML5 revolutioniert das Plakat!  Digital Signage etabliert sich immer mehr als weiterer Kanal in der Kundenkommunikation  HTML5 hat mit seinem offenen Standard hier viel Potenzial für Synergieeffekte  Mit einem Digital Signage System, das HTML5 unterstützt, können einmal produzierte Inhalte dort leichter wiederverwendet werden -Webkampagnen - Smartphone Apps - TV Apps, ...

16. Beispiel: BVB Aktion Lichtblick HTML5 revolutioniert das Plakat!  Die Borussia Dortmund zeigt auf ihrem 20 m² kompas LED Board am Stadion den Spot ”Lichtblick”, passend zur gleichnahmigen Sponsor-Aktion  In technisch leicht abgewandelter Form wird dieser Spot zukünftig auch im Rahmen des Webauftritts des BVB eingesetzt

17. HTML5 revolutioniert das Plakat! HTML(5) bei kompas  kompas hat schon immer auf HTML für die Spot-Präsentationen gesetzt  Bislang geschah Spot-Template- Erstellung auf HTML-Text-Ebene  Der neue kompas 6.0 Player unterstützt jetzt den vollen HTML5 Standard  Somit können auch traditionell erstellte Spot-Templates von nun an auf diesen Funktionsumfang zugreifen

18. HTML5 revolutioniert das Plakat! kompas' HTML(5) Vorteil  kompas basiert von Beginn an auf Webtechnologie & HTML  Die Integration von HTML5 war deshalb nur ein weiterer Schritt in die vorgezeigte Richtung  Andere Digital Signage Hersteller setzten exklusiv auf Flash- Technologie oder eigene proprietäre Formate  Manche bieten hier auch grafische Editoren mit an, deren HTML5 Anpassung aber nun sehr aufwändig ist

19. kompas & Abobe Edge Animate HTML5 revolutioniert das Plakat!  Mit Adobe Edge Animate integriert kompas jetzt einen vollständig grafisch orientierten Spot- und Template-Editor  Die Erstellung von Animationen mit Edge Animate ähnelt der von Flash sehr

20. HTML5 revolutioniert das Plakat! Edge Animate  Edge Animate basiert auf Zeitleisten  Objekte werden auf einer Bühne arrangiert  Über vorgefertigte Symbole können Elemente leicht wiederverwendet werden  kompas liefert Symbole für Standardelemente mit

21. Edge Animate ist kompas' grafischer Template-Editor  Mit Edge Animate könnten nicht nur Spots grafisch erstellt werden  Einzelne Elemente können als Eingabefelder für den Benutzer freigeschaltet werden  Bilder, Texte etc. sind damit austauschbar, wie bei ”traditionellen” kompas Spot- Vorlagen  CI ist aber streng vorgegeben  Für spezielle Einstellungsoptionen können auch Checkboxen und andere Formularelemente eingebunden werden HTML5 revolutioniert das Plakat!

22. kompas' Edge Animate Schnittstelle HTML5 revolutioniert das Plakat!  Durch die kompas eigene Edge Animate Anbindung müssen Animationen in Edge nur auf ein Netzlaufwerk abgespeichert werden  kompas übernimmt die Änderung unmittelbar in seine Datenbank  Es wird automatisch eine kompas Spot Vorlage erstellt  Ebenso ein Beispiel-Spot, der sofort betrachtet & verbucht werden kann

23. Interaktivität

24. Videowall: instagram bei der GDS  Interaktion mit Bloggern und Besuchern  User konnten Fotos über einen Instagram Tag hochladen HTML5 revolutioniert das Plakat!  Twitter  Weitere Social Media Integration jederzeit über kompas möglich

25. HTML5 revolutioniert das Plakat! kompas smart.remote am POS  Smartphone als Fernbedienung  Schaufenster-Situation  QR-Code einlesen  Content wählen  Feedback per Mail  Schnittstelle zu Online Shop

26. kompas smart.remote am POS: Autohaus HTML5 revolutioniert das Plakat!  Smartphone als Fernbedienung  Schaufenster-Situation  QR-Code einlesen  Content wählen  Feedback per Mail  Schnittstelle zu Online Shop

27. kompas smart.remote am POS: Reisebüro HTML5 revolutioniert das Plakat!

32. kompas smart.remote am POS: HappyBaby QR-Code einscannen Menüauswahl Angebot erhalten HTML5 revolutioniert das Plakat!

33. HTML5 revolutioniert das Plakat! Interaktive Touch-Stele am POS  Komponenten:  Touchscreen (ein- oder doppelseitig)  QR-Code-Scanner  Drucker  Kamera  Features und Inhalte:  Besucherinformationen: News, Wetter, Fahrpläne des ÖPNV  Coupon-Aktionen mit Kundenkarten und QR-Codes  interaktive Anwendungen, z.B. iFeedback  Social Media: Twitter, Instagram  digitale Wegeleitung mit kompas Wayfinding

34. HTML5 revolutioniert das Plakat! iFeedback am POS  iFeedback auf der interaktiven  touchfähigen Stele  QR-Code oder über Mobile Device möglich  Reportings  Feedback ans Management  Einbindung in Kampagnen  Integration von Gewinnspielen

35. Mobile im Betrieb/ Administration eines DS-Netzes HTML5 revolutioniert das Plakat! mfi überwacht das DS-Netzwerk auch per Smartphone   vor Ort Screens überwachen  Informationen über Hardware /Fehlermeldungen  Starten der kompas Mini PC über Smartphone  Überwachung ”von unterwegs”

36. Mobile im Betrieb/ Administration eines DS-Netzes  kompas Proof of Play über Smartphone möglich  Steuerung der Webcam für die VideoWall bei der Messe Düsseldorf HTML5 revolutioniert das Plakat!

37. HTML5 revolutioniert das Plakat! Fazit  HTML5 wird das Internet dominieren  Kunden werden das als Standard erwarten  Digital Signage muss auf HTML5 setzen  Standardisierung wird Digital Signage Boom bescheren  Agenturen können Kampagnen plattformunabhängig besser planen und Digital Signage einfacher integrieren  Digital Signage wird interaktiver

38. HTML5 revolutioniert das Plakat! Linkhinweise  Adobes Keynote zur Rolle von HTML 5: http://bit.ly/UEjCnB  Adobe geht mit HTML 5 neue Wege: http://html.adobe.com/  Tim Berner-Lee Blogeintrag „Reinventing HTML“ http://bit.ly/rcy6E  FAQ der W3C Foundation rund um das Thema HTML 5 http://bit.ly/X2j0z2  Videos und Tutorials rund um CSS und HTML 5 http://css3-html5.de/

39. Kontakt

40. HTML5 revolutioniert das Plakat! Kontaktieren Sie mich gerne! Ibrahim Mazari Leitung PR/Kommunikation Tel: +49-221-921260-52 E-Mail: imazari@dimedis.de www.dimedis.de www.kompas-software.de