HTML5 | t3n News News, Infos, Tipps und aktuelle Artikel zu HTML5 2014-07-29T12:44:16Z t3n Redaktion http://t3n.de/tag/html5 10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 4) http://t3n.de/news/10-hilfreiche-tutorials-quellen-4-559776/ 2014-07-29T12:44:16Z
HTML5, CSS3, UX-Design, Icon-Packs & Co.: In unserer neuen Serie fassen wir für euch regelmäßig neue Tutorials und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler …

HTML5, CSS3, UX-Design, Icon-Packs & Co.: In unserer neuen Serie fassen wir für euch regelmäßig neue Tutorials und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler und -designer sind. Hier kommt der vierte Teil. Tagtäglich stolpern wir über atemberaubende Tutorials, leider verschwinden diese zu oft aus Zeitmangel zwischen anderen Lesezeichen im Browser oder bei Read-It-Later-Webservices. Wir wollen das ändern und zeigen euch die besten Tutorials für die coolste Berufsschicht: Webworker.

Bildschirmfoto 2014-07-29 um 09.56.43

Native Apps waren Gestern?

Håkon Wium Lie ist der CTO von Opera und ein CSS- sowie Webstandards-Pionier und genau deswegen kann er sich diese Aussage leisten. Lesenswert.

Bildschirmfoto 2014-07-29 um 09.59.36

Use-Cases für den Einsatz von responsiven Bildern

Andreas Bovens erklärt im Entwickler-Blog von Opera den Einsatz des picture-Elements.

Bildschirmfoto 2014-07-29 um 11.39.54

Bildervergleich mit purem CSS

Lea Verou zeigt euch, wie sie nur mit CSS einen Vergleichs-Slider von Bildern implementiert.

Bildschirmfoto 2014-07-29 um 10.04.10

Icon-Set: Clear Icons

Ein umfassendes Icon-Set mit 500 verschiedenen Icons in zwei Größen und vier Formaten wird auf appzgear.com angeboten. Ob und wie viel ihr bezahlt bleibt euch überlassen.

Bildschirmfoto 2014-07-29 um 10.07.48

text-decoration ist so 90iger

Mary Lou stellt auf tympanus.net auf atemberaubende Weise vor, wie Inline-Links aussehen können.

Bildschirmfoto 2014-07-29 um 11.42.42

Mintie Flat Icons

Oliver Soian stellt auf pixelbuddha.net sein Icon-Set vor. Flat Icons für Liebhaber.

Bildschirmfoto 2014-07-29 um 10.28.53

Virtuelle Maschinen. Web. Vagrant.

Nicholas Cerminara zeigt euch, wie ihr die Vagrant Cloud (insbesondere Vagrant Share) optimal ausnutzen könnt.

Bildschirmfoto 2014-07-29 um 10.34.33

CSS-Columns? Hier steht alles was du wissen musst

Katy Decorah zeigt euch auf css-tricks.com, wie ihr mit den CSS-Columns umgehen könnt und an welche Grenzen ihr stoßen werdet.

Bildschirmfoto 2014-07-29 um 10.50.45

Material Design und Polymer: Eine Fusion

Googles „Material Design“ ist in aller Munde – auf scotch.io findet ihr hier und hier zwei Tutorials, die euch an dieses Thema heranführen.

Bildschirmfoto 2014-07-29 um 10.57.29

Clipping mit CSS und SVG

Sara Soueidan erklärt euch, wie ihr in Zukunft clip-path und <clipPath> meistern könnt. Jeder, der das SVG-Format kennt, sollte sich in diesen Text einlesen.

Wenn euch diese Liste gefallen hat, findet ihr hier den dritten und hier den zweiten Teil der Serie.

Welche Tutorials habt ihr gefunden, die unbedingt in diese Liste gehören?

]]>
Mario Janschitz
10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 3) http://t3n.de/news/10-hilfreiche-tutorials-quellen-2-554795/ 2014-07-01T12:58:04Z
HTML5, CSS3, UX-Design, Icon-Packs &amp; Co.: In unserer neuen Serie fassen wir für euch regelmäßig neue Tutorials und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler …

, CSS3, UX-Design, Icon-Packs & Co.: In unserer neuen Serie fassen wir für euch regelmäßig neue und Quellen zusammen, die aus unserer Sicht extrem hilfreich für und -designer sind. Hier kommt der dritte Teil. Tagtäglich stolpern wir über atemberaubende Tutorials, leider verschwinden diese zu oft aus Zeitmangel zwischen anderen Lesezeichen im Browser oder bei Read-It-Later-Webservices. Wir wollen das ändern und zeigen euch die besten Tutorials für die coolste Berufsschicht: Webworker.

Bildschirmfoto 2014-07-01 um 13.54.02

Wunderbare :hover-Effekte

Auf Codrops findet ihr :hover-Effekte der Extraklasse – inklusive detaillierter Beschreibung.

Bildschirmfoto 2014-07-01 um 13.57.02

100 kostenlose Icons als PSD, AI oder Webfont

Freebisbug.com stellt euch 100 zu verfügung – kostenlos und in den wichtigsten Formaten.

Bildschirmfoto 2014-07-01 um 13.56.47

Showcase zu Daten-Visualisierung für mobile Geräte

Auf MobileVis findet ihr eine Quelle der Inspiration wenn es darum geht, Daten auf mobilen Geräten darzustellen. Definitiv einen Bookmark wert.

Bildschirmfoto 2014-07-01 um 13.55.26

Iconset im Flat Design

Smashing Magazine stellt euch ein Iconset – inklusive einer alternativen Version – zur Verfügung. Flat-Desig par excellence und ein absoluter Hingucker.

Bildschirmfoto 2014-07-01 um 13.54.43

Die Zukunft von WordPress

Das Team hinter Envato stellt sich die Frage, wie eine mögliche Zukunft von aussehen könnte. Ein Exkurs über JavaScript, WordPress als Enterprise-Lösung und Wachstum.

Bildschirmfoto 2014-07-01 um 13.54.23

Sexy Inline-Links

Eine weitere Tutorial-Perle von Codrops. Diesesmal beschäftigt sich Mary Lou mit der Formatierung von Links mit SVGs und Pseudo-Elementen.

Bildschirmfoto 2014-07-01 um 14.00.38

Bocoup stellt sich die Frage: overflow:auto|hidden|visible

Auf Bocoup stellt Greg Smith die Frage nach einem Default-Wert für overflow in dem Raum und erklärt, warum diese Frage wichtig ist.

Bildschirmfoto 2014-07-01 um 14.04.19

Wird das will-change-Property alles ändern?

Genau diese Frage stellt Sara Soueidan in ihrem Artikel für Opera – und liefert auch Antworten.

Bildschirmfoto 2014-07-01 um 14.09.39

Der Endgegner CSS?

In diesem Artikel lest ihr, wie ihr den Seitenaufbau durch CSS optimieren könnt. Lesenswert.

Bildschirmfoto 2014-07-01 um 14.11.57

Das Hamburger-Icon verfehlt seinen Zweck

Das omnipresente „Hamburger-Icon“, das Navigationsmenüs anzeigt, hat ein Problem: Es ist benutzerunfreundlich. Dieser Artikel zeigt euch warum und wie ihr das Problem lösen könnt.

Wenn euch diese Liste gefallen hat, dann findet ihr hier den zweiten, und hier den ersten Teil der Serie.

Welche Tutorials habt ihr gefunden, die unbedingt in diese Liste gehören?

]]>
Mario Janschitz
UX und HTML5: So verbesserst du die User-Experience mobiler Web-Apps http://t3n.de/magazin/gute-user-experience-mobilen-web-apps-ux-html5-233371/ 2014-06-16T08:58:31Z
Kaum eine Webtechnologie hat in den letzten Jahren für so viel Furore gesorgt wie HTML5. Vor allem für mobile Web-Apps ist die Technik interessant, da diese nicht den Kontrollmechanismen der …

Kaum eine Webtechnologie hat in den letzten Jahren für so viel Furore gesorgt wie . Vor allem für mobile Web-Apps ist die Technik interessant, da diese nicht den Kontrollmechanismen der App-Stores unterworfen sind. Und mittlerweile ist auch die User-Experience dieser nicht mehr weit entfernt von der Nutzererfahrung einer nativen Applikation.

Wer eine native iPhone-App vertreiben möchte, muss zwangsläufig durch den Apple App Store. Dabei wird nicht nur eine Zwangsabgabe von 30 Prozent fällig – die Entscheidung, wer reinkommt und wer nicht, hängt auch von Apples Wohlwollen ab. Das hält zwar Viren und Schadsoftware fern, verhindert aber auch alle Inhalte, die nicht ins Weltbild des Hardware-Herstellers passen.

Web-Apps mit HTML5 sind die Alternative. Sie starten wie Websites im Browser und erfordern keine Installation. Was landläufig als HTML5 bezeichnet wird, ist eine Kombination aus JavaScript, CSS-Effekten und modernen Browser-Funktionen, die sich mit HTML-Befehlen abrufen lassen. Das heißt: Jede Web-App ist nur so gut wie der Browser, der sie aufruft. Die gute Nachricht: Der aktuelle iPhone- und Android-Browser ist durch die Ausstattung mit der Rendering-Engine WebKit ziemlich gut – wenn nicht gar der Beste auf dem Markt. Auch wenn Google kürzlich ankündigte, bei Chrome in Zukunft auf einen WebKit-Fork namens Blink zu setzen, dürfte sich daran nichts ändern. Und so müssen User, die Web-Applikationen nutzen, in Sachen User-Experience im Vergleich zu nativen Apps kaum noch Kompromisse eingehen. Das soll im Folgenden eine Auswahl der spannendsten HTML5-, CSS3- und JavaScript-Technologien verdeutlichen.

Ein HTML5-Geo-Tracker

Ein Smartphone-Browser kann heute schon auf fast alle Funktionen des Telefons zugreifen, die auch native Apps abrufen können. Bewegungssensor und Kamera? Kein Problem. Mit einer einzigen Zeile JavaScript lässt sich die GPS-Position eines Smartphones ermitteln:

GPS-Position ermitteln

navigator.geolocation.getCurrentPosition();

Listing 1

Das Gerät orientiert sich nicht nur an GPS-Satelliten, sondern auch an sichtbaren Wireless-Netzwerken. So behält man auch in geschlossenen Räumen die Orientierung. Dass die Position in Längen- und Breitengrad angegeben ist, mag für Pfadfinder aufschlussreich sein – allen anderen hilft Google Maps weiter: Mit der Static-Maps-API verwandeln sich die Koordinaten in eine detaillierte Karte:

Ortskoordinaten in eine Karte verwandeln

navigator.geolocation.getCurrentPosition(function(position){
 var map = document.getElementById('map');
 var mapSrc = "http://maps.googleapis.com/maps/api/staticmap";
 mapSrc += "?markers="+position.coords.latitude+","+position.coords.longitude;
 mapSrc += "&sensor=true";
 map.src = mapSrc;
});

Listing 2

Um die aktuelle Position zu speichern und beim nächsten Start auf einer Karte anzuzeigen, kommt localStorage zum Einsatz – eine einfache Datenbank im Browser des Smartphones. Datenbankeinträge lassen sich einfach per JavaScript abspeichern und wieder auslesen:

localStorage einsetzen

localStorage.setItem(key,value);
value = localStorage.getItem(key);

Listing 3

Der Clou: Die App speichert die Daten auf dem Gerät und muss sie nicht an einen Server übertragen. Dadurch lässt sie sich auch bei schlechtem Empfang zuverlässig bedienen. Kombiniert man nun beides in einer kleinen HTML5-App, sieht das Ganze etwa so aus:

HTML5-Geo-Tracker

var coordinates;
var loadFromLocalStorage = function() {
 var marker = "";
 for(key in localStorage) {
 marker += localStorage.getItem(key)+"|";
 }
 return marker;
};
navigator.geolocation.getCurrentPosition(function(position){
 coordinates = position.coords.latitude+","+position.coords.longitude;
 var map = document.getElementById('map');
 var mapSrc = "http://maps.googleapis.com/maps/api/staticmap";
 mapSrc += "?markers="+loadFromLocalStorage();
 mapSrc += "&size=" + window.innerWidth + "x" + window.innerHeight;
 mapSrc += "&sensor=true";
 map.src = mapSrc;
 localStorage.setItem(Date.now(),coordinates);
});

Listing 4

Einfache Marker auf der Karte sind zwar schön und gut, aber richtig cool wird es erst, wenn man eigene Fotos auf der Karte verlinken kann. Aber halt – ist das nicht ein Zugriff auf eine Hardware-Funktion, die nativen Apps vorbehalten ist? Ganz und gar nicht. Denn seit iOS 6 und Android 4 beherrscht auch der WebKit-Browser das Datei-Upload-Formularfeld:

Das Datei-Upload-Formularfeld

<input type="file">

Listing 5

Auf Apple-Geräten startet diese Zeile die Kamera. Foto schießen und schon steht das Bild in der Web-App zur Verfügung. Genau wie in nativen Apps lassen sich so auch Fotos aus der Galerie auswählen, unter Android sogar solche aus einer Dropbox.

Bessere User-Experience in Formularen

Der Datei-Upload ist nicht das einzige neue Formularfeld, das seinen Weg auf das Smartphone gefunden hat (Seite 136). Ebenfalls neu sind die Typen „datetime“, „email“ und „tel“:

Neue HTML5-Input-Typen

<input type="datetime">
<input type="tel">
<input type="email" required>

Listing 6

Was auf den ersten Blick wie normale Textfelder aussieht, entpuppt sich beim Antippen als äußerst nützlich: Anstelle der Standardtastatur bieten diese Felder spezielle Eingabemöglichkeiten für E-Mail-Adressen und Telefonnummern an. Das Feld „datetime“ hat sogar eine Art Einstellrad zum Auswählen eines Datums mit Zeitangabe (das klappt übrigens auch mit „date“ oder „time“ alleine).

Das Attribut „required“ sorgt dafür, dass sich das Formular erst abschicken lässt, wenn der Nutzer eine E-Mail-Adresse eingetragen hat. Das funktioniert natürlich auch mit allen anderen Formularfeldern. Der entscheidende Vorteil dieser clientseitigen Validierung: Die Daten sind geprüft, wenn sie zum Server gehen – für langsame Internetverbindungen ein Segen. Mit einer CSS Pseudoklasse lässt sich direkt darstellen, ob ein Formularfeld die richtigen Angaben enthält:

Validierung von Formularfeld-Eingaben

input:focus:invalid {
border-color: red;
}

Listing 7

In unserem Beispiel wird das Feld rot umrandet, wenn der Nutzer eine unzulässige Eingabe getätigt hat.

Multi-Touch per JavaScript

user experience ux html5 web apps
Mit Hammer.js lassen sich Multi-Touch-Gesten in Web-Applikationen einbauen. jQuery ist für den Einsatz von Hammer.js nicht nötig.

JavaScript-Bibliotheken sind immer noch da hilfreich, wo der Browser sich etwas „zu doof“ anstellt. Ein solches Beispiel ist Multi-Touch: Mit Bordmitteln lässt sich zwar feststellen, ob gerade ein oder zwei Finger über das Display gleiten – jedoch nicht, welche Geste sie ausführen. Hier kommt Hammer.js ins Spiel. Die Open Source-Library von Eight Media erweitert die interne Event-Liste um die typischen Multi-Touch-Gesten. Neben Pinchen, Swipen, Rotieren und Transformen lassen sich so Drag-and-Drop-Funktionen in die Web-App einbauen:

Drag-And-Drop-Funktion

Hammer(el).on("drag", function() {
 console.log("Lass mich los!");
});

Listing 8

Web-Apps Offline? Kein Problem

Für langsame Internet-Verbindungen bietet HTML5 ein besonders hilfreiches Feature: Das Cache-Manifest legt fest, welche Stylesheets, Bilder und HTML-Daten auf dem Gerät zwischengespeichert werden sollen. Beim nächsten App-Start lädt die App diese dann nicht aus dem Internet, sondern direkt aus dem Browsercache – selbst wenn man gerade im Funkloch steht:

Cache-Manifest

CACHE:
#images
./img/cover.png

#style sheets
./css/app.css
./css/fonts.css
./css/themes.css

#javascript
./js/app.js

NETWORK:
*

Listing 9

Entwickler binden Cache-Manifest direkt am Anfang in das öffnende <html>-Tag mit dem Attribut „manifest“ ein. Das Manifest selbst ist eine einfache Textdatei, die man im Editor seiner Wahl bearbeiten kann. Statt die Dateien von Hand zusammenzutragen, sollte jedoch lieber das Tool „manifestR“ genutzt werden: Das Bookmarklet erzeugt mit einem Klick eine vollständige Liste. Jetzt gilt es nur noch, dafür zu sorgen, dass der Webserver auch versteht, was eine Manifestdatei ist. Das geht am einfachsten über den Eintrag einer Zeile in der .htaccess-Datei:

Registrierung der Manifest-Datei

AddType text/cache-manifest .appcache

Listing 10

Aber Vorsicht: Einmal im Cache, bleiben die Assets hartnäckig auf dem Gerät. Geänderte Dateien werden nicht erkannt, was zu einer Menge Frust beim Entwickler führen kann. Idealerweise sollte das Cache-Manifest daher der letzte Schritt bei der App-Entwicklung sein.

App-Icon auf Home-Screen

So beeindruckend die Features von HTML5 auch sein mögen, ohne Icon auf dem Home-Bildschirm wirkt eine Web-App nicht wie eine vollwertige Applikation. Auch die Symbolleisten des Browsers nerven irgendwie und nehmen unnötig viel Platz weg. Doch wenige Zeilen HTML-Code verwandeln eine Website in eine richtige Web-App:

App-spezifische Meta-Angaben

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="./img/Icon@2X.png" />

Listing 11

Wenn der Nutzer die Seite zum Home-Bildschirm hinzufügt, erhält er statt der üblichen Miniaturvorschau das App-Symbol angezeigt. Das Icon muss genau 114 mal 114 Pixel groß sein – um die abgerundeten Ecken und den typischen Glanzeffekt kümmert sich iOS. Obwohl es Apple-Touch-Icon heißt, funktioniert das Symbol auch unter Android (Inspiration für gute App-Icons findet man online). Außerdem läuft die App nun im Vollbildmodus, die Browser-Elemente sind verschwunden. Damit unterscheidet sich die Web-App kaum noch von einer nativen Applikation.

Fazit

Mit Hilfe neuer HTML5-, CSS3- und JavaScript-Technologien stehen Web-Apps in Sachen Nutzererlebnis nativen Applikationen kaum noch nach. Von Geolokalisierung und Zugriffen auf Hardware-Komponenten bis hin zu Multi-Touch können Entwickler mittlerweile die Funktionalität einer nativen App in einer Web-Applikation nahezu 1:1 abbilden. Und täglich kommen neue spannende Technologien dazu, die in mobilen Browsern noch mehr möglich machen.

Buchinfo „Apps mit HTML5 und CSS3”
Apps, die auf Android, iPhone und Windows Phone funktionieren? Florian Franke und Johannes Ippen zeigen, wie das geht (http://amzn.to/15858Gg). Auf 480 Seiten lernt man alles über die Planung, Gestaltung und Entwicklung einer App, wie man die Features von HTML5 richtig einsetzt und wie Frameworks das Leben leichter machen. Abgerundet wird das Ganze durch eine Anleitung zur Veröffentlichung im App Store von Apple und Google Play. Der Titel erscheint in zweiter Auflage bei Galileo Computing, ISBN 978-3-8362-1848-1.
]]>
Johannes Ippen
Mobile Web auf Speed: Mobile Web-Performance analysieren und verbessern http://t3n.de/magazin/mobile-web-performance-analysieren-verbessern-mobile-web-233364/ 2014-06-11T07:50:27Z
Mobile bewegt das Web und dank HTML5 gewinnt das Thema weiter an Fahrt. Mit steigender Bedeutung des mobilen Internets werden die Anforderungen an Qualität, Performance und Stabilität ebenfalls …

Mobile bewegt das Web und dank gewinnt das Thema weiter an Fahrt. Mit steigender Bedeutung des mobilen Internets werden die Anforderungen an Qualität, Performance und Stabilität ebenfalls wichtiger. Welche Anforderungen man an seine Website für mobile Besucher als Messlatte anlegen sollte und welche Lösungen sich für die Verbesserung der Performance eignen, zeigt dieser Artikel.

Nutzer mobiler Geräte erwarten eine höhere Performance als auf den großen stationären Brüdern. So nimmt die die Akzeptanz beim Nutzer ab fünf Sekunden deutlich ab. Fünf Sekunden? Das hört sich für eine Webseite im Jahr 2014 nach einer Ewigkeit an. Ein Blick in die Realität ist ernüchternd, denn durchschnittlich warten Nutzer neun Minuten am Tag auf Webseiten. Auf mobilen Geräten beträgt die durchschnittliche Ladezeit für E-Commerce-Sites in Deutschland sogar knapp 18 Sekunden. Hier wandelt sich technische Performance in kommerzielle Performance um. Leistungssteigerung ist damit nicht länger eine technische Qualität, sondern beeinflusst das Geschäftsmodell und damit den Umsatz.

Was ist Performance?

Mit Performance kann vieles gemeint sein: Ein Entwickler betrachtet in der Regel zuerst die Antwortzeiten seines Systems - Administratoren betrachten hingegen die Kapazität einer IT-Umgebung. Dieser Artikel widmet sich in erster Linie der Latenz im Client und den folgenden Fragen: Wie schnell fühlt sich die Seite für den Nutzer an? Wie schnell kann der Nutzer mit der Seite interagieren?

Bei der Messung sind dabei drei Browser-Events entscheidend, die nach dem Aufruf einer URL im Browser ermittelt werden. Bei „start render“ beginnt der Browser die Seite darzustellen. Ab „document complete“ ist eine Interaktion des Nutzers mit der Seite möglich. „Fully loaded“ meldet das vollständige Laden einer Webseite. Wann diese Events während des Aufrufs erreicht werden, wird von den Abhängigkeiten beim Rendern, der Größe und Komplexität der Ressourcen und der Netzwerkverbindung beeinflusst.

Die richtigen Tools

Ohne ein Messinstrument ist es so gut wie unmöglich, mobile Web-Performance objektiv und wiederholbar zu bewerten. Je nach Tools können Flaschenhälse aber identifiziert und beseitigt werden. Bei der Messung selbst ist zwischen Client und Verbindung zu unterscheiden. Bei dem Client kann zwischen einem realen Gerät, Simulator, PC-Browser mit diversen Plugins oder spezieller Testinstanz gewählt werden. Mit Hilfe der Verbindungen lassen sich Bandbreiten und Latenzen testen. Hier kann vom Carrier über W-LAN bis zur Bandbreitenbegrenzung durch Tools ausgewählt werden. Es gibt eine Vielzahl von Tools, die zum Teil als Online-Service, Browser-Plugin oder über die Command Line bei der Analyse unterstützen.

mobile web performance google pagespeed
Für die Performance-Analyse lassen sich viele Tools wie beispielsweise die Google Page Speed Insights nutzen.

Einen mehr als guten Mittelweg stellt die empfehlenswerte Lösung dar. Der Service bietet die Möglichkeit, Performance-Tests über einen öffentlichen Service und verschiedenen Test-Locations weltweit durchzuführen sowie eine eigene Instanz in den Entwicklungsprozess zu integrieren.

Google Page Speed Insights ist mit Webpagetest.org vergleichbar, unterstützt aber die Darstellung des Critical Path, der die Abhängigkeiten beim Rendering optisch darstellt. Die Google Page Speed Insights sind auch als Browser-Plugin (Chrome und Firefox) verfügbar. Zusammen mit Hosted Scripting oder dem Batch Processing über die Command Line können außerdem komplexe Performance-Tests bequem automatisiert werden.

Beispiel eines Hosted Scripting

setUserAgent Mozilla/5.0 (iPhone. U. CPU like Mac OS X. en) AppleWebKit/420+ 
(KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3 

setViewportSize 320 365 
navigate http://www.example.com

Listing 1

Weitere empfehlenswerte Tools sind beispielsweise Adobe Edge Inspect und Weinre.

Insgesamt sollte man einen Kompromiss zwischen möglichst realer Umgebung sowie Aufwand und Kosten für Tests während der Optimierung wählen. Auch die Wiederholbarkeit der Messung ist relevant. Ein echter Wert mit einem unbestimmten UMTS-Delay ist zwar real, aber schwer auszuwerten. Daher ist die Kenntnis aller Parameter entscheidend.

Flaschenhälse und Lösungen

Flaschenhälse mit Optimierungspotenzial gibt es im Bereich Performance eine ganze Menge. Im Folgenden die wichtigen Ansatzpunkte, um die mobile Web-Performance zu steigern:

Webinfrastruktur konfigurieren

Die Webserver sollten so konfiguriert sein, dass eine gzip-Kompression und HTTP-Keep-Alive genutzt werden. Durch die Kompression wird das Volumen der übermittelten Daten verkleinert, durch Keep Alive wird die Verbindung offen gehalten. Korrekte HTTP-Caching-Header für statische Dateien zu setzen ist Pflicht, sie für dynamische Dateien korrekt zu erzeugen die Kür. Browser-Caching ist eine der günstigsten und effektivsten Maßnahmen zur Performance-Verbesserung – mit den Worten von Steve Souders: „The fastest HTTP request is the one not made.“

Minifying

JavaScript, CSS und HTML sollte „minifiziert“, also in schlanker Form mit wenig Codezeilen, verwendet werden. Für die Entwicklung von pflegbarem Code ist dies zwar nicht von Vorteil, aber es gibt eine Vielzahl von Werkzeugen wie Google Closure Compiler oder YUI Compressor, die dies bei der Überführung in eine Produktionsversion konvertieren können. Front-End-Optimizer-Lösungen (FEO) können dies ebenfalls zur Laufzeit durchführen.

Non Blocking JavaScript

Asynchrones Laden von JavaScript über das Attribut <script async> ist für externe Skripte eine Anweisung, die von vielen Browsern schon unterstützt wird. Ebenfalls können JS-Loader hilfreich sein, die Abhängigkeiten unter verschiedenen JavaScript-Dateien zu erkennen und Skripte asynchron nachzuladen. Beispiele hierfür sind RequireJS oder LABjs.

Reduce HTTP-Requests

HTTP-Requests sind aufgrund der begrenzten Connections und höherer Latenz auf mobilen Geräten eine besondere Herausforderung. Auch wenn man es gewohnt ist, JavaScript und CSS in externen Dateien auszulagern, kann es sich bei kleineren dynamischen Teilen anbieten, diese mit in den HTML-Code einzubetten.

Mehrere statische JavaScript- und CSS-Dateien sollten zusammengefügt werden. Um weiterhin pflegbaren Code zu behalten, liegt es nahe, ebenso wie beim Minifying zwischen Development (organisiert und lesbar) und Produktionsdateien (Performance optimiert) zu unterscheiden.

Eine weitere Möglichkeit, Requests zu reduzieren, ist das Einbetten von Grafiken über eine Data-URI (Unified Ressource Identifier). Hier wird die Grafik nicht als Datei referenziert, sondern Base-64-kodiert als Data-URI angegeben. Beispiel:

Data-URI

<img xsrc="data:image/png.base64,iVBORw0KGgoAAAANSUhEUgAAAAUA 
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

Listing 2

Dies ist in HTML wie auch in CSS oder JavaScript möglich. Doch Vorsicht: Das ist nicht immer sinnvoll. Durch das Einbauen wird die einzubettende Datei ebenfalls größer. Eine gute Kombination ist die Verwendung von Data-URIs und Hintergrundgrafiken in externen CSS-Dateien, die CSS Sprites überflüssig machen.

RESS

Inhalte mit Hilfe von Infrastruktur schon für den Client zu optimieren, wird heute auch gerne als Responsive Webdesign with Server Side Components (RESS) bezeichnet. Dadurch können HTML, JavaScript und CSS schon vorgefiltert und Bilder können auf die korrekte Größe skaliert werden. Im Gegensatz zum User-Agent-Sniffing wird hier Feature Detection mit Browser Detection verbunden. Das hat den Vorteil, dass Anpassungen variabel im Client oder bereits auf dem Server durchgeführt werden können. Für die Reduktion der Inhalte ist das die effektivste Lösung, erfordert aber auch einen Eingriff in die IT-Infrastruktur. Ein Beispiel ist hier die Skalierung von Hintergrundgrafiken in CSS, die durch Verwendung von Data-URIs nicht nur effektiver als CSS Sprites sind, sonder das Volumen sogar noch weiter minimieren.

Delayed Image

Bilder stellen etwa zwei Drittel des Umfangs einer Webseite dar, deshalb lohnt sich – neben der Optimierung über RESS – eine weitere Betrachtung. Bilder verzögert oder erst auf Anforderung zu laden, löst das „document complete”-Event weitaus eher aus, da Abhängigkeiten beim Laden und Rendern umgangen werden.

Hierfür existieren diverse Lazy Loader. Bei der Verwendung eines solchen Loaders ist zu beachten, dass einige Bilder (zum Beispiel Logo, 1. Produktbild) nicht verzögert geladen werden sollten, weil diese als erstes im Sichtfeld des Nutzers erscheinen. Auch wenn das Lazy Loading wiederum einen Overhead mit JavaScript erzeugt, erzielt man bei Seiten mit vielen Bildern dennoch eine bessere Gesamtperformance im Client.

mobile web performance performance triangle
Die Kosten für die Entwicklung einer mobilen Website ergeben sich primär aus den Faktoren Performance, Sicherheit und Design. Legt man Wert auf alle drei Aspekte, wird die Website entsprechend kostspieliger.

Performance Killers

Neben den Optimierungen existieren auch einige Performance Killer, die sich aus der Optimierung an der falschen Stelle ergeben können. Trotz der oben genannten Verbesserungen können diese durch 3rd-Party-JavaScript (Werbung, Tracking, Soziale Netze) zunichte gemacht werden. Durch Latenzen im mobilen Netz benötigen DNS-Lookups mehr Zeit, wodurch Domain Shading (gerne verwendet, um bei PC Browsern die Performance zu erhöhen) hier kontraproduktiv ist. Verwendetes JavaScript mit document.write unterbricht das Rendering, das häufig in Scripts für Tracking genutzt wird. Wenn der Server nicht antwortet, kann ein derartiges Script die Anzeige im schlimmsten Fall verhindern. Webpagetest.org verfügt über die SPOF-Funktion (Simulate failure of specified domains), um diesen Fall zu simulieren.

Langsame Server bei der Auslieferung des HTML-Codes bremsen trotz aller Front-End-Optimierung die Darstellung beim Client aus. Bei der Entwicklung von dynamischen Sites sollte man daher immer von dem Fall ausgehen, dass auch das schnellste System langsam werden oder gar ausfallen kann. Alle Netzwerk- und DB-Operationen sollte man aus diesem Grund stets mit engen Timeouts und gegebenenfalls mit einem Hinweis an den Nutzer

Fazit

Ein Messinstrument für die Analyse der Abhängigkeiten ist notwendig und der erste Schritt in die richtige Richtung. Performance ist ein Mindset bei der gesamten Entwicklung und Architektur. Die Performance erst am Ende eines Projekts zu betrachten, wird schnell sehr aufwändig und teuer. Das geliebte JavaScript-Framework nicht gleich zu benutzen oder die vermeintlich schnelle Variante bei der Implementierung zu wählen, ist anstrengend und verlangt Disziplin. Doch am Ende zahlt sich eine schnell ladende mobile Website mehr als aus und stellt den User

]]>
Roland Gülle
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials http://t3n.de/news/10-freie-html5-435735/ 2014-06-01T09:13:02Z
HTML5 und CSS3 bilden die Standards, die Webseiten- und Mobile-Web-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und Tutorials auf Basis dieser Technologien – vor …

und bilden die Standards, die Webseiten- und Mobile-Web-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und auf Basis dieser Technologien – vor allem . Im Folgenden findet ihr ansprechende Beispiele inklusive Demo und Download-Link sowie eine handvoll Online-Tutorials  zum Thema.

1. CSS3-Dropdown-Menü-Tutorial

(Demo | Tutorial)

 Script-Tutorials CSS3 Dropdown-Menü Tutorial
Script-Tutorials CSS3 Dropdown-Menü Tutorial

2. OurTuts-Dropdown-Menü mit HTML5 und CSS3 (inklusive Tutorial)

(Demo | Tutorial)

OurTuts DropDown-Menü mit HTML5 und CSS3 (inkl. Tutorial)
OurTuts DropDown-Menü mit HTML5 und CSS3 (inkl. Tutorial)

3. Tutorial für Responsive-Dropdown-Menü

(Demo | Tutorial)

Responsive CSS3 Dropdown-Menü Tutorial
Responsive CSS3 Dropdown-Menü Tutorial

4. Tutorial für CSS3-Dropdown-Menü von Red-Team-Design

(Demo | Tutorial)

Red-Team-Design CSS3 Dropdown-Menü-Tutorial
Red-Team-Design CSS3 Dropdown-Menü-Tutorial

5. CSS3-Dropdown-Menü-Script-Tutorials

(Demo | Tutorial)

Script-Tutorials CSS3 Dropdown-Menue
Script-Tutorials CSS3 Dropdown-Menue

6. CSS3-Dropdown-Menü-Tutorial von Designmodo

(Demo | Tutorial)

Designmodo CSS3-Dropdown-Tutorial
Designmodo CSS3-Dropdown-Tutorial

7. Musical-Dropdown-Menü-Tutorial

(Demo | Tutorial)

Musical Dropdown-Menü-Tutorial
Musical Dropdown-Menü-Tutorial

8. Webdesignerwall-CSS3-Dropdown-Menu

(Demo | Tutorial)

Webdesignerwall CSS3 Dropdown Menu
Webdesignerwall CSS3 Dropdown Menu

9. Mobile Navigation inklusive Dropdown-Menü

(Demo | Tutorial)

Mobile Navigation inkl. Dropdown Menü
Mobile Navigation inkl. Dropdown Menü

10. TutsPlus-Dropdown-Menü mit HTML5, CSS3 und JQuery (inklusive Tutorial)

(Demo | Tutorial)

TutsPlus Dropdown Menü mit HTML5, CSS3 und JQuery (inkl. Tutorial)
TutsPlus Dropdown Menü mit HTML5, CSS3 und JQuery (inkl. Tutorial)

11. Pure-CSS-Dropdown-Menu im Apple-Stil

(Demo | Tutorial)

CSS3 Dropdown Menu
Line25 Dropdown Menu mit HTML5 und CSS3. (Inkl. Tutorial)

12. CSS-Dropdown-Menu – Flat Design

(Demo | Tutorial)

CSS3 Dropdown Menu
Andor Nagy's Dropdown Menu mit CSS3. (Inkl. Tutorial)

13. Simples CSS3-Dropdown-Menü

(Demo | Tutorial)

CSS3 Menu
Htmlgoodys.com Dropdown Menu mit CSS3. (Inkl. Tutorial)

14. Horizontales Dropdown-Menü

(Demo | Tutorial)

CSS3 Dropdown Menu
Oliver Gast's Dropdown Menu mit CSS3. (Inkl. Tutorial)

15. Flat-Dropdown-Menu-Tutorial

(Demo/Tutorial)

CSS3 Dropdown Menu
Flat Dropdown Menu mit CSS3. (Inkl. Tutorial)

16. Animiertes CSS3-Dropdown-Menü

(Demo | Tutorial)

CSS3 Dropdown Menu
Script-tutorials.com animiertes Dropdown Menu mit CSS3. (Inkl. Tutorial)

17. CSS3-Dropdown-Menü

(Demo | Tutorial)

CSS3 Dropdown Menu
Shizoo Design Dropdown Menu mit CSS3. (Inkl. Tutorial)

18. Colorful CSS3-Animated-Menu

(Demo | Tutorial)

CSS3 Menu
Tutorialzine Dropdown Menu mit CSS3. (Inkl. Tutorial)

19. Another Simple CSS3-Dropdown-Menu

(Demo/Tutorial)

CSS3 Menu
Einfaches CSS3 Menu Beispiel auf CSSDeck.

20. CSS3-Mega-Drop-Down-Menu

(Demo | Tutorial)

CSS3 Dropdown Menu
Designmodo's Mega Dropdown Menu mit CSS3. (Inkl. Tutorial)

Dieser Artikel ist eine Überarbeitung eines Artikels aus dem Jahr 2013. Autor des Originalartikels ist Andy Lenz. Letztes Update des Artikels: 1. Juni 2014

]]>
Ilja Zaglov
10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 2) http://t3n.de/news/10-hilfreiche-tutorials-quellen-548244/ 2014-05-31T11:12:01Z
HTML5, CSS3, UX-Design, Icon-Packs &amp; Co.: In unserer neuen Serie fassen wir für euch regelmäßig neue Tutorials und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler …

, CSS3, UX-Design, Icon-Packs & Co.: In unserer neuen Serie fassen wir für euch regelmäßig neue und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler und -designer sind. Hier kommt der zweite Teil. Tagtäglich stolpern wir über atemberaubende Tutorials, leider verschwinden diese zu oft aus Zeitmangel zwischen anderen Lesezeichen im Browser oder bei Read-It-Later-Webservices. Wir wollen das ändern und zeigen euch die besten Tutorials für die coolste Berufsschicht: Webworker.

node.js_featured_01

So nutzt du Node.js und MongoDB

In diesem Artikel zeigt das Smashing Magazine, wie zwei der revolutionärsten Technologien miteinander verwendet werden können.

Offizielles HTML5 Logo. (Grafik: W3C)

So nutzt du das picture-Element für responsive Bilder

Bilder für verschiedene Viewport-Größen optimiert darzustellen ist immer noch ein Problem in der . Ein Tutorial auf Tutsplus zeigt euch die neuen Möglichkeiten mit dem picture-Element – abseits von max-width:100%;

Bildschirmfoto 2014-05-30 um 10.55.09

8 hilfreiche Tipps für deine Command-Line

Jeder weiß: Die Command-Line von Unix-Systemen ist unglaublich mächtig. Doch ist gerade das der Grund, warum wir viele Kommandos nicht kennen. Mitchell Cohen zeigt euch acht Programme, die es in sich haben.

Auch Spotify geizt nicht mit „parallaxen“ Effekten.

Parallax, aber performant

Die Parallax-Technik ist noch immer in aller Munde. Leider sind die Webprojekte, die diese Technik verwenden, meistens sehr langsam. Auf Medium zeigt euch Dave Gamache, welche Fehler ihr im Einsatz mit dieser Technik vermeiden solltet.

Bildschirmfoto 2014-05-30 um 10.57.51

Einblicke in den Frontend-Workflow bei edenspiekermann

Spiros Martzoukos präsentiert den Frontend-Workflow von edenspiekermann – zwischen OOCSS, SMACSS und Styleguides.

Bildschirmfoto 2014-05-30 um 11.00.14

Lesenswerte Analyse zum neuen Logo von PayPal und warum es versagt

PayPal hat ein neues Logo. Benjie Moss zeigt euch, dass auch IT-Konzerne Grundlagenfehler im Design machen können. Eine lesenswerte Analyse auf Webdesigner Depot.

Bildschirmfoto 2014-05-30 um 11.02.13

So funktioniert die Galerie von Samsung

Samsung hat eine intressante Animation für ihren Blog implementiert. Auf Codrops erklärt euch die fabelhafte Manoela Illic aka Mary Lou, wie dieser Effekt funktioniert.

Bildschirmfoto 2014-05-30 um 11.04.28

Can Email Be Responsive? Diese Frage stellt sich A List Apart

Als Anwender liebst du sie, als eher nicht: HTML-E-Mails. Jason Rodriguez hat seine Gedanken inklusive Lösungsvorschläge bei A List Apart veröffentlicht: Aber um exzessives Testen kommen wir auch in Zukunft nicht herum.

Bildschirmfoto 2014-05-30 um 10.39.57

Der ausführlichste Git-Artikel im Web

Auf wildlyinaccurate.com wurde der wohl umfangreichste Artikel über Git veröffentlicht, den es im Web gibt. Wer Git nicht kennt, sollte ihn lesen – wer Git kennt, sollte das aber ebenfalls tun.

Bildschirmfoto 2014-05-30 um 11.10.21

Adobe zeigt euch CSS-Shapes

Adobe hat auf seinem Blog eine Liste mit den schönsten CSS-Shape-Beispielen veröffentlicht – inklusive Code.

Wenn euch diese Liste gefallen hat, dann findet ihr hier den ersten Teil der Serie.

Welche Tutorials habt ihr gefunden, die unbedingt in diese Liste gehören?

]]>
Mario Janschitz
10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 1) http://t3n.de/news/webdev-tutorials-teil-1-542767/ 2014-05-02T14:45:24Z
HTML5, CSS3, UX-Design, Icon-Packs &amp; Co.: In unserer neuen Serie fassen wir für euch regelmäßig neue Tutorials und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler …

, CSS3, UX-Design, Icon-Packs & Co.: In unserer neuen Serie fassen wir für euch regelmäßig neue und Quellen zusammen, die aus unserer Sicht extrem hilfreich für und -designer sind. Hier kommt der erste Teil. Tagtäglich stolpern wir über atemberaubende Tutorials, leider verschwinden diese – mangels Zeit, um gute von weniger guten Tutorials zu trennen – zu oft zwischen anderen Lesezeichen im Browser oder bei Read-It-Later-Webservices. Wir wollen das ändern und zeigen euch die besten Tutorials für die coolste Berufsschicht: nämlich Webworker.

Bildschirmfoto 2014-05-02 um 10.29.29

So baut ihr ein HTML5-Spiel mit Unity

In diesem ausführlichen Tutorial von Martin Kool wird euch Unity am praktischen Beispiel gezeigt. Via Smashing Magazine

Bildschirmfoto 2014-05-02 um 10.40.19

Atemberaubende Intro-Animation mit CSS3

Ihr wolltet schon immer mal einen Vorspann wie im Kino umsetzen – aber mit CSS? Tyler Gaw zeigt euch, wie. Via Tyler Gaw

ani

Dank SVG: Coole Loading-Effekte

Mary Lou zeigt euch, wie ihr das Anwendererlebnis auf ein neues Niveau hebt. Via Tympanus.net

Bildschirmfoto 2014-05-02 um 11.57.04

Gar nicht so böse: Die Z-Achse im Webdesign

Auf A List Apart zeigt euch Wren Lanier, wie und warum ihr die Z-Achse in euren zukünftigen Entwicklungen berücksichtigen solltet. Via A List Apart

Bildschirmfoto 2014-05-02 um 12.04.22

Icon-Pack: Long-Shadow-Design

Antonio Di Nardo bietet euch auf Behance seine Interpretation von Long-Shadow-Icons – und das kostenlos. Via Behance

8iun4

Der UX-Traum: Ladeanimation im Button

Ein weiteres exzellentes Tutorial von Mary Lou: Dieses mal zeigt sie euch, wie eine Implementation dieser Animation aussehen kann. Via Tympanus

Bildschirmfoto 2014-05-02 um 12.28.39

Erste Schritte mit Polymer

Polymer ist eine Polyfill-Bibliothek und Rey Bango zeigt euch, wie ihr sie einsetzen könnt. Via Tutsplus

Bildschirmfoto 2014-05-02 um 12.44.05

Von PSD zu Code: So gehts

Kezz Bracey zeigt euch, wie ihr mit CSSHat, PNGHat und FontAwesome euren Workflow optimieren könnt. Via Tutsplus

Bildschirmfoto 2014-05-02 um 12.53.50

Animierte Panorama-Ansicht mit CSS

Der Meister aller CSS-Klassen, die wunderbare Ana Tudor, zeigt euch, was alles schaffen kann – mit Firefox Nightly. Via CodePen

column-1

„Equal-Height-Columns“ mit CSS-Pseudos

Kezz Bracey zeigt euch, wie ihr mit Pseudo-Elementen des Problems der „Equal-Height-Columns“ Herr werdet. Via Tutsplus.

Welche Tutorials habt ihr gefunden, die unbedingt in dieser Liste sein müssen?

]]>
Mario Janschitz
Tempy.js: Blitzschnelle Client-Templates mit HTML5-LocalStorage http://t3n.de/news/tempyjs-clientseitige-templates-537231/ 2014-04-05T10:47:37Z
Es gibt viele verschiedene Möglichkeiten zur Realisierung von Client-Side-Templates. Tempy.js nutzt den LocalStorage, um die Aufrufe zu minimieren und die Performance zu steigern. Wir stellen es …

Es gibt viele verschiedene Möglichkeiten zur Realisierung von Client-Side-Templates. Tempy.js nutzt den LocalStorage, um die Aufrufe zu minimieren und die Performance zu steigern. Wir stellen es euch vor.

Das modulare Template-System Tempy.js

Bei der Entwicklung von Web-Apps suchen Webworker immer wieder nach einer Stellschraube, die zu einer besseren Performance beitragen könnte. Bei einer Web-App, die ich derzeit in meiner Agentur entwickle, boten vor allem clientseitige eine Herausforderung. Das Ziel ist, ein modulares Template-System, das verschiedene App-Bestandteile asynchron neu rendern kann, zu realisieren. Hierfür bieten sich verschiedene Optionen an.

Option 1: Komplette HTML-Blöcke vom Server vorverarbeitet an den Client schicken. Das ist sicherlich am einfachsten zu realisieren, da clientseitig nur wenig Prozesslogik erfordert wird und die Template-Engine auf der Server-Seite alles unkompliziert erledigen kann. Jedoch kann man bei diesem Ansatz kaum Vorteile aus dem Caching der Templates ziehen, sodass der Client durch unnötig viele Daten und der Server durch unnötige Template-Verarbeitung zusätzlich belastet werden.

Option 2: clientseitige Templates über Script-Tag. Bei clientseitigem Templating ist es gängige Praxis, die jeweiligen Templates innerhalb eines Script-Tags mit dem Hauptdokument zusammen auszuliefern. So erspart man sich zusätzliche Aufrufe separater Templates und kann sehr schnell clientseitig auf die jeweiligen Templates zugreifen. Für ein komplexes System wird diese Lösung bei zunehmender Anzahl von Templates  auf Dauer jedoch unübersichtlich und irgendwann auch nicht mehr performant.

Option 3: clientseitige Templates über AJAX nachladen. Die Übertragung von Templates über AJAX zur Weiterverarbeitung in Template-Systemen wie Moustache oder Handlebars schien hier die beste Lösung zu sein. Die Templates können so kleinteilig wie nötig aufgesplittert werden und werden in der Regel nach dem ersten Aufruf  gecached. Diese Lösung ging jedoch nicht weit genug. Erst vor kurzem berichtete ich von basket.js, einer Bibliothek, die JavaScript in den LocalStorage des Browsers ablegen und so blitzschnell ohne zusätzliche Requests zur Verfügung stellen kann. Besonders auf mobilen Geräten soll so ein zusätzlicher Performance-Schub ermöglicht werden.

Diese Idee haben wir nun in der Bibliothek tempy.js in abgewandelter Form umgesetzt.

Das Konzept von Tempy.js

Tempy.js bietet im Zusammenspiel mit einer Server-Applikation eine schnelle Lösung für das Abrufen und Speichern von clientseitigen Templates. Die Bibliothek ruft Templates via AJAX-Request von einer PHP-Applikation ab und speichert sie im LocalStorage des Browsers. Ab dann stehen die Templates auf Clientseite sofort und ohne Kommunikation mit dem Server zur Verfügung, sodass auch Offline-Applikationen denkbar sind.

Template Ladezeit
Tempy.js: Der Aufruf von Separaten Templates kostet viel Mehr Zeit als die Übertragung in einem „Template Pack“. (Screenshot: t3n)

Ein weiterer Vorteil in der Aufteilung ist die Möglichkeit, Templates auf dem Server vorzuverarbeiten (zum Beispiel zu übersetzen) und zusammengehörige Templates bei einem Aufruf zu übertragen. Dazu aber später mehr.

Tempy.js benutzen

Tempy.js benötigt derzeit jQuery, um die nötigen Requests an den Server zu stellen. Nachdem jQuery und Tempy.js in die Web-App eingebunden sind, können mittels einer einfacher API Template-Dateien abgerufen werden.

Du kannst einzelne Templates oder mehrere Templates in einem Rutsch anfordern, ganz, wie deine Programmlogik es erfordert.

// Ein Template anfordern
var template1 = tempy.get({name:"template1"});
// Mehrere Templates anfordern
var templates = tempy.get(
{name:"template2"},
{name:"template3"},
{name:"template1"},
{name:"template4"}
);

Als Rückgabewert erhältst du den Template-String, den du an eine clientseitige Template Engine weiterreichen oder wie im unterstehenden Beispiel direkt ins Dokument einfügen kannst.

// Template einfügen, wenn ein Template angefordert wurde
$('#content').append(template1);
//Bestimmtes Template einfügen, wenn mehrere Templates angefordert wurden
$('#content').append(templates['template1']);

Um nicht unnötig viele Abhängigkeiten beim Aufruf im JavaScript festhalten zu müssen, bietet die serversetige Komponente von tempy.js die Möglichkeit, Template-Packs zu definieren. Bei jeder Anforderung eines Templates wird geprüft, ob für die Programmlogik weitere Templates benötigt werden und zusammen mit dem angeforderten Template mit nur einem einzigen Aufruf an den Client übertragen. Hierfür müssen nur die Abhängigkeiten in einer separaten Datei (pack.info) im JSON-Format hinterlegt werden.

{
"mainView":[
"template1",
"template2",
"template3",
"template4"
]
}

Fordert man nun also  das Template „mainView“ an, werden die dazugehörigen Templates template1, template2, template3 und template4 mit übertragen.

Tempy.js: API und Konfiguration

Tempy.js lässt sich über eine Reihe von Befehlen steuern.

  • tempy.get() ruft Templates ab
  • tempy.clear() überprüft ob veraltete Templates im LocalStorage hinterlegt sind
  • tempy.flush() löscht sämtliche Templates aus dem LocalStorage des Clients

Standardmäßig behält Tempy.js Templates für zehn Stunden im Cache und fragt Templates von der templateServer.php ab. Diese Werte können – wie auch das Storage-Prefix, das die Unterscheidung der Tempy.js-Daten von anderen Daten im LocalStorage ermöglicht – nach Belieben in der Bibliothek selbst angepasst werden, um es den eigenen Anforderungen anzupassen.

var storagePrefix = 'tempy-';
var defaultExpiration = 10;
var templateServer = "templateServer.php";

Für die Zukunft planen wir weitere Funktionen wie die Integration von JavaScript-Template-Engines und eine Require.js-Implementation von Tempy.js. Solange steht die aktuelle Fassung von Tempy.js zum Download auf GitHub zur Verfügung.

]]>
Ilja Zaglov
Flappy Bird: So baut ihr die Game-Sensation in HTML5 nach http://t3n.de/news/flappy-bird-baut-game-sensation-536021/ 2014-03-24T09:01:36Z
Das Mobile-Game Flappy Bird wurde innerhalb kürzester Zeit zum Megahit. Der Entwickler Thomas Palef zeigt jetzt in einem Tutorial, wie ihr das Spiel in HTML5 nachbauen könnt.

Das Mobile-Game Flappy Bird wurde innerhalb kürzester Zeit zum Megahit. Der Entwickler Thomas Palef zeigt jetzt in einem Tutorial, wie ihr das Spiel in nachbauen könnt.

Flappy Bird: Ein Tutorial erklärt euch, wie ihr das Spiel in HTML5 nachbauen könnt. (Screenshot: lessmilk.com)
Flappy Bird: Ein Tutorial erklärt euch, wie ihr das Spiel in HTML5 nachbauen könnt. (Screenshot: lessmilk.com)

Flappy Bird: Vom Erfolg in die Versenkung

Die Geschichte um Flappy Bird ist einigermaßen bizarr. Das kostenlose Spiel für Android und iOS wurde innerhalb kürzester Zeit zum Hit und soll dem Entwickler Dong Nguyen täglich 50.000 US-Dollar an Werbeeinnahmen eingebracht haben. Umso verwunderlicher erschien die Nachricht, dass Nguyen das Spiel aus Apples App-Store und Googles Play-Store entfernt hat. Als Grund nannte er den Umstand, dass sein Spiel süchtig machen würde. Ein Umstand, den die meisten Spieleentwickler vermutlich als Anzeichen für ein gelungenes Game ansehen würden. Nguyen hat seine Meinung dazu allem Anschein nach mittlerweile revidiert, und will das Spiel zu einem späteren Zeitpunkt wieder veröffentlichen.

Bis es so weit ist, könnt ihr euch eine HTML5-Version von dem Game nachbauen. Wie das geht, zeigt euch der Pariser Entwickler Thomas Palef. Der hat auf seinem Blog ein dreiteiliges Tutorial dazu veröffentlicht. Als Grundlage für seine Flappy-Bird-Kopie dient das Phaser-Framework. Statt einen Vogel zu steuern, kontrolliert ihr hier lediglich ein Rechteck. Aber es geht hier ja auch weniger um die Grafik als die zugrundeliegende Spielmechanik. Wie ihr die in HTML5 nachbauen könnt, erklärt euch Palef dafür sehr genau in seinem Tutorial.

Original vs. Fälschung: Flappy Bird als Browser-Game. (Bild: Thomas Palef)
Original vs. Fälschung: Flappy Bird als Browser-Game. (Bild: Thomas Palef)

Flappy Bird: HTML5-Nachbau in drei Teilen

Die drei sind in Englisch gehalten. In den Artikeln findet ihr neben dem entsprechenden Quellcode als ZIP-Datei auch einen Link zu einer Demo-Version des Games. So könnt ihr euch anschauen, wie die Flappy-Bird-Kopie am Ende der jeweiligen Anleitung aussehen sollte. Hier sind die Links zu den drei Teilen des Tutorials:

Sofern ihr alle Schritte befolgt und nicht zu sehr von Palefs Anleitung abweicht, solltet ihr am Ende diese Kopie von Flappy Bird zu Gesicht bekommen. Während der eigentliche Flappy-Bird-Entwickler noch mit sich hadert, will Palef zukünftig weitere Game-Tutorials veröffentlichen. Wer sich dafür interessiert, sollte ab und an einen Blick auf seinen Blog werfen. Wer sich für die Geschichte hinter dem Original-Spiel interessiert, dem empfehlen wir den Artikel „Trotz 50.000 Dollar pro Tag: Flappy-Bird-Entwickler nimmt sein Spiel aus den Stores“.

]]>
Kim Rixecker
HTML5-Experten im Interview: „Das Web ist weit mehr als nur Blogs im Browser zu lesen“ [Sponsored Post] http://t3n.de/news/html5-experten-interview-web-533367/ 2014-03-11T09:44:21Z
In Düsseldorf wartet mit der ersten HTML5 MasterClass ein spannendes Intensiv-Training auf Entwickler. Dort erklären die bekannten Frontend-Entwickler Peter Kröner und Jens Grochtdreis, wie sich …

In Düsseldorf wartet mit der ersten MasterClass ein spannendes Intensiv-Training auf Entwickler. Dort erklären die bekannten Frontend-Entwickler Peter Kröner und Jens Grochtdreis, wie sich die neuesten HTML5-, CSS3- und JavaScript-Techniken zukunftssicher einsetzen lassen. Einen ersten Vorgeschmack gibt es im .

Hirnfutter für Entwickler: HTML5 MasterClass in Düsseldorf

Vom 28. bis 30. April findet die erste HTML5 MasterClass in Düsseldorf statt. In diesem Intensiv-Training kannst du von den beiden bekannten Frontend-Entwicklern Peter Kröner und Jens Grochtdreis lernen, wie du den Überblick über die sich ständig ändernde Webplattform behältst, die neuesten HTML5- CSS3- und JavaScript-Techniken zukunftssicher einsetzt und mit Open-Source-Tools einen modernen Workflow für Web-Apps einrichtest.

Als Teilnehmer hast du am Ende das Rüstzeug, um moderne Cross-Plattform-Web-Apps mit offenen Standards zu schreiben. Im Interview sprechen Peter Kröner und Jens Grochtdreis über Gefahren und Vorzüge sowie wichtige Trendwege von HTML5.

Peter Kröner und Jens Grochtdreis im Interview

Frage: HTML5 ist ein lebender Standard – ohne Unterlass gibt es neue Drafts und Vorschläge, wie beispielsweise die Gamepad-API oder die CSS-Scrolling-Snap-Points, um nur zwei zu nennen. Besteht nicht die Gefahr, dass man jetzt auf etwas setzt, was dann in einem Jahr ganz anders – oder nicht mehr – funktionieren wird?

KONICA MINOLTA DIGITAL CAMERAJens Grochtdreis: Standards vermehrt in kleinen, thematisch abgegrenzten Dokumenten zu diskutieren hat doch den entscheidenden Vorteil, dass man schneller zu einem Ergebnis kommen kann. Ob und inwiefern diese Standards dann nachher genutzt oder implementiert werden, ist eine davon unabhängige Frage. Ich finde es gut, dass große, unhandliche Standards vermieden werden sollen. Bei der technischen Entwicklungsgeschwindigkeit sollte die Standardisierung nicht allzu lange hinterher hinken.

Peter Kröner: Drafts und Standards hin oder her – am Ende zählt, was im landet. Die Gefahr, bei Projekten auf das falsche Pferd zu setzen, ist schon sehr gering, einfach weil Technologien, die noch große Änderungen vor sich haben, meist noch gar nicht in einem benutzbaren Zustand sind.

Frage: HTML5 bringt viele neue JavaScript-APIs und vor allem neue semantische Elemente – damit hebt sich die Plattform „Web“ von vielen anderen ab. Was ist das besondere daran?

Jens: Ich teile diese Analyse nicht. Webbrowser gibt es auf vielen Plattformen und „das Web“ ist weit mehr, als nur Blogs im Browser lesen. Webbrowser werden immer beliebter in Autos, sind Interfaces in Bankautomaten, in Kühlschränken und werden in Intranets unabhängig vom klassischen Web für vielfältige Aufgaben genutzt. Browserbasierte Applikationen können praktisch alle Lebensbereiche erreichen – auch Ärzte und Pfleger auf speziell ausgestatteten Tablets. Ich denke, gerade bei den Formularen gibt es noch Erweiterungsbedarf. Wenn man sich diverse JavaScript-UIs für Formulare anschaut, sieht man Kombinationen, die leider noch nicht mit schlichtem HTML lösbar sind. Sie sollten als nächstes implementiert werden – vor neuen semantischen Elementen.

portrait_peterkroenerPeter: Webbrowser gibt es auf jeder Plattform und auf jedem Gerät, das es schon gibt und es wird sie auf jedem internetfähigem Gerät geben, das jemals in Zukunft erscheinen wird. Wenn man nicht für jede Plattform eine eigene App schreiben will, führt am Web kein Weg vorbei. Ohne Web ist man gezwungen, für jedes Smartphone und Tablet-System, für jedes PC-Betriebssystem, für jeden Smart-TV und jede Spielekonsole, für Smartwatches, Google Glass und in Autos verbaute Entertainmentsysteme eine Extrawurst zu braten. Und jedes Mal, wenn irgendwer da draußen ein neues Gerät erfindet, darf man eine weitere Wurst in die Pfanne werfen.

Frage: Und was passiert mit alten Browsern, die weder die APIs noch die Elemente kennen?

Jens: Neben der leider unrealistischen Hoffnung, dass diese Browser möglichst schnell aussterben mögen, sollten wir generell mit Progressive Enhancement oder Graceful Degredation arbeiten. Wir sollten also dafür sorgen, dass den alten Browsern keine notwendigen Informationen verloren gehen oder ihnen Alternativen mittels Polyfills serviert werden. Chris Heilmann hat mal HTML5 sehr treffend mit „Moving from Hacks to Solution“ beschrieben. Moderne Browser haben schon die Solution, alte bekommen einfach noch die Hacks. Wir werden immer in einer Zeit des technologischen Übergangs leben, deshalb sind Progressive Enhancement und Graceful Degredation zwei Entwicklungsparadigmen, ohne die man im Frontend keine optimalen Ergebnisse abliefern kann.

Peter: Wenn es nicht um Webseiten, sondern um Web-Apps geht, habe ich noch einen weiteren Vorschlag: alte Browser einfach nicht unterstützen! Normale Computerprogramme dürfen seit jeher Anforderungen an Hard- und Software stellen – das neueste Call of Duty läuft schließlich auch nicht auf einem 468er mit Windows 3.11. Bei Web-Apps sieht es manchmal ganz automatisch genau so aus. Wie soll ein mit WebGL gerendertes Browser-Spiel ohne leistungsstarke Grafikkarte funktionieren? Was soll man mit einer Foto-App anfangen, wenn das Gerät keine Kamera hat? Webseiten, die nur Informationen aus Text und Bild bereitstellen, kann man immer auch in alten Browsern zum funktionieren bringen, bei Web-Apps ist das nicht immer möglich.

Frage: Im Blogpost zur MasterClass heißt es unter anderem, dass SASS behandelt wird. Mitte Dezember 2013 hatte Lea Verou sich auf Twitter beschwert, dass mit einer Sprache etwas nicht stimmen könne, wenn sie mittlerweile hauptsächlich mit Präprozessoren und Frameworks verwendet werde. Steht es wirklich so schlecht um CSS3?

Jens: Da missversteht Lea den Sinn von Präprozessoren. Sie sind ein Tool, ein Helferlein, nicht mehr. Ich kann CSS auch ohne schreiben. SASS erleichtert mir persönlich die Arbeit, weil ich einmal gefundene Problemlösungen ablegen und leicht als Mixin wieder nutzbar machen kann. Ich kann mein CSS in viele kleine Schnipsel aufteilen und für mich so einfacher wartbar machen – auch im Team.

Es ist wie bei einem Framework in PHP. Ist PHP kaputt, nur weil kaum jemand ohne Symfony, Zend oder ein anderes Framework seine Arbeit angeht? Der Nutzen liegt doch eher darin, dass sich standardisierte Problemlösungen herausgearbeitet haben, die man sinnvollerweise nutzt. Nicht sehr viel anders ist es bei Präprozessoren.

CSS hat ein ganz anderes Problem: CSS hatte nie ein echtes Layoutmodul, mit dem man etwas anfangen konnte. Zumindest Flexbox bekommt jetzt eine gute Verbreitung. Das liegt aber in mehrere Versionen vor. Die anderen Module sind leider noch nicht so gut verbreitet. Aber es wird sehr lange dauern, bis die letzten Browser ohne Flexbox ausgestorben sind. Da rächt sich die Phantasielosigkeit und Inaktivität der CSS-Arbeitsgruppe beim W3C seit 1999.

FrageJens, du bist ein Verfechter der Arbeit mit SASS und Compass. Welche Vorteile bietet diese Kombination Webentwicklern? Sie ist ja schließlich wieder mit einem (Einarbeitungs)-Aufwand verbunden.

Jens: Ich kann mein CSS in viele kleine Module aufteilen, dadurch auch im Team Arbeit einfacher an einzelne Personen delegieren. Außerdem kann ich Problemlösungen oder wiederholende Codeschnipsel in Mixins und Placeholder auslagern. Ich spare mir Schreibarbeit und Gehirnschmalz. Zudem habe ich als Frontend-Entwickler die komplette Kontrolle über den Output und muss mich nicht darauf verlassen, dass der Backend-Entwickler dafür sorgt, dass das CSS komprimiert wird. Ich kann schön formatiert arbeiten, mit vielen Kommentaren, am Ende aber einfach für eine komprimierte Ausgabe sorgen.

Peter: Darüber hinaus möchte ich anmerken, dass ich das mit den Einarbeitungs-Aufwand normalerweise nicht gelten lasse. SASS ist syntaktisch CSS mit ein paar Erweiterungen, mehr nicht. Der Einstieg könnte also einfacher nicht sein.

Frage: Natürlich bietet CSS3 gerade in Hinblick auf das Thema Responsive Webdesign eine Vielzahl mächtiger Features. Was sind eurer Meinung nach die wichtigsten davon?

Jens: Natürlich stehen an erster Stelle die Mediaqueries, denn ohne die gäbe es kein Responsive Webdesign. Daneben finde ich aber jegliche Technik wichtig, die den Verzicht auf spezielle Grafiken ermöglicht. Das sind dann mehr die „alten“, „traditionellen“ Techniken wie runde Ecken und Schatten. Viel wichtiger ist, was fehlt. Und da steht für mich an erster Stelle eine vernünftige Lösung für responsive Bilder, an zweiter Stelle Mediaqueries von Elementen. Also nicht mehr Styling in Abhängigkeit der Breite des Browserfensters, sondern in Abhängigkeit der Breite, die einem Modul gerade noch vom Layout gegeben wird.

Frage: Bietet die Kombination aus HTML5 und CSS3 genug Möglichkeiten, um in dem Trendbereich schlechthin – Mobile – mit nativen Sprachen mithalten zu können?

Peter: Da kommt es drauf an, von welchem Unterbereich von Mobile wir sprechen. Natürlich fehlt es je nach verwendetem Browser hier und da mal an der Unterstützung für HTML5-APIs, aber das ist ja auf dem Desktop nicht anders. Und sicher kann die Webplattform gerade in Sachen Performance noch einiges aufholen oder anders gesagt: Für eine flüssig laufende Web-App muss man als Entwickler mehr kämpfen, als für eine flüssig laufende native App. Dann aber läuft sie auch auf mehr als einer Plattform.

Jens: Wenn Du mit einer Web-App nicht an alle Informationen und Features des Telefons/Tablets herankommst, dann geht wohl kein Weg an nativer Programmierung vorbei. Ansonsten kann man mit Web-Apps sehr viel machen und die Zahl derer, die damit arbeiten, ist naturgemäß größer, als die Zahl derer, die Apps nativ programmieren können. Mit Web-Apps kann man mit einer Lösung beliebig viele mobile Betriebssysteme erreichen. Das ist doch eigentliche Killerfeature.

Frage: Wenn wir einen Blick auf die Zukunft werfen wollen – wo steckt Potenzial für Verbesserungen in HTML5 und CSS3?

Jens: Wir benötigen ausgereifte Layoutmodelle, am besten mehrere. Wir benötigen schnell eine gute Lösung für responsive Bilder und möglichst auch Mediaqueries für Seitenbereiche beziehungsweise Module. Und bei den Formularen sollte genauer geforscht werden, welche Formularelemente aktuell noch mit JavaScript hingelogen werden. Sie sollten dringend als HTML-Elemente standardisiert werden.

Peter: Neben der schon angesprochenen Performance-Problematik kann die ganze Plattform gerne noch etwas nachreifen. Man kann zwar heute schon einiges machen, aber es ist doch manchmal noch etwas mühsam. Das liegt auch gar nicht mal so sehr an den Webstandards oder alten Browsern, sondern vielmehr an den verfügbaren Tools und Prozessen. Die Webentwickler sind erst noch dabei, die Webplattform so richtig zu verstehen.

Frage: Ihr seid beide Trainer der HTML5 MasterClass in Düsseldorf – und ihr habt euch ein mehr als strammes Programm vorgenommen. Was ist euer erklärtes Ziel? Was wollt ihr den Teilnehmern am Ende der drei Tage vermittelt haben?

Jens: Natürlich will ich in erster Linie Wissen vermitteln. Noch viel wichtiger ist es mir aber, die Neugier zu wecken, die es erst möglich macht, auf dem erworbenen Wissen aufzubauen und noch mehr Wissen zu sammeln. In unserem Job muss man immer neugierig bleiben und Neues lernen wollen.

Peter: Wichtiger ist wirklich, einen Eindruck von den Möglichkeiten zu bekommen und Herangehensweisen kennenzulernen. Ein API kann man immer ergooglen, aber Hands-on-Erfahrung und das Wissen um Vorgehensweisen holt man sich am besten am lebenden Objekt.

Entwickler, jetzt Tickets für die HTML5 MasterClass in Düsseldorf sichern!

]]>
t3n Redaktion