Web-Tipps

Trends & News | Web-Tipps

Filtern und Shaden

http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab

www.kickjs.org/example/shader_editor/shader_editor.html

CSS Filter und Shades sind derzeit in Nightly Builds von WebKit und in Chrome Canary als experimentelle Features eingebaut. Adobes CSS Filterlab zeigt, was man alles mit dem im Standardisierungsprozess befindlichen CSS-Feature anstellen können wird. Sollte der Browser mit CSS Filterlab nicht kompatibel sein, erscheint eine Anleitung. Diese beschreibt, was man installieren und einstellen muss, um das CSS Filterlab nutzen zu können. Im Browserfenster lassen sich Animationen mit Effekten über Zeit aufbauen. In Zukunft kann man Filter aus Github importieren, oder selbstgeschriebenen Code auf Github veröffentlichen. Einige Effekte sind voreingestellt.

Adobe hat diese Website erstellt, um die Nutzung seiner vorgeschlagenen CSS-Filter und -Shader zu demonstrieren. Diese machen sich die WebGL Shader Language zunutze, um Texturen und Bewegungen in CSS darstellen zu können. So lässt sich etwa eine Textur von Papier beschreiben und zum nächsten Inhalt umblättern. Diese nutzt Kick.js, eine JavaScript-Engine für Browserspiele, ebenfalls. Sie hat mit dem GLSL Shader Editor eine Programmierumgebung samt Vorschau-Funktion für den Browser, um Elementen Bewegung einhauchen zu können. (rzl)

Schnell noch Popcorn machen

https://popcorn.webmaker.org

Das PopcornMaker-Tool von Mozilla im Browser aufrufen, schnell ein Video von YouTube, Vimeo, ein HTML5-Video oder einen Song von Soundcloud hineinwerfen – und dann Popcorn holen. Sobald das Video oder der Song geladen ist, stehen einem Events zur Verfügung. Mit diesen kann man etwa Kartenausschnitte aus Google Maps oder Text mit Links einfügen. Auch Twitter-Feeds aus der Suche oder von Nutzerkonten sowie Inhalte aus der Wikipedia lassen sich einblenden.

Im unteren Teil der Seite ist die Timeline, auf der man die Events per Drag & Drop an den gewünschten Zeitpunkt ziehen kann. Über Bildevents lassen sich auch animierte Gifs darstellen, was über die Tatsache hinwegtröstet, dass nur eine Videoquelle verfügbar ist.

Funktionen wie Überspringen, Loopen und Pause manipulieren das Abspielen von Medienquelle und Events. Speichern kann man das so erstellte Werk, wenn man sich mit Mozillas Persona beim PopcornMaker einloggt. Anschließend teilt man das erweiterte Video oder bettet es in Webseiten ein. (rzl)

CSS-Schnipsel im Labor

http://cssdeck.com

Schnipsel für Schnipsel wühlt man sich durch das Archiv von CSSDeck auf der Suche nach schön gestaltetem Webdesign. Die Website unterteilt das Fenster in Vorschau und Editoren für den zugehörigen HTML-, CSS- und JavaScript-Code. Dadurch verhält sich die Website wie ein Editor mit Live-Vorschau. Der Dienst ist also nicht nur Augenschmaus, sondern kann als praktische Inspirationsquelle dienen. Ob eine Blume, deren Blütenblätter per CSS definiert werden und die JavaScript aufblühen lässt, oder das Spiel Doodlejump als Browserspiel – viele gute Ideen für Gestaltung lassen sich hier finden. Gefällt einem etwas, kann man den Code in ein eigenes Projekt kopieren und im Profil mit dem Code weiterarbeiten. Der Dienst lässt sich auch nutzen, um mit anderen parallel am Code zu arbeiten. Gefallen einem Projekte von anderen, speichert man sie als Favoriten oder kommentiert sie. Entwickler, deren Arbeit man für gut befindet, kann man im Dienst befreunden. (rzl)

Ein Bild überall

www.gravatar.com

Gravatar beliefert Dienste wie Wordpress.com, Github und Co. und Kommentarfelder von Blogs mit Nutzerbildern. Ein Gravatar-Konto verbindet eine E-Mail-Adresse mit einem Bild. Mit einem angelegten Konto lassen sich auch noch weitere E-Mail-Adressen verbinden. Dienste und Kommentarfelder holen sich das Bild dann automatisch, sobald man eine bei Gravatar hinterlegte Adresse benutzt. Außerdem kann man Kontaktdaten im Gravatar-Profil veröffentlichen und das Profil mit Konten in sozialen Netzwerken und anderen Präsenzen verbinden. Ändert man sein Bild, wird es auch gleich in allen Kommentarspalten und mit Gravatar-Bildern befüllten Profilen aktualisiert. (rzl)

Apps verknüpfen

https://zapier.com

http://ifttt.com

Ähnlich wie If this then that kann man auch mit Zapier Webdienste miteinander verknüpfen. Ein Dienst ist dabei der „Trigger“: Etwas, was Sie hier tun, löst eine Handlung aus. Zapier nennt das „Zaps“. Mails aus GMail können beispielsweise automatisch Aufgaben in Google Task werden. Um Zaps nutzen zu können, muss man Zapier oft Zugang zu Konten bei anderen Diensten geben. Das Gratis-Angebot ist recht begrenzt mit 100 ausgeführten Aktionen pro Monat. Allerdings ist das Angebot von Diensten, die man nutzen kann, groß. Viele Business-Anwendungen sind dabei, die Projektmanagement, Verkäufe, Kundenakquise oder Teammanagement unterstützen und durch Zapier nun miteinander verknüpft werden können. Gratiskonten gleichen alle 15 Minuten ab, ob irgendein Ereignis einen „Zap“-Trigger auslöst und führt dann eine Handlung aus. (rzl)

Artikel kostenlos herunterladen

weiterführende Links