Tag-Archive for » HTML 5 «

Was gibt es nicht mehr mit HTML 5?

By dmi · 27. August 2010

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.

Category: Allgemein  Tags: , , ,  Leave a Comment

Neue Formulare mit HTML 5

By dmi · 26. August 2010

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=http://www.homepage-anleitung.de>
<option value=http://www.webwork-magazin.net>
</datalist>

Category: Allgemein  Tags: , ,  Leave a Comment

Mit HTML 5 zeichnen

By dmi · 23. August 2010

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.

Category: Allgemein  Tags: , ,  Leave a Comment

HTML 5: Web-Video ohne Plugins

By dmi · 19. Juli 2010

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

Category: Allgemein  Tags: , ,  Leave a Comment

HTML 5 zum Zweiten

By dmi · 12. Juli 2010

In allen moderneren Webbrowsern außer dem Internet Explorer 8 laufen HTML 5 – Seiten mit CSS 3 problemlos. Da aber viele Surfer noch steinzeitliche Browser benutzen, gibt es Möglichkeiten, diese zur Zusammenarbeit mit der Kombination HTML 5 / CSS 3 zu bringen.

Da der Internet Explorer 8 CSS-Deklarationen für HTML-Elemente, die er nicht kennt, einfach ignoriert, hilft ein Workaround, der die Elemente zur Laufzeit mittels Javascript erzeugt:

<script>
document.create.element(‘header‘);
document.create.element(‘nav‘);
document.create.element(‘section‘);
document.create.element(‘article‘);
document.create.element(‘aside‘);
document.create.element(‘footer‘);
</script>

Zum Testen der per Javascript erzeugten DOM-Elemente können Sie eine einfache HTML 5-Seite benutzen:

<!doctype html>
<html>
<head>
<title> HTML 5 wird getestet…</title>
<style type=“text/css“>css3.css</style>
</head>
<body>

<header>Der Test beginnt mit einer Überschrift</header>

<nav>
<ul>
<li>Home</li>
<li>Impressum</li>

<li>Kontakt</li>
</nav>

<section>
<h1> Erster Bereich</h1>
<article> Dies ist der erste Artikel…</article>
</section>

<footer>
<p>Hier steht der Inhalt der Fußzeile</p>
</footer>

</body>
</html>

Ein weiteres Hilfsmittel, mit dem man die alten Microsoft-Browser Internet Explorer 6, 7 und 8 auf HTML 5-Kompatibilität bringen kann, ist das Plugin Google Chrome Frame. Das Plugin ist kostenlos, aber es ist aus der Erfahrung nicht einfach, seine Besucher davon zu überzeugen, dies Plugin zu installieren. Mit diesem Plugin brauchen Sie die oben beschriebene Erzeugung der fehlenden DOM-Elemente per Javascript nicht mehr durchführen.

Category: Allgemein  Tags: , ,  Leave a Comment

HTML 5 zum Ersten

By dmi · 8. Juli 2010

Keine Frage – HTML 5 ist im Anmarsch. Es gibt zwar noch keine finale Version der neuen Markup-Sprache fürs Web, aber im Grunde ist der neue Standard einsatzbereit. Ein guter Anlass, sich das jetzt nicht nur anzuschauen, sondern auch aktiv zu werden und die erste eigene Seite mit HTML 5 und CSS 3 zu entwickeln.

HTML 5 bringt viele neue Funktionen und Möglichkeiten. Aber nichts ist so anders wie die neuen semantischen Tags. Dadurch wird es für Suchmaschinen, aber auch für Ihren Browser überhaupt erst möglich, sich ein Bild von den Inhalten der Website zu machen, den immer häufiger zum Surfen benutzten Smartphones wird die Navigation durch die Site erleichtert oder gar erst möglich gemacht, und last not least werden auch Sie als Webdesigner mit HTML 5 letztlich einfacher durchs Leben kommen.

Wer schon einmal einen Satz Designs für ein CMS erstellt hat, der weiß, wie unnötig komplex der Aufbau eines Dokumentes mit den bisherigen nichtssagenden Tags gerät. Der korrekte Einsatz von HTML 5 eliminiert diese Probleme und wird Ihr Leben als Webdesigner auch dahingehend verändern, dass Sie sich mehr aufs Design konzentriern können und weniger um dessen Mechanik kümmern müssen!

Über die neue Dokument-Typdeklaration und die neuen sprechenden Auszeichner von <header> über <nav> und <section> bis <footer>, aber auch über die Frage, wie man denn den bekannten, zu HTML 5 inkompatiblen Altlasten-Browsern HTML 5 unterschieben kann, erfahren Sie mehr im nächsten Artikel zur Einführung des neuen Webstandards.

Category: Allgemein  Tags: , , , , , ,  Leave a Comment