Referenzen für HTML, PHP, WordPress & Co.

t3n.de: Leaflet macht interaktive Karten zum Kinderspiel

Quelle: t3n.de

Wer viel programmiert, muss viel wissen. Wer viel in unterschiedlichen Programmiersprachen programmiert und dazu Content-Management-Systeme betreut, muss noch viel mehr wissen. Da kann man schon mal den Überblick verlieren. „Cheat-Sheets“ kommen da wie gerufen, da sie auf einen Blick den nötigen Durchbkick verschaffen und der Erinnerung auf die Sprünge helfen. Eine Übersicht über hilfreiche Referenzen bietet t3n.de hier.

Leaflet: Alternative zu Google-Maps

t3n.de: Leaflet macht interaktive Karten zum Kinderspiel

Quelle: t3n.de

Interaktive Karten sind von modernen Websites heutzutage kaum noch wegzudenken, sei es für die Routenplanung, die Darstellung von Unternehmens-Filialen in einem bestimmten Umkreis oder einfach die Anzeige von allgemeinen Points of Interests in der Umgebung. Dabei kommt bisher meist Google Maps zum Einsatz. Als Alternative bietet sich jetzt „Leaflet“ an, eine Javascript-Bibliothek, die alles mitbringt, was man für die Gestaltung von interaktiven Karten benötigt und dabei nur 33 Kilobyte groß ist. Leaflet basiert auf HTML5 und CSS3 und lässt sich durch Plugins individuell erweitern. Kartendaten beinhaltet Leaflet nicht, daher muss man zum Beispiel Open Streetmap integrieren, was allerdings im Handumdrehen erledigt ist. t3n.de stellt Leaflet vor und verspricht: „Karten so einfach wie nie.“

Silbentrennung und Umbrüche mit CSS3

CSS3 und Webtypografie: Neue Möglichkeiten für Silbentrennung und Umbrüche

Quelle: t3n.de

Silbentrennung – für Webdesigner und Content Manager bisher ein Buch mit sieben Siegeln. Dank CSS3 funktioniert Silbentrennung nun auch im Web – zumindest auf Englisch und Deutsch. Die neue CSS3-Eigenschaft „hyphens“ macht’s möglich. Bisher wird das neue Feature zwar noch nicht von allen Browsern direkt unterstützt, aber über die entsprechenden Vendor-Präfixe lässt sich „hyphens“ schon jetzt produktiv nutzen. t3n.de zeigt in einem kleinen Tutorial, wie’s geht. Darüber hinaus bietet CSS3 auch die Möglichkeit, überlange Wortungetüme (oder aber ellenlange Links) zwangsweise zu umbrechen. Dabei werden keine Bindestriche eingefügt, so dass umbrochene Links weiterhin funktionieren. „­“ war gestern!

HTML5-Präsentationen mit impress.js

Link zur Demo-Präsentation

Quelle: bartaz.github.com

PowerPoint war gestern – wer nicht mehr nur Folie an Folie reihen will, dem sei „impress.js“ sehr ans Herz gelegt! Mittels HTML5, CSS3 und Javascript entstehen beeindruckende Präsentationen, bei denen die Zuschauer nicht mehr in den Standby-Modus schalten, sondern hellauf begeistert sind.

Basierend auf CSS3-Transforms und -Transitions entstehen atemberaubende Visualisierungen. Einfach den Quellcode herunterladen und die Inhalte nach den eigenen Vorstellungen anpassen. Neben Rotationen sind sogar 3D-Effekte möglich, sofern sie vom verwendeten Browser unterstützt werden.

Auf t3n.de gibt’s eine kurze Einführung ins Thema.

Ohne Flash und Javascript: CSS3-Animationen

Link zum Artikel: CSS3: Animationen ohne Flash und JavaScript erstellen

Quelle: t3n.de

Animationen ohne Flash und ohne Javascript? CSS3 macht’s möglich! t3n.de präsentiert eine kurze, leicht verständliche Einführung ins Thema. Dabei werden sowohl „Transitions“, also die automatisierte Animation zwischen zwei fest definierten, statischen Zuständen, behandelt, als auch die Animation mittels „Keyframes“. Dabei können natürlich auch Umfang, Dauer und Art der jeweiligen Animation genau festgelegt werden, inklusive Beschleunigung, Abbremsung und Loop. Einziges Manko: Der Internet Explorer unterstützt die CSS3-Animationen (noch) nicht. Hier geht’s zum Artikel: CSS3: Animationen ohne Flash und JavaScript erstellen.

Tipps und Tools zu HTML5 und CSS3

Link zum Podcast: Tipps und Tools zu HTML5 und CSS3

Quelle: technikload.de

Der von t3n.de produzierte Webentwickler-Podcast TechnikLOAD hat sich in einer Sondersendung mit HTML5 und CSS3 beschäftigt. Herausgekommen sind jede Menge sehenswerte Tipps und Tools rund um die neue Technik. Unter anderem geht es um neue Präsentationstechniken, Bildmanipulationen direkt im Browser, 3D-CSS-Rollovers und -Transformationen und vieles mehr.