HTML5 | t3n News News, Infos, Tipps und aktuelle Artikel zu HTML5 2016-02-10T09:42:26Z t3n Redaktion http://t3n.de/tag/html5 Weiterer Sargnagel für Flash: Google setzt bei Display-Ads bald voll auf HTML5 http://t3n.de/news/google-display-ads-adwords-flash-html5-678345/ 2016-02-10T09:42:26Z
Der nächste Todesstoß für Adobes Flash: Google hat für sein Werbenetzwerk einen Zeitplan veröffentlicht, demzufolge innerhalb der nächsten Monate komplett auf HTML5 umgestellt werden soll.

Der nächste Todesstoß für Adobes Flash: Google hat für sein Werbenetzwerk einen Zeitplan veröffentlicht, demzufolge innerhalb der nächsten Monate komplett auf HTML5 umgestellt werden soll.

Aus für Flash in der Werbung: Google-Display-Network und Doubleclick bald 100 Prozent auf HTML5-Basis

Der Internet-Dino Flash ist vom Aussterben bedroht. Seit Jahren schon wird versucht, die Plattform aus dem Netz zu verbannen. Flash gilt als Unsicher und Angreifbar, außerdem besitzt der Standard den Ruf, ressourcenhungrig zu sein – zu Recht. Neben Facebook und der Mozilla-Foundation – sprich Firefox – wollen auch andere Unternehmen Flash endlich in Rente schicken. Selbst Adobe, Entwickler des Standards, rät Entwickler dazu, auf HTML5 zu setzen.

Google ist schon seit Jahren ein weiterer Player, der sich gegen Flash ausspricht. Schon seit 2014 bietet das Unternehmen Advertisern an, ihre Werbung im HTML5-Standard mit dem Google Web Designer zu erstellen und in das Google Display Network hochzuladen. Jetzt kommt der nächste Sargnagel für Flash: Denn ab dem 30. Juni 2016 werden Advertiser keine Flash-Display-Ads mehr hochladen können, wie Google per Google+ ankündigt.

Adobe-Flash-Player
Bald weg vom Fenster: Adobes Flash. (Bild: Adobe)

Adwords ohne Flash: Google bietet Hilfestellungen für den Umstieg

Das ist aber nur der erste Schritt, auf den ein halbes Jahr später ein weiterer folgt: Denn ab dem 2. Januar 2017 will das Unternehmen auch alte auf Flash basierende Werbeanzeigen blockieren. Auf diesem Wege wird das Werbenetzwerk weitgehend Flash-frei gemacht. Eine Ausnahme lässt Google aber bis auf Weiteres noch zu: Video-Ads, die auf Flash basieren, werden vorerst noch ausgeliefert.

Bei der Umstellung auf HTML5 lässt Google die Nutzer der beiden Werbeplattformen Google Display Network und DoubleClick Digital Marketing nicht im Regen stehen. Das Unternehmen bietet Tools und Best-Practices an, damit Werbetreibende schmerzlos auf HTML5 umsteigen können.

Passend zum Thema: Bye Bye Flash: Warum HTML5 zum Standard in der Online-Werbung wird

via arstechnica.com

]]>
Andreas Floemer
Kostenlose Software für Spieleentwickler: Superpowers 2D- und 3D-Editor ist jetzt Open Source http://t3n.de/news/superpowers-spieleentwicklung-html5-670621/ 2016-01-12T16:00:04Z
Superpowers ist ein Tool um kollaborativ HTML5-basierte 2D- und 3D-Games zu erstellen. Wir verraten euch, was die Open-Source-Software alles kann.

Superpowers ist ein Tool um kollaborativ HTML5-basierte 2D- und 3D-Games zu erstellen. Wir verraten euch, was die Open-Source-Software alles kann.

Superpowers: Quelloffenes Tool zur Erstellung von HTML5-Games

Superpowers soll euch dabei helfen, im Team an eigenen 2D- und 3D-Spielen zu arbeiten. Die zugrundeliegende Game-Engine setzt auf HTML5. Die fertigen Spiele könnt ihr daher entweder direkt über das Web vertreiben, oder mithilfe von Electron beziehungsweise dem Intel XDK native Apps für Windows, Linux, OS X, oder iOS daraus generieren. Das Schöne daran: Bei Superpowers selbst handelt es sich um Open-Source-Software.

Superpowers: Gemeinsam an 2D- oder 3D-Games arbeiten. (Screenshot: Superpowers)
Superpowers: Gemeinsam an 2D- oder 3D-Games arbeiten. (Screenshot: Superpowers)

Das Scripting eurer Games geschieht bei Superpowers in TypeScript. Die Entwicklung wie auch die Verwaltung sämtlicher Assets wird direkt in dem HTML5-basierten Editor durchgeführt. Obwohl sich die primär an Spieleentwickler richtet, lassen sich damit aber auch andere Projekte auf TypeScript-Basis umsetzen. So haben die Macher beispielsweise einen Generator für statische Websites mithilfe von Superpowers entwickelt.

Superpowers: Die wichtigsten Ressourcen für den Start

Superpowers könnt ihr direkt über die offizielle Projekt-Website herunterladen. Den Quellcode des Tools und verschiedener Beispielanwendungen findet ihr im GitHub-Repository von Superpowers. Bevor ihr durchstartet, solltet ihr allerdings erst einen Blick auf die umfangreiche Dokumentation der Software werfen. Wer sich über die Möglichkeiten von Superpowers informieren möchte, der kann auch dieses kleine Demo-Game spielen, in dem euch alle Features nochmal auf spielerische Art und Weise erklärt werden.

Ebenfalls interessant in diesem Kontext ist unser Artikel „Matter.js: Die Physik-Engine für das Web kurz vorgestellt“.

via news.ycombinator.com

]]>
Kim Rixecker
Ein Amiga-Emulator in HTML5 und JavaScript: Hier zockst du Games-Klassiker online http://t3n.de/news/amiga-emulator-html5-javascript-667696/ 2015-12-28T12:49:03Z
Hat hier jemand „Nostalgie“ gefordert? Dieser Amiga-Emulator in HTML5 und JavaScript versetzt euch in alte Zeiten zurück.

Hat hier jemand „Nostalgie“ gefordert? Dieser Amiga-Emulator in HTML5 und JavaScript versetzt euch in alte Zeiten zurück.

Von „Asteroids“ bis „Tanx“ – ein Amiga-Emulator in HTML5 und JavaScript

Scripted Amiga Emulator. (Screenshot: t3n)
Scripted Amiga Emulator. (Screenshot: t3n)

Dieser Tage gibt es zwei Arten von Menschen: Die, die arbeiten müssen und die, die frei haben und vom Räkeln auf dem Sofa und Zappen durch das TV-Programm allmählich Langeweile bekommen. Für letztere unter euch haben wir einen witzigen Amiga-Emulator gefunden, der auf HTML 5 und Javascript basiert. Mit sogenannten „Scripted AMIGA Emulator“ könnt ih Spiele-Demos aus längst vergangenen Tagen zocken.

Da haben wir zum Beispiel „Air Ace II“, „Asteroids“, „Hoi“, „Norse Gods“ oder „Tanx“ in der Auswahl. Insgesamt elf Spieleklassiker warten darauf, von euch wieder angespielt zu werden. Spaß ist garantiert! Und wer dann immer noch nicht genug hat, darf gerne auch einen Blick in diesen Artikel werfen: „8 kostenlose Retro-Games für deinen Browser: Von 'Command & Conquer' über 'Street Fighter' bis 'Zelda'“ – auch dabei wünschen wir viel Spaß!

via news.ycombinator.com

]]>
Andreas Weck
Teilaus für Flash: Facebook wechselt bei Videos auf HTML5 http://t3n.de/news/flash-facebook-videos-html5-666587/ 2015-12-21T06:14:07Z
Facebook hat den Wechsel von Flash auf HTML5 vollzogen – vorerst allerdings nur bei Videos. Bei Spielen setzt das Social Network weiterhin auf Flash und will mit Adobe zusammenarbeiten.

Facebook hat den Wechsel von Flash auf HTML5 vollzogen – vorerst allerdings nur bei Videos. Bei Spielen setzt das Social Network weiterhin auf Flash und will mit Adobe zusammenarbeiten.

Facebook vollzieht Wechsel von Flash auf HTML5

Im Juli dieses Jahres hatte Facebook-Sicherheitschef Alex Stamos vor dem Hintergrund mehrerer aufgetauchter Zero-Day-Exploits gefordert, dass Adobe endlich ein Datum für das Ende von Flash bekannt gibt. Den Wechsel von Flash auf HTML5 hat Facebook jetzt zumindest bei den Videos auf der Plattform vollzogen.

HTML5 setzt sich zunehmend gegen Flash durch – jetzt auch bei Facebook-Videos. (Grafik: Shutterstock-gdainti)
HTML5 setzt sich zunehmend gegen Flash durch - jetzt auch bei Facebook-Videos. (Grafik: Shutterstock-gdainti)

Dass die Umstellung erst jetzt erfolgt ist, erklärte Daniel Baulig, Front-End Engineer bei Facebook, in einem Blogeintrag damit, dass HTML5 bei einigen Browsern noch Probleme verursacht habe. Von dem Wechsel auf HTML5 betroffen seien Videos in Facebooks News-Feed, auf den Seiten und in dem eingebetteten Video-Player. HTML5 liefere eine Menge Vorteile, so sollen die Videos jetzt schneller laden und auch stabiler laufen.

Flash statt HTML5 bei Facebook-Spielen

Bei seinen Spielen setzt Facebook aber weiter auf Flash. Das soziale Netzwerk setze dabei weiter auf die Zusammenarbeit mit Adobe, um den Nutzer größtmögliche Sicherheit zu bieten. Adobe hatte zuletzt selbst ein mögliches Aus für Flash eingeläutet und Web-Entwicklern dazu geraten, statt Flash moderne Standards wie HTML5 und WebGL einzusetzen.

Facebook jedenfalls will seit der kürzlich erfolgten Umstellung gute Erfahrungen mit dem HTML5-Video-Player gemacht haben. Die Entwicklung sei jetzt leichter und die Videoerfahrung für die Nutzer besser. Facebook-Nutzer würden jetzt Videos öfter liken, kommentieren oder teilen und würden sie länger als zuvor anschauen. Es sollen auch weniger Bugs gemeldet worden sein.

via www.golem.de

]]>
Jörn Brien
War‘s das für Flash? Selbst Adobe rät Web-Entwicklern jetzt zu HTML5 http://t3n.de/news/flash-adobe-html5-662052/ 2015-12-02T10:47:58Z
Die Tage von Flash scheinen schon lange gezählt, so ganz totzukriegen scheint der Standard aber nicht zu sein. Ob daran die jüngste Ankündigung von Adobe etwas ändert?

Die Tage von Flash scheinen schon lange gezählt, so ganz totzukriegen scheint der Standard aber nicht zu sein. Ob daran die jüngste Ankündigung von Adobe etwas ändert?

Massive Sicherheitslücken: Flash immer unbeliebter

Der Unmut gegen Flash ist in den vergangenen Monaten rasant gewachsen: Im Chrome-Browser wird Flash-Werbung automatisch pausiert, Mozilla hat Flash auf die Firefox-Blockliste gesetzt und der Facebook-Sicherheitschef wetterte im Sommer dieses Jahres gegen den ungeliebten Standard. Grund: Der Flash-Player ist dafür bekannt, notorisch ressourcenhungrig zu sein und immer wieder mit massiven Sicherheitslücken aufzufallen. Jetzt könnte Adobe selbst das bevorstehende Aus für Flash beschleunigen.

Adobe-Flash-Player
Adobes Flash-Player: Unbeliebt, aber immer noch da. (Bild: Adobe)

Der Softwarehersteller hat angekündigt, dass die Software Flash Professional ab Anfang 2016 in Adobe Animate CC umbenannt werden soll. Was für manche nur eine Namensänderung ist, könnte aber viel mehr sein. Schließlich soll die Namensänderung Adobe zufolge zeigen, dass Entwickler mit dem Tool nicht nur Flash-Dateien bearbeiten können. Darüber hinaus rät Adobe Web-Entwicklern dazu, statt Flash moderne Standards wie HTML5 und WebGL einzusetzen.

Flash ist nicht totzukriegen, soll aber sicherer werden

Allerdings wird es mit Animate CC auch weiterhin möglich sein, Flash-Dateien zu erzeugen. Auch wird Adobe eigenen Angaben den Support für das Flash-Browser-Plugin bis 2022 fortführen. Das Unternehmen will aber mit Google und Facebook zusammenarbeiten, um Flash-Inhalte sicher im Browser anzuzeigen und Flash-Spiele sicherer zu machen. Insbesondere in diesem Bereich sind Entwickler Adobe zufolge weiterhin auf Flash angewiesen.

Wer auf den Flash-Player verzichten kann, sollte das Programm deinstallieren. Dazu gibt es spezielle Tools wie den „Flash Player Uninstaller“. Wer gar nicht ohne Flash auskommt, kann stattdessen Googles Chrome benutzen, wo Flash in einer Sandbox-Umgebung läuft. Für den Safari gibt es zudem das ClickToFlash-Plugin von Marc Hoyois, das Flash-Inhalte durch einen Platzhalter ersetzt und sie erst nach einem Klick des Nutzers aktiviert.

via futurezone.at

]]>
Jörn Brien
HTML5-Ads: Dieser Editor will die Erstellung radikal vereinfachen http://t3n.de/news/html5-ads-adcade-epoch-banner-werbung-651641/ 2015-10-28T13:24:21Z
Adcade Epoch ist ein Editor für HTML5-Bannerwerbung. Wir verraten euch, wie das Tool euren Anzeigen-Workflow beschleunigen soll.

Adcade Epoch ist ein Editor für HTML5-Bannerwerbung. Wir verraten euch, wie das Tool euren Anzeigen-Workflow beschleunigen soll.

Adcade Epoch: Editor für responsive Werbebanner

Adcade Epoch hilft euch bei der Erstellung von HTML5-Banner-Werbung. (Screenshot: Adcade)
Adcade Epoch hilft euch bei der Erstellung von HTML5-Banner-Werbung. (Screenshot: Adcade)

Flash ist tot und auch Werbebanner müssen sich der Multi-Screen-Realität stellen. Das verlangt auch nach neuen Arbeitswerkzeugen. Genau so eins ist Adcade Epoch. Mit dem Editor erstellt ihr in kurzer Zeit responsive HTML5-Banner. Dank eines mitgelieferten Photoshop-Plugins namens Lightspeed könnt ihr eure PSD-Dateien inklusive aller Assets in Epoch importieren.

Im eigentlichen Editor legt ihr anschließend Animationen oder interaktive Elemente fest. Außerdem stehen euch hier auch Templates für gängige Anzeigenformate zur Verfügung. Den Code für eure Anzeigen könnt ihr direkt über den integrierten Editor bearbeiten. Fertige Banner könnt ihr aus dem Tool heraus für verschiedene Ad-Server exportieren. Unterstützt werden derzeit Facebooks Atlas, Googles AdWords, Doubleclick und Sizmek.

Adcade Epoch: Editor gibt es als Mac- und Windows-Variante

Adcade Epoch steht euch in einer Windows- und einer OS-X-Variante zur Verfügung. Alle Banner, die ihr mit Epoch erstellt, sind mobile-ready und sollten daher auf Smartphones und Tablets genauso funktionieren wie auf dem Desktop. Um Entwicklern und Designern den Einstieg zu erleichtern, bietet Adcade eine Dokumentation und eine Reihe von Video-Tutorials an.

Der Preis für das Tool beläuft sich auf 85 US-Dollar pro Monat und Nutzer. Größere Teams sollen außerdem ein passendes Angebot beim Entwickler erfragen können. Wer will, kann das Tool aber vorab sieben Tage lang kostenfrei testen.

Eine kostenfreie Alternative zu Adcade haben wir euch in unserem Artikel „Google Web Designer: Kostenloses Grafikprogramm erstellt animierte HTML5-Werbebanner wie Flash“ vorgestellt.

via www.webdesignernews.com

]]>
Kim Rixecker
Webflow: Intuitives Online-Tool für Responsive Webdesign integriert CMS-Funktionen http://t3n.de/news/responsive-webdesign-intuitives-452281/ 2015-10-08T13:07:20Z
Responsive Webdesign ist heute Standard. Mit Webflow gibt es eine Online-Plattform, die vieles leichter machen will. An Bord hat der Service Werkzeuge und Hilfsmittel für HTML5 und CSS3 sowie einen …

Responsive Webdesign ist heute Standard. Mit Webflow gibt es eine Online-Plattform, die vieles leichter machen will. An Bord hat der Service Werkzeuge und Hilfsmittel für HTML5 und CSS3 sowie einen hervorragenden WYSIWYG-Editor. Jetzt sind auch vollständige CMS-Features integriert worden.

Update vom 8. Oktober 2015: Webflow hat seinen Online-Dienst um umfangreiche CMS-Funktionen erweitert. Damit kann aus verschiedenen Quellen dynamischer Content in die gebaute Website fließen – und das nach wie vor, ohne den Code anfassen zu müssen. Außerdem kann gemeinsam an den Inhalten gearbeitet werden, die sich per Frontend-Editing anpassen lassen. Neu dabei sind unter anderem auch die Kollektionen und dynamische Listen. Die Website von Webflow bietet einen umfassenden Überblick über die Features. Was das CMS Neues mitbringt, beschreiben die Macher in diesem Blogpost.
Responsive Webdesign mit WYSIWYG-Editor.

Ein bisschen erinnere Webflow an Adobe Edge, schreibt Jolie O'Dell von VentureBeat. Kein schlechter Vergleich. Oben kann der Nutzer zwischen verschiedenen Ansichten hin- und herschalten (Desktop- Tablet- und Phone-Ansicht), in den Sidebars bietet Webflow etliche Werkzeuge zur Gestaltung von Webseiten. Durch die Fülle an CSS3-Klassen kann man entweder mit Hilfe einer grafisch angelegten Übersicht oder mit der Listenansicht navigieren. War das Hinzufügen eigener Klassen in der Demo-Version noch deaktiviert, bietet Workflow diese Funktion jetzt in der finalen Version.

Responsive Webdesign per Drag & Drop

Wer dabei irgendwann den Überblick verliert, dem bietet Webflow den sogenannten „X-Ray-Mode“. In dem blendet das Tool alle Farben aus und reduziert das Design auf das Nötigste. Ein tolles Feature gegen die eigenen Betriebsblindheit. Wirklich oft brauchen werden Nutzer diese Funktion jedoch nicht, so aufgeräumt und intuitiv wie Webflow daher kommt. Per Drag & Drop lassen sich Elemente verschieben, mit Hilfe der Regler in der rechten Sidebar können Elemente vergrößert, Abstände verändert, Schriftarten zugewiesen oder Farben ausgewählt werden – und vieles mehr. Ein Toggle schaltet darüber hinaus wahlweise das zugrunde liegende Grid ein und aus, ein Vorschau-Modus zeigt dem Nutzer, wie sein Projekt aktuell aussieht.

Responsive Webdesign – mit einem Klick zum fertigen Projekt

Einen Überblick über alle Features, die Webflow an Bord haben soll, haben die Entwickler auf ihrer Seite zusammengestellt. Eines davon ist der Export der fertigen Daten: Ist ein Projekt abgeschlossen, genügt ein Klick und Webflow spuckt alle nötigen HTML5- und CSS3-Dateien aus. Und auch andersherum soll Webflow funktionieren, eine Import-Funktion für existierende Seiten sei in Planung, ließen die Köpfe hinter Webflow, Vlad und Sergie Magdalin, kürzlich über Twitter verlauten.

Wer sich vor dem Ausprobieren erst einmal mit Webflow vertraut machen will, für den gibt es etliche Tutorials, die die grundlegenden Funktionen erklären.

Veröffentlichungsdatum des Original-Artikels: 26. August 2013

]]>
Florian Blaschke
Dynamisches Webdesign mit HTML5-Data-Attributen: So geht's http://t3n.de/news/webdesign-html5-data-attribute-642767/ 2015-09-26T08:00:50Z
Dynamische Effekte auf Websites sind zwar nicht für jedes Projekt geeignet. Wenn es aber passt, dann kann es bisweilen gar nicht dynamisch genug sein. Parallaxes Scrolling hat viele Fans, ist aber …

Dynamische Effekte auf Websites sind zwar nicht für jedes Projekt geeignet. Wenn es aber passt, dann kann es bisweilen gar nicht dynamisch genug sein. Parallaxes Scrolling hat viele Fans, ist aber nicht die einzige Option für lebendiges Webdesign.

Sooo dynamisch muss es natürlich meist doch nicht sein. (Foto: Pixabay)
Sooo dynamisch muss es meist gar nicht sein. (Foto: Pixabay)

HTML5-Data-Attribute: Unsichtbar, aber nicht unnötig

Mit HTML5-Data-Attributen können wir beliebige Daten innerhalb eines validen Quellcodes unterbringen. Unter Verwendung von Data-Attributen ausgezeichnete Daten werden dem Betrachter nicht angezeigt und wirken sich nicht auf das Layout aus. Dennoch sind sie in der Seite enthalten und können einfach, beispielsweise unter Verwendung von JavaScript, weiterverarbeitet werden.

Dynamische Textschnipsel mit dynamo.js

dynamo.js ist ein recht einfaches, nahezu idiotensicheres JavaScript des Entwicklers Jordan Scales, der hauptberuflich für die Khan Academy tätig ist. Die Aufgabe von dynamo.js besteht darin, Textinhalte mit Animationen so auszustatten, dass Textteile dynamisch ausgewechselt werden können. Das klingt auf den ersten Blick reichlich unnötig, bietet bei näherem Hinsehen aber durchaus interessante Möglichkeiten.

dynamo.js konzentriert sich auf das Auswechseln von Textteilen. (Screenshot: dynamo.js)
dynamo.js konzentriert sich auf das Auswechseln von Textteilen. (Screenshot: dynamo.js)

dynamo.js arbeitet mit HTML5-Data-Attributen und einer CSS-Klasse namens dynamo, auf die dann die Funktion .dynamo() losgelassen wird. Um beispielsweise den folgenden Satz

Ich wünschte, ich hätte Flügel

mit völlig neuen Bedeutungen zu versehen, könntet ihr dynamo.js wie folgt verwenden:

Ich wünschte, ich hätte <span class="dynamo" data-lines="zehn Millionen Euro,immer Recht,Urlaub">Flügel</span> 

Nun würde dynamo.js die innerhalb des Data-Atributs data-lines stehenden Ausdrücke alle drei Sekunden durchwechseln. Heraus käme:

Ich wünschte, ich hätte Flügel

Ich wünschte, ich hätte zehn Millionen Euro

Ich wünschte, ich hätte immer Recht

Ich wünschte, ich hätte Urlaub

Dieser und andere Effekte sind auf der dynamo-Website zu betrachten. Anders, als ich das hier getan habe, solltet ihr Umlaute, Leer- und sonstige Sonderzeichen sicherheitshalber in ihren jeweiligen Entitäten schreiben. Dynamo.js nimmt es da bisweilen sehr genau.

Zusätzlich zur Angabe der rotierenden Inhalte steuert ihr über die Attribute data-speed und data-delay die Geschwindigkeit der Rotation. Das Attribut data-center zentriert die Textinhalte innerhalb des Span. Grundsätzlich könnt ihr.dynamo() auf jedes Element anwenden. Durch eine wilde Kombination innerhalb ein und desselben Textes kann man zu geradezu chaotischen inhaltlichen Verfremdungen gelangen.

Das Script steht auf GitHub zur kostenlosen Nutzung unter MIT-Lizenz bereit. Es setzt jQuery voraus.

Animationen mit skrollr

Die Demos zu skrollr zeigen, was geht, sind aber keine Augenweide. (Screenshot: skrollr)
Die Demos zu skrollr zeigen, was geht, sind aber keine Augenweide. (Screenshot: skrollr)

skrollr erlaubt die Animation jedweder CSS-Eigenschaft eines Elements in Abhängigkeit zur Position des horizontalen Scrollbalkens. Klingt kompliziert, ist es aber gar nicht. Die Animation wird über Data-Attribute gesteuert. Der folgende (vergleichsweise einfache) Codeschnipsel führt etwa zu einer Änderung der Hintergrundfarbe der Website während des Scrollvorganges.

<body data-0="background:hsl(0, 50%, 70%);" data-end="background:hsl(360, 50%, 70%);"></body>

Das Attribut data-0 bezeichnet dabei den Ausgangszustand, das korrespondierende data-end den Endzustand. Die Zwischenzustände berechnet skrollr automatisch.

Die Steuerung erfolgt über Keyframes aus dem DOM und kann daher sehr fein werden. So lassen sich äußerst komplexe Animationen erstellen, wie sie etwa auf der Beispiel-Website Verwendung finden.

Kenntnisse in JavaScript sind für die Verwendung der skrollr-Funktionalität nicht erforderlich, in CSS sollte man sich allerdings auskennen.

Da innerhalb der Data-Attribute mit CSS gearbeitet wird, sind den Möglichkeiten kaum Grenzen gesetzt. Das leidige Vendor-Prefixing erledigt skrollr automatisch, da ein manuelles Prefixing innerhalb der skrollr-Syntax gar nicht möglich wäre.

skrollr benötigt keine sonstige Unterstützung in Form von etwa jQuery oder anderen Bibliotheken und bringt schlanke 12 Kilobyte auf die Waage. Die kleine Animations-Bibliothek wird maßgeblich von Alexander Prinzhorn entwickelt und steht auf GitHub unter der MIT-Lizenz zur kostenlosen Nutzung bereit.

Zu beachten ist, und darauf weist Alexander dankenswerterweise selber hin, dass skrollr seit einem Jahr, also seit September 2014, nicht mehr aktiv weiterentwickelt wird. Das kann bei der Verwendung in modernen Browsern, vornehmlich mobilen Vertretern ihrer Zunft, irgendwann zum Problem werden.

Andererseits arbeitet skrollr auf Mobilgeräten ohnehin anders als auf dem Desktop. Die Bibliothek erkennt den mobilen Zugriff und schaltet das native Scrolling ab. Das vorgetäuschte Scrolling erfolgt dann mit CSS Transforms auf Basis von Touch-Events. Nach meinem Verständnis sollte das Konzept durchaus noch eine Weile halten.

Eckwerk zeigt, dass man mit skrollr richtig schicke und dynamische Designs bauen kann. (Screenshot: Eckwerk)
Eckwerk zeigt, dass man mit skrollr richtig schicke und dynamische Designs bauen kann. (Screenshot: Eckwerk)

Auf dieser Seite stellt der Entwickler eine recht lange Liste von Verwendern der Bibliothek zusammen. Mir persönlich gefällt die Seite des Eckwerk sehr gut. Anders als in der doch recht theoretischen, zumindest aber trockenen Präsentation der Bibliothek, auf der eigens dafür erstellten Demoseite, zeigt das Eckwerk was skrollr kann, wenn es auf interessante Inhalte mit einer lebendigen Gestaltung losgelassen wird.

Was nutzt ihr, wenn es mal dynamischer zugehen soll?

]]>
Dieter Petereit
Jetzt „Apps mit HTML5, CSS3 und JavaScript“ von Rheinwerk gratis sichern! [t3n-Aktion] http://t3n.de/news/apps-html5-css3-javascript-634237/ 2015-08-26T11:30:30Z
Wer mobile Anwendungen entwickeln möchte, findet in „Apps mit HTML5, CSS3 und JavaScript“ von Rheinwerk eine hilfreiche Lektüre für den Start. Als Neuabonnent kannst du dich über eines der …

Wer mobile Anwendungen entwickeln möchte, findet in „Apps mit HTML5, CSS3 und JavaScript“ von Rheinwerk eine hilfreiche Lektüre für den Start. Als Neuabonnent kannst du dich über eines der Bücher gratis zum t3n-Abo freuen. Doch sei schnell, denn die Stückzahl ist auf 20 Exemplare begrenzt!

Kurzinfo zum Buch

Entdecken Sie die Möglichkeiten von HTML5 und JavaScript für die Entwicklung von WebApps und nativen Apps für iOS und Android. Schnell erhalten Sie ein Gefühl für die technischen und gestalterischen Möglichkeiten einer mobilen Anwendung. Florian Franke und Johannes Ippen zeigen Ihnen, wie Sie HTML5-Apps programmieren sowie auf GPS-Funktionen und Bewegungssensoren Ihres Smartphones zugreifen. Sie lernen darüber hinaus, wie Sie die Frameworks »Bootstrap«, »Ratchet« und »Framer.js« einsetzen und erfahren, wie Sie Ihre WebApps mithilfe von Cordoa, PhoneGap Build und React Native in native Programme umwandeln.

]]>
Charlyn Schaper
Webentwickler Jens Grochtdreis: „Prinzipiell ist CSS eine simple Sache. Und das sollte auch so bleiben!“ [Sponsored Post] http://t3n.de/news/webentwickler-jens-grochtdreis-632017/ 2015-08-25T08:30:37Z
Anzeige Anfang Oktober ist es so weit: Die HTML5 Days, AngularJS Days und JavaScript Days starten in Berlin. Auch der Web-Experte Jens Grochtdreis wird als Sprecher vor Ort sein.
Anzeige

Anfang Oktober ist es so weit: Die Days, AngularJS Days und Days starten in Berlin. Auch der Web-Experte Jens Grochtdreis wird als Sprecher vor Ort sein.

Im Interview mit dem Journalisten Thomas Wießeckel spricht Jens Grochtdreis über Stolpersteine in der Entwicklung mit HTML und und gibt einen Einblick in seinen Workshop über modulare mit Sass, den er auf den HTML5 Days halten wird.

Webmontag #22 am 16. Mai 2010 in der Brotfabrik in Frankfurt. Dieses Foto untersteht dem Copyright von Patrick Lenz. Verwendung in Beiträgen und Weblogs über den Webmontag Frankfurt sowie persönlicher und nicht kommerzieller Verwendung ist mit expliziter Quellenangabe mit Link zurück zu dieser Seite gestattet. Alle anderen Rechte vorbehalten. Bitte nehmen Sie für jedwede andere Verwendung Kontakt via Email auf.
Web-Experte Jens Grochtdreis (Foto: Patrick Lenz)

Thomas Wießeckel: Jens, wir befinden uns im Jahr 2015, wir besitzen moderne Browser und CSS sollte eigentlich allen gebräuchlich sein. Warum gibt es noch immer so viele Fehlerteufel? Sind die Features zu mächtig oder gar zu uneindeutig in der Verwendung?

HTML und CSS erscheinen immer so simpel. Aber viele verstehen Techniken wie Floats noch immer nicht.

Jens Grochtdreis: Das Zauberwort ist „sollte“. Ich gebe viele Schulungen. Dabei treffe ich immer wieder auf Entwickler, die eigentlich Backend-Entwickler sind, aber Frontend mitmachen müssen. Sie machen dies oft halbherzig, ohne Begeisterung und ohne jemals die Techniken richtig erlernt zu haben.

HTML und CSS erscheinen immer so simpel. Aber viele verstehen Techniken wie Floats noch immer nicht. Diese Entwickler eint mit der anderen großen Gruppe der „normalen“ Frontend-Entwickler, dass sie während der Arbeit selten Zeit für Fortbildung bekommen und dementsprechend von der Entwicklung abgehängt sind.

Wießeckel: Was sind so die typischen Stolpersteine?

Grochtdreis: Ich sehe drei Unterschiedliche: Der Entwickler hat ein Sprachfeature nicht verstanden. Das passiert gerne bei Floats und Clearing, natürlich erst recht bei selten eingesetzten Techniken wie Flexbox. Der Designer hat leider nicht genügend Ahnung von Frontendentwicklung und schätzt Techniken falsch ein. Oder er kennt Techniken nicht und kann sie deshalb nicht zum Guten des Designs nutzen. Oder der Kunde möchte ganz bestimmte Features und Techniken, ist aber selber mit einem Browser unterwegs, der diese nicht beherrscht. Natürlich soll die Webseite auch und gerade intern genauso toll sein, wie beim Endkunden mit einem modernen Browser. Das ist der Klassiker und er wird es bleiben.

Wießeckel: Aktuell schickt sich ein kleines Unternehmen aus Redmond an, mit Microsoft Edge alte Fehler wieder gut zu machen. Gelingt das deiner Meinung nach?

In Großunternehmen und Behörden wird man eher keinen modernen Internet Explorer finden.

Grochtdreis: Das liegt nur zum Teil in Händen von Microsoft. Technisch sind sie schon seit einigen Jahren sehr gut dabei. Das Problem ist die Langlebigkeit ihrer Produkte. Sie gewähren lange Garantie, die Großkunden wollen das aber auch so. Letztens zeigte ein Foto aus dem Bundestag eine große Leinwand, auf der der Startbildschirm von Windows XP zu sehen war.

Und der Bundestag ist damit nicht allein. In Großunternehmen und Behörden wird man eher keinen modernen Internet Explorer (IE) finden. Wär ich für 10.000 Rechner verantwortlich, würde ich auch kein Chrome installieren wollen, der sich einfach mal selber aktualisiert, ohne kontrollierbar zu sein. Ich denke, dieses Dilemma werden wir nie loswerden.

 Die HTML5 Days finden vom 5. bis 7. Oktober in Berlin statt. (Logo: Software & Support Media GmbH)
Die HTML5 Days finden vom 5. bis 7. Oktober in Berlin statt. (Logo: Software & Support Media GmbH)

Wießeckel: Sind all die angesprochenen Probleme ein Grund, warum sich Präprozessoren wie Sass noch immer einer immensen Beliebtheit freuen?

Grochtdreis: Diese sind bestimmt beliebt, weil sie Arbeit mit Vendor-Prefixes abnehmen müssen. Aber auch deshalb, weil sie echte modulare Arbeit ermöglichen. Präprozessoren können in jeglicher Hinsicht Arbeit abnehmen. Aber sie werden noch von zu wenigen Entwicklern genutzt.

Wießeckel: Auf den HTML5 Days gehst du auf modulare Webentwicklung mit Sass ein. Nähert sich die Frontendentwicklung damit noch mehr der „klassischen“ Entwicklung an?

Grochtdreis: Nein. Wir können zwar mit Loops in Sass arbeiten, aber das bisschen Programmierbarkeit macht aus Frontend-Entwicklung noch keine „klassische“ Entwicklung.

Zudem muss ich nach einigen Jahren intensiver Arbeit mit Sass sagen, dass mir hauptsächlich ein paar Kernfeatures gefallen, ich aber nie alle Sprachfeatures nutzen würde. Man kann Stunden mit der Erschaffung neuer Mixins verbringen. Die muss man nachher aber auch anwenden. Daran hapert es oft.

Präprozessoren nehmen Frontendentwicklern Arbeit ab. Aber sie machen nicht aus einer Beschreibungssprache eine Programmiersprache. Das wäre auch schade. Denn prinzipiell ist ja CSS eine simple Sache. Und das sollte auch so bleiben.

Wießeckel: Wird es nicht Zeit, dass CSS endlich Features übernimmt, die Präprozessoren schon seit langem bieten?

Grochtdreis: Ich wüsste nicht, warum. Ich vermisse beispielsweise keine Variablen. Ich denke bei so etwas auch immer an die Kompatibilität. Seit Jahren kann man nun schon „::before“ schreiben. Das steht so im Standard. Aber der IE versteht dies erst ab Version 9. Solange es also noch genügend IE8-Nutzer gibt, schließe ich sie mit der modernen Schreibweise unnötig ab.

Sollten zum Beispiel Variablen eingeführt werden, müsste erst der IE bis einschließlich v11 aussterben, damit man sie ruhigen Gewissens und ohne Hacks nutzen kann. Da sehe ich keinen Nutzen.

Neue Techniken können immer gerne eingeführt werden. Aber dann bitte echte CSS-Techniken, die man dann auch im Browser sieht. Aber keine Sprachfeatures von Präprozessoren. Wer Variablen nutzen will, der nutzt einen Präprozessor oder baut sich sein CSS mit PHP selber zusammen. Daran ist nichts Schlimmes. Das müssen wir nicht ändern.

Hast du auch Fragen an Jens Grochtdreis?

Infos & Tickets zu den HTML5 Days in Berlin

]]>
t3n Redaktion