Fragen zu HTML5 & Co beantwortet 10 - Outlines, Media-Metadata, postMessage-Parameter, Rel und Rev

Veröffentlicht am 3. Juni 2013

Es ist mal wieder soweit: Leser fragen Fragen zu HTML5, CSS3 und JavaScript, der HTML5-Erklärbär antwortet. Eure Frage fehlt? Kein Problem: einfach eine E-Mail schreiben oder per Twitter melden!

HTML5-Outlines in the wild

Dieser ganze Krempel mit Überschriften, Sectioning und Outline-Algorithmus, bei dem man jeden neuen Abschnitt einfach mit <h1> beginnen kann (und sollte), dass ist doch reine Fiktion, oder? Und das <hgroup>-Element ebenso?

„Reine Fiktion“ ist eine etwas zu starke Wortwahl. Es gibt durchaus Implementierungen des Outline-Algorithmus, z.B. in Form von h5o und auch eine moderne Browser können <h1>-Elemente wie andere Headlines stylen, wenn ihre Position in der Outline das hergibt. Aber an vielen wichtigen Stellen wo er möglicherweise wichtig sein könnte (z.B. beo Suchmaschinen) fehlt es noch so sehr an Unterstützung, so dass ich nicht empfehlen würde, groß auf den Outline-Algorithmus zu setzen. Entsprechend nutzlos ist dann auch <hgroup>, das mittlerweile aber auch abgeschafft werden soll.

Media-Metadata

Wie kann ich Medieninformationen man aus den <audio>- und <video>-Tags beziehen und welche Daten gibt es da zu holen?

Sobald die Metadaten geladen wurden (Event loadedmetadata auf dem betroffenen Element, readyState auf HAVE_METADATA) gibt es die Eigenschaft duration für die Laufzeit der Mediendatei in Sekunden. Bei Videos gibt es dann auch noch videoHeight und videoWidth für die Maße der Videodatei … und das war es dann praktisch auch schon. Die Spezifikationen schreiben darüber hinaus noch vor, dass man herausfinden können soll, welche Audio- und Videospuren es gibt, aber zur Zeit scheint es noch keinen Browser zu geben, der diese Features unterstützt.

Wenn wir noch weiter in die Zukunft schauen, gibt es noch das track-Element, mit dem sich Dinge wie Untertitel und Annotationen an ein Video bínden lassen. Grundsätzlich gibt es auch schon Browser in denen das teilweise funktioniert und grundsätzlich gibt es auch einen Track-Typ namens in-band metadata track aber das ist alles noch ein ganz weiter Weg zur Einsatzreife.

Was tun? Nun, entweder die Metadaten mit einem Ajax-Request nachreichen oder sie im Video-Markup einbetten (Stichwort data-*-Attribut) oder einfach mit JavaScript die Informationen aus der Videodatei selbst auslesen. Wenn das Format bekannt ist, ist das mit der File API kein Hexenwerk.

postMessage-Parameter

Wofür ist bei window.postMessage() der zweite Paramter mit dem Host?

Mit dem zweiten Parameter kann man festlegen, welche Dokumente bzw. welche Origins (Domains bzw. Host-Protokoll-Port-Kombinationen) das Event empfangen dürfen. Mit '*' sendet man seine Nachricht an potenziell alle Dokumente, die der Browser gerade geöffnet hat und in denen ein entsprechendes Script auf onmessage lauscht. Möchte man das nicht, kann man sich mit 'http://foo.com' versichern, dass kein Dokument, das nicht auf foo.com liegt, an die Nachricht kommen kann. Wenn man einigermaßen sensible Daten übermitteln möchte, sollte man auf diesen Parameter also nicht verzichten!

Was ist mit den rel- und rev-Attributen passiert?

Leider kann ich in dem wirklich empfehlenswerten HTML5-Buch nichts zu den Attributen rel und rev finden. Wie verhält es sich hier bei HTML5? Gibt es auch eine offizielle Liste aller gültigen Values?

Für das rel-Attribut gibt es eine Liste der möglichen Werte in den HTML5-Spezifikationen. Das rev-Attribut wurde hingegen in HTML5 entfernt. Rein hyptertext-theoretisch gesehen wäre es zwar eigentlich ein sehr wichtiges Attribut (für Backlinks, siehe HTML 4.01), aber kein Browser hat damit je etwas sinnvolles gemacht - und da Webstandards nur das abbilden, was es in Browsern sowieso schon gibt, existiert es konsequenterweise in HTML5 nicht mehr.

Weitere Fragen?

Eure Fragen zu HTML5, JavaScript und anderen Webtechnologien beantworte ich gerne! Einfach eine E-Mail schreiben oder Twitter bemühen und ein bisschen Geduld haben – falls ich gerade unterwegs bin, kann es mit Antwort manchmal etwas dauern, doch früher oder später schreibe ich garantiert zurück.

Öffentliche Erklärbär-Termine im Juni 2013

Veröffentlicht am 21. Mai 2013

Der Juni bietet gleich vier Möglichkeiten, sich von mir in unterschiedlichem Umfang HTML5 und CSS3 erklärbären zu lassen (und nebenbei ganz Bayern zu bereisen):

  • 10. und 11. Juni in München: HTML5-Schulung bei der Open Source School. Mein bewährtes drei­tä­gi­ges HTML5-Standardprogramm stattet die Teilnehmer im Druckbetankungsverfahren mit so gut wie allem aus, was man zu HTML5 wissen muss. Von semantischem Markup bis hin zu Canvas-Frameworks ist alles dabei. Geboten wird ein großer Praxisanteil, kleine Arbeitsgruppen und ein Buch gibt es obendrein. Nächster folgender Termin ist erst im Oktober.
  • 12. - 14. Juni in München: CSS3 bei der Open Source School. Mein zweitä­gi­ges CSS3-Standardprogramm katapultiert die Teilnehmer in das CSS3-Zeitalter, in dem Webfonts und Farbverläufe fließen. Einen großer Praxisanteil, kleine Arbeitsgruppen und ein Buch als Bonus gibt es auch hier. Vor Oktober kommt auch diese Veranstaltung nicht wieder, also zuschlagen!
  • 15. und 16. Juni in Garmisch-Partenkirchen: Sessions zu HTML5 und CSS3 im Rahmen des DPK-BootCamp 2013. Ideal für alle, die schon immer mal eine kleine Magazin-Webapp bauen wollten und keine Lust haben, zu sehr in nerdigste Untiefen abzusteigen.
  • 27. Juni in Nürnberg: Workshop im Rahmen der Web Developer Conference 2013. Es wird eine schöne kleine HTML5-App mit modernen JavaScript-Techniken (Unit Testing, AMD-Module, vieles mehr) gebaut.

Ubuntu 13.04 mit Konfiguratoren und Patches zurechtbiegen

Veröffentlicht am 8. Mai 2013

Man kann es mit Ubuntu als Betriebssystem vergleichsweise gut aushalten, weil es gut funktioniert. kann man so ziemlich alles machen, und alle Dinge tun was sie sollen. Allein, die Art und Weise wie sie tun, das ist teilweise ganz schön diskutabel und so manche Design-Entscheindung verleitet geradezu zum Fazialpalmieren. Meine Wenigkeit erschlägt das Ganze immer mit ein paar zusätzlichen Stücken Software, die ich im Folgenden einfach mal aufliste – jedenfalls die Software, die ich im Moment bei Raring Ringtail 13.04 im Einsatz habe. Falls ihr noch mehr in dieser Richtung vorschlagen wollt: Ab damit in die Kommentare!

  • Neuen Nautilus loswerden: in Ubuntu 13.04 wird aus unerfindlichen Gründen Nautilus 3.6 verwendet, eine schlecht integrierte, fehlgeleitete Karikatur des vorherigen Dateimanagers mit der Versionsnummer 3.4 – hässliches Aussehen, Funktionen fehlen, Hotkeys tun es nicht mehr usw. Einen gepatchten, zu Ubuntu 13.04 kompatiblen Nautilus 3.4 gibt es bei Webupd8. Installieren und alle Probleme verschwinden.
  • Unity konfigurieren: Unsettings ist ein GUI zur Konfiguration von Unity. Neuerdings gibt es mit dem Unity Tweak Tool auch eine offizielle Lösung, aber warum die nicht standardmäßig installiert ist, ist mir schleierhaft. Aber beide Tools funktionieren ganz gut. Das Wichtigste ist die Auswahl der passenden Hintergrundfarbe für das Dash.
  • Gepatchtes Notify-OSD: Die Ubuntu-Notifications sind in ihrem Auslieferungszustand nicht konfigurierbar, also müssen eine gepatchte Version und ein damit kompatibler Konfigurator) her. Auch hier: Hintergrundfarbe das wichtigste, Kontrolle über Positionierung und Timeout nice to have.
  • Compiz konfigurieren: Falls man auf die (aus Canonical-Sicht wohl völlig abwegige) Idee kommen sollte, seinen Window Manager konfigurieren zu wollen: sudo apt-get install compizconfig-settings-manager && ccsm

Das ist ungefähr der Werkzeugkasten, mit dem ich mir alle halbe Jahr, nach jedem Release, den Desktop wieder in genehme Form bringe. Ich verstehe nicht, warum man die Konfiguratoren nicht zum Standard macht bzw. eigene bereitstellt. Bei rechtlichen Fragen (Codecs usw.) habe ich vollstes Verständnis, aber hier muss man einfach Böswilligkeit und/oder Arroganz unterstellen. Canonical hält mich anscheinend für blöder als ich bin und ihre Designer für besser als sie sind. Grr … aber hey, immerhin kann man die Sachen patchen und alles andere fluppt ja ganz gut. Und alles zu patchen hat mich gestern abend auch nur 30 Minuten gekostet.

Pik7 - Ein HTML5-Präsentationsframework für Nerds

Veröffentlicht am 7. Mai 2013

Meine Ausrede für ein Logo für Pik7

Die letzten Jahre habe ich ständig Seminare und Vorträgen zu HTML5, CSS3, JavaScript und verwandten Themen gegeben. Bei diesen Themen ist es natürlich naheliegend, HTML/JS-Demos und -Codeschnipsel direkt in die Präsentation einzubetten. Auf HTML fußende Präsentationstools, mit denen das theoretisch denkbar wäre, gibt es wie Sand am Meer. Allerdings haben all diese meine dringendsten Präsentationsprobleme nicht gelöst, weswegen ich (nach mehreren Anläufen) mein eigenes Tool geschrieben habe. Die Hörsuppe hat mich vor ein paar Tagen dazu veranlasst, dem Ganzen mal ein ordentliches Release zu gönnen: Pik7 v. 1.0.0 ist da!

Pik7 - Präsentation und Presenter Mode

Ich bin nicht restlos davon überzeugt, dass irgendwer außer mir Pik7 einsetzen sollte, weil ich doch sehr spezielle Primärziele damit hatte:

  • Performance. Dinge wie mein Canvas-Intensivkurs haben deutlich mehr als 100 Slides, auf denen zu allem Überfluss auch noch allerhand Animationen usw. ablaufen. Das brauche ich in flüssig.
  • Presenter View. Ein aus „richtigen“ Präsentationstools wie Power Point bekanntes Feature, das auf einem Zweitbildschirm nicht für das Publikum gedachte Infos anzeigt – so kann der Vortragende zum Beispiel sehen, welche Slide als nächste dran ist und wie viel Zeit er noch hat. Bei der Masse meiner ganzen Folien darf dieses Feature nicht fehlen.
  • Druckbarkeit. Ich brauche PDF-Fassungen all meiner Slides. Druckbare Präsentationen + Chromes „print to PDF“ = Problem erledigt. Mit ein bisschen JavaScript und CSS kann man außerdem mehrere verschiedene PDFs erzeugen, z.B. einen Cheat Sheet für den Workshop und eine Komplettfassung für das spätere Nacharbeiten.
  • Einfache Programmier- und Stylebarkeit. Versteht sich von selbst: simple Themes, JavaScript-Events beim Folienwechsel usw.
  • Nobrainer-Funktionen für Nerds. Eingebautes Syntax-Highlighting. Eingebautes prefix-free. Auto-Synchronisation von mehreren offenen Präsentationen und Presenter Views. Ich muss kompliziertes Zeugs erzählen, ich habe keine Zeit komplizierte Tools zu bedienen.
  • Kein Firlefanz. Ich brauche weder fancy 3D-Animationen noch verschachtelte Slides noch eine Funktion, die mich Bullet Points nach und nach einblenden lässt. Die könnte man sicher alles einbauen, aber ich habe daran erst mal keinen Bedarf.

Da es, zumindest als ich anfing meine eigenen Tools zu basteln, diese Features in dieser Kombination nirgendwo zu finden gab, musste ich eben selbst ran. Pik7 ist selbstverständlich Open Source (MIT), liegt auf Github rum oder kann von pik.peterkroener.de heruntergeladen werden. Eine Präsentation zu erstellen ist recht einfach …

<!-- /presentations/MySlides/index.html -->
<!doctype html>
<html id="PikSlides">
<script src="../../core/pik7.js"></script>

<div class="pikSlide">First Slide</div>
<div class="pikSlide">Second Slide</div>

… aber wie schon gesagt: ich bin nicht sicher, ob ich Pik7 wirklich empfehlen sollte. Zu den Nachteilen gehört unter anderem der etwas bei HTML-Slides übliche, mühsame Folienbau (Snippets für ST2 liegen aber bei) und dass zwingend ein Websever benötigt wird. Ein kleiner Node.js-Server wird zwar mitgeliefert, ist aber sehr spartanisch gehalten. Außerdem fehlen, wie erwähnt, Animationen und Co. Aber falls ihr euer Glück mit Pik7 versuchen wollt, werde ich euch nicht aufhalten.