Seit CSS3 hat man nicht nur die Möglichkeit Multiple-Backgrounds zu benutzen, sondern auch Mehrfach das text-shadow Attribut zu nutzen. Dieses führt zu schönen Text Effekten. Die Parameter bei der Verwendung von text-shadow sind:

text-shadow: <Verschiebung x-Richtung><Verschiebung y-Richtung><Stärke Weichzeichner><Farbe>;

Neon

.neon {
color:#fff;
background:#000;
text-shadow: 0 0 10px #fff,
0 0 20px #fff,  0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
}

Giftig

.giftig {
color:#fff;
background:#000;
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #06ff00,
0 0 70px #06ff00,
0 0 80px #06ff00,
0 0 100px #06ff00,
0 0 150px #06ff00;
}

Feuer

.feuer {
color: black;
text-shadow: 0px 0px 4px #fff,
0px -5px 4px #FF3,
2px -10px 6px #FD3,
-2px -15px 11px #F80,
2px -25px 18px #F20;
}

3D Brille

.dreiDBrille {
color:rgba(255,0,0,0.5);
background:#fff;
text-shadow: 8px 0px 0 rgba(0,255,0,0.5);
}

3D Text

.dreiDText {
background:#404040;
color:#fff;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,0.1),
0 0 5px rgba(0,0,0,0.1),
0 1px 3px rgba(0,0,0,0.3),
0 3px 5px rgba(0,0,0,0.2),
0 5px 10px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.2),
0 20px 20px rgba(0,0,0,0.15);
}

Letter

.letterpress {
background:#404040;
color:#303030;
text-shadow: -1px -1px 0px #101010,
1px 1px 0px #505050;
}

DEMO

Quellen:

http://wsmithdesign.wordpress.com/2010/11/15/practical-reasons-for-css3-shadows/
http://markdotto.com/playground/3d-text/
http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow

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)

Seit CSS3 hat man als Benutzer die Möglichkeit mehrere Hintergründe für eine Box setzen. Vorher war man darauf angewiesen mehrere Boxen ineinander zu verschachteln und jeder dieser Boxen ein neues Background Attribut hinzuzufügen. Mit CSS3 ist das weit aus eleganter.

body {
background: url(images/background_grass.png)  bottom repeat-x,
url(images/background_stone.png)  bottom right no-repeat,
url(images/background_clouds.png) left top repeat-x,
url(images/background_sun.png) right top no-repeat,
url(images/background_sky.png) top repeat-x rgba(255,255,255,1);
}

Diese paar Zeilen CSS reichen aus, um dem body Element fünf verschiedene Hintergrundbilder zuzuordnen. Das “oberste” Element wird als vorderstes Element angezeigt. Die einzelnen Attribute werden einfach Komma-getrennt angefügt. Über die Eigenschaften top, bottom, left, right kann man ihre Position festlegen.

The background of a box can have multiple layers in CSS3

Quelle: http://www.w3.org/TR/css3-background/#layering

Das ganze funktioniert für folgende Browser.

Foto: http://fmbip.com/

DEMO DOWNLOAD

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

Mit HTML5 ist es möglich Offline Applikationen zu schreiben. Ein Grund dafür ist der Local Storage. Dieser ermöglicht es Daten in dem Browser des Benutzers zu speichern. Im Prinzip war das schon immer durch HTTP Cookies möglich. Ein Nachteil von Cookies ist allerdings, dass sie bei jedem HTML Request mitgeschickt werden und pro Domain nicht mehr als 20 Cookies á 4KB existieren dürfen.

Die Größe von Local Storage hingegen ist nicht in ihrer Größe beschränkt. Die Daten werden von dem Browser des Benutzers verwaltet. Das bedeutet, dass die Daten auch nur in diesem Browser verfügbar sind.

Was bietet Local Storage also? Der Browser legt für die Seite eine Datenbank an, in der Datensätze gespeichert werden. Die Datensätze sind nicht wie bei einem Cookie oder Session Variablen auf ihre Größe beschränkt, sondern können beliebig groß sein. Öffnet man ein neues Fenster und ruft die Seite auf, wäre normalerweise die Session nicht mehr vorhanden. Dank Local Storage schon.

Local Storage hat im wesentlichen vier Methoden.

localStorage.setItem(id,value);
Mit diesem Methode kann man einer id einem Wert zuweisen.

localStorage.getItem(id);
Mit dieser Methode bekommt man  den Wert einer id zurück.

localStorage.removeItem(id);
Mit dieser Methode löscht man das Element mit der id.

localStorage.clear();
Alle Daten in der Local Storage werden gelöscht.

Man kann auch direkt auf die Elemente zugreifen über localStorage[id].

In diesem Tutorial verwende ich das jQuery Framework. Man kann das ganze aber auch ohne dieses Framework umsetzen. jQuery bietet aber die .blur() Funktion, die ein Event hervorruft, sobald ein Element getriggert wird.

Unser HTML body besteht im Wesentlichen aus der Liste, die allerdings das Attribut contenteditable mit dem Wert true aufweist. Dadurch kann man sie bearbeiten. Bei der Überschrift hab ich das gleich Attribut verwendet um die Liste auch für andere Zwecke verwenden zu können.

<ol id="liste" contenteditable="true">
      <li></li>
 </ol>

In dem JavaScript speichert man das HTML Object zunächst in eine Variable ab.

toDoListe = $('#liste');

Für jede dieser Variable (Liste / Überschrift) zwei verschiedene Aufrufe. Zunächst wird überprüft ob für diese id schon ein Wert abgespeichert wurde. Ist dies der Fall, rufen wir auf die HTML Objekt die jQuery .html() Funktion auf, wobei der Parameter unser localStorage Element ist.

if (localStorage.getItem('toDoListe')) {
toDoListe.html(localStorage.getItem('toDoListe'));
}

Wenn wir Änderungen in der Liste verfolgen möchten, können wir dafür die .blur() Funktion benutzten. Erfolgt eine Änderung speichern wir das Ergebnis im Local Storage.

toDoListe.blur(function() {
localStorage.setItem('toDoListe', $(this).html());
});

Da es zur Zeit Probleme mit Safari gibt, wenn zwei leere Listenelemente übereinander erzeugt werden, habe ich noch den folgenden Fix implementiert, der das vorherige Listenelement überprüft, ob es leer ist.

toDoListe.keypress(function(event) {
if(event.which==13){
if(toDoListe.find('li').last().html()=='<br>'){
event.preventDefault();
}
}
});

Zusätzlich ist noch ein Button implementiert, der die Funktion localStorage.clear(); aufruft um den Local Storage zu leeren.

Fertig ist unsere ToDo Liste! Erst nach dem aktualisieren der Seite kann man das Resultat begeistern.

DEMO DOWNLOAD

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.

@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans);
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

body {
background: rgba(225,210,183,1) url(images/background.png) repeat;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
}

Auf die neuen HTML5 Tags, kann ich genauso wie z.B. auf h1 Überschriften in meinem CSS zugreifen.

header {
margin-top:50px;
}

Mein Logo möchte ich animieren. Dieser Effekt steht zur Zeit leider nur in der Webkit Library zur Verfügung.

/* Animationen */
@-webkit-keyframes fallDown {
from {
top:-200px;
}
to {
top:0px;
}
}
#logo {
background:url(images/background_logo.png) no-repeat;
width:511px;
height:151px;
font-family: 'Josefin Sans';
font-size:2em;
color: rgba(68,71,85,1);
}
#logo p {
margin:5px 0 0 80px;
}
#logo img {
margin:40px 0 0 50px;
-webkit-animation-name: fallDown;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-out;
position:relative;
}

Animationen kann ich mit dem @-webkit-keyframes Keyword definieren. Meine Animation gibt an, dass das Element seine Position von top: -200 px zu top: 0px verändern soll. Beim Aufruf kann man noch die Dauer (duration), die Anzahl der Wiederholungen (iteration-count) und die timing-function angeben. Mehr Informationen findet man hier.

Kommen wir zu unserem Menu. Dieses soll eine Drop Down Funktionalität haben. Dieses können wir mit Hilfe von Pseudoselekotren in CSS erledigen. Sobald ein Listenelement “gehovert” wird, wird das Unter-Element ul, so fern es existiert, sichtbar mit Hilfe von display:block. Möchten wir beim hovern z.B. einen sanften Farbübergang der Hintergrundfarbe haben, müssen wir in dem Normalzustand des Elementes eine Transition definieren. Bei diesem Beispiel sieht man schön die verschiedenen Rendering Bibliotheken (-moz,-webkit,-o).  Des weiteren sieht man hieran die unterschiedlich weiten Implementierungen und eine gewisse Inkonsistenz. Opera benutzt für Transitionen sein -o Prefix, für den border-radius nicht. Außerdem muss man explizit angeben, dass sich die Hintergrundfarbe (background-color) ändert.

nav ul li:hover > ul {
display:block;
}
nav ul li ul li a {
background:none;
-webkit-border-radius:0px;
-webkit-transition: background .5s linear;
-moz-border-radius:0px;
-moz-transition: background .5s linear;
border-radius:0px;
-o-transition: background-color .5s linear;

}
nav ul li ul li a:hover {
background: rgba(255,255,255,1);
color:#666;
}

Schauen wir uns nun unseren Content Bereich mit den zwei “Spalten” section und aside an. Um dieses ohne umständliches “gefloate” umzusetzen kann man das Content Element auf display:table und die Unterelemente auf display:table-cell setzten. Das ist viel eleganter und einfacher.

#content {
background: rgba(108,149,61,0.6);
margin-top:20px;
display:table;
border-top:rgba(73,48,24,0.5) 1px solid;
border-bottom:rgba(73,48,24,0.5) 1px solid;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
section {
display:table-cell;
width:500px;
padding:20px;
}
aside {
width:270px;
display:table-cell;
padding-right:10px;
}

Fertig ist unsere erste Webseite mit HTML5 und CSS3.

Das gesamte Stylesheet gibt es hier.

DEMO DOWNLOAD

Im vorangegangen Tutorial habe ich schon ein paar Grundlagen in HTML5 vermittelt. Ich möchte in diesem Tutorial erst einmal nur auf die Semantik eingehen. Ziel ist es, einen Blog zu designen, der in etwa so aussehen wird:

In diesem Tutorial kümmern wir uns erstmal die Seitenstruktur. Das nächste Tutorial wird sich mit dem Gestalten der Seite mit Hilfe von CSS3 kümmern. In einem dritten Tutorial werden wir versuchen den Blog so anzupassen, dass er möglichst auch abwärtskompatibel ist.

Fangen wir also an. Die Seite ist untergliedert in einen Header, der auch die Seitennavigation beinhaltet, einem Inhaltsbereich, der in zwei Spalten geteilt ist und dem Footer, wo Copyright oder ähnliches später drinstehen soll.

Wie schon im vorangegangen Post erwähnt ist unser HTML head durch HTML5 sehr aufgeräumt. Das Attribute lang im html Tag weißt auf die verwendete Sprache im Dokument hin, das Attribut charset im meta Tag gibt das Encoding der Seite an.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>HTML5 Homepage</title>
<link rel="stylesheet" href="css/style.css">
</head>

Es folgt der HTML Body, den wir mit einem “Container”-DIV beginnen wollen. Dieser umschließt alle Elemente und ermöglicht es uns die Seite später zu zentrieren. Das erste Element in diesem Container ist unser Header. Hier möchten wir unser Logo platzieren und die Seitennavigation einfügen. Für den Header verwenden wir den neuen <header> Tag.

The header element represents the header of a section.

Quelle: W3C HTML5:header

Die Navigation schließen wir mit dem neuen <nav> Tag ein. Da die Listenelemente der Navigation floaten, fügen wir eine DIV-Box unter das Element. Dazu mehr im 2. Teil.

The nav element represents a section of a document that links to other documents or to parts within the document itself; that is, a section of navigation links.

Quelle: W3C HTML5:nav

<body>

<div id="containter"><!--containter start-->
<header><!--header start-->
<div id="logo">
<img src="css/images/logo.png" alt="logo" />
<p>Eine kleine Testseite</p>
</div>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Unterseiten</a>
<ul>
<li>
<a href="#">Unterpunkt 1</a>
</li>
<li>
<a href="#">Unterpunkt 2</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="clear" />

Es folgt unser content Bereich, dieser wird geteilt in <section> und <aside>. In dem section Bereich kommen nachher unsere Artikel rein.

The section element represents a section of a document, typically with a title or heading.

Quelle: W3C HTML5:section

Wir fügen in die Section einzelne <article> Elemente, unsere Blogartikel.

The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry.

Quelle: W3C HTML5:article

In jeden <article> können wir jetzt Überschriften mit dem <header> Tag gruppieren. Außerdem möchte ich im Header noch das Datum der Veröffentlichung mit unterbringen. Für ein Datum bietet HTML5 das <time> Element. Dort kann in dem Attribut pubdate die Zeit stehen, wann der Artikel veröffentlich wurde.

The time element represents a date and/or time.

Quelle: W3C HTML5:time

Danach schreiben wir unseren eigentlichen Inhalt.

<div id="content"><!--content start-->
<section><!--feed start-->
<article>
<header>
<h2><a href="#">Artikelüberschrift</a></h2>
<p>Veröffentlicht am <time datetime="2011-02-15">15. Januar</time> von <b>Arne</b></p>
</header>
<p>...</p>
</article>
</section><!--feed end-->

Das aside Element benutzten wir für unsere Sidebar.

The aside element represents content that is tangentially related to the content that forms the main textual flow of a document.

Der dortige Inhalt sollte eigentlich Bezug zu dem Hauptinhalt auf der angezeigten Seite haben. Er sollte wie in einem Buch als Anmerkung benutzt werden. Daher eignet er sich eigentlich nicht als typische Blog Sidebar für Widgets. Das ignoriere ich hier allerdings.

<aside><!--sidebar start-->
<h2>Kategorien</h2>
<p>
<ul>
<li><a href="#">Li Element</a></li>
<li><a href="#">Li Element</a></li>
<li><a href="#">Li Element</a></li>
<li><a href="#">Li Element</a></li>
</ul>
</p>
</aside><!--sidebar end-->
<div class="clear" />
</div><!--content end-->

Abgeschlossen wird unsere Seite mit einem <footer>.

The footer element represents the footer for the section it applies to.

Quelle: W3C HTML5:footer

Footer können wir auch einsetzten um z.B. bei einem Blog-Artikel auf Kommentare hinzuweisen.

Damit sieht der gesamte Seitenquelltext wie folgt aus:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>HTML5 Homepage</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>

<div id="containter"><!--containter start-->
<header><!--header start-->
<div id="logo">
<img src="css/images/logo.png" alt="logo" />
<p>Eine kleine Testseite</p>
</div>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Unterseiten</a>
<ul>
<li>
<a href="#">Unterpunkt 1</a>
</li>
<li>
<a href="#">Unterpunkt 2</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="clear" />
<div id="content"><!--content start-->
<!--feed start-->
<h2><a href="#">Artikelüberschrift</a></h2>
Veröffentlicht am 15. Januar von <strong>Arne</strong>

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks
<h2><a href="#">Artikelüberschrift</a></h2>
Veröffentlicht am 15. Januar von <strong>Arne</strong>

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks
<!--feed end-->
<!--sidebar start-->
<h2>Kategorien</h2>
<ul>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
</ul>
<h2>Seiten</h2>
<ul>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
	<li><a href="#">Li Element</a></li>
</ul>
<h2>Links</h2>
<a href="http://www.w3.org/html/logo/">
<img title="HTML5 Powered with CSS3 / Styling, and Semantics" src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" alt="HTML5 Powered with CSS3 / Styling, and Semantics" width="165" height="64" />
</a>

<!--sidebar end-->
<div class="clear"></div>
<!--content end-->

<!--footer start-->

Copyright © 2011 DeineSeite.de - Design von www.webventil.de

</div>
<!--container end-->

Im nächsten Tutorial stylen wir den Blog mit Hilfe von CSS3.

HTML5 zieht sich gerade wie eine kleine Revolution durch das Internet. Nach und nach rüsten viele große Webseiten nach und präsentieren ihre Inhalte in dem neuen Standart. Doch was bietet mir HTML5 eigentlich?

• Offline / Storage
• Web SQL Datenbank
• Application Cache
• Real Time Communication über Web Sockets
• File und Hardware Access
• Drag and Drop
• Geolocation
• Speech Input (Formular)
• Rich Media
• …

Darüber hinaus zeichnet sich HTML5 auch durch eine viel bessere und einfachere Semantik aus als sein Vorgänger XHTML 1.0

Nehmen wir uns als Beispiel folgendes Layout vor.

Es gibt einen Header-Bereich, einen großen Inhaltsbereich wo z.B. bei einer Nachrichtenseite/Blog der Feed dargestellt wird und die Sidebar, sowie einen Footer. Bildet man das ganze mit XHTML 1.0 ab, so kommt man auf den folgenden Quelltext.

Auffallend groß ist hierbei die Document Type Declaration. Eine HTML5 Seite beginnt mit folgendem Doctype:

<!DOCTYPE html>

Im head Element  befindet sich auch die meta Deklaration. Auch hier glänzt HTML5 wieder durch Einfachheit. Es reicht, wenn man folgendes schreibt:

<meta charset=”utf-8″ />

Wenden wir uns nun den weiteren Elementen zu. Das Element mit der id container ist in diesem Fall ein Wrapper um die ganzen Elemente, damit wir die Seite zentriert darstellen  können. Spannender sind die Elemente da drin. In unserem header Element möchten wir später mal unser Logo platzieren. Da das Motto von HTML5 scheinbar “Keep it simple” lautet, ist es nicht verwunderlich, dass der Bedarf nach einem eigenen Tag dafür erkannt wurde. Ab sofort braucht man seinen header nicht mehr als DIV Box schreiben, sondern verwendet einfach:

<header>

Es gibt eine Menge neuer Tags, um den Quellcode besser lesbar zu machen und um den Inhalten in den einzelnen Elementen eine Bedeutung zu geben. So kann man seinen Feed durch das section Element umrunden. Dieses ist gedacht für “a thematic grouping of content, typically with a heading“. Hat man einzelne Artikel darin, kann man dafür das article Element verwenden. Unsere Sidebar verpacken wir in das aside Element (nur wenn der Inhalt darin sich auf den Inhalt in section bezieht) und für den Footer gibt es jetzt den footer Tag, so dass unser HTML5 Quelltext für unsere Seite jetzt wie folgt aussieht:

Und schon haben wir unsere erste HTML5 Seite geschrieben.

In der folgenden kleinen Serie möchte ich ein HTML5 Theme erstellen und Features von CSS3 näher betrachten. Ich freue mich über Anregungen und Wünsche.

Um seine im Internet angebotenen Inhalte bald mit Alterskennzeichnungen zu versehen, habe ich die FSK Kennzeichnungen in CSS3 umgesetzt. Dank rgba Farbwerten und border-radius, ist das ziemlich einfach. Zunächst benötigt man eine passende Struktur.

<div class="fsklogo fsk18">
<div class="kreis">
<div class="fsk">FSK</div>
<small>ab</small><br />
<div class="alter">18</div>
<small>freigegeben</small> </div>
</div>

Einen großer Kasten mit leicht runden Ecken, der 50% Transparenz aufweist beinhaltet einen Kreis mit den Worten FSK ab 18 Jahre freigegeben.

Der große Kasten .fsklogo beinhaltet die Größe der Box, den border-radius, margin und padding, sowie text-align als CSS Attribute. Je nach Alterskennzeichnung (.fsk18) bekommt der Kasten außerdem noch die passende Hintergrundfarbe und Randfarbe. Beim Farbwert für die Hintergrundfarbe ist darauf zu achten, dass der Alphakanal 0.5 enthält. ( rgba(255,0,0,0.5) )

.fsklogo {
padding:0;
margin:20px;
width:140px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
text-align:  center;
float:left;
}
.fsk18 {
background:  rgba(255,0,0,0.5);
border:2px solid rgba(255,0,0,1);
}

Was jetzt noch fehlt ist der Kreis in der Mitte der Kennzeichnung. Hierfür wählt man eine feste Größe. z.B. 100px x 100px und setzt den border-radius auf die Hälfte der Breite bzw. Höhe (50px). Dadurch erhält man einen Kreis.

.fsk18 .kreis {
background:  rgba(255,0,0,1);
width:100px;
height:100px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border:1px solid black;
margin:20px;
}

Jetzt fehlt nur noch der Style für die Inhaltselemente.

.fsk {
margin-top:10px;
line-height:3px;
}
.alter {
font-size:50px;
line-height:30px;
font-weight:bold;
padding:-5px;
}
small {
font-size:10px;
}

Die passenden Farbwerte für die unterschiedlichen Alterskennzeichnungen lauten.

FSK 18:
rgba(255,0,0,1)
FSK 16:
rgba(0,164,224,1)
FSK 12:
rgba(0,190,105,1)
FSK 6:
rgba(255,231,72,1)
FSK 0:
rgba(255,255,255,1)

Hier gehts zur Demo.

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