selfHTML5.net

22.03.2013

html5-selfHTML5 für ein besseres Web

Der neue - schon fast - Standard HTML5 ermöglicht im Internet vieles, was bisher nicht oder nur mit Plugins ging. Unser Portal selfHTML5 soll Entwicklern zeigen, was alles möglich ist, eigene Ideen anstoßen und zum Träumen anregen, was noch alles umgesetzt werden kann, wenn der Standard auch im 3D Bereich ausgereizt wird. Wir wollen dabei kein lexikalisches Nachschlagewerk sein, sondern anhand konkreter Problemstellungen deren Lösung mit HTML5 aufzeigen. Schwerpunktthemen ist dabei das Programmieren von Apps und das Canvas Element


Apps Programmieren

Die native App Entwickler mögen es verzeihen, aber auch die App Programmierung ist mit HTML und JavaScript möglich. Wir haben einen kleinen Kurs zusammengestellt:

iPhone App mit HTML5 programmieren

Auch das Thema WebApps ist aufgrund der Möglichkeiten mit HTML5 deutlich stärker geworden. Von der Datenspeicherung auf dem Endgerät bis hin zur Ermittlung von GPS Daten stehen dem Programmierer mit der inoffiziellen neuen HTML Version ganz neue Möglichkeiten offen, die man sonst nur bei nativen Apps wähnt.

 

CSS3 Programmierung

In gleichem Maße, wie HTML5 einzug hält, haben auch die Browserhersteller auch bei der Interpretation von Stylesheets dem Standard durch die Implementierung neuer Methoden gewaltig vorausgegriffen. Das schöne ist, dass die meisten der neuen CSS3 Formatierungen, wie box-shadow und border-radius (siehe 10 CSS3 Div Boxen) und tolle Sachen wie CSS3 True Type Fonts bereits in den meisten aktuellen Browsern voll funktionstüchtig sind und damit auf avandgardistischen Seiten durchaus schon eingesetzt werden können.

Ein weiteres Schmankerl ist unser box-shadow Generator, mit dem man spielend einfach mit ein paar Klicks Boxen mit dem gewünschten Schattenwurf erstellen und sich deren CSS3 Code als Snippet kopieren kann.

 

HTML5 Tutorials

Der Hauptfokus von selfhtml5 liegt aber natürlich bei Tutorials zu HTML5. Man kann dabei das Einbinden von HTML5 Videos ebenso lernen, wie die verwendung von neuen Auszeichnungen per CSS3.

{source}
<!-- You can place html anywhere within the source tags -->

<iframe width="200" height="300" style="float: left; margin: 0 10px 10px 0" scrolling="no" frameborder="0" src="http://www.selfhtml5.org/html5-diagramme/saeulendiagramm/index.php?id=13344100304320&"></iframe>

<script language="javascript" type="text/javascript">
    // You cn2 place JavaScript like this

</script>
<?php
    // You can place PHP like this

?>
{/source}

 

Canvas - Dynamische Grafiken

Das Canvas Element ist die weitreichendste Neuerung in HTML5, siehe Canvas Attribute. Es ermöglicht das dynamische Zeichnen nicht nur von Grafiken in 2D, sondern auch in 3D. Eine sehr nützliche Anwendung des Canvas Elements findet sich beispielsweise bei der Ausgabe dynamischer Diagramme und Statistiken.

Wir haben hier mittels Canvas ein Tool zur Generierung Dynamischer Säulendiagramme mit HTML5 programmiert, über das sich Datenmaterial schnell und ohne Code bearbeiten zu müssen, in ein Säulendiagramm verwandeln lässt.