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 ;-)

Advertisements

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 :-)

CSS3 InfoBox mit jQuery oder CSS

Heute wollte ich mich kurz damit auseinander setzten, wie man eine InfoBox für Begriffe in einem Text programmiert. Dazu soll unter dem Begriff ein kleines Fenster, entweder mit jQuery oder durch eine einfache CSS verkettung angezeigt werden. Außerdem wollte ich wieder ein wenig CSS3 Effekte für die InfoBox einsetzten. Kommen wir zuerst zu der Gestaltung mit CSS:

/*Der zu erklärende Begriff*/

.info{

color:#444;
background-color:#DDD;
position: relative;
}

/*Die InfoBox*/

.infotext{
font-size:0.75em;
padding:5px;width:200px;display:none;
position:absolute;top:25px;left:0px;
background-color:#000;color:#FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 7px #000;
-webkit-box-shadow: 0px 0px 7px #000;
box-shadow: 0px 0px 7px #000 ;
border:1pt solid #666;
}
Und so sieht der HTML Code dazu aus:
Dies ist ein
<span class=“info“>Flie&szlig;text
<span class=“infotext“>Beschreibung des Wortes</span>
</span>
. Weiter im Text…

CSS Lösung

Für eine einfache CSS Lösung muss die :hover Eigenschaft verwendet werden:

.info:hover .infotext{display:inline;}

jQuery Lösung

Hier wird das hover() Event genutzt und die Box wird mit show() animiert geöffnet. Hier nun der Code:

<script type=“text/javascript“ src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js“></script&gt;
<script type=“text/javascript“ language=“javascript“ charset=“utf-8″>
// <![CDATA[
$(document).ready(function(){
$(’span.info‘).hover(function(){
$(this).find(’span.infotext‘).show(„fast“);
},function(){
$(this).find(’span.infotext‘).hide(„fast“);
});
});
// ]]>
</script>

Hier nun das Ergebis:

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.

CSS Tipps und CSS3 Technik

Das Border-Verhalten von Browsern bietet eine Möglichkeit Kanten und dreieckige Elemente darstellen zu können. Hiermit ist also eine weitere Gestaltungsmöglichkeit neben CSS3 möglich. Die Technik wird auch mit älteren Browsern wie dem Internet Explorer 6 unterstützt und kann somit beliebig eingesetzt werden. Im Folgenden werde ich kurz ein kleines Beispiel für die Gestaltung dieser Kanten zeigen. Anlass für dieses Tutorial hat mir ein Artikel auf net.tutsplus.com gegeben. Wer Anmerkungen oder Vorschläge zur Verbesserung hat kann sich gerne melden.

Hier nun erst einmal die Grundlegende CSS Gestaltung:

.shadow{ border-right:70px solid #666; border-bottom:50px solid transparent; line-height: 0; width:0px; height:0px; position: relative; left:-70px; }
.content{ width:400px; border:1px solid #AAA; float:left; margin-left:70px; margin-bottom:30px; }
h1{ font-family: helvetica, arial, sans-serif; background-color:#444; color:#FFF; position: relative; width: 70%; left:-20px; padding: 5px; padding-left:10px; margin: 0px; margin-top:20px; }
.arrow{ width: 0; height: 0; line-height: 0; border-left: 20px solid transparent; border-top: 10px solid #555; position: relative; left:-20px; }
<div class="content"> <h1>Überschrift</h1> <div class="arrow"></div> <p>Textinhalt</p> <div class="shadow">&nbsp;</div> </div> Das ergibt folgendes Ergebnis: Einfache Gestaltung Wenn jetzt noch ein wenig CSS3 mit ins Spiel kommt erhalten wir dieses Ergebnis: Gestaltet mit CSS3 /*CSS 3 Aenderungen*/ .content{ -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; } h1{ background: -moz-linear-gradient(top, #555, #333); background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); -moz-box-shadow: 2px 1px 5px #444; -webkit-box-shadow: 2px 1px 5px #444; box-shadow: 2px 1px 5px #444; text-shadow: 1px 1px 2px #777; }