HTML5 Archive - oreillyblog

Responsive Webdesign von Kopf bis Fuß

Alexander Plaum — Thu, 21 Feb 2013 11:38:17 +0000

Wenn ich den Terminus „Media Queries“ in den Raum werfe, wissen wohl zunächst nur routinierte Webentwickler, was gemeint ist. Der mit diesem Konzept verbundene Überbegriff ist allerdings derzeit in aller Munde: Responsive Webdesign. Hier geht es (grob gesagt) darum, eine Website so zu bauen, dass sie auf das Gerät reagiert, mit dem sie betrachtet wird, also eine „Response“ liefert. Diese Reaktion zeigt sich vor allem daran, dass Navigationsleisten, Spalten und Textfelder immer genau die richtige Größe haben. Vorbei die Zeit, als z.B. Seiten von Nachrichtenportalen auch auf dem Mobiltelefon sture 1000 Pixel breit waren und nur per Horizontal-Scroll- und Zoomorgien gelesen werden konnten. Grundlage für das Responsive Webdesign sind die neuen Webstandards HTML5 und CSS3 (vor allem letzteres). Grundlage für den Umgang damit ist u.a. unser neuer Head-First-Titel „Mobiles Web von Kopf bis Fuß“. Das Probekapitel zu Media Queries & Co. haben wir frisch ausgekoppelt: Mobiles Web von Kopf bis Fuß from O’Reilly Verlag

Der Beitrag Responsive Webdesign von Kopf bis Fuß erschien zuerst auf oreillyblog.

Multimediatreff am 3. Dezember in Köln

Alexander Plaum — Mon, 28 Nov 2011 17:37:30 +0000

HTML5, CSS3 und JavaScript: der 28. Multimediatreff in Köln, der direkt in unserer Nachbarschaft im Mediapark stattfindet, steht ganz im Zeichen der neuen Webtechnologien. Die Referentenliste ist hochkarätig, u.a. schicken Adobe, Microsoft, Mozilla und Opera ihre Speaker auf die Bühne. Da wundert es auch nicht, dass die Veranstaltung offiziell bereits ausverkauft ist. Kurzentschlossene und Die-Hard-Webjünger haben jedoch noch eine Chance: Genau hier kann man sich auf eine virtuelle Warteliste eintragen und hoffentlich eins der letzten Standby-Tickets ergattern – das natürlich ebenso wie die regulären Eintrittskarten zur Teilnahme an der abschließenden Pizzaschlacht berechtigt. Aufgrund der regen Nachfrage planen die Organisatoren, den nächsten MMT deutlich zu vergrößern.

Der Beitrag Multimediatreff am 3. Dezember in Köln erschien zuerst auf oreillyblog.

„Es ist nur eine Frage der Zeit, bis HTML5 von den meisten Browsern unterstützt wird.“ – Ein Interview mit Stefan Fröhlich

Viviane Kramer — Wed, 07 Sep 2011 09:50:14 +0000

HTML5 und CSS3 gewinnen in der Webprogrammierung immer mehr an Bedeutung – und das zu Recht. Denn schließlich bieten beide viele Neuerungen, die das Programmieren weiter vereinfachen werden. Doch was genau macht HTML5 und CSS3 so besonders? Zu diesem Thema hat uns Stefan Fröhlich, der Übersetzer des Buchs „HTML5 & CSS3„, Frage und Antwort gestanden. HTML5 ist in aller Munde – obwohl es noch nicht von allen Browsern unterstützt wird. Warum fasziniert es dennoch so viele Entwickler? Und warum sollte man sich gerade jetzt damit beschäftigen? Es ist nur eine Frage der Zeit, bis HTML5 von den meisten Browsern unterstützt wird. Außerdem werden viele Funktionen von HTML5 und CSS3 bereits auf unzähligen Websites verwendet. Da sich meist mit nur wenigen Zeilen Code ermitteln lässt, ob die einzelnen Features von der jeweiligen Kombination aus Betriebssystem und Browser unterstützt werden, ist es zudem auch relativ einfach, entsprechende Ausweichlösungen bereitzustellen. Auf diese Weise können Entwickler schon heute Websites mit HTML5 und CSS3 erstellen. Und können diese Hilfsmittel mit der zunehmenden Unterstützung durch die jeweiligen Browser Schritt für Schritt …

Der Beitrag „Es ist nur eine Frage der Zeit, bis HTML5 von den meisten Browsern unterstützt wird.“ – Ein Interview mit Stefan Fröhlich erschien zuerst auf oreillyblog.

Was ist CSS3?

Viviane Kramer — Fri, 08 Jul 2011 09:37:09 +0000

CSS steht für „Cascading Style Sheet“, was übersetzt in etwa „hintereinander geschaltete Gestaltungsvorlage“ bedeutet. Stylesheets sind für die Gestaltung einer Website zuständig – und das ganz unabhängig von der Seitenstruktur, die mithilfe von HTML beschrieben wird. Mit Cascading Style Sheets können alle Elemente einer Website zentral gesteuert werden: mit ihrer Hilfe lassen sich die Größe von Überschriften, Abstände zwischen Textabschnitten, die verwendeten Schriftarten und sogar Hintergrundbilder festlegen – und auch rasch anpassen oder ändern. Darüber hinaus dienen sie auch dazu, die Inhalte für verschiedene Ausgabemedien – wie zum Beispiel Computer, Smartphones oder zum Drucken – so aufzubreiten, dass sie gut lesbar dargestellt werden können. Ein anschauliches Beispiel dafür, wie unterschiedlich eine Website mittels CSS gestaltet werden kann, bietet der CSS Zen Garden. Hier finden sich hunderte Versionen ein und derselben Website, die Webdesigner weltweit entwickelt und dem Projekt beigesteuert haben. So lässt sich eindrucksvoll erleben, wie eine Website allein durch Anklicken einer Designvorlage ihr Aussehen verändert. Das Web ist ein dynamisches Gebilde, und auch die Technologien, auf denen es basiert, ändern sich. CSS 2.1 war …

Der Beitrag Was ist CSS3? erschien zuerst auf oreillyblog.

Was ist Canvas?

Inken Kiupel — Mon, 11 Apr 2011 13:25:56 +0000

Das <canvas>-Element gehört zu den spannendsten neuen Features von HTML5. Streng genommen sorgt es lediglich dafür, dass eine leere Zeichenfläche in eine Website eingebunden wird. Auf dieser Fläche lassen sich dann aber mithilfe von JavaScript beliebige Diagramme, Grafiken für Spiele oder Videos erstellen und sogar animieren. Damit tritt Canvas (im Zusammenspiel mit JavaScript und CSS) in Konkurrenz zu Adobe Flash, das bisher als Technologie der Wahl galt, um Filme und Animationen in Websites einzubinden. Canvas hat gegenüber Flash aber den Vorteil, dass es kein Plugin benötigt, um die animierten Grafiken anzuzeigen, und darüber hinaus lässt sich das Element problemlos auf Apples iPhone und iPad einsetzen. Die Möglichkeiten, die das <canvas>-Element bietet, reichen von der Erstellung einfacher Linien und Rechtecke bis hin zu komplexen animierten Formen. Die erzeugten Grafiken lassen sich außerdem skalieren, positionieren und beschneiden, mit mehrstufigen Transparenzen und Farbverläufen versehen – und das alles auf Basis gängiger Webtechnologien. Das <canvas>-Element wird von den meisten aktuellen Browsern unterstützt. Einzige Ausnahme bislang: der Internet Explorer. Damit Canvas auch vom IE erkannt und dargestellt werden kann, können …

Der Beitrag Was ist Canvas? erschien zuerst auf oreillyblog.

Was ist HTML5?

Inken Kiupel — Fri, 28 Jan 2011 10:23:36 +0000

HTML5 ist die neueste Version der Markup-Sprache, mit der die älteren Versionen HTML 4.01, XHTML 1.0 und XHTML 1.1 abgelöst werden sollen. Obwohl die Entwicklung noch nicht abgeschlossen ist, sind viele HTML5-Elemente schon jetzt einsetzbar. Zeit also, die Neuerungen zu erkunden und sich fit für die Zukunft zu machen. Um Websites anzeigen zu lassen, die in HTML5 geschrieben wurden, brauchen Besucher lediglich einen modernen Webbrowser. Die jüngsten Versionen von Apple Safari, Google Chrome, Mozilla Firefox und Opera unterstützen bereits viele HTML5-Funktionen. Mobile Webbrowser, die auf iPhones, iPads und Android-Handys von Haus aus installiert sind, bieten exzellente Unterstützung für HTML5. Auch Microsoft hat angekündigt, dass die anstehende Version 9 des Internet Explorer einige HTML5-Funktionalitäten unterstützen wird. HTML5 ist glücklicherweise weitgehend rückwärtskompatibel, d.h., auch User, die eine HTML5-basierte Seite mit älteren Browsern ansteuern, können sie ansehen und nutzen. Die neuen HTML5-Funktionen setzen auf bestehenden Funktionen auf und ermöglichen es so, Ersatzinhalte für ältere Browser anzubieten. Die wichtigsten Neuerungen in HTML5 auf einen Blick Neue semantische Elemente: Schon seit Langem gibt es Bestrebungen und Initiativen, die sich dafür …

Der Beitrag Was ist HTML5? erschien zuerst auf oreillyblog.