ABC des HTML5

<audio> –  Bisher hatte man immer auf zusätzliche Plugins für eine Audio Wiedergabe setzen müssen. Sowie auf der Hoffnung das der Besucher dieses Plugin bereits installiert hat bzw. es noch tun wird. Diese Zeiten sind nun entgültig vorbei. HTML5 bringt den <audio>-Tag mit und so endlich einen Standard für alle moderne Browser. Hier wurde teilweise auf Flash gesetzt was nun ebenfalls vorbei ist.
<basefront>, <big> – Elemente wie <big> und <basefront> sind aus der HTML Spezifikation rausgeflogen. Das ist nicht besonders verwunderlich schließlich soll das Layout/Design möglichst von den eigentlichen Inhalt getrennt werden. Für sämtlichen Formatierungen soll CSS3 verwendet werden. Siehe auch nächster Buchstabe ;).
CSS3 – Die Spezifikation von HTML5 erlaubt keine Elemente wie z. B. <big> und <font> stattdessen sollen alle Layout / Design Technische Elemente durch CSS3 ersetzt werden.CSS3 kann im Vergleich zu seinen Vorgänger CSS2.1 einiges mehr, darunter 3D-Elemente, Textschatten, @font-face und Farbverläufe.
<datalist> – <datalist> ist ein neuer Tag den man in Verbindung mit <input>’s verwenden kann. Man kann im Quelltext verschiedene Begriffe hinterlegen. Schreibt man nun etwas in das Eingabefeld und sind die Anfangsbuchstaben gleich, wird dieser Begriff in der Auswahliste darunter (oder über das Eingabefeld wenn nach unten kein Platz ist) angezeigt und lässt sich auswählen. Ein Beispiel ist bei Mozilla zu finden. Dank diesen neuen Tag muss man für eine solche einfache Funktion keine Javascript Biblotheken wie z. B. jQuery mehr einsetzen (außer für Abwärtskompatibilität in der nächsten Zeit).
<embed>– Na nu? Einige werden sich nun wundern das dieses Element hier auftaucht, schließlich gibt es diesen Tag doch schon viel länger? Das stimmt zwar, als Standard anerkannt wurde es jedoch erst mit HTML5 und so ist hier durchaus an der richtigen Stelle. Der Tag wird für das einbinden von Dateien, für die zusätzliche Plugins benötigt werden, benutzt.
<footer> – <footer> wird innerhalb von <body> eingesetzt und umfasst den gesamten Footer der Webseite.
Google – Google ist Mitglied in der WHATWG, die zusammen mit den W3C an den Standard’s wie HTML5 und CSS3 arbeiten. Das Google viel von HTML5 hält zeigt sich auch darin, das die verschiedenen Funktionen von HTML5 auf  http://html5rocks.com von Google präsentiert werden. Auf Youtube kann bereits der HTML5-Player getestet werden. Jedoch lassen sich damit noch nicht alle Videos abspielen und es wird so trotzdem noch Flash benötigt.
<header>Vorsicht:  Der neue <header>-Tag sollte keinenfalls mit <head> verwechselt werden!<head> gibt es auch weiterhin unverändert. <header> wird innerhalb von <body> eingesetzt und beinhaltet den gesamten Kopfbereich (= Header) der Seite, z. B. das Logo mit eine Navi.
<iframe> – Dies wird wohl niemanden besonders überraschen – nachdem Frames bei vielen verflucht sind und absolut nichts mit modernen Designs zu tun hat sind die Frames entgültig aus der Spezifikation rausgeflogen. Nur das <iframe> hat überlebt, da es hierfür keinen Ersatz auf HTML Basis gibt.
Javascript – HTML5, CSS3 und Javascript sollen die neuen Webstandards werden und sämtliche Multimedia Inhalte anzeigen und verarbeiten können. Damit werden wohl auch die aller letzten Stimmen untergehen die meinen Javascript wäre eine Spielerei. Ohne Javascript geht heutzutage fast keine Website mehr fehlerfrei (… wenn sie überhaupt noch geht).
 <keygen> – Dieses Element wird innerhalb eines Fomulars genutzt. Es verschlüsselt die Eingabe und speichert den Hash im Browser. Der unverschlüsselte Wert wird an den Server gesendet.
loop Attribut – Das loop Attribut kann bei <audio> und <video> eingesetzt werden und ermöglicht das die Audio Datei oder das Video immer wieder wiederholt werden. Das ist zum Beispiel für Hindergrundmusik nützlich.
<mark> – Mit den <mark> Tag kann man Textstellen farblich hervorheben.
<nav>–     <nav> ist eine weiteres neues Element das einen bestimmten Bereich umfasst. Die Navigation sollte in Zukunft zwischen <nav> und </nav> zu finden sein.Diese neue Elemente sollen für mehr Übersicht sorgen. Es werden schließlich viel weniger <div>’s für eine Seite gebraucht als früher. Auch soll es z. B. Suchmaschienen leichter gemacht werden den Inhalt zu scannen und analysieren.
<output> – Das <output> Element zeigt das Ergebnis einer Kalkulation an.
<progress> – Um eine Fortschrittsanzeige darzustellen kann <progress> eingesetzt werden. Mit den Attribut „form“ kann angegeben werden zu welchen Objekt die Fortschrittsanzeige gehört. Mit „max“ wird festgelegt was das maximale Ziel des Fortschritts ist und mit „value“ wird der erreichte Fortschritt bestimmt. Ein Beispiel kann bei Mozilla angeschaut werden, dazu muss ihr Browser natürlich das Element unterstützen.
Quatsch – Q wie Quatsch – wer etwas quatsch sinnvoles für diesen Buchstaben findet ist wirklich gut. Schreibt es in den Kommentaren ;).
required – Das required Attribut für <input>, <textarea> und <select> „sagt“ den Browser das die Webseite für dieses Feld umbedingt einen Angabe braucht. Das ist sinnvoll für Pflichtfelder. Eine Serverseitige Überprüfung muss jedoch immer stattfinden!
Storage – Es gibt den Local und Session Storage. Website haben die Möglichkeit Daten in diesen Storage (= Speicher) zu speichern. Während die Daten im Session Storage gelöscht werden sobald den Browser beendet wird, bleiben die Daten im Local Storage solange enthalten, bis die Website die Daten löscht oder der Besucher der Seite dies selbst tut.
<time> – Zwischen <time> und </time> wird einfach ein Datum und/oder eine Uhrzeit geschrieben, mehr macht dieses Element nicht. Da es nicht unbedingt notwendig ist wird es aktuell auch noch von keinen Browser unterstützt (zumindest habe ich nicht davon erfahren, ihr könnt ja einen Browser der dies unterstützt in den Kommentaren schreiben). Der einzige Mehrwert dürfe wohl sein, dass Suchmaschienen oder Scripte aller Art feststellen können wie alt der jeweilige Inhalt ist.
Wert url bei dem Atrribut type für <input>’s – HTML5 bringen eine ganze Reihe neuer möglichen Werte für das „type“ Attribut bei <input>’s mit. Einer dieser Werten ist „url“. Wie der Name bereits sagt, ist dieses Eingabefeld dann für URL’s bestimmt. Der Browser hat so die Möglichkeit die Eingabe vor den Absenden zu überprüfen und den Benutzer darauf hinzuweisen. So können fehlerhafte Eingaben verhindern werden. Jedoch gilt auch hier: Dies ist kein Ersatz für eine Serverseitige Überprüfung!
<video> – Bei dem neuen <video> Tag ist es ähnlich wie mit den <audio> Tag: Es ist endlich möglich Videos ohne zusätzliche Plugins abzuspielen!
W3C; WHATWG – Die WHATWG ist ein Zusammenschluss von Browserherstellern wie Mozilla, Microsoft, Apple und Google. Das W3C ist dafür zuständig Webstandards zu definieren. Tim Berners-Lee ist der Vorsitzende des W3C und der Erfinder von HTML. Während das W3C an einer Weiterentwicklung von XML gearbeitet hat, wollte die WHATWG eine Weiterentwicklung von HTML als Standard durchsetzen. Schließlich wurden die Arbeiten an XML 2.0 eingestellt und beide Gruppen arbeiten seit dem an HTML5.
Das Unbekannte – HTML5 wird voraussichtlich erst 2014 fertiggestellt. Bis zu diesem Zeitpunkt kann sich theoretisch noch alles ändern. Da HTML5 bereits sehr bekannt ist, wird sich das W3C aber hüten Elemente komplett zu verändern.
Yahoo! – Die neue mobile Yahoo! Mail Website, welche auf dem iPod Touch, iPhone und iPad funktionieren soll, setzt bereits auf HTML5 um möglichst viele Funktionen ohne zusätzliche Programme zu ermöglichen.
Ende dieser Liste – Ende von Flash? In Zukunft wird, wenn es um Videos und Audio Dateien geht, HTML5 eingesetzt. In diesen Bereichen ist heutzutage Flash weit verbreitet. Ist das der Untergang von Flash? Zu diesem Thema möchte ich einen eigenen Artikel schreiben, der in Kürze folgen wird.

 

Vereist, oder doch nicht?

Nachdem es nun schon ein paar Tage her ist, als ich über meine Arbeit bei dem Chat berichtet habe, kommen hier nun weitere Informationen.

Der Chat wird komplett auf HTML5, CSS3 sowie Javascript setzen. Serverseitig wird PHP und MySQL eingesetzt. Später folgt eventuell auch eine PostgreSQL Unterstützung. Der Inhalt wird über Ajax geladen, sowie auch gesendet. Um zusätzliche Traffic einzusparen, wird jede Nachricht nur einmal geladen. Allerdings gibt es hierbei Ausnahmen: Wird eine Nachricht von einen Admin oder einen Moderator gelöscht, werden die neusten Nachrichten neu geladen (und die alten verschwinden). Der Benutzer kann dabei natürlich die Seite auch manuell neu laden, dann passiert dasselbe wie, wenn eine Nachricht gelöscht wird. Ich möchte an dieser Stelle noch einmal betonen, dass der Chat sich in einer sehr frühen Entwicklungsphase befindet. Später sollen die gelöschten Nachrichten per Javascript bei den Benutzern, die diese Nachricht sehen, entfernt werden.

Da ich diesen Chat irgendwie nennen muss, ist der vorläufige Name Icy Chat (zu dt. vereister Chat). Auch dies kann sich schnell ändern.

Ein großer Schwerpunkt lege ich auf Anpassbarkeit sowie eine leichte Bedingung. Ich möchte Plugins und Templates sowie Sprachpakete ermöglichen. Damit könnte man den Chat praktisch komplett anpassen und nach den eigenen Wünschen gestalten. Der Chat sollte außerdem nicht zu überladen wirken und selbsterklärend sein. Aus dem nichts so etwas zu erschaffen dauert seine Zeit. Zudem kann sich im Moment noch alles verändern und nichts ist sicher. Sicher sind nur meine Ziele für den Chat.

In einen der nächsten Berichte werde ich erste Screenshots von dem Chat veröffentlichen.

Werde Fan und verfolge uns ;).

Elf stylische CSS3 Buttons

Der Blog „Red Team Design“ (Englisch) hat ein tolles Beispiel veröffentlicht, wie man professionelle, aber trotzdem schlichte Buttons mit CSS3 erstellt. Die Buttons haben einen Farbverlauf, abgerundete Ecken und ein Icon.

CSS3 Buttons
CSS3 Icons

Das Besondere an diesen Buttons befindet sich im Quelltext. Wie man auf den Vorschau Bild sehen kann haben die Buttons Icons. Dies sind jedoch keine Bilder! Das hat den Vorteil, dass weniger Traffic entsteht und die Seite schneller lädt.

Jedoch sehen die Icons in jedem Browser anders aus, oder noch schlimmer, sie werden erst gar nicht angezeigt. Wer hierbei sofort an den Internet Explorer gedacht hat, liegt wieder einmal richtig. Wobei und so viel muss man den IE diesmal lassen, ab den IE8 werden die Icons angezeigt, wenn leider auch verzerrt. Im IE7 funktioniert zwar noch der Button, aber es wird kein Icon angezeigt. Der IE6 dagegen kommt mit diesen Buttons überhaupt nicht klar. Microsoft hat für den Internet Explorer viele Jahre lang Kritik bekommen und hat es sich zum Ziel gesetzt, diesen Rückstand auszugleichen. Der IE9 war ein Schritt in der richtigen Richtung, wie man auch bei diesen Icons feststellen kann. In der neuen Version werden die Icons nämlich so angezeigt, wie es sein sollte.

In dem Artikel findet man auch den gesamten Quellcode, der für diese Buttons nötig ist.