Das von Kölner Bureau BLEEN entwickelte Jumpage erfasst Facebook-Inhalte und stellt diese als eine eigenständige Website bereit. Dabei werden die wichtigsten Inhalte wie Hintergrundbild, Profilbeschreibung, Neuigkeiten, Veranstaltungen, Bilder oder Kontaktdaten automatisch in eine einzelne Seite eingegliedert. Wir entwickelten ein One-Page Template das wir nun kostenlos als Download bereitstellen möchten.

Demo: jumpage.visarts.de
Facebook Seite: www.facebook.com/trianglesounds.label

Features Übersicht

• Topbar Navigation
• Parallax Scrolling Effekt für Hintergrundgrafiken
• Layout ist mit dem Cool Kitten Responsive Framework aufgebaut
• valide HTML5

Template kostenlos downloaden

1. YAML Builder

YAML (Yet Another Multicolumn Layout) stellt mit seinem CSS Framework ein browserübergreifendes Grundgerüst zur Verfügung. Die Integration des Frameworks mit jQuery vereifacht die Entwicklung dynamischer Websites. Es existieren Basis-Layouts für zahlreiche Content Management Systeme wie WordPress, Joomla, TYPO3 und Drupal. YAML Builder bietet ein Online-Tool zur Erstellung YAML-basierter CSS-Layouts. Die Elemente werden per Drag&Drop ins Layout eingebunden. Ein WYSIWYG-Editor zeigt alle Anpassungen direkt im Browser an. Das ferige Layout lässt sich als HTML/CSS Code exportieren.

Mittlerweile wurde YAML Builder zu Thinkin’ Tags weiterentwickelt, das aktuell in einer Public Alpha Version verfügbar ist. Neben YAML werden auch die Frameworks 960.gs und Blueprint unterstützt.

http://builder.yaml.de
www.thinkintags.com

2. Bootstrap Interface Builder

Twitter Bootstrap ist ein modular aufgebautes CSS UI Framework für Webanwendungen. Mit dem kostenlosen Online-Tool Bootstrap Interface Builder kann man sein eigenes Bootstrap-Layout in wenigen Minuten zusammenklicken. Der WYSIWYG-Editor lässt sich auch ohne HTML-Kenntnisse intuitiv bedienen.

http://jetstrap.com

3. Themes für Twitter Bootstrap erstellen

Sehr nützlich ist auch Paintstrap mit dem man sehr einfach eigene Farb-Themes für Twitter Bootstrap erstellen kann. Zuerst importiert man eine Farbpalette aus Adobe Kuler oder Colourlovers. Danach kann man die Farben ggf anpassen. Die Ergebnisse sieht man sofort in einer Vorschau. Die fertigen CSS Dateien kann man anschließend als ZIP-Archiv herunterladen.

http://paintstrap.com

4. ThemeRoller für jQuery UI CSS Framework

Die sehr beliebte JavaScript Library bring auch ein CSS Framework mit sich. Mit dem ThemeRoller lässt sich ein eigenes CSS Theme direkt im Browser gestalten. Das Interface ist gut gegliedert und erfordert keine HTML-Kentnisse. Alle Änderungen werden sofort in der Theme-Vorschau aktualisiert.

http://jqueryui.com/themeroller

5. 960 Grid System Builder

960 Grid System ist ein flexibles und weit verbreitetes Framework für Weblayouts. Damit lassen sich harmonische Layouts für die gängige 1024×768 px Auflösung erstellen. Mit dem Grid Builder kann man die Parameter für Spaltenanzahl sowie Spaltenbreite und Zwischenabstände definieren. Das Ergebnis kann man anschließend als CSS Datei für die fixe oder fuilde Layouts herunterladen.

http://grids.heroku.com

6. Buttons, Icons, Ribbon und Formulare erstellen

UI LiveTools bietet vier kostenlose Tools um eigene Buttons, Formulare, CSS-Ribbon sowie Pixelicons zu erstellen. Die Tools haben eine Sofort-Preview und lassen sich kinderleicht bedienen. Die Ergebnisse kann man als HTML & CSS3 bzw PNG Grafik exportieren.

http://livetools.uiparade.com

7. Colorzilla CSS Gradient Generator

Ein sehr nützliches Tool um CSS3 Farbverläufe zu erstellen. Neben vielen Vorlagen und umfangreichen Einstellungsmöglichkeit gibt es auch die Option CSS Gradients aus einer Bilddatei zu extrahieren. Das generierte Code funktioniert in allen CSS3 fähigen Browsern wie Firefox, Safari, Opera und IE9. Für ältere IE Versionen gibt es eine Fallback-Option.

www.colorzilla.com/gradient-editor

8. Font-Face Generator

Webfonts muss man nicht unbeding bei einem externen Anbieter hosten. Mit Fontface Generator kann man eine Desktop-Schrift zu einer Webfont umwandeln um diese auf dem eigenen Webserver in die Webseite einzubinden. Auf der Fontsquirrel Website findet man auch eine gute Übersicht freier Webschriften.

www.fontsquirrel.com/fontface/generator

9. Typetester

Mit dem Online-Tool Typetester kann man bis zu drei Schriftarten gleichzeitig miteinander vergleichen. Neben üblichen Einstellungen für Schriftgröße, Farbe, Zeilenhöhe, Letter-Spacing etc hat man auch eine gute Auswahl an unterschiedlichen Systemschriften für Mac und Windows aber auch Möglichkeit eigene lokale Schriften zu testen.

www.typetester.org

10. MyCSSMenu

Das Tool bietet eine Auswahl an browserübergreifenden Navigationsmenüs, die man mit einem Online-WYSIWYG-Editor beliebig anpassen kann. Auch wenn die Standardvorlagen etwas altbacken aussehen, lässt die Vielzahl von möglichen Einstellungen und Zusatzfunktionen wie Animationseffekte keine Wünsche offen.

www.mycssmenu.com

Eine Serverumgebung besteht aus mehreren Komponenten u.a. dem Apache Webserver, den Scriptsprachen PHP und Perl, MySQL Datenbank sowie Datenbank-Administrationtool phpMyAdmin. Alle Komponenten einzeln einzurichten und zu konfigurieren erfordert einiges an technischem Können.
Abhilfe schaffen Softwarepakete, die man einfach und schnell auf dem lokalen Rechner installieren kann. Die bekanntesten kostenlosen Programme sind WampServer (für Windows PC) und MAMP (für Mac OS X).
Mit dem Start des Programms hat man sofort eine vollwertige Serverumgebung und kann sämtliche Webanwendungen auf seinem Rechner lokal nutzen.

Lokale Serverumgebung für Mac OS X

MAMP installiert eine lokale Serverumgebung für OS X, die sich je nach Bedarf aktivieren, bzw. deaktivieren lässt. Die vorinstallierte Apache Version von OS X bleibt dabei unberührt.
Die Installation ist denkbar einfach und dauert keine fünf Minuten. Nach dem Herunterladen des Programms – in den Ordner Programme kopieren – MAMP aufrufen und auf “Server starten” klicken.

Im Browser erreichen Sie den Webserver über die URL http://localhost:8888/

Um Ihre Seiten in der lokalen Serverumgebung aufrufen zu können, müssen diese im htdocs-Verzeichnis des MAMP Webservers abgelegt werden. Das htdocs-Verzeichnis befindet sich unter dem Pfad /Programme/MAMP/htdocs/
Es ist sehr empfehlenswert für jedes Projekt ein eigenes Verzeichnis anzulegen. Damit können Sie das lokale Projekt im Verzeichnis /Programme/MAMP/htdocs/myproject im Browser über die URL http://localhost:8888/myproject aufrufen.

Über den Webbrowser greift man auf phpMyAdmin zu, um die Datenbank zu verwalten. Für die Datenbank-User sind im MAMP folgende Verbindungsparameter hinterlegt:

User: root
Passwort: root
Datenbank-Host: localhost
Serverport: 8888

Lokale Serverumgebung für Windows PC

Für Windows-Nutzer gibt es das kostenlose Programm WampServer.
Nachdem Sie das Programm heruntergeladen haben, führt Sie der mitgelieferte Installer durch die komfortable Installationsroutine.
Es ist sehr empfehlenswert Wamp direkt unter c:/wamp zu installieren um mögliche Konfigurationsprobleme zu vermeiden. Sobald Wamp gestartet wurde erscheint unten rechts in der Taskleiste ein Symbol. Um den Server nun online zu setzen klickt man das Symbol an und wählt die Option “Online setzen”

Über das Menü kann man auch den Webserver und phpMyadmin im Browserfenster aufrufen.
Im Browser erreichen Sie die Serverumgebung durch Eingabe der URLs: http://localhost oder http://127.0.0.1/
Ihre Projekte müssen lokal im c:/wamp/www Verzeichnis gespeichert werden.
Damit können Sie das lokale Projekt im Verzeichnis c:/wamp/www/myproject im Browser über die URL http://localhost/myproject erreichen.

Für die Datenbank-User hat Wamp folgende Verbindungsparameter:

User: root
Passwort: (standartmäßig kein Passwort hinterlegt)
Datenbank-Host: localhost

Fazit: eine lokale Serverumgebung einzurichten muss kein Hexenwerk sein! Mit WampServer und MAMP hat man in wenigen Minuten eine vollwertige Testumgebung für eigene Projekte. Das ist insbesondere dann von Vorteil, wenn noch kein Webserver vorhanden ist oder die entwickelte Website umfangreiche Tests erfordert.

Downloadlinks:

> MAMP von der Website des Entwicklers downloaden

> WampServer von Sourceforge.net downloaden