HTML5 – Sebastians Blog https://sgaul.de Neues aus den Softwareminen Thu, 13 Mar 2014 20:34:54 +0000 de-DE hourly 1 https://wordpress.org/?v=6.1.1 https://sgaul.de/wp-content/uploads/2019/02/cropped-sgaul-2-1-32x32.jpg HTML5 – Sebastians Blog https://sgaul.de 32 32 Betriebssystem aus HTML5: Firefox OS https://sgaul.de/2012/07/02/betriebssystem-aus-html5-firefox-os/ https://sgaul.de/2012/07/02/betriebssystem-aus-html5-firefox-os/#comments Mon, 02 Jul 2012 17:16:00 +0000 https://sgaul.de/?p=1249 Ein Golem-Artikel gibt ein paar schöne Einblicke in Boot to Gecko, das mittlerweile in Firefox OS umbenannt wurde. Das ganze sieht auch ansprechend aus, sonst wäre es wohl keine Meldung wert. Was ich interessant finde: Die Grenzen zwischen Webtechnologien und Betriebssystem werden weiter kleiner.

Firefox OS: Gaia Oberfläche¹
Firefox OS: Gaia Oberfläche¹

Als Webentwickler hat man es dieser Tage leicht. Fast sämtliche Trends spielen einem in die Hände. Nur Smartphones und die zugehörigen Apps konnten in den letzten Jahren ein wenig dagegenhalten.

Nachdem Microsoft bei seiner Windows-8-Plattform in Richtung HTML geht, wird es bald von Mozilla ein Mobilbetriebssystem geben, dass vollständig mit Webtechnologien programmiert werden kann: „The operating system, which Mozilla today confirmed will use its Firefox brand, will power the launch of smartphones built entirely to open Web standards, where all of the device’s capabilities can be developed as HTML5 applications.“ Demnach sind alle Funktionalitäten des Gerätes mit HTML-5-Applikationen ansprechbar. Und im Gegensatz zu Windows steht hier wohl kein Vendor-Lock-In zu befürchten.

Zum Schluss eine Konjunktivübung: Golem sagt, dass Mozilla andeute, dass Unternehmen wie die Deutsche Telekom planen, günstige Geräte auf Firefox-OS-Basis zu bauen. Klingt auf jeden Fall interessant. Für ein wirklich freies Mobilbetriebssystem würde ich auch Android sofort den Rücken kehren. Wenn das einer schaffen kann, dann Mozilla. Die haben schon beim Internet Explorer bewiesen, dass sie auch verloren geglaubte Märkte neu aufmischen können. Ich bin gespannt.

1: hacks.mozilla.org

]]> https://sgaul.de/2012/07/02/betriebssystem-aus-html5-firefox-os/feed/ 3 Optimiert für Internet Explorer und Facebook https://sgaul.de/2012/06/21/optimiert-fur-internet-explorer-und-facebook/ https://sgaul.de/2012/06/21/optimiert-fur-internet-explorer-und-facebook/#comments Thu, 21 Jun 2012 12:15:36 +0000 https://sgaul.de/?p=1228 Es gibt sie immer noch: Websites, optimiert für Internet Explorer 6, 1024×768 und „16bit Color“. Doch das Verständnis für das Web und seine Freiheiten hat sich weiterentwickelt. Obige Raritäten sind kein Ärgernis mehr, sondern eine Erinnerung an „gute“, alte Zeiten. Das Web ist frei, standardisiert und zugänglich für jedermann. Selbst Fortschrittsbremsen wie Adobe (Flash) oder Microsoft (IE6, IE7, IE8, Silverlight) scheinen dem Trend zu folgen. Doch sieht die Zukunft wirklich so rosig aus?

HTML-5-Boilerplate und die „Spezialfälle“

Betrachtet man die Websitevorlage HTML 5 Boilerplate kann es einem schon etwas mulmig werden. Allein die Datei index.html, also die Datei, in die die eigentlichen Inhalte gehören, hat vor allem Ergänzungen für Spezialfälle.

Das Starttag <html> wird ersetzt durch:

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <!--<![endif]-->

Aus 6 mach 363 Zeichen. Und es folgen weitere kleine Tweaks:

  • Internet Explorer mit Chrome-Frame laden
  • Icons für Apple-Geräte einbinden
  • Viewport für Mobilgeräte einstellen
  • JS-Modernizr laden

Dies ist ein Auszug aus der index.html. Von der CSS-Vorlage möchte ich gar nicht anfangen: Dort bekommt so ziemlich jeder bekannte Browser sein eigenes Layout-Reset.

Facebook Open Graph

Und der Trend geht weiter. Bei Linux und ich ist zu lesen, wie Christoph folgendes Problem löst:
Google Plus und Facebook das richtige Thumbnail zu euren Artikeln verpassen. Der Grund für das falsche Thumbnail ist einfach und schnell zu beheben: Das Theme fügt den Banner als Img-Element ein. Eine klare Verletzung der Trennung von Inhalt und Layout. Facebook und Google verhalten sich durchaus korrekt, wenn sie ein solch prominentes Bild als Artikelbild ansehen.

Die vorgeschlagene Lösung ist in meinen Augen bedenklich: Christoph beschreibt einen Ansatz mit Facebook Open Graph, einem Protokoll, dass auch den Rest des Webs mit Facebook verknüpfen soll. So kann man auch Facebook mitteilen, welches denn das Artikelbild ist. Und nicht nur das: Auch der Titel des Artikels, seine URL, Sprache und Beschreibung können so notiert werden. Nach Standard- und Dublin-Core-Metaelementen also eine weitere Variante, die eigene Website mit redundanten Daten zu befüllen. Anders als vorher aber nicht einem sinnvollen Standard folgend, sondern den Bedürfnissen eines großen Unternehmens. Und da ist es wieder: „Diese Seite ist optimiert für Facebook.“

Web der Standards? Der Kampf geht weiter…

Schon diese zwei Beispiele zeigen, dass Browser- und Dienstspezialisierung heute wie damals ein großes Thema ist. Wirkte das Web in Zeiten von HTML 4 für Jahre gefestigt, kommen seit Version 5 ständig neue Anforderungen und Wünsche hinzu. Diese werden gern mit proprietären Erweiterungen realisiert. Das muss auch nicht immer schlecht sein. Es sind positive Schübe in richtige Richtungen dabei.

Als Webdesigner muss man sich dieser Trends aber bewusst sein. Es sind Workarounds, keine Lösungen. Und die werden teuer erkauft. Schnell machen ein paar Ausnahmebehandlungen mehr als die Hälfte einer HTML-Vorlage aus. Oder man behebt einen Theme-Fehler mit zwölf Metaelementen und durchschnittlich 1000 Zeichen redundanter Information. Solange es bei „allen“ läuft, mag das für die meisten akzeptabel sein.

Es ist wichtig, dass Standards neuen Anforderungen nachkommen und Notlösungen ersetzen. Dass Suchmaschinenoptimierung bisher Google-Optimierung war, wurde stets stillschweigend hingenommen. Kommen jetzt noch Facebook-, Twitter und Pinterestoptimierung hinzu, wird es problematisch. Lassen sich die Webdesigner darauf ein, werden solche Firmen das auch ausnutzen. Es ist wichtig Grenzen zu ziehen. HTML-Elemente wie <link rel="apple-touch-icon"> oder Facebooks Open-Graph-Metaelemente brechen mit Standards, statt sie zu erweitern. Dies ist der falsche Weg.

Diese Grenzen dürfen nicht überschritten werden. Andernfalls sind am Ende diejenigen, die sich für ein Internet der Standards und der Vielfalt einsetzen, die Verlierer. Und schlussendlich auch alle Nutzer des Webs.

]]> https://sgaul.de/2012/06/21/optimiert-fur-internet-explorer-und-facebook/feed/ 13 Appell für sauberes HTML https://sgaul.de/2012/05/12/appell-fur-sauberes-html/ https://sgaul.de/2012/05/12/appell-fur-sauberes-html/#comments Sat, 12 May 2012 17:27:43 +0000 https://sgaul.de/?p=1169 Appell für sauberes HTML weiterlesen]]> Ein neuer Tag, ein neues CSS-Framework und immer wieder das alte Problem:

<div id="page_wrap" class="container row">
 <header class="row span_12">
  <hgroup class="row span_12">
   <h1 class="col span_4">Site Title</h1>
   <h2 class="col span_8">Site Description</h2>

Fünf Elemente, zehn Klassen, eine ID? Diese netten Zusatzinformationen führen zu 193 statt 68 Zeichen. Ich weiß nicht, wer einmal beschlossen hat, Stylesheets vom Markup zu trennen. Und ich weiß auch nicht wie lange das her ist. Aber ich bin mir sicher: Das hat er oder sie sicher nicht gewollt.

Auch Style-Klassen sind Designinformationen…

… und haben im Markup nichts zu suchen. HTML hat im wesentlichen genau eine Aufgabe: Den Inhalt der Seite zu transportieren. Zudem können noch zusätzliche Informationen angegeben werden, etwa wo sich Dateien befinden, welche Scripts oder eben auch Stylesheets enthalten. Diese Dateien sind optional, es steht jedem zu sie wegzulassen.

Ein großer Teil von Website-Besuchern sind Bots, die solche Sachen in der Regel nicht interessiert. Trotzdem verdoppeln die meisten ihre HTML-Größe auf oben beschriebene Weise.

Fehlende Wiederverwendbarkeit von CSS

Auf den meisten Websites bestimmt also das HTML durch seine Klassen selbst, wie es dargestellt werden soll. Der Grund hierfür ist aus meiner Sicht der stark begrenzte Funktionsumfang von CSS: Es gibt keine Variablen, keine Vererbung und keine anderen Wiederverwendungstechniken. Sollen Header und Footer die selbe Hintergrundfarbe haben, muss diese für beide definiert werden. Das führt zu einer problematischen Code-Dopplung: Will man die Farbe ändern, muss man dies an zwei Stellen tun.

Viele Webdesigner und Framework-Schreiber versuchen daher, diese Eigenschaften, die für beide Elemente gleich sind, in eine neue Klasse auszulagern. Da CSS diese Klassenstyles aber nicht mit bestimmten Elementen verknüpfen kann, wird diese Information ins HTML ausgelagert. Auch wenn man es nicht immer direkt wahrnimmt: Solche Klassen sind ein direkter Teil von CSS.

Um dieses Problem abzuschwächen, gibt es viele interessante erweiterte Sprachen, die CSS erzeugen. Less ist sicher einer der prominentesten Vertreter, den ich aber meist in seiner PHP-Variante Less-PHP benutze.

Schlimmer geht immer: Wrapper-Elemente

Das obige Beispiel enthält mit <div id="page_wrap" class="container row"> ein noch viel schlimmeres Problem: Wrapper-Elemente. Typo 3 geht hier mit schlechtem Beispiel voran. Überschrift gefällig?

<div id="c304" class="csc-default">
 <div class="csc-header csc-header-n1">
  <h1 class="user class">Impressum</h1>
 </div>
</div>

Das sind 130 Zeichen Markup für neun Buchstaben. Und das ist durchaus üblich.

Meine Vorsätze für künftige Websites

  • Akzeptieren, dass eine Gruppe von Elementen nicht umrandet werden kann, wenn es an der Stelle kein Elternelement gibt. Meist ist dort kein Extra-Div, weil es dort nicht hingehört. Wenn es semantisch nicht zusammengehört, warum sollte man es optisch gruppieren?
  • Warum nicht mal Javascript? Wenn man es trotzdem nicht lassen kann, kann man die Wrapper doch einfach mit Javascript ergänzen. Auch das hält das ausgelieferte HTML rein.
  • Es geht auch semantisch: Klassen und IDs sind nichts schlechtes. Sie können Informationen über ein HTML-Element enthalten. Klassen wie article, comment oder author sind Metainformationen des Inhalts und somit legitimer Teil des Markups. Stylesheets sollten solche Informationen adressieren.
  • HTML-5-Elemente: Besser sind die vielen neuen HTML-5-Elemente, die solche semantischen Informationen bereits in sich tragen.
  • Alte Browser fallenlassen. Schluss mit Browserweichen und Zusatz-Wrappern.
  • Eine Weiche vielleicht doch: Für IE < 8 CSS und Javascript gleich ganz abschalten.

Ich träume von einer Welt, in der man Websites auch im Quelltext lesen kann…

]]> https://sgaul.de/2012/05/12/appell-fur-sauberes-html/feed/ 6 FIWA: Eine fast native Menüleiste https://sgaul.de/2011/11/27/fiwa-eine-fast-native-menuleiste/ Sun, 27 Nov 2011 10:31:11 +0000 https://sgaul.de/?p=785 Schon seit längerem bin ich auf der Suche nach einem HTML-CSS-JS-Framework, welches sich möglichst genau an das eigene Betriebssystem anpasst und im Anwendungsmodus des Browsers gar nicht als Webdienst auffällt. Leider konnte ich dazu nie etwas finden, daher habe ich mit FIWA („Framework for Integrated Web Applications“) einfach mal einen eigenen Ansatz gestartet. Als erstes ist nun eine recht brauchbare Menüleiste fertig geworden.

FIWA Menubar

Die Menüleiste verhält sich nun ziemlich genau wie die in GTK (und somit hoffentlich auch den meisten anderen Toolkits, viele Tests konnte ich noch nicht machen):

  • immer normaler Mauszeiger
  • Hover-Hervorhebung nur, wenn irgend ein Teil des Menüs offen
  • Untermenüs bleiben offen bis Klick irgendwo im Dokument
  • ist Untermenü offen, werden andere Untermenüs schon durch darüberfahren geöffnet und das vorige geschlossen

Leider wird die Funktionsweise durch eine Screenshot kaum deutlich.

FIWA Menubar

 Das Design

Für die perfekte Systemintegration benötigt man vor allem ein passendes Theme. Ich habe mich vorerst dazu entschieden, keiner speziellen Vorgabe zu folgen, um eine möglichst allgemeine Lösung zu finden, für die man später dann verschiedene Designs erstellen kann.

Einschränkungen

In Chrome und Firefox funktioniert die Menüleiste tadellos. Ich möchte mich bewusst auf moderne Browser beschränken. Im Zweifel kann lieber jemand zehn Minuten in sein IE-6-Update stecken als ich jetzt drei Stunden um es da zum Laufen zu kriegen.

Eine etwas größere Einschränkung ist da die Tatsache, dass das Menü derzeit nur zwei tief verschachtelt werden darf. Jede weitere Ebene ist etwas problematischer, da diese ja neben dem aktuellen Unterpunkt positioniert werden müssen. Aber auch das sollte in absehbarer Zeit machbar sein.

Download

Die Sache ist noch nicht im Ansatz fertig. Wer aber schon einmal hineinsehen möchte, kann das über das entsprechende Github-Projekt tun:

]]> Canvas: Das Ende von SVG? https://sgaul.de/2011/10/11/canvas-das-ende-von-svg/ Tue, 11 Oct 2011 14:37:34 +0000 https://sgaul.de/?p=580 Um Webinhalte nicht immer nur trist als Text erscheinen zu lassen, haben sich Bilder recht gut bewährt: Diagramme und Schaubilder helfen dem Nutzer einen Überblick zu bekommen. Bisher wurden allerdings meist konventionelle Rastergrafiken verwendet, die einige Nachteile haben. Will man hiervon weg, stellt sich aber gleich die nächste Frage: Das neue HTML-5-Element Canvas oder das etwas ältere SVG?

Die pixelige Lösung

In der Tat sind Rastergrafiken wie PNG eine denkbar schlechte Wahl. Sie skalieren bekanntlich absolut schlecht und sehen in jeder außer der Originalgröße schlecht aus (selbst das herunterskalieren im Browser führt oft zu schrecklichen Resultaten).

Der wesentliche Punkt ist aber, dass die Textinhalte nicht mehr als solche vorliegen, was diverse Konsequenzen hat, die vor allem darauf beruhen, dass sie nicht mehr automatisch ausgelesen werden können:

  • Screenreader für Behinderte Menschen haben keine Chance mehr.
  • Die Seite kann nicht nach diesen Inhalten durchsucht werden.
  • Suchmaschinen können mit den vielleicht relevanten Inhalten nichts anfangen

SVG war einmal?

Im allgemeinen HTML-5-Hype hört man von SVG fast gar nichts mehr: Canvas soll das browserinterne Zeichnen revolutionieren.

Das Canvas-Element kann einfach leer im Browser definiert werden, anschließend darf man mit Javascript darin herumzeichnen.

Maschinenlesbarkeit (= Relevanz für Suchmaschinen)

Hiermit übernimmt Canvas aber die Probleme der Rastergrafiken. Da die Inhalte erst dynamisch eingefügt werden und somit auch die relevanten Texte nur im Javascript-Code stehen, gehen die Vorteile der „lesbaren“ Bilder verloren.

Hier kann SVG punkten: Die Vektorgrafiken werden direkt als XML-Markup in den Quelltext integriert oder extern referenziert. So sind auch alle relevanten Suchbegriffe maschinenlesbar.

HTML-Fallback

Eine praktikable Lösung ist es, die Inhalte für das Canvas in einfachem HTML zu notieren. Eine Mindmap wäre dann nichts anderes als eine Verschachtelung von <ul>- und <ol>-Elementen. Anschließend könnte man für menschliche Betrachter mittels Javascript diesen Inhalt durch ein Canvas ersetzen, welches seine Daten aus eben diesem Code generiert. Ältere Browser, die Canvas nicht unterstützen, zeigen einfach das HTML an und bieten somit ein angemessenes Fallback-Verhalten. Allerdings kann man auf die gleiche Weise auch SVG dynamisch erzeugen. Genau genommen erlaubt es diese Lösung sogar, Rastergrafiken maschinenlesbar zu machen.

Wenn man es auf diese Art umsetzt, steht Canvas SVG hier in nichts nach. Ist es allerdings nicht möglich, da man komplexe Grafiken erzeugen will, die sich nicht automatisch generieren lassen, ist SVG hier im Vorteil.

Browserunterstützung

Dieser Punkt ist schwer zu bewerten. Alle neuen Browser unterstützen beide Formate. Beim Internet Explorer, also dem einzigen, bei dem man wirklich ältere Versionen beachten müsste, sieht es für beide mau aus. Vor dem 9er ist nicht viel zu erwarten (selber der IE 8 kann beides gar nicht). Allerdings gibt es hierfür Plugins und zur Not kann eben das zuvor angesprochene HTML-Fallback helfen.

Erzeugung

Hier geht der Punkt klar an SVG: Hierfür gibt es unzählige hochwertige Editoren wie etwa Inkscape. Für Canvas sind mir noch keine Vereinfachungen bekannt, hier muss man heutzutage wohl eher programmieren als wirklich zeichnen.

Mein Fazit

Ich persönlich konnte mich noch nicht wirklich für eine der beiden Technologien entscheiden. Gern würde ich bei Gelegenheit eine Art Mindmap-Generator entwerfen. Ich bin mir aber alles andere als sicher, dass dieser unbedingt auf Canvas aufbauen muss. SVG ist ein verbreiteter Standard und ist vor allem dank seiner sehr guten Editoren klar überlegen.

Das HTML-5-Logo ist Eigentum von „The World Wide Web Consortium (W3C)“.
]]>