SlideShare ist ein Scribd-Unternehmen logo
Danke für die Einladung. NZZ.HTML5 Update. Namics. Jürg Stuker. CEO. Partner. Thomas Junghans. Frontend Engineer. 25. August 2011
Google stellt Google Apps auf HTML5 um... 25. August 2011 2 HTML5 Update. Internet Briefing Recycled.
Google stellt Google Apps auf HTML5 um As of August 1st, we will discontinue support for the following browsers and their predecessors: Firefox 3.5, Internet Explorer 7, and Safari 3. http://googledocs.blogspot.com/2011/06/our-plans-to-support-modern-browsers.html Grenzenzwischen App und Native schwindenbei Google (insb. auf mobile Devices; “Denkhaltung” aberauchteilweise von Apple “erwirkt”) Bsp. http://plus.google.com auf Mobile/Tablet Bsp. http://gmail.com auf Mobile/Tablet 25. August 2011 3 HTML5 Update. Internet Briefing Recycled.
http://plus.google.com (auf iPad, Update Geste) 25. August 2011 4 HTML5 Update. Internet Briefing Recycled.
http://read.amazon.com 25. August 2011 5 HTML5 Update. Internet Briefing Recycled.
HTML5 Update. Internet Briefing Recycled.  25. August 2011 7
25. August 2011 8
Bei Internet-Technologieheisst das eher... The ones that win are the ones that ship. 25. August 2011 9 HTML5 Update. Internet Briefing Recycled.
Der Firefox kannesschon! 25. August 2011 10 HTML5 Update. Internet Briefing Recycled.  http://www.findmebyip.com/litmus
WievieleVersionen von Firefox sehenSie? Firefox (4.0.1)	14.46% Firefox (3.6.17)	4.87% Firefox (3.6.13)	1.02% Firefox (4)		0.60% Firefox (3.5.19)	0.56% Firefox (3.6.16)	0.47% Firefox (3.6.3)	0.39% Firefox (3.6.8)	0.29% Firefox (3.6)	0.28% Firefox (3.6.10)	0.27% Firefox (3.6.15)	0.26% Firefox (3.0.19)	0.23% 25. August 2011 11 HTML5 Update. Internet Briefing Recycled.  Firefox (3.6.12)	0.21% Firefox (3.6.6)	0.16% Firefox (5)		0.12% Firefox (3.6.2)	0.09% Firefox (3.5.3)	0.08% Firefox (3.5.5)	0.08% Firefox (3.5.7)	0.07% Firefox (3.5.16)	0.06% Firefox (Andere)	4.11% ca. 10’000 Besuche/Tag Quelle: Schweizer Website, 1,6 Mio. Besuche, AnfangJuni 2011
Und was kann “der Firefox” genau Am Beispiel der Canvas Test Suite (nur 2D) 25. August 2011 12 HTML5 Update. Internet Briefing Recycled.  http://philip.html5.org/tests/canvas/suite/tests/results.html
Häufigkeit von Doctypes (CH Domänen, Juni 2011) 25. August 2011 13 HTML5 Update. Internet Briefing Recycled.  Quelle: search.ch Big Crawl, 500’000 Schweizer Website, AnfangJuni 2011
Weshalb 2,6% HTML5? Rückwärtskompatibel! ausser... aktueller Code istnichtvalide ausser... aktueller Code istnichtstandardkonform (“gegen” Browser entwickelt) für die Mutigenunteruns (“keinGewinn”) ALT:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  NEU: <!DOCTYPE html> neueFunktionalitätensindauchohne HTML5 möglichz.B. http://timetable.search.ch/, http://read.amazon.com 25. August 2011 14 HTML5 Update. Internet Briefing Recycled.
Oder einbisschenüberlegter: Was nun? 25. August 2011 15 HTML5 Update. Internet Briefing Recycled.
Und hiernocheine“Firmenherausforderung”... HTML[5] isteinlebender Standard... 25. August 2011 16 HTML5 Update. Internet Briefing Recycled.
HTML5 - Walkthrough HTML5 Update. Internet Briefing Recycled.  25. August 2011 17
Mein Fokusfürheute Geolocation Video Support Web Storage Web Sockets Push State Web Forms Drag and Drop Semantik Canvas 25. August 2011 18 HTML5 Update. Internet Briefing Recycled.
Geolocation Jetzt und heutenutzen– Mobilanwendungen! Code: http://html5demos.com/geo 25. August 2011 19 HTML5 Update. Internet Briefing Recycled.
Video Support (1 von 2) Jetzt und heutenutzen! 25. August 2011 20 HTML5 Update. Internet Briefing Recycled.
Video Support(2 von 2) Leidernur die Hälfte der Wahrheit: Der Browser muss Audio/Video-Dekompressionkennen (zus. zu Format) Lösung 1 spezialisierteDienstleisterwie http://vimeo.com/, http://youtube.com/ oder http://xtendx.com/ nutzen Lösung 2 (dreiVersionenund Flash-Fallback) WebM (VP8 + Vorbis Audio) MP4 Container (H.264 baseline Video + AAC “low complexity” Audio) OGG Container (TheoraVideo + Vorbis Audio) Code: http://diveintohtml5.org/video.html 25. August 2011 21 HTML5 Update. Internet Briefing Recycled.
Web Storage (1 von 2) Riesige Chance und GrundlagefürWebanwendungen ....aberneuesParadigmamittechnischenHürden 25. August 2011 22 HTML5 Update. Internet Briefing Recycled.
Web Storage (2 von 2) Webentwickler “macht” Client/Server-Anwendung Datensicherheit/-schutz Online/Offline-Detektion und deren Usability mehrereDatenmodelle (browserabhängig) Key/Value-Paare (Default meist 5 MB) Web SQL-Database: http://dev.w3.org/html5/webdatabase/ ... Code: http://www.html5rocks.com/tutorials/offline/whats-offline/ http://diveintohtml5.org/storage.html 25. August 2011 23 HTML5 Update. Internet Briefing Recycled.
Web Sockets (JavaScript API) LösteinriesigeHerausforderung der Webentwicklung: BidirektionaleKommunikationzwischenClient/Server eigentlich “nur” eine JavaScript API http://dev.w3.org/html5/websockets/ Webentwickler “macht” Client/Server-Anwendung Sicherheitsbedenkenmachender API grad das Lebenschwer: In Opera und Firefox per Default deaktiviert http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html Code: http://html5demos.com/web-socket, http://websocket.org/ 25. August 2011 24 HTML5 Update. Internet Briefing Recycled.
PushState (JavaScript API) Einsetzen korrekterEinsatz gut überlegen, funktionierende Degradation Lösungfür das (mitFragement Identifier bekämpfte) Status-Problem von Websites die XHR nutzen Lösungfür “Suchmaschinenproblem” code.google.com/web/ajaxcrawling/docs/getting-started.html Einegute Website lässtsich in jedemZustandbookmarken unterstützt den Back Button (des Browsers) Code: http://diveintohtml5.org/history.html, inkl. Fallback: https://github.com/balupton/History.js/ 25. August 2011 25 HTML5 Update. Internet Briefing Recycled.
Web Forms (1 von 2) Jetzt und heutenutzen! Code: http://diveintohtml5.org/forms.html 25. August 2011 26 HTML5 Update. Internet Briefing Recycled.  Quelle: http://slides.html5rocks.com/#form-types-mobile
Web Forms (2 von 2) ...nochbesser auf Mobilgeräten 25. August 2011 27 HTML5 Update. Internet Briefing Recycled.  Quelle: http://slides.html5rocks.com/#form-types-mobile
Drag and Drop (JavaScript API) Jetzt und heutenutzen! TechnischgibtesschönereAnsätze: http://twitter.com/#!/Hixie/status/4075253361 Code: http://html5doctor.com/native-drag-and-drop/ 25. August 2011 28 HTML5 Update. Internet Briefing Recycled.
Semantik (1 von 3) Richtig und die Zukunft des Webs! ZweiDimensionen strukturierende Tags Mikroformate Aberwernutzt den “zusätzlichenZucker”? keineinziger Browser Suchmaschinenresp. Google für “Rich Snippets” (ohneVersprechen und in einzelnenFällen) http://www.google.com/webmasters/tools/richsnippets 25. August 2011 29 HTML5 Update. Internet Briefing Recycled.
Semantik– Tags (2 von 3) Code: http://diveintohtml5.org/semantics.html#new-elements 25. August 2011 30 HTML5 Update. Internet Briefing Recycled.
Semantik– Mikroformate (3 von 3) http://microformats.org/ Today [June 2, 2011] we’re announcing schema.org, a new initiative from Google, Bing and Yahoo!  http://googlewebmastercentral.blogspot.com/2011/06/introducing-schemaorg-search-engines.html zurZeitalsGrundlagefür Rich Snippets für: People, Reviews, Products, Events und Recipes Code: http://schema.org/ und http://diveintohtml5.org/extensibility.html 25. August 2011 31 HTML5 Update. Internet Briefing Recycled.
Canvas Sehrvielversprechendabernochblutig Code: http://diveintohtml5.org/canvas.html 25. August 2011 32 HTML5 Update. Internet Briefing Recycled.
Abschluss 25. August 2011 33 HTML5 Update. Internet Briefing Recycled.
Features und Ihre Marktreife Die Matrix einsetzbar Geolocation Video(Audio) Forms Drag‘n‘Drop PushState html5 Web Storage Marktreife Canvas Web Sockets Semantik *) *) Google Rich Snippets: Go! experimentell Innovation gering hoch Wichtigkeit HTML5 Update. Internet Briefing Recycled.  25. August 2011 34
KurzeAntwort FürmoderneMobilgerätenur HTML5! 25. August 2011 35 HTML5 Update. Internet Briefing Recycled.
KurzeAntwort (in lang) “Mobile First” entwickeln! 25. August 2011 36 HTML5 Update. Internet Briefing Recycled.
Browserkompatibilität(Juni 2011, 1.6 Mio Besuche, Schweizer Website) 25. August 2011 37 HTML5 Update. Internet Briefing Recycled.
Browserkompatibilität: Die Entwicklungistwichtig 25. August 2011 38 HTML5 Update. Internet Briefing Recycled.  Quelle: search.ch
Zusammenfassung Auchwennesniemandhören will: Unser Kundeist (auch) die technischeAusrüstungunsererUsers in der Schweizzunehmendkonfortabel, aberbeispielsweise IE6 in China >30% Desktop essprichtnichtsgegen HTML5...... aberauch (noch) nichtsehrvieldafür neueFunktionengezielteinsetzen (und einegute Degradation anbieten) Mobile HTML5 rulez! HTML5 Update. Internet Briefing Recycled.  25. August 2011 39
WeiterführendeInformationen (1/2) Specs http://www.whatwg.org/ und http://blog.whatwg.org/ http://www.whatwg.org/specs/web-apps/current-work/multipage/ http://www.w3.org/TR/html5/ Tutorials http://diveintohtml5.org/ http://apirocks.com/html5/ http://www.w3schools.com/html5/ 25. August 2011 40 HTML5 Update. Internet Briefing Recycled.
WeiterführendeInformationen (2/2) Kompatibilität http://caniuse.com/ http://www.findmebyip.com/litmus http://html5test.com/ Demos http://www.html5rocks.com/ http://html5demos.com/ Tools http://www.modernizr.com/ http://html5boilerplate.com/ http://software.hixie.ch/utilities/js/live-dom-viewer/ 25. August 2011 41 HTML5 Update. Internet Briefing Recycled.
Danke für Eure Aufmerksamkeit! juerg.stuker@namics.com thomas.junghans@namics.com HTML5 Update. Internet Briefing Recycled.  25. August 2011 42

Weitere ähnliche Inhalte

Andere mochten auch

Keynote technicals currency intraday levels for 010213
Keynote technicals currency intraday levels for 010213Keynote technicals currency intraday levels for 010213
Keynote technicals currency intraday levels for 010213
Keynote Capitals Ltd.
 
Bitcoin Lore for Delivery
Bitcoin Lore for DeliveryBitcoin Lore for Delivery
Bitcoin Lore for Delivery
Judd Bagley
 
Rancangan formula-suppositoria-aminofilin
Rancangan formula-suppositoria-aminofilinRancangan formula-suppositoria-aminofilin
Rancangan formula-suppositoria-aminofilin
aufia w
 
طراحی وب سایت و تجارت الکترونیک
طراحی وب سایت و تجارت الکترونیکطراحی وب سایت و تجارت الکترونیک
طراحی وب سایت و تجارت الکترونیک
Sajad Salehipour
 
Steve Jobs' 25 Most Inspiring Quotes
Steve Jobs' 25 Most Inspiring QuotesSteve Jobs' 25 Most Inspiring Quotes
Steve Jobs' 25 Most Inspiring Quotes
Kiran Menon Vappala
 
Daniel - 3.ders
Daniel - 3.dersDaniel - 3.ders
Daniel - 3.dersoddl
 
Infographic: The House Republican Budget
Infographic: The House Republican BudgetInfographic: The House Republican Budget
Infographic: The House Republican Budget
Obama White House
 
A Taste of Costa Rica Pg# 8577-INTL CA
A Taste of Costa Rica Pg# 8577-INTL CAA Taste of Costa Rica Pg# 8577-INTL CA
A Taste of Costa Rica Pg# 8577-INTL CA
Jenkins Macedo
 

Andere mochten auch (8)

Keynote technicals currency intraday levels for 010213
Keynote technicals currency intraday levels for 010213Keynote technicals currency intraday levels for 010213
Keynote technicals currency intraday levels for 010213
 
Bitcoin Lore for Delivery
Bitcoin Lore for DeliveryBitcoin Lore for Delivery
Bitcoin Lore for Delivery
 
Rancangan formula-suppositoria-aminofilin
Rancangan formula-suppositoria-aminofilinRancangan formula-suppositoria-aminofilin
Rancangan formula-suppositoria-aminofilin
 
طراحی وب سایت و تجارت الکترونیک
طراحی وب سایت و تجارت الکترونیکطراحی وب سایت و تجارت الکترونیک
طراحی وب سایت و تجارت الکترونیک
 
Steve Jobs' 25 Most Inspiring Quotes
Steve Jobs' 25 Most Inspiring QuotesSteve Jobs' 25 Most Inspiring Quotes
Steve Jobs' 25 Most Inspiring Quotes
 
Daniel - 3.ders
Daniel - 3.dersDaniel - 3.ders
Daniel - 3.ders
 
Infographic: The House Republican Budget
Infographic: The House Republican BudgetInfographic: The House Republican Budget
Infographic: The House Republican Budget
 
A Taste of Costa Rica Pg# 8577-INTL CA
A Taste of Costa Rica Pg# 8577-INTL CAA Taste of Costa Rica Pg# 8577-INTL CA
A Taste of Costa Rica Pg# 8577-INTL CA
 

Ähnlich wie HTML5 Update [Vortrag bei der NZZ]

HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
Namics – A Merkle Company
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIAThomas Christinck
 
Html5 versus Adobe Flash
Html5 versus Adobe FlashHtml5 versus Adobe Flash
Html5 versus Adobe Flash
Monika Steinberg
 
User Interface Trends für Geschäftsanwendungen
User Interface Trends für GeschäftsanwendungenUser Interface Trends für Geschäftsanwendungen
User Interface Trends für Geschäftsanwendungen
Stefan von Niederhäusern
 
Voice Assistants: Neuigkeiten von Alexa und Google Home
Voice Assistants: Neuigkeiten von Alexa und Google HomeVoice Assistants: Neuigkeiten von Alexa und Google Home
Voice Assistants: Neuigkeiten von Alexa und Google Home
inovex GmbH
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
Stefan Kolb
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008
Jürg Stuker
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
Christian Heindel
 
Bibliotheken im Spannungsfeld zwischen Nutzungsmessung und Datenschutz
Bibliotheken im Spannungsfeld zwischen Nutzungsmessung und DatenschutzBibliotheken im Spannungsfeld zwischen Nutzungsmessung und Datenschutz
Bibliotheken im Spannungsfeld zwischen Nutzungsmessung und Datenschutz
Jan Lüth
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
 
ICS UserGroup - 2015 - Eclipse and Notes - Love/Hate Relationships
ICS UserGroup - 2015 - Eclipse and Notes - Love/Hate RelationshipsICS UserGroup - 2015 - Eclipse and Notes - Love/Hate Relationships
ICS UserGroup - 2015 - Eclipse and Notes - Love/Hate RelationshipsChristoph Adler
 
Lahme Websites - ein Konzepterproblem. ux congress 2015
Lahme Websites - ein Konzepterproblem. ux congress 2015Lahme Websites - ein Konzepterproblem. ux congress 2015
Lahme Websites - ein Konzepterproblem. ux congress 2015
Jens Jacobsen
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkFabian Lange
 
Android top10 florian_mueller
Android top10 florian_muellerAndroid top10 florian_mueller
Android top10 florian_mueller
Software Brauerei AG
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
 
tekom regional: Technische Dokumentation auf mobilen Endgeräten
tekom regional: Technische Dokumentation auf mobilen Endgerätentekom regional: Technische Dokumentation auf mobilen Endgeräten
tekom regional: Technische Dokumentation auf mobilen Endgeräten
Georg Eck
 
Silverlight 2.0
Silverlight 2.0Silverlight 2.0
Silverlight 2.0guestd7e9d
 
Titanium Vs Phonegap
Titanium Vs PhonegapTitanium Vs Phonegap
Titanium Vs Phonegap
Sebastian Deutsch
 

Ähnlich wie HTML5 Update [Vortrag bei der NZZ] (20)

HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIA
 
Top 10 Internet-Trends
Top 10 Internet-TrendsTop 10 Internet-Trends
Top 10 Internet-Trends
 
Html5 versus Adobe Flash
Html5 versus Adobe FlashHtml5 versus Adobe Flash
Html5 versus Adobe Flash
 
Bibliotheken im Spannungsfeld zwischen Nutzungsmessung und Datenschutz
Bibliotheken im Spannungsfeld zwischen Nutzungsmessung und DatenschutzBibliotheken im Spannungsfeld zwischen Nutzungsmessung und Datenschutz
Bibliotheken im Spannungsfeld zwischen Nutzungsmessung und Datenschutz
 
User Interface Trends für Geschäftsanwendungen
User Interface Trends für GeschäftsanwendungenUser Interface Trends für Geschäftsanwendungen
User Interface Trends für Geschäftsanwendungen
 
Voice Assistants: Neuigkeiten von Alexa und Google Home
Voice Assistants: Neuigkeiten von Alexa und Google HomeVoice Assistants: Neuigkeiten von Alexa und Google Home
Voice Assistants: Neuigkeiten von Alexa und Google Home
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
 
Bibliotheken im Spannungsfeld zwischen Nutzungsmessung und Datenschutz
Bibliotheken im Spannungsfeld zwischen Nutzungsmessung und DatenschutzBibliotheken im Spannungsfeld zwischen Nutzungsmessung und Datenschutz
Bibliotheken im Spannungsfeld zwischen Nutzungsmessung und Datenschutz
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
ICS UserGroup - 2015 - Eclipse and Notes - Love/Hate Relationships
ICS UserGroup - 2015 - Eclipse and Notes - Love/Hate RelationshipsICS UserGroup - 2015 - Eclipse and Notes - Love/Hate Relationships
ICS UserGroup - 2015 - Eclipse and Notes - Love/Hate Relationships
 
Lahme Websites - ein Konzepterproblem. ux congress 2015
Lahme Websites - ein Konzepterproblem. ux congress 2015Lahme Websites - ein Konzepterproblem. ux congress 2015
Lahme Websites - ein Konzepterproblem. ux congress 2015
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 Talk
 
Android top10 florian_mueller
Android top10 florian_muellerAndroid top10 florian_mueller
Android top10 florian_mueller
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
tekom regional: Technische Dokumentation auf mobilen Endgeräten
tekom regional: Technische Dokumentation auf mobilen Endgerätentekom regional: Technische Dokumentation auf mobilen Endgeräten
tekom regional: Technische Dokumentation auf mobilen Endgeräten
 
Silverlight 2.0
Silverlight 2.0Silverlight 2.0
Silverlight 2.0
 
Titanium Vs Phonegap
Titanium Vs PhonegapTitanium Vs Phonegap
Titanium Vs Phonegap
 

Mehr von Namics – A Merkle Company

Namics Masterclass @ DMEXCO 2020
Namics Masterclass @ DMEXCO 2020Namics Masterclass @ DMEXCO 2020
Namics Masterclass @ DMEXCO 2020
Namics – A Merkle Company
 
Webinar "Experience Commerce – Erfolgsfaktoren für die Konzeption von Online-...
Webinar "Experience Commerce – Erfolgsfaktoren für die Konzeption von Online-...Webinar "Experience Commerce – Erfolgsfaktoren für die Konzeption von Online-...
Webinar "Experience Commerce – Erfolgsfaktoren für die Konzeption von Online-...
Namics – A Merkle Company
 
BVDW Challenge 2019: Concept of the award winners Katharina Konow and Büsra S...
BVDW Challenge 2019: Concept of the award winners Katharina Konow and Büsra S...BVDW Challenge 2019: Concept of the award winners Katharina Konow and Büsra S...
BVDW Challenge 2019: Concept of the award winners Katharina Konow and Büsra S...
Namics – A Merkle Company
 
Namics Webinarserie Digital Product & Service Design Teil 1: In 5 Schritte z...
 Namics Webinarserie Digital Product & Service Design Teil 1: In 5 Schritte z... Namics Webinarserie Digital Product & Service Design Teil 1: In 5 Schritte z...
Namics Webinarserie Digital Product & Service Design Teil 1: In 5 Schritte z...
Namics – A Merkle Company
 
People-based Marketing: How Data, Automatisation & Customer Centricity usher ...
People-based Marketing: How Data, Automatisation & Customer Centricity usher ...People-based Marketing: How Data, Automatisation & Customer Centricity usher ...
People-based Marketing: How Data, Automatisation & Customer Centricity usher ...
Namics – A Merkle Company
 
Webinar Lead Nurturing von Namics und Adobe am 21.06.2018
Webinar Lead Nurturing von Namics und Adobe am 21.06.2018Webinar Lead Nurturing von Namics und Adobe am 21.06.2018
Webinar Lead Nurturing von Namics und Adobe am 21.06.2018
Namics – A Merkle Company
 
SEO Webinar von Namics und Searchmetrics am 30.01.2018
SEO Webinar von Namics und Searchmetrics am 30.01.2018SEO Webinar von Namics und Searchmetrics am 30.01.2018
SEO Webinar von Namics und Searchmetrics am 30.01.2018
Namics – A Merkle Company
 
Webinar "DSGVO – Der Countdown läuft " Namics und Stibo Systems
Webinar "DSGVO – Der Countdown läuft " Namics und Stibo SystemsWebinar "DSGVO – Der Countdown läuft " Namics und Stibo Systems
Webinar "DSGVO – Der Countdown läuft " Namics und Stibo Systems
Namics – A Merkle Company
 
Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...
Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...
Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...
Namics – A Merkle Company
 
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
Namics – A Merkle Company
 
Namics Walk-in Lab Smart Services 05.10.2016
Namics Walk-in Lab Smart Services 05.10.2016Namics Walk-in Lab Smart Services 05.10.2016
Namics Walk-in Lab Smart Services 05.10.2016
Namics – A Merkle Company
 
IoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens Reufsteck
IoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens ReufsteckIoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens Reufsteck
IoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens Reufsteck
Namics – A Merkle Company
 
Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...
Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...
Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...
Namics – A Merkle Company
 
Customer Engagement with Sitecore: From Experience to Conversion
Customer Engagement with Sitecore: From Experience to ConversionCustomer Engagement with Sitecore: From Experience to Conversion
Customer Engagement with Sitecore: From Experience to Conversion
Namics – A Merkle Company
 
Customer Experience: Best Practices aus aktuellen Projekten.
Customer Experience: Best Practices aus aktuellen Projekten.Customer Experience: Best Practices aus aktuellen Projekten.
Customer Experience: Best Practices aus aktuellen Projekten.
Namics – A Merkle Company
 
Digital analytics namics marco hassler_20140822
Digital analytics namics marco hassler_20140822Digital analytics namics marco hassler_20140822
Digital analytics namics marco hassler_20140822
Namics – A Merkle Company
 
CONNECT Web Experience - Basel. Treffen der AEM Developer Community.
CONNECT Web Experience - Basel. Treffen der AEM Developer Community.CONNECT Web Experience - Basel. Treffen der AEM Developer Community.
CONNECT Web Experience - Basel. Treffen der AEM Developer Community.
Namics – A Merkle Company
 
Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...
Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...
Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...
Namics – A Merkle Company
 
Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...
Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...
Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...Namics – A Merkle Company
 
Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...
Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...
Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...Namics – A Merkle Company
 

Mehr von Namics – A Merkle Company (20)

Namics Masterclass @ DMEXCO 2020
Namics Masterclass @ DMEXCO 2020Namics Masterclass @ DMEXCO 2020
Namics Masterclass @ DMEXCO 2020
 
Webinar "Experience Commerce – Erfolgsfaktoren für die Konzeption von Online-...
Webinar "Experience Commerce – Erfolgsfaktoren für die Konzeption von Online-...Webinar "Experience Commerce – Erfolgsfaktoren für die Konzeption von Online-...
Webinar "Experience Commerce – Erfolgsfaktoren für die Konzeption von Online-...
 
BVDW Challenge 2019: Concept of the award winners Katharina Konow and Büsra S...
BVDW Challenge 2019: Concept of the award winners Katharina Konow and Büsra S...BVDW Challenge 2019: Concept of the award winners Katharina Konow and Büsra S...
BVDW Challenge 2019: Concept of the award winners Katharina Konow and Büsra S...
 
Namics Webinarserie Digital Product & Service Design Teil 1: In 5 Schritte z...
 Namics Webinarserie Digital Product & Service Design Teil 1: In 5 Schritte z... Namics Webinarserie Digital Product & Service Design Teil 1: In 5 Schritte z...
Namics Webinarserie Digital Product & Service Design Teil 1: In 5 Schritte z...
 
People-based Marketing: How Data, Automatisation & Customer Centricity usher ...
People-based Marketing: How Data, Automatisation & Customer Centricity usher ...People-based Marketing: How Data, Automatisation & Customer Centricity usher ...
People-based Marketing: How Data, Automatisation & Customer Centricity usher ...
 
Webinar Lead Nurturing von Namics und Adobe am 21.06.2018
Webinar Lead Nurturing von Namics und Adobe am 21.06.2018Webinar Lead Nurturing von Namics und Adobe am 21.06.2018
Webinar Lead Nurturing von Namics und Adobe am 21.06.2018
 
SEO Webinar von Namics und Searchmetrics am 30.01.2018
SEO Webinar von Namics und Searchmetrics am 30.01.2018SEO Webinar von Namics und Searchmetrics am 30.01.2018
SEO Webinar von Namics und Searchmetrics am 30.01.2018
 
Webinar "DSGVO – Der Countdown läuft " Namics und Stibo Systems
Webinar "DSGVO – Der Countdown läuft " Namics und Stibo SystemsWebinar "DSGVO – Der Countdown läuft " Namics und Stibo Systems
Webinar "DSGVO – Der Countdown läuft " Namics und Stibo Systems
 
Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...
Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...
Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...
 
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
 
Namics Walk-in Lab Smart Services 05.10.2016
Namics Walk-in Lab Smart Services 05.10.2016Namics Walk-in Lab Smart Services 05.10.2016
Namics Walk-in Lab Smart Services 05.10.2016
 
IoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens Reufsteck
IoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens ReufsteckIoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens Reufsteck
IoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens Reufsteck
 
Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...
Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...
Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...
 
Customer Engagement with Sitecore: From Experience to Conversion
Customer Engagement with Sitecore: From Experience to ConversionCustomer Engagement with Sitecore: From Experience to Conversion
Customer Engagement with Sitecore: From Experience to Conversion
 
Customer Experience: Best Practices aus aktuellen Projekten.
Customer Experience: Best Practices aus aktuellen Projekten.Customer Experience: Best Practices aus aktuellen Projekten.
Customer Experience: Best Practices aus aktuellen Projekten.
 
Digital analytics namics marco hassler_20140822
Digital analytics namics marco hassler_20140822Digital analytics namics marco hassler_20140822
Digital analytics namics marco hassler_20140822
 
CONNECT Web Experience - Basel. Treffen der AEM Developer Community.
CONNECT Web Experience - Basel. Treffen der AEM Developer Community.CONNECT Web Experience - Basel. Treffen der AEM Developer Community.
CONNECT Web Experience - Basel. Treffen der AEM Developer Community.
 
Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...
Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...
Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...
 
Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...
Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...
Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...
 
Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...
Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...
Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...
 

HTML5 Update [Vortrag bei der NZZ]

  • 1. Danke für die Einladung. NZZ.HTML5 Update. Namics. Jürg Stuker. CEO. Partner. Thomas Junghans. Frontend Engineer. 25. August 2011
  • 2. Google stellt Google Apps auf HTML5 um... 25. August 2011 2 HTML5 Update. Internet Briefing Recycled.
  • 3. Google stellt Google Apps auf HTML5 um As of August 1st, we will discontinue support for the following browsers and their predecessors: Firefox 3.5, Internet Explorer 7, and Safari 3. http://googledocs.blogspot.com/2011/06/our-plans-to-support-modern-browsers.html Grenzenzwischen App und Native schwindenbei Google (insb. auf mobile Devices; “Denkhaltung” aberauchteilweise von Apple “erwirkt”) Bsp. http://plus.google.com auf Mobile/Tablet Bsp. http://gmail.com auf Mobile/Tablet 25. August 2011 3 HTML5 Update. Internet Briefing Recycled.
  • 4. http://plus.google.com (auf iPad, Update Geste) 25. August 2011 4 HTML5 Update. Internet Briefing Recycled.
  • 5. http://read.amazon.com 25. August 2011 5 HTML5 Update. Internet Briefing Recycled.
  • 6.
  • 7. HTML5 Update. Internet Briefing Recycled. 25. August 2011 7
  • 9. Bei Internet-Technologieheisst das eher... The ones that win are the ones that ship. 25. August 2011 9 HTML5 Update. Internet Briefing Recycled.
  • 10. Der Firefox kannesschon! 25. August 2011 10 HTML5 Update. Internet Briefing Recycled. http://www.findmebyip.com/litmus
  • 11. WievieleVersionen von Firefox sehenSie? Firefox (4.0.1) 14.46% Firefox (3.6.17) 4.87% Firefox (3.6.13) 1.02% Firefox (4) 0.60% Firefox (3.5.19) 0.56% Firefox (3.6.16) 0.47% Firefox (3.6.3) 0.39% Firefox (3.6.8) 0.29% Firefox (3.6) 0.28% Firefox (3.6.10) 0.27% Firefox (3.6.15) 0.26% Firefox (3.0.19) 0.23% 25. August 2011 11 HTML5 Update. Internet Briefing Recycled. Firefox (3.6.12) 0.21% Firefox (3.6.6) 0.16% Firefox (5) 0.12% Firefox (3.6.2) 0.09% Firefox (3.5.3) 0.08% Firefox (3.5.5) 0.08% Firefox (3.5.7) 0.07% Firefox (3.5.16) 0.06% Firefox (Andere) 4.11% ca. 10’000 Besuche/Tag Quelle: Schweizer Website, 1,6 Mio. Besuche, AnfangJuni 2011
  • 12. Und was kann “der Firefox” genau Am Beispiel der Canvas Test Suite (nur 2D) 25. August 2011 12 HTML5 Update. Internet Briefing Recycled. http://philip.html5.org/tests/canvas/suite/tests/results.html
  • 13. Häufigkeit von Doctypes (CH Domänen, Juni 2011) 25. August 2011 13 HTML5 Update. Internet Briefing Recycled. Quelle: search.ch Big Crawl, 500’000 Schweizer Website, AnfangJuni 2011
  • 14. Weshalb 2,6% HTML5? Rückwärtskompatibel! ausser... aktueller Code istnichtvalide ausser... aktueller Code istnichtstandardkonform (“gegen” Browser entwickelt) für die Mutigenunteruns (“keinGewinn”) ALT: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> NEU: <!DOCTYPE html> neueFunktionalitätensindauchohne HTML5 möglichz.B. http://timetable.search.ch/, http://read.amazon.com 25. August 2011 14 HTML5 Update. Internet Briefing Recycled.
  • 15. Oder einbisschenüberlegter: Was nun? 25. August 2011 15 HTML5 Update. Internet Briefing Recycled.
  • 16. Und hiernocheine“Firmenherausforderung”... HTML[5] isteinlebender Standard... 25. August 2011 16 HTML5 Update. Internet Briefing Recycled.
  • 17. HTML5 - Walkthrough HTML5 Update. Internet Briefing Recycled. 25. August 2011 17
  • 18. Mein Fokusfürheute Geolocation Video Support Web Storage Web Sockets Push State Web Forms Drag and Drop Semantik Canvas 25. August 2011 18 HTML5 Update. Internet Briefing Recycled.
  • 19. Geolocation Jetzt und heutenutzen– Mobilanwendungen! Code: http://html5demos.com/geo 25. August 2011 19 HTML5 Update. Internet Briefing Recycled.
  • 20. Video Support (1 von 2) Jetzt und heutenutzen! 25. August 2011 20 HTML5 Update. Internet Briefing Recycled.
  • 21. Video Support(2 von 2) Leidernur die Hälfte der Wahrheit: Der Browser muss Audio/Video-Dekompressionkennen (zus. zu Format) Lösung 1 spezialisierteDienstleisterwie http://vimeo.com/, http://youtube.com/ oder http://xtendx.com/ nutzen Lösung 2 (dreiVersionenund Flash-Fallback) WebM (VP8 + Vorbis Audio) MP4 Container (H.264 baseline Video + AAC “low complexity” Audio) OGG Container (TheoraVideo + Vorbis Audio) Code: http://diveintohtml5.org/video.html 25. August 2011 21 HTML5 Update. Internet Briefing Recycled.
  • 22. Web Storage (1 von 2) Riesige Chance und GrundlagefürWebanwendungen ....aberneuesParadigmamittechnischenHürden 25. August 2011 22 HTML5 Update. Internet Briefing Recycled.
  • 23. Web Storage (2 von 2) Webentwickler “macht” Client/Server-Anwendung Datensicherheit/-schutz Online/Offline-Detektion und deren Usability mehrereDatenmodelle (browserabhängig) Key/Value-Paare (Default meist 5 MB) Web SQL-Database: http://dev.w3.org/html5/webdatabase/ ... Code: http://www.html5rocks.com/tutorials/offline/whats-offline/ http://diveintohtml5.org/storage.html 25. August 2011 23 HTML5 Update. Internet Briefing Recycled.
  • 24. Web Sockets (JavaScript API) LösteinriesigeHerausforderung der Webentwicklung: BidirektionaleKommunikationzwischenClient/Server eigentlich “nur” eine JavaScript API http://dev.w3.org/html5/websockets/ Webentwickler “macht” Client/Server-Anwendung Sicherheitsbedenkenmachender API grad das Lebenschwer: In Opera und Firefox per Default deaktiviert http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html Code: http://html5demos.com/web-socket, http://websocket.org/ 25. August 2011 24 HTML5 Update. Internet Briefing Recycled.
  • 25. PushState (JavaScript API) Einsetzen korrekterEinsatz gut überlegen, funktionierende Degradation Lösungfür das (mitFragement Identifier bekämpfte) Status-Problem von Websites die XHR nutzen Lösungfür “Suchmaschinenproblem” code.google.com/web/ajaxcrawling/docs/getting-started.html Einegute Website lässtsich in jedemZustandbookmarken unterstützt den Back Button (des Browsers) Code: http://diveintohtml5.org/history.html, inkl. Fallback: https://github.com/balupton/History.js/ 25. August 2011 25 HTML5 Update. Internet Briefing Recycled.
  • 26. Web Forms (1 von 2) Jetzt und heutenutzen! Code: http://diveintohtml5.org/forms.html 25. August 2011 26 HTML5 Update. Internet Briefing Recycled. Quelle: http://slides.html5rocks.com/#form-types-mobile
  • 27. Web Forms (2 von 2) ...nochbesser auf Mobilgeräten 25. August 2011 27 HTML5 Update. Internet Briefing Recycled. Quelle: http://slides.html5rocks.com/#form-types-mobile
  • 28. Drag and Drop (JavaScript API) Jetzt und heutenutzen! TechnischgibtesschönereAnsätze: http://twitter.com/#!/Hixie/status/4075253361 Code: http://html5doctor.com/native-drag-and-drop/ 25. August 2011 28 HTML5 Update. Internet Briefing Recycled.
  • 29. Semantik (1 von 3) Richtig und die Zukunft des Webs! ZweiDimensionen strukturierende Tags Mikroformate Aberwernutzt den “zusätzlichenZucker”? keineinziger Browser Suchmaschinenresp. Google für “Rich Snippets” (ohneVersprechen und in einzelnenFällen) http://www.google.com/webmasters/tools/richsnippets 25. August 2011 29 HTML5 Update. Internet Briefing Recycled.
  • 30. Semantik– Tags (2 von 3) Code: http://diveintohtml5.org/semantics.html#new-elements 25. August 2011 30 HTML5 Update. Internet Briefing Recycled.
  • 31. Semantik– Mikroformate (3 von 3) http://microformats.org/ Today [June 2, 2011] we’re announcing schema.org, a new initiative from Google, Bing and Yahoo! http://googlewebmastercentral.blogspot.com/2011/06/introducing-schemaorg-search-engines.html zurZeitalsGrundlagefür Rich Snippets für: People, Reviews, Products, Events und Recipes Code: http://schema.org/ und http://diveintohtml5.org/extensibility.html 25. August 2011 31 HTML5 Update. Internet Briefing Recycled.
  • 32. Canvas Sehrvielversprechendabernochblutig Code: http://diveintohtml5.org/canvas.html 25. August 2011 32 HTML5 Update. Internet Briefing Recycled.
  • 33. Abschluss 25. August 2011 33 HTML5 Update. Internet Briefing Recycled.
  • 34. Features und Ihre Marktreife Die Matrix einsetzbar Geolocation Video(Audio) Forms Drag‘n‘Drop PushState html5 Web Storage Marktreife Canvas Web Sockets Semantik *) *) Google Rich Snippets: Go! experimentell Innovation gering hoch Wichtigkeit HTML5 Update. Internet Briefing Recycled. 25. August 2011 34
  • 35. KurzeAntwort FürmoderneMobilgerätenur HTML5! 25. August 2011 35 HTML5 Update. Internet Briefing Recycled.
  • 36. KurzeAntwort (in lang) “Mobile First” entwickeln! 25. August 2011 36 HTML5 Update. Internet Briefing Recycled.
  • 37. Browserkompatibilität(Juni 2011, 1.6 Mio Besuche, Schweizer Website) 25. August 2011 37 HTML5 Update. Internet Briefing Recycled.
  • 38. Browserkompatibilität: Die Entwicklungistwichtig 25. August 2011 38 HTML5 Update. Internet Briefing Recycled. Quelle: search.ch
  • 39. Zusammenfassung Auchwennesniemandhören will: Unser Kundeist (auch) die technischeAusrüstungunsererUsers in der Schweizzunehmendkonfortabel, aberbeispielsweise IE6 in China >30% Desktop essprichtnichtsgegen HTML5...... aberauch (noch) nichtsehrvieldafür neueFunktionengezielteinsetzen (und einegute Degradation anbieten) Mobile HTML5 rulez! HTML5 Update. Internet Briefing Recycled. 25. August 2011 39
  • 40. WeiterführendeInformationen (1/2) Specs http://www.whatwg.org/ und http://blog.whatwg.org/ http://www.whatwg.org/specs/web-apps/current-work/multipage/ http://www.w3.org/TR/html5/ Tutorials http://diveintohtml5.org/ http://apirocks.com/html5/ http://www.w3schools.com/html5/ 25. August 2011 40 HTML5 Update. Internet Briefing Recycled.
  • 41. WeiterführendeInformationen (2/2) Kompatibilität http://caniuse.com/ http://www.findmebyip.com/litmus http://html5test.com/ Demos http://www.html5rocks.com/ http://html5demos.com/ Tools http://www.modernizr.com/ http://html5boilerplate.com/ http://software.hixie.ch/utilities/js/live-dom-viewer/ 25. August 2011 41 HTML5 Update. Internet Briefing Recycled.
  • 42. Danke für Eure Aufmerksamkeit! juerg.stuker@namics.com thomas.junghans@namics.com HTML5 Update. Internet Briefing Recycled. 25. August 2011 42

Hinweis der Redaktion

  1. DerArbeiter: HTML5DerSuperheld: CSS3http://meinfritz.de/contents/2/8/4/7/3/0/0/0/0/0/picture/122240.jpg
  2. Safari 3 inkl. iOS/Android:nur H.264+AAC+MP4FFox 3.5: nurTheora+Vorbis+OggFFox 3.5:Theora+Vorbis+Ogg und WebMIE &gt;9: Nur FlashIE 9: WebM (und H.264+AAC+MP4)
  3. Tweet von Ian Hickson (19. Sept 2009): @ppk The drag-and-drop API is horrible, but it has one thing going for it: IE6 implements it, as do Safari and Firefox.
  4. http://www.ie6countdown.com/