Hier geht’s zu Splashnology

Und dies sind die zockbaren Spiele:

• Missile Command
• Pong
• Super Breakout
• Yars‘ Revenge
• Asteroids
• Centipede
• Combat
• Lunar Lander

Und wieder mal wurde, diesmal von ATARI, hiermit ein tolles Showcase geschaffen, das aufzeigt, was mit HTML5, CSS3 und JavaScript möglich ist und dass diese Technologien Flash nicht allzu sehr nachstehen.

Diesen Fragen nimmt sich die Website Adobe FLASH vs. HTML5 von Alex Benz auf beeindruckende und zugleich einfache Art und Weise an. Die als Bachelor Thesis an der HS Offenburg entstandene Arbeit zeigt zwei Überlagerte Websites mit gleichen Funktionen, eine davon mit Adobe FLASH und eine mit HTML5 / CSS3 / JS umgesetzt. Per Slider kann zu jedem Zeitpunkt zwischen den einzelnen Ansichten hin- und her gewechselt werden. So kann man direkt vergleichen. Die Seite knöpft sich dabei die Themen Animation, Typografie,Video und Audio vor, die wohl auch zu den interessantesten bei diesem Vergleich gehören.

Absolut sehenswert und super umgesetzt. Am besten mit Chrome oder Firefox ansurfen. Hier geht’s zur Website!

Was haltet ihr von der Seite? Wer macht eurer Meinung nach das Rennen?

1. Night Club
 

Das Night Club Template hat, wie der Name schon vermuten lässt, einen coolen und dunklen Look, der es für die Verwendung einer Website für eine Disco o.ä. eignen lässt. Außer den reinen Template-Files kann man auf der Website auch noch die passende Photoshop-Datei herunterladen, um etwaige grafische Modifikationen sehr einfach vornehmen zu können.

2. VividPhoto

Das VividPhoto Template eignet sich sehr gut für die Präsentation von Fotos. Zudem hat es ein nettes animiertes Menü mit Bild.

3. ElegantPress

ElegantPress ist ein sehr klares und hübsches Template mit einen integrierten Content-Rotator auf der Startseite. Es ist kompatibel mit nahezu allen gängigen modernen Browsern.  

4. Lifebook

Lifebook ist ein Blogtemplate mit nettem Look, dass mit wenigen Anpassungen für die Verwendung mit den meisten Blogsysteme adaptiert werden kann.

5. Kroft

Das Template mit dem merkwürdigen Namen Kroft bietet sechs verschiedene Hintergründe, einen Content-Rotator und die PSD-Datei kann auch wieder mit heruntergeladen werden.

6. Single Page Portfolio Template

Dieses Template ohne Namen wird dem Trend der Single Page Websites gerecht, da man sich hier nur per Scrolling auf einer einzigen Seite bewegt. Außerdem sieht es sehr gut aus und ist vor Allem als Portfolio Website geeignet.

7. IMCreatives

IMCreatives ist meiner Meinung nach nicht unbedingt eine Template-Schönheit, über Geschmack lässt sich aber bekanntlich streiten und mit ein paar kleinen Anpassungen kann man auch hieraus eine echte Perle zaubern. Sehr fancy ist der integrierte Content-Rotator im Spielkarten-Style.

8. Think Simple

Wer’s eher schlicht aber klassisch mag, für den könnte Think Simple ein passendes Template sein. Es ist eine gute Basis für die Entwicklung eines eigenen Designs.

9. Inspect Elements Single Page Portfolio

Ein weiteres Single Page Layout hat Inspect Element entworfen und bietet das Ganze als Tutorial an. Ideal für Leute, die sich ein wenig in die Templateentwicklung in HTML5 und CSS3 hineinlesen möchten.

10. Shinra

Shinra hat außer HTML5 und CSS3 noch eine Menge anderer Features zu bieten, u.a. die Verwendung von Google Webfonts, ein Skin System, Kontaktformular, Fancybox und das bekannte Superfish Menü. Dank der zahlreichen Features ist dieses Template mein Favorit in dieser Auswahl.

Kaum ein Entwickler oder Web Designer hat alle Keywords, Kommandos oder Tags einer Programmier-, Script- oder Beschreibungssprache im Kopf. Zum Einen sind das in vielen Sprachen einfach zu viele, von denen man die meisten auch nur ganz selten braucht, zum anderen ist es auch gar nicht nötig, sie auswendig aufsagen zu können. Man muss immer nur wissen, wo sie zu finden sind.

Eine große Hilfe für Letzteres sind sogenannte Cheat Sheets (zu Deutsch: Spickzettel), die man sich z.B. großformatig ausdrucken oder für den schnellen Zugriff ins Dateisystem legen kann. Auf diesen Cheat Sheets findet man dann eine Übersicht über alle (oder zumindest die wichtigsten) Befehle, die man in der jeweiligen Sprache benötigt. Auch für HTML5 und CSS3 haben sich einige findige Köpfe schon mal hingesetzt und solche Spickzettel entworfen. Hier möchte ich euch eine kleine Liste von meiner Meinung nach guten HTML5 und CSS3 Cheat Sheets präsentieren.

1. Smashing Magazine

Die Cheat Sheets vom Smashing Magazine sind sehr umfangreich und klar strukturiert. Sie werden angeblich aktualisiert, sobald sich an den Standards etwas ändert oder etwas Neues hinzukommt. Dafür sind sie grafisch kein großes Highlight.
Es gibt sowohl eine HTML5– als auch eine CSS3-Version.

 2. Woork Up

 Ein etwas kompakteres und hübscheres Cheat Sheet für HTML5 hat Antonio von Woork Up erstellt.

 3. Inspired Mag

Vom Inspired Mag kommt ein nettes Cheat Sheet mit praktischer Farbcodierung, mit der man einen HTML-Tag gleich einem Bereich zuordnen kann.

4. When Can I Use

Die Seite caniuse.com hatte ich ja schonmal vorgestellt. Sie ist zwar kein Cheat Sheet im eigentlichen Sinne, jedoch trotzdem sehr nützlich, da man hier nachschauen kann, welche Eigenschaften und Tags heute schon von welchen Browsern unterstützt werden.

5. findmebyip.com

Ähnlich wie caniuse.com bietet die findmebyip.com/litmus/ eine kleine Übersicht über die Browserkompatibilität von HTML5 und CSS3 Eigenschaften.

6. CSS3 Click Chart

Das CSS3 Click Chart von Impressive Webs ist ein klickbares Cheet Sheet, das zu einer grafisch dargestellen CSS-Eigenschaft den dazu benötigten Code ausspuckt.

7. W3C Cheatsheet

Der offizielle Spickzettel vom W3C kommt mit einer Suchmaske, die ein Schlagwort in den Definitionen von HTML, CSS, SVG und XPath sucht und die gewünschten Informationen dazu ausspuckt.

8. Nihilogic HTML5 Canvas Cheat Sheet

Das HTML5 Canvas Cheat Sheet von Nihilogic befasst sich, wie der Name schon vermuten lässt, ausschließlich mit dem HTML5 Canvas. Damit eignet sich dieser Spickzettel hervorragend für alle, die z.B. Animationen oder Grafiken mit den neuen Webtechnologien erstellen wollen.

9. GoSquared CSS Help Sheet

Die CSS Help Sheets von GoSquared gibt es sowohl für CSS2 als auch für CSS3. Hier werden nicht nur die offiziellen Eigenschaften genannt sondern auch die, mit denen man auch ältere Webkit und Mozilla Browser ansprechen kann. Die Sheets sehen gut aus, sind aber dafür nicht sehr umfangreich. Die für Web Designer wichtigsten Eigenschaften wie abgerundete Ecken oder Schatten sind aber dabei.

Kennt ihr noch andere tolle Cheat Sheets für HTML5 oder CSS3? Lasst uns an eurem Wissen teilhaben und postet euren Link als Kommentar zu diesem Artikel.

Für viele Leute, die in nächster Zeit vorhaben, einen Blog zu starten oder einem bestehenden Blog ein neues Aussehen zu geben, könnte sich die Frage stellen, ob die zukünftige Site gleich in der zukunftsträchtigen HTML5 / CSS3 Technik umgesetzt werden sollte. Und für viele ist das neben einer generell technischen auch eine Kostenfrage, da der Markt an qualitativ hochwertigen kostenfreien HTML5 WordPress Themes noch sehr übersichtlich ist.

Deshalb gibt es hier für all diejenigen, die sich für den Schritt in Richtung Zukunft mit einem HTML5-basierten Template entschieden haben, eine kleine Liste von sieben kostenfreien und guten WordPress Designs.

1. Yoko

Yoko ist ein frisches und umfangreich ausgestattetes Theme von den Machern vom Smashing Magazine. Es unterstützt die wichtigsten Browser, hat für ältere ein Fallback implementiert und ist dank CSS3 Media Queries für Geräte mit verschiedensten Displaygrößen geeignet. Über eine Theme-Options-Seite lassen sich die wichtigsten Parameter bequem über’s Backend pflegen. Außerdem bietet das Theme verschiedene Post-Formate (aside, gallery, image, video, link and quote), optionale Submenüs, ein Social Media Widget für die wichtigsten Netzwerke und geschachtelte Kommentare.
Hier geht’s zur Download-Seite.

2. Spectacular

Ebenfalls vom Smashing Magazine kommt Spectacular, ein Theme mit Retro-Look, welches sowohl HTML5 als auch HTML 4.01 konform ist. Auch bei diesem Theme wurde darauf geachtet, dass es in allen wichtigen Browsern gleich aussieht (Chrome, Opera, IE7+, Firefox).
Zum Download

3. HTML5Press

HTML5Press ist ein modern angehauchtes Theme mit vielen Extras. Man kann aus 6 Farbschemen und 40 Schriften wählen, es gibt einen Content Rotator für die Startseite und auch einen deutsche Übersetzung.
Hier herunterladen!

4. Temple Gate

Auch Temple Gate hat einen modernen Look und bietet ebenfalls einen Bereich für Featured Posts. Außerdem ist es nach der barrierefrei nach WCAG 2.0 AA und suchmaschinenoptimiert.
Hier zum Download.

5. Handcraftet WP

Das Theme Handcraftet WP ist als Starter-Theme gedacht, d.h. für all diejenigen, die sich etwas mit CSS auskennen und das Aussehen eh nach eigenen Bedürfnissen anpassen möchte. Hier ist u.a. das JavaScript Framework jQuery inkl. Fallback schon integriert.
Hier gibt’s dieses Theme.

6. PressWork

PressWork hatte ich ja schonmal in einem Artikel kurz vorgestellt, es darf aber auch hier nicht fehlen. PressWork ist ein Framework mit praktischen Möglichkeiten, sich ein Theme u.a. per Drag&Drop selbst zu konfigurieren. Das Framework gibt dann 100% validen HTML5 und CSS3 Code aus. Mit dabei sind auch hier wieder viele Webfonts aus dem Google Font Directory.
Hier geht’s zur Website.

7. Busby

Als letztes Theme sei an dieser Stelle Busby genannt. Der Look ist ein wenig Zeitschriften-mäßig, sehr schick meiner Meinung nach. Auch hier finden wir einen nützlichen Content Rotator für Featured Posts, ein zweispaltiges Layout, eine Import- und Exportfunktion für Einstellungen etc. und zwei verschiedene Styles (hell und dunkel). Außerdem gibt es eine Seite mit SEO-Einstellungen, mit der man sich so machen Plugin sparen kann.
Zur Downloadseite.

Es gibt sicherlich noch mehr tolle und kostenlose HTML5 WordPress Themes, die hier nicht gelistet sind. Wenn ihr ein gutes kenn, dann ergänzt doch diese List über die Kommentarfunktion. Würde mich sehr darüber freuen!

Photoshop-User werden damit sofort zurecht kommen, aber auch für Nutzer anderer Grafikprogramme ist die Funktionsweise im Prinzip selbsterklärend – per Schieber und Checkboxes können verschiedene Effekte ausgewählt und deren Parameter angepasst werden. Das Ergebnis des erstellten CSS-Stils kann sofort in einer kleinen Vorschau betrachtet werden und per Klick auf „CSS Code“ am linken unteren Bildschirmrand bekommt man den dazu passenden CSS Code ausgespuckt. Wirklich sehr gelungen!

Grafischer CSS Editor Layer Styles

Hacked By Shade

GreetZ : Prosox & Sxtz

Hacked By Shade <3

Adobe engagiert sich mehr und mehr im HTML5-Bereich. Ist das eine Erklärung, dass die Entwicklung an Flash irgendwann eingestellt wird? Was denkt ihr?