senäh

17senäh und so…

Rückblick_Logo

HTML/CSS/JS
11. Dez 2012
Kommentare: 0

Web Dev Rückblick für Oktober/November – Teil 2

Kategorien: HTML/CSS/JS | 11. Dez 2012 | Kommentare: 0

Es folgt die angekündigte Fortsetzung des Web Dev Rückblicks der Monate Oktober und November :)

RMVC

Wo wir schon einmal bei Responsive Designs waren. Ich persönlich bin ja eigentlich ein Freund von Responsive Designs. Zumindest theoretisch. Denn die Umsetzungen sind meist eher mau. Man kann sich noch so viel Mühe mit dem visuellen Stil geben, aber das allein reicht nicht aus!

Wenn man heutzutage von Responsive Designs spricht, meint man im Allgemeinen durch Media Queries angepasste Style Sheets für kleinere Bildschirme. Das kann aber noch nicht gewesen sein. Ein Beispiel:
Eine Desktopwebseite verwendet ein 3-spaltiges Layout. Für kleine Bildschirme ergeben sich nun mehrere Designanpassungen, um vom 3-spaltigen Layout wegzukommen:

  • Alle Spalten untereinander setzen. Problem: Man muss viel scrollen.
  • Jede Spalte einem Tab zuordnen. Ein Tipp auf einen Tab togglet anschließend die Sichtbarkeit der Spalte, so dass man immer nur eine Spalte auf voller Breite sieht. Problem: Selbst wenn ich am Anfang nur Spalte 1 sehen, werden schon Spalte 2 und Spalte 3 mit geladen. Auch wenn ich die vielleicht nie antippe.
  • Eine Spalte belegt die volle Breite des Bildschirms. Durch Wischgesten von links nach rechts bzw. umgekehrt wechsele ich zwischen den Spalten. Problem: Wie zuvor.

Media Queries lösen nur Probleme des Views einer App bzw. Webseite. Es sollten aber auch entsprechende Lösungen für Models und Controller berücksichtigt werden, also die Daten und die Logik. Meine Idealvorstellung:
Eine Desktopwebseite verwendet ein 3-spaltiges Layout. Für kleinere Bildschirme wird wie oben beschrieben das Layout nach Lösung b) oder c) angepasst. Es werden jedoch nicht zeitgleich die Inhalte für die nicht sichtbaren Spalten 2 und 3 zusammen mit der sichtbaren Spalte 1 geladen. Stattdessen werden die Inhalte gar nicht geladen, wenn ich weiß, dass nur wenige Nutzer diese Spalten betrachten oder aber sie werden im Hintergrund vorgeladen, wenn ich weiß, dass fast jeder Nutzer noch zu Spalte 2 und 3 wechseln wird.

Dies stellt natürlich besondere Anforderungen auch an die API um das Model mit Daten zu füttern. Ich muss in der Lage sein aus einem Request drei zu machen und vice versa. Ich möchte auch nicht ausschließlich drei einzelne Request haben. Innerhalb der Desktopseite möchte ich alle drei Spalten mit einem einzigen Request füllen können!

RMVC! Spread the word!

RMVC! Spread the word!

Ihr seht: Gutes Responsive Design ist nicht leicht. Und um das Bewusstsein für die richtige Verwendung dieses Prinzips zu erhöhen plädiere ich dafür in Zukunft nicht mehr nur von Responsive Design zu sprechen, sondern von RMVC-Prinzip, also dem Responsive Model View Controller Prinzip. Entwickler und Designer sollten wissen, dass gutes RMVC nicht alleine durch die Verwendung von Media Queries im View entsteht! Es gehört viel, viel mehr dazu und muss auch in den Controllern und Models entsprechend berücksichtigt werden.

Hot Specs

Die Zeit rennt schon wieder und ich habe erst drei Punkte von meiner langen Liste an interessanten Web-Themen abgearbeitet. Deswegen schnappe ich mir noch ein paar kleinere Punkte. Zu diesen gehören die meiner Meinung nach interessantesten aktuellen in Entwicklung befindlichen Web-Standards:

CSS Custom Properties

Leider kein offizieller W3C-Entwurf für einen realen Standard stellen CSS Custom Properties dar. Aber die Idee dahinter finde ich so interessant und wichtig, dass ich sie kurz vorstellen möchte. Ihr alle wisst was CSS Eigenschaften sind. Zum Beispiel border-radius: 15px. Und ihr alle kennt Vendor-Prefixes wie -webkit-border-radiues: 15x, um noch nicht finalisierte CSS Eigenschaften testen zu können. Die CSS Custom Properties sollen es nun jeden ermöglichen eigene CSS Eigenschaften zu erstellen wie bspw. x-border-radius: 15px. Ich höre euch schon schreien: „Vendor-Prefixes sind böse, jetzt auch noch eigene Prefixes! Buuh!“ Aber ein Gedankenspiel: Boris Smus hat im September den Vorschlag gemacht forward polyfills zu veröffentlichen. Eigentlich eine tolle Idee. So hätte man noch vor jeder border-radius-Spezifikation über irgendwelche JS/Bilder-Fallbacks die Syntax von runden Ecken und ihr Ergebnis in CSS testen können. Das geht aber nur, wenn ich auch auf eben diese Syntax zugreifen kann. Bisher ist dies nur durch manuelles Parsen der CSS als reine Textdatei möglich. Genau das macht Kerning.js. Sie führen neue CSS Eigenschaften ein, um die Web-Typografie zu verbessern. Diese CSS Eigenschaften müssen sie aber umständlich selbst heraus parsen. Mit CSS Custom Propertieswäre ihnen diese Arbeit erspart geblieben!

Compositing and Blending

Meine Lieblings-CSS-Spec. Ebeneneffekte für HTML Elemente jeglicher Art. Ein Traum. Ich schnappe mir zwei div-Elemente. Einer bekommt eine tolle Hintergrundtextur von subtle patterns, der andere eine beliebige Hintergrundfarbe und den Ebeneneffekt/blend-mode multiply. Nun kann ich die Textur des ersten div-Elements dynamisch und on-the-fly einfärben! Geil! Spezifikationsfortschritt: weit. Erste Tests sind in speziellen Chrome-Versionen möglich.

Media Feature ‘pointer’ für Media Queries

Hat’s der Pipo nicht schon immer gesagt? Media Queries machen in ihrer bisherigen Form nur bedingt Sinn. Im Regelfall verwendet man bei Media Queries die Größe des Browserfensters als Parameter um daraufhin das Design zu verändern. Ob ich mein Fenster jetzt aber stark verkleinere oder die Webseite mit einem Handy betrachte – ich weiß nicht, ob ich diese Seite per Maus oder Touch bediene. Willkommen beim neuen Media Feature pointer, welches genau dieses Problem lösen soll.

CSS Device Adaption (fixed portrait/landscape)

Schon einmal ein HTML5-Spiel mit Beschleunigungssensoren als Input entwickelt? So etwas wie diese alten Holzlabyrinthe zum Kippen? Ich habe es einmal versucht. Macht als reine Webapp überhaupt keinen Sinn! Durch das ständige Kippen springt der Bildschirm ständig zwischen Portrait und Landscape Modus hin und her. Aber auch andere Anwendungen haben damit Probleme, wie zum Beispiel BrowserQuest von Mozilla. Lässt sich auf Smartphones nur im Landscape Modus bedienen und dementsprechend bekommt man eine Warnung, wenn man das Spiel im Portrait Modus startet. Mit CSS Device Adaption soll es nun bald möglich sein per CSS zu steuern, ob eine Webapp ausschließlich im Portrait oder ausschließlich im Landscape Modus betrachtet werden darf. Finde ich super! Ein Schlag unter den Gürtel für alle die vorher behauptet haben, alles muss responsive sein und „der Nutzer muss immer selbst wählen dürfen, ob er ein Handy quer hält oder nicht“. Es gibt einfach Fälle, wo er gar nichts zu entscheiden hat. Und das ist auch gut so :P

node-webkit

Obwohl meine Liste noch lang ist und ich bald Schluss machen muss – noch ein wichtiger Punkt. Vielleicht der beste? Es gibt ein total heißes und spannendes Projekt namens node-webkit. Zu finden hier. Ich dachte, ich hätte es hier bereits einmal vorgestellt, aber die Suche ergab keinen Treffer, also muss ich mich geirrt haben. Mit node-webkit können Webapps in echte Desktop-Anwendungen für Mac, Windows und Linux verpackt werden. Das ist im Prinzip ähnlich wie PhoneGap/Cordova im Handybereich. Eine tolle Sache, aber dadurch alleine noch gar nicht so spektakulär. In dem Feld gibt es mittlerweile mehrere Anbieter wie AppJS. node-webkit packt die App dazu in einer Art reinen Chromium Browser, welche nichts anderes macht als die Webapp auszuführen. node-webkit bietet aber eine Besonderheit: Es verbindet den JavaScript-Context des Browser mit einem JavaScript-Context von Node.js! Anders ausgedrückt: Ihr könnt im Browser Node.js verwenden! Voller Funktionsumfang von Node.js in eurer Webapp! Lokaler Dateizugriff? KEIN PROBLEM!

Noch dazu sind die Entwickler von node-webkit in vielen anderen Bereichen fleißig. Sie sind meines Wissens nach die einzigen, die in ihren hybriden Desktop-Webapps den Zugriff auf native Menüs ermöglichen. So erhält man echte native Werkzeugleisten, welche unter Mac z.B. durch AppleScript ohne Probleme angesprochen werden können. Extrem feines Feature.

Ich bin jedenfalls total heiß darauf mal eine Desktop-Anwendung mit node-webkit zu schreiben!

Wrapping Up

Tja, Freunde der Web-Haselnuss. Das war es erst einmal wieder mit meinen kleinen Rückblick. Fürs nächste Mal habe ich noch einige interessante Punkte auf meiner Liste stehen und ich hoffe, es kommen noch ein paar dazu. Kleines Preview? LycheeJS. Behauptet 20.000x schneller zu sein als CocoonJS. Entsprechende Demos werden gerade refactored und sind hoffentlich in wenigen Wochen zugänglich. Den Geschwindigkeitszuwachs glaube ich erst, wenn ich ihn sehe!

Autor: Pipo

...kommt ursprünglich aus der Designerecke, ist aber im Laufe seines Studiums in die Webentwicklung gestolpert. Kann sich seit dem nicht so richtig entscheiden wo er hingehört und wagt deswegen vielleicht die Flucht nach vorne in ein komplett neues Gebiet. Vielleicht Management? Niemand weiß es. Auch er nicht.

Kommentare (0)

Keine Kommentare vorhanden.

Hinterlasse einen Kommentarsenäh

Pflichtfelder sind mit * markiert.