Webprojekt – Calinee, Hören & Genießen

Ein Webprojekt calinee.de für einen befreundeten Pianisten aus dem Sauerland, der ein Candlelight Dinner mit Klavierbegleitung in verschiedenen Restaurants anbietet. Ich habe die überschaubare Website komplett mit freier Software entwickelt. Unter Anderem GIMP und Eclipse waren im Einsatz. SEO und Webshop kommen nach Bedarf später nach. Es wird also später noch ein wenig mehr Arbeit auf mich zukommen ;-)

Windows 7 Gadget – Project Timer

Bei beruflichen oder ausbildungstechnischen Programmierarbeiten vergisst man schnell mal die Zeit und möchte gerne Wissen wie lange man für bestimmte Tätigkeiten eigentlich gebraucht hat. Denn es ist zum Beispiel für das Verfassen von Angeboten sehr Wesentlich folgende Frage beantworten zu können – „Wie lange brauche ich eigentlich für meine Arbeit?“. Deshalb habe ich mich rangesetzt ein kleines Windows 7 / Vista Gadget zu programmieren mit dem man einfach Zeiten für Projekte und Teilprojekte messen kann. Das ganze ist in HTML/CSS und jQuery Programmiert worden und kann (leider ohne Signatur) auf jedem Windows 7/Vista System installiert werden. Falls Interesse besteht könnten auch die Daten nach einem Reboot bestehen bleiben (webSQL), was aber noch ein wenig mehr Arbeit wäre. Hier ein Screenshot:


Hier der Download

Webprojekt – Hirschberg Tonstudio

Das Hirschberg Tonstudio ist ein umfangreiches Tonstudio in Mitten des Rothaargebirge im Sauerland. Das Webprojekt habe ich in diesem Monat mit dem CMS webEdition erstellt. Das Template habe ich wie üblich mit Photoshop und Eclipse als IDE entwickelt und einige jQuery Features einprogrammiert. Die gesamte Seite besteht nur aus einer Seite und scrollt über die Navigation zum jeweiligen Inhalt. Hier noch ein größerer Auszug der Website:

Webprojekt erosionslos.de – Erosionsschutz-Konfigurator

Dieses Projekt habe ich bei der Firma IGG | Internationale Geotextil GmbH freiberuflich erstellt und bietet Ingenieuren und Bauherren die Möglichkeit passende Erosionsschutzprodukte wie Kokosmatten oder Anspritzbegrünung zu finden. Diese Produkte verhindern das Abrutschen von Schlamm, Steinen oder Boden und sichern die gegebene Fläche ab.

Das Programm (Konfigurator) soll nun dabei helfen passende Produkte für die passende Fläche zu finden. Dabei werden Faktoren wie Neigung, Bodengruppe, Jahresdurchschnittsniederschlag berücksichtigt um das passende Produkt zu bekommen. Nach dem Formular erhalten die Kunden ein PDF indem alle Informationen zu dem Produkt und zu der Fläche stehen.

Das Projekt basiert auf einer bereits vorhandenen Joomla Vorlage der IGG und musste um die Funktion des Konfigurators erweitert werden. Hierfür habe ich mit PHP mehrere Klassen für die Verarbeitung der Informationen erstellt. Außerdem befinden sich mehrer AJAX Features mit Hilfe von jQuery in dem Projekt. Wie zum Beispeil die Bestimmung der Jahresdurchschnittsniederschlagsmenge über die Postleitzahl.

Die Codierung habe ich unter eclipse diesmal sehr gut fertigstellen können. Absolut empfehlenswert die spezielle PHP Umgebung von eclipse.org einmal zu testen :-)

jQSlide – jQuery Slider

So endlich die Prüfungen und Ergebnisse meiner Ausbildung hinter mir. Also kann ich mich wieder um meinen Blog kümmern und nochmal etwas mit jQuery bauen. Habe auf viele Homepages dieses Bild, dass durch klicks nach rechts oder links wechselt gesehen und wollte das auch mal selbst basteln. Schnell hab ich gesehen, dass das mit jQuery gar nicht mal so schwer ist. Die Codierung habe ich mit gedit schnell machen können. Habe mich ein wenig mehr mit dem Design der Slidergrafik auseinander gesetzt, die ein durchlaufen über x-repeat ermöglichen sollte. Dabei kahm dann folgendes heraus:

Hiernach habe ich noch schnell die Richtungsfeile erstellt, die  sich jeder frei kopieren kann :

Das Resultat war danach folgendes:

Bei Interesse zeige ich auch gerne noch den Sourcecode, den ich noch ein wenig mit CSS3 aufgebessert habe.

jQuery – Polaroid Galerie

Mein zweiter Versuch mit jQuery bezog sich jetzt auf eine kleine Bildergalerie in Form von Polaroid Fotos mit einer kleinen Beschriftung am Ende des Bildes. Dabei sollten die Bilder auf der Seite verschoben werden und mit einem Doppelklick vergrößert werden können. Die grafische Darstellung wurde wieder mit ein wenig CSS3 verfeinert (Schlagschatten).

Die Dragfunktion ist hier in einer externen jQuery Erweiterung untergebracht „jQuery UI“ (User Interface), die auch wieder unter der Google API zu finden ist:

<script type=“text/javascript“ src=“http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js„></script>

Somit konnte einfach ein $(„.polaroid“).draggable({}); angewendet werden um die Bilder verschieben zu können. Alle weiteren Infos können in den Manuals zu jQuery UI gelesen werden. Dort sind auch Beispiele geschrieben.

Hier nun erst einmal das Ergebnis:

Wenn Ihr Fragen, Anmerkungen oder Verbesserungsvorschläge habt könnt Ihr einfach ein Kommentar hinterlassen.

jQuery – Menü

Logo von jQueryDa ich mich ein wenig mit jQuery auseinander setzen wollte habe ich die CSS Datei von den Border-Tricks verwendet um ein einfach animiertes Menü mit Hilfe von jQuery zu programmieren. Dazu habe ich eine einfach formatiertes Listenmenü (ul li) eingefügt und das jQuery Framework von den GoogleAPIs eingebunden.

<script type=“text/javascript“ src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js“></script&gt;

Das animierte Menü bin ich dann wie folgt angegangen:

$(document).ready(function(){
$(‚#navigation a‘).hover(function(){
$(this).animate({
width:’75%‘,
padding:’10px‘
},200);
},function(){
$(this).animate({
width:’50%‘,
padding:’5px‘
},200);
});
$(‚#navigation a‘).click(function(){
$(this).animate({width:’100%‘},200)
});
});
Die Menüstruktur sah dabei so aus:
<ul id=“navigation“>
<li>
<a href=“#“>Link</a>
<div class=“arrow“></div>
</li>
<li>
<a href=“#“>Link</a>
<div class=“arrow“></div>
</li>
</ul>
Leider gibt es unter WordPress kein Syntaxhilighting aber ich denke man sollte alles erkennen können. Hier nun das Resultat:
 
 
Bei Fragen oder Tipps könnt ihr euch natürlich jederzeit melden.