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.
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.
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.
Sicher haben Sie schon gehört, dass Sie neuerdings Bilder der Agentur Getty Images auf eigenen Webseiten verwenden dürfen, wenn Sie sie dort einbetten. Hier die nötigen Schritte, um ein Bild auf Ihrer eigenen Seite einzubetten.
Als Erstes suchen Sie nach dem gewünschten Motiv. Im Beispiel nutzen wir das Foto eines Papageientauchers (gty.im/141849797).
Unter dem Vorschaubild klicken Sie auf das Einbette-Zeichen („</>“).
Kopieren Sie jetzt den angezeigten HTML-Code, und fügen Sie ihn in Ihre eigene Webseite ein.
Wie die Sprache von Webseiten dargestellt werden soll, ist eigentlich im HTML-Standard definiert. Allerdings gibt es trotzdem Unterschiede – je nachdem, welchen Browser man verwendet. Damit Sie es als Web-Entwickler einfacher haben, können Sie das Aussehen von HTML und CSS vereinheitlichen.
Nutzen Sie dazu ein sogenanntes Reset-Stylesheet. Das ist eine CSS-Datei, in der festgelegt wird, wie jedes HTML-Element (Tag) dargestellt werden soll. So werden die Standard-Stile der einzelnen Browser angeglichen. Dazu binden Sie die reset.css in Ihre Webseite ein, bevor Sie Ihr eigenes Stylesheet laden:
Wer ein eigenes Blog oder eine Webseite betreibt, der steht immer wieder vor einem Problem: Gute Fotos zu bekommen. Denn Webseiten machen einfach mehr Eindruck, wenn es auch gute Fotos gibt. Nur: Wo herbekommen? Nur die wenigsten können selbst gute Fotos machen. Einfach Fotos aus dem Netz kopieren, das geht nicht, da droht eine Abmahnung.
Deshalb bedienen sich die meisten bei Online-Fotodatenbanken, die für kleines Geld Lizenzen von Fotos verkaufen. Doch jetzt hat eine der ganz großen Fotoagenturen einen Coup gelandet: Rund 35 Millionen Fotos der Agentur Getty Images stehen plötzlich kostenlos zur Verfügung – fürs Web. Aber das findet nicht nur begeisterten Zuspruch.
Wie genau sieht das Angebot aus, das Getty Images da macht, was steckt dahinter?
Getty Images ist eigentlich eine Profi-Bildagentur und nicht gerade dafür bekannt, seine Fotos zu verramschen, geschweige sie kostenlos herzugeben. Deshalb waren viele überrascht, was Getty da vorhat. Das Angebot sieht so aus: Rund 35 Millionen Fotos aus der Datenbank, das sind keineswegs alle, können in Webseiten oder Blogs kostenlos verwendet werden. Dazu muss man auf der Webseite nach den passenden Fotos suchen, und wenn sie entsprechend gekennzeichnet sind, darf man sie verwenden. Dazu muss man einen HTML-Code kopieren. Die Fotos sind dann in den Webseiten oder Blogs zu sehen, aber bleiben technisch gesehen auf den Servern von Getty Images gespeichert.
Ist das einfach zu bewerkstelligen?
Im Grunde genommen schon. Man fügt einen sogenannten Embed-Code in die Webseite ein, das funktioniert genauso wie bei Youtube oder Soundcloud. Wer eine eigene Webseite betreibt, kennt das – so etwas dauert nur Sekunden.
Kann man die Fotos frei verwenden?
Getty Images schreibt eine Menge vor. Die Größe lässt sich nur sehr eingeschränkt verändern, zum Beispiel. Es gibt auch Hinweise auf den Urheber, klar, und einen Backlink zu Getty Images. Es sieht also anders aus, als ob man eigene Fotos oder Bilder in die Webseite integriert. Man erkennt gleich, dass der Inhalt von woanders kommt.
Aber was muss man beachten, wer darf das Angebot nutzen?
Getty Images erlaubt die kostenlose Nutzung für den nicht-kommerziellen Einsatz. Ausdrücklich ausgeschlossen sind Werbung, Marketing für Produkte sowie alle Bereiche, wo die Fotos nicht illustrativ eingesetzt werden. Es braucht also schon ein gewisses redaktionelles Umfeld. Die Fotos in Blogs einzusetzen ist OK. Selbst dann, wenn der Blogger mit dem Angebot Geld verdient. Da waren manche anfangs verwirrt, aber Getty Images hat klargestellt, dass das in Ordnung geht. Rechtlich eindeutig formuliert ist das allerdings nicht.
Aber was hat Getty Images davon, wo liegt der Nutzen für den Anbieter?
Getty Images verspricht sich eine Werbewirkung für die Foto-Agentur. Wenn überall im Web Fotos der Agentur zu sehen sind, die Herkunft ist ja ausdrücklich zu erkennen, dann greifen vielleicht auch manche auf die Profidienste zurück und lizensieren Fotos. Die dürfen dann auch ohne Embed-Code verwendet werden, wenn man dafür entsprechend bezahlt.
Darüber hinaus hat Getty Images aber offensichtlich auch vor, Werbung zu schalten. Durch die Einbindung in die fremden Webseiten hätte das Unternehmen die Möglichkeit, dort anstatt der Fotos auch Werbung zu präsentieren. In den Nutzungsbedingungen ist das ausdrücklich so vereinbart. Youtube-Videos waren anfangs auch werbefrei, mittlerweile ist vielen Videos ein Werbespot vorangestellt. Dann will Getty Images aber offensichtlich auch Daten sammeln und auswerten.
Der Punkt wird von vielen Bloggern kritisiert: Getty Images räumt sich selbst eine Menge Rechte ein, was die anfallenden Daten betrifft. Was wird konkret kritisiert?
In der Tat lesen sich die Nutzungsbedingungen so, dass Getty Images eine Menge darf. Wenn überall Fotos eingebunden sind, kann das Unternehmen eine Menge Daten sammeln. Und zwar von allen Webseiten, wo die Bilder eingebunden sind – aber auch von den Menschen, die sich diese Bilder anschauen und womöglich gar nicht merken, dass dort Bilder der Agentur enthalten sind und dass Daten gesammelt werden. Was mit den Daten genau passiert und wozu die Daten genutzt werden, verrät Getty Images bislang nicht. Das hat zur Folge, dass viele Blogger von dem Angebot lieber die Finger lassen. Sie wollen kein rechtliches Risiko eingehen und auch ihre Besucher nicht ausspionieren lassen. Obwohl das Angebot interessant klingt, überwiegt gerade die Skepsis.
Unterm Strich: Ein interessantes Angebot, das Nachahmer finden wird?
Die Idee finde ich gut, die Umsetzung ist auch gelungen und das Bildangebot von Getty Images wirklich beeindruckend. Aber die Nutzungsbedingungen sind im Augenblick wirklich noch zu heikel. Da muss Getty Images nachbessern. Insgesamt führt es aber sicher dazu, dass sich auch andere Online-Bildagenturen überlegen, ihre Inhalte kostenlos zur Verfügung zu stellen. Ich denke, Getty Images hat da etwas in Bewegung gesetzt.
Als Entwickler einer Webseite steht man vor der Aufgabe, die Seite mit möglichst vielen Browsern kompatibel zu halten. Eigentlich wäre dazu eine Armee von Computern nötig, um die verschiedenen Betriebssysteme testen zu können. Mit Browserstack geht das einfacher. Was aber, wenn die Adresse nur in Ihrem Intranet erreichbar ist?
Browserstack ist ein Gratis-Onlinedienst, mit dem Sie Browser aus der Ferne nutzen können. Normalerweise können diese Browser nur Webseiten laden, deren URL öffentlich erreichbar ist. Hier kommt das lokale Testen ins Spiel. Mit einer Browser-Erweiterung (für Firefox/Chrome) oder einem Hilfsprogramm (für IE und andere Browser) klappt der Zugriff auf URLs, die eigentlich nur lokal zu erreichen sind (zum Beispiel aufgrund von Firewalls).
Um lokales Testen zu verwenden, einfach bei www.browserstack.com einloggen und auf „Local Testing“ klicken. Anschließend müssen Sie – je nach Browser – die Genehmigung zum Hinzufügen einer Erweiterung geben.
Es gibt Entwickler, die legen großen Wert darauf, dass Programmcode ordentlich aussieht. Im Eifer des Gefechts hat man aber nicht immer Zeit, auf korrekte Einrückungen, Leerzeichen und Klammerung zu achten. Für diesen Fall gibt’s den JavaScript-Beautifier. (mehr …)
