Zeitungslayout mit HTML5 und CSS3

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.

HTML5 Zeitung

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.

Zeitungs Header

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.

Layout

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.

Bild

#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

Wie erstellt man eine ToDo Liste in HTML5 mit Local Storage

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()=='&amp;lt;br&amp;gt;'){
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

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

Wie gestalte ich eine Webseite mit HTML 5 – Teil 1

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. Continue reading