HTML5 | t3n News News, Infos, Tipps und aktuelle Artikel zu HTML5 2014-10-06T08:01:47Z t3n Redaktion http://t3n.de/tag/html5 Vom Code zur App: Programmieren lernen mit coolen Timelapse-Videos http://t3n.de/news/thecodeplayer-css-html5-javascript-online-kurs-570072/ 2014-10-06T08:01:47Z
TheCodePlayer zeigt euch im Zeitraffer, wie Projekte in HTML5, CSS und JavaScript entstehen. Links seht ihr wie der Code eingegeben wird, während das Projekt auf der rechten Seite mehr und mehr …

TheCodePlayer zeigt euch im Zeitraffer, wie Projekte in HTML5, CSS und JavaScript entstehen. Links seht ihr wie der Code eingegeben wird, während das Projekt auf der rechten Seite mehr und mehr seine Form annimmt.

Web-Entwicklung im Zeitraffer: Bei theCodePlayer schaut ihr Entwicklern über die Schulter. (Screenshot: theCodePlayer)
Web-Entwicklung im Zeitraffer: Bei TheCodePlayer schaut ihr Entwicklern über die Schulter. (Screenshot: TheCodePlayer)

TheCodePlayer: Innovativer Online-Kurs setzt auf Timelapse-Videos

Kurse und Tutorials für Entwickler gibt es im Netz unzählige. TheCodePlayer will sich von der Konkurrenz jedoch mit einem völlig neuen Konzept abheben. Statt Erklärungen dazu, was der Code bewirkt, bekommt ihr lediglich die Eingabe des Codes im Zeitraffer angezeigt. Direkt daneben seht ihr das Ergebnis, das sich nach und nach weiterentwickelt. Dabei springt TheCodePlayer im Verlauf eines Videos von HTML zu CSS und Javascript – je nachdem was der Autor des Codes gerade bearbeitet.

Im Grunde könnt ihr bei theCodePlayer also einem Entwickler direkt über die Schulter blicken. Damit ihr auch alles nachvollziehen könnt, lässt sich das Video pausieren und ihr könnt die Abspielgeschwindigkeit bestimmen. Zwar gibt es jeweils einen kurzen Begleittext, dort steht aber nur worum es bei dem gezeigten Projekt geht. Der Code selbst wird im Gegensatz zu gängigen Tutorials nicht direkt erklärt. Was der Entwickler gerade macht, müsst ihr aus dem angezeigten Ergebnis ableiten.

TheCodePlayer bietet eine interessante Auswahl an HTML/JavaScript-Projekten. (Screenshot: TheCodePlayer)
TheCodePlayer bietet eine interessante Auswahl an HTML/JavaScript-Projekten. (Screenshot: TheCodePlayer)

TheCodePlayer zeigt euch interessante HTML5-, CSS- und JavaScript-Projekte

Für blutige Anfänger ist TheCodePlayer nicht geeignet. Die Grundlagen von HTML5, CSS und JavaScript solltet ihr mindestens beherrschen, um den Timelapse-Videos folgen zu können. Dann kann die Seite aber durchaus interessant für euch sein. Immerhin bekommt ihr einen direkten Einblick in die Arbeitsweise anderer Entwickler.

Derzeit könnt ihr euch die Entstehung einiger interessanter Projekte anschauen. Wer den Machern seine E-Mail-Adresse hinterlässt, kann sich außerdem zusätzliche Walkthroughs anschauen. Die Idee ist definitiv spannend. Interessant wäre aber vermutlich auch ein Audio-Kommentar oder eine ähnliche Möglichkeit, um auf den Denkprozess des Entwicklers einzugehen. Dann würde aber die variable Abspielgeschwindigkeit nicht mehr wirklich funktionieren.

Wer nach weiteren hilfreichen Quellen sucht, sollte einen Blick auf unseren Artikel „Programmieren lernen: Die besten Quellen für den Einstieg“ werfen.

via www.producthunt.com

]]>
Kim Rixecker
CSS3: Coole Animationen für im Grid angeordnete Bilder http://t3n.de/news/css3-animationen-grid-565807/ 2014-09-13T14:44:14Z
Mit HTML5 und CSS3 stehen Webworkern viele Möglichkeiten zur Verfügung, um ihre Webseiten noch spannender und interaktiver zu machen. Wir stellen dir einige nette Effekte vor, mit denen du dein …

Mit und stehen Webworkern viele Möglichkeiten zur Verfügung, um ihre Webseiten noch spannender und interaktiver zu machen. Wir stellen dir einige nette Effekte vor, mit denen du dein Portfolio oder Bilder-Blog visuell aufwerten kannst.

Viele Designer und Blogger setzen auf große Bilder, um ihre Arbeit oder ihre Beiträge in Szene zu setzen. Das Mansory-Layout ist dabei eine sehr häufig benutzte Anordnung, bei der Elemente gleichmäßig und passend über den Bildschirm beziehungsweise im jeweiligen Container verteilt werden. Infinite Scrolling und dynamisches Nachladen von Elementen gehören bei größeren Portfolios ebenfalls zum Standard-Repertoire. Häufig werden die neu hinzugeladenen Elemente einfach nur eingeblendet – was an sich vollkommen in Ordnung ist.

Für Visualisten: Nachladende Bilder aufpeppen mit CSS3

Luigi Petrut reicht das aber nicht, sodass er eine Sammlung von CSS-Animationen für Bilder in Grid-Layouts geschrieben und frei zur Verfügung gestellt hat.

Mit „Cool CSS Loading Effects for Grid Images“ verpasst du deinem Portfolio oder Bilder-Block ein nettes visuelles Extra. (Animation: tuxmix.com)
Mit „Cool CSS Loading Effects for Grid Images“ verpasst du deinem Portfolio oder Bilder-Block ein nettes visuelles Extra. (Animation: tuxmix.com)

Die „Cool CSS Loading Effects for Grid Images“ getaufte Sammlung beinhaltet fast 40 verschiedene Animationen, mit denen nachgeladene Elemente in Szene gesetzt werden können. Von verschiedenen Fade-Animationen bis hin zu zwei- und dreidimensionalen Animationen ist alles vertreten. Die Animationen und die dazugehörigen Laderoutinen wurden im Chrome 36+, Firefox 31+, Opera 23+, Safari 5+ und Internet Explorer 11 getestet.

Auf der Demo-Seite kannst du die Animationen live testen. Den Quellcode und eine Anleitung zum Nachbauen der Demo findest du in Luigi Petruts Blog TutsMix.

]]>
Ilja Zaglov
Epiphany: Das kann der neue Raspberry-Pi-Browser http://t3n.de/news/epiphany-raspberry-pi-web-browser-565095/ 2014-09-02T11:30:13Z
Das Raspberry-Pi-Projekt hat einen optimierten Browser für den Mini-Rechner vorgestellt. Das Ziel ist eine bessere Multi-Tab-Experience sowie Bild- und HTML5-Video-Beschleunigung.

Das Raspberry-Pi-Projekt hat einen optimierten für den Mini-Rechner vorgestellt. Das Ziel ist eine bessere Multi-Tab-Experience sowie Bild- und HTML5-Video-Beschleunigung.

Raspberry Pi: Der optimierte Browser soll das Surfen deutlich angenehmer auf dem Mini-Rechner machen. (Screenshot: Raspberry Pi)
Raspberry Pi: Der optimierte Browser soll das Surfen deutlich angenehmer auf dem Mini-Rechner machen. (Screenshot: Raspberry Pi)

Epiphany: Raspberry Pi bekommt optimierten Browser

Während der Raspberry Pi für viele Einsatzgebiete der perfekte Begleiter ist, eignet er sich zum Surfen nur bedingt. Ein speziell für den Mini-Rechner optimierter Browser soll das zukünftig ändern. Bei der Software handelt es sich um eine angepasste Version des etwas verwirrend getauften Web-Browsers „Web“, der bis 2012 unter dem Namen Epiphany bekannt war.

Der Browser setzt auf WebKit 1.1 und bietet ein für den im genutzten ARM-Prozessor optimiertes 2D-Rendering. Ziel des Projekts war es unter anderem, ein responsiveres User-Interface und Scrolling zu erreichen. Außerdem soll der Browser YouTube-Videos schneller laden und er unterstützt die Hardware-seitige Dekodierung von Videos mittels gst-omx. Der Browser soll Videos bei einer Auflösung von 1.280 mal 720 Pixeln mit einer Bildwiederholrate von 25 Frames pro Sekunde sauber abspielen können.

Raspberry Pi: Der Browser bietet unter anderem HTML5-Video-Beschleunigung. (Screenshot: Raspberry Pi)
Raspberry Pi: Der Browser bietet unter anderem HTML5-Video-Beschleunigung. (Screenshot: Raspberry Pi)

Epiphany: Raspberry-Pi-Browser kann ab sofort getestet werden

Der angepasste Browser soll Speicher- und CPU-freundliches Tab-Management bieten und der Browserstart soll dreimal schneller sein. Die Beta-Version könnt ihr über die folgenden Befehle unter Raspbian installieren:

sudo apt-get update
sudo apt-get dist-upgrade
sudo apt-get install epiphany-browser

Allerdings haben bereits erste Nutzer über Probleme mit ihrem System nach der Installation berichtet. Daher solltet ihr vorher sicherheitshalber ein Systembackup per SD-Karte erstellen.

via www.theregister.co.uk

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 5) http://t3n.de/news/10-hilfreiche-tutorials-quellen-5-563884/ 2014-08-25T14:10:42Z
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 …

, , 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 fünfte 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.

quellen

Was ihr schon immer über Regex und JavaScript wissen wolltet

Regular Expressions in JavaScript sind nicht immer intuitiv. Bjorn Tipling poliert euer Wissen auf und zeigt euch die Beispiele auf JSFiddle.

Bildschirmfoto 2014-08-25 um 14.50.08

Jekyll und GitHub Pages: So geht's

Auf Smashing Magazine findet ihr eine gute Einführung wie ihr mit Jekyll und GitHub statische Websites aufbauen könnt.

Bildschirmfoto 2014-08-25 um 15.08.52

Jeder mag Essen. Jeder mag Icons. Eine grafische Symbiose.

kann man als Designer nie genug haben. Leider findet man gute Icons viel zu selten, oder es sind einfach nicht die dabei, die man benötigt. Auf Dribbble bekommt ihr 30 Icons rund ums Essen – kostenlos.

quellen-1

Das User-Interface als Styleguide: Styleguide-Driven-Development

SSD sorgt dafür, dass das UI zu 100% vom Backend und dem Anwendererlebnis getrennt ist. Warum das gut ist und wie ihr das umsetzt, lest ihr im Artikel von Envato.

Bildschirmfoto 2014-08-25 um 14.58.00

Beatuifulopen.com: Die schönsten Open-Source-Webprojekte des Webs

Das aufstrebende Archiv beautifulopen.com lässt euch Open-Source-Projekte finden und zeigt euch die schönsten Websites dazu.

Bildschirmfoto 2014-08-25 um 15.07.23

Abstraktion im Frontend: Eine aussterbende Fähigkeit?

Gerade bei großen Projekte regieren die KISS- und DRY-Prinzipien neben der Kunst der Abstraktion. Ben Frain eröffnet euch seine Perspektive auf „Enduring CSS“ und wie ihr mit der Sprache in großen Projekten umgehen könnt.

Bildschirmfoto 2014-08-25 um 15.00.08

Wie eure Leser Texte lesen

Jason Santa Maria klärt euch darüber auf, wie Menschen Texte wahrnehmen, und wie ihr das zu eurem Vorteil nutzen könnt.

Bildschirmfoto 2014-08-25 um 15.13.20

Logokit für Hipster oder Vintage-Liebhaber

PixelBuddha präsentiert euch den dritten Teil der Vintage-Logo-Kits. Hier geht es zum ersten und hier zum zweiten. Amazing.

Bildschirmfoto 2014-08-25 um 14.24.14

Icons. Minimalism. Schön.

Auf Behance findet ihr das kostenlose Set – gefüllt mit 65 minimalistische Icons im AI-, EPS-, und PSD-Format.

Bildschirmfoto 2014-08-25 um 14.31.22

Nie wieder: „Du kannst Teil von etwas ganz Großem werden!"

Speider Schneider zeigt euch, wie ihr euch stilvoll aus der Affäre ziehen könnt, wenn es wieder mal heißt: „Kannst du uns eine Website machen – das wäre eine Super-Referenz für dich.“

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

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

]]>
Mario Janschitz
Cloud-Hosting für HTML5-Apps: Aerobatic erspart euch das Server-Setup http://t3n.de/news/hosting-aerobatic-single-page-app-562792/ 2014-08-19T11:41:51Z
Aerobatic bietet Cloud-Hosting für Single-Page-Apps an und sieht sich selbst als eine Art Heroku für das Frontend. Features wie „Traffic Control“, ein intelligenter API-Proxy und integrierte …

Aerobatic bietet Cloud-Hosting für Single-Page-Apps an und sieht sich selbst als eine Art Heroku für das Frontend. Features wie „Traffic Control“, ein intelligenter API-Proxy und integrierte OAuth-Authentifizierung sollen Aerobatic zur perfekten Lösung dafür machen.

Aerobatic ist ein Cloud-Hoster für Single-Page-Apps. (Screenshot: aerobatic.io)
Aerobatic ist ein Cloud-Hoster für Single-Page-Apps. (Screenshot: aerobatic.io)

Aerobatic: Einfaches Cloud-Hosting für Single-Page-Apps

Aerobatic ist ein Platform-as-a-Service (PaaS) und dient als Cloud-Hosting-Lösung für Single-Page-Apps. Der Anbieter hat seinem Dienst eine Reihe von Funktionen spendiert, die ihn von anderen Hosting-Lösungen für statische Webseiten abheben sollen. So gibt es einen Simulator-Modus, mit dem ihr eure lokal entwickelten einfach in der testen könnt. Damit sollen etwaige Integrationsprobleme schnell erkannt werden können.

Ein weiteres interessantes Feature nennt sich „Traffic Control“. Letztlich könnt ihr damit über einen Regler bestimmen, welcher Teil des eingehenden Traffics eine andere Version eurer App zu Gesicht bekommen soll. Damit lassen sich auf einfache Art und Weise A/B-Tests durchführen. Außerdem könnt ihr mit „Traffic Control“ neue Funktionen zunächst nur einem Teil eurer Nutzerbasis zur Verfügung stellen, und euch Feedback einholen.

Aerobatic: Cloud-Hoster will Einsatz externer APIs und OAuth vereinfachen

Aerobatic versucht mit dem API-Proxy, ein Problem statischer Web-Apps zu umgehen. Damit API-Keys, Passwörter oder Token nicht direkt in die Seite eingebunden werden müssen, lassen sich diese bei Aerobatic hinterlegen und per AJAX-Callback aufrufen. Außerdem lassen sich API-Respones auch cachen. Das ist sinnvoll, wenn die Antworten mit einer Verzögerung kommen oder die Anzahl der API-Aufrufe limitiert ist.

Außerdem will es Aerobatic Entwicklern leicht machen, OAuth-Authentifizierung in ihren Apps einzusetzen. Die entsprechenden Schlüssel für OAuth-Anbieter wie Google, Facebook, Twitter oder GitHub lassen sich im Aerobatic-Dashboard abspeichern und der Anbieter kümmert sich dann um die eigentliche Authentifizierung der Nutzer.

Aerobatic kann derzeit kostenfrei getestet werden. Wie viel Geld der Anbieter später dafür verlangen wird, ist noch nicht bekannt. Der Dienst soll aber auch später noch in einer kostenfreien Version zu haben sein. Darüber hinaus ist aber auch eine kostenpflichtige Variante mit erweiterten Team-Features geplant.

]]>
Kim Rixecker
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 …

, 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 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 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 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