12.05.2014 | Tipps
Wie viele der Funktionen von HTML5 werden von Ihrem Browser unterstützt? Stetig arbeiten die Entwickler der großen Browser an neuen Features für Chrome, Firefox, Internet Explorer, Opera und Co. Sie wollen damit meist näher an die Vorgaben des W3-Konsortiums rücken. Dieses Konsortium legt fest, wie HTML sein soll.
Um Ihren Browser auf dessen HTML5-Fähigkeiten zu testen, genügt es, wenn Sie die Webseite https://html5test.com besuchen. Sie erhalten das Ergebnis dann in einer Übersicht. Unter der Punktezahl in groß sehen Sie auch im Detail, welche Funktionen von Ihrem Internetprogramm unterstützt werden, und bei welchen Features es Probleme gibt, da sie nicht oder nur teilweise genutzt werden können.
Extra-Tipp: Wenn Sie oben zum Tab „other browsers“ schalten, sehen Sie auch in der Übersicht, wie sich die Unterstützung von HTML5 im Verlauf der letzten Browserversionen entwickelt hat.
03.05.2014 | Tipps
Früher hat man HTML-Tabellen für alles Mögliche benutzt. Selbst wer heute Tabellen nur für tabellarische Zwecke verwendet, sollte den neusten Stand der Technik nutzen. Nicht-standardmäßige HTML-Attribute für Tabellen haben dabei ausgedient. Wie gehen Sie richtig vor?
Folgende Tabellen-Attribute sollten Sie als Web-Entwickler nicht mehr verwenden:
-
<table width="123">
Ersetzen Sie dieses Attribut durch den CSS-Stil:
table { width: 123px }
-
<table bgcolor="red">
Die Hintergrundfarbe lässt sich auch per CSS einstellen:
table { background: red }
-
<table cellpadding="2">
Die Abstände lassen sich über den CSS-Innenabstand der Zellen festlegen:
td { padding: 2px }
-
<table align="center">
Die horizontale Ausrichtung klappt auch wieder per CSS:
table { text-align: center; margin: 0 auto }
-
<table valign="top">
Auch die vertikale Ausrichtung in Zellen lässt sich als CSS-Stil definieren:
table { vertical-align: top }
Bauen Sie Ihre Webseite für die Zukunft und nutzen Sie CSS-Stile, um festzulegen, wie Tabellen im Browser dargestellt werden sollen. Mehr Infos finden Sie auch im Mozilla Developer Network unter: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table.
04.04.2014 | Tipps
Wer Webseiten programmiert, muss auf die Fähigkeiten der verschiedenen Browser Rücksicht nehmen. Welche neuen HTML- und CSS-Funktionen werden vom Internet Explorer bereits unterstützt?
Bei der Programmierung von modernen Webseiten hilft eine neue Referenz weiter, die vom IE-Team selbst erstellt wurde. Im Rahmen der Microsoft-Konferenz Build wurde sie vorgestellt. Unter https://status.modern.ie/ suchen Sie per Direkteingabe eine bestimmte HTML- oder CSS-Funktion und sehen auf Anhieb, ob der IE-Browser sie unterstützt, und wenn ja, ab welcher Internet-Explorer-Version sie eingesetzt werden kann.
In der Liste finden sich neben offiziellen neuen Standards auch Vorschläge, die in anderen Browsern bereits laufen – etwa zum Drag-und-Drop von Ordnern zusätzlich zu einzelnen Dateien. Für Web-Entwickler eine unverzichtbare Referenz zum schnellen Nachschlagen.
https://status.modern.ie/
21.03.2014 | Tipps
Die manchmal animierte Startseite der Microsoft-Suchmaschine Bing nutzt für die Animationen Webvideos, die in Schleife abgespielt werden (Beispiel). Wie speichern Sie solche und ähnliche Videos von Webseiten?
Voraussetzung für das Herunterladen von Webvideos ist, dass die Webseite sie direkt mit einem <video>-HTML-Tag abspielt – und nicht etwa mit einem Flash-basierten Player. Besonders einfach klappt das Abspeichern eines solchen HTML5-Videos mit dem Chrome-Browser.
Ähnlich wie beim Speichern von Bildern klicken Sie einfach mit der rechten Maustaste auf das betreffende Video und wählen dann „Video speichern unter…“. Wählen Sie dann den Download-Ordner und bestätigen mit Klick auf „Speichern“.
09.11.2013 | Tipps
In Windows 8.1 ist der Internet-Explorer-Browser 11 schon eingebaut. Jetzt hat Microsoft die aktualisierte Fassung des Internetprogramms auch für Windows 7 freigegeben. (mehr …)
17.05.2012 | Internet
Lange Zeit konnten Videos auf Webseiten nur mit dem Flash-Plug-in eingebettet werden. Mit HTML5 ist das anders: Filme können jetzt direkt vom Browser angezeigt werden. Zwei Standards haben sich etabliert: H.264 und Ogg Vorbis. Während der Mozilla Firefox-Browser sich auf Ogg bestens versteht, hat er mit H.264 (MP4) seine Probleme. Abhilfe gibt’s in Form eines Add-ons. Und das stammt ausgerechnet von – Microsoft. (mehr …)
20.04.2012 | Tipps
Die Sprache, aus der Webseiten gemacht sind – HTML, wird ständig weiterentwickelt. Was 1992 als Version 1.0 begann, ist mittlerweile schon bei Version 5 angelangt. Mit HTML5 bekommen Webentwickler zahlreiche neue Funktionen in die Hand. Zum Beispiel können Formulare schon vor dem Absenden auf Fehler geprüft und der Nutzer darauf hingewiesen werden. Klar, dass alte Browser mit so viel Neuem nicht klar kommen, so zum Beispiel der Internet Explorer 8.
Doch nicht jeder, der IE8 nutzt, kann den Browser aktualisieren. Sei es, weil in der Firma für Updates strenge Regeln bestehen – oder der Anwender nutzt Windows XP. Denn den neueren IE9 gibt es nur für Windows Vista und 7.
Per Javascript kann eine Webseite fast jedem Browser beibringen, wie HTML5 zu interpretieren ist. Der Berliner Programmierer Alexander Farkas hat sich dafür die Webshims-Bibliothek ausgedacht. Ist Webshims in eine Webseite eingebaut, fragt das Programm beim Laden der Seite den Browser, welche Funktionen er von Haus aus unterstützt. Fehlende Features werden dann nachträglich per Javascript nachgerüstet – und das in Internet Explorer 6 aufwärts.
Demo und Kurzanleitung stehen auf der Programmier-Plattform Github bereit. Die Webshims-Bibliothek steht unter der MIT-Lizenz und ist kostenlos in eigenen Projekten nutzbar.
14.04.2012 | Tipps
Auf vielen Webseiten findet man benutzerfreundliche Formulare: Der Cursor wird direkt beim Öffnen der Seite in das erste Textfeld gesetzt – beispielsweise der Benutzername eines Login-Formulars. Dazu war in der Vergangenheit Javascript nötig. Einfacher und direkter geht es mit HTML5.
Um auf Ihrer Webseite ein Formular mit einem Autofokus auszustatten, fügen Sie bei einem (und nur einem!) Formular-Element – also einem <input>, <select> oder einer <textarea> – das HTML5-Attribut autofocus=“autofocus“ hinzu. Durch diese Angabe weiß der Browser, dass er beim Laden der Seite den Textcursor (Fokus) in ebendieses Feld setzen soll. Das vollständige Element könnte zum Beispiel so aussehen:
Vorteil: Benutzer können sofort nach dem Laden der Seite drauflos tippen, ohne erst in das gewünschte Textfeld klicken zu müssen.
