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

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

Webprojekt – Suppy Dokumentation

Für das Supportsystem Suppy habe ich nun eine Dokumentation geschrieben, in der die Funktionalität, Designaspekte und die programmiertechnischen Mechanismen festgehalten sind. Außerdem ist dort eine kleine Installationshilfe zu finden. Der Bericht soll in erster Linie für die Schule sein um meine Arbeit an diesem Projekt zu dokumentieren und welche Überlegungen hinter all den Funktionen stecken. Aber ich denke auch außen stehende, die sich für das Projekt interessieren können ja mal einen Blick in die Dokumentation wagen.

Download: Suppy Dokumentation v 0.5.4

Über Fragen und Anmerkungen wäre ich sehr dankbar.

Smashing Magazin Book

Auf der Suche nach informativen Webdesign Blogs und Freebies Sammlungen bin ich Dank DrWeb.de auf das Smashing Magazin gestoßen. Dieser Blog bzw. dieses Magazin ist einer der führenden Onlinemagazine im Web wenn es um Webdesign geht. Nach kurzer Recherche habe ich auch das Buch „The Smashing Book“ gefunden und es direkt für 23€ portofrei aus dem Webshop des Magazins erworben. Das Buch ist sein Preis alle male Wert und ist sehr Empfehlenswert. Ich habe bis jetzt schon einiges daraus mitnehmen können. Es kann im Smashing Shop erworben werden. Hier nun eine kleine Übersicht.

The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create successful user interfaces and apply marketing principles to increase conversion rates. It also shows how to get the most out of typography, color and branding so that you end up with intuitive and effective Web designs. And lastly, you will also get a peek behind the curtains of Smashing Magazine.

Webprojekt – Suppy, Supportverwaltung

Suppy [sappi] ist ein Support System für kleine Firmen, die ein leicht handhabbares und schmales Support System benötigen. Diese Webapplikation habe ich in der letzten Woche geschrieben und bin natürlich weiterhin an der Weiterentwicklung. Das Projekt steht unter der GPL. Den Download findet man unter sourceforge.net.

Es ist PHP und MySQL basierend und läuft ab PHP 5. Das Design habe ich mit GIMP erstellt, außerdem kam das Frebie Quarz Icon Pack zum Einsatz. Geschrieben wurde das Programm in Eclipse. Weitere Informationen über Installation, Download und Anwendung können unter der Unterseite Suppy entnommen werden.