HTML 5

Adobe-Boss versucht, Flash zukunftsfähig zu reden

Der Präsident und CEO von Adobe, Shantanu Narayen äußerte sich bei der Vorstellung der Quartalsergebnisse positiv zur Zukunft seines Produktes Flash. Flash wurde schon 1997 als interaktive, multimediale Lösung von Macromedia veröffentlicht. Die Firma wurde 2005 für 3,4 Milliarden US-Dollar von Adobe übernommen. Zu Beginn wurden Flash-Animationen überwiegend als Intros vor Webauftritte geschaltet – eine seit einigen Jahren ziemlich überlebte Nutzung. Heute ist die Hauptnutzung beim Streamen von Videodateien und bei animierten Werbebannern zu sehen. Da Flash eine proprietäre Lösung ist und ohne ein passendes Plugin für den Browser nicht läuft, aber auch wegen des schlechten Umgangs von Flash mit den Ressourcen warten die Entwickler von Internetseiten schon lange auf freie Alternativen, deren Zeit jetzt mit HTML 5 gekommen ist. Und damit ist die Zeit von Flash vorbei, selbst wenn der Adobe-Vorstand das noch nicht sehen will. Auf Apple's neuen iPhones und iPads läuft Flash nicht mehr, so dass deren Nutzer nach Angaben von Adobe auf 70-75% der Online-Videos und Webspiele verzichten müssen. Wohlweislich redet Adobe nicht darüber, dass Videostreamer wie YouTube oder Vimeo schon flashfreie Videoplayer anbieten, die die Videos ohne Adobe-Unterstützung abspielen. Adobe selbst nutzt inzwischen übrigens auch immer mehr HTML 5. ;)

GSL-Team2011-06-23T09:02:47+02:00Juni 23rd, 2011|Allgemein|Kommentare deaktiviert

Google Apps nur noch mit HTML 5-fähigen Browsern

Man konnte es im Docs Blog, im Enterprise Blog und im Gmail Blog der Fa. Google nachlesen: Google wird die Unterstützung für ältere Browser ohne HTML 5 bei den Google Apps aufgeben. Das sind im einzelnen Firefox 3.5, Internet Explorer 7 und Safari 3. Mit diesen älteren Browsern bekommt man Probleme mit einigen Funktionen zum Beispiel in Gmail, Google Calender, Google Docs oder Google Sites. Es könnte sogar passieren, dass diese Anwendungen mit den älteren Browsern überhaupt nicht mehr arbeiten. Stattdessen empfiehl Google die aktuellsten Versionen der Browser Chrome, Firefox, Internet Explorer und Safari. Der Branchenriese bezeichnet diese neuen Browser nicht nur als modernen Komfort, sondern als Notwendigkeit für die Zukunft.

GSL-Team2011-06-06T07:38:02+02:00Juni 6th, 2011|Allgemein, HTML|Kommentare deaktiviert

HTML 5: Optimales Einbinden von Videos in HTML 5

Wenn ein Video auf Ihrer HTML 5-Website möglichst in allen Browsern, die HTML 5 unterstützen, ablaufen soll, brauchen Sie die Video-Datei in drei verschiedenen Formaten: MPEG4, OGV und WEBM. Zur Umwandlung Ihres Videos in die entsprechenden Formate können Sie Freeware-Tools wie zum Beispiel XMedia Recode verwenden. Die Einbindung des Videos in die Internetseite wird mit dem <video> - Tag realisiert: <video preload controls width=300 height=177 poster= suleitec.jpg> <source src=suleitec.mp4 type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src= suleitec.ogv type='video/ogg; codecs="theora, vorbis"'> <source src= suleitec.webm type='video/webm; codecs="vp8, vorbis"'> Leider kann Ihr Browser das Video nicht zeigen. </video> Mit der preload-Option wird die Videodatei vorgeladen und die controls-Option sorgt für die Darstellung der Steuerelemente (Start, Pause, Stopp usw.). Mit der poster-Option kann man ein Vorschaubild des Videos anzeigen.

GSL-Team2011-05-05T08:52:15+02:00Mai 5th, 2011|Allgemein|Kommentare deaktiviert

Multiple File Upload in HTML 5

Eine der netten Neuerungen in HTML 5 ist die Möglichkeit, mehrere Dateien über ein Dateieingabefeld hoch zu laden. Man braucht zwar dazu einen Browser, der HTML 5 so weit unterstützt, aber das werden ja immer mehr wie Firefox 4, der neueste Chrome von Google oder Safari 5.0.4. Der Internet Explorer 9 kann es leider noch nicht. Im Grunde ist die Programmierung des HTML 5 – Formulars recht einfach: <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>HTML5 Mehrfach-Dateiupload</title> <link rel="stylesheet" href="scr.css" media="screen"> <style media="screen"></style> </head> <body> <form action="anzeige.php" method="post" enctype="multipart/form-data"> <input type="file" value="" name="upload[]" multiple> <button type="submit">Hochladen</button> </form> </body> </html> Wenn dann der Auswahldialog kommt, kann man mehrere Dateien (zum Beispiel Fotos) markieren, die dann über das Dateieingabefeld "upload[]" zum Server übertragen werden, wenn man die Schaltfläche "Hochladen" anklickt. Das dadurch aufgerufene PHP – Programm "anzeige.php" gibt einfach nur die Inhalte des $_FILES-Arrays aus, so dass man die übertragenen Dateien sehen kann: <?php print_r( $_FILES ); ?>

GSL-Team2011-04-25T09:51:57+02:00April 25th, 2011|Allgemein|Kommentare deaktiviert

Firefox 4 vor Internet Explorer 9

Der seit vorgestern erhältliche neue Firefox 4-Browser scheint den Surfern besser zu gefallen als Microsofts neuer Internet Explorer 9. Während der Microsoft-Browser in den ersten 24 Stunden nach Freigabe 2,3 Millionen Mal heruntergeladen wurde, holten sich den Firefox 4 in diesem Zeitraum mehr als doppelt so viele Interessenten. Mozillas Firefox 4 ist besonders in Europa gefragt, und in Europa wurde er aus Deutschland am häufigsten abgerufen. Bleibt zu hoffen, dass bei der Erstellung von Webseiten durch die Browser der neuen Generationen weitgehend auf Browserweichen und Ähnliches verzichtet werden kann, denn alle bemühen sich, Standards wie CSS 3 oder HTML 5 korrekt zu unterstützen.

GSL-Team2011-03-24T08:55:49+02:00März 24th, 2011|Allgemein|Kommentare deaktiviert

Bewegendes HTML 5

Flash ist eins der meist installierten Plugins für Webbrowser. Adobe hat mit Flash nahezu einen Standard für Animationen auf Internetseiten erzeugt. Flash gibt dem Ersteller von Webseiten viele Möglichkeiten, belastet aber auch den PC sehr stark und es läuft vor allem nur mit dem Flash-Plugin von Adobe. Hier kann das neue Element Canvas in HTML 5 eine Wende einleiten, die meisten Browser unterstützen schon HTML 5. Spätestens, wenn der Internet-Explorer 9 von Microsoft, der HTML 5 dann auch beherrscht, verfügbar ist, wird Canvas bei der Webseiten-Gestaltung eine immer größere Rolle spielen und das proprietäre, ressourcenhungrige Flash auf die Plätze verweisen. Eine Schlüsselrolle spielt dabei auch die Fa. Apple, auf deren iPhones und iPads wegwn des Ressourcenhungers Flash nicht unterstützt wird. Interessanterweise hat Apple auch das Canvas-Element bei der Entwicklung der Webkit-Engine eingeführt und standardisiert, so dass es Bestandteil von HTML 5 wurde.

GSL-Team2010-12-30T23:50:10+02:00Dezember 30th, 2010|Allgemein|Kommentare deaktiviert

Was gibt es nicht mehr mit HTML 5?

HTML 5 hält zusammen mit CSS 3 viele Neuerungen für uns bereit. Allerdings musste auch einiges Altes dafür weichen. Das Beginnt mit dem Ende von <applet> und einigen Textauszeichnungen, nämlich <big>, <strike>,<tt>, <u> und <s>. Das Tag <acronym> ließ sich kaum von <abbr> (Abkürzung) unterscheiden. Auch <dir> und <isindex> stammen aus einer anderen Zeit und sind jetzt nicht mehr dabei. Die Tags <center>, <font> und <basefont> gibt es nicht mehr. Auch die Attribute wurden ausgedünnt. Das Attribut name gibt es jetzt nur noch bei Formular-Elementen, und die Attribute width, height, align und border wurden wie auch andere stark eingeschränkt. Und endlich sind auch die leidigen Frames Geschichte. Bei aktuellen Seiten kommen sie sowieso kaum noch vor. Und wenn man unbedingt Frames braucht, kann man sie mit dem <iframe>-Tag nachbauen, denn das soll es weiterhin geben.

GSL-Team2010-08-27T07:57:20+02:00August 27th, 2010|Allgemein|Kommentare deaktiviert

Neue Formulare mit HTML 5

Eine der Grundlagen von HTML 5 hieß Web Forms 2.0. Auf dieser Basis wurden die Formularmöglichkeiten von HTML stark erweitert. Die meisten Neuerungen kommen als diverse neue Attributwerte von <input type="…"> daher. Bis dato konnte man damit nur Textfelder, Checkboxen, Radiobuttons und Submit-Schaltflächen erzeugen, jetzt gibt es viele Spezialvarianten wie number, tel, url, color oder email. Opera zum Beispiel erkennt diese Typen heute schon und hält dazu Eingabehilfen wie die Pfeiltasten zum herauf- und herunterzählen beim Typ "number" vor. Der Vorteil der neuen Datums- und Zeitfelder wie datetime, datetime-local, date, month, week oder time ist offensichtlich: Der Browser stellt dabei eine Datumsauswahl als kleinen Kalender dar, über den man das Datum "picken" kann. Die Uhrzeiten werden über Pfeiltasten eingestellt. Selbst Schieberegler und Comboboxen kann man jetzt ohne Javascript erzeugen. Eine Auswahl von URLs läßt sich zum Beispiel so realisieren: <input list="webseiten"> <datalist> <option value=https://www.homepage-anleitung.de> <option value=http://www.webwork-magazin.net> </datalist>

GSL-Team2010-11-21T23:17:47+02:00August 26th, 2010|Allgemein|Kommentare deaktiviert

Mit HTML 5 zeichnen

Canvas heißt die Technik, mit der man direkt im Browser zeichnen kann. Canvas heißt Leinwand – der Name passt also für die Grafiken, die über die Javascript-Schnittstlle kontrolliert werden. Hier ein Canvas-Beispiel, das einen Kreis malt: <canvas id="kreis" width="200" height="200">Ihr Browser kann noch kein Canvas!</canvas> <script> var canvas = document.getElementById('kreis'); if (canvas.getContext) { var c 0 canvas.getContext('2d'); c.beginPath(); c.arc(75,75,50,0,Math.PI*2,true); c.fill(); } </script> Die Steuerung durch Javascript macht Canvas besonders für Animationen bis hin zu kompletten Browserspielen interessant. Die Webkit-Entwickler, denen wir Canvas verdanken, arbeiten sogar daran, die Grafikbibliothek OpenGL ES mit Canvas ansprechen zu können. Mit dieser Variante sind dann nicht direkt zur HTML-Spezifikation zählt, lassen sich dann dreidimensionale Objekte im Browser darstellen und animieren.

GSL-Team2010-08-23T08:31:07+02:00August 23rd, 2010|Allgemein|1 Kommentar

HTML 5: Web-Video ohne Plugins

HTML 5 bringt natürlich mehr als nur semantische Tags. Eines der neuen Features ist das <video> - Tag. Damit können endlich Audio- und Videoclips auf Webseiten angeboten werden, die der Besucher ohne irgendein Plugin abspielen kann. Web-Video mit HTML 5 ist wirklich sehr einfach einsetzbar. Mit <video src=“meinvideo.mp4“ controls> ist der bewegte Inhalt schon abrufbar. Mit einem Startbild, das man gene benutzt, wenn der Inhalt von einem anderen Server kommt, sieht es dann so aus: <video width = “640“ height = “480“ src = http://www.meinserver.de/pfad/meinvideo.mp4“ autobuffer controls poster = meinstartbild.png”> Das Microsoft mit HTML 5 am weitesten zurück liegt, verwundert eigentlich niemanden. Selbst der aktuelle Browser Internet Explorer 8 kann HTML 5 – Elemente nativ nicht unterstützen. Aber es gibt Möglichkeiten, auch dem Microsoft-Browser das neue HTML beizubringen. Damit Sie wissen, bei welchen Plattformen man beim Einsatz von Webvideos mit HTML 5 eventuell nacharbeiten muss, haben wir hier eine kurze Übersicht der wichtigsten Browser bezüglich ihrer Fähigkeit, mit dem <video> - Tag umgehen zu können: + Google Chrome + Firefox 3.5 + Safari 3 + Opera 10.5 - Internet Explorer 7 - Internet Explorer 8

GSL-Team2010-07-18T10:01:17+02:00Juli 19th, 2010|Allgemein|1 Kommentar