Ich musste gerade für meinen Chef ein Coverflow für eine Messe anpassen. Das Problem: Es sollte sich automatisch bewegen. Dieses Coverflow tat das natürlich nicht! Also fix ein Timeout geschrieben, welches mir die “weiter”-Funktion alle x Sekunden aufruft!

import flash.events.TimerEvent;
import flash.utils.Timer;
 
var myTimer:Timer = new Timer(5000); //Timer-Klasse, alle 5 Sekunden
myTimer.addEventListener(TimerEvent.TIMER, myFunction); //Welche Funktion soll alle x Sekunden aufgerufen werden?
myTimer.start(); //Den Timer starten

Version 1.1.1 des Punkt . 16 PHP Kalender!

Mit der neuen Version des Kalenders, erweitert sich der Funktionsumfang um Feiertage & Ferien.

Als Beispiel fügen wir Silvester dieses Jahres hinzu. Da Silvester jedes Jahr statt findet, verwenden wir für die Jahreszahl ein Sternchen ( * ). Diese Sternchen könnt ihr Nutzen wie Ihr möchtet, d.h. auch für Tage und Monate.

$kalender->addHoliday('Silvester', '31.12.*');

Oder habt Ihr vllt an jedem 5. Tag im Monat ein Fest?

$kalender->addHoliday('Monats-Party', '05.*.*');

Schon gewusst?
Ihr könnt noch zwei Paramter bei “addHoliday” übergeben:
Eine URL, welche beim Klick auf den Eintrag auf eine Seite weiterleitet
Eine CSS-Klasse, welche dieser Tag bekommen soll!

So könnt Ihr z.B. Weihnachten (welches schon fest hinterlegt ist ) schön hinterlegen

$kalender->addHoliday('Weihnachten', '24.12.*',
'http://deineseite.de/weihnachten.html', 'weihnachten');

Der 24.12. wird zu http://deineseite.de/weihnachten.html verlinkt und bekommt die Klasse “weihnachten”, welche diesen Tag vielleicht rot hinterlegt?

Möchtet Ihr einen eingetragenen Feiertag wieder löschen, wie zum Beispiel “Heilige drei Könige” (fest Eingetragen), verwendet Ihr folgende Funktion:

$kalender->removeHoliday('06.1.*');

So werden genau die Feiertage ausgetragen, welche am 06.1.* stattfinden.

Weiter habt ihr die Möglichkeit, ganze Ferien einzutragen:

$kalender->addVacation('26.12.2009', '29.12.2009', 'Testferien');

Das erste Datum ist der Beginn, das zweite Datum das Ende (wird markiert). Der Dritte Parameter “Testferien” ist der Name dieser Ferien.
Hier könnt Ihr auch, wie oben, zwei weitere Parameter anhängen, welche eine URL und eine CSS-Klasse behinhalten.

Ferien könnt ihr löschen, in dem Ihr beim Funktionsaufruf von removeVacation den Namen dieser Ferien übergebt:

$kalender->removeVacation('Testferien');

Ein kompletter Code könnt nun so aussehen:

$deutscheDaten=array('daysLong'=>array('Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'),'daysShort'=>array('Mo','Di','Mi','Do','Fr','Sa','So',),'monthsLong'=>array('Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'),'monthsShort'=>array('Jan','Feb','März','Apr','Mai','Juni','Juli','Aug','Sep','Okt','Nov','Dez'));
 
$kalender= new Punkt16_Calendar($deutscheDaten);
$kalender->addHoliday('Silvester', '31.12.*');
$kalender->addHoliday('Monats-Party', '05.*.*');
$kalender->removeHoliday('06.1.*');
$kalender->addVacation('26.12.2009', '29.12.2009', 'Testferien');
$kalender->removeVacation('Testferien');
 
echo $kalender->getCalendar();

Ein Beispiel mit den neuen Funktionen könnt ihr euch hier ansehen: http://examples.punkt16.de/PHP/Kalender1.1.1/
Die benötigten Dateien könnt Ihr euch hier downloaden!

Ein Backlink zu www.punkt16.de ist erwünscht, aber nicht Pflicht!

Ein PHP-basierender Kalender, welcher den aktuellen Tag markiert.

Heute gibt es ein Skript für einen PHP-basierenden Kalender! Das Skript selbst erkläre ich nicht, da es den Rahmen mehr als sprengen würde. Allerdings erkläre ich euch, wie einfach es Anzuwenden ist! Die PHP-Klasse, welche ihr benötigt, könnt ihr euch hier downloaden.

Als ersters solltet Ihr das Skript includen:

include('calendar.class.php');

Nun müsst Ihr ein neues Objekt instanzieren. Das heisst nichts anderes, als den Kalender aufzurufen und in einer Variable fest zu halten.

$kalender = new Punkt16_Calendar();

Jetzt noch die Funktion getCalendar aufrufen, und mit echo ausgeben:

echo $kalender->getCalendar();

Der komplette Code für den Standard-Kalender sieht wie folgt aus:

include('calendar.class.php');
$kalender = new Punkt16_Calendar();
echo $kalender->getCalendar();

Ihr habt nun aber englische Monats- und Tagesnamen. Um diese zu ändern, müsst Ihr beim instanzieren des Objekts ein Array mit den deutschen Namen übergeben.
Euer Array sieht so aus:

$deutscheDaten = array(
					   'daysLong' => array(
										   		'Montag',
												'Dienstag',
												'Mittwoch',
												'Donnerstag',
												'Freitag',
												'Samstag',
												'Sonntag'
										   ),
 
					   'daysShort' => array(
												'Mo',
												'Di',
												'Mi',
												'Do',
												'Fr',
												'Sa',
												'So',
											),
 
					   'monthsLong' => array(
											 	'Januar',
												'Februar',
												'März',
												'April',
												'Mai',
												'Juni',
												'Juli',
												'August',
												'September',
												'Oktober',
												'November',
												'Dezember'
											 ),
 
					   'monthsShort' => array(
											  	'Jan',
												'Feb',
												'März',
												'Apr',
												'Mai',
												'Juni',
												'Juli',
												'Aug',
												'Sep',
												'Okt',
												'Nov',
												'Dez'
											  )
					   );

Falls Ihr euren Code nicht so aufblähen möchtet, hier die kurze Fassung:

$deutscheDaten=array('daysLong'=>array('Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'),'daysShort'=>array('Mo','Di','Mi','Do','Fr','Sa','So',),'monthsLong'=>array('Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'),'monthsShort'=>array('Jan','Feb','März','Apr','Mai','Juni','Juli','Aug','Sep','Okt','Nov','Dez'));

Übergebt nun dem Objekt diese Daten:

$kalender = new Punkt16_Calendar($deutscheDaten);

Kompletter Code:

include('calendar.class.php');
$deutscheDaten=array('daysLong'=>array('Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'),'daysShort'=>array('Mo','Di','Mi','Do','Fr','Sa','So',),'monthsLong'=>array('Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'),'monthsShort'=>array('Jan','Feb','März','Apr','Mai','Juni','Juli','Aug','Sep','Okt','Nov','Dez'));
$kalender = new Punkt16_Calendar($deutscheDaten);
echo $kalender->getCalendar();

Eure Ausgabe sieht wohl noch etwas sehr weiss aus. Deswegen benötigt Ihr noch eine passende CSS, welche dem Download oben beiliegt:

table.calendar { width:210px; border:1px solid #a6c9e2; margin:50px auto auto;}
table.calendar table.title { width:100%; height:30px; broder:1px solid #c5dbec; background:#5c9ccc; text-align:center;}
table.calendar table.title td.monthBackwardA { width:30px; color:#fff; }
table.calendar table.title td.monthBackwardA a { font-size:18px; color:#fff; width:30px; height:30px; line-height:30px; display:block; text-decoration:none; }
table.calendar table.title td.monthYear { font-size:14px; line-height:30px; color:#fff;}
table.calendar table.title td.monthForwardA { width:30px; color:#fff;}
table.calendar table.title td.monthForwardA a { font-size:18px; color:#fff; width:30px; height:30px; line-height:30px; display:block; text-decoration:none;}
table.calendar td.dayName { text-align:center; font-weight:bold; }
table.calendar td.dayA { border:1px solid #c5dbec; background:#dfeffc; color:#2e6e9e; text-align:center;}
table.calendar td.dayA.dayTodayA { border:1px solid #fad42e; background:#fbec88; color:#363636;}
table.calendar td.dayA.dayOther { border:1px solid #e6f4ff; background:#f6fbff; color:#98d3ff; }

Ein Beispiel mit deutschen Namen könnt ihr euch hier ansehen: http://examples.punkt16.de/PHP/Kalender/

Ein Backlink zu www.punkt16.de ist erwünscht, aber nicht Pflicht!

Ein Layout mit DIVs anstatt Tabellen und iFrames?
Kein Problem! Mit diesem Tutorial und einer passenden Vorlage lernt ihr ganz schnell wie das geht.

Du möchtest also ein DIV Layout erstellen? Also gut, ich werde dir zeigen wie man eines Macht.
Zu nächsteinmal werde ich dir erklären was ein DIV ist und welche Vorteile ein DIV-Layout gegenüber ein Table-Layout’s hat.
Ich werde dann Schritt für Schritt erklären wie ich genau diese Webseite hier erstellt habe (übrigens, ich habe hierfür nur 20 Minuten gebraucht!)

Achtung!
Dieses Tutorial bezieht sich auf folgende Vorlage:
http://takeyo.de/div.html

Wieso DIVs?

Diese Frage musste ich mir am Anfang auch stellen, da ich dachte, dass man mit Tabellen viel besser Layouts aufbauen kann. Tatsächlich denken viele Leute so, doch Tabellen sind nicht für Layoutstrukturierungen gedacht. DIVs sind viel flexibler und man kann leicht ihre Größe ändern oder sie mit Javascript hin und herschieben.
Es wird am Anfang bestimmt schwer von Tabellen und iFrames loszulassen, aber mit DIVs bist du echt im Trend

Das DIV Objekt

Ein Div ist eine Art Box. Quadratisch, praktisch, gut! Ein Div wird in HTML so geschrieben:

<div>Inhalt</div>

Zunächst geben wir dem DIV eine ID oder eine Klasse.
ID: Eine ID ist ein einmaliges Objekt im Dokument. Man kann nicht mehrere Objekte mit der gleichen ID besetzen.
Klasse: Eine Klasse (Class) kann für unendlich viele Objekte im Dokument benutzt werden. Es gibt kein Limit.

Wir besetzen unser DIV also mit der ID “box”:

// Beispiel für eine ID
<div id="box"></div>
 
// Beispiel für eine Klasse
<div class="box"></div>

Bis jetzt hat sich aber noch nichts getan.
Nun müssen wir die ID in dem Stylesheet Bereich mit Eigenschaften belegen. Der Stylesheet Bereich kommt in den Head Bereich des Dokuments. Das ganze sollte dann so aussehen:

<head>
<style type="text/css">
 
// Beispiel für eine ID
#box { width: 50px; height: 50px; background-color: red; }
 
// Beispiel für eine Klasse
.box { width: 50px; height: 50px; background-color: red; }
 
</style>
</head>

Unser DIV sollte nun als roter quadratischer Kasten angezeigt werden.

Jeder mit Mensch mit Englischkenntnissen versteht was hier passiert ist.
Ich habe dem DIV folgende Eigenschaften Zugeteilt:

• width: 50px; ← bedeutet, dass das DIV 50px breit ist.
• height: 50px; ← bedeutet, dass das DIV 50px hoch ist.
• background-color: red; ← bedeutet, dass das DIV eine rote Hintergrundfarbe hat.

Man kann ein DIV natürlich noch mit vielen weiteren Eigenschaften bearbeiten.
Nun, du solltest nun wissen was ein DIV ist und wie man es mit Eigenschaften sichtbar macht.

Ein Layout erstellen – Schritt 1

So, nun da du ungefähr weißt was DIVs sind können wir Anfang diese Webseite hier nachzubauen.
Dieses Layout besitzt einen Header, eine Navigation und einen Content.
Wir müssen nun diese 3 Bereiche als DIVs scheiben:

<divid="header">Meine Homepage</div>
<divid="navi">Inhalt</div>
<divid="content">Inhalt</div>

Unglaublich aber war, mehr brauch man nicht für ein DIV Layout.
Nun müssen wir aber diese 3 DIVs natürlich noch in unserem Stylesheet Bereich bearbeiten. Doch bevor das passiert müssen wir erst etwas anderes bearbeiten. Und zwar den Body Tag. Der Body Tag schließt alles sichtbare auf der Webseite ein. Ich habe unsere Seite mal mit folgenden Eigenschaften belegt:

body {
width: 800px;/* Breite des Layouts */
margin-left: auto;/* Der Wert "auto" platzieren das Layout mittig. Vorraussetzung: width. */
margin-right: auto;
background-color: #5d5d5d;/* Hintergrundfarbe */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;/* Schriftart */
font-size: 12px;/* Schriftgröße */
}

Ich habe die einzelnen Eigenschaften mit Kommentaren versehen um ihre Auswirkungen zu beschreiben.
Nun kommt der Header:

#header {
height: 80px;/* Höhe des Headers */
max-width: 800px;/* Max. Breite, damit der Header das Layout nicht sprengt. */
background-color: #fff;/* Hintergrundfarbe */
text-align: center;/* Text wird mittig ("center") platziert. */
padding-top: 50px;/* 20px innerer Abstand vom Rand zum Text */
font-size: 24px;/* Schriftgröße soll 24px betragen. */
font-weight: bold;/* Schrift soll FETT erscheinen */
}

Nun sollte die Seite aus einem grauen Hintergrund und unserem Header bestehen.
Machen wir also weiter mit den anderen DIVs um das Layout zu vervollständigen. Hier kommt die Navigation:

#navi {
float: left;/* Div wird nach links ("left") ausgerichtet. */
width: 120px;/* Breite der Navigation */
background-color: #fff;/* Hintergrundfarbe */
padding: 3px;/* 3px innerer Abstand vom Rand zum Text */
}

Hier kommt jetzt die Eigenschaft “float” ins Spiel, welche sehr wichtig ist. Denn DIV’s haben die Angewohnheit sich untereinander zu Positionieren. Doch wenn wir alle DIVs untereinander machen würden, hätten wir keine Seitennavigation mehr. Also, “float” setzt das DIV in die angegebene Position, sodass das folgende DIV anstatt darunter, daneben gesetzt wird. Allerdings muss dieses nachfolgende DIV die gleiche Eigenschaft besitzen, so wie ich es hier beim Content gemacht habe:

#content {
float: left;/* Div wird nach links ("left") ausgerichtet. */
width: 668px;/* Breite des Contents */
background-color: #fff;/* Hintergrundfarbe */
padding: 3px;/* 3px innerer Abstand vom Rand zum Text */
}

So, nun solltest du schon eine Ähnlichkeit zu diesem Layout hier und dem, welches du gemacht hast erkennen.
Allerdings fehlt jetzt noch der Inhalt des Contents und der Navigation, also auf zu Schritt 2!

Ein Layout erstellen – Schritt 2

So, das Grundgerüst steht. Nun kümmern wir uns um den Inhalt. Angefangen im Content. Wir machen nun eine Überschrift, ebenfalls als DIV.
Wir schreiben also nun in das Content DIV folgendes:

<div class="titel">Titel</div>

Dieses DIV unterscheidet sich ein wenig von den anderen. Es hat anstatt einer ID eine Klasse. Wieso? Weil wir davon ausgehen, dass diese Titel mehrmals in einem Dokument vorkommen werden. Nun müssen wir es auch dementsprechend in dem Stylesheet Bereich bearbeiten:

</span>
.titel {
width:100%;<em>/* Breite des DIVs ("100%" = automatische max. Breite) */</em>
height: 17px;<em>/* Höhe des DIVs */</em>
background-color: #069;<em>/* Hintergrundfarbe */</em>
color: #fff;<em>/* Schriftfarbe */</em>
text-align: center;<em>/* Textausrichtung ("center" = mittig)*/</em>
padding-top: 3px;<em>/* 3px innerer Abstand zum Rand */</em>
margin-bottom: 10px;<em>/* 10px äußerer Abstand zum Rand */</em>
}

Diesen DIV kannst du immer dann einsetzen, wenn du einen neuen Titel brauchst.
Nun kommen wir zu der Navigation, hier kommen etwas mehr Eigenschaften auf uns zu.
Als erstes füllen wir unsere Navigation mit einem Titel und ein paar Links. Das kann dann so aussehen:

<div id="navi">
<div class="titel">Navigation</div>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>

So und nun kommen wir zu dem Stylesheet Bereich. Die Links in dem Navi DIV werden so angesprochen:

#navi a {
color: black;/* Schriftfarbe */
text-decoration: none;/* Link wird nicht unterstrichen */
display: block;/* Setzt alle Links untereinander */
background-color: #DDD;/* Hintergrundfarbe */
max-width: 116px;/* Breite des Links */
margin-bottom: 3px;/* 3px äußerer Abstand zum Rand */
padding: 3px;/* 3px innerer Abstand zum Rand */
}

Nun sollten die Links in der Navigation aussehen wie in diesem Layout hier.
Doch wir müssen noch zwei kleine extras zu den Links einbauen.
Extra nr.1 ist ein “Hover”-Effekt, der erscheint, wenn man mit der Maus über einen Link fährt.
Und das machen wir so im Stylesheet Bereich:

#navi a:hover {
background-color: #CCC;/* Hintergrundfarbe */
color: #fff;/* Schriftfarbe */
}

So und jetzt noch als letztes eine Einstellung, die bereits besuchte Links nicht Lila verfärbt:

#navi a:visited {
color: black;/* Schriftfarbe */
}

So, nun ist alles Fertig!!

Du hast nun ein komplettes Layout aus DIVs erstellt und kannst es jetzt noch weiter bearbeiten.
Wenn du sehen willst, wie ich die DIVs mit dem HTML Code gemacht habe oder den Footer am unteren Rand, schau einfach im Quelltext.

Du kannst dieses Layout weiterhin verwenden wenn du magst.

Liebe Grüße Take!

Gestern hatte ich das Problem, dass json_encode alle Strings mit einem Umlaut einfach gelöscht hatte. utf8_encode brachte auch nichts. Deswegen schnell eine eigene jsonEncode();-Funktion geschrieben!

Diese Funktion ersetzt die json_encode-Funktion komplett. Selbst mehrdimensionale Arrays sind kein Problem, da die Funktion rekursiv programmiert ist.

function jsonEncode($array)
{
	$zaehler = 1;
	$ret = '{';
 
	foreach($array as $key => $val)
	{
		$ret .= '"' . $key . '":';
 
		if(is_string($val))
		{	
			if(empty($val))
			{
				$ret .= 'null';	
			}
			else
			{
				$val_e = str_replace('"', '\"', $val);
				$val_e = str_replace('/', '/', $val_e);
 
				$ret .= '"' . $val_e . '"';	
			}
		}
		elseif(is_bool($val))
		{
			if($val == true)
			{
				$ret .= 'true';	
			}
			elseif($val == false)
			{
				$ret .= 'false';	
			}
		}
		elseif(is_array($val))
		{
			$ret .= jsonEncode($val);	
		}
		elseif(is_null($val))
		{
			$ret .= 'null';
		}
 
		if($zaehler < count($array))
		{
			$ret .= ',';
		}
 
		$zaehler++;
	}
 
	$ret .= '}';
 
	return $ret;
}

Heute gibt es einen kleinen Code-Snippet, welcher einen zufällig generierten Code zurückgibt.

Die Funktion:

function getRandomString($types = array('lowtypes', 'bigtypes', 'nummerics'), $fix = false, $max = 20, $min = 1)
{
	$strings = "";
	$output = "";
 
	foreach($types as $type)
	{
		switch($type)
		{
			case 'lowtypes':
					$strings .= 'abcdefghijklmnopqrstuvwxyz';
				break;
 
			case 'bigtypes':
					$strings .= 'ABCDEFGHJIKLMNOPQRSTUVWXYZ';
				break;
 
			case 'nummerics':
					$strings .= '0123456789';
				break;
		}
	}
 
	$letters = (!$fix) ? rand($min, $max) : $max;
 
	for($i = 0; $i < $letters; $i++)
	{
		$output .= $strings[rand(0, strlen($strings) - 1)];
	}
 
	return $output;
}

Funktionsaufruf:

//große & kleine Buchstaben + Zahlen, beliebige Größe, min 10 Zeichen, max 20 Zeichen
echo getRandomString(array('lowtypes', 'bigtypes', 'nummerics'), false, 20, 10);
 
//große Buchstaben + Zahlen, Fixe Größe von 15 Zeichen
echo getRandomString(array('bigtypes', 'nummerics'), true, 15);