Website besuchen

Download

Als Download werden 3 jKit Varianten angeboten, eine komplett Version, die quasi alle Anwendungen in sich vereint. Daneben gibt es eine Autoload Version, welche sich die benötigten Komponenten automatisch lädt, wenn sie benötigt werden und es gibt die Möglichkeit sich einen Custom Download mit den Wunschkomponenten zusammenzustellen. Ich verwende die Vollversion, da sie meiner Meinung nach mit 64kb als minified Datei alltagstauglich ist. Wers kleiner mag, kommt auf ca. 17kb mit einer gzipped Datei. Die Autoload Variante klingt auch sehr verlockend und ist mit 12kb als minified Datei sogar noch kleiner.

Einbinden und Initialisieren

<link href="css/jkit.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/jquery.jkit.1.2.9.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('body').jKit();
});
</script>

Und das wars auch schon mit Einbinden, denn die erste Besonderheit ist, dass die jkit Module inline initialisiert, dazu wird sich innerhalb eines html tags, des data-jkit Attributs bedient, welches das entsprechende Modul angibt und auch direkt alle Optionen des Moduls in sich aufnimmt. Zu jedem Modul gibt es eine Standard Konfiguration so dass es meist nur nötig ist das Modul selbst anzugeben: Zum Beispiel: data-jkit = [ lightbox ] 

Bevor ich mit den Beispielen beginne, ein Hinweis auf einen weiteren großen Unterschied zu anderen jQuery Toolkits und/oder Plugins. jKit reduziert sich auf die Funktion und kommt quasi ungestylt. Viele Module von jKit benötigen kein CSS, dort wo ein CSS Schnipsel notwendig ist, findet man ein Beispiel in der Dokumentation des entsprechenden Moduls. Das CSS Schnipsel ist dabei auf das Nötigste beschränkt, so dass man es im weiteren Verlauf voll und ganz an die eigenen Bedürfnisse anpassen kann. Für mich als Webdesigner ist das ein Riesenvorteil, da der Zeitaufwand der CSS Anpassung bei der Verwendung verschiedener Plugins, welche alle ihren eigenen Style haben deutlich größer ist. In der Download Version ist bereits eine CSS Datei vorhanden, ich verwende in meinen Projekten aber eine eigene “jkit.css”, die letztendlich nur die jKit CSS Schnipsel enthält, welche ich tatsächlich benötige .

Demo – jKit Beispiele (Auszug)

jKit – Ausreizen durch Kombinieren

Durch die Kombination der jKit Module reizt man die Möglichkeiten des Toolkits erst richtig aus.  Die Verwendung ist dabei genauso einfach, man reiht einfach die Module innerhalb des HTML Tags aneinander. Beispiel: data-jkit = [ lightbox ] [ tooltip ] Folgendes Beispiel zeigt die Kombination von jKit Modulen zu einer Datatable.

Demo – jKit Datatable

Fazit

Für mich gehört jKit zu den absoluten Aufsteigern auf dem Markt der jQuery Toolkits. Die Verwendung ist sehr einfach, auch wenn die inline Initialisierung nicht jedermanns Sache sein dürfte. Die Möglichkeit Module miteinander zu kombinieren, lässt viel Raum für Experimente und Spielereien. Fredi Bach hat in meinen Augen nicht zuviel versprochen, wenn er sagt, dass jKit 99% aller jQuery Feature abdeckt, die man als Webdesigner benötigt. Bleibt zu hoffen, dass Fredi Bach die Möglichkeit findet, das Projekt weiter zu forcieren und das sich um jKit herum eine starke Community bildet. Ich werde die Entwicklung auf jeden Fall weiter verfolgen und auch im Produktiveinsatz werde ich regelmäßig auf jKit zurückgreifen.

jKit Website

HTML Markup – Thumbnail Grid

Das erstellen eines fließenden Thumbnail Grids ist einfach in Bootstrap. Hier bediene ich mich eines Code Schnipsels von Bootsnipp welches die Thumbnails in einer Liste ausgibt.

<ul class="thumbnails" id="hover-cap-4col">
<li class="span3">
  <div class="thumbnail">
    <div class="caption">
        <h4>Caption Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
        <p><a href="#" class="btn btn-inverse" rel="tooltip" title="Preview"><i class="icon-eye-open"></i></a> <a href="#" rel="tooltip" title="Visit Website" class="btn btn-inverse"><i class="icon-share"></i></a></p>
    </div>
    <img src="http://placehold.it/600x400" alt="ALT NAME">
  </div>
  <h4>Item Name</h4>
</li>
...
weitere Elemente
...
</ul>

Wie zu sehen ist, wird sich hier fast ausschließlich vorhandener Bootstrap Elemente bedient. Zwei Ausnahmen; ich gebe meiner Thumbnails Liste eine “id“, damit ich sie im weiteren Verlauf gezielt per jQuery ansprechen kann. Das zweite Nicht-Bootstrap Element sind die Container “caption” innerhalb jedes “thumbnail” Listenelements. Im “caption” Container sind die Infos enthalten, welche beim Mausover angezeigt werden sollen. Also eine Überschrift, ein kleiner Beschreibungstext sowie zwei Links. Die Links sind als Bootstrap Button gestaltet und enthalten “rel=’tooltip‘” und ein “title” Attribut, was später für die Ausgabe der Tooltips notwendig ist.

Ein bisschen CSS

#hover-cap-4col .thumbnail {
	position:relative;
	overflow:hidden;	
}
.caption {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.4);
	width: 100%;
	height: 100%;
	color:#fff !important;
}

Was tun wir hier? Wir weisen dem “thumbnail” Container position=”relative” zu, damit wir darin enthaltene Elemente absolute ausrichten können. Zusätzlich wird mit overflow=”hidden” verhindert, dass evtl. zu lange Inhalte des “caption” Containers abgeschnitten werden. Der “caption” Container wird standardmäßig über display=”none” ausgeblendet, er soll ja erst beim Mausover angezeigt werden, das erledigt später jQuery für uns. Ansonsten wird in der “caption” Klasse die Größe gesteuert, in diesem Fall 100% Höhe und Breite, damit das ganze Bild überlappt wird. Hintergrundfarbe und Schriftfarbe ist hier nach Wunsch möglich.

Ein bisschen jQuery

Mit jQuery erzeugen wir nun den Effekt, so dass sich der “caption”  Container beim Hover über das Thumbnail legt. Gleichzeitig initialisieren wir den Bootstrap Tooltip, damit beim Hover der beiden Buttons ein schicker Tooltip erscheint.

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$("[rel='tooltip']").tooltip();	

	$('#hover-cap-4col .thumbnail').hover(
		function(){
			$(this).find('.caption').slideDown(250); //.fadeIn(250)
		},
		function(){
			$(this).find('.caption').slideUp(250); //.fadeOut(205)
		}
	);	

});		
</script>

Wir beginnen natürlich mit dem Einbindung von jQuery und des Bootstrap Javascriptes. Im Beispielcode oben beides über CDN, hier könnt ihr natürlich auch eure lokale Version einbinden. Nachdem die Seite also geladen ist, wird als erstes der Tooltip initialisiert und zwar betrifft das alles Link mit dem Attribut “rel=’tooltip‘. Angezeigt wird der Inhalte des “title” Attributes. Der Rest ist schnell erklärt. Ich generiere eine jQuery hover Funktion wenn ich mit der Maus über die Class “thumbnail” fahre, wenn diese sich innheralb meiner Liste mit der angegeben ID befindet, in meinem Fall id=”hover-cap-4col”. Erste Funktion regelt “mouseenter”, die zweite entsprechend “mouseleave”.

Schlussbemerkung

Die gezeigte Variante sollte mit allen Thumbnail Grid Varianten funktionieren, also egal ob ihr 6 Spalten Thumbnails oder nur 2 Spalten habt. Im Demo sind entsprechend ein paar Varianten eingebaut. Die Demoseite könnt ihr speichern, sie greift komplett auf CDN Quellen zurück, so dass ihr ohne zusätzliche Files direkt eine lauffähige Version habt. Auf responsive Design wurde das Script nicht optimiert, da ich es so einfach wie möglich halten wollte. Je nach Bildschirmauflösung sollte hier noch ein paar Anpassungen vorgenommen werden. Schriftgröße der Überschrift, evtl. Ausblenden des  Beschreibungstextes usw.

DEMO

Schritt 1

Ladet euch die Datei scroll-top.js herunter. Sie beinhaltet bereits das Easing Plugin, um das Scrollen etwas effektvoller gestalten zu können. Das Plugin selbst ist auf Easing nicht angewiesen funktioniert also auch ohne dieses Zusatzplugin. Jetzt noch jQuery und scroll-top.js verlinken und initialisieren.

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="js/scroll-top.js"></script>

<!-- Initialisieren -->
<script type="text/javascript">

   $(document).ready(function(){

      $('.top').UItoTop();

   });

</script>

Schritt 2

Zur Positionierung des automatischen Scroll to Top Links ist ein wenig CSS notwendig. Das folgende Schnipsel beinhaltet 3 CSS IDs, wobei jede für eine bestimmte Position steht, wie der Name erkennen lässt. Dieses Schnipsel in eure vorhandene CSS Datei einbinden und schon ist Scroll to Top einsatzfähig.

/* TO TOP*/
#toTop-right {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:20px;
	right:20px;
	outline:none;
}
#toTop-left {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:20px;
	left:20px;
	outline:none;
}
#toTop-center {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	left:50%;
	margin-left:-20px; /*Feintuning je nach Inhalt */
	outline:none;
}

Einstellungen Autolink

var defaults = {			
   autoLinkPos: 'toTop-right', //toTop-left, toTop-center
   autoLinkClass: 'btn btn-large btn-danger', // example:'badge badge-warning' 'label label-info'
   autoLinkText: 'nach oben', //Linktext, optional wenn Icon vorhanden   
   autoLinkIcon: 'icon-chevron-up icon-white', //Bootstrap Icon, optional wenn Text vorhanden
   easingType: 'easeOutBounce',  //default without Easing: 'linear' or 'swing'		
   min: 400, //Anzahl gescrollter Pixel bis zum Einblenden
   inDelay:500,
   outDelay:500,
   scrollSpeed: 750, //Scrolldauer
   contentLinkClass: 'top' //class Name der manuellen Contentlinks
};

Ab Zeile 5 der scroll-top.js findet ihr die Einstellungen für den automatisch generierten Scroll to Top Link. Im Grunde sollten die Einstellungen selbst erklärend sein, entsprechende Kommentare sind hinzugefügt. Über autoLinkPos lässt sich die Position des eingeblendeten Links steuern, dafür haben wir vorhin die 3 CSS IDs eingefügt. Im weiteren wird über autoLinkClass das Aussehen des Links festgelegt, hier ist die komplette Bootstrap Palette möglich. Im Demo wird dafür ein großer Button verwendet. Wenn keine Klasse gesetzt ist, wird auf die Bootstrap Formatierung eines normalen Links zurückgegriffen. Wie der Code Kommentar zeigt, bieten sich hier auch Bootstrap Badges oder Bootstrap Labels an. Über autoLinkText und autoLinkIcon wird der Inhalt des Links gesteuert. Es kann entweder Text oder Icon oder beides gesetzt werden. Eine Übersicht aller Bootstrap Icons sowie deren Verwendung findet ihr unter Bootstrap Glyphicons. Der easingType legt den Scrolleffekt fest. Solltet Ihr kein Easing benutzen wollen, könnt ihr das Easing Plugin auch aus der scroll-top.js löschen. Dann müsst ihr allerdings bei easingType einen der Standartwerte linear oder swing setzen. Der Wert min legt fest nach wieviel vertikal gescrollten Pixel der automatische Scroll to Top Link erscheinen soll. Das waren die wichtigsten Einstellungen.

Manueller Scroll to Top Link

Das setzen manueller Links ist im Grunde an jeder geeigneten Stelle im Code möglich. Auch beim Aussehen kann auf die komplette Bootstrap Palette zurückgegriffen werden. Wichtig dabei ist dem Link neben den Bootstrap Klassen auch die class=”top” zu übergeben. Nachfolgend die Linkbeispiele aus dem Demo.

<a href="#" class="top btn btn-warning"><i class="icon-arrow-up icon-white"></i> nach oben</a>

<a href="#" class="top label label-info pull-right">Seitenanfang</a>

<a href="#" class="top badge badge-success"><i class="icon-circle-arrow-up icon-white"></i> nach oben</a>

Das individuelle CMS beinhaltet die komplette Produkt- und Softwareverwaltung,  sowie einen Dateimanager für Bedienungsanleitungen und Datenblätter.  Neben der Produktverwaltung wurde auch eine Newsverwaltung in das CMS integriert. Besondere Herausforderung bei der Programmierung der Website war, dass alle Inhalte in 6 Sprachen zur Verfügung gestellt werden. Dazu wurde im CMS eine Sprachverwaltung integriert, welche es ermöglicht alle relevanten Informationen in die entsprechende Sprache zu übersetzen. Die Sprachverwaltung enthält eine Fallback Lösung, sprich sollte eine Sprache (noch) nicht übersetzt sein, wird auf eine voreingestellt Standardsprache zurückgegriffen, so dass es nicht zu leeren Inhalten kommt. Die Sprachverwaltung ist modular aufgebaut und kann jederzeit um weitere Sprachen ergänzt werden. Die Umschaltung erfolgt bequem über ein Flaggenauswahl auf der Website.

Aufgrund dieser Anforderungen an Funktion und einfachste Bedienung wurde das System komplett individuell geplant und programmiert.

Website besuchen

Hintergrund

Der Apache Webserver benutzt voreingestellt die Ports 80 und 443. Jeder Port (Netzwerkadresse, Anschluss) kann nur einmal verwendet werden. Da die Xampp Installation ne runde Sache ist und es dabei erfahrungsgemäß nicht zu Fehlern kommt, ist die Ursache meist darin zu suchen, dass andere Programme (Software) die Ports 80 und/oder 443 bereits verwenden, was den Start des Apache natürlich verhindert.

Programme auf Portverwendung überprüfen

Einige Programme sind bekannt dafür, die von Apache benötigten Ports zu benutzen und damit zu blockieren. Die folgende Liste zeigt Programme die erfahrungsgemäß eine Doppelbelegung der oben genannten Ports verursachen.

• Skype
• Kaspersky AntiVirus
• Zone Alarm Firewall
• manche McAfee Versionen
• Download Programme mit Webfrontend (Emule, Kazaa usw)
• XP Antispy

Dieser Auszug zeigt Programme die sicher auf vielen Rechnern verwendet werden, darüber hinaus lässt sich die Liste bestimmt noch um einige Einträge erweitern. Gehen wir ans Werk.

Skype

Skype reserviert standardmäßig nach der Installation die Ports 80 und 443 als Alternative für eingehende Verbindungen. Diese Einstellung lässt sich über Optionen aufheben.

Skype Einstellungen über AKTIONEN / OPTIONEN aufrufen und dann unter der Auswahl ERWEITERT / VERBINDUNG das Häkchen bei “Ports 80 und 443…” entfernen, als letztes Skype neustarten.

Kaspersky AntiVirus

Im Hintergrund startet Kaspersky das Programm “Guardian”, welches offensichtlich mit dem Port 443 interagiert. Laut Auskunft von Kaspersky sollte das nicht der Fall sein. Erfahrungen anderer Benutzer zeigen aber, dass eine Deaktivierung des “Guardian” oft hilfreich ist um den Apache zu starten.

Zone Alarm

ist ein Firewall Programm, was den Einbruch von außen verhindern soll. Aus diesem Grund macht Zone Alarm auch erstmal so gut wie alle Ports dicht. Das Programm bedarf daher einer sorgfältigen Konfiguration, da es sonst sicher auch über Xampp hinaus bei anderen Programmen (z.B. Dreamweaver) zu Problemen kommen kann. Ich selbst nutze ZoneAlarm nicht, daher kann ich nur aus einer früheren Erfahrung sprechen. Da war es so, dass ZoneAlarm beim Startversuch des Apache direkt mit einem Warnhinweis ansprang. Dort hatte ich die Auswahl dieses Programm auf Vertrauenswürdig zu stellen, was die entsprechenden Ports mit einschließt. Manuell kann man Ports meines Wissens nur bei Zone Alarm Pro freigeben, dort über:
ControlCenter — Firewall — Main — Custom

Erfolg gehabt? Am besten nach den einzelnen Versuchen den Rechner neustarten, um sicher zu gehen, dass Änderungen auch übernommen wurden.

Weitere Maßnahmen

Sollten die typischen oben genannten Programme nicht für die Port Blockierung verantwortlich sein, muss der Sache etwas genauer auf den Grund gegangen werden. Schaue wir dazu etwas tiefer ins System.

Eingabeaufforderung
Variante 1:
Windows Taste + R / “cmd” Befehl ausführen
Variante 2:
Start/Programme/Zubehör/Eingabeaufforderung

Ports überprüfen

Im nächsten Schritt geht es darum die belegten Ports zu überprüfen. Dazu tippen wir in die Eingabeaufforderung folgenden Befehl ein und bestätigen mit ENTER:
netstat -a -n -o

In meinem Schaubild ist in Zeile 2 der Aktiven Verbindungen zu erkennen das der Port (lokale Adresse) 443 von einem Programm belegt ist. Das Programm selbst ist in der letzten Spalte mit einer ID hinterlegt. In meinem Fall ID 2692.

Programm identifizieren

Als nächstes muss das Programm welches meinen Port belegt identifiziert werden. Dazu benötigen wir die PID aus dem Schaubild vorher. Folgende Befehlszeile identifiziert das Programm:
tasklist /fi “PID eq 2692″
Im dritten Schaubild wird das Ergebnis nach bestätigen mit ENTER angezeigt. Mein Port 443 wird also von einem Programm names PMB.exe (Pando Media Booster) blockiert.  Das kann bei euch natürlich auch ein ganz anderes Programm sein. Im nächsten Schritt geht es darum dieses Programm zu deaktivieren um für den Apache den entsprechenden Port freizugeben. Hier ist etwas Vorsicht geboten, da es sich um ein laufendes Programm handelt. Das Beenden über den folgend gezeigten Weg führt dazu, dass evtl. nicht gespeicherte Daten des Programms verloren gehen.

Taskmanager

Im Taskmanager bekommt man einen Überblick über die laufenden Programme und im Hintergrund laufende Prozesse. Aufruf des Taskmanagers erfolgt über die Tastenkombination STRG + ALT + ENTF. Wechselt in der folgenden Ansicht dann auf das Register Prozesse. Jetzt muss unter Prozesse nur noch das vorhin identifizierte Programm gesucht werden, bei mir ist die PMB.exe direkt ohne zu scrollen zu erkennen.

Programm deaktivieren

Mit der Maus das entsprechende Programm im Taskmanager markieren und dann unten rechts auf PROZESS BEENDEN klicken. Hier ist ein wenig Vorsicht geboten, da die Form der Prozessbeendigung zu Instabilität des Rechners führen kann. In der Regel belegen aber keine wichtigen Systemprogramme die Ports 80/443, so dass es nur in den seltensten Fällen zu Problemen mit Windows kommen wird.

Solltet ihr feststellen, dass sowohl Port 80 als auch Port 443 blockiert sind, müsst ihr die Schritte natürlich für beide Ports durchführen und die entsprechenden Programme beenden. Gleiches gilt für den Standard MySQL Port 3306, falls sich auch MySQL über das Xampp Panel nicht starten lassen will.

Abschließende Maßnahmen

Wenn das Programm eh unnütz ist, dann einfach deinstallieren, somit habt ihr die Ports dauerhaft frei. Wollt ihr das Programm behalten überprüft ob es sich beim Systemstart (Windows) automatisch aktiviert, was im Umkehrschluss bedeutet, dass es vor jedem Apache Start deaktiviert werden muss. Ihr könnt den automatischen Start des Programms auch deaktivieren. Dazu Windows Taste + R aufrufen, msconfig eingeben und mit Enter bestätigen, wählt dann das Register Systemstart und sucht nach dem entsprechenden Programm. Bei mir steht der Pando Media Booster tatsächlich im Systemstart drin. Falls ihr anhand des Programmnamens nichts passendes findet, könnt ihr die Befehl Spalte breiter ziehen, dort findet ihr den Namen der .exe Datei, wie sie auch in der Eingabeaufforderung angezeigt wurde. Aus dem Systemstart entfernt wird das Programm jetzt in dem ich einfach den Haken entferne und mit OK bestätige. Diese Änderung wird erst nach einem Neustart des Rechners gültig.

Ich hoffe ich konnte helfen, wenn ja nutzt ruhig die Kommentarfunktion.

Zur Demonstration habe ich im Hauptordner 3 Unterordner angelegt.

• “files” = Dokumente und Zip-Datei
• “images” = Bildateien (jpg)
• “mixed” = Dokumente und Bilddateien gemischt

Im weiteren werde ich jetzt auf diese Ordner zugreifen und eine einfache Ausgabe der darin enthaltenen Dateien erzeugen. Besonders beim “images” Ordner habe ich mit ein bisschen jQuery und CSS eine gute Möglichkeit das ganze auch noch schick zu präsentieren, aber dazu später mehr. Fangen wir an!

Einleitung – einfache Ausgabe

Mit Version 5 hielt die Funktion scandir() Einzug in die PHP Welt. Diese liest den angegebenen Ordner aus und bildet einen Array mit den Dateien im Ordner. Mit einer foreach Schleife kann ich diesen Array nun ausgeben lassen und so mit 3 Zeilen Code den Inhalt eines Ordners anzeigen lassen.

<?php
$alledateien = scandir('files'); //Ordner "files" auslesen

foreach ($alledateien as $datei) { // Ausgabeschleife
   echo $datei."<br />"; //Ausgabe Einzeldatei
};

?>

Standardmäßig wird der mit scandir() gebildete Array alphabetisch aufsteigend sortiert. Hier kann ich durch den zusätzlichen Parameter 1 die Sortierung auch umkehren. Und so sieht das Ganze bisher in Aktion aus: Beispielseite Wie im Beispiel zu sehen, werden neben den “echten” Dateien auch “.”, “..” ausgelesen. Die stören natürlich etwas, aber soviel erstmal zur Einleitung.

Dateien aus Ordner auslesen und ausgeben

Anzeige als Liste inkl. Dateigröße, Dateityp und Direktverlinkung

Jetzt soll das Ganze zu einer sinnvollen Anzeige erweitert werden. Dazu sind folgende Ergänzungen im Code notwendig.

• Ordnername zur Wiederverwendung in Variable speichern
• Dateiinformationen mit pathinfo() Funktion abfragen
• Dateigröße mit filsize() Funktion ermitteln und umrechnen
• “.” und “..” Ordner von Anzeige ausschließen
• HTML ergänzen – Ausgabe als Liste mit Links zur Datei

Code

<ul>
<?php
// Ordnername 
$ordner = "files"; //auch komplette Pfade möglich ($ordner = "download/files";)

// Ordner auslesen und Array in Variable speichern
$alledateien = scandir($ordner); // Sortierung A-Z
// Sortierung Z-A mit scandir($ordner, 1)               				

// Schleife um Array "$alledateien" aus scandir Funktion auszugeben
// Einzeldateien werden dabei in der Variabel $datei abgelegt
foreach ($alledateien as $datei) {

	// Zusammentragen der Dateiinfo
	$dateiinfo = pathinfo($ordner."/".$datei); 
	//Folgende Variablen stehen nach pathinfo zur Verfügung
	// $dateiinfo['filename'] =Dateiname ohne Dateiendung  *erst mit PHP 5.2
	// $dateiinfo['dirname'] = Verzeichnisname
	// $dateiinfo['extension'] = Dateityp -/endung
	// $dateiinfo['basename'] = voller Dateiname mit Dateiendung

	// Größe ermitteln zur Ausgabe
	$size = ceil(filesize($ordner."/".$datei)/1024); 
	//1024 = kb | 1048576 = MB | 1073741824 = GB

	// scandir liest alle Dateien im Ordner aus, zusätzlich noch "." , ".." als Ordner
	// Nur echte Dateien anzeigen lassen und keine "Punkt" Ordner
	// _notes ist eine Ergänzung für Dreamweaver Nutzer, denn DW legt zur besseren Synchronisation diese Datei in den Orndern ab
	if ($datei != "." && $datei != ".."  && $datei != "_notes") { 
	?>
    <li><a href="<?php echo $dateiinfo['dirname']."/".$dateiinfo['basename'];?>"><?php echo $dateiinfo['filename']; ?></a> (<?php echo $dateiinfo['extension']; ?> | <?php echo $size ; ?>kb)</li>
<?php
	};
 };
?>     
</ul>

Übrigens bin ich kein Freund davon umfangreiche HTML Ausgaben in echo Befehle zu packen, deshalb trenne ich PHP von HTML soweit das möglich ist. Und so sieht es jetzt noch ohne CSS aus.
Demo

Bilder aus Ordner auslesen und anzeigen

Anzeigen als Vorschau inkl. Dateiname, Dateigröße und Direktverlinkung

Befinden sich ausschließlich Bilder im Ordner ist der Code von der Dateianzeige oben genauso für den Bilderordner verwendbar. Einzig die HTML Ausgabe innerhalb der foreach Schleife ändert sich ein wenig.

Code

<ul id="galerie">
<?php
// Ordnername 
$ordner = "images"; //auch komplette Pfade möglich ($ordner = "download/files";)

// Ordner auslesen und Array in Variable speichern
$allebilder = scandir($ordner); // Sortierung A-Z
// Sortierung Z-A mit scandir($ordner, 1)               				

// Schleife um Array "$alledateien" aus scandir Funktion auszugeben
// Einzeldateien werden dabei in der Variabel $datei abgelegt
foreach ($allebilder as $bild) {

	// Zusammentragen der Dateiinfo
	$bildinfo = pathinfo($ordner."/".$bild); 
	//Folgende Variablen stehen nach pathinfo zur Verfügung
	// $dateiinfo['filename'] =Dateiname ohne Dateiendung  *erst mit PHP 5.2
	// $dateiinfo['dirname'] = Verzeichnisname
	// $dateiinfo['extension'] = Dateityp -/endung
	// $dateiinfo['basename'] = voller Dateiname mit Dateiendung

	// Größe ermitteln für Ausgabe
	$size = ceil(filesize($ordner."/".$bild)/1024); 
	//1024 = kb | 1048576 = MB | 1073741824 = GB

	// scandir liest alle Dateien im Ordner aus, zusätzlich noch "." , ".." als Ordner
	// Nur echte Dateien anzeigen lassen und keine "Punkt" Ordner
	// _notes ist eine Ergänzung für Dreamweaver Nutzer, denn DW legt zur besseren Synchronisation diese Datei in den Orndern ab
	// Thumbs.db ist eine Ergänzung unsichtbare Dateiergänzung die von ACDSee kommt
	// um weitere ungewollte Dateien von der Anzeige auszuschließen kann man die if Funktion einfach entsprechend erweitern
	if ($bild != "." && $bild != ".."  && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db") { 
	?>
    <li>
        <a href="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>">
        <img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" width="140" alt="Vorschau" /></a> 
        <span><?php echo $bildinfo['filename']; ?> (<?php echo $size ; ?>kb)</span>
    </li>
<?php
	};
 };
?>
</ul>

Mit ein bisschen CSS lässt sich die ausgegebene Liste ein bisschen schicker darstellen.

CSS Code

<style type="text/css">
ul#galerie {
	padding:0;
	margin:0;
	list-style-type:none;
	font-family:Arial, Helvetica, sans-serif;
}
ul#galerie li{
	padding: 3px;
	background-color:#ebebeb;
	border:1px solid #CCC;
	float:left;
	margin:0 10px 10px 0;	
}
ul#galerie li:hover{
	border:1px solid #333;
}
ul#galerie li span{
	display:block;
	text-align:center;
	font-size:10px;
}
ul#galerie li a img{
		border:none;
}
</style>

Demo

Weitere Beispiel

Ergänzt man den Code um ein bisschen jQuery in dem man auf Slideviewer, Slideshow oder Lightbox Plugins zurückgreift wird die Anzeige eines Bilderordners eine runde Sache. Zusätzlich kann man die Vorschaubilder mit dem genialen timthumb Script dynamisch generieren lassen und so auch das angezeigte Format vereinheitlichen, was sehr nützlich ist, wenn sich im Ordner Bilder verschiedener Dimensionen oder Ausrichtungen befinden.

Hier nun ein paar Anwendungsbeispiele die oben genannter Scripte bedienen.

• Slideshow
• Slideviewer
• Vorschau mit Lightbox Vergrößerung

Bilder und Dateien aus Ordner auslesen und anzeigen

Bilder mit Vorschau und Dateien als Liste

Um die Ausgabe flexibler zu gestalten ist es natürlich zu empfehlen Bilder und anderen Dateien in verschiedenen Ordnern abzulegen. Wenn dies nicht geht, gibt es auch eine relativ einfache Form die Ausgabe von Bildern und Dateien zu trennen.

Code

<?php
$ordner = "mixed";
$alledateien = scandir($ordner);          				

foreach ($alledateien as $datei) {
	$dateiinfo = pathinfo($ordner."/".$datei); 
	$size = ceil(filesize($ordner."/".$datei)/1024); 
	if ($datei != "." && $datei != ".."  && $datei != "_notes" && $bildinfo['basename'] != "Thumbs.db") { 

			//Bildtypen sammeln
			$bildtypen= array("jpg", "jpeg", "gif", "png");
			//Dateien nach Typ prüfen, in dem Fall nach Endungen für Bilder filtern
			if(in_array($dateiinfo['extension'],$bildtypen))
  			{
	?>
            <div class="galerie">
                <a href="<?php echo $dateiinfo['dirname']."/".$dateiinfo['basename'];?>">
                <img src="<?php echo $dateiinfo['dirname']."/".$dateiinfo['basename'];?>" width="140" alt="Vorschau" /></a> 
                <span><?php echo $dateiinfo['filename']; ?> (<?php echo $size ; ?>kb)</span>
            </div>
    		<?php 
			// wenn keine Bildeindung dann normale Liste für Dateien ausgeben
			} else { ?>
            <div class="file">
            	<a href="<?php echo $dateiinfo['dirname']."/".$dateiinfo['basename'];?>">&raquo <?php echo $dateiinfo['filename']; ?></a> (<?php echo $dateiinfo['extension']; ?> | <?php echo $size ; ?>kb)
            </div>
            <?php } ?>
<?php
	};
 };
?>

Die HTML Ausgabe erfolgt hier mit Hilfe von DIV Bereichen, das ist für die Variante flexibler, weil die Benutzung von Listen auf Grund der unterschiedlichen Styles nicht ohne Umstand möglich ist.

CSS Code

<style type="text/css">
div.galerie{
	padding: 3px;
	background-color:#ebebeb;
	border:1px solid #CCC;
	float:left;
	margin:10px 10px 0  0;
	font-family:Arial, Helvetica, sans-serif;	
}
div.galerie:hover{
	border:1px solid #333;
}
div.galerie span{
	display:block;
	text-align:center;
	font-size:10px;
}
div.galerie a img{
		border:none;
}
div.file {
	padding:4px 4px 4px 30px;
}
div.file.even{
	background-color: #ebebeb;
}
div.file a {
	text-decoration:none;
}
div.file:hover {
	background-color:#CCC;
}
</style>

Noch ein wenig jQuery hinzugefügt um dynamisch alternierende Hintergrundfarben für die Dateien zu generieren.

jQuery Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.file:even').addClass('even');
});
</script>

Und so sieht es aus!
Demo

Download

Enthalten sind alle hier gezeigten Beispiele sowie alle dafür notwendigen Dateien. Der Code ist kommentiert und sollte keine Fragen offen lassen. Wenn doch gilt wie immer: Bei Fragen fragen!
Download

Das neue Photoshop CS5 bringt ein paar nützliche neue Werkzeuge mit. Mir gefällt vor allem die Funktion zur HDR Tonung, mit der man aus einfachen Fotos bezaubernde HDR Ergebnisse erzielen kann. Aufrufen lässt sich der Filter über BILD/Korrekturen/HDR-Tonung. In der folgenden Palette sind eine ganze Menge an Einzelfiltern vorhanden. Ganz oben unter VORGABEN sind bereits fertige Filtersets vorhanden.  Ein paar dieser Sets habe ich auf das Artikelbild angewendet. Ich habe bewusst ein relativ farb- und kontrastloses Bild gewählt, um die Möglichkeiten der HDR-Tonung zu veranschaulichen. Am meisten Spaß macht es allerdings die Regler selbst zu bedienen und seiner Kreativität freien Lauf zu lassen. Je nach Motiv kann man hier die unterschiedlichsten Ergebnisse erzielen. Weiter unten findet ihr dazu noch eine kleine Galerie mit weiteren Bildern die ich einer HDR Konvertierung unterzogen.

HDR-Tonung Galerie

Surreal

Surreal hoher Kontrast

Foto hoher Kontrast

Foto geringer Kontrast

Surreal geringer Kontrast

Monochrom Künstlerich

Monochrom hoher Kontrast

Gesättigt

stärker gesättigt

custom made

custom made

custom made

Mehr Bilder

Galerie

iPhone – HDR Fotos

Im HDR Rausch von Photoshop wollte ich natürlich auch die mobilen Möglichkeiten wissen. Als iPhone Nutzer ist man vom vielfältigen Angebot im App-Store ja verwöhnt. Kurz nach HDR gesucht und tatsächlich gibt es schon einige Apps die diese Funktion auf dem iPhone ermöglichen soll. Ich hab mich für HDR Pro entschieden, die kostet 1,59 € und hat 4 Sterne Bewertung. Die Bedienung ist denkbar einfach, vor allem dann wenn man Auto HDR Modus wählt. iPhone ruhig halten, es werden zwei Bilder geschossen und im Anschluss kann man über zusätzliche Regler noch weitere Optimierungen zu Kontrast und Farbgebung vornehmen. Gesagt getan kann man das Bild dann speichern oder direkt per Email verschicken. Je nach Einstellung in den Optionen sogar mit bis zu 2044×1525 Pixel. Nicht schlecht sind auch die Ergebnisse.

iPhone HDR-Pro App

iPhone HDR-Pro App

iPhone HDR-Pro App

HTML Code

<form id="form" action="form2email.php" method="post">
<label for="name">Name</label>
<input id="name" name="name" size="25" type="text" />
<label for="email">Email</label>
<input id="email" name="email" size="25" type="text" />
<label for="betreff">Betreff</label>
<input id="betreff" name="betreff" size="25" type="text" />
<label for="nachricht">Nachricht</label>
<textarea id="nachricht" cols="50" rows="6" name="nachricht"></textarea>
<input id="submit" name="submit" type="submit" value="Formular senden" />
</form>

PHP Code

// Ausführen wenn Formular gesendet
if (isset($_POST["submit"]))
{

// Sammeln der Formulardaten
$an = "meine@email.de";
$name = $_POST['name'];
$email = $_POST['email'];
$betreff = $_POST['betreff'];
$nachricht = $_POST['nachricht'];

// Mailheader UTF-8 fähig machen
$mail_header = 'From:' . $email . "n";
$mail_header .= 'Content-type: text/plain; charset=UTF-8' . "rn";

// Nachrichtenlayout erstellen
$message = "
Name: 		$namen
Email: 		$emailn
Nachricht: 	$nachrichtn
";

// Verschicken der Mail
mail($an, $betreff, $message, $mail_header );
};

Hinweis

Der gezeigte Code löst das Umlautproblem durch Erweiterung des Mailheaders, mehr nicht. Ein schickes Webformular sollte natürlich mehr bieten. Als erstes gehört eine Validierung der Eingaben in das Formular. Dazu gibt es schicke auf jQuery basierende Javascript Lösungen. Hier ein Fundstück mit jQuery Formular-Validierungs-Plugins. Um sich vor Spammern zu schützen sollte man auch noch ein Captcha nutzen. Mein Favorit ist eindeutig das jQuery – s3Captcha.

Im Demo könnt ihr das Kontaktformular als Komplettpaket sehen, sprich mit Validierung und Captcha. Das Download Paket enthält neben der oben im Code gezeigten Variante auch dieses “ready to use” Komplettpaket. Wie immer gilt…bei Fragen fragen!

Demo

Download

Kurzanleitung zu Office Word 2007

Office Button und dann Word-Optionen wählen

Im Register “Erweitert” unter der Überschrift “Allgemein” das Häkchen setzen bei “Dateikonvertierung beim Öffnen bestätigen”

Datenquelle anbinden – entsprechende Excel Tabelle auswählen

Option: MS-EXCEL Arbeitsblätter über DDE auswählen

Das wars auch schon, wenn jetzt der Adressblock in den Serienbrief eingefügt wird, erscheinen alle Postleitzahlen ordnungsgemäß mit führender 0.
Wenn noch Fragen sind Kommentar posten.