Projektbeschreibung:
Im Rahmen des Projektes setze ich eine Webseite für den Verein "Live for Life e.V." um.
Prinzip des Vereins:
- Unterstützung von sozialen Projekten weltweit
- Jeder kann Aktionen organisieren und dadurch einen aktiven Beitrag leisten
- Beispiele: Partys, Konzerte, Sportturniere, Ausstellungen, Straßenaktionen mit Artistik und Musik, Kuchen backen usw.
- Live for Life ist kein traditioneller Spendenverein sondern dient als:
- Plattform zum Austausch von Ideen, Kontakten
- Helfer bei der Organisation
Die Webseite soll Informationen über den Verein und die Veranstaltungen zur Verfügung stellen.
Link zur Seite
Beschreibung
- News
- sind in Datenbank abgelegt, die neuesten 10 werden auf der Startseite angezeigt, die restlichen im Newsarchiv (hier sind noch News aus einer alten Version der Webseite zu finden, diese wurden nicht neu formatiert (keine strikte Trennung zwischen Design und Inhalt vorhanden)
- Kalender mit den neuesten Aktionen
- Verein
- Informationen über die Idee und Ziele des Vereins
- Projekt
- Informationen zu dem aktuell unterstützen Projekt sowie Hintergrundinformationen zum jeweiligen Land bzw den dortigen Konflikten
- Mitmachen
- Informationen zu den verschiedene Stufen der Mitarbeit, die möglich sind (eigene Aktion, bei Aktionen mithelfen, Mitglied werden)
- Review
- Rückblick auf vergangene Aktionen, verliehene Preise, (finanzielle) Bilanz
- Aktionen/Presse/Links zu Fotos und Videos sind in einer Datenbank gespeichert und untereinander verbunden
- Impressum
- Links
- Informationen über (und Links auf die jeweiligen Webseiten) alle Organisationen, Künstler und sonstigen Personen die in der Vergangenheit mit Live for Life zusammengearbeitet haben
Eigenschaften
- keinerlei Verwendung von Javascript
- zahlreiche Benutzung neuer CSS3-Eigenschaften (immer unter Beachtung der Erhaltung der Funktionalität auf älteren Browsern) z.B.
- reiner CSS-Image-Slider (:target)
- keine Hintergrundbilder, ausgenommen für ältere Browser (-moz-radial-gradient. -webkit-gradient)
- weiche Öffnung des Untermenüs (transition)
- text-shadow, box-shadow, border-radius
- Webfonts, es wird die Schriftart Fontin Sans verwendet, die verschiedenen, für die unterschiedlichen Browser nötigen Fontformate wurden mit Hilfe des @font-face Generators erstellt (funktionstüchtig mindestens auf FF3.6,Chromium 9, Opera 11, IE 7-9)
- "Newsform", hiermit können Personen, die kein Html/PHP/MySql können News verfassen, die dann in die Datenbank eingefügt werden und auf der Startseite angezeigt werden (Zugriff gesichert, nur für berechtigte Personen möglich)
Die Farbgebung und insbesondere die Form und Anordnung der Menüpunkte soll die Lebensfreude und Aktivität die der Verein fördern will noch einmal verdeutlichen. Die Ähnlichkeit/das Wiederspiegeln des Logos im Menü wurde bewusst gewählt.
Entwicklung
Browserkompatibiltät
Gecko ab Version 1.9 (z.B. Firefox 3.5)
Webkit ab V. 533 (z.B. Google Chrome, Safari)
Trident ab V. 4.0 (z.B. Internet Explorer)
Presto ab V. 2.7 (z.B. Opera)
(Ab diesen Versionen wurde getestet, Lauffähigkeit auf früheren Versionen ist möglich und meist auch wahrscheinlich)
bekannte Probleme
Gecko - keine
Webkit - keine
Trident (Version 4.0 (IE8) ):
- Problem: CSS3-Pseudoklassen (z.B. last-child, target)
- Auftreten: hauptsächlich im Menü/Image-Slider
- Beschreibung: fehlende Unterstützung der CSS3-Pseudoklassen,
- die Navigation ist im Gegensatz zu anderen Browsern auf einer Linie.
- Image-Slider funktioniert aufgrund dem Fehlen von ":target" nicht
- Lösung:
- Würde sich beheben lassen, indem man jedem einzelnen Menüpunkt ein "class"-Attribut gibt und anhand diesem verschiebt, hierauf wurde verzichtet, da die Funktionalität nicht beeinträchtigt ist.
- keine effektive bekannt, unterhalb des Image-Sliders sind kleine Vorschaubilder, die durch einen Klick vergrößert betrachtet werden können, somit können auch Nutzer älterer IE-Versionen alle Bilder sehen
(im mittlerweile erschienenen IE9 tritt dieses Problem nicht mehr auf)
Presto (allgemein) :
- Problem: Bei der CSS3-Eigenschaft "box-shadow";
- Autreten: Menü (teilweise)
- Beschreibung: fehlerhafte Unterstützung von "box-shadow", der Schatten wird bei einigen Menüpunkten auf manchen Seiten "abgeschnitten"
- Lösung: keine bekannt
Presto (allgemein):
- Problem: sich über die gesamte Breite erstreckendes Hintergrundbild
- Beschreibung: es ist ein (je nach Zoomfaktor unterschiedlich breiter) weißer Balken ganz rechts zu sehen.
- Lösung: keine bekannt
Trident, Presto
- Problem: CSS3-Eigenschaft "gradient" wird nicht unterstützt, mangelhafter Ersatz durch Bild
- Autreten: Menü
- Beschreibung: Da die CSS3-Eigentschaft noch nicht unterstützt wird, wurde der Hintergrund durch ein Bild ersetzt, in Verbindung mit "box-shadow" ist hier ein kleiner weißer Ring um die Menüpunkte zu sehen (sobald man mit der Maus über einen Menüpunkt fährt)
- Lösung: Eine Möglichkeit ist es, die Hintergrundfarbe von transparent auf schwarz zu setzen, Problem dabei ist, dass dann beim IE8 und abwärts ein schwarzes Quadrat beim Überfahren der Menüpunkte erscheint.
Design/Screenshots
Techniken
- Html4
- CSS(3)
- PHP
- MySQL
Quellen / Hilfen:
HTML
CSS3 Gradient Editor
Idee für CSS Image Slider
PHP
CSS
PHP/Mysql
...und diverse andere Seiten und Foren