Als Nachbereitung zu unserer Frage, ob die Leute HTML5 verwenden oder nicht (verwenden), habe ich die Leute gefragt, die es tun.
Welche HTML5-Funktionen haben Sie auf Produktionswebsites verwendet?
Dies sind die Beliebtheitsgrade, basierend auf fast 3.000 Wählern
Keine große Überraschung, dass die Verwendung der neuen semantischen Elemente (wie <nav>) die häufigste Anwendung von HTML5 in der Produktion ist. Es ist einfach, es ist hip, es fühlt sich gut an.
Direkt dahinter kommen die neuen Formularfunktionen. Das freut mich zu sehen, da diese Dinge auch sehr einfach zu implementieren sind und die Benutzerfreundlichkeit enorm verbessern, sowie sperrige JavaScript-Methoden ersetzen (ich denke dabei an Dinge wie Bereichseingaben und das Platzhalterattribut).
Der dritte Platz sind die Audio- und Videofunktionen. Ich bin sicher, iDevices haben das mit vorangetrieben, da die Verwendung von HTML5 auf diesen Geräten wirklich einfach ist und funktioniert. Fallbacks sind jetzt auch einfach zu implementieren.
Die am wenigsten beliebte Funktion ist die Cross-Document-Messaging. Auch keine große Überraschung, da es nicht so häufig benötigt wird. Ich finde es jedoch supercool, besonders da ich gerade an etwas arbeite, das es verwendet.
„Sonstiges“ lag vor einer Reihe anderer Funktionen, also habe ich offenbar eine Reihe von HTML5-Funktionen übersehen, die die Leute aktiv nutzen. Bitte teilen Sie es mit!
Können Sie Links oder Beispiele für „Cross-Document-Messaging“ nennen? Ich würde gerne mehr darüber erfahren.
Ja, hier auch.
Hier auch auch :O
Hier dasselbe
Ha, anscheinend gibt es da ein gewisses Interesse an diesem Thema, nicht wahr? Ich denke, das Coole daran ist, auf nicht-hacky Weise mit Drittanbieterseiten aus einem iFrame zu kommunizieren.
Hier sind einige Grundlagen von David
http://davidwalsh.name/window-postmessage
Hier ist eine Bibliothek, um es für ältere Browser zu unterstützen
http://easyxdm.net/
Googeln Sie es auch =)
Ich möchte pedantisch darauf hinweisen, dass Geolocation eigentlich kein Teil von HTML5 ist, sondern separat.
Als Kurator bei HTML5 Gallery sehe ich viele HTML5-Seiten und kann bestätigen, dass die meisten von ihnen einfach den neuen Doctyp und Elemente verwenden, was natürlich großartig ist. Natürlich werden einige Elemente falsch verwendet (z. B. die Verwendung von
menu, das eine völlig andere Verwendung hat, anstelle vonnav), aber das ist alles eine Lernkurve.Ich frage mich, wie sehr Googles Verzicht auf H264 die Videotags zurückhält.
Außerdem frage ich mich, ob die Leute HTML5-basierte mobile Apps in die Zählung von „Produktionsseiten“ einbeziehen, da ich sicher bin, dass Offline-Speicher in dieser Art von Umgebung intensiv genutzt wird.
Ich verwende auf jeden Fall den neuen Doctyp und semantische Elemente. Meine Projekte erfordern im Moment nicht viel mehr.
Danke für diesen Beitrag, Chris!
Ich finde es toll, dass der Doctyp kurz genug ist, um ihn jedes Mal von Hand zu kodieren. Es gibt auch andere Tags, die stark vereinfacht werden können und die ich gerne benutze.
... ... ...Es sieht einfach netter aus und ist einfacher zu überblicken / zu organisieren / zu codieren.
Die neuen Elemente wie nav und header sind lahm. Alles, was sie sind, sind nichts anderes als umbenannte div-Elemente.
Mir ist die Semantik egal. Wenn ein anderer Entwickler, sogar ein Website-Benutzer, den Quellcode betrachtet, nicht verstehen kann, dass ein Div mit der ID „header“ die Kopfzeile der Website ist und ein Bild mit der ID „logo“ das Logo ist, dann sind sie keine Webentwickler.
Sie werden irgendwann mehr als das sein, aber vorerst ist das richtig. Der Browser wird (irgendwann) versuchen, das zu verstehen, aber wird es nicht tun.
Menschen sollen nicht diejenigen sein, die semantische Elemente kennen/sich darum kümmern/sie bemerken. Diese sind für den Computer bestimmt. Menschen erkennen Logos, Header und Navigation sofort, Computer sind wie „Oh, hey, Daten, was bedeuten sie?“. Mit semantischen Tags und Markup können sie, oder werden bald können, sagen: „Oh, hey, das ist Navigation, damit weiß ich jetzt, was ich tun soll!“
Auch ein sehr schöner Nebeneffekt: Sie können mehr als ein h1 verwenden, wenn Bedarf besteht (z. B. in Ihrer Kopfzeile für ein Logo -> h1, Unterzeile -> h2 plus separate h1, h2 und so weiter für Ihren „Inhalt“).
Auch der neue aside-Tag ist ein schöner für eine saubere Semantik.
Außerdem müssen die Header-, Nav- und Footer-Elemente nicht auf die Seitenabschnitte beschränkt sein, zu denen Sie sie zugehörig halten. Sie können ein Header-Tag verwenden, um den Anfang eines Abschnitts/Artikels zu kennzeichnen (wie oben auf einem Blogbeitrag), und ein Nav-Element kann verwendet werden, um die Seitenleistenmenüs, das Fußzeilenmenü, die Navigation innerhalb von Blogbeiträgen usw. anzuzeigen.
All dies verbessert die Semantik erheblich und hilft Bots, Ihre Website (und die Websites Ihrer Kunden, vorausgesetzt, Sie haben welche) angemessen zu indizieren.
Also, um Ihr eigenes Zitat zu verwenden
„Mir ist die Semantik egal“
dann sollten Sie KEIN Webentwickler sein.
Es wird offensichtlich überall funktionieren…Wir fangen an, wirklich coole Sachen mit Canvas zu machen. Es kann Ihnen wirklich helfen, fantastische Infografiken zu erstellen!
„Keine große Überraschung, dass die Verwendung der neuen semantischen Elemente (wie ) die häufigste Anwendung von HTML5 in der Produktion ist. Es ist einfach, es ist hip, es fühlt sich gut an.“
Muss die Mehrheit dann eine JS-Shim erforderlich machen, um diese neuen Elemente zu stylen? Wie sehen diese Seiten ohne JS aus?
„Wie sehen diese Seiten ohne JS aus?“
Ein bisschen „falsch“, aber nutzbar.
Wenn Ihnen IE-Benutzer mit deaktiviertem JavaScript sehr am Herzen liegen und Sie trotzdem neue semantische Elemente verwenden möchten
http://www.debeterevormgever.nl/html5-ie-without-javascript/
„Wie sehen diese Seiten ohne JS aus?“
bearbeiten
„Wie sehen diese Seiten ohne JS aus [wenn lt IE 9]?“
Ziemlich unordentlich und große Teile ungestyled, aber es ist ein Kompromiss, den ich für die zusätzliche semantische Güte eingehen will.
Können wir nicht gleich den heiligen Krieg beginnen? =)
2% der US-Benutzer surfen mit deaktiviertem JS und etwa 1% weltweit (http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/)
Meine Vermutung: Ein großer Prozentsatz der Leute tut das absichtlich und ist sich der damit verbundenen Probleme bewusst.
Also: Das ist mir egal.
Interessant, Chris, ich habe gerade deine Seite in IE7 mit deaktiviertem JavaScript überprüft und es gab ein nettes Easter Egg in deinem gelben Haftnotiz-Ding für die Kommentare. Lächeln und Stirnrunzeln... alias Drama? ;-)
Ich mag deinen Sinn für Humor, aber ich muss zugeben, dass ich zu denen gehöre, die denken, dass alle, die weniger als IE9 (in der Beta) verwenden, ob sie es mögen oder nicht, ziemlich bedeutsam sind. Persönlich sind Semantiken großartig... aber semantische Elemente allein sind meiner Meinung nach die Mühe und den Hype für HTML5 nicht wert. Besonders im Moment. Der Grund, warum Semantiken die Umfrage gewonnen haben, ist, dass keine andere Funktion in HTML 5 auf mehr als 50% der verwendeten Browser mehr oder weniger implementiert werden kann.
Ich denke, es ist erwähnenswert und es ist gut, die Perspektive zu wahren. Zum Beispiel bin ich Lehrer und glaube aus Erfahrung, dass es verfrüht ist, HTML5 für Anfänger zu empfehlen. Die Sorgen um progressive Enhancement (oder die entgegengesetzte Sichtweise, je nachdem) zu ihrer bereits riesigen Liste von Bedenken hinzuzufügen, ist für fast alle außer den hartgesottensten Technik-Fans nicht praktikabel. Viele Leute, mit denen ich arbeite, sind Designer und würden sich am liebsten so wenig wie möglich mit Code beschäftigen. Aber ich will darüber keine Diskussion!
Wenn sie IE mit aktiviertem JavaScript verwenden, sind sie wahrscheinlich an nicht funktionierende Seiten gewöhnt. Ich codiere im Allgemeinen für den Browser, den ich verwende (Firefox), und sorge dann dafür, dass er in anderen Browsern vergleichbar und nutzbar aussieht.
Ich neige dazu, Jason in diesem Fall zuzustimmen. Ich glaube nicht, dass die Verwendung von HTML5 für die überwiegende Mehrheit der Produktionswebsites realistisch ist. Es ist jedoch eine gute Idee, sich jetzt für die Zukunft vorzubereiten, indem man auf persönlichen Websites, Websites für Branchenexperten und/oder Websites experimentiert, auf denen Benutzer definitiv nicht auf IE8 oder älter surfen. Ich arbeite derzeit an einem Redesign, bei dem 59% der Benutzer auf IE sind und davon 75% auf IE8, 18% auf IE7 und 7% auf IE6. So cool es auch wäre, Scheiß drauf zu sagen und nur die neuesten Tools wie CSS3 und HTML5 zu verwenden, ich kann es einfach nicht rechtfertigen, wenn bewährte Techniken verfügbar sind, die mit ziemlich anständiger Semantik in allen Browsern gut funktionieren. Das soll nicht heißen, dass die fertige Seite in IE6 genauso aussieht wie in Firefox, aber sie wird ziemlich nah dran sein. Ich weiß, das ist total uncool.
Das Verhältnis von Benutzern mit deaktiviertem JavaScript ist wirklich gering. Sie können die Diskussion zu diesem Punkt hier lesen.
http://www.smashingmagazine.com/2011/02/22/using-html5-to-transform-wordpress-twentyten-theme/
Heutzutage haben Benutzer, die JavaScript deaktiviert haben, bereits eine stark beeinträchtigte Web-Erfahrung.
Hallo,,,
Das ist ein sehr guter Beitrag für neue Entwickler. HTML5 ist auch sehr leistungsfähig im Vergleich zu den letzten. HTML5 ist einfach zu handhaben und enthält auch einige spezifische Techniken, die es anders und stärker machen als die letzte.
@Ian: Danke für deinen Link.
Ich kann es kaum erwarten, HTML5 zu lernen.. Es wird Spaß machen!! Guter Link!
Überrascht, dass Cross-Document-Messaging wenig genutzt wird. Ich persönlich halte es für äußerst nützlich.
*Fragt sich, wie viele dieser „Produktions“-Seiten große Unternehmensseiten sind…
Antwort: Nicht viele
Ich habe die Idee der Verwendung von HTML5 für die Anwendungsentwicklung zu Herzen genommen
und arbeite an einigen ernsthaften Projekten, die sich darauf konzentrieren.
Mein aktuelles Projekt ist das „AsterClick AMI Toolset“, das darauf abzielt,
die Erstellung von HTML5-basierten Anwendungen zur Steuerung
der Asterisk-PBX über WebSockets zu unterstützen.
Eine der Komponenten im Toolset ermöglicht sogar HTML5-
Anwendungen als eigenständige Desktop-Executable bereitzustellen.
Ich habe gerade die erste Anwendung fertiggestellt, die dieses Toolset nutzt,
etwas namens „HUD“, das es ermöglicht, Anrufe per Drag-and-Drop zu verwalten, Anrufe zu übertragen, Telefonwarteschlangen zu verwalten, Telekonferenzen und dergleichen.
Ich sehe also wirklich, dass HTML5 eine wichtige Rolle bei der Entwicklung
von echten kommerziellen Anwendungen sowohl im Web als auch außerhalb des Webs spielt.