Die Anforderungen für Websites sind heute oft widersprüchlich: verlangt ist ein zeitgemäßes Design und ansprechende Animationen, aber bitte mit offenen Webstandards, damit das ganze auch auf Smartphones und Tablets gut aussieht. Gleichzeitig ist auf Kundenseite aber ein Browser im Einsatz, der seit Jahren nicht mehr aktualisiert wurde. Jonathan Weiß stellt Lösungen vor, um diese Herausforderung zu stemmen und zeigt, welches kaum bekannte Potenzial im Legacy-Browser steckt.
Am Ende ist doch alles HTML - 2012 - Webmontag EditionJens Grochtdreis
Kurzvortrag über die Bedeutung des Frontends. Ich rege zu mehr und besserer Kommunikation an und gebe Beispiele für Verbesserungen durch moderne Techniken. Zuerst gehalten auf dem Webmontag in Marburg (30.07.2012)
Am 6. November durfte ich am Frankfurter SAE-Institut den Studenten etwas über die Praxis der Webentwicklung erzählen. Ich habe einen großen Bogen gespannt, von der grundsätzlichen Natur des Internet über Detailprobleme bis zur Barrierefreiheit. Der Vortrag dauerte dreieinhalb Stunden.
Aktuelle Webtechnologien - HTML5, CSS3 und mehrYves Hoppe
Aktuelle Webtechnologien wie HTML5, CSS3 im Überblick.
Zielgruppe: Designer, HTML 4 / XHTML User und mehr.
Was kann ich heute schon nutzen? Wie kann ich HTML5 in meine Webseite einbinden?
Cross-Apps-Entwicklung für iPhone, Android und Co.GFU Cyrus AG
Kurzbeschreibung
Beschreibung: Mit der Veröffentlichung von iPhone, iPod Touch sowie iPad und dem iPhone OS hat Apple den Markt für mobile Endgeräte massenfähig gemacht. Google liefert mit dem Android-Betriebssystem ebenfalls eine stetig wachsende Plattform. Einer der Erfolgsfaktoren ist der auf beiden Systemen verfügbaren Browser "Mobile Safari" bzw. die technologische Basis WebKit. Diese freie HTML-Rendering-Bibliothek wird nicht nur von Apple und Google eingesetzt, sondern auch von anderen Unternehmen, wie Nokia, Adobe und Blackberry verwendet. Dozent: Peter Hecker, GFU Cyrus AG
Inhalt
- Einführung und Motivation
- Die WebKit-Plattform
- Überblick "mobile" Frameworks
- Zusammenfassung und Fazit
Die Inhalte meiner ersten "Session" des Praktikums über Frontendentwicklung an der Uni Mainz. Die Stundenten sollten erst einmal in die Grundproblematik eingeführt werden.
Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader
node.js erlaubt die Ausführung von Javascript auf dem Server. Zusammen mit YUI3 gibt es jetzt auch noch einen echten DOM und plötzlich macht alles Spass :-)
The speaker is from the beautiful city of Szczecin in Poland, which has great charm and mystery. On weekends, she enjoys strolling through the streets and stopping in cafes for small black coffees. During the week, she works as an accountant in a pleasant office. When it rains, she listens to the raindrops on the windowsill and reads her favorite books. Her name is Grażyna Żuchowska and she invites the listener to get to know her.
The popularity of the english languageАнжела Козак
Over 300 million people speak English worldwide. It is an official language of many international organizations like the UN and IOC. English is also a state language in many countries.
Great Britain has a population of 64 million, 97% of whom speak English as their first language. London is the capital and political/economic center. Great Britain was historically a great power.
The United States was formed from 13 British colonies along the East Coast. On July 4, 1776 they declared independence from Britain. Today the US has 50 states and Washington DC, with English spoken as a first language by 80% of residents.
Canada was originally colonized by France but later came under British rule until independence in the 20th
ENGLISH ESSAY WRTTING ( ENGLISH 1 FNBE 0715)Atiqah Ghazali
The document compares and contrasts the Lotus Temple in New Delhi, India and the Opera House in Sydney, Australia. It discusses their differences in location, architectural design, and purpose. The Lotus Temple is located in New Delhi and inspired by the lotus flower, while the Opera House is situated in Sydney Harbor and drew inspiration from sails and yachts. The Lotus Temple is a place of worship symbolizing peace, and the Opera House is a performing arts center that hosts thousands of events each year.
Marven was excited to visit his grandparents in the Great Northwoods for winter break but was dismayed when he realized there would be no internet or video games and that he would have to help his grandfather, a woodsman, with chores like chopping wood. His grandfather taught him how to snowshoe, make flapjacks, and appreciate the beauty of the vast forest landscape despite the hard work of lumberjacks.
Am Ende ist doch alles HTML - 2012 - Webmontag EditionJens Grochtdreis
Kurzvortrag über die Bedeutung des Frontends. Ich rege zu mehr und besserer Kommunikation an und gebe Beispiele für Verbesserungen durch moderne Techniken. Zuerst gehalten auf dem Webmontag in Marburg (30.07.2012)
Am 6. November durfte ich am Frankfurter SAE-Institut den Studenten etwas über die Praxis der Webentwicklung erzählen. Ich habe einen großen Bogen gespannt, von der grundsätzlichen Natur des Internet über Detailprobleme bis zur Barrierefreiheit. Der Vortrag dauerte dreieinhalb Stunden.
Aktuelle Webtechnologien - HTML5, CSS3 und mehrYves Hoppe
Aktuelle Webtechnologien wie HTML5, CSS3 im Überblick.
Zielgruppe: Designer, HTML 4 / XHTML User und mehr.
Was kann ich heute schon nutzen? Wie kann ich HTML5 in meine Webseite einbinden?
Cross-Apps-Entwicklung für iPhone, Android und Co.GFU Cyrus AG
Kurzbeschreibung
Beschreibung: Mit der Veröffentlichung von iPhone, iPod Touch sowie iPad und dem iPhone OS hat Apple den Markt für mobile Endgeräte massenfähig gemacht. Google liefert mit dem Android-Betriebssystem ebenfalls eine stetig wachsende Plattform. Einer der Erfolgsfaktoren ist der auf beiden Systemen verfügbaren Browser "Mobile Safari" bzw. die technologische Basis WebKit. Diese freie HTML-Rendering-Bibliothek wird nicht nur von Apple und Google eingesetzt, sondern auch von anderen Unternehmen, wie Nokia, Adobe und Blackberry verwendet. Dozent: Peter Hecker, GFU Cyrus AG
Inhalt
- Einführung und Motivation
- Die WebKit-Plattform
- Überblick "mobile" Frameworks
- Zusammenfassung und Fazit
Die Inhalte meiner ersten "Session" des Praktikums über Frontendentwicklung an der Uni Mainz. Die Stundenten sollten erst einmal in die Grundproblematik eingeführt werden.
Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader
node.js erlaubt die Ausführung von Javascript auf dem Server. Zusammen mit YUI3 gibt es jetzt auch noch einen echten DOM und plötzlich macht alles Spass :-)
The speaker is from the beautiful city of Szczecin in Poland, which has great charm and mystery. On weekends, she enjoys strolling through the streets and stopping in cafes for small black coffees. During the week, she works as an accountant in a pleasant office. When it rains, she listens to the raindrops on the windowsill and reads her favorite books. Her name is Grażyna Żuchowska and she invites the listener to get to know her.
The popularity of the english languageАнжела Козак
Over 300 million people speak English worldwide. It is an official language of many international organizations like the UN and IOC. English is also a state language in many countries.
Great Britain has a population of 64 million, 97% of whom speak English as their first language. London is the capital and political/economic center. Great Britain was historically a great power.
The United States was formed from 13 British colonies along the East Coast. On July 4, 1776 they declared independence from Britain. Today the US has 50 states and Washington DC, with English spoken as a first language by 80% of residents.
Canada was originally colonized by France but later came under British rule until independence in the 20th
ENGLISH ESSAY WRTTING ( ENGLISH 1 FNBE 0715)Atiqah Ghazali
The document compares and contrasts the Lotus Temple in New Delhi, India and the Opera House in Sydney, Australia. It discusses their differences in location, architectural design, and purpose. The Lotus Temple is located in New Delhi and inspired by the lotus flower, while the Opera House is situated in Sydney Harbor and drew inspiration from sails and yachts. The Lotus Temple is a place of worship symbolizing peace, and the Opera House is a performing arts center that hosts thousands of events each year.
Marven was excited to visit his grandparents in the Great Northwoods for winter break but was dismayed when he realized there would be no internet or video games and that he would have to help his grandfather, a woodsman, with chores like chopping wood. His grandfather taught him how to snowshoe, make flapjacks, and appreciate the beauty of the vast forest landscape despite the hard work of lumberjacks.
This document contains an outline and table of contents for a group project. It lists the content pages which include a norms agreement, diversity analysis, project proposal, annotated bibliographies, meeting agendas and minutes, and a presentation outline. It also includes pages for each group member as well as a table listing the meeting dates and who chaired and took minutes for each meeting.
Mr. Ashique K P worked as a quality control inspector on contract from May 2010 to July 2011 for the CEMP phase II project at BPCL Kochi refinery. His conduct and work performance were satisfactory according to his manager G. Shobana. The letter serves as a reference for Mr. Ashique's future endeavors.
Majd Yahya Younis Abu Zr is seeking employment and provides her personal and educational background. She has a Bachelor's Degree in Computer Information Systems from Al-albayt University with honors of 82.09. Her objective is to work in a challenging environment utilizing her capabilities in the computer and network field or training. She has 3 years and 8 months of experience as a QA tester and developer at a smart pen company and served as deputy director.
The document discusses the benefits of exercise for mental health. Regular physical activity can help reduce anxiety and depression and improve mood and cognitive function. Exercise causes chemical changes in the brain that may help protect against developing mental illness and improve symptoms for those who already suffer from conditions like anxiety and depression.
El documento presenta información sobre las diferentes etapas de la filosofía, desde la antigua hasta la contemporánea, e incluye detalles sobre varios filósofos griegos antiguos como Tales de Mileto, Heráclito, Parménides y Demócrito. Resume sus principales ideas sobre el origen de la realidad, como el agua, el fuego y los átomos, y también cubre a los sofistas y su enfoque en el discurso y la construcción de la verdad.
Narzędziownik zawiera elementy, które w odpowiedni sposób poukładane w procesie sprzedaży w firmie pomagają w zwiększeniu przychodów. Dodatkowo sprawiają, że sprzedaż staje się ona przyjemna zarówno dla klientów jak i handlowców.
Seminario sul Crowdfunding a SMAU Bari - Reward ed Equity per finanziare l'im...Alessandro Maria Lerro
Il crowdfunding sta profondamente innovando il percorso finanziario delle aziende, creando nuove opportunità per le start up, fornendo l'accesso ad un canale finanziario fortemente democratico e coinvolgendo i potenziali clienti nell'azionariato. Questa presentazione è stata oggetto di un workshop organizzato da IWA nell'ambito di SMAU 2014 a Bari.
La esclerosis múltiple es una enfermedad desmielinizante del sistema nervioso central que causa la destrucción de la mielina. Se caracteriza por episodios de debilidad muscular, alteraciones sensoriales y visuales. Afecta más a mujeres jóvenes entre 20-40 años. Su causa es desconocida pero se relaciona con factores genéticos, ambientales e inmunológicos. El diagnóstico se realiza mediante análisis del líquido cefalorraquídeo y resonancia magnética que muestran las lesion
- Uttar Pradesh is a leading tourist destination in India, receiving over 3 million foreign tourists in 2015.
- The state budget of Uttar Pradesh grew 5.3% in 2016-17 to US$53 billion.
- Uttar Pradesh is a major producer of foodgrains and vegetables in India, producing over 46 million tonnes of foodgrains and 26 million tonnes of vegetables in 2015-16.
Este documento presenta un taller sobre la clasificación de ecuaciones químicas. Incluye cinco actividades: 1) identificar seis tipos de ecuaciones químicas en diagramas, 2) clasificar ocho ecuaciones químicas específicas, 3) convertir tres descripciones de reacciones químicas en ecuaciones, 4) clasificar las tres ecuaciones resultantes, y 5) explicar la diferencia entre una reacción química y una ecuación química.
Cross-Apps-Entwicklung für iPhone, Android und Co.Peter Hecker
Mit der Veröffentlichung von iPhone, iPod Touch sowie iPad und dem iPhone OS hat Apple den Markt für mobile Endgeräte massenfähig gemacht. Google liefert mit dem Android-Betriebssystem ebenfalls eine stetig wachsende Plattform. Einer der Erfolgsfaktoren ist der auf beiden Systemen verfügbaren Browser "Mobile Safari" bzw. die technologische Basis WebKit. Diese freie HTML-Rendering-Bibliothek wird nicht nur von Apple und Google eingesetzt, sondern auch von anderen Unternehmen, wie Nokia, Adobe und Blackberry verwendet: Einführung und Motivation, Die WebKit-Plattform, Überblick "mobile" Frameworks, Zusammenfassung und Fazit
HTML5 und CSS3 bieten neue native Funktionen und Gestaltungsoptionen für Webdesigner und Entwickler. Welche Technologien sich heute schon bedenkenlos einsetzen lassen und wie sich die Standards in der Zukunft weiterentwickeln werden, sind die Themen dieser Präsentation von Sven Brechner.
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.
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CJens Grochtdreis
Auf dem W3C-Tag 2010 ergriff ich die Chance, das W3C zu schnellerem Handeln in Sachen Webstandards zu ermutigen. Die Entwicklungsgeschwindigkeit bspw. bei CSS3 ist einfach zu langsam.
PageSpeed Extreme für das große Speed Update 2021SEARCH ONE
Googles Page Experience Update steht vor der Tür. Im kommenden Jahr wird die Ladezeit zum Rankingfaktor und damit zum Optimierungsgegenstand für Suchmaschinenoptimierer. Kai Spriestersbach zeigt in seinem Vortrag einige fortgeschrittene Methoden, mit denen er, über die bekannten Basics hinaus, die Ladezeit moderner Webseiten effektiv verbessert.
Vortrag an der Uni Mainz über die Grundlagen der Frontendentwicklung. Wie sollte man fürs Frontend denken? Woran muss man denken? Womit muss man sich beschäftigen?
Wir brauchen einen neuen Workflow. Die getrennte Arbeit von Designern und Frontendentwicklern geht an der Realität vorbei. Heute müssen sich Webseiten ihrer Umgebung noch stärker anpassen, als sie es grundsätzlich sollten. Das erzeugt technische und designerische Probleme. Beide sollten zusammen gelöst werden.
2. Zur Person
• Technischer Berater und Frontend-Entwickler bei Virtual Identity AG
• Webentwickler aus Leidenschaft
• Im Netz seit 1998
• Hassliebe für Webtechnologien
25. Flashback: Webtechnologie 2001
Diese Demos werden im Internet Explorer 6.0 gezeigt:
1. a) http://midiwebconcept.free.fr/Demos/Ffox.htm
b) http://http.midiwebconcept.free.fr/PeleMele.htm
2. http://mysterycity.de/transform/test/test.html
3. http://www.useragentman.com/tests/cssSandpaper/cube3.html
26. Ergebnis der „Zeitreise“
‣ Alte Versionen des Internet Explorers überraschen mit Features
‣ Diese Features entsprechen nicht den Web Standards
? Kann man nicht etwas aus diesen Möglichkeiten machen?
? Muss man jetzt alles doppelt implemtieren?
36. SVG: Raphaël - Einsatz
// Creates canvas 320 × 200 in element #drawingContainer
var paper = Raphael('drawingContainer', 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to black
circle.attr("stroke", "#000");
http://jsfiddle.net/utUFz/2/
39. Connectivity: sockjs - Vorstellung
• Ziel: bessere Client-Server-Kommunikation
• Web-Standard: WebSocket
• IE-Magic: XMLHTTPRequest mit Long Polling
• WebSockets werden erst im IE10 nativ unterstützt
• Entwickler: Firma VMware, Lizenz: MIT
40. Connectivity: sockjs - Einsatz
// Client code:
var sockjs = new SockJS('/myApp');
sockjs.send('Hi Server!');
sockjs.onmessage = function(e) {
alert('Server answered: ' + e.data);
};
// Server code:
var sockjs_opts = {sockjs_url: "http://cdn.sockjs.org/sockjs-0.3.min.js"};
var sockjs_echo = sockjs.createServer(sockjs_opts);
sockjs_echo.on('connection', function(conn) {
conn.on('data', function(message) {
conn.write('Hello Client! You said:' + message);
});
});
41. Eye Candy: CSS3Pie - Vorstellung
• Ziel: CSS3-Features nachbilden
• Web-Standard: CSS3
• IE-Magic: VML
• Für alle IE (je nach Verwendung kann der IE manches Feature nativ)
• Entwickler: Firma Sencha, Lizenz: Apache Licence und GPL
45. HTML-5-Tags: html5shim - Einführung
• Ziel: HTML-5-Tags bereits heute verwenden für Screen und Print
• JavaScript-Lösung für IE < 9
• Entwickler: Alexander Farkas, John-David Dalton, Jonathan Neal, Remy
Sharp
• Lizenz: MIT und GPL2
49. Ist nun alles in Butter?
• polyfills/shims sind keine Module
50. Ist nun alles in Butter?
• polyfills/shims sind keine Module
• Keine vollständige Abdeckung der Web-Standards!
51. Ist nun alles in Butter?
• polyfills/shims sind keine Module
• Keine vollständige Abdeckung der Web-Standards!
• Performance beobachten!
52. Ist nun alles in Butter?
• polyfills/shims sind keine Module
• Keine vollständige Abdeckung der Web-Standards!
• Performance beobachten!
• Nebeneffekte
53. Ist nun alles in Butter?
• polyfills/shims sind keine Module
• Keine vollständige Abdeckung der Web-Standards!
• Performance beobachten!
• Nebeneffekte
• JavaScript wird benötigt
56. Vorgehen beim Einsatz von polyfills/shims
1. Generelle Problematik erklären Time
Budget Quality
57. Vorgehen beim Einsatz von polyfills/shims
1. Generelle Problematik erklären Time
2. Alternativen aufzeigen
Budget Quality
58. Vorgehen beim Einsatz von polyfills/shims
1. Generelle Problematik erklären Time
2. Alternativen aufzeigen
3. Einschränkungen beachten
Budget Quality
59. Vorgehen beim Einsatz von polyfills/shims
1. Generelle Problematik erklären Time
2. Alternativen aufzeigen
3. Einschränkungen beachten
4. Prototypen erstellen
Budget Quality
60. Vorgehen beim Einsatz von polyfills/shims
1. Generelle Problematik erklären Time
2. Alternativen aufzeigen
3. Einschränkungen beachten
4. Prototypen erstellen
5. Performance testen
Budget Quality
61. Vorgehen beim Einsatz von polyfills/shims
1. Generelle Problematik erklären Time
2. Alternativen aufzeigen
3. Einschränkungen beachten
4. Prototypen erstellen
5. Performance testen
Budget Quality
6. Kompromisse eingehen
62. Wichtige Ressourcen
• When can I use…
http://caniuse.com/
• HTML5 please
http://html5please.com/
• HTML5 Cross Browser Polyfills
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
64. Fazit
• Legacy Browser sind leistungsfähiger, als vermutet
• Polyfills / shims als Brückentechnologie verwenden
• Die Zeit arbeitet für uns!
• Progressive enhancement für optionale Features
• Graceful degradation vor allem bei visuellen Aspekten
65. Was nun? (Teil 2)
a.Kleinsten gemeinsamen Nenner verwenden…
b.Ignorieren und auf moderne Webtechnologien setzen…
c.Warten…?
66. Was nun? (Teil 2)
a.Kleinsten gemeinsamen Nenner verwenden…
b.Ignorieren und auf moderne Webtechnologien setzen…
c.Warten…?
67. Fragen?
http://jonathanweiss.net/me
Was ist mit…
• Modernizr
• Audio/Video
• Webfonts
• …?
Fragt mich einfach
in der Pause oder
später per Mail/
Twitter/Whatever :-)
@jonathan_weiss
68. (Bildnachweise)
• Seite 3: http://www.w3.org/html/logo/
• Seite 4: http://de.wikipedia.org/w/index.php?title=Datei:HTML5-Spezifikations-
%C3%9Cbersicht.svg&filetimestamp=20120411222933
• Seite 10:
http://www.flickr.com/photos/familie-golde/2406800931/
http://de.wikipedia.org/w/index.php?
title=Datei:Unterlegscheiben_dolo280.jpg&filetimestamp=20110603081729
• Seite 12:
http://en.wikipedia.org/wiki/File:JavaScript-logo.png
http://en.wikipedia.org/wiki/File:Internet_Explorer_7_Logo.png
http://commons.wikimedia.org/wiki/File:Crystal_Clear_filesystem_folder_lin.png
• Seite 28: http://www.w3.org/html/logo/
• Seite 33: Bild basiert auf http://icanhascheezburger.com/2012/04/29/funny-cat-pictures-lolcats-it-was-a-
joke/
• Seite 34: http://digitalchecking.blogspot.de/p/twitter-follow-me-images-for-you.html
Hinweis der Redaktion
\n
Gleichzeitig total begeistert, was im Browser so alles abgeht und frustriert, dass es nicht einfach ist.\nUnd das war schon immer so. Ich wei&#xDF; noch, wie ich mich damals &#xFC;ber CSS gefreut hatte und endlich die Tabellenlayout los war und auch irgendwann auf frames verzichten konnten. Genauso aufregend fand ich sp&#xE4;ter die M&#xF6;glichkeit mit JavaScript Formulardaten auszuwerten und das nicht immer in PHP (oder sonst etwas machen zu m&#xFC;ssen). Und was ich mich an Webtechnologien begeistert, zeige ich euch jetzt.\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
Nur der Vollst&#xE4;ndigkeit halber:Das sind alles Begriffe, die man in der Regel im Zusammenhang mit HTML5 h&#xF6;rt. Das ist so nicht ganz richtig, denn eigentlich ist nur das HTML5, was von der WHAT WG spezifiziert wird. F&#xFC;r CSS3, zum Beispiel, ist eine ganz andere WG zust&#xE4;ndig.\n\nhttp://de.wikipedia.org/w/index.php?title=Datei:HTML5-Spezifikations-%C3%9Cbersicht.svg&filetimestamp=20120411222933\n\nInzwischen setzt sich langsam der von Thomas Mittelbach stammende Begriff Web8 durch = HTML5 + CSS3 = Web8. Dieser Begriff soll verdeutlichen, dass es um eine Reihe von Webtechnologien geht, die mehr sind, als in der HTML-5-Spezifikation stehen.\nAber das nur am Rande. Wie man diese Technologien nun umschreibt, ob mit HTML5 oder Web8 oder nicht, wichtig ist, dass Browser immer m&#xE4;chtiger werden und ein vielfaches an Funktionen und APIs bieten als noch vor wenigen Jahren.\n
Diese tollen M&#xF6;glichkeiten sind in veralteten Browser nicht m&#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&#x2026; Warum ich mich auf den IE beschr&#xE4;nke erkl&#xE4;re ich gleich noch. Vorher m&#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &#x2026;&#x2026;&#x2026;&#x2026;&#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&#xE4;hrend andere Hersteller hier schnell reagierten, lies sich Microsoft bis zum IE9 Zeit.\n\n\n1 http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0\n\n
Diese tollen M&#xF6;glichkeiten sind in veralteten Browser nicht m&#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&#x2026; Warum ich mich auf den IE beschr&#xE4;nke erkl&#xE4;re ich gleich noch. Vorher m&#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &#x2026;&#x2026;&#x2026;&#x2026;&#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&#xE4;hrend andere Hersteller hier schnell reagierten, lies sich Microsoft bis zum IE9 Zeit.\n\n\n1 http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0\n\n
Diese tollen M&#xF6;glichkeiten sind in veralteten Browser nicht m&#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&#x2026; Warum ich mich auf den IE beschr&#xE4;nke erkl&#xE4;re ich gleich noch. Vorher m&#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &#x2026;&#x2026;&#x2026;&#x2026;&#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&#xE4;hrend andere Hersteller hier schnell reagierten, lies sich Microsoft bis zum IE9 Zeit.\n\n\n1 http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0\n\n
Diese tollen M&#xF6;glichkeiten sind in veralteten Browser nicht m&#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&#x2026; Warum ich mich auf den IE beschr&#xE4;nke erkl&#xE4;re ich gleich noch. Vorher m&#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &#x2026;&#x2026;&#x2026;&#x2026;&#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&#xE4;hrend andere Hersteller hier schnell reagierten, lies sich Microsoft bis zum IE9 Zeit.\n\n\n1 http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0\n\n
Diese tollen M&#xF6;glichkeiten sind in veralteten Browser nicht m&#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&#x2026; Warum ich mich auf den IE beschr&#xE4;nke erkl&#xE4;re ich gleich noch. Vorher m&#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &#x2026;&#x2026;&#x2026;&#x2026;&#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&#xE4;hrend andere Hersteller hier schnell reagierten, lies sich Microsoft bis zum IE9 Zeit.\n\n\n1 http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0\n\n
Diese tollen M&#xF6;glichkeiten sind in veralteten Browser nicht m&#xF6;glich.\n\nIch definiere veralteten Browser als IE in den Versionen 6, 7 und 8&#x2026; Warum ich mich auf den IE beschr&#xE4;nke erkl&#xE4;re ich gleich noch. Vorher m&#xF6;chte ich kurz beschreiben, warum diese Features nicht unterst&#xFC;tzt werden.\n\n1. Browserkrieg 1997 - ca. 2001\n\n\nWenn man sich das &#x2026;&#x2026;&#x2026;&#x2026;&#xA0;mal anguckt, wird klar, dass viele dieser neuen Funktionen erst nach Erscheinen des IE6 verwendet wurden. W&#xE4;hrend andere Hersteller hier schnell reagierten, lies sich Microsoft bis zum IE9 Zeit.\n\n\n1 http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0\n\n
&#x2022; Marktanteil HTML-5-f&#xE4;higer Desktop-Browser: ~60%\n&#x2022; Somit sind ~40% der Nutzer mit einem Legacy-Browser unterwegs!\n&#x2022; Davon sind ~7% IE6, ~4,5% IE7 und ~25,4% IE8\n&#x2022; Alte Versionen anderer Browser im Promillebereich\n => Wer einen alternativen Browser einsetzen kann, der aktualisiert auch\n => Wer einen alten IE verwendet, hat oft keine andere Wahl!\n\nUNTERNEHMEN\nF&#xFC;r Unternehmen, vor allem in Deutschland, habe ich keine Zahlen, aber Erfahrungswerte. So wei&#xDF; ich von einigen DAX-30-Unternehmen, die immernoch den IE7 oder IE8 als Standard-Browser vorschreiben. \n
Das w&#xE4;re HTML4 und w&#xE4;re entt&#xE4;uschend, denn man w&#xFC;rde immer sehen, was theoretisch m&#xF6;glich w&#xE4;re und das Gef&#xFC;hl haben, etwas zu verpassen.Damit versperrt man eine gro&#xDF;e Anzahl an Nutzern und muss sich (besonders im Konzernumfeld) unangenehmen Fragen stellen: &#x201E;Warum funktioniert denn das f&#xFC;r uns entwickelte Feature/ die Webanwendung nicht, wie wir uns das vorgestellt haben?&#x201C;Vielleicht ist die Zeit ja noch nicht reif f&#xFC;r diese Technologie und in ein paar Jahren sieht es anders aus. Hier gibt es die IE6 Countdown. Hier kommt man allerdings vom Regen in die Traufe, denn der IE7 unterst&#xFC;tzt kaum mehr moderene Webstandards und wird bis 2014 offiziell von MS noch unterst&#xFC;tzt (also mit Updates versehen). Der IE8 sogar mindestens bis 2017.\nWenn man sich die Optionen ansieht, dann merkt man, dass sie alle nicht besonders sch&#xF6;n sind. Daher: wenn wir uns schon mit Legacy-Browsern besch&#xE4;ftigen m&#xFC;ssen, dann sollten wir uns doch einmal genau anschauen, was sie k&#xF6;nnen.\n
&#x2022; Behavior: userData\n&#x2022; Long Polling\n&#x2022; VML\n&#x2022; Filter\n
&#x2022; Warum muss man wissen, was der IE 2001 bereits konnte?\n&#x2022; Nun, er kann eine ganze Menge. \n&#x2022; Geht seinen eigenen Weg (MS-Weg, kein Web-Standard)\n&#x2022; Dennoch w&#xFC;rde ich nicht sagen, dass er ein guter Browser ist - daf&#xFC;r ist er einfach zu alt: langsam, buggy und &#xFC;berholt.\n\nABER:\n&#x2022; Die M&#xF6;glichkeiten sollten wir nutzen!\n&#x2022; Muss man jetzt alles doppelt implementieren? MS-Weg und WebStandard-Weg\n&#x2022; Antwort: nein!\n
Polyfills\n&#x2022; bilden eine NEUE native API eines Standards 1:1 nach\n&#x2022; kommen nur zum Einsatz, wenn der Browser die API nicht unterst&#xFC;tzt\n&#x2022; erm&#xF6;glichen heute bereits den Einsatz von k&#xFC;nftigen Standards\n\nshims/shivs\n&#x2022; bieten eine Funktion, die kein Standard ist\n&#x2022; (oder) normalisieren verschiedene Implementierungen\n\nDas war die urspr&#xFC;ngliche Unterteilung (von Paul Irish und Remy Sharp), heute werden die Begriffe leider nicht mehr konsequent so verwendet. So wie man heute immer noch von AJAX spricht, auch wenn man &#xFC;berhaupt kein XML mehr austauscht, sondern JSON, genau so werden diese Begriffe heute analog verwendet&#x2026;\n\nCUT: Darum auch der Titel dieses Talks: HTML-5-Legacy-Anwendungen. Wir verwenden HTML-5-Technologien mit einem Fallback f&#xFC;r Legacy-Browser. Genau das bieten uns diese polyfills/shims.\n\nhttp://paulirish.com/i/7570.png\nhttp://remysharp.com/2010/10/08/what-is-a-polyfill/\n\nhttp://www.flickr.com/photos/familie-golde/2406800931/\nhttp://de.wikipedia.org/w/index.php?title=Datei:Unterlegscheiben_dolo280.jpg&filetimestamp=20110603081729\n\n
Polyfills\n&#x2022; bilden eine NEUE native API eines Standards 1:1 nach\n&#x2022; kommen nur zum Einsatz, wenn der Browser die API nicht unterst&#xFC;tzt\n&#x2022; erm&#xF6;glichen heute bereits den Einsatz von k&#xFC;nftigen Standards\n\nshims/shivs\n&#x2022; bieten eine Funktion, die kein Standard ist\n&#x2022; (oder) normalisieren verschiedene Implementierungen\n\nDas war die urspr&#xFC;ngliche Unterteilung (von Paul Irish und Remy Sharp), heute werden die Begriffe leider nicht mehr konsequent so verwendet. So wie man heute immer noch von AJAX spricht, auch wenn man &#xFC;berhaupt kein XML mehr austauscht, sondern JSON, genau so werden diese Begriffe heute analog verwendet&#x2026;\n\nCUT: Darum auch der Titel dieses Talks: HTML-5-Legacy-Anwendungen. Wir verwenden HTML-5-Technologien mit einem Fallback f&#xFC;r Legacy-Browser. Genau das bieten uns diese polyfills/shims.\n\nhttp://paulirish.com/i/7570.png\nhttp://remysharp.com/2010/10/08/what-is-a-polyfill/\n\nhttp://www.flickr.com/photos/familie-golde/2406800931/\nhttp://de.wikipedia.org/w/index.php?title=Datei:Unterlegscheiben_dolo280.jpg&filetimestamp=20110603081729\n\n
Ich m&#xF6;chte nun L&#xF6;sungen f&#xFC;r 5 Bereiche vorstellen. Dazu werde ich jeweils erkl&#xE4;ren, wie die L&#xF6;sung technisch aufgebaut ist (worauf sie basiert), wie man sie einsetzt und mit welchen Einschr&#xE4;nkungen man rechnen muss.\n
Bei den L&#xF6;sungen gibt es immer drei Ans&#xE4;tzt, wie sie intern funktionieren.\n\nhttp://en.wikipedia.org/wiki/File:JavaScript-logo.png\nhttp://en.wikipedia.org/wiki/File:Internet_Explorer_7_Logo.png\nhttp://commons.wikimedia.org/wiki/File:Crystal_Clear_filesystem_folder_lin.png\n
&#x2022; Komfortabler im Zugriff als Cookies: Key-Value-Pairs\n&#x2022; Gr&#xF6;&#xDF;ere Datenmengen als Cookies (hier max. 4000 Bytes) [http://myownplayground.atspace.com/cookietest.html]\n&#x2022; auch sinnvoll f&#xFC;r Offline-Betrieb von Webanwendungen. \n&#x2022; Achtung: Daten werden unverschl&#xFC;sselt gespeichert und sollten daher keine sensiblen Daten enthalten!\n&#x2022; Daten werden bei jedem Request wieder &#xFC;bertragen (wie bei Cookies)\n&#x2022; es lassen sich nur Strings speichern, komplexe Datentypen muss man serialisieren\n&#x2022; Achtung: Limit ist 128KB f&#xFC;r IE < 8, ansonsten 5 - 10 MB\n\nhttp://www.jstorage.info/#basics\n
L&#xF6;schen: &#xDC;berschreiben des Keys mit null\nGist: https://gist.github.com/1204477\n\n
\nSVG-Animation war Grundlage f&#xFC;r Interaktionen in HD-DVDsUhr: http://upload.wikimedia.org/wikibooks/de/0/09/SVG_Analoguhr01.svg\n\n&#x2022; Zwei unterschiedliche APIs:\n = Vektorgrafiken (SVG) vs Pixelgrafiken (Canvas)\n\nSVG einbinden: http://www.schepers.cc/svg/blendups/embedding.html\n\nRaphael\nCanvas in Flash oder Silverlight\nTechnisch: VML im IE\n\n\nBlob: http://www.blobsallad.se/\n
&#x2022; VML wurde von MS, HP und Macromedia entwickelt und 1998 dem W3C vorgeschlagen\n&#x2022; abgelehnt, da gleichzeitig Adobe und an Sun Precision Graphic Markup Language arbeiteten\n&#x2022; Das W3C entwickelte daraufhin SVG\n&#x2022; MS hielt aber bis zum IE9 an VML fest; erst der IE10 wird nur noch SVG unterst&#xFC;tzten\n&#x2022; IE9 kann SVG, allerdings ohne Animationen, Filter und Schriften\n\n
Issues:\nAbdeckung von nur 50% der Features von SVG. Vergleich: IE9: 59%, Chrom10: 90%\n
&#x2022; ExplorerCanvas (Silverlight: mehr Performance mit VML-Fallback - Faktor 2 bis 20!)\n&#x2022; FlashCanvas (Flash-L&#xF6;sung)\n\nIssues:\n&#x2022; Clipping Paths not supported\n&#x2022; Kreisf&#xF6;rmige Farbverl&#xE4;ufe auch nicht\n&#x2022; \n\nhttp://www.picnet.com.au/blogs/guido/post/2010/03/15/google-explorercanvas-excanvas-for-ie-silverlight-vs-vml/\n
&#x2022; ExplorerCanvas (Silverlight: mehr Performance mit VML-Fallback)\n&#x2022; FlashCanvas (Flash-L&#xF6;sung)\n
&#x2022; Websocket-API ist sehr klein: enth&#xE4;lt im Prinzip nur send() und close().\n&#x2022; Event-Handler: onmessage(), onerror(), onclose() und onopen()\n&#x2022; onmessage hat Argument mit e.data und das war es auch schon :-)\n
\n
&#x2022; border-radius: runde Ecken\n&#x2022; box-shadow: Schatten\n&#x2022; border-image: Mit Grafiken Rahmen zeichnen\n\n&#x2022; CSS3 Backgrounds (-pie-background): mehrere Hintergrundbilder\n&#x2022; Gradients: Verl&#xE4;ufe\n&#x2022; RGBA Color Values: Farbwerte mit Alphakanal\n\n&#x2022; Bugfixing f&#xFC;r transparente PNGs\n\n
Issues:\n &#x2022; position: static funktioniert nicht zuverl&#xE4;ssig\n &#x2022; Pfadangaben werden relative zur Umgebung interpretiert, in denen der JS-Code augef&#xFC;hrt wird: also der der HTML-Datei (Muss man nur bedenken, ist kein gro&#xDF;es Problem)\n &#x2022; Manche Elemente (input) k&#xF6;nnen nicht gestyled werden.\n&#x2022; Bei Zoom werden Hintergrundbilder nicht mit skaliert\n\nIn Summe sehe ich diese Einschr&#xE4;nkungen nicht als gravierend an.\n
&#x201E;Haw-reih-lok&#x201C;\n
Issues:\n&#x2022; blur-radius f&#xFC;r box-shadow wird nicht unterst&#xFC;tzt\n&#x2022; kreisf&#xF6;rmige Verl&#xE4;ufe auch nicht\n&#x2022; Verl&#xE4;ufe k&#xF6;nnen nur zwei Farben haben\n&#x2022; &#xC4;ndern der Schriftgr&#xF6;&#xDF;e f&#xFC;hrt zu seltsamen Effekten\n\nAuch hier: keine gro&#xDF;en Einschr&#xE4;nkungen\n
&#x2022; die JavaScript-L&#xF6;sung triggert intern einen Mechanisum im IE, damit er auch unbekannte HTML-Tags mit Styles versehen und mit solchen drucken kann\n
\n
Kein klingonisch links, sondern die HTML-5-Badge-Icons\n&#x2022; Wir haben mit den vorgestellten L&#xF6;sungen diese HTML-5-APIs abgedeckt.\n&#x2022; Diese Features sind somit heute verwendbar!\n\nCUT:\n&#x2022; Es gibt noch einen Haufen mehr, die ich aus Zeitgr&#xFC;nden nicht integriert \nhabe. Das ganze Thema: Audio-/Video-Tag mit Flashfallback oder Webfonts zum Beispiel. Sp&#xE4;ter stelle noch Links vor, unter denen man schauen kann, was noch alles m&#xF6;glich ist.\n
&#x2022; Nein, denn man kann Polyfills / shivs nicht wie Module verwenden\n = Manche sind zueinander inkompatibel: CSSPie und CSSSandpaper\n = Manche haben Abh&#xE4;ngigkeiten (jQuery o.&#xE4;.), die wieder Ressourcen ben&#xF6;tigen und die Ladezeit verschlechtern\n = Keine einheitliche Qualit&#xE4;t Indikatoren: Reaktionen auf Bugreports, Aktivit&#xE4;ten im git/SVN\n&#x2022; Die Performance wird leiden (HTC erkl&#xE4;ren)\n&#x2022; Nebeneffekte nicht auszuschlie&#xDF;en (Filter auf Filter z.B.)\n&#x2022; JavaScript wird immer ben&#xF6;tigt (dazu komme ich auf der n&#xE4;chsten Seite noch einmal)\n
&#x2022; Nein, denn man kann Polyfills / shivs nicht wie Module verwenden\n = Manche sind zueinander inkompatibel: CSSPie und CSSSandpaper\n = Manche haben Abh&#xE4;ngigkeiten (jQuery o.&#xE4;.), die wieder Ressourcen ben&#xF6;tigen und die Ladezeit verschlechtern\n = Keine einheitliche Qualit&#xE4;t Indikatoren: Reaktionen auf Bugreports, Aktivit&#xE4;ten im git/SVN\n&#x2022; Die Performance wird leiden (HTC erkl&#xE4;ren)\n&#x2022; Nebeneffekte nicht auszuschlie&#xDF;en (Filter auf Filter z.B.)\n&#x2022; JavaScript wird immer ben&#xF6;tigt (dazu komme ich auf der n&#xE4;chsten Seite noch einmal)\n
&#x2022; Nein, denn man kann Polyfills / shivs nicht wie Module verwenden\n = Manche sind zueinander inkompatibel: CSSPie und CSSSandpaper\n = Manche haben Abh&#xE4;ngigkeiten (jQuery o.&#xE4;.), die wieder Ressourcen ben&#xF6;tigen und die Ladezeit verschlechtern\n = Keine einheitliche Qualit&#xE4;t Indikatoren: Reaktionen auf Bugreports, Aktivit&#xE4;ten im git/SVN\n&#x2022; Die Performance wird leiden (HTC erkl&#xE4;ren)\n&#x2022; Nebeneffekte nicht auszuschlie&#xDF;en (Filter auf Filter z.B.)\n&#x2022; JavaScript wird immer ben&#xF6;tigt (dazu komme ich auf der n&#xE4;chsten Seite noch einmal)\n
&#x2022; Nein, denn man kann Polyfills / shivs nicht wie Module verwenden\n = Manche sind zueinander inkompatibel: CSSPie und CSSSandpaper\n = Manche haben Abh&#xE4;ngigkeiten (jQuery o.&#xE4;.), die wieder Ressourcen ben&#xF6;tigen und die Ladezeit verschlechtern\n = Keine einheitliche Qualit&#xE4;t Indikatoren: Reaktionen auf Bugreports, Aktivit&#xE4;ten im git/SVN\n&#x2022; Die Performance wird leiden (HTC erkl&#xE4;ren)\n&#x2022; Nebeneffekte nicht auszuschlie&#xDF;en (Filter auf Filter z.B.)\n&#x2022; JavaScript wird immer ben&#xF6;tigt (dazu komme ich auf der n&#xE4;chsten Seite noch einmal)\n
&#x2022; Nein, denn man kann Polyfills / shivs nicht wie Module verwenden\n = Manche sind zueinander inkompatibel: CSSPie und CSSSandpaper\n = Manche haben Abh&#xE4;ngigkeiten (jQuery o.&#xE4;.), die wieder Ressourcen ben&#xF6;tigen und die Ladezeit verschlechtern\n = Keine einheitliche Qualit&#xE4;t Indikatoren: Reaktionen auf Bugreports, Aktivit&#xE4;ten im git/SVN\n&#x2022; Die Performance wird leiden (HTC erkl&#xE4;ren)\n&#x2022; Nebeneffekte nicht auszuschlie&#xDF;en (Filter auf Filter z.B.)\n&#x2022; JavaScript wird immer ben&#xF6;tigt (dazu komme ich auf der n&#xE4;chsten Seite noch einmal)\n
&#x2022; Problem dem Verantwortlichen verst&#xE4;ndlich machen (&#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&#x201D;)\n&#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&#xE4;ufe kann man sch&#xF6;ne Interfaces bauen.\n&#x2022; Kompromisse schlie&#xDF;en (L&#xF6;sung soll ja in Time, Budget und Quality sein!)\n
&#x2022; Problem dem Verantwortlichen verst&#xE4;ndlich machen (&#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&#x201D;)\n&#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&#xE4;ufe kann man sch&#xF6;ne Interfaces bauen.\n&#x2022; Kompromisse schlie&#xDF;en (L&#xF6;sung soll ja in Time, Budget und Quality sein!)\n
&#x2022; Problem dem Verantwortlichen verst&#xE4;ndlich machen (&#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&#x201D;)\n&#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&#xE4;ufe kann man sch&#xF6;ne Interfaces bauen.\n&#x2022; Kompromisse schlie&#xDF;en (L&#xF6;sung soll ja in Time, Budget und Quality sein!)\n
&#x2022; Problem dem Verantwortlichen verst&#xE4;ndlich machen (&#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&#x201D;)\n&#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&#xE4;ufe kann man sch&#xF6;ne Interfaces bauen.\n&#x2022; Kompromisse schlie&#xDF;en (L&#xF6;sung soll ja in Time, Budget und Quality sein!)\n
&#x2022; Problem dem Verantwortlichen verst&#xE4;ndlich machen (&#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&#x201D;)\n&#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&#xE4;ufe kann man sch&#xF6;ne Interfaces bauen.\n&#x2022; Kompromisse schlie&#xDF;en (L&#xF6;sung soll ja in Time, Budget und Quality sein!)\n
&#x2022; Problem dem Verantwortlichen verst&#xE4;ndlich machen (&#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&#x201D;)\n&#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&#xE4;ufe kann man sch&#xF6;ne Interfaces bauen.\n&#x2022; Kompromisse schlie&#xDF;en (L&#xF6;sung soll ja in Time, Budget und Quality sein!)\n
&#x2022; Problem dem Verantwortlichen verst&#xE4;ndlich machen (&#x201C;Wir machen doch jetzt alles in HTML5! Wo liegt denn das Problem?&#x201D;)\n&#x2022; Alternativen aufzeigen. Wenn es zum Beispiel um eine App geht, die flott reagieren muss: Eye Candy im IE zur&#xFC;ckhalten. Auch mit Ecken und ohne Schatten/Verl&#xE4;ufe kann man sch&#xF6;ne Interfaces bauen.\n&#x2022; Kompromisse schlie&#xDF;en (L&#xF6;sung soll ja in Time, Budget und Quality sein!)\n
\n
&#x2022; Alte Browser k&#xF6;nnen mehr, als man zun&#xE4;chst denkt (auch dank manch eigent&#xFC;mlicher Erfindungen von Micorosoft (Filter, Behavior, HTC) - aber immerhin hat MS auch AJAX erfunden)!\n&#x2022; Polyfills / shims sind Br&#xFC;ckentechnologie, um bereits heute zukunftsf&#xE4;higen Code zu schreiben\n&#x2022; Die Zeit arbeitet daher F&#xDC;R uns!\n\nSchrittweise Verbesserung durch sog. Progressive Enhancement. z.B. wenn der Browser Geolocation anbietet und zul&#xE4;sst, dann f&#xFC;llt zeigt man z.B. die n&#xE4;chste Filiale direkt an. Ansonsten zeigt man eine Deutschlandkarte gem&#xE4;&#xDF; IP-Adresse. Das ist jetzt kein Beinbruch und der Benutzer kommt auch so zum Ziel, aber falls die M&#xF6;glichkeit besteht, dann wird der Erlebnis f&#xFC;r ihn halt ein aufgewertet.\n\nFehlertoleranz durch Graceful degredation\n\n&#x2022; Dennoch: gut &#xFC;berlegen und abw&#xE4;gen, wann man welchen Aufwand betreibt und wann man pragmatisch etwas NICHT macht: nicht alle Browser biete dieselbe User Experience. Die Leute sind daran gew&#xF6;hnt! Im Office mit dem IE verhalten sich Seiten anders als daheim im Chrome. Graceful degredation auch mit Polyfills/shims: &#xE4;hnlich wie bei CSS3 wird nicht alles unterst&#xFC;tzt.\n
Ich m&#xF6;chte euch heute eines mitgeben:\nhabt den Mut, moderne Webstandards bereits heute einzusetzen. Es gibt keine Rundum-Sorglos-L&#xF6;sung und vielleicht gibt es jetzt auch die ein oder andere Erwartung, die recht hoch ist. Aber Fakt ist: wir k&#xF6;nnen heute schon so viele dieser tollen M&#xF6;glichkeiten verwenden und damit zeitgem&#xE4;&#xDF;e, tolle Webseiten / Webanwendungen umsetzen, dass es diese M&#xFC;he wert ist!\n