jQuery Europe 2013, Tag 2

Am 20 bis 22. Februar fand der europäische Ableger der jQuery Conference statt. Dieser Post besteht aus einer Zusammenfassung von Tag 2 der Konferenz. Die Zusammenfassung von Tag 1 wurde letzte Woche veröffentlicht.

jQuery Mobile and Responsive Web Design – Todd Parker

Todd Parker ist jQuery Mobile Lead. Sein Vortrag ist vollgespickt mit Informationen und Tipps zu jQuery Mobile und Responsive Webdesign (RWD) mit Fokus auf Performance und dem schwammigen Übergang von Mobile zu Desktop.

Das Ziel von jQuery Mobile: alle Geräte, eine Code-Basis („every device, one code base“).

Todd Parker erklärt – wie bereits andere Redner an der Konferenz – dass es sinnlos ist sich nach Webbrowsern zu richten. Bei der mittlerweile relativ grossen Anzahl an Webbrowsern und erhöhte Veröffentlichungs-Rate ist es nicht mehr möglich sich an einer Version zu binden. Die Zeiten von „wir unterstützen Webrowser X Version Y“ sind am Ende.

Responsive Webdesign ist seit Version 1.3 ein fester Bestandteil von jQueryMobile (siehe auch jQuery Mobile 1.3 Key Changes). jQueryMobile 1.3 funktioniert nicht nur auf Mobiltelefon und Tabletbrowser sondern auch auf dem Desktop. Jedes jQuery Widget ist flexibel (responsive) und richtet sich an die 100%-Breite aus.

Die RWD-Zutaten

Die drei Bestandteile von RWD sind:

  • Fluid layouts
  • CSS3 media queries
  • Flexible images and media

Einige RWD-Beispiele befinden sich unter den Namics Referenzen.

Fluid Layouts

Ein paar Stichworte zu Fluid Layouts (siehe auch Slide):

  • Das Web ist fluid. Die erste Website überhaupt war schon flexibel.
  • Flexible grids benötigen flexiblen Inhalt und flexible Widgets.
  • jQueryMobile widgets sind fluid.
  • Für flexible Inhalte müssen relative Masseinheiten wie %, em oder rem verwendet werden.
  • Für alle Browser gilt standardmässig: 1em = 16px
  • Eine Breite von 640px ergibt 40em (640px / 16px = 40em)
  • Für Media-Queries sollte die em-Einheit verwendet werden, damit sich die Grössen relativ zur Schriftgrösse verhalten

Break Points

Break Points sind die Punkte, bei denen Inhalte sich abhängig von der Breite des Bildschirms bzw. des Webbrowsers, entweder in ihrer Grösse und/oder Position verändern, um möglichst optimal dargestellt werden zu können (Slide).

  • Break Points basieren auf Inhalt und nicht auf Geräten (siehe auch).
  • „Design in Stacks”
  • „Rinse and Repeat”
  • Es gibt zwei Arten von Breakpoints: major und minor
  • Break Points sind nicht generisch. Es gibt keine one-size-fits-all-Lösung.
  • Media Queries reagieren zur View-Port-Breite und nicht zu Container-Breite (z.B. div-Element)

Eines der jQuery Mobile 1.3 Hightlights ist das Table Reflow Widget (TRW). Das TRW ist eine flexible Tabelle welche sich an die Breite des Bildschirms anpasst. Das heisst, ab einer gewissen Breite (Break Points) wird eine weitere Spalte eingeblendet. Oder umgekehrt, werden Spalten versteckt, wenn die Breite des View Ports reduziert wird.

Responsive Images

Todd Parker erklärt wie HD-Bilder mit geringer Dateigrösse an den Browser geliefert werden können. Dafür zitiert er den Artikel Retina Revolution von blog.netvlies.nl.

The bottomline is that heavy compression doesn’t affect the final image as much as you would expect. This is because of the greater amount of pixels in the Retina image, compression artifacts are scaled down and therefore almost unnoticeable.

Für Retina-Displays kann die Qualität sogar auf 0 (!) reduziert werden. Die Kompressions-Artifakte sind kaum sichtbar.

Weiter erklärt Todd Parker wie es mit dem <picture>-Tag (ein Standard in Bearbeitung) möglich sein soll, Responsive-Bilder zu an den Browser zu senden.

Zum Schluss wird die Wichtigkeit der Website-Performance hervorgehoben und, dass die Desktop-First-Denkweise durch Mobile-First ersetzt werden muss. Die Präsentations-Slides „jQuery Mobile + RWD” sind online.

Microsoft ASP.NET <3 jQuery – Andreas Schabes

Andreas Schabes zeigt einen Überblick über das Engagement von Micrsoft im Umgang mit jQuery sowie die Einsatzmöglichkeiten von Webtechnolgien wie CSS3, HTML5 und JavaScript in den neuen Plattformen von Microsoft.

Ein einführendes Zitat von Stephen Walther gibt die Richtung vor:

Our plan is to make jQuery the primary technolgy to use when buildling AJAX applications with Microsoft technologies.

(Anmerkung: Stephen Walther hat Microsoft verlassen).

Behandelt werden die folgenden Themen:

  • JavaScript & Visual Studio, Vorstellung NuGet Package-Manager, Demo der jQuery- und QUnit-Integration
  • jQuery in ASP.NET MVC, Demonstration der kompletten Integration in die IDE, soll das „wirkliche“ Interesse an jQuery-Produkten zeigen und erklärt das Bedürfnis von Microsoft an einem funktionierenden Framework
  • KnockOutJS + SignalR
  • TypeScript
  • Windows 8 Apps & JavaScript

Es bleibt abzuwarten wie (konsequent) Microsoft die Integrationen vorantreiben wird.

Die Slides zu diesem Vortrag sind noch nicht veröffentlicht worden.

Mitigate Maliciousness: Securing the client side – Mike West

Mike West ist Mitarbeiter im Google Chrome Team. Sein 45-minütiger Vortrag ist vollgepackt mit Informationen rund um die clientseitge Sicherheit von Web-Sites und -Applikationen. Er behandelt im wesentlichen die beiden wichtig Security-Themen:

Zu diesen Themen hat Mike West jeweils einen Artikel (CSP & TSL) geschrieben und es empielt sich diese durchzulesen.

iFrames sind auch ein Thema. Neuerdings kennen iFrames das Attribut sandbox. Das Sandbox-Attribut schafft eine besser isolierte iFrame-Umbegung, welche mehr Schutz für den restlichen Website-Inhalt bietet. Zum Beispiel kann die Javascript-Unterstütztung oder der Zugriff auf Flash-Plugins unterbunden werden. Mike West hat dazu einen ausführlichen Artikel geschrieben. Aktuell unterstützen die neusten Versionen von Firefox, Safari und Chrome, sowie IE10 das Sandbox-Attribut (Quelle: Caniuse.com).

Die Slides zu Mike Wests Präsentation sind hier abrufbar.

Drupal & jQuery 7 years later – Théodore Biadala

Seit 2006 ist jQuery Core-Bestandteil von Drupal. Théodore Biadala (Drupal Core) gibt einen Überblick den aktuellen Stand bei Drupal und über die Pläne für die kommende Version 8.

Die Slides zu diesem Vortrag sind noch nicht veröffentlicht worden.

Web on TV – Patrick Laucke

Mit der steigenden Anzahl vormals „webfremder” Endgeräte steigt auch die Anzahl der Anwendungsszarien für Web-Entwickler. Patrick Laucke zeigt was bei dem Design, der Konzeption und der Entwicklung für TV, Spielkonsole & Co. Beachtung finden sollte.

Für die Website-Entwicklung für Fernseher müssen drei Dinge beachtet werden:

  1. Bildschirmgrösse
  2. Eingabe-Möglichkeiten und Nutzungsverhalten
  3. Features und Performance

Websites für Fernseh-Geräte sollten nach den gleichen Prinzipien wie für mobile Endgeräte optimiert werden. Beachtung muss hier ebenfalls das Nutzerverhalten und die „Umgebung“ des Nutzers bekommen. Die Distanz zwischen Sofa und Fernseher lässt den Fernseh-Bilschirm so klein wie ein Mobilgerät aussehen, das man in der Hand hält.

Von den Möglichkeiten her hinken Fernseh-Browser den Mobile-Browsern etwa fünf Jahre hinterher. Fernseher haben vergleichsweise billige Hardware und weniger leistungsfähige Prozessoren.

Die Slides sind auf Slideshare erhältlich.

State of the Art in Web Visualisations – Dio Synodinos

Dio Synodinos beginnt mit Grundlagen und Notwendigkeit von Visualisierung. Danach folgt ein kleiner Rundgang durch die (neuen) Möglichkeiten von aktuellen Entwicklungen im Bereich CSS3, SVG, Canvas, WebGL und deren Bedeutung bei der Visualisierung von Daten. Am Ende werden zudem einige Visualisierungs-Frameworks wie Raphaël, Processing.js, D3.js und Fabric.js vorgestellt.

Slides zu diesem Vortrag sind noch nicht veröffentlicht worden.

Good UI design principles with jQuery Mobile – Anne-Gaelle Colom

Anne-Gaelle Colom beginnt mit einer kurzen Vorstellung zu jQuery Mobile (JQM) und zum generellen Aufbau einer JQM-Website.

Danach folgt eine kurze Einführung in einige wichtigen Design Prinzipien aus den Bereichen:

  • Navigation Models
  • Fehlervermeidung in der Bedienung eines Interface
  • Unterstützung unterschiedlicher Anwendungsarten (z.B. Orientation-Change, Wechsel zwischen Portrait und Landscape)
  • Flexibilät im Umgang mit den Inhalten (z.B. Responsive Table mit Toggle-Funktion)
  • Anpssung der Funktionen an die Möglichkeiten der Endgeräte (z.B. Touchfähigkeit)
  • Farben (Theming)
  • Kommunikation & Feedback (Loader, Alerts, Popups, Dialog)
  • Mentale Modelle (Panels, Shorcuts via Typefilters, Index usw., Listview, Swipe to delete)
  • Zugänglichkeit (semantisches Markup als Basis zum Aufbau einer JQM-Website)

Ergänzt wird dies mit den jeweiligen Code- und Abbildungsbeispielen um dies mit JQM zu implementieren. Diese können in den Präsentations-Slides eingesehen werden

Create.js – Make websites editable with jQuery – Henri Bergius

Diesen Vortrag haben wir leider verpasst, da wir rechtzeitig am Flughafen sein mussten. Die Javascript-Bibliothek CreateJS wird vorgestellt.

Die Slides und Demo-Beispiele haben wir uns trotzdem angeschaut. Das Ziel von CreateJS ist es ein CMS ohne Formulare zu ermöglichen. Das heisst, der Autor editiert Inhalte direkt auf der Live-Seite (siehe Demo).

Die Präsentations-Slides können online abgerufen werden.

Fazit: Welche Themen sind hängen geblieben?

Das Thema Responsive in all seinen Facetten war auch auf dieser Konferenz in vielen Vorträgen präsent.

Das „Projekt jQuery“ mit seinen Teilprojekten ist sieben Jahre nach seiner Veröffentlichung allmächtiger den je. jQuery findet mittlerweile nicht nur in vielen Projekten Einsatz sondern wird auch mehr und mehr fest in Produkte und Frameworks integriert. Drupal, TYPO3, WordPress, Microsoft um nur einige zu nennen.

Die jQuery Foundation setzt mit den nächsten geplanten Versionen mit Themen wie „Verschlankung des Cores“, Fortführunge der „Modualarisierung“ sowie Konzentration auf die Hauptanforderungen die richtigen Schwerpunkte.

Die Organisation und Wahl des Veranstaltungsorts waren besonders.
Einige der sonst hervorragenden Rendner, hätte es geholfen in der Vorbereitung, bei einem alten Hasen wie Christian Heilmann vorbeizuschauen. Dieser hielt spontan Session zum Thema „From geek to a presenter” (Blog-Artikel).

Links und weitere Informationen:
Bilder, 1 Tag
Bilder, 2 Tag

6 Gedanken zu “jQuery Europe 2013, Tag 2

  1. Interessante Einblicke, Merci!, scheint als wäre wirklich nichts auf der Strecke geblieben. Super auch die vielen Verweise auf die interessanten Präsentationen und Demos. saveAll();.

    • Hi Marc
      Danke. Die Informationsdichte ist sehr hoch an solchen Konferenzen. Es lohnt sich alle Slides und verlinkte Artikel genauer anzusehen.

  2. Pingback: Winterliches Wien und jQuery Europe 2013 — DonsTag

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>