Öffentliche Erklärbär-Termine im Juni 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

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

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.

Kleiner Screencast mit den wichtigsten Features:

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.

Fragen zu HTML5 & Co beantwortet 9 - Leerzeichen, Canvas-Resizing, Slashes, Fullscreen-Video unter iOS

Ich bin zwar kein Doktor und draußen ist auch gerade alles andere als Sommer, aber Fragen beantworte ich trotzdem gern. Bevorzugt solche zu HTML5, CSS3, JavaScript und anderen Themen rund um Webentwicklung. Die folgenden vier Fragen sind alle in den letzten Wochen via Twitter und E-Mail an mich herangetragen worden, was genau die beiden Kanäle sind, über die ich auch euch gerne die Fragen beantworte, die euch unter den Nägeln brennen. Einfach anschreiben!

Leerzeichen bei mobiler Datenverbindung verschwunden?

In mobilen Browsern (Verbindung über EDGE/3G/LTE) werden manchmal Leerzeichen aus meiner Webseite entfernt. Weißt du etwas darüber? Ist das vielleicht eine Art von Kompression?

Ohne es konkret testen zu können ist eine Antwort schwer, aber es kann durchaus sein, dass Mobilfunkanbieter das HTML einer Seite komprimieren, um hier und da ein paar Bytes zu sparen. Es ist jedenfalls nicht unüblich, dass die Provider in auszulieferndes Markup eingreifen. Besonders problematisch wird das Ganze, wenn, wie im verlinkten Artikel beschrieben, der Inhalt verändert wird, aber auch wenn „nur“ komprimiert (d.h. Whitespace zwischen Tags entfernt) wird, kann es durchaus zu sichtbaren Veränderungen in der Seite kommen, denn egal ist solcher Whitespace bei HTML nicht. Vergleichen wir doch mal:

<!doctype html>
<meta charset="utf-8">
<title>Whitespace ist wichtig</title>


<h1>Mit Whitespace</h1>
<p>
    <span>Test</span>
    <span>Test</span>
    <span>Test</span>
</p>


<h1>Ohne Whitespace</h1>
<p><span>Test</span><span>Test</span><span>Test</span></p>

Der Unterschied zwischen den beiden Absätzen ist an im gerenderten Endergebnis sichtbar und kommt daher, dass die Leerzeichen und Zeilenumbrüche zu zusätzlichen Textknoten zwischen den Elementen führen. Man beachte die childNodes-Eigenschaft im DOM:

Unterschiedliches DOM je nach Leerzeichen-Einsatz

Streicht ein übereifrig optimierender Mobildatendienstleister diese Leerzeichen weg, hat man natürlich plötzlich ein ganz anderes DOM und das kann ein handfestes Problem werden. Schnelle Abhilfe schafft möglicherweise die Codierung von Leerzeichen als Entity (&#32;) an kritischen Stellen.

Bilder und Videos per Canvas verkleinern

Vielen Dank für das Tutorial! Eine Frage hätte ich allerdings: was müsste ich machen, um das Video oder das Bild in eine kleine Canvas zu skalieren, also z.B. statt 400×300 in ein 40×30, wenn die Originaldatei aber 400×300 hat?

Das ist zum Glück ganz einfach. Die drawImage-Methode kann man nicht nur mit zwei Parametern (Bild, X-Koordinate, Y-Koordinate) aufrufen, sondern auch mit vier oder acht. Die beiden zusätzlichen Parametern bestimmen dann die Höhe und Breite des gemalten Bildes und wenn die Quelle andere Maße hat, wird sie automatisch gestreckt oder verkleinert. Außerdem kann man auch nur einen Ausschnitt aus der Quelle verwenden. Ein Bild sagt mehr als tausend Worte; der Aufruf context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) bedeutet:

sy, sx, sw und sh definieren den zu zeichnenden Ausschnitt der Quelle, der dann an die Koordinaten dx/dy mit den Maßen dw*dh gezeichnet wird

Leider wird diese Technik noch viel zu selten genutzt. Warum zum Beispiel sollte man bei Bilduploads eine viel zu große Datei hochladen, nur um sie dann auf dem Server von einem PHP-Script kleinrechnen zu lassen? Das kann man dank HTML5 viel besser auf dem Client erledigen.

End-Slashes für Leer-Elemente

Hallo, ich beobachte, dass häufig ein End-Slash im IMG-Tag gesetzt wird (<img />). Bisher funktionieren auch die alten Tags ohne „/“. Kann es sein, dass der End-Slash zukünftig zwingend geschrieben werden muss? Und wenn ja, ab wann?

Nein, dieser schließende Slash wird voraussichtlich nie auf breiter Front Pflicht werden. Der Slash rührt daher, dass das W3C zwischenzeitlich mal plante, HTML auf XML-Basis neu aufzustellen – XHTML sollte der neue Standard werden. Dort wäre dann schließende Slash für Elemente wie <img> Pflicht geworden. Diese XML-Umstellung hat aber aus einer ganzen Reihe von Gründen nicht so recht funktioniert und heute (d.h. in HTML5) ist der Slash damit wieder optional. Die HTML5-Parser in modernen Browsern werden durch ihn nicht gestört, benötigen ihn aber auch nicht. Es ist buchstäblich völlig egal ob man ihn verwendet oder nicht.

Es existiert zwar auch XHTML5, wo der Slash Pflicht wäre, aber wegen vieler vieler Problem damit (u.A. funktioniert es nicht im Internet Explorer 6, 7 und 8) ist die Verwendung von XHTML5 nicht zu empfehlen. Man nur Nachteile, keine Vorteile.

Inline-Video mit HTML5 auf dem iPhone

Gibt es irgendwie die Möglichkeit, mit HTML5 eingebundene Videos auf dem iPhone inline d.h. ohne automatischen Fullscreen darzustellen?

Zunächst sollten wir festhalten, dass sich das iPhone nicht direkt unkorrekt verhält, wenn es Videos ausschließlich im Vollbild abspielt. Die in den Spezifikationen festgeschriebenen Regeln lassen sich mit geringem Aufwand so weit dehnen, dass dieses Verhalten standardkonform erscheint. Zitat:

User agents may allow users to view the video content in manners more suitable to the user (e.g. full-screen or in an independent resizable window). As for the other user interface features, controls to enable this should not interfere with the page's normal rendering unless the user agent is exposing a user interface. In such an independent context, however, user agents may make full user interfaces visible, with, e.g., play, pause, seeking, and volume controls, even if the controls attribute is absent.

Wenn der Browser ein Interface mit Steuerungselementen für das Video anzeigt, darf er das im Fullscreen-Modus machen. Und wenn der Browser im Fullscreen-Modus ein Video anzeigt, soll er dort auch ein Interface mit Steuerungselemente anzeigen, selbst wenn das dafür normalerweise nötige controls-Attribut auf dem Video-Element gar nicht gesetzt ist. Und so startet iOS auf iPhone und iPod Touch jedes Video im Vollbild, da es schließlich ein Steuerungsinterface zeigt, das es auch in Abwesenheit des controls-Attributs anzeigen darf, da das im Vollbild passiert. Richtig falsch ist das also nicht.

Kann man denn etwas dagegen tun? Leider nicht. Es gibt zwar das proprietäre HTML-Attribut webkit-playsinline, aber das scheint nur für native Apps mit UIWebViews gedacht zu sein und funktioniert nicht auf iPhones und dem iPod Touch.

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 mit der Antwort haben. Ansonsten kann man mich natürlich auch mieten!

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon