Bis gestern habe ich mich immer davor gedrückt in die Flash Welt abzutauchen. Aber gestern habe ich dann zum ersten mal auch Adobe Flash CS5 meiner Adobe Suite geöffnet. Adobe Labs hat nämlich Wallaby Technology Preview veröffentlicht. Damit ist es möglich FLA Dateien in HTML5 Webseiten umzuwandeln. Dabei wird die Animation als Canvas umgewandelt werden die einzelnen Layer als SVG exportiert und mit CSS3 Keyframe Animation und jQuery animiert. Die Animationen sind allerdings nur mit Webkit Browsern wie Chrome oder Safari anzusehen.

Wallaby kann man hier runterladen. Das Programm kommt in gewohnter Adobe Manier als Air Anwendung für Mac und Windows daher. Das Interface ermöglicht es eine FLA Datei zu laden und zu konvertieren. Eventuelle Fehler werden auch angezeigt.

ActionScript wird bisher nicht unterstützt. Die gesamte Feature und Support Liste gibt es hier.

Zu Testzwecken habe ich eine kleine Animation erzeugt und diese auch konvertiert. Leider sind meine Flash Skills sehr bescheiden, aber zu Testzwecken sollte diese kleine Animation reichen.

DEMO DOWNLOAD (FLA, HTML5)

Um Printmedien im Internet in gewohnter Weise darzustellen, bietet CSS3 viele schöne Features. Es ermöglicht z.B. einen Text in Spalten darstellen zu lassen.  Auch kann man mit dem CSS Attribut text-justify, einen ähnlichen Effekt wie Blocksatz erzeugen. Dabei werden Abstände zwischen den Zeichen erhöht, um einen Flattersatz zu verhindern.

Ziel dieses Tutorials wird es sein ein Zeitungslayout für das Web zu erstellen. Erst einmal erstellen wir dafür eine Art Container <div id=”container” /> um die Zeitung nachher zentriert darstellen zu können. Für den Titel unser Tageszeitung reichen die wenigen Schriftarten, die uns zur Verfügung stehen nicht aus. Also bedienen wir uns der @font-face Syntax. Für den Titel wählen wir English Towne und binden den Font wie folgt ein.

@font-face
{
font-family:'English Towne';
src:local('English Towne'), url(fonts/EnglishTowne.ttf) format("truetype")
}

Für den Teaser verwenden wir die Schriftart Molengo, die man über Google Web Fonts einbinden kann. Die Schriftart können wir einfach als font “Molengo” auswählen.

@import url(http://fonts.googleapis.com/css?family=Molengo);
#teaser article{
font:10pt 'Molengo';
}

Kommen wir nun zum header der Zeitung. Er besteht aus dem Zeitungsnamen und einer weiteren Zeile.

header
{
	display:block;
	text-align:center;
}

#container > header
{
	border-bottom:rgba(4,99,128,1) 5px solid;
	margin-bottom:10px;
}

#container > header h1
{
	font:50pt 'English Towne';
	margin:0;
}

#container > header p
{
	font-size:12pt;
	margin:0;
	padding:0;
}

Da wir nur das erste Header Element in dem Container haben möchten, benutzten wir das Pseudotag “>” um nur das “Child Element” von #container zu adressieren. Den eigentlichen Inhalt fassen wir in eine eigene DIV Box, die das Attribut display:table bekommt ein. Die zwei Inhaltsspalten section und aside haben dementsprechend display:table-cell.

In dem Teaser ist ein Hinweis auf Seite 2. Um nicht jedes mal ein “►” vor einen Link zu bekommen, können wir uns dem :before Selector in CSS bedienen und das content Attribut verwenden.

#teaser a
{
color:rgba(0,0,0,1);
font-weight:bold;
text-decoration:none;
}

#teaser a:before
{
content:"►";
}

Kommen wir nun zum Spaltenlayout. Dafür Bietet CSS3 das column-gap Attribut, welches den Abstand zwischen den Spalten festlegt, die column-rule, die die Border angibt und column-width, welches die Breite der Spalten festlegt. Je nach dem viel viel Platz vorhanden ist, entstehen dann Spalten, in diesen Maßen.

section article p
{
-moz-column-gap:20px;
-moz-column-rule:rgba(102,102,102,1) 1px solid;
-moz-column-width:200px;
-webkit-column-gap:20px;
-webkit-column-rule:rgba(102,102,102,1) 1px solid;
-webkit-column-width:200px;
column-gap:20px;
column-rule:rgba(102,102,102,1) 1px solid;
column-width:200px;
}

Schenken wir jetzt noch dem Bild im Teaser besondere Aufmerksamkeit. Nehmen wir an, wir möchten diesem eine Bildunterschrift hinzufügen, möchten die aber nur anzeigen, wenn man über das Bild mit der Maus fährt.

<div class="image">
          	<img src="images/stuhl.jpg" alt="stuhl" />
            <span class="caption">Ein Stuhl - Foto: webventil.de</span>
          </div>

Dafür erstellen wir eine Div Box, die overflow:hidden und postition:relative als Attribut aufweist. Das letztere ermöglicht es uns die Bildunterschrift (caption) mit postition:absolute, und bottom:0px an die untere Kante des Bildes zu platzieren. Jetzt wählen wir als margin-bottom noch einen negativen Pixelwert, sowie eine transition auf diese Eigenschaft. In der hover Regel setzt man das margin-bottom auf 0px.

#teaser .image
{
border:rgba(0,0,0,0.5) 1px solid;
display:block;
overflow:hidden;
padding:5px;
position:relative;
}

#teaser .image:hover
{
box-shadow:rgba(0,0,0,0.5) 0 0 20px;
}

#teaser .image .caption
{
-moz-transition:margin-bottom;
-moz-transition-duration:.5s;
-moz-transition-timing-function:ease-in-out;
-webkit-transition:margin-bottom;
-webkit-transition-duration:.5s;
-webkit-transition-timing-function:ease-in-out;
background:rgba(0,0,0,0.5);
bottom:0;
color:rgba(255,255,255,1);
display:block;
font-size:12pt;
left:0;
margin-bottom:-100px;
padding:5px;
position:absolute;
transition:margin-bottom;
transition-duration:.5s;
transition-timing-function:ease-in-out;
width:100%;
}

#teaser .image:hover .caption
{
margin-bottom:0;
}

Damit ist unser Zeitungslayout fertig.

DEMO DOWNLOAD

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

Wer bei seiner Webseite jetzt schon auf Grafiken verzichten  und stattdessen CSS3 verwenden möchte, findet im Internet eine menge Werkzeuge. Das Web 2.0 ist längst bei dem Standart angekommen, welcher noch gar keiner ist. Viele Browser ermöglichen die Anzeige von CSS3 / HTML5 basierten Webseiten.

Die folgenden Seiten sind tolle Beispiele für Tools, um sich CSS3 Verläufe, Schatten oder Rahmen zu erzeugen.

westciv.com – tools & resources for web professionals

Auf dieser Seite finden sich eine Menge Werkzeuge um z.B. Boxshadows, Gradients oder CSS Transformations zu erzeugen. Durch verändern der Regler lassen sich sich einfach hübsche Ergebnisse erzielen. Der einzige Nachteil ist, dass der erzeugte Code nicht für die verschiedenen Browser erst angepasst werden muss.

border-radius.com – border Radius

Die Seite Border-Radius macht, was ihr Titel verspricht. Durch verändern der Parameter an den Ecken der Box, lässt sich der Radius der Ecke verändern. Der CSS Code wird für die meisten Browser kopierfähig erzeugt.

colorzilla.com – Ultimate CSS Gradient Generator

Auf der Seite colorzilla.com lassen sich sehr komfortable CSS Farbverläufe erzeugen. Selbst eine für alte Browser und den Internet Explorer optimierte Codeversionen werden hier erzeugt. Das Tool lässt sich intuitiv bedienen und ähnelt sehr an das Farbeverlauftool von Photoshop und Co.

Wer sich schon immer gefragt hat, was Goolge über einen weiß, der kann nun sein Google Dashboard aufrufen. Hier bekommt man Informationen über alle seine Google Konten z.B. Google Mail, Google Reader, Picasa, aber auch über seinen YouTube Account und seine Suchanfragen.

Am interessanten ist sicherlich das Webprotokoll. Hier erfährt man, was man wann gesucht hat, was man angeklickt hat, und und und….

Hier gelang man zum Dashboard: https://www.google.com/dashboard/

Beim Surfen im web ist mir folgende Seite ins Auge gesprungen. Templay, eine Seite für Tutorials und kreative Downloads. Das mag nichts neues sein, aber die Qualität macht den Unterschied. Oft findet man nur Tutorials in englischer Sprache und bei den deutschen Tutorials, lässt die Qualität zu wünschen übrig. Hier nicht! Templay bietet nicht nur hochwertige Tutorials im Bereich Photoshop, auf der Seite kann man sich auch tolle Icons, Themes, Templates und vieles mehr runterladen.

Templay.de ist die Idee eines kleinen Teams, bestehend aus Grafikern, Webdesignern und Programmierern. Diese einem Blog ähnliche Plattform soll in erster Linie eine kreative Hilfe für Dich und Deine Projekte sein. Mit deutschsprachigen Tutorials, Grafiken und Web-Templates möchten wir Dich bei der Umsetzung Deiner Ideen unterstützen.

Ein Besuch lohnt sich! http://www.templay.de/

Wer schon einmal eine HTML Seite geschrieben hat oder sich den Quellcode solcher angeschaut hat, dem werden sicherlich HTML Entitäten schon einmal ins Auge gesprungen sein. Sie beginnen mit einem & gefolgt von einer Buchstabenkombination oder einer Raute und Ziffern, die durch ein ; abgeschlossen werden. Im Footer vieler Seiten befindet sich ein Copyright. Aber wie bekommt man das Zeichen dafür in seinen Quellcode?

Bei einem x-beliebigen Schreibprogramm würde man dafür auf Einfügen -> Symbole klicken, in HTML gibt es dafür so genannte Entities, also Platzhalter für bestimmte Zeichen. Das & kann man z.B. durch &copy; ausdrücken oder durch die Entity nummer &#169;

Bei vielen HTML Editoren gibt es eine Autoverfollständigung, sobald man ein & eingibt. Wenn man diese Funktionalität nicht zur Verfügung hat hilft einem die Seite entitycode.com. Hier findet man eine kleine übersichtliche HTML Entity Referenz.

Bereits am Donnerstag hat Microsoft hat seinen neuesten Browser, den Internet Explorer 8, herausgebracht.

Making your web even better,.. Faster, Easier, Safer

Gerade für Webentwickler war der Internetexplorer (IE) immer, fast egal in welcher Version, ein Dorn im Auge. Aber es hatte auch ein Gutes. Die Skills in JavaScripten konnte man dabei gut schulen. Angefangen bei unterschiedlichen Stylesheets (“Styleweichen”) bis hin zum Austauschen von Alphatransparenten Flächen durch transparente gifs. Jeder der schon mal eine Homepage programmiert hat, der wurde durch den stets anderen Look im IE überrascht.

Mit Version 8 schafft Microsoft es endlich als Konkurrenzprodukt zu den beliebten Alternativen Firefox, Opera oder im Mac Bereich Safari zu dienen. Version 7 des Browsers konnte weder im Bereich Performance noch Funktionsumfang mit den Konkurrenten mithalten.

Die Bedienoberfläche von IE8 wurde deutlich verbessert. So gibt es wie in Firefox 3.1 Beta 3 einen Modus für privates Surven, eine intelligente Adresszeile und ikrementelles Suchen im Seiteninhalt.

Den Downloadlink finden Sie hier.

Die lang erwartete dritte Beta Version von Firefox 3.1 ist seit Freitag zum Download auf der Mozilla Seite verfügbar. Als Verspätung wird die JavaScript-Engine TraceMonkey verantwortlich gemacht.

Der 5. Meilenstein bringt unter anderem Verbesserungen im Private Browsing Mode mit sich. So ist es jetzt möglich die Spuren der besuchten Seiten zu verwischen.

Der Changelog klärt über weitere Verbesserungen auf:

• Improved the new Private Browsing Mode, including the ability to “Forget This Site” from the History sidebar.
• Improved performance and stability with the new TraceMonkey JavaScript engine.
• Improvements to web worker thread support.
• New native JSON support.
• Improvements to the Gecko layout engine, including speculative parsing for faster content rendering.
• Support for new web technologies such as the and elements, the W3C Geolocation API, JavaScript query selectors, CSS 2.1 and 3 properties, SVG transforms and offline applications.

Privater Modus

Die Rendering Engine Gecko ermöglicht es das Rendern einer Homepage auch dann fortzusetzen, wenn noch auf ein Script gewartet wird.  Dadurch wird der Seitenaufbau deutlich schneller.

Testers can download Firefox 3.1 Beta 3 builds for Windows, Mac OS X, and Linux in 64 different languages. Developers should also read the Firefox 3.1 for Developers article on the Mozilla Developer Center.

Die Zeitung von vor 10 Jahren findet man im Archiv, genauso wie altes Filmmaterial und Dokumente. Doch die Recherchemethoden haben sich im Laufe der Zeit verändert. Statt sich Bücher aus der Bibliothek auszuleihen, versucht man heute doch erst einmal zu googlen. Alles was man dort findet, kann man auch anklicken und sich anschauen.

Im Cache

Aber wie sieht es aus mit Webseiten, die schon längst verschwunden sind? Findet man die bei Google auch? Ja! Zumindest begrenzt, so lange die Seiten noch im Index sind. Dann kann man immer noch über den Link “im Cache”, eine alte Version der angeforderten Seite aufrufen.

Aber was passiert, wenn der Google Cache nicht ausreicht? Wo findet man dann die anderen Seiten wieder? Verschwinden Daten dauerhaft aus dem Internet, wenn man sie löscht? Viele Seiten bestimmt, aber längst nicht alle. Auf der Seite http://www.archive.org/ kann man einen Blick in die Vergangenheit werfen.

Ich habe mal 10 Beispiele aufgelistet aus 10 Jahren Internet.

Google 1999/2009

WordPress 2003/2009

Apple 1999/2009

Amazon 1999/2009

Facebook 2006/2009

Whitehouse 1997-2009

Microsoft 1999-2009

t-online 1997-2009

Tagesthemen 2000-2009

FH Wolfenbüttel 2000/2009