Alle Artikel mit dem Schlagwort: HTML5

Responsive Webdesign von Kopf bis Fuß

Veröffentlicht von Alexander Plaum

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

Multimediatreff am 3. Dezember in Köln

Veröffentlicht von Alexander Plaum

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.  

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

Veröffentlicht von Viviane Kramer

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 …

Was ist CSS3?

Veröffentlicht von Viviane Kramer

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 …

Was ist Canvas?

Veröffentlicht von Inken Kiupel

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 …