Play

Content

HTML5, CSS3, the surrounding powerfull APIs, the new webkit- and JavaScript classes and frameworks like JQuery are literaly revolutionizing the whole development process and the capabilities of "web frontends". This page for instance is entirely build on hopefully valid HTML5, CSS3 and a hint of JS-magic. Its intent is to support the open source spirit by providing demos and usecases how to use this delicacies of the new internet :-)
I try to make most of the used code available for further use in the Think-section

Start the analysis

Socialize

There is also a short demo how to use social APIs, such as Twitter or Facebook, through one click on-page connect.

System Analyse

Die folgenden HTML5/CSS3-Features wurden mit true/false gekennzeichnet (Modernizr). Einige der Features können angeklickt und ausprobiert werden.

  • border-image:
  • border-radius:
  • box-shadow:
  • text-shadow:
  • Canvas:
  • CSS Animations:
  • CSS Transitions:
  • @font-face:
  • Geolocation API:
  • HTML5 Audio:
  • HTML5 Video:
  • localStorage:
  • sessionStorage:
  • opacity:
  • rgba():
  • hsla():
  • Web Workers:
  • Drag and Drop:
  • SVG:

System Status

  • Browser:
  • Betriebssystem:
  • Sprache:
  • HTML5 enable:

Geolocation

Die folgende Demo nutzt das W3C Geolocation API, um deine momentane Position zu ermitteln. Mit Hilfe der Google Maps API werden deine Position sowie eine Route an mein liebstes Reiseziel in ein Canvas-Element gezeichnet.

Audio

Die Format-Schlacht ist voll entbrannt...
Hier eine Übersicht der populärsten Codec-Container-Kombinationen und der dazu kompatiblen Browser:

CodecBrowser
ogg VorbisFirefox, Chrome, Opera
mp3Safari, Chrome, IE9
m4a/AACSafari, iOS, Opera
wavFirefox, Safari, Opera, IE9

Eine kleine Verdeutlichung:

Video

Wie für HTML-Audio auch, gibt es für Video viele konkurierende Codecs im Webbereich. Hier eine Liste polulärer Kombinationen. Wer mehr zu dem Thema erfahren möchte, dem sei dieser Artikel ans Herz gelegt

TypCodecBrowser
OggTheoraFirefox, Chrome, Opera
mp4H.264Safari, iOS, Android, IE9+
WebMVP8Chrome, Opera, Firefox, IE9+

Eine kleine Veranschaulichung:

Local Storage

Diese kleine Demo zeigt, wie die Positionen der Panels auf dieser Seite im localStorage gespeichert, und später wieder hergestellt werden können.


WebWorkers

WebWorker erlauben das Auslagern rechenintensiver Aufgaben. Dabei werden "echte" Threads auf Betriebssystem-Ebene erzeugt, die im Hintergrund arbeiten und mittels onmessage-event Nachrichten/Daten aynchron an den Client zurück pushen können.

In diesem Beispiel fetche ich lediglich einen Twitter-Stream, was kaum Zeit beansprucht, trotzdem wollte ich die Wirkungsweise der WebWorker damit illustrieren. Der Worker setzt einen Ajax-Call an ein Proxy-Script ab (PHP), das die Daten fetcht und an den Worker zurückgibt. Eine Lösung mit JSONP wäre selbstverständlich noch schöner :-)

Footer

Kontakt

Kommunikation ist alles! Meines Erachtens sollte Kommunikation (sowie auch Mobilität) für alle Menschen frei und kostenlos verfügbar sein! Dies käme einem Quantensprung in Richtung Verschmelzung aller Menschen zu einem kollektiven intelligenten Schwarm à la Ameise gleich... Träumen muss gestattet sein!

Impressum

Inhaltlich Verantwortlicher Adresse Haftungshinweis

Trotz sorgfältiger inhaltlicher Kontrolle übernehme ich keinerlei Haftung für die Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich. Alle hier erwähnten Marken, Schutzmarken, Dienstleistungsmarken und Logos sind Eigentum der jeweiligen Unternehmen.

Copyright

Alle hier verwendeten Skripte, Libraries und anderweitigen Tools sind open source. Sharing is caring (^_^)

Coming soon :-)