RE-Design - Enrico Reinsdorf » Programmierung

PostIt – mit HTML5 und CSS3

Enrico Reinsdorf — Wed, 19 Jan 2011 09:54:45 +0000

Durch ein Video-Tutorial habe ich gesehen wie man mit reinem HTML und CSS in modernen Browsern ein PostIt bzw. einen angeklebten Zettel designen kann.

Ich habe dann den Quellcode nachgeschrieben und auf meine Bedürfnisse angepasst. Der HTML-Code ist recht einfach.

HTML-Formatierung




<html>

<head>

<meta charset="UTF-8">

<title>RE-Design – Weblabor – HTML5 – PostIt</title>

<link href='http://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="styles/main.css">

</head>

<body>

<div class="postit">

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra, quam nec rutrum auctor, lorem lectus porttitor augue, vel pellentesque sem leo nec nisi. Fusce quis ligula nisi.</p>

	<p>Aliquam nec tellus elit.</p>

</div>

</body>

</html>


Created by Enrico Reinsdorf - RE-Design

Wie ihr seht wird das PostIt durch einen DIV-Tag präsentiert in dem 2 Absätze vorhanden sind.

CSS-Formatierung


.postit {

	width: 700px;

	position: relative;

	margin: auto;

	padding: 2em 0 1em;

	color: #212121;

 

	-webkit-border-bottom-left-radius: 20px 500px;

	-webkit-border-bottom-right-radius: 500px 30px;

	-webkit-border-top-right-radius: 5px 100px;

 

	-moz-border-radius-bottomleft: 20px 500px;

	-moz-border-radius-bottomright: 500px 30px;

	-moz-border-radius-topright: 5px 100px;

 

	background: #fcf59c;

	background: -moz-repeating-linear-gradient( 

					top, 

					#fcf59c, 

					#fcf59c 18px, 

					#81cbbc 20px

				);

	background: -webkit-gradient(

					linear, 

					left top, 

					left bottom, 

					color-stop(0, #fcf59c), 

					color-stop(.9, #fcf59c), 

					color-stop(1, #81cbbc)

				);

	-webkit-background-size: 100% 20px;

 

	-webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);

	-moz-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);

	box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);

}


Created by Enrico Reinsdorf - RE-Design

In der CSS-Datei wird als erstes der Div-Container formatiert. Interessant an der Formatierung ist die Gestaltung der Grundlinien. Über einen Verlauf, der sich alle 40 Pixel wiederholt erreiche ich ein Linienmuster.

Weiterhin habe ich die Ecken asymmetrisch abgerundet, so dass der Eindruck des Biegens entsteht.

Zum Schluss bekam der DIV-Container noch einen Drop-Shadow. Dadurch wirkt das Ganze etwas plastischer.

CSS-Formatierung


.postit p {

	font-family: 'Homemade Apple', cursive;

	font-size: 2em;

	padding: 0 2em;

	line-height: 1.5em;

	margin: 0 0 1em;

}

.postit p:last-child {

	margin-bottom: 0;

}


Created by Enrico Reinsdorf - RE-Design

Um dann die Absätze den Hintergrund-Linien anzupassen, habe ich den Zeilenabstand und die Schriftgröße verändert. Auch habe ich die Grundeinstellungen für margin und padding angepasst.

CSS-Formatierung


.postit:before {

	content: ' ';

	position: absolute;

	top: -10px;

	left: 40%;

	width: 130px;

	height: 30px;

	display: block;

	background: rgba(255,255,255,.3);

	background: -webkit-gradient( 

					linaer, 

					center center, 

					color-stop( 0,  rgba(255,255,255,.2))

					color-stop( .9,  rgba(255,255,255,.3))

					color-stop( 1,  rgba(127,127,127,.5))

				);

	background: -moz-radial-gradient( 

					center center, 

					ellipse, 

					rgba(255,255,255,.2), 

					rgba(255,255,255,.3) 90%, 

					rgba(127,127,127,.5)

				);

	-webkit-transform: rotate(-3deg);

	-moz-transform: rotate(-3deg);

	transform: rotate(-3deg);

}


Created by Enrico Reinsdorf - RE-Design

Zum Schluss noch der Klebestreifen am oberen Rand des Zettels. Dieser wird mit der Pseudo-Klasse :before und einem Leerzeichen realisiert. Durch die absolute Positionierung und einer kleinen Rotation wirkt das Ganze doch recht realistisch. Hinzu kommt dass die Farbe der Streifens durch einen Transparenzwert und einen leichten, radialen Verlauf diese Wirkung unterstützt.

Ein kleiner Wermutstropfen bleibt trotz des beeindruckenden Ergebnis übrig, leider funktioniert dieses Beispiel nur in Standardkonformen Browsern, also nicht wirklich im IE8.

Natürlich habe ich diese kleine Demo auch online gelegt und ihr bekommt noch den Download dazu.

Offline Adressbuch

Enrico Reinsdorf — Wed, 12 Jan 2011 10:30:39 +0000

Gerade habe ich eine kleine JavaScript-Application geschrieben. Schon im Januar 2008 habe ich ein Tutorial veröffentlicht in dem ich erklärt habe, wie man mit PHP und AJAX ein Adressbuch verwirklicht. Nun habe ich diese Anwendung neu geschrieben und das permanente Speichern der Daten in den lokalen Speicher ausgelagert. So kann die Anwendung auch im Offline-Betrieb der Browsers betrieben werden.

weiter zur Demo bzw. zum Download

Web-Editor auf Basis von HTML5, CSS und JavaScript

Enrico Reinsdorf — Thu, 23 Dec 2010 15:08:00 +0000

Gerade habe ich ein kleines Experiment mit den Möglichkeiten von HTML5 gemacht. Bis jetzt gibt es ja schon viele Online-Editoren, so genannte WYSIWYG-Editoren. Leider funktionieren viel nur mit iframes, ein Tag den ich persönlich nicht mag. Nach dem Lesen des HTML5-Buches von Peter Kröner erstellte ich mir einen kleinen eigenen Editor.

Durch das contenteditable-Attribute kann jeder Inhalt eines beliebige HTML-Tag von Benutzer geändert werden. Eine wunderbare Sache! So habe ich mit ein bisschen CSS für die Formatierung und JavaScript für das Ein- und Ausschalten eine ersten Entwurf eines Online-Editors geschaffen.

Hier geht es zur Demonstration und hier findet ihr den Download.

12 Animationen für Flash CS4

Enrico Reinsdorf — Wed, 06 May 2009 06:44:19 +0000

Auf der Adobe Developer Seite wurde 12 neue Tutorials für Flash CS4 hinterlegt, in den Möglichkeiten zur Animationserstellung erklärt wird.

Animation Learning Guide for Flash CS4 Professional | Adobe Developer Connection.

Skype-Animation

Enrico Reinsdorf — Sat, 15 Mar 2008 10:54:57 +0000

Da ich meinen Laptop gerade neu installiert habe, war ich seit langem mal wieder auf der Website von Skype. Dabei ist mir erst jetzt aufgefallen, das sie unter "use skype" eine tolle Animation haben. Erst dachte ich es wäre, wie üblich, mit Flash gemacht worden. Aber beim genaueren hinsehen, habe ich schnell festgestellt, dass das ganze komplett in JavaScript umgesetzt wurde.

Ein Kompliment an dieser Stelle von mir. Die Animation wird sehr schnell geladen, läuft flüssig ab und reagiert sogar leicht auf die Mausbewegungen. So wird bestimmt irgendwann einmal Flash komplett durch offene Standards ersetzt. Nicht das ich Flash nicht mag, aber hier findet man ein gutes Beispiel wie es Pluginfrei funktioniert.

vereinfachter CSS-Import von verschiedenen Medien

Enrico Reinsdorf — Fri, 22 Feb 2008 23:28:50 +0000

In meinem letzten Artikel habe ich über die Probleme beim Import von externen CSS-Dateien berichtet. Nun habe ich eine vereinfachten Import gefunden, denn das Einbinden von bis zu 6 Dateien bläht nicht nur der Quellcode auf, sondern sieht auch irgendwie unübersichtlich aus.

Ich weiß, diese Idee ist nicht unbedingt die neuste, aber sie gefällt mir und deshalb schreibe ich darüber

Also, im Grunde reicht es, wie gehabt, über den -Tag die externen CSS-Dateien einzubinden. Diese mal werden aber nicht alle direkt per Link eingebunden, sondern nur eine zentrale Verwaltungsdatei pro Ausgabemedium, die dann die Restlichen nachlädt.

   1: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   2: <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">   3: <head>   4:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   5:     <title>RE-Design - CSS - externe Stylesheetstitle>   6:     <link rel="stylesheet" href="screen/zentral.css" type="text/css" media="screen" />   7:     <link rel="stylesheet" href="print/zentral.css" type="text/css" media="screen" />   8:     <link rel="stylesheet" href="handheld/zentral.css" type="text/css" media="screen" />   9: head>  10: <body dir="ltr">  11:    12: body>  13: html>

Die zentrale Medien-Datei bekommt dann folgenden Code:

   1: /* CSS Document */   2:     3: @import url('reset.css');   4: @import url('layout.css');   5: @import url('design.css');

Es gibt also für jedes Ausgabe-Design einen eigenen Style-Ordner in dem dann jeweils eine CSS-Datei für den global Reset, das grundlegende Layout und die weiteren Design-Angaben, wie z.B. Farb- und Typographie-Angaben, definiert werden.

@Media-Regel

Ein weitere Ansatz wäre die Nutzung der @import-Regel von CSS. Diesen habe ich aber leider noch nicht in allen, heutzutage genutzten Browsern getestet. Hierbei reicht es wieder in der HTML-Datei nur eine externe CSS-Datei einzubinden und in der CSS-Datei werden die nachzuladenen Datei durch die @media-Regel von einander getrennt.

   1: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   2: <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">   3: <head>   4:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   5:     <title>RE-Design - CSS - externe Stylesheetstitle>   6:     <link rel="stylesheet" href="zentral.css" type="text/css" />   7:     8: head>   9: <body dir="ltr">  10: body>  11: html>

   1: /* CSS Document */   2:     3: @media screen {   4:     @import url('screen/reset.css');   5:     @import url('screen/layout.css');   6:     @import url('screen/design.css');   7: }   8:     9: @media print {  10:     @import url('print/reset.css');  11:     @import url('print/layout.css');  12:     @import url('print/design.css');  13: }  14:    15: @media handheld {  16:     @import url('handheld/reset.css');  17:     @import url('handheld/layout.css');  18:     @import url('handheld/design.css');  19: }

Wer in diesem Zusammenhang Erfahrung oder vielleicht Verweise zu weiterführenden Informationen hat, kann ja hier einen Kommentar abgeben.

Auf jeden Fall werde ich natürlich an der Sache dran bleiben und über neue Erkenntnisse berichten.

CSS Import macht Probleme

Enrico Reinsdorf — Mon, 11 Feb 2008 12:38:42 +0000

Gestern habe ich bei einem Projekt versucht über die @import-Regel in CSS externe Dateien nachzuladen und bin auf eine sehr interessant Problematik gestoßen.

Üblicherweise importieren ja fast alle Webentwickler und -designer ihre externen CSS-Dateien mit dem HTML eigenen Tag . Wenn man nur auch noch unterschiedliche Design für die verschiedenen Ausgabemedien einbinden möchte, erweitert man diesen Tag mit dem Attribute media="screen".

Um eine bessere Trennung im Design zu bekommen, benutze ich 2 CSS-Dateien. Eine für das Layout und eine für die Farben und die Typographie. Nun entsteht aber der unschöne Umstand, dass ich für jedes Ausgabemedium 2 externe Dateien einbinden muss. Wenn ich also für den Bildschirm, den Drucker und den mobilen Endgeräten jeweils ein Design entwerfen, so sind das insgesamt 6 externe CSS-Dateien, plus einer Normalisierungsdatei. All dies über den -Tag zu machen, finde ich umständlich.

Schöner wäre es doch man könnte nur eine externe CSS-Datei einbinden und der Rest wird dann von ihr geladen. Dann sieht der Quellcode etwas aufgeräumter aus.

   1: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   2: <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">   3: <head>   4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   5: <title>RE-Design - CSS - @importtitle>   6: <style type="text/css">   7: /*[CDATA[*/   8:     9: @import url('style/import.css');  10:    11: /*]]>*/  12: style>  13: head>

Wenn man nun in der CSS-Datei die restlichen Dateien lädt, wäre ja alles in Ordnung.

   1: @import url('normalization.css');   2:     3: @import url('screen_layout.css') screen;   4: @import url('screen_design.css') screen;   5:     6: @import url('print_layout.css') print;   7: @import url('print_design.css') print;   8:     9: @import url('handheld_layout.css') handheld;  10: @import url('handheld_design.css') handheld;

Doch leider macht an dieser Stelle der Internet Explorer uns wieder einmal einen Strich durch die Rechnung. Denn der ignoriert die @import-Regel wenn sie mit dem Zusatz der Medienausgabe belegt wird. In diesem Fall würde also nur die Normalisierungsdatei geladen.

Interessant ist auch, dass mein über alles geliebter Opera-Browser nur die screen-Erweiterung versteht und die anderen ignoriert, was bedeutet: er druckt das Screendesign aus.

Fazit

Mein Fazit zu diesem Experimentes ist, dass ich leider wieder zurück zum -Tag gehen muss, um eine volle Unterstützung aller Browser zu haben. Eigentlich schade, denn es ist doch eigentlich eine einfache und bequeme Art zu arbeiten.

AJAX Adressbuch

Enrico Reinsdorf — Tue, 29 Jan 2008 12:37:43 +0000

In meinem Adventskalender habe ich ein kleines Tutorial über die Erstellung eines Adressbuch per AJAX geschrieben. Leider waren aber die Demodateien nicht direkt benutzbar. Ich habe sie nun korrigiert und stelle sie euch hiermit zur Verfügung.

AJAX Adressbuch 1.1

Bugfix:

Ich habe eine SQL-Datei hinzugefügt, um die Datenbank schneller zu installieren. Jetzt muss nur noch in der include-Datei der Zugriff auf die Datenbank geregelt werden.
Der init()-Methode des Adressbuches wird jetzt der Form-Container übergeben, so dass das Adressbuch flexibler auf das DOM reagieren kann.
Die Literal-Namen wurden in eine einheitliche Schreibweise (RED_AdrBook, RED_AJAX) umbenannt.
Eine update-Funktion für bestehende Datensätze wurde hinzugefügt.
Eine Lösch-Funktion wurde hinzugefügt. Deswegen wurde ein delete.php-Script, welches einen Datensatz löscht, angelget.
Die Anzahl der Datensätze und der aktuelle Datensatz wird nun im Interface angezeigt.

AJAX Adressbuch – Tutorial Teil 4

Enrico Reinsdorf — Mon, 24 Dec 2007 00:00:28 +0000

Nun ist es soweit, heute ist Weihnachten und das letzte Türchen hat sich geöffnet. Der letzte Teil meine Adressbuches steht noch aus und das möchte ich euch jetzt geben. Es ist der serverseitige Teil meine kleinen Weanwendung. Ich habe dazu eine mySQL-Datenbank angelegt und greife mit PHP auf den Datenbestand zu.

Ähnlich wie in Teil 2 und Teil 3 werde ich mehrere Datei benutzen um alles geordnet zu haben. Aber als erstes die Scripte zum Erzeugen der Datenbank und des Datenbestandes.

CREATE DATABASE `demodb` DEFAULT CHARACTER SET latin1 COLLATE latin1_general_ci; USE `demodb`;

CREATE TABLE `mitarbeiter` (
`id` int(11) NOT NULL auto_increment,
`nachname` varchar(255) NOT NULL,
`vorname` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`telefon` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
);

Also phpMyAdmin, das ultimative Datenbank-Tool, öffnen und die Codes einfügen. Dazu noch einen Datenbank-Benutzer und ein dazugehöriges Passwort anlegen. In meinem Fall heißt der Benutzer “demouser” und sein Passwort ist “password“.

Als nächstes lege ich mir immer eine PHP-Datei an, die die Verbindung zur Datenbank regelt. Somit muss ich die Daten nicht in jedes Script hineinschreiben.


$connect = mysql_connect('localhost', 'demouser', 'password');
mysql_select_db('mitarbeiter', $connect);
?>


In der Variable $connect wird dann die Verbindung zum Datenbank-Server gespeichert und kann von nun an genutzt werden. Ich habe hier der Einfachheit halber auf Fehlermeldungen verzichtet.

header('Content-Type: text/xml');
$xml = new DOMDocument('1.0', 'utf-8');
$root = $xml->createElement('mitarbeiter');
$xml->appendChild($root);


echo $xml->saveXML();

Um mit PHP eine XML-Ausgabe zu erzeugen, reicht der obige Quellcode. Wichtig dabei ist das der richtige Header an den Browser geschickt wird.
Danach wird ein XML-Objekt mit dem Zeichensatz “utf-8″ generiert. Weiterhin wird ein Hauptknoten erzeugt und an das XML-Dokument dran gehangen. Zum Schluss alles an den Browser geschickt.
Soweit die Grundstruktur der XML-Ausgabe. Aber es fehlen ja noch die eigentlichen Inhalte aus der Datenbank.


include_once('include.php');

$sql = 'SELECT * FROM personen ORDER BY nachname';
$result = mysql_query($sql, $connect);
while($rs = mysql_fetch_assoc($result))
{
 $nachname = $xml->createElement('nachname');
 $nachname->appendChild($xml->createTextNode(iconv('iso-8859-1','utf-8',$rs['nachname'])));
 $vorname = $xml->createElement('vorname');
 $vorname->appendChild($xml->createTextNode(iconv('iso-8859-1','utf-8',$rs['vorname'])));
 $email = $xml->createElement('email');
 $email->appendChild($xml->createTextNode(iconv('iso-8859-1','utf-8',$rs['email'])));
 $telefon = $xml->createElement('telefon');
 $telefon->appendChild($xml->createTextNode(iconv('iso-8859-1','utf-8',$rs['telefon'])));
 $person = $xml->createElement('person');
 $person->setAttribute('id', $rs['id']);
 $person->appendChild($nachname);
 $person->appendChild($vorname);
 $person->appendChild($email);
 $person->appendChild($telefon);
 $root->appendChild($person);
}

mysql_close($connect);
?>

Dazu binde ich als erstes die externe Datei zum Verbinden mit dem Datenbank-Server ein. Danach speichere ich das SQL-Statement in einer Variablen zwischen und hole von der Datenbank alle Ergebnisse dieser Anfrage.
In der darauffolgenden while-Schleife werden neue Knoten erzeugt und an den Root dran gehangen. Dabei setzt sich der Nachname-Knoten z.B. wie folgt zusammen. Ich erzeuge als erstes einen -Tag und hänge dann mit der createTextNode()-Methode einen Text-Knoten dran. Den Text den ich da dran hänge, konvertiere ich zuvor noch mit der iconv()-Funktion in den richtigen Zeichensatz. Zum Schluss hänge ich dem -Tag alle Unterknoten dran.
Soweit die Ausgabe zum Browser, bzw. zu JavaScript und meiner AJAX-Klasse. Was noch fehlt ist ein Script um Daten von JavaScript in Empfang zu nehmen und in die Datenbank einzufügen.


include('include.php');
$sql = sprintf('REPLACE INTO personen SET
 id=%d, 
 nachname="%s", 
 vorname="%s", 
 email="%s",
 telefon="%s"'
 ,$_POST['f0'],$_POST['f1'],$_POST['f2'],$_POST['f3'],$_POST['f4']);
mysql_query($sql, $connect);
mysql_close();
?>

Auch hier ist der Quellcode sehr überschaubar. Als erstes binde ich wieder Das Script zum Erzeugen einer Verbindung zum Datenbank-Server ein. Dann speichere ich wieder in einer Variablen das SQL-Statement zwischen. Um ein korrektes Ergebnis zu bekommen, verwende ich hier die sprinf()-Funktion. Diese bietet mir eine kleiner Kontrolle über die übergebenen Werte. Zum Schluss schicke ich das Ganze nur noch an der Server und fertig ist das Einfügen neuer oder das Ändern von bestehenden Datensätzen. Ich verwende dazu immer ganz gern das REPLACE-Statement. Wenn dieses Statement keine ID besitzt wird ein neuer Datensatz erzeugt, ansonsten wird der Bestehende verändert.

Download

So und das war es auch schon mit der serverseitigen Programmierung. Gerade mal 3 kleine Script brauche ich hier um der ganzen Webanwendung auch das Speichern auf dem Server bzw. das Einlesen von Daten hinzuzufügen.
Ich hoffe es hat euch gefallen 24 meist kleine Beträge aus meinen Arbeitsalltag zu lesen. Ich gebe zu, es war nicht immer leicht die Texte rechtzeitig fertig zu stellen und ich verspreche, wie immer und alle, nächstes Jahr rechtzeitig mit den Vorbereitungen zu beginnen.
Ähnliche Beiträge
AJAX Adressbuch
AJAX Abressbuch – Tutorial Teil 3
AJAX Adressbuch – Tutorial Teil 2
AJAX Adressbuch – Tutorial Teil 1
Einzelcoaching – PHP-XML Schulung



AJAX Abressbuch – Tutorial Teil 3
Enrico Reinsdorf — Sun, 23 Dec 2007 00:00:24 +0000
Im dritten Teil meines Tutorials möchte ich euch zeigen wie ich per JavaScript eine Verbindung zum Server aufbaue und Daten zum Server schicke bzw. vom Server hole. Durch die Beschreibung in Teil 1 und Teil 2 meines Tutorials habe ich hoffentlich eine gute Basis geschaffen einen Schritt weiter zu gehen.

Ok, als erstes wieder einmal die Zusammenfassung aller Eigenschaften und Methoden der RED-Ajax-Objektes.

// JavaScript Document
var RED_Ajax =
{
 req : null,
 url : null,
 method : 'GET',
 async : false,
 body : null,
 headers : [],
 timer : null,
 responseXML : null,
 responseText : null,
 init : function() { },
 run : function() { },
 header : function() {},


 response : function() {},


 callback : function() {},
 update : function() {},
 error : function() { }
}

Ich werde jetzt nicht alle Eigenschaften im Detail erklären, denn das passiert auf jeden Fall noch bei der Erklärung der einzelnen Methoden. Ich fange lieber direkt mit den Methoden an.

 init : function()
 {
 this.req = (window.XMLHttpRequest)
 ?
 new XMLHttpRequest()
 :
 ((window.ActiveXObject)
 ?
 new ActiveXObject('Microsoft.XMLHTTP')
 :
 null
 );

 if(this.req != null)
 {
 this.req.onreadystatechange = this.response;
 }
 },

Wie immer gibt es bei mir eine init()-Methode. Diese hier legt in der reg-Eigenschaft ein Objekt ab, welche eine Verbindung zum Server aufbauen kann. Da jeder Browser ein anderes Objekt dazu benutzt, muss hier immer erst noch geprüft werden ob das ganze auch funktioniert. Wenn alles geklappt hat wird noch auf den readystatechange-Event ein Methodenverweise gemacht.

 run : function(u,m,f,b)
 {
 this.method = m || this.method;
 this.async = f || this.async;
 this.body = b || this.body;
 this.url = u;
 if(this.req != null)
 {
 this.req.open(this.method, this.url, this.async);
 if(this.headers.length > 0)
 {
 for(var i=0; i

 {
 this.req.setRequestHeader(this.headers[i], this.headers[i+1]);
 }
 }
 this.req.send(this.body);
 }
 },

Um dann aber auch die eigentlichen Daten vom bzw. zum Server zu schicken gibt es die run()-Methode. Ihr kann bis zu 4 Parameter mit übergeben werden, wobei der erste, die URL-Angabe, nur Pflicht ist. Die weiteren Parameter sind die Übertragungsmethode (GET oder POST), ob die Ubertragung synchron (true) oder asynchron (false) stattfinden soll und der beim Senden mitgelieferte Body.
Bevor der Request aber geschickt wird, werden die im Vorfeld gesetzte Header-Angaben verarbeitet.

 header : function(k,v)
 {
 if(k != null)
 {
 this.headers.push(k);
 this.headers.push(v);
 }
 }, 

Um eine Header-Angabe, die später mit übertragen werden soll, zu setzten, reicht es die header()-Methode mit ihren beiden Parametern key und value aufzurufen.

 response : function()
 {
 var a = ajax.req;
 switch(a.readyState)
 {
 case 1:
 break;
 case 2:
 this.timer = window.setTimeout(this.error, 10000);
 break;
 case 3: 
 this.timer = window.setTimeout(this.error, 10000);
 break;
 case 4:
 window.clearTimeout(this.timer);
 if(a.status==200 || a.statusText=='OK')
 {
 RED_Ajax.responseXML = a.responseXML;
 RED_Ajax.responseText = a.responseText;
 RED_Ajax.callback();
 }
 }
 }, 

Beim Ausführen der Sende- bzw. Empfang-Vorganges durchläuft das Verbindungsobjekt verschiedene Stadien, die in der response()-Methode geprüft werden. Folgende Stati gibt es:

Das Verbindungsobjekt existiert aber die open()-Methode wurde noch nicht aufgerufen.
Die send()-Methode wurde noch nicht ausgeführt.
Die send()-Methode wurde zwar ausgeführt, aber der Server hat noch nichts zurück geschickt.
Der Server hat angefangen Daten zu übermitteln, aber ist damit noch nicht fertig.
Der Übermittlungsvorgang wurde beendet und alle Date sind angekommen.

Um den Übertragungsvorgang auch irgendwann abzubrechen, falls ein Fehler aufgetreten ist, habe ich im Status 2 und 3 eine Timeout eingefügt und hebe ihn im Status 4 wieder auf, da da ja alles angekommen ist. Wenn dann auch noch der Server mit “alles ok” übertragen hat, dann werden die übertragenen Werte einmal als reine Text und als XML-Objekt abgespeichert. Zum Schluss rufe ich nur noch die callback()-Methode auf.

 callback : function(){},
 update : function(){},

Meine callback()-Methode ist ein sogenannter Huck und muss erst noch definiert werden. Ich habe deshalb offen gelassen, weil die Verarbeitung der übertragenen Daten sehr unterschiedlich sein kann. In Teil 2 habe ich erklärt wo und wie man diese Definition einsetzt.
Auch habe ich eine update()-Methode zwar eingesetzt, aber noch nicht definiert. Hier lasse ich mir die Möglichkeit offen zu einem späteren Zeitpunkt einen zyklischen Aufruf des Server zu bauen.

 error : function()
 {
 alert('Die Zeit ist um!');
 this.req.abort();
 }

Meine letzte Methode ist die error()-Methode. Sie dient ausschließlich dazu bei zu langen Ladezeiten diesen Vorgang abzugrechen.
Wie immer gibt es zum Schluss den Download der beschriebenen Dateien:

RED_AJAX Datei

Ähnliche Beiträge
AJAX Adressbuch – Tutorial Teil 2
AJAX Adressbuch – Tutorial Teil 1
AJAX Adressbuch – Tutorial Teil 4
Slideshow mit einer HTML-Seite Teil 2
Slideshow mit einer HTML-Seite Teil 1


AJAX Adressbuch – Tutorial Teil 2
Enrico Reinsdorf — Sat, 22 Dec 2007 00:00:22 +0000
Nachdem ich gestern erklärt habe wie die HTML-Datei, das dazugehörige CSS-Design und die XML-Datenstruktur aufgebaut sind, werde ich mich nun der clientseitigen Programmierung widmen.
Die Programmierung besteht hier nun aus 2 JavaScript-Dateien. Die eine ist für die Verarbeitung der Daten und die andere regelt die Übertragung zum und vom Server.

Fangen wir nun mir der Verarbeitung an. Um in diesem Stadium der Programmierung nicht schon die serverseitigen Scripte geschrieben zu haben, arbeite ich immer mit einer Demo-XML-Datei.

// JavaScript Document
var RED_Adrbook = 
{
 data : [],
 alerts : { },
 zeiger : 0,
 init : function(){ },
 loadXML : function() { },
 loadData : function(xml) { },
 loadEvents : function() { },
 loadSlides : function() { },
 pager : function() { },
 add : function() { },
 insert : function() { },
 edit : function() {},
 update : function() {},
 remove : function() {}
}

Wie schon bei den letzten Beispielen verwende ich bei solcher Programmierung gerne Literale. Die Eingenschaft data dient dann später dazu alle vom Server bekommen Kontakte in einen einzigen Array zu sammeln. Über die Eigenschaft zeiger wird dann das Weiterschalten zum nächsten Mitarbeiter geregelt. Die letzte Eigenschaft innerhalb des Objektes verwende ich um Meldungen vom System an den Benutzer zu kapseln. Ich habe mir dazu ein Unterobjekt angelegt.
Kommen wir nun zu den einzelnen Methoden des Obejktes:

 init : function()
 {
 RED_Ajax.init();
 this.loadXML();
 },

In fast jedem Objekt lege ich eine init()-Methode an, um alle wichtigen Prozesse zu starten, die vor der eigentlichen Benutzung durch den Anwender gebraucht werden. In diesem Fall ist das die Vorbereitung der Verbindung zum Server und dann das Laden der XML-Daten vom Server.

 loadXML : function()
 {
 RED_Ajax.callback = function()
 {
 RED_Adrbook.loadData(this.responseXML);
 };
 RED_Ajax.run('mitarbeiter.xml','GET',false);
 },

Um die empfangen XML-Daten auch später zu verarbeiten, muss der Huck, also die callback()-Methode des RED_AJAX-Objektes definiert werden. Ich rufe hier die loadData()-Methode des RED_AdrBook auf und übergebe ihr die empfangenen XML-Werte. Nach allen Vorbereitungen rufe ich die run()-Methode auf und übergebe ihr als erstes die zu ladende Datei, dann mit welcher Methode die Übertragung stattfinden soll und zum Schluss ob es sich um eine synchrone Übertragung handelt. Nur selten ändern sich die beiden letzten Werte.

 loadData : function(xml)
 {
 this.data = [];
 var personen = xml.getElementsByTagName('person');
 for(var i=0; i

 {
 var person = {
 Nachname : personen[i].childNodes[0].firstChild.nodeValue,
 Vorname : personen[i].childNodes[1].firstChild.nodeValue,
 Email : personen[i].childNodes[2].firstChild.nodeValue,
 Telefon : personen[i].childNodes[3].firstChild.nodeValue,
 ID : personen[i].getAttribute('id')
 };
 this.data.push(person);
 }
 this.loadEvents();
 this.loadSlides();
 },

Nachdem alle Daten vom Server übertragen wurden, kann die eigentliche Verarbeitung beginnen. Als erstes leere ich den Array und hole mir aus den übergebenen Wert einen Array mit allen Mitarbeitern. Diesen Array durchlaufe ich und erzeuge mir ein eigenes Personen-Objekt zur späteren besseren Verarbeitung. Dieses Personen-Objekt wird dann im Data-Array abgespeichert.
Zum Schluss müssen natürlich noch die Events für die Buttons festgelegt werden und das aktuelle Slide, also der aktuelle, hier der erste, Mitarbeiter angezeigt werden.

 loadEvents : function()
 {
 document.getElementById('btn_next').onclick = function() {
 RED_Adrbook.pager(true);
 }
 document.getElementById('btn_prev').onclick = function() {
 RED_Adrbook.pager(false);
 }
 document.getElementById('btn_edit').onclick = function() {
 RED_Adrbook.edit();
 }
 document.getElementById('btn_add').onclick = function() {
 RED_Adrbook.add();
 }
 document.getElementById('btn_remove').onclick = function() {
 RED_Adrbook.remove();
 }
 },

Das festlegen welche Funktionen welcher Button hat ist recht einfach, da es dafür separate Methoden gibt.

 loadSlides : function()
 {
 var s = document.getElementById('RED_Book').getElementsByTagName('span');
 s[0].innerHTML = this.zeiger;
 s[1].innerHTML = this.data[this.zeiger]['Nachname'];
 s[2].innerHTML = this.data[this.zeiger]['Vorname'];
 s[4].innerHTML = this.data[this.zeiger]['Telefon'];
 var link = '';

 link += this.data[this.zeiger]['Email'];


 link += '';
 s[3].innerHTML = link;
 },

Bei Laden des aktuelle Slides werden als erstes alle -Tags aus dem Formular mit der ID RED_Book in eine Array geladen. Dann werden die Daten aus dem aktuellen Silde per innerHTML in die Spans zugewiesen. Das this.zeiger immer den aktuellen Zeiger repräsentiert ist das ganze kein größeres Problem. Selbst eine mailto:-Link zu erzeugen stellt keine große Hürde da.

 pager : function(d)
 {
 if(d)
 {
 (this.zeiger == this.data.length-1) ?alert(this.alerts.last) :this.zeiger++; 
 }
 else
 {
 (this.zeiger == 0) ?alert(this.alerts.first) :this.zeiger--;
 }
 this.loadSlides();
 },

Für der vor und zurück Blättern gibt es eine kleine und einfache Methode, die als erstes prüft wo der Zeiger steht und am Ende bzw. am Anfang der Liste diesen korrigiert. Dann wird noch per loadSlides()-Methode der richtige Mitarbeiter angezeigt.

 add : function()
 {
 var s = document.getElementById('RED_Book').getElementsByTagName('span');
 s[0].innerHTML = 'neuer Datensatz';
 s[0].innerHTML += '';
 s[1].innerHTML = '';
 s[2].innerHTML = '';
 s[3].innerHTML = '';
 s[4].innerHTML = '';
 s[4].innerHTML += '
';s[4].innerHTML += '';
 s[4].innerHTML += '';
 document.getElementById('btn_save').onclick = function() {
 RED_Adrbook.insert(document.getElementById('RED_Book'));
 };
 document.getElementById('btn_cancel').onclick = function() {
 RED_Adrbook.loadSlides();
 };
 document.getElementsByTagName('input')[1].focus();
 },

In der add()-Methode werden die Inhalte der -Tags gelöscht und durch leere Eingabefelder erstetzt. Zusätzlich wird ein Speichern- und Cancel-Button eingefügt und ihnen natürlich auch noch die richtige Funktionalität zugewiesen. Zum Schluss bekommt das erste Eingabefeld den Focus, so dass der Anwender direkt losschreiben kann.

 insert : function(form)
 {
 var inputs = form.getElementsByTagName('input');
 var body = 'f0='+escape(inputs[0].value)+'&'+ 'f1='+escape(inputs[1].value)+'&'+ 'f2='+escape(inputs[2].value)+'&'+ 'f3='+escape(inputs[3].value)+'&'+ ‘f4='+escape(inputs[4].value);
 RED_Ajax.callback = function()
 {
 RED_Adrbook.loadXML();
 };
 RED_Ajax.header('Content-Type', 'application/x-www-form-urlencoded');
 RED_Ajax.run('eingabe.php','POST',false,body);
 },

Um die neu eingefügten, bzw. später geänderten Daten auch an der Server und damit in die Datenbank zu schreiben, wird beim Klick auf den Speichern-Button die insert()-Methode aufgerufen. Sie lädt alle Eingabefelder und fügt sie zu einem langen String mit URL-konformer Schreibweise zusammen. Dann wird eine neue callback()-Methode des RED_Ajax-Objektes definiert, der Header zum Übertragen von Formular-Daten geändert und die Date an das Verarbeitungsscript gesendet. Nach dem Senden wird wiederum die loadXML()-Methode aufgerufen, um die neuen Daten vom Server abzufragen und anzugeigen.

 edit : function() {},
 update : function(form) {},
 remove : function() {}
}

Bleiben zum Schluss noch 3 weiter Methoden übrig. Als kleine Herausforderung habe ich mir überlegt diese von euch selber erstellen zu lassen. Das ist auch gar nicht so schwer.
Z.B. ähnelt die edit()-Methode ja der add()-Methode, nur dass hier jetzt noch die Daten des aktuellen Mitgliedes eingefügt werden müssen. Auch die update()-Methode ist nur eine abgewandelte Version der insert()-Methode und bei der remove()-Methode brauch ja nur die aktuelle ID an den Server übermittelt werden, um den richtigen Datansatz zu löschen. Ich glaube fest daran, dass das jeder Lesen schaffen kann.
Hier nochmals die gesamte JavaScript-Datei zum Download.

Adressbuch-Datei

Ähnliche Beiträge
AJAX Abressbuch – Tutorial Teil 3
AJAX Adressbuch – Tutorial Teil 1
Slideshow mit einer HTML-Seite Teil 2
Slideshow mit einer HTML-Seite Teil 1
AJAX Adressbuch – Tutorial Teil 4


AJAX Adressbuch – Tutorial Teil 1
Enrico Reinsdorf — Fri, 21 Dec 2007 00:00:56 +0000
Nun möchte ich euch wieder einmal ein Tutorial schenken in dem ich zeigt wie man eine kleine Mini-Webanwendung erstellt. Da ich euch letztens schon mal eine kleine Slideshow mit HTML, CSS (Teil 1) und JavaScript (Teil 2) gezeigt habe, glaube ich dass dieses hier auch sehr interessant sein dürfte.
In diesem Tutorial möcht ich euch die Entwicklung, bzw. die wichtigsten Schritt zum Erstellen eines Web-Adressbuches zeigen. Dabei habe ich alles in 3 Teile aufgeteilt. Dass heißt heute zeige ich euch das Interface der Webanwendung, also die HTML-Datei und das dazugehörige Design. Morgen gibt es dann die clientseitige und übermorgen die serverseitige Programmierung.






RE-Design - AJAX - Adressbuch 





 
 Adressbuch Demo
 
 
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


ID:



Name:



Vorname:



Email:



Telefon:



 
 
previous
 
next
 
edit
 
add
 
delete
 
 
 



Wie ihr seht ist in diesem Quellcode keine besonderen Tricks enthalten. An Anfang lade ich noch das externe Design. Die gesamte Anwendung ist dann in eine 
-Container gebettet und die einzelnen Ein- und Ausgabefelder sind in eine Tabelle integriert. Dort wo später die Ein- und Ausgabe erfolgen soll habe ich -Tags gesetzt um später einfacher per JavaScript darauf zu zugreifen.
Die Button zur Steuerung dieser Anwendung habe ich dann unterhalb der Tabelle un eine Liste leget. Es sind einfache Links, die aber kein Ziel haben. Klar sie sollen ja auch nicht irgendwohin anderes gehen!

@charset "utf-8";
/* CSS Document */
body
{
 margin:0 auto;
 padding:0;
 text-align:center;
 width:28em;
}
th, td
{
 vertical-align:top;
}

Als erstes lege ich in der CSS-Datei fest wie die gesamte Seite auszusehen hat. Dabei beschränke ich mich hier erstmal nur auf die Zentrierung des Inhaltes und die Definierung der Gesamtbreite. Weiterhin werden alle Zellen der Tabelle vertikal oben ausgerichtet.

.RED_Adrbook
{
 margin: 1em 0 0;
 padding:1em;
 background-color:#fc3;
 border:thin solid #960;
 text-align:left;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
.RED_Book table {
 width:28em;
 border-collapse:collapse;
}
.RED_Book th
{
 text-align:left;
 width: 6em;
}
.RED_Book h1
{
 font-size:1.0em;
 text-decoration:underline;
}

Als nächstes definiere ich das Aussehen des eigentlichen Adressbuches. Hier wird die allgemeine Schriftart, Hintergrundfarbe etc. angegeben. Zusätzlich mache ich Angaben über die Breite der Tabellen und ihre Tabellenköpfe. Als letztes lege ich noch das Aussehen der Überschrift meiner Anwendung fest.

.RED_Buttons
{
 margin:1em 0 0;
 padding:0;
}
.RED_Buttons li
{
 margin:0;
 padding:0;
 list-style-type:none;
 display:inline;
}

Nun zur Button-Liste, auch hier verwende ich nur rudimentäre Formatierung. Alle Buttons sollen nebeneinander und nicht untereinander stehen. Am einfachsten geht das mit dem inline-Wert der display-Eigenschaft.

#btn_prev,
#btn_next,
#btn_edit,
#btn_add,
#btn_remove,
#btn_save,
#btn_cancel
{
 cursor:pointer;
 padding:.2em;
 background-color:#c63;
 color:#fff;
 text-decoration:none;
 border:thin outset;


 font-weight:normal;
}
#btn_prev:hover,
#btn_next:hover,
#btn_edit:hover,
#btn_add:hover,
#btn_remove:hover,
#btn_save:hover,
#btn_cancel:hover
{
 background-color:#804000;
}
#btn_prev:active,
#btn_next:active,
#btn_edit:active,
#btn_add:active,
#btn_remove:active,
#btn_save:active,
#btn_cancel:active
{
 border:thin inset;
}

Zum Schluss nach das Aussehen der eigentlichen Buttons. Da es ja offiziell Links sind, wird ihre Darstellung komplett geändert. Zusätzlich bekommen sie noch eine hover- und einen active-Effekt, um das Feeling einer Interaktion weiter zu unterstützen.



 
 Reinsdorf
 Enrico
 enrico@re-design.de
 0177 - 2822557
 
 
 Doe
 John
 john@doe.com
 0123 - 1234567
 
 
 Doe
 Jane
 jane@doe.de
 0123 - 1234567
 
 

Als letztes möchte ich euch noch die XML-Datei zeigen, die ich zur ersten Verarbeitung in der Anwendung benutzt habe. Späte wird diese komplett dynamisch von PHP bzw. in ähnlicher Form von JavaScript, erzeugt. Und spielt in der finalen Version keine große Rolle mehr.
Zum Schluss noch die gerade besprochenen Dateien zum Download:

Download

Ähnliche Beiträge
AJAX Abressbuch – Tutorial Teil 3
AJAX Adressbuch – Tutorial Teil 2
Slideshow mit einer HTML-Seite Teil 2
Slideshow mit einer HTML-Seite Teil 1
CSS Import macht Probleme


Button wieder neu entdeckt
Enrico Reinsdorf — Thu, 20 Dec 2007 00:00:15 +0000
Schon seit längerem wusste ich das es den 


Das ist schon das ganze Geheimnis zur Verwendung von Buttons. Nun kann man fast beliebig viel in diesen Container hinsetzen. Es gibt nur zwei Ausnahmen die nicht funktioniert. Erstens, da der Button selbst schon eine Art Verweis ist, dürfen in ihm keine Verweis erzeugende Elemente eingesetzt werden. Und zweitens, da der Button meistens für Formulare genutzt wird, darf in ihm keine weiteren Formular-Elemente verwendet werden.
Weiterhin ist zu Beachten, dass ein submit- bzw. reset-Button natürlich nun innerhalb eines Formulares funktioniert und der frei definierbare nur mit aktiviertem JavaScript.
Hier nun ein paar schöne Beispiele für die freie Verwendbarkeit solcher Buttons. Dabei habe ich die CSS-Formatierung der Einfachheit inline gesetzt.












    
        
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    


Spalte 1
Spalte 2
Spalte 3


Inhalt 1
Inhalt 2
Inhalt 3


Inhalt 4
Inhalt 5
Inhalt 6


 


Interessant ist, dass die hover-Angabe z.Z. ausschließlich beim IE funktioniert.


Lizenzvertrag
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.



Leider versteht der IE die Breitenangabe im Style nicht.
Ähnliche Beiträge
CSS Import macht Probleme
Jahresabonnement des Spotlight Verlag
Umsetzung von Print-Design
AJAX Adressbuch – Tutorial Teil 1
Slideshow mit einer HTML-Seite Teil 2


Slideshow mit einer HTML-Seite Teil 2
Enrico Reinsdorf — Wed, 19 Dec 2007 00:00:45 +0000
Nachdem ich gestern im ersten Teil den Aufbau der HTML-Seite und das Design mit CSS beschrieben habe, folgt nun die Programmierung das Ganzen. Es ist gar nicht so schwer wie man Denken könnte. Nur ganze 4 Funktionen brauche ich für meine einfache Slideshow.

Die gesamte Funktionalität habe ich in ein eigenes Objekt gekapselt, um eine übersichtlichere, einfach erweiterbare und flexible Programmierung zu haben. Für solchen Kapseln benutze ich fast immer Literale.

var RED_Slideshow = {
    slides   : [],
    current  : 0,
    messages : {
                   first : 'Sie sind am Anfang.',
                   last : 'Sie sind am Ende der Präsentation.'
               },
    init     : function(element) { } ,
    load     : function() {},
    goto     : function(d) {},
    create   : function() {}
};

Zusätzlich zu den 4 Funktion gibt es noch 3 Eigenschaften. In der Eigenschaft slides werden die anzuzeigenden Slides zwischengespeichert um sie schnell ein- und auszublenden. Die Eigenschaft current repräsentiert das aktuelle Slide welches gerade angezeigt wird und in der Eigenschaft messages existiert ein Unterobjekt welches Meldungen beinhaltet, die im Verlauf der Benutzung dem Betrachter angezeigt werden können.
Mit der Methode init wird die Anwendung gestartet. Sie sucht dabei im angegebenen Container die Slides.

init : function(element)
{
    var div = document.getElementById(element).getElementsByTagName('div');
    for(var i=0; i

    {
        if(div[i].className == 'slide')
        {
            this.slides.push(div[i]);
        }
    }

    this.load();
    this.create(); 

    document.getElementById('helper').onclick = function()
    {
        slideshow.goto(+1);
    }
},

Als erstes werden die 
-Tages innerhalb des Containers gesucht, der Klassenname überprüft und dann in die Eigenschaft slides abgelegt. Dann rufe ich die load()-Methode auf, um das aktuelle Slide anzuzeigen. Danach lasse ich über die create()-Methode die dynamische Navigation erzeugen.
Zum Schluss füge ich dem Objekt mit der ID helper einen Klick-Event hinzu. Dies soll nur verdeutlichen, wie auch ohne Buttons navigiert werden kann.

load : function()
{
    for(var i=0; i

    {
        this.slides[i].style.display = 'none';
    }
    this.slides[this.current].style.display = 'block';
},

Die load()-Methode ist super einfach. In ihr durchlaufe ich den Array mit den Slides und füge einen Style hinzu, der alle Slides unsichtbar schaltet. Zum Schluss wird dann das aktuelle Slide explizit auf sichtbar gesetzt.
Damit habe ich eine Methode die bei jedem Aufruf immer das aktuelle Slide anzeigt und alle anderen auf Unsichtbar setzt. So kann diese Methode später auch das Anzeigen von Slides außerhalb der Reihenfolge benutzt werden.

create : function()
{
    var form = document.createElement('form');
    form.setAttribute('id', 'navigation');

    var btn1 = document.createElement('button');
    btn1.setAttribute('type', 'button');
    btn1.setAttribute('id', 'btn_prev');
    btn1.appendChild(document.createTextNode('zurück'));
    btn1.onclick = function()
    {
        RED_Slideshow.goto(-1);
    }

    var btn2 = document.createElement('button');
    btn2.setAttribute('type', 'button');
    btn2.setAttribute('id', 'btn_next');
    btn2.appendChild(document.createTextNode('nächster'));
    btn2.onclick = function()
    {
        RED_Slideshow.goto(+1);
    }

    form.appendChild(btn1);
    form.appendChild(btn2);

    var body = document.getElementsByTagName('body')[0];
    var footer = document.getElementById('footer');

    body.insertBefore(form, footer);
}

Nun zu der umfangreichsten Methode, da sie die dynamische Navigation erzeugt. Ich habe mich hier für ein kleines Formular entschieden, welches einfache Buttons beinhaltet. Ich erzeugt also zunächst den 
-Tag und dann die 2 Buttons. Weiterhin fügt ich diesen Buttons noch Klick-Events hinzu, die wiederum eine Literal-Methode aufrufen.
Hier ist auf jeden Fall zu beachten, dass man nicht mit dem Schlüsselwort this arbeitet. Denn würde ich im Klick-Event this verwenden, dann würde sich das this auf den jeweiligen Button beziehen und nicht auf das Literal. Deshalb gehe ich den Umweg über den direkten Aufruf der Literal-Methode.
Zum Schluss setze ich das Formular vor meinen Fußbereich ein, in dem ich als erstes eine Verweis auf den -Tag  und dann einen Verweis auf den Fußbereich erzeuge.

goto : function(d)
{
    this.current += d;
    if(this.current == this.slides.length)
    {
        //alert(this.messages.last);
        this.current = 0;
    }
    if(this.current < 0)
    {
        //alert(this.message.first);
        this.current = this.slides.length-1;
    }
    this.load();
},

Die letzte Methode ist für die Navigation bestimmt. Ihr wird entweder der Wert 1 oder -1 übergeben. Dieser Parameter wird zum aktuellen Zähler hinzugefügt.
Als nächstes überprüft die Methode, ob das Ende oder der Anfang der Slideshow erreicht ist und setzt dann eigenständig den Zähler auf den passenden Wert um einen Schleifen-Vorgang zu erzeugen.
Zum Schluss ruft die Methode die load()-Methode auf, um das neue Slide auch anzuzeigen.
Damit ist auch schon das gesamte Slideshow-Literal erklärt. Es fehlt nur die Einbindung dieses Scriptes in die HTML-Datei und der Aufruf der Initialisierung mit der Parameter-Übergabe wo die Slides in der HTML-Datei liegen.

// JavaScript Document



Da wir mit der create()-Methode ein neues DOM-Objekt mit der ID navigation erzeugen, habe ich meine CSS-Datei um folgende Formatierung erweitert.

#navigation {
    position:absolute;
    bottom:3em;
    border:1px solid;
    width:50%;
    height:2em;
    margin:auto;
    text-align:center; 
    z-index:2;
    left:25%;
}

Downloads

HTML-Datei
CSS-Datei
JavaScript-Datei
komplettes Set

Ähnliche Beiträge
Slideshow mit einer HTML-Seite Teil 1
AJAX Adressbuch – Tutorial Teil 2
AJAX Adressbuch – Tutorial Teil 1
HTML5 – Buch
CSS Import macht Probleme


Slideshow mit einer HTML-Seite Teil 1
Enrico Reinsdorf — Tue, 18 Dec 2007 00:00:12 +0000
Im nächsten Beispiel möchte ich zeigen wie man mit JavaScript wunderbar das DOM einer HTML-Datei ändern kann. Dazu habe ich mich für den Nachbau von S5 entschieden. Im ersten Teil werde ich den Aufbau der HTML- und CSS-Datei erklären, um dann morgen in die JavaScript-Programmierung einzusteigen.

Fangen wir mit dem HTML an. Den Aufbau habe ich bewusst nicht sehr komplex gestaltet, um die spätere Programmierung einfach zu halten. Im Grunde besteht die Datei aus 5 Hauptkontainern:

header

Hier besteht die Möglichkeit der Präsentation eine Überschrift und eine Tagline zu geben.
body

Dieser Bereich enthält alle Slides die nacheinander angezeigt werden. Zusätzlich wird hier auch ein 
    
    Slide 1
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit ... Nullam nunc.
    Sed et lectus in massa imperdiet tincidunt ... Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.
    
    
    Slide 2
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit ... Nullam nunc.
    Sed et lectus in massa imperdiet tincidunt ... Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.
    Morbi consequat felis vitae enim ... Mauris aliquam dui eget purus.
    Sed ut metus sed wisi commodo viverra ... Curabitur a turpis at ligula lobortis cursus.
    
    
    Slide 3
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit ... Nullam nunc.
    Sed et lectus in massa imperdiet tincidunt ... Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.
    



    © 2007 - RE-Design




Als nächstes erkläre ich die wichtigsten Punkte in der CSS-Datei

@charset "utf-8";
/* CSS Document */

body {
margin:0;
padding:0;
font: 16px/130% normal normal Arial, Helvetica, sans-serif;
background-color:#b3d1e1;
}

Als erstes die Body-Formatierung. Hier wird der Abstand zum Rand auf Null gesetzt, um jeden Platz der da ist auch zu nutzen. Zusätzlich habe ich Anpassungen an der Typographie vorgenommen und die Basis-Hintergrundfarbe eingestellt.

#header {
position:absolute;
overflow:hidden;
top:0;
width:100%;
height:6em;
background-color:#069;
color:#fff;
padding:0 1em;
}

Der Kopfbereich wird absolut links oben platziert. Mit einer relative Höhe wird fester Platz für ihn reserviert. Weiterhin habe ich eine passende Hintergrund- und Schriftfarbe festgelegt. Um absolut positionierte Layer auch über die gesamte Breite fließen zu lassen wird die Breite auf 100% gesetzt.

#body {
position:absolute;
overflow:auto;
top:6em;
bottom:4em;
width:100%;
}

Auch der mittlere Präsentationsbereich ist absolut positioniert. Um keine Überlappung mit die Kopfbereich zu erhalten, fängt der Layer erst dort an wo der Kopfbereich endet. Gleiche habe ich auch für den Fußbereich eingestellt.

#footer {
position:absolute;
overflow:hidden;
height:3em;
bottom:0;
width:100%;
padding:.5em 1em;
background-color:#069;
}

Ähnlich wie der Kopfbereich wird auch der Fußbereich eine feste Positionierung zugewiesen. Allerdings im unteren Bereich des Browsers. Dabei musste ich darauf achten, dass die Höhe des Fußbereiches sich aus der Layerhöhe plus dem Innenabstand des Layers zusammensetzt.

#helper {
position:absolute;
overflow:hidden; 
width:50%;
height:2em;
bottom:3em;
left:25%;
z-index:2;
}

Zwar ist in meinem helper-Layer noch nichts drin aber platzieren kann ich ihn auf jeden Fall schon mal. Das besondere daran ist, dass ich ihn über den Fußbereich halb überlappen lassen wollte. Um dieses zu erreichen muss über die z-index-Eigenschaft der Layer vor dem nachfolgenden Fußbereich gelegt werden.

.slide {
margin:1em;
}

Die Formatierung der einzelnen Slides habe ich nicht großartig verändert, um dem Umfang der CSS-Datei möglichst übersichtlich zu halten. Es ist aber jeder Zeit möglich, den einzelnen Slides über IDs ein individuells Design zu geben.
Und morgen im Teil 2 beschreibe ich die JavaScript-Programmierung die nötig ist um dem Ganzen Leben einzuhauchen.
Downloads
HTML-Datei
CSS-Datei
JavaScript-Datei
komplettes Set
Ähnliche Beiträge
Slideshow mit einer HTML-Seite Teil 2
AJAX Adressbuch – Tutorial Teil 2
AJAX Adressbuch – Tutorial Teil 1
HTML5 – Buch
CSS Import macht Probleme


Mit JavaScript DOM erzeugen
Enrico Reinsdorf — Sun, 16 Dec 2007 23:00:25 +0000
Hier nun ein weiterer Artikel zum Thema XML-Erzeugung mit Web-Programmiersprachen. Im Gegensatz zu gestern konzentriere ich mich heute auf das Erstellen mit JavaScript. Aber auch das ist nicht sehr schwierig.
Anders als bei PHP gibt es in JavaScript keine direkte DOM-Objekte, sondern alles muss über das document-Objekt laufen. Auch hier gibt es nur ein paar wichtige Methoden die man kennen sollte:

document.createElement();
document.createTextNode();
element.appendChild();
element.setAttribute();



Ich habe mir als Beispiel überlegt in einen 
-Container eine ähnline Mitarbeiter-Liste zu erzeugen wie gestern mit PHP. Hier nun erstmal der Quellcode der HTML-Datei:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
http://www.w3.org/1999/xhtml"> 
 
 
RED - JavaScript - XML-Loader 
 
 
 
 
 
 


Wie man deutlich sehen kann, wird nach dem Laden des Dokumente die Methode meiner Objectes aufgerufen und als Parameter die ID des Containers übergeben.
In diesen Container wird nun die Mitarbeiterliste erzeugt.

var RED_DOM =
{
create : function(node)
{
    var dom = document.getElementById(node);

Als erstes erzeuge ich einen Verweis auf das Element.

    var mitarbeiter = dom.appendChild(document.createElement('ul'));

Dann füge ich eine ungeordnete Liste hinzu.

    var person = mitarbeiter.appendChild(document.createElement('li'));
    person.setAttribute('id','2007-12-15-RE');

Danach wird ein neuer Listeneintrag generiert und mit einer ID versehen.

    var vorname = person.appendChild(document.createElement('span'));
    vorname.appendChild(document.createTextNode('Enrico')); 
    var nachname = person.appendChild(document.createElement('span'));
    nachname.appendChild(document.createTextNode('Reinsdorf'));

Der Vor- und Nachname wird, um ihn zu kapseln in einen -Tag gelegt.

    var contacts = person.appendChild(document.createElement('ul'));
    var email = contacts.appendChild(document.createElement('li'));
    email = email.appendChild(document.createElement('a'));
    email.setAttribute('href', 'mailto:enrico@re-design.de');
    email.appendChild(document.createTextNode('enrico@re-design.de'));

Um alle Kontakt auflisten zu können, erzeuge ich eine weitere Unterliste. In die die Email als Verweis abgelegt wird.

    var telefon = contacts.appendChild(document.createElement('li'));
    telefon.setAttribute('class', 'mobil');
    var vorwahl = telefon.appendChild(document.createElement('span'));
    vorwahl.appendChild(document.createTextNode('0177'));
    var nummer = telefon.appendChild(document.createElement('span'));


    nummer.appendChild(document.createTextNode('2822557'));
}


} ;

Zum Schluss füge ich noch die Listeneintrag für die Telefonnummer hinzu, welcher sich wiederum in 2 -Tags aufsplittet.
Wie man erkennen kan ist der Ablauf dem von PHP sehr ähnlich. Was das spätere Arbeiten mit AJAX sehr erleichtert. Auch verhält sich ActionScript fast gleich, da es ähnlich strukturiert ist wie JavaScript.

HTML-Datei
JavaScript-Datei
komplettes Set

Ähnliche Beiträge
schnelle Erstellung von XML mit PHP
AJAX Abressbuch – Tutorial Teil 3
AJAX Adressbuch – Tutorial Teil 2
Slideshow mit einer HTML-Seite Teil 2
Slideshow mit einer HTML-Seite Teil 1


schnelle Erstellung von XML mit PHP
Enrico Reinsdorf — Sat, 15 Dec 2007 23:00:18 +0000
Das Verarbeiten von XML-Daten ist zwar prinzipiell sehr einfach, wenn man die Verarbeitung komplett mit dem DOM macht, aber trotzdem möchte ich hier und jetzt das Thema aufgreifen. In den späteren Artikeln meines Adventskalenders werde ich immer mal wieder serverseitiges Erzeugen und Verarbeiten von XML-Daten brauchen, weswegen hier die Basis gelegt werden soll.


Im Prinzip gibt es in PHP nur 3 wichtige DOM-Klassen:

DOMDocument
DOMElement
DOMNode

Wobei
Um eine XML-Struktur von folgender Syntax zu schaffen, reicht ein relativ einfaches Script.



    
        Reinsdorf
        Enrico
        
            enrico@re-design.de
            
                0177
                2822557
            
        
    
    
        Mustermann
        Max
        
            max@mustermann.de
            
                1234
                1234567
            
        
    
 

Diese XML-Datei beinhaltet 2 Personen mit den dazugehörigen Vor- und Zuname und den Kontaktmöglichkeiten per Email und per Telefon.
Hier nur das PHP-Script zum Erzeugen diese XML-Datenstruktur.


header('content-type: text/xml charset=utf-8');
/* @var $dom DOMDocument */
/* @var $mitarbeiter DOMElement */
/* @var $person DOMElement */
/* @var $contacts DOMElement */
/* @var $telefon DOMElement */

Als erstes wird über die header-Funktion der richtige Inhaltstyp festgelegt, so dass die Browser auch die Sonderzeichen korrekt anzeigen können. Die weiteren Kommentare dienen nur meinem Zend-Studio zur Hilfe.

$dom = new DOMDocument('1.0', 'utf-8');

Als nächste wird ein neues DOM-Dokument angelegt.

$mitarbeiter = $dom->appendChild(new DOMElement('mitarbeiter'));

In dieses DOM-Objekt wird ein erster Knoten hineingelegt.

$person = $mitarbeiter->appendChild(new DOMElement('person'));
$person->setAttribute('id','2007-12-16-RE');
$person->appendChild(new DOMElement('vorname','Enrico'));
$person->appendChild(new DOMElement('nachname','Reinsdorf'));

Dann wird dem -Knoten ein Unterknoten person hinzugefügt. Diesem Knoten wird ein Attribute und 2 Unterknoten mit direkten Texten zugewiesen.

$contacts = $person->appendChild(new DOMElement('contacts'));
$contacts->appendChild(new DOMElement('email','enrico@re-design.de'));

$telefon = $contacts->appendChild(new DOMElement('telefon'));
$telefon->setAttribute('type','mobil');
$telefon->appendChild(new DOMElement('vorwahl','0177'));
$telefon->appendChild(new DOMElement('nummer','2822557'));

Zum Schluss wird der -Knoten mit dem Unterknoten contacts erweitert. Dieser erhält wiederum einem einfachen Unterknoten email und einem komplexen Unterknoten für die Telefonnummer.

$person = $mitarbeiter->appendChild(new DOMElement('person'));
$person->setAttribute('id','2007-04-01-MM');

$person->appendChild(new DOMElement('vorname','Max'));
$person->appendChild(new DOMElement('nachname','Mustermann'));

$contacts = $person->appendChild(new DOMElement('contacts'));
$contacts->appendChild(new DOMElement('email','max@mustermann.de'));

$telefon = $contacts->appendChild(new DOMElement('telefon'));
$telefon->setAttribute('type','büro');
$telefon->appendChild(new DOMElement('vorwahl','1234'));
$telefon->appendChild(new DOMElement('nummer','1234567'));

Das ganz nun nochmals für die 2. Person. In späteren Script wird natürlich diese Zusammenstellung über eine Schleife erstellt und nicht, wie ich es jetzt gemacht habe von Hand.

echo $dom->saveXML();
?>

Als Abschluss gebe ich das DOM-Object als XML-Datenformat an den Browser aus.

PHP-Datei
XML-Datei
komplettes Set

Ähnliche Beiträge
Mit JavaScript DOM erzeugen
Einzelcoaching – PHP-XML Schulung
AJAX Adressbuch – Tutorial Teil 4
PHP">Template-Engine mit PHP
Flashvideo-Player einfach eingesetzt


AJAX-Klasse, einfach gebaut
Enrico Reinsdorf — Fri, 14 Dec 2007 23:00:19 +0000
Bei der Erstellung von moderen Websites spielt AJAX eine immer wichtigere Rolle. In diesem Tutorial möchte ich euch eine kleine JavaScript-Klasse vorstellen. Diese Klasse kann dann Grundlage für weiter tolle Webanwendungen sein kann.
Die einfache und trotzdem flexible Verwendung der erstellten Klasse lag mir dabei besonders am Herzen.


Verwendung der AJAX-Klasse
Eingebunden und verwendet wird die Klasse über folgende Befehle:

 


Wie ihr seht ist diese Verarbeitung sehr einfach einzusetzen. Als erstes muss natürlich die Klasse in das HTML-Dokument eingebunden werden. Dann legt man fest was passieren soll, wie die Daten verarbeiter werden sollen. Zusätzlich sollte man in der eigentlichen Klasse definieren das diese Funktion auch aufgerufen wird, sonst passiert gar nichts. Dazu habe ich einen sogenannten Hock vordefiniert, der dann einfach mit Funktionalität gefüllt wird. Zum Schluß initialisiert man nur nach die Klasse, um das XMLHttpRequest-Objekt anzulegen und läd dann die entsprechende Datei von Server. Fertig ist ist ein flexibles Ladesystem per JavaScript.
Detail zur AJAX-Klasse
Natürlich möchte ich euch auch noch den Inhalt meiner Klasse kurz präsentieren, denn ich denke dadurch wird der Ausbau ud die Erweiterung relativ einfach.

var ajax = { 
    req             : null, 
    url             : null, 
    method          : 'GET', 
    async           : false, 
    responseXML     : null, 
    responseText    : null, 
    init : function() 
        { 
            try 
            { 
                this.req = new XMLHttpRequest(); 
            } 
            catch(e) 
            { 
                try 
                { 
                    this.req = new ActiveXObject('Microsoft.XMLHTTP'); 
                } 
                catch(e) 
                { 
                    this.req = null; 
                } 
            } 
            if(this.req != null) 
            { 
                this.req.onreadystatechange = this.response; 
            } 
        }, 
    load : function(u,m,a) 
        { 
            this.url = u; 
            this.method = m || this.method; 
            this.async = a || this.async; 
            if(this.req != null) 
            { 
                this.req.open(this.method,this.url,this.async); 
                this.req.send(); 
            } 
        }, 
    response : function() 
        { 
            var a = ajax.req; 
            if(a.readyState == 4) 
            { 
                if(a.status==0 || a.status==200 || a.statusText=='OK') 
                { 
                    ajax.responseXML = a.responseXML; 
                    ajax.responseText = a.responseText; 
                    ajax.callback(); 
                } 
            } 
        }, 
    callback : function(){} 
};

Ich habe mich bei der Erstellung der Klasse für Literal-Objekt entschieden, da ich die Verwendbarkeit dadurch als sehr einfach empfinde und das Instanzieren des Objektes entfällt.
Eigenschaften der Klasse

req

Hier wird später das XMLHttpRequest-Objekt abgespeichert, welches ja für den Verbindungsaufbau zu Datenquellen nötig ist.
url

Um später die URL auch in einem regelmäßigen Verfahren immer wieder abzurufen, wird sie in dieser Eigenschaft abgespeichert.
method

Auch wird für weitere Verwendung die Übertragungsmethode als Eigenschaft festgehalten. Mögliche sinnvolle Werte sind in diesem Fall HEAD, PUT und GET, wobei letzteres der Defaultwert ist.
async

Um eine synchrone Übertragen der Daten ein zustellen, setzt man diese Eigenschaft auf true.
responseXML und responseText

In diesen beiden Eigenschaften wird nach erfolgreicher Übertragung der Daten die Ergebnis gespeichert. Einmal als normale Zeichenkette und einmal als ein XML-Objekt.

Methoden der Klasse

init()

Diese Methode sollte immer vor allen anderen Methodenaufrufen benutzt werden, da sie das XMLHttpREquest instanziert und gleichzeitig wird festgelegt, dass die response()-Methode beim Statuswechsel aufgerufen werden soll.
load(u,m,a)

Durch die 3 übergebenen Parameter wird als erstes die URL der Datenquelle, die Übertragungsmethode und synchrone oder asynchrone Art festgelegen. Dann wird die Datenquelle geladen.
response()

In dieser Methode wird der Status der Übertragung und der Status des Übertragenen überprüft. Im Erfolgsfall werden die übertragenen Daten in die entsprechenen Eigenschaften übertragen und die callback()-Methode aufgerufen.
callback()

Dieser Hock dient zur flexiblen Benutzung der Klassen. Mit dem Überschreiben der leeren Funktion bestimmt man extern was mit dem Daten nach dem Laden geschehen soll.

Download der Dateien

AJAX-Klasse
HTML-Datei 
Kompletes Beispiel als ZIP-Datei

Ähnliche Beiträge
dynamische Linkliste bringt mehr Usability
AJAX Abressbuch – Tutorial Teil 3
AJAX Adressbuch – Tutorial Teil 2
AJAX – PHP Schulung in Stuttgart
AJAX Adressbuch


Template-Engine mit PHP
Enrico Reinsdorf — Thu, 13 Dec 2007 23:00:08 +0000
Immer wieder brauche ich für das Erstellen von komplexeren Webanwendungen eine kleine Template-Engine. Ich könnte dann zwar auf bestehende Syteme wie z.B. Smarty oder PatTemplate. Ich habe mir schon vor langer Zeit ein kleines Script zusammengeschrieben und möchte es heute hier mit euch teilen. Es ist ja Weihnachten.


Zuerst einmal die grundlegende Vorgehensweise. Die sich auf meiner Sicht heraus als sehr einfach erweist.

$tpl = new Template('path/to/template/directory/');
$tpl->load('file.name');
$tpl->set('##KEYWORD##', 'Replace String');
$tpl->write();

Klar das ich als erstes die Template-Klasse instazieren muss. Dies tue ich mit der gleichzeitigen Übergabe der Template-Ordners. Als nächstes lade ich dann die eigentliche Template-Datei. Und dann gebe ich allen Keywords, also Schlüsselworten, die ich im Template gebrauche einen Wert. Zum Schluss schicke ich das Template zum Browser.
Bestimmt gibt es jetzt noch viele Einwände was man noch einbauen könnte oder sollte, was noch alles fehlt und nicht berücksichtige wird, aber ich glaube gerade diese Einfachheit macht die Klasse so schnell nutzbar.
Das Template, welches geladen wird und später dann an den Browser geschickt wird, ist eine reine HTML-Datei. Ich brauche also keine spezielle Konfiguration meines Editors um die Template-Dateien zu öffnen. Ich nutze einfach normale HTML-Dateien und dort wo der dynamische Text hinkommen soll definiere ich ein Schlüsselwort, welches folgende Syntax hat: ##UPPERCASE_WORD##.
Nun zu meiner eigentlichen Template-Klasse. Sie besitzt mehr als die oben gezeigten Funktionalitäten.
Folgendes kann in dieser Klasse genutzt werden:

RED_Template($path=null) 
Dies ist der Konstruktor der einen Pfad zum Template-Ordner erwartet. Falls die Parameter leer bleibt wird auf Root-Ebene ein Default-Ordner als Stammverzeichnis für die Templates genutzt. 
load($file) 
Diese Methode lädt die Template-Datei in die Klassen-Eigenschaft $source falls sie vorhanden ist. Falls sie nicht existiert wird in die Klassen-Eigenschaft $error eine Fehlermeldung geschrieben und der Wert false zurück gegeben. 
reload() 
Es kommt immer wieder vor, dass die geladene Template-Datei erneut geladen werden muss. Dabei habe ich mir aber überlegt, dass es überflüssig und Ressourcen verschwendend ist, wenn sie tatsächlich erneut geladen werden müsste. Deshalb wird beim ersten Laden der Datei eine Kopie in eine weitere Klassen-Eigenschaft $cache abgelegt. So muss hier nur noch ein Überschrieben die $source-Eigenschaft stattfinden. 
setSource($src='') 
Diese Methode benutze ich kaum. Ich habe sie nur eingebaut, um die Möglichkeit zu haben nach dem laden der Template-Datei eine andere Datei zu laden. Das ist aber bis jetzt noch nie vorgekommen. 
set($key, $value) 
Hier nun die wichtigste Methode. Hier werden die Schlüsselbegriff und ihre Werte in einen Array gesammelt um später eingesetzt zu werden. 
replace() 
Mit der relace-Methode werden die gesammelten Schlüsselbegriffe in das geladene Templat eingesetz, bzw. die Schüsselbegriffe durch ihre Werte ersetzt. Diese Methode sollte eigentlich niemals direkt aufgerufen werden, aber da es in PHP 4 noch keine Zugriffsrechte für Variablen gab habe ich sie einfach so geschrieben. 
get($source=false) 
Um mit der ersetzten Template-Datei in PHP weiterarbeiten zu können, habe ich eine get-Methode eingefügt, die nicht direkt das Template an den Browser gibt. Mit dem Parameter $source kann ich bestimmen ob ich den lesbaren Quellcode haben möchte oder lieber doch die benutzbaren Quellcode. 
write($source=false) 
In vielen Fällen möchte ich aber dass das Template direkt an den Browser gesendet wird. Die write()-Methode ruft eigentlich nur die get()-Methode auf und reicht der Parameter weiter. 
error($msg) 
Alle Fehlermeldungen werde mit dieser Methode in einem Array gesammelt um ihn später abrufen zu können. es wäre z.B. auch denkbar, dass diese Fehler dann in eine Logdatei umgeleitet werden. 
getError() 
Meine letzte Funktion gibt immer die letzte Fehlermeldung aus dem Array zurück. 

Mit diesem System wäre es z.B. sehr einfach einzelne HTML-Blöcke in Template-Dateien auszulagen und sie dann nacheinander in sich zu laden um so eine komplette Ausgabe zu kommen.

$news = load_all_news();
$content = '';

$tpl = new Template('nachrichten/template/');
$tpl->load('nachricht.html');

foreach($news as $item)
{
$tpl->set('##TITLE##', Sitem->title);
$tpl->set('##TEASER##', Sitem->teaser);
$tpl->set('##DATE##', Sitem->date);
$tpl->set('##MORELINK##', Sitem->link);

$content = $tpl->get();

$tpl->replace();
}
$tpl->load('uebersicht.html');
$tpl->set('##HEADLINE##', 'Aktuelle Meldungen');
$tpl->set('##CONTENT##', $content)
$tpl->write();



Hier der Download meiner PHP Template Klasse
Template-Klasse

Ähnliche Beiträge
Website – The Lakeside Heritage Society
Website – Q’uchu
Website – Watermelon Ministries
Tag 14 – Template Class
AJAX Adressbuch – Tutorial Teil 4


Flashvideo-Player einfach eingesetzt
Enrico Reinsdorf — Wed, 12 Dec 2007 23:00:34 +0000
Nachdem ich gestern mit einem kleinen JavaScript Link durch Fußnoten in einem Text ersetzt und eine Linkliste hinzugefügt habe, zeige ich heute eine weiter Möglichkeit nicht alles von Hand zu erstellen.
Ich fand es schon immer umständlich für jedes FLV-Video einen eigenen Video-Player zu erstellen. Es wäre doch schönen wenn man nur einen Player nutzen müsste und ihn über externe Parameter steuern könnte, z.B. welches Video er anzeigen sollte.


Mit diesem kleinen Tool-Set habe ich versucht diese Idee umzusetzen. Wie aber funktioniert das ganze nun? Als erstes erstmal eine Auflistung aller Beteiligten:

videoplayer.html
Video-Player.swf
videos.xml
videos

test-01.flv
test-02.flv
test-03.flv



Der Vorgang
Wie habe ich mir nun den Ablauf vorgestellt? Nun, ich dachte mir ich übergebe per GET an den Videoplayer eine ID. Mit dieser ID sucht der Videoplayer in der XML-Datei den Knoten mit allen wichtigen Informationen. So einfach.
Aufbau der XML-Datei
Dieser ist relativ. Es gibt das Root-Verzeichnis und dann die Unterknoten die mit dem id-Attribut versehen werden. In diesen Unterknoten werden alle weiteren Informationen eingebunden die der Videoplayer braucht.

 


Test 1
videos/test_01.flv


Test 2
videos/test_02.flv


Test 3
videos/test_03.flv



Der ActionScript

Hier wird als erstes der übergebene Parameter in eine globale Variable geladen. Dann die XML-Datei geholt. Die Knoten werden über eine for-Schleifen durchlaufen und die IDs mit dem Parameter verglichen.

_root.onLoad = function()
{
if (_level0.file_id == undefined) {
_global.id = 0;
} else {
_global.id = _level0.file_id;
}
status_txt.text = _global.id;
status_txt.text += 'n';
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = function(s:Boolean)
{
if(s)
{
status_txt.text += 'loadedn'; 
var nodes:XMLNode = this.firstChild; 
for(var i:Number=0; i

{ 
var node:XMLNode = nodes.childNodes[i]; 
if(node.attributes['id'] == _global.id) 
{ 
status_txt.text += node.childNodes[0].firstChild.nodeValue; 
status_txt.text += 'n'; 
status_txt.text += node.childNodes[1].firstChild.nodeValue; 
myPlayer.contentPath = node.childNodes[1].firstChild.nodeValue; 
} 
} 
} 
} 
xml.load('videos.xml'); 
};

Zum Schluss nur noch die Videos in das angegebene Verzeichnis ablegen und glücklich sein.

HTML-Datei
XML-Datei
Flasch-Datei
SWF-Datei
komplettes Set

Ähnliche Beiträge
Dozent an der Macromedia Fachhochschule
Flash Programmierung – LR Health & Beauty
Mobil Games mit Flash – Buch
Flash Enginneering – Buch
ActionScript 3 & Flex


dynamische Linkliste bringt mehr Usability
Enrico Reinsdorf — Tue, 11 Dec 2007 23:00:26 +0000
Heute möchte ich euch ein kleines JavaScript geben, welches aus einem vorgegebenen 
-Container alles Links extrahiert und sie als Linkliste am Ende des Containers anhängt. Hier gibt es das Demo.
Warum macht es Sinn eine solche Linkliste zu erstellen? Nun fast jeder der sich mit benutzerfreundlichen Websites auseinandersetzt weiß, dass Links innerhalb von Fließtext den Lesefluss stören. Außerdem kann es möglich sein Leser zu verlieren, wenn sie den Links innerhalb des Textes folgen und nicht wieder zurück kommen. Es ist besser erst am Ende des Textes alle im Text empfohlenen Links aufzulisten.



Leider kann es sehr mühselig sein, die Passagen im Text mit Fußnoten zu kennzeichnen und dann im unteren Bereich eine Linkliste mit Ankerpunkten zu erstellen. Sowas kann wunderbar JavaScript mit einem Automatismus übernehmen.
Einbindung des Link-Generators
Ich habe mir überlegt, dass die Einbindung möglichst einfach sein sollte. Deshalb habe ich ein externes Script geschrieben, welches eine Variable mit einem Literal erzeugt. Dieses Script muss nur in die eigene Website eingebunden werden und ein Event festgelegt werden, wann die Abarbeitung beginnen soll.




Als Übergabeparameter für die Initialisierung wird der Container gewählt in dem die Links enthalten sind. Hier z.B. der 
-Container mit der ID content. Als nächstes muss nur noch die writeList()-Methode ausgeführt werden und das Script erzeugt am Ende des übergebenen Containers eine sortierte Liste.
Ich habe extra diesen Vorgang in 2 Schritte unterteilt, um flexibel zu bleiben, denn ich kann mir vorstellen später eine Methode zu schreiben, die in einen komplett anderen Container die Liste schreibt oder auch einfach nur den Array zurückgibt.
Der Link-Generator selbst
Ich werde jetzt hier nicht jeden einzelnen Schritt erklären. Ich versuche mich auf die wichtigsten Punkte zu beschränken.
Die Initialisierung
Hier wird einfach nur der übergebene Container abgespeichert.

init: function(content)
{
this.container = content;
},

Die Methode writeList()

writeList: function()
{
var nodes = this.container.getElementsByTagName('A');
var ol = document.createElement('OL');
for(var n=nodes.length-1, f=nodes.length; n>=0; n--, f--)
{
var parent = nodes[n].parentNode;
var a = document.createElement('A');
a.setAttribute('href', '#a_'+n);
a.appendChild(document.createTextNode('['+f+']'));
var foot = document.createElement('SUB');
foot.appendChild(a);
var span = document.createElement('SPAN');
span.appendChild(document.createTextNode(nodes[n].firstChild.nodeValue));
span.appendChild(foot);
var li = document.createElement('LI');
var a = document.createElement('A');
a.appendChild(document.createTextNode(nodes[n].firstChild.nodeValue));
a.setAttribute('href', nodes[n].href);
a.setAttribute('id', 'a_'+n);
li.appendChild(a);
this.list.push(li);
parent.insertBefore(span, nodes[n]);
parent.removeChild(nodes[n+1]);
}
for(var n=this.list.length-1; n>=0;n--)
{
ol.appendChild(this.list[n]);
}
this.container.appendChild(ol);
}

In Zeile 15 werden aus dem Text alle Link gesucht und in Zeile 16 schon mal ein HTML-Knoten für die sortierte Liste angelegt.
Danach wird über eine for-Schleife alle Link-Knoten von hinten nach vorne verarbeitet, die Erklärung folgt später. Dabei wird als Erstes ein Verweis auf den Eltern-Knoten gespeichert und dann ein Link als Fußnote generiert (Zeile 22 – 27).
Diese Fußnote wird zusammen mit dem Linktext in einen neuen -Tag gestellt (Zeile 29 – 31).
Danach wird der Listeneintrag mit einer Kopie des Orginallinks erzeugt (Zeile 33 – 39). Dieser Listeneintrag wird erstmal in einem Array zwischengespeichert.
Anschließend wird der Span-Knoten vor dem eigentlichen Link eingesetzt (Zeile 42) und der Link gelöscht (Zeile 43). Dabei muss aber darauf geachtet werden, dass in der Variablen nodes ein Verweis auf alle Links innerhalb des Container ist und wenn wie hier ein neuer Link, die Fußnote, hinzukommt auch die Anzahl der Links innerhalb des Textes steigt. Deshalb muss beim Löschen n+1 gerechnet werden. Durch diese dynamische Änderung der Menge der Links im Array hat mich auch veranlasst von hinten nach vorne zu arbeiten, denn dadurch wird der Löschvorgang vereinfacht.
Zum Schluss muss nur noch die geordnete Liste erzeugt werden. Da aber die Links im Array in der verkehrten Reihenfolge stehen, habe ich wieder von hinten nach vorne gearbeitet, um die richtige Reihenfolge zu bekommen (Zeile 45 – 48).
Fazit
Ich hoffe ich konnte mit diesem kleine Beispiel zeige, wie JavaScript das Arbeiten im Web erleichtern kann. Keine Ahnung ob das schon ein Ansatz von Web 2.0 ist, aber ich finde der Automatismus kann sich schon sehen lassen.

Download

Ähnliche Beiträge
AJAX-Klasse, einfach gebaut
AJAX Abressbuch – Tutorial Teil 3
AJAX Adressbuch – Tutorial Teil 2
Slideshow mit einer HTML-Seite Teil 2
Slideshow mit einer HTML-Seite Teil 1


Redirect hilft bei Veränderungen
Enrico Reinsdorf — Mon, 10 Dec 2007 22:00:08 +0000
Dieses Thema hatte ich schon lange im Kopf, hatte aber leider noch nie Zeit gefunden darüber einmal detaillierter zu schreiben. Nun aber, dadurch das mich heut fast alle Browser mit den Thema CSS 3 im Stich gelassen haben, habe ich die Zeit und den Platz gefunden darüber zu berichte.
Ein Website kann noch so gut geplant sein, im Laufe der Zeit werden sich immer wieder die Strukturen und damit die URIs von Ressourcen ändern. Das ist ganz normal. Normal ist auch, dass solche Ressourcen Spuren im Web hinterlassen haben. Zum einen natürlich in Suchmaschinen, die diese indexiert haben. Zusätzlich habe vielleicht aber auch Besucher diese Adressen in ihren sozialen Netzwerken wie del.icio.us, Mister Wong, Yigg oder Google Bookmarks oder aber ganz normal als Favorit abgespeichert. Wenn sich nun die Adressierung ändert, sollten natürlich Besucher die noch zur alten Adressen wollen weitergeleitet werden. Und genau da kommt die Apache Direktive redirect ins Spiel.


Per Definition ist folgende Syntax zulässig:

Redirect [Status]  

Aber wohin schreibt man diese Zeile? Ganz einfach! In die .htaccess-Datei in das Hauptverzeichnis seines Webspaces.
Und was bedeutet Sie? Auch das ist ganz einfach! redirect bedeutet wir wollen einen Weiterleitung definieren. Mit dem Status, der optional ist, gibt man den Weiterleitungsstatus an. Es gibt verschiedene Stati:

301 Moved Permanently 
Die Ressource ist dauerhaft unter einer anderen URI erreichbar. Dadurch wird z.B. direkt bei Suchmaschinen veranlasst, dass die Adresse im Index aktualisiert wird. 
302 Temp 
Die Ressource ist vorübergehend unter einer anderen URI erreichbar. 
403 Forbidden 
Der Zugriff auf die Ressource wird verweigert. Durch eine Weiterleitung können störende Fehlermeldungen des Servers korrigiert werden. 
404 File not Found 
Die Ressource wird unter der URI nicht gefunden. Sinnvolle Weiterleitung wäre z.B. auf die interne Suche, um dort die Ressource zu finden. 
410 Gone 
Die Ressource existiert nicht mehr. Bei vielen Suchmaschinen wird dadurch der Verweis zur Ressource aus dem Index gelöscht. 

Da der Status ein optionaler Wert ist, kann man ihn auch weglassen, dabei wird dann aber der Default-Wert 302 eingesetzt.
Unter dem Pfad gibt man die angefragte Ressource an und bei der URI schreibt man dann die neue Adresse als absoluten Pfad auf.
Um das Ganze etwas besser zu verdeutlichen hier ein kleines Beispiel. Eine zum Download hinterlegte Datei wird aus dem Download-Ordner dauerhaft in den Projekt-Ordner verschoben:

Redirect 301 /Downloads/Software.exe http://www.re-design.de/Projekt/Download/Software.exe

Eine weitere nützliche Hilfe bietet die serverseitige Weiterleitung bei unterschiedlichen Schreibweisen der Adressierung bzw. bei Tippfehlern. Beim nächsten Beispiel leiten alle Angaben auf die gleiche URI weiter:

Redirect 301 /Kontakt.html http://www.re-design.de/kontakt.html
Redirect 301 /kontakt.htm http://www.re-design.de/kontakt.html
Redirect 301 /contact.html http://www.re-design.de/kontakt.html
Redirect 301 /contact.htm http://www.re-design.de/kontakt.html
Redirect 301 /contact/ http://www.re-design.de/kontakt.html

Zusätzlich hat natürlich die serverseitige Weiterleitung gegenüber der clientseitigen Weiterleitung durch JavaScript oder mit der Meta-Angabe refresh, dass Suchmaschinen bei der Weiterleitung keine Doorway-Seite vermuten, da sie diesen gesamten Vorgang nicht mitbekommen.
Um jetzt nicht umdständliche Weiterleitungslisten zu schreiben, gibt es die Apache Direktive redirectMatch. In dieser kann man mit regulären Ausdrücken arbeiten und so mit Suchmustern die verschieden Schreibweisen abfangen. Aber das ist nicht unbedingt Thema dieses Artikel und würde zu weit schon in die Tiefe gehen. Es soll lediglich als Ausblick dienen, genauso wie die Apache Direktive mod_rewrite die ich vielleicht in einem späteren Artikel genauer behandeln werden.
Ähnliche Beiträge
Dreamweaver-Schulung für den Solar Verlag
Transcending CSS
Little Boxes
Das Website Handbuch
CSS-Seminar bei VVA


Die Macht der Selektoren
Enrico Reinsdorf — Sat, 08 Dec 2007 23:00:11 +0000
Durch die Benutzung von Klassen und IDs kann man sehr effektiv auf die Strukturen von HTML-Seiten zugreifen. Doch leider wird dadurch auch der Quellcode der Seite vergrößert. In vielen Fällen ist das aber unnötig, denn oft werden Klassen aus Bequemlichkeit eingesetzt um schnell auf das Richtige zu zugreifen. CSS bietet über Selektoren mehr als nur den Zugriff auf Tags, Klassen und IDs.

Arten von Selektoren
Ok, fangen wir mit den üblichen Verdächtigen an.

Tag {
    color: red; 3
} 
.Klasse { 
    color: blue; 
} 
Tag#ID { 
    color: green; 
}

Attributs-Selektoren
Dann gibt es aber auch noch Attributes-Selektoren. Viel Tags unterscheiden sich ja durch die Verwendung von Attributen und genau diese Unterscheidungen kann man auch in CSS nutzen.
Das erste Beispiel formatiert alle -Tags mit einem titel-Attribute

a[title] {
    color: red;
}

Das nächste Beispiel formatiert alle -Tags mit dem rel-Attribute und dem Wert copyrigth blau.


a[rel=copyright] {
    color: blue;
}

Im dritten Beispiel werden die -Tags grün formatiert, die im lang-Attribute den Wert en stehen haben. Dabei kann der Wert in einer durch Leerzeichen getrennten Liste stehen.


a[lang~=en] {
    color: green;
}

Das folgende Beispiel formatiert alle -Tags die im href-Attribute mit mailto beginnen.


a[href|=mailto:] {
    color: yellow;
}

Das letzte Beispiel zeigt wie -Tags grau formatiert werden, die im href-Attribute mit dem Wert .pdf enden.


a[href^=.pdf] {
    color: grey;
}

Nachbarn, Kinder und Nachfahren
Weiter Möglichkeiten ohne Klassen und IDs gezielt auf Tags zu zugreifen besteht darin Kombinationen der oben beschriebenen Möglichkeiten zu nutzen.
Fangen wir mit den Nachfahren an. Kombiniert man zwei Selektoren mit einem Leerzeichen dann trifft diese Formatierung auf alle Elemente zu die unterhalb des erst genannten Elements sich befinden, egal in welcher Hierarchie-Ebene. Im Beispiel werden alle Verlinkungen in einer ungeordneten Liste rot formatiert, egal ob sie in Unterlisten ober auf der obersten Ebene liegen.

ul a { 
    color: red; 
}

Kindern sind die direkten Nachfahren von Elementen. Das Beispiel zeigt wie die direkt in -Tags eingebunden sind umrandet werden, nicht aber Bilder in einem Absatz innerhalb eines -Tags.

div > img { 
    border: thin solid black; 
} 

Bei Nachbarn kann das folgenden Element eines Elementes formatieren, hier ist es der erste Absatz nach einer Überschrift.

h3 + p { 
    boder: thin dashed darkred; 
}

Pseudo-Klassen
CSS bietet auch schon vorgegebene Klassen um schnell auf Elemente in der HTML-Seite zugreifen zu können. Dabei beschränkt sich die Selektion nicht nur auf die reine Struktur, sondern auch auf Zustände bzw. Interaktivität.
Zum Beispiel kann man mit der Pseudo-Klasse :first-child das erste Kind eines Elementes formatieren. Im Beispiel bekommt das erste Kind, also der erste Listeneintrag einen Rahmen an der Oberseite.

ul:first-child { 
    border-top: thin solid black; 
}

Man kann aber auch die Zustände von Verlinkungen durch :link und :visited unterschiedlich darstellen.

a:link { 
    color: blue; 
} 
a:visited { 
    color: purpel; 
}

Aber nicht nur Zustände von Verlinkungen, sondern auch Interaktivität des Benutzers kann man über CSS darstellbar machen. Das Beispiel zeigt Verlinkungen bei ihrer Aktivierung rot, Eingabefelder bei ihrer Fokusierung mit einer roten Umrandung und Tabellenzeilen beim Drüberfahren mit hellgrauen Hintergrund an.

a:active { 
    color: red; 
} 
input:focus { 
    boder: thin solid red; 
} 
tr:hover { 
    background-color: silver; 
}

Zusätzlich gibt gibt es auch eine Sprach-Klasse :lang. Dort kann man Formatierungen definieren die durch das lang-Attribut bestimmt werden.

blockquote:lang(de) > p { 
    quotes: ‘»’ ‘«’ ‘2039′ ‘203A’
}

Pseudo-Elemente
Neben den Pseudo-Klassen existieren in CSS auch sogenannte Pseudo-Elemente.

p:first-line { 
    color: red; 
} 
p:first-letter { 
    font-size: 2em; 
} 
li:before { 
    content: ‘►’; 
} 
a:after { 
    content: ‘ [’ attr(href) ‘]’:
}

In dem letzen Beispiel werden die verschiedenen Pseudo-Elemente aufgelistet. Dazu zählt unter anderem :first-line welches die erste Zeile des Elementes, hier eines Absatzes, formatiert. Mit :first-letter kann der erste Buchstabe eines Elementes gesondert formatiert werden.
Die beiden letzten Formatierungen zeigen jeweils vor bzw. hinter dem Element Inhalt an, der aber nicht im Quellcode vorhanden ist. Ein besondere Form, die gut im Ausdruck verwendet werden kann, liegt bei der Formatierung des Links vor. Hier wird nach jeder Verlinkung der Wert des href-Attributs in eckigen Klammern angezeigt.
Ausblicke
Ab CSS 3 wird die Selektierung von Elementen noch differenzierter. Hier einmal eine Auflistung der zusätzlichen Möglichkeiten:

Attributs-Selektoren

E[foo^="bar"] an E element whose “foo” attribute value begins exactly with the string “bar”
E[foo$="bar"] an E element whose “foo” attribute value ends exactly with the string “bar”
E[foo*="bar"] an E element whose “foo” attribute value contains the substring “bar”
E[hreflang|="en"] an E element whose “hreflang” attribute has a hyphen-separated list of values beginning (from the left) with “en”


Pseudo-Klassen

E:root an E element, root of the document
E:nth-child(n) an E element, the n-th child of its parent
E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
E:nth-of-type(n) an E element, the n-th sibling of its type
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
E:last-child an E element, last child of its parent
E:first-of-type an E element, first sibling of its type
E:last-of-type an E element, last sibling of its type
E:only-child an E element, only child of its parent
E:only-of-type an E element, only sibling of its type
E:empty an E element that has no children (including text nodes)
E:target an E element being the target of the referring URI
E:enabled
E:disabled a user interface element E which is enabled or disabled
E:checked a user interface element E which is checked (for instance a radio-button or checkbox)
E::selection the portion of an E element that is currently selected/highlighted by the user
E:not(s)an E element that does not match simple selector s


Kombination

E ~ F an F element preceded by an E element



Ähnliche BeiträgeIcons helfen bei der Orientierung
HTML5 – Buch
Webdesign–Aufbau
Webdesign–Einzelcoaching
Webprogrammierung mit HTML und CSS


CSS Layouts am Fließband
Enrico Reinsdorf — Fri, 07 Dec 2007 23:00:07 +0000
Immer wieder werden ähnlich bzw. gleiche Layouts beim Webdesign gebraucht. Ich habe einmal versucht eine relative einfaches Framework zur schnellen Erzeugung von verschiedenen Layouts zu erstellen.
Um die Verwaltung des Framework einfach zu halten, habe ich mich dazu entschlossen die CSS-Dateien aufzuteilen. In der HTML-Datei existieren zwar nur 3 relative Verlinkungen zu den jeweiligen Ausgabedesigns, aber für jedes Design sind dann weitere 3 Dateien zuständig. Um die Designs flexibel administrieren zu können, benutze ich eine Layout-Datei für die Positionierung der Boxen, eine Color-Datei für die Farbgebung und eine Typographie-Datei für die Texteinstellung.


Der Aufbau der HTML-Datei ist nach den Semantik-Regel wohlgeformt und besteht aus der üblichen 3 großen Bereichen: Kopf, Körper und Fuß. Um innerhalb des Körpers mit bis zu 3 Spalten arbeiten zu können, existieren dort eine Content-, Navigations- und Marginal-Box.
Hier die Originalstruktur der HTML-Datei:







    
        
    
    
    





Um die 3 benötigten Design-Dateien in die HTML-Datei zu laden, importiert die verlinkten Style-Datei die restlichen Dateien:

@charset "utf-8″;
/* Screen Style Document */

@import url("reset.css");
@import url("screen/layout.css");
@import url("screen/color.css");
@import url("screen/typographie.css");

Die mit importierte Reset-Datei normalisiert die von Browsern vorgegebene Formatierung.

body, div, dl, dt. dl, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, p, blockoute, th, td 
{margin:0;padding:0} 
h1, h2, h3, h4, h5, h6 
{font-size:100%} 
ol, ul 
{list-style:none} 
address, caption, cite, code, dfn, em, strong, th, var 
{font-style:normal;font-weight:normal} 
table 
{border-collapse:collapse;border-spacing:0;font-size:100%}
fieldset, img 
{border:0} 
caption, th 
{text-align:left} 
q:before, q:after 
{content:""}

Ich habe schließlich, um die Flexibilität des Frameworks zu demonstrieren, für das Layout, die Farben und die Typographie jeweils 3 Versionen erstellt. Dadurch stehen mal eben 18 verschiedene Darstellungen nur alleine für das Screen-Design zur Verfügung. Wenn man nun mit dem gleichen Verfahren auch noch verschiedene Print- und SSB-Darstellungen erzeugt, hat man wirklich schnelle und effektive Fließbandarbeit.

HTML-Datei
Screen-Datei
Layout-Datei
Color-Datei
Typographie-Datei
komplettes Set

Ähnliche Beiträge
CSS 3-Unterstützung der Browser
flexible Layouts mit CSS
Beschriftung von Containern
Designer vergessen die Gestaltung
flexibles CSS Layout


Icons helfen bei der Orientierung
Enrico Reinsdorf — Thu, 06 Dec 2007 23:00:01 +0000
Die Zeiten in denen sich Verlinkungen einfach nur unterstrichen präsentierten ist schon längst vorbei. Das Kennzeichnen der unterschiedlichsten Arten von Verlinkungen gibt es schon eine ganze Weile. Spätesten seit der Einführung der Attribut-Selektoren in CSS 2.1 stand der Verwendung von Icons für spezielle Verlinkungen nichts mehr im Wege.
Ja, ja, ich weiß das die nicht alle Browser dieses Feature unterstützen. Besonders der heutzutage noch oft verwendete Internet Explorer 6 macht dem Ganzen einen großen Strich durch die Rechnung. Aber warum müssen deswegen die Benutzer von neueren Browsern darauf verzichten? OK Schluss mit mit dem leidigen Thema der verschiedenen Browser-Versionen. Auf zu der Formatierung von schönen, manchmal auch bunten Verlinkung.


a[href$=".pdf"], 
a[href$=".txt"], 
a[href$=".zip"], 
a[href$=".mp3"], a[href$=".wma"], 
a[href$=".mpg"], a[href$=".mpeg"],a[href$=".wmv"], 
a[href$=".swf"], 
a[href$=".xls"], a[href$="ods"], 
a[href$=".doc"], a[href$="odt"], 
a[href*="rss2"], a[href*="rss"], a[href*="feed"], 
a[href|="mailto:"], a[href|="skype:"], a[href|="msnim:"], 
{ 
padding-bottom:2px; 
padding-left:22px; 
padding-top:2px; 
background:transparent; 
}

Als erstes habe ich nur alle relevanten Links mit einem Innenabstand versehen und die Hintergrundfarbe auf transparent gestellt. Dabei bedeutet der Selektor mit dem Dollarzeichen ($) z.B. das alle Links die im href-Attribut mit dem angegebenen Wert enden formatiert werden. Bei der Schreibweise mit dem Stern (*) sucht man irgend ein Vorkommen des Wertes und die Kombination mit dem Pipe (|) selektiert nur Links die mit den Wert beginnen.

a[href$=".pdf"] 
{ 
background: url(images/acrobat.png) no-repeat scroll left center; 
} 
a[href$=".txt"] 
{ 
background: url(images/text.png) no-repeat scroll left center; 
} 
a[href$=".zip"] 
{ 
background: url(images/archive.png) no-repeat scroll left center; 
} 
a[href$=".mp3"], a[href$=".wma"] 
{ 
background: url(images/audio.png) no-repeat scroll left center; 
} 
a[href$=".mpg"], a[href$=".mpeg"], a[href$=".wmv"] 
{ 
background: url(images/video.png) no-repeat scroll left center; 
} 
a[href$=".swf"] 
{ 
background: url(images/flash.png) no-repeat scroll left center; 
} 
a[href$=".xls"], a[href$=".ods"] 
{ 
background: url(images/table.png) no-repeat scroll left center; 
} 
a[href$=".doc"], a[href$=".rtf"], a[href$=".odt"] 
{ 
background: url(images/document.png) no-repeat scroll left center; 
} 
a[href*="feed"], a[href*="rss"] 
{ 
background: url(images/feed.png) no-repeat scroll left center; 
} 
a[href|="mailto:"] 
{ 
background: url(images/mail.png) no-repeat scroll left center; 
} 
a[href|="skype:"] 
{ 
background: url(images/skype.png) no-repeat scroll left center; 
} 
a[href|="msnim:"] 
{ 
background: url(images/messenger.png) no-repeat scroll left center; 
}

Danach definiere ich für jede Verlinkungsart ein Hintergrundbild, welche sind nicht wiederholt, die Ausrichtung links mittig ist und nicht mitscrollt. Fertig ist die schöne, bunte Linkwelt. Und das super Gute daran ist, dass Browser die diese Art der Selektierung nicht kennen einfach ihren gewohnten Standard zeigen und alle zufrieden sind.
Zum Schluss hier nochmals die Dateien zum Download:

CSS-Datei
Icons als Zip-Datei

Ähnliche Beiträge
CSS 3-Unterstützung der Browser
Suchmaschinenoptimierung (SEO)
Dreamweaver-Schulung für den Solar Verlag
Transcending CSS
Little Boxes


flexible Layouts mit CSS
Enrico Reinsdorf — Mon, 03 Dec 2007 23:00:30 +0000
Websites sollten sich immer dem Benutzer anpassen, so zumindest steht es in vielen Dokumentationen über Benutzerfreundlichkeiten. Aber was ist damit eigentlich gemeint? Welche Anpassung braucht der Benutzer bzw. will er überhaupt haben? Welche ist die Richtige?
Die einfachste Lösung ein Layout für die Website zu erstellen ist mit festen Größenangaben zu arbeiten. Sie ist aber auch am Unflexibelsten, denn das Layout kann sich dann nicht den Bedürfnissen des Betrachters anpassen. Viele heutige Design haben als Maßeinheit für ihr Layout Pixel. Der große Vorteil liegt in der genauen Platzierung von Elementen, wie z.B. Spalten oder aber auch Designelemente wie Hintergrundbilder. Der große Nachteil liegt aber auch gerade in diesen festen Größenangaben. Und hier setzen die flexiblen Design an.

Probleme mit Pixeln und Prozenten
Eine gute Möglichkeit ein flexibles Layout zu entwerfen und trotzdem gewisse Gestaltungsproportionen einhalten zu können besteht darin, die Maßeinheiten EM zu nutzen. Ein EM ist die einfache Größe eine Großbuchstabens. Die Maßeinheit Pixel hat den klaren Nachteil, des eine Spalte die mit 200 Pixel definiert ist immer 200 Pixel breit ist, egal ob der Betrachter seine Schrift vergrößert, weil er einen großen Monitor benutzt oder verkleinert. Nun könnte man aber die Spaltenbreite in Prozent angeben. Auch hier entsteht das gleiche Problem wie bei den Pixeln. Die Spalte bleibt immer z.B. 20% von der gesamten Browserbreite breit, auch wenn man die Schrift vergrößert oder verkleinert. Der Vorteil gegenüber dem Pixel-Layout liegt in der flexiblen Anpassung an die verschiedenen Monitorgrößen. 20% bei einer Auflösung von 1024 * 768 ist deutlich breiter als bei einer Auflösung von 800 * 600.
Layout mit EM
Mein Ansatz ist es nun zwar eine feste Breite wie bei der Pixelangabe zu benutzen, aber diese Breite richtet sich immer nach der Schriftgröße. Wenn also ein Betrachter bei seiner Monitorauflösung von 1280*800 die Darstellung einer Website als zu klein empfindet, dann kann es durch eine schnelle Anpassung der Schriftgröße dieses wunderbar korrigieren. Umgekehrt geht dieses natürlich auch. Ist die Website für 1024*768 optimiert und ein Betrachter besitzt nur 800*600. Dann kann er schnell und meist auch sehr einfach die Schriftgröße seines Browsers ändern und alles ist wieder bestens. In den meisten Browser kann man durch betätigen der Plus- bzw. Minustaste mit gleichzeitigen drücken der STRG-Taste die Schrift des Browsers anpassen.
Wie könnte nun z.B. ein solches 3-spaltiges Layout aussehen?
Als erstes möchte ich die Grundstruktur der HTML-Seite erklären. Dazu erstmal das DOM der Seite
body
 +div#page
   +div#header
   | +div#head
   | +div#bar
   +div#body
   | +div#main
   | | +div#content
   | | +div#left
   | +div#right
   +div#footer
Bei der Identifizierung der einzelnen Container habe ich auf Eindeutigkeit geachtet. Es sollte hoffentlich klar werden was wofür ist. Um eine schnell umsetzbare 3-Spaltigkeit zu bekommen, habe ich die linke Spalte und den eigentlichen Inhalts-Container zusammengefasst. Somit habe ich auch erreicht, dass der Inhalt noch vor den restlichen Spalten im Quelltext steht, was wiederum Suchmaschinen als angenehm empfinden, da das wichtige am Anfang steht.
Das CSS-Grundgerüst

* {margin:0;padding:0;}
body {
font:14px/130% "Lucida Grande", "Lucida Sans Unicode", Sans-Serif;
background-color:#666;
color:#fff;
text-align:center;
}

Hier ist nichts weiter überraschendes dabei. Erwähnen möchte ich nur, dass die gesamte Seite in der horizontalen Mitte ausgerichtet ist. Weswegen ich die Eigenschaft text-align auf center gesetzt habe.

#page {
width:68em;
margin:0 auto;
text-align:left;
background-color:#fff;
color:#000;
}

Die Gesamtbreite der Seite entspricht hier also 68 Großbuchstaben. Das entspricht ungefähr 120 Zeichen. Um die Seite auch mittig zu platzieren wurde der linke und rechte Außenabstand der Wert auto zugewiesen. Zusätzlich wurde der Text wieder linksbündig ausgerichtet.

#header {
background:#333;
color:#fff;
height:8em;
}
#body {
clear:both;
}
#footer {
clear:both;
background:#333;
color:#fff;
height:3em;
}

Auch die Container head, body und footer enthalten nichts überraschendes. Nur das der body- und der footer-Container mit der Eigenschaft clear und den Wert both für das Aufheben der float-Eigenschaft der vorhergehenden Container zuständig sind.

#main {
float:left;
width:52em;
}
#left {
float:left;
width:15em;
}
#content {
float:right;
width:45em;
}
#right {
float:right;
width:15em;
}

Nun formatiert man den mittleren Teil. Als erstes wird dieser in 2 Teile getrennt. Der Main-Container wird nach links gelegt und der Right-Container dementsprechend nach rechts. Zusammen ergibt sich eine Breite die gleich ist mit der Gesamtbreite des Page-Containers. Innerhalb des Main-Containers wird wiederum der Platz in 2 Spalten aufgeteilt, so dass diese Gesamtbreite der Breite des Main-Containers entspricht.
Zum Schluss die komplette CSS-Formatierung:

* {margin:0;padding:0;}
body {
font:14px/130% "Lucida Grande", "Lucida Sans Unicode", Sans-Serif;
background-color:#666;
color:#fff;
text-align:center;
}
#page {
width:68em;
margin:0 auto;
text-align:left;
background-color:#fff;
color:#000;
}
#header {
background:#333;
color:#fff;
height:8em;
}
#body {
clear:both;
}
#footer {
clear:both;
background:#333;
color:#fff;
height:3em;
}
#main {
float:left;
width:52em;
}
#left {
float:left;
width:15em;
}
#content {
float:right;
width:45em;
}
#right {
float:right;
width:15em;
}

und die Downloads der Dateien:

HTML-Datei
CSS-Datei
komplettes Set

Ähnliche Beiträge
flexibles CSS Layout
CSS 3-Unterstützung der Browser
CSS Layouts am Fließband
Beschriftung von Containern
Dreamweaver-Schulung für den Solar Verlag


Beschriftung von Containern
Enrico Reinsdorf — Sun, 02 Dec 2007 23:00:04 +0000
Fast jeder kennt wohl das Problem nichts mehr zu finden wenn es nicht richtig beschriftet wurde. Auch ich suche immer wieder nach den verschiedensten Dinge und das nicht nur im Web oder auf meinen Schreibtisch, sondern auch im gesamten Büro. Aber darum soll es in diesem Artikel nicht gehen. Viel mehr möchte ich mal kurz meine Gedanken über die sinnvolle Benennung von Containern beim Layouten los werden.
Eine sinnvolle und immer wiederkehrende Beschriftung von Container man natürlich nicht nur beim Arbeiten in einem Team, sondern bringt auch für einen selbst mehr Sicherheit. Dabei sollte immer darauf geachtet werden den HTML-Code nicht unnötig aufzublähen. Gerade im mobilen Web sind kline Datenmengen Gold wert.

Welche Komponenten können bei einem Weblayout vorkommen?
Da wäre wohl als erstes der Kopfbereich einer Website zu nennen. Dann gibt es auf jeden Fall noch die Navigationen, natürlich den eigentlichen Inhalt und als Abschluss benutzen viel Designer einen Fußbereich. Jeder von diesen Bereichen besitzt dann natürlich noch Unterbereiche.
Doch bevor ich die einzelnen Bereiche definiere, lege ich einen 
-Container mit einem id-Attribute an, um die gesamte Markup besser koordinieren zu können.
Kopfbereich
Fangen wir mal mit dem Kopfbereich an. Hier sollte die allgemeinen, aber wichtigsten Information bezüglich der Website stehen. Das wäre dann wohl der Website-Titel und die Tagline. Diese kennzeichne ich immer mit den 
- und -Tags, um ihre Wichtigkeit zu verdeutlichen. Die Tagline, also der Untertitel der Website hat in den meisten Fällen irgendetwas mit einer Aussage zu tun, weswegen ich dafür oft den -Tag benutze. Auch könnte hier schon eine erste Aufzählung der Bereiche der Website aufgelistet werden. Meist werden diese Bereiche auch noch mit verlinkt. Über den Kopfbereich bekommt die einzelne HTML-Seite seine Markierung zu welcher Website sie gehört. Man nennt das auch das Branding.
Navigationen
Auf einer HTML-Seite gibt es verschiedene Navigationen, weshalb ich sie immer mit einem class-Attribute zusammenfasse. Trotzdem hat jede Navigation ihre eigene Semantik und deshalb erweitere ich jede Navigation mit einem id-Attribute. Doch welche Tags benutze ich bei den verschiedene Navigationen? Das kommt ganz auf ihren Inhalt an.
Um bei einer Sprachsteuerung bzw. einem PDA-Design schnell an die richtigen Stellen zu springen beginnt bei mir jeder -Tag mit einer Skip-Navigation hier verwende ich oft eine unsortierte List, da ja auch der Inhalt der Liste keiner bestimmten Sortierung folgt.
Auch die Servicenavigation, wo es die Möglichkeit gibt schnell zur Kontaktseite, zum Impressum bzw. zum Inhaltsverzeichnis zu springen, folgt keiner bestimmten Reihenfolge, weswegen ich auch da einen 
-Tag bevorzuge.
In der Pfadnavigation wird symbolisch der Weg nach oben zur Homepage definiert. Um die Verschachtelung auch semantisch richtig zu definieren reicht eine unsortierte, in sich verschachtelte Liste mit immer nur einem Eintrag pro Ebene.
Die Bereichsnavigation hat natürlich immer ein bestimmte Reihenfolge, auch wenn der Benutzer nicht unbedingt diese befolgen muss. Deshalb kann es nur eine sortierte Liste sein.
Auch sollte am Ende eines jeden Inhaltes die Verweise in einer Liste nochmals zusammengefasst werden. Hier kann man wunderbar das Auftauchen im Text als Sortierung der Fußnoten in einer sortierten Liste mit einem 
-Tag nutzen.
Alle weiteren Navigationen, wie z.B. die Sprachauswahl, sind dann fast immer unsortiert und somit eignet sich der 
-Tag ideal dafür.
Inhalt
Leider würde es den Rahmen des Artikels sprengen, wenn alle möglichen Arten von Inhalten aufzählen würde. Vielleicht werde ich darüber später einen separaten Artikel schreiben. Deshalb an dieser Stelle nur soviel, idealer Weise fasst man diesen Bereich mit einem 
-Container zusammen um gezielt Formatierung nur dort anbringe nur können.
Fußbereich
Im Fußbereich können Kontaktangaben bzw. rechtliche Hinweise oder auch eine weitere Servicenavigation untergebracht werden. Um die unterschiedlichsten Contaner ideal zusammenzufassen lohnt sich wiederum ein 
-Container.
Beispiel




Navigation
Inhalt
Service
Adressangabe und rechlicher Hinweis


Websitetiel
Tagline

Hauptkategorie
Hauptkategorie

Unterkategorie
Unterkategorie


Hauptkategorie

Unterkategorie

Unterkategorie
Unterkategorie


Unterkategorie






Startseite

Hauptkategorie

Unterkategie






Seitentitel
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rhoncus ligula non nisi. Proin mauris ligula, dignissim vitae, aliquet at, luctus eu, nisl. Aliquam eget justo non augue adipiscing pretium. Vestibulum eget lacus eget massa varius viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer mi. Donec et justo id erat pulvinar lobortis. Suspendisse faucibus, risus sed dictum viverra, orci sapien malesuada arcu, pharetra aliquet ligula libero sit amet magna. Sed non neque. Aliquam mi. Cras in tortor. Nunc feugiat. Aliquam dolor pede, tristique et, accumsan id, semper eget, sapien. Proin non metus nec arcu sollicitudin gravida. Vestibulum feugiat tristique velit. Vestibulum tincidunt nisl a nisl. Ut feugiat pede nec tortor.
Suspendisse adipiscing euismod metus. Ut in urna. Sed tortor. Phasellus pellentesque turpis ornare tortor. Praesent ac nunc. In hac habitasse platea dictumst. Ut pulvinar tempor leo. Aenean dignissim, enim vel tristique adipiscing, enim mauris porta nisl, eget faucibus risus massa ac ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque quis nisl non neque ornare vulputate.
Hauptüberschrift
Pellentesque suscipit odio at sapien. Nullam iaculis vehicula augue. Aenean sodales viverra massa. In in leo. Morbi venenatis ullamcorper ipsum. Aliquam lobortis, eros quis pulvinar porta, felis libero sodales enim, sit amet placerat tortor felis nec sem. Integer dapibus ultrices quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis accumsan. Fusce ac ligula.
Unterüberschrift
Phasellus pellentesque massa at turpis. Vestibulum libero orci, fringilla sit amet, tempus sed, imperdiet vitae, nunc. Sed mollis elit at arcu. Proin euismod porttitor urna. Sed vitae tortor. Maecenas et nisi vitae pede tincidunt lacinia. Vestibulum adipiscing pede porttitor diam. Curabitur eleifend justo quis purus. Duis pretium dui sed elit. Cras laoreet lorem a ipsum.
Sed cursus facilisis metus. Vestibulum placerat, eros porta euismod aliquam, lorem velit hendrerit ligula, posuere tempor metus nisl nec arcu. Aliquam quis purus. Sed orci. Donec tincidunt posuere lorem. Aliquam ultricies turpis vitae diam. Maecenas eleifend mi in ante. Mauris commodo lorem quis lacus. Phasellus semper scelerisque nunc. Suspendisse sollicitudin odio in nisi.
weiterführende Links

Fußnote
Fußnote
Fußnote




Kontakt
Impressum
Inhaltsverzeichnis


Adressangabe und rechtlicher Hinweis
nach oben




Download der Dateien

HTML-Datei

Ähnliche Beiträge
Deutendes Design der Inhalte
CSS Layouts am Fließband
flexible Layouts mit CSS
CSS Import macht Probleme
Jahresabonnement des Spotlight Verlag


flexibles CSS Layout
Enrico Reinsdorf — Sun, 11 Nov 2007 16:32:12 +0000
Letzte Woche hatte ich ein Seminar zum Thema CSS und eins über Dreamweaver gehalten. Es waren Teilnehmer sowohl von Roche Diagnostics als auch von Landessport Bund dabei, die mittels CMS die Inhalte ihrer Website betreuen. In diesen Seminaren kam die Frage nach einen flexiblen System zum Erzeugen eines CSS gesteuerten Layouts auf.
Nach ein paar Überlegungen kamen wir dann auf die Teilung des CSS-Designs in 4 Dateien:

basic.css
2column.css
3column.css
content.css

In der Basisdatei werden alle grundlegenden Formatierungen für das Layout, wie z.B. Kopf- und Fußbereich bzw. Navigationsspalte festgelegt. Zusätzlich wird das gesamte Design zentriert und auf eine festen Breite eingestellt. Wobei die feste Breite nicht zwingend mit Pixeln zu lösen sein muss, denn in CSS können z.B. Breitenangaben auch in Em angegeben werden.

In der Inhaltsdatei werden dann alle restlichen für die Darstellung wichtigen Formatierungen, wie z.B. Absätze Listen und Tabellen, definiert. Zusätzlich können dort auch Ausrichtungen von Bilden angegeben werden.
Falls man nun aber einige Unterseiten brauchen sollte, die ein 2 spaltigen Layout benötigen, dann bindet man einfach, zusätzlich zu den beiden Grunddateinen, die 2-Spaltige mit ein. In der HTML-Datei gruppiert man nun noch über 2 DIV-Container die Inhalte in die jeweiligen Spalten.

Gleiches gilt auch für ein 3 spaltiges Layout. Hier gibt es auch eine zusätzliche CSS-Datei und auch hier muss man den jeweiligen Inhalt in die 3 Spalten aufteilen.

Ähnliche Beiträge
Dreamweaver-Schulung für den Solar Verlag
flexible Layouts mit CSS
CSS">Dreamweaver und CSS
CSS-Seminar bei VVA
CSS 3-Unterstützung der Browser


Neue Kontakte
Enrico Reinsdorf — Thu, 11 Jan 2007 01:07:51 +0000
Heute war ich in Köln um meine alten Kontakt zu erneuern. Wie ich von Thorsten  erfahren habe, gibt es einen kleinen Auftrag für eine Installation eines Joomla!-Systems und die dazu passenden Anpassungen. Auch soll in dieses System ein Shop integriert werden, welches gerade im sicherheitstechnischen Bereich eine knifflige Aufgabe wird. Aber nicht nur diese Herausforderung wird spannen, sondern auch die Einbindung eine Videos welches auf YouTube gehostet wird. Im schlimmsten Fall würde ich ein neues Modul für Joomla!  schreiben. Aber vielleicht finde ich ja auch noch was passendes. Ich werde euch auf jeden Fall auf dem Laufenden halten.
Zusätzlich habe ich kurz mit Schorsch  gesprochen, der mit cakePHP  und JQuery  eine sehr vielversprechende Rechnungssoftware schreibt. Wir werden und nächste Woche nochmals treffen, um mich auf den neusten Stand der Entwicklung zu bringen. Auch dieses Projekt stelle ich mir absolut spannend vor, da ich sehr selten die Möglichkeit gehabt habe, frei eine Webapplication zu schreiben.
Ähnliche Beiträge
Joomla!-Schulung
individuelle Joomla!-Schulung
Dozent an der Macromedia Fachhochschule
Joomla 1.5 ist da
Toolbar-Programmierung bei Joomla