Wie gestalte ich eine Webseite mit HTML 5 – Teil 2

Im 1. Teil haben wir uns ja bereits um die Seitenstruktur gekümmert. Nun fangen wir an, dem Ganzen ein Aussehen zu verpassen mit Hilfe von CSS3. Zur Zeit gibt es 4 große Rendering Bibliotheken, die das Verwenden von CSS3 schon ermöglichen. Das wären Webkit für Safari und Google Chrome, Presto für Opera und Gecko für Mozilla Firefox. Der Internet Explorer wird ab Version 9  mit Trident auch endlich im Internet von Heute ankommen.

Zur Zeit kocht jede Rendering Bibliothek noch ihr eigenes Süppchen bei der Umsetzung der CSS3 Spezifikationen. Deshalb muss man die CSS3 Tags mit einem Präfix versehen. Bei Webkit -webkit, bei Presto -o und bei Gecko -moz. Bei der Umsetzung von CSS3 ist Webkit zur Zeit am weitesten. Für Firefox gibt es die in diesem Tutorial verwendeten CSS Transitions noch nicht. Deshalb sind einige Effekte nur mit der Firefox Beta möglich. Die CSS3 Animation funktioniert nur mit Webkit Browsern.

In diesem Tutorial werde ich noch nicht das CSS3 Font-Face Feature verwenden, sondern Google Webfonts. Diese binde ich oben in meinem Dokument ein. Des weiteren lege ich noch für meinen HTML body ein Hintergrundbild und eine Farbe fest. Hierfür verwende ich das neue rgba Farbmodell. Die ersten drei Parameter sind die rgb Farbwerte und der letzte der Alphakanal. Continue reading

20 Things I Learned About Browsers and the Web

Viele Menschen sehen HTML5 und CSS3 noch in weiter Ferne. Sie verschanzen sich hintern ihren veralteten Internetexplorern und wollen weiter in ihrer alten Flash Welt leben. Als stolzer Apple Gerätebesitzer darf ich mir täglich anhören, kann dein MacBook überhaupt Flash? Guck mal, mein Android braucht für Google Streetview keine App. Ich muss nur dieses Männchen auf die Karte… ahh mist, geht nicht. Und das ist der Punkt. Flash ist einfach nicht mehr zeitgemäß. Zumindest nicht im Kontext mobiler Geräte.

Google hat gestern ein sehr schönes Beispiel dafür geliefert, dass man Flash nicht mehr braucht. Zusammen mit der Firma Fi haben sie ein wunderschönes Buch mit dem Titel „20 Things I Learned About Browsers and the Web“ herausgegeben, welches komplett auf Flash verzichtet. Auf den ersten Blick ist das nicht zu glauben. Seiten, die man mit Effekten umblättern kann, Abdunkeln des Bildschirms, bewegte Charaktere. Aber es stimmt. Das interaktive Buch kommt allein mit PHP, CSS3, HTML5 und Javascript aus.

Das Buch beschreibt auf 61 wirklich hübsch illustrierten Seiten verschiedene Technologien, Protokolle und interessante Erkenntnisse, die die Macher von Google Chrome durch ihre Arbeit erlangt haben. Wer schon immer mal wissen wollte, was „Cloud Computing“ ist oder was diese „Web apps“ sind, von denen alle reden, der sollte mal einen Blick in das Buch werfen.

Sehr schön ist auch das Feature, dass sich die URL ändert, ohne dass die Seite neu geladen wird. Um dieses Geheimnis zu ergrunden reicht ein Blick in Datei http://www.20thingsilearned.com/js/twentythings.history.js

window.history.pushState();

Das Buch nutzt viele Features der neuen Technologien. HTML5 wird unter anderem in dem Buch verwendet um sich den „state“ des letzten Besuches mittels der Offline storage database zu merken. So bekommt man am Anfang die Möglichkeit an die Stelle zurückzukehren, wo man das Buch verlassen hat.

CSS3 wird z.B. beim Blättern des Buches verwendet oder bei den animierten Illustrationen. Ein Besuch des Buches lohnt sich auf jeden Fall. Die Zukunft ist ein Stück näher gerückt.

Danke Google!

Umblättern

Es geht endlich weiter!

Lang ist es her seit meinem letzten Blogeintrag und zwischenzeitig sah der Blog doch sehr rampuniert aus. Grund

webventil - Photoshop, jQuery, Illustrator, Tutorials, free, Design, web 2.0, cms, WordPress, html, php, css, Typografie, fonts-2

dafür war eine Hackerattacke auf den Webhoster meines Vertrauens. Da ich viel um die Ohren hatte, gab hier lange nichts mehr neues und der kaputte Zustand hat sich nicht geändert.

Das soll sich jetzt wieder ändern! Im neuen Look ist der Blog jetzt wieder oben. Besuchern mit älteren Browsern kann ich nur dringend zu einem Update raten, dann ich stürze mich auf die Technologien, über die ich hie

r predige. HTML5, CSS3 usw. Ich werde die nächsten Tage noch mal ein paar nette Effekte für Besucher mit dem IE6 einbauen.

Ich wünsche viel Spaß auf der Seite und hoffe sie gefällt euch!

Für die Leute, die mit einem Internetexplorer gestraft sind, hier die Ansicht in einem guten Browser wie Firefox oder Safari, etc.
webventil - Photoshop, jQuery, Illustrator, Tutorials, free, Design, web 2.0, cms, WordPress, html, php, css, Typografie, fonts-1

Eternal moonwalk

„Der King of Pop ist tot“… diese Nachricht verbreitete sich die letzten Tage sehr schnell durch die ganze Welt. Seitdem ist Michael Jackson wieder in aller Munde. Tribut zollen ihm viele Künstler und Kollegen.

Beim Surfen im Internet ist mir die folgende Seite aufgefallen, die sowohl vom Design, als auch von der Idee her sehr gut gemacht ist. „Eternal moonwalk“ heißt die Seite und auf ihr kann man viele User Videos mit Moonwalk Versuchen bestaunen. Ein Besuch lohnt sich auf jeden Fall! Wer Spaß dran hat, sollte auf jeden Fall unten mal auf einen der Knöpfe neben der Audio Konsole klicken 😉

http://www.eternalmoonwalk.com/

mj

PS: Wenn wer Zeit und Lust hat… Wie lang ist der Moonwalk auf der Seite?

Hello World!

…ist meist das erste kleine Programm einer Person, die eine neue Programmiersprache erlernt. Es gibt einen Einblick in die Syntaktik einer Programmiersprache.

webventil ist zwar keine Programmiersprache, aber für einen Informatikstudenten, wie mich, ist der Einstieg in dieser Form sehr passend.

Also: Hello World!

oder in Java

public class Hallo
{
public static void main(String[] args)
{
System.out.println("Hallo Welt!");
}
}

oder in c++

#include
#include

int main()
{
std::cout << "Hallo Welt!" << std::endl;
}

Die Liste der Programmiersprachen ist lang und wen es interessiert, der kann sich unter folgendem Link auch andere Sprachen angucken.

Stellt sich nun die Frage, worum soll es in diesem Blog gehen? Nicht darum, möglichst viele Programmiersprachen zu lernen, nein mit dem webventil möchte ich eine Schnittstelle herstellen, zwischen dem interssierten Internetbenutzer und dem www.  Darüber hinnaus möchte ich eine Plattform schaffen, in der ich über neue Webtechnologien, freie Software, Grafikdesign, Tutorials und vieles mehr berichten möchte.

Seit also gespannt! Über Anregungen und Tips würde ich mich sehr freuen!

Arne