WordPress und HTML5: Neues Framework PressWork

Juli 7th, 2011

Wer einen eigenen Blog oder eine Website mit dem WordPress-CMS führt und diesen schon längst mal auf HTML5 umstellen wollte, der sollte nun die Ohren spitzen: Am Samstag wird auf dem WorldCamp Montreal ein neues Framework namens PressWork vorgestellt. Dieses soll es ermöglichen, per Front-End Editor und Drag and Drop ein eigenes HTML5-Layout für WordPress zu erstellen und dieses als Theme zu verwenden. Das beste daran: es ist OpenSource und somit kostenlos.

Hört sich sehr vielversprechend an. Ich werde das auf jeden Fall testen und darüber berichten, sobald es verfügbar ist. Solange könnt ihr euch ja schon mal die Website der Macher ansehen.

PressWork - HTML5 Layouts für WordPress

PressWork - HTML5 Layouts für WordPress

Der Weg zum Plug-In-losen Browser: Mozilla’s PDF.js

Juli 6th, 2011

Der Trend ist eindeutig: immer mehr Dienste, die bisher von klassischen Desktop-Anwendungen übernommen wurden, verlagern sich langsam aber sicher ins Internet oder wie man so schön sagt „in die Cloud“. Dazu gehören neben E-Mail oder Newsreader, die ohnehin auf einer bestehenden Internetverbindung basieren, auch Office-Tätigkeiten oder Datenspeicher. Viele Dieser Cloud-Anwendungen sind somit stark von der Darstellungsfähigkeit des verwendeten Browsers abhängig. Nicht selten benötigt man zusätzliche Plug-Ins oder Software wie den Flash Player, um die gewünschten Inhalte korrekt darstellen zu können.

Ein sehr verbreiteter Vertreter dieser Art, der auf nahezu allen Rechnern installiert ist, ist der Adobe Reader zum Anzeigen von PDFs. Adobes PDF-Format hat sich in den letzten Jahren zu einem unverzichtbaren Format zum Austausch von Dokumenten gemacht und findet eine große Verbreitung im Internet. Und für die Darstellung von PDF Dateien im Browser benötigt man eben jenen Adobe Reader. Doch damit will Mozilla jetzt Schluss machen und stellt mit der Version 0.2 seines Firefox PDF-Readers nun eine Lösung vor, die PDFs per JavaScript rendern und in einem HTML5 Canvas anzeigen soll. Seit dieser Version ist der Firefox PDF-Reader nun pixelgenau bei der Darstellung von PDF Inhalten und bringt Unterstützung von TrueType Schriften und verbesserte grafische Darstellung.

Mit dem Firefox PDF-Reader geht Mozilla also einen weiteren großen Schritt in Richtung Plug-In-loses Internet-Browsing… HTML5 macht’s möglich!

Riesen Showcase von HTML5 Websites

Juli 5th, 2011

Einer meiner Lieblingsblogs, Instantshift, hat einen Artikel mit mehr als 70 gelungenen HTML5-Websites veröffentlicht – sehr gut zur Inspiration und zum Ideen holen. Außerdem sieht man bei einigen Beispielen eindrucksvoll, was mit HTML5 möglich ist. Unter den Seiten sind sowohl promimente Vertreter wie z.B. die Apple-Website, aber auch einige unbekannte Schmankerl. Auf jeden Fall lohnt sich das Reinschauen!

70+ Inspirational Examples of Websites Designed With HTML5

Tutorial: Keyframe-Animationen mit CSS3

Juli 3rd, 2011

CSS3 ermöglicht es, ohne Zuhilfenahme von JavaScript sogenannte Keyframe-Animationen zu erstellen. Bei dieser Technik bestimmt man Anhang von einigen wenigen Schlüsselbildern einen groben Ablauf einer Animation, die restlichen Zwischenbilder werden dann automatisch generiert und über eine vorgegebene Zeit eingespielt. Keyframe-Animationen sind u.a. aus Adobes Flash bekannt, bei dem die Keyframes in einer Zeitleiste festgelegt werden können. Der Vorteil liegt klar auf der Hand: Man braucht nicht die komplette Szene durchzuanimieren, es genügt, die wichtigsten Eckpunkte in Form von Schlüsselbildern festzulegen. Nahezu jede CSS-Eigenschaft kann somit animiert werden.

Klar, die Keyframe-Animationen von CSS3 sind lange nicht so flüssig und ausgereift wie die von Flash oder solche, die mit JavaScript realisiert werden können. Für einfache Button-Mouseovers zum wechseln der Farbe oder für ein wenig Bewegung reicht es aber allemal. Splashnology hat das Prinzip der CSS3-Keyframe-Animation, die bisher nur in Webkit-basierten Browsern (Safari, Chrome) zur Verfügung stehen, in einem kurzen und übersichtlichen Tutorial erklärt.

zum Artikel

Splashnology CSS3 Keyframe Animations

Kurzes Tutorial für CSS3 Keyframe-Animationen

Tutorials, Techniken und Tools zum Erstellen von CSS3 Navigationsmenüs

Juni 30th, 2011

CSS3 bietet vielen neue Funktionen gegenüber seines Vorgängers. Beispielsweise musste man sich bei CSS2 mit wenigen Pseudoklassen wie :hover oder :active zufrieden geben. Mit CSS3 kommen weitere wie :first-child und :last-child oder :target hinzu. Dies erleichtert unter anderem das Erstellen on Navigationsmenüs ohne Hilfe von JavaScript. Es gibt aber auch noch weitere Möglichkeiten, solche mit reinem HTML und CSS umzusetzen.

Liste von Tutorials zum Thema Navigationsmenü mit CSS3

Liste von Tutorials zum Thema Navigationsmenü mit CSS3

Der Blog Splashnology hat eine Liste an Tools, Tutorials und Techniken zusammengestellt, die bei der Erstellung von Menüs zur Website-Navigation helfen sollen und die aktuellen CSS-Technologien abdecken.

zur Liste