13
edits
No edit summary |
No edit summary |
||
Line 22: | Line 22: | ||
Die Webseite soll Informationen über den Verein und die Veranstaltungen zur Verfügung stellen. | Die Webseite soll Informationen über den Verein und die Veranstaltungen zur Verfügung stellen. | ||
== | ==Link zur Seite== | ||
[http://www.liveforlife.de | [http://www.liveforlife.de Live for Life] | ||
==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 | |||
*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 [http://www.exljbris.com/fontinsans.html Fontin Sans] verwendet, die verschiedenen, für die unterschiedlichen Browser nötigen Fontformate wurden mit Hilfe des [http://www.fontsquirrel.com/fontface/generator @font-face Generators] erstellt (funktionstüchtig mindestens auf FF3.6,Chromium 9, Opera 11, IE 7-9) | |||
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== | ==Entwicklung== | ||
Line 31: | Line 66: | ||
[[File:lvlalt3.png|left|thumb|erweiterte Navigation, neuer Header]]<br clear="both"> | [[File:lvlalt3.png|left|thumb|erweiterte Navigation, neuer Header]]<br clear="both"> | ||
[[File:lvlalt4.png|left|thumb|komplett überarbeitete Navigation]]<br clear="both"> | [[File:lvlalt4.png|left|thumb|komplett überarbeitete Navigation]]<br clear="both"> | ||
==Browserkompatibiltät== | |||
Gecko ab Version 1.9 (z.B. Firefox 3.5)<br /> | |||
Webkit ab V. 533 (z.B. Google Chrome, Safari)<br /> | |||
Trident ab V. 4.0 (z.B. Internet Explorer)<br /> | |||
Presto ab V. 2.7 (z.B. Opera)<br /> | |||
(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== | ==Design/Screenshots== | ||
[[File:lflscreenshot1.png|left|thumb|Navigation ausgeklappt]] | [[File:lflscreenshot1.png|left|thumb|Navigation ausgeklappt]] | ||
[[File:lflscreen2.png|left|thumb|Startseite, andere Farbeschema]] | [[File:lflscreen2.png|left|thumb|Startseite, andere Farbeschema]] | ||
<br clear="all" /> | <br clear="all" /> | ||
==Techniken== | |||
*Html4 | |||
*CSS(3) | |||
*PHP | |||
*MySQL | |||
==Quellen / Hilfen:== | ==Quellen / Hilfen:== | ||
Line 48: | Line 130: | ||
[http://www.php.net/ PHP]<br /> | [http://www.php.net/ PHP]<br /> | ||
[http://www.css4you.de/ CSS] <br /> | [http://www.css4you.de/ CSS] <br /> | ||
[http://www.php-kurs.com PHP/Mysql]<br /> | |||
...und diverse andere Seiten und Foren |
edits