Follow Me On The Web!
Archiv für die Kategorie ‘Webdesign’
Neue Website auf WordPress-Basis: kliniksprecher.de
WordPress: Vom Blog- zum Content-Management-System
In den letzten Jahren hat sich WordPress vom Blog- zum kleinen aber feinen Content-Management-System gemausert. Zudem kann WordPress mit einem sehr intuitiv zu bedienenden Backend punkten, das sich auch CMS-Neulingen schnell erschließt.
Für die Umsetzung des aktuellen Projekts beziehungsweise des gegebenen Webdesigns mit WordPress war dennoch viel Handarbeit nötig. So wurde beipielsweise eine Drop-Down-Navigation implementiert, die unter modernen Browsern auch ohne JavaScript funktioniert. Zudem waren ein Dutzend zusätzlicher Plug-ins nötig, um den vom Kunden gewünschten Funktionsumfang zu realisieren. Neben Erweiterungen für die Tag-Wolke betraf dies vor allem Kommentar- und Anmeldeformulare wie auch die Anzeige der “Meist gelesenen”-Artikel.
CSS-Hack: min-height-Eigenschaft für den Internet Explorer 6
Die Liste der Bugs und Hacks für den Internet Explorer 6 (IE6) ist lang. Immerhin für die fehlende Unterstützung der CSS-Eigenschaft “min-height” gibt es einen brauchbaren CSS-Hack:
.mein-min-height-element {
min-height: 250px;
height: auto !important;
height: 250px;
}
Webdesign mit CSS3: Transparenz
Insbesondere in Hinblick auf modernes Webdesign hat CSS3 einiges zu bieten. Schade nur, dass die Entwicklung von CSS3 sowie die Integration in die Browser nur zögerlich vorangeht.
Eines der sicherlich am meisten in aktuellen Webdesigns eingesetzten CSS3-Features sind Transparenzeffekte respektive halbtransparente Elemente. Zur Regulierung der Transparenz von Seitenelementen bietet CSS3 Webdesignern die Eigenschaft “opacity”, gefolgt von einer Gleitkommazahl zwischen null und eins. Eins bedeutet dabei vollständig deckend, null bedeutet vollständig transparent.
Um nun beispielsweise ein DIV-Blockelement halbtransparent erscheinen zu lassen, genügt die folgende CSS-Angabe:
div {opacity:0.5}
Wie üblich braucht es für den Internet Explorer einen Sonderweg über die “filter”-Eigenschaft. Dabei ist zu beachten, das der Transparenzwert in diesem Fall prozentual anzugeben ist:
div {filter: Alpha(opacity=50)}
Last but not least bestünde auch noch die Möglichkeit, den Transparenzwert via “rgba()” zu implementieren. Doch zum einen unterstützt dies der Internet Explorer nicht und zum anderen vererben sich rgba()-Eigenschaften nicht auf Kindelemente.
Anspruchsvolles Webdesign mit Typo3: moderne Drop-down-Menüs
Anspruchvolles Webdesign mit Typo3: komplexe Drop-down-Menüs
Dass unter Typo3 die Gestaltungsmöglichkeiten von Menüs dank TypoScript enorm flexibel sind, ist gemeinhin bekannt. Wir wollten es genau wissen und haben ein komplexes Drop-down-Menü für Typo3 erstellt.
Dabei konnten wir etwa 90% der Drop-down-Menü-Funktionalität allein mit TypoScript umsetzen, ohne auch nur eine Zeile PHP-Code schreiben zu müssen. Für die restlichen 10% genügten dann rund zehn Zeilen PHP-Code, den wir mittels der TypoScript-Funktion “itemArrayProcFunc” in den Menü-Rendering-Prozess einschleusten – ein Hoch auf Typo3 
Des Weiteren haben wir das Menü so implementiert, dass die Darstellung/Funktionalität unter modernen Browsern allein auf CSS-Basis gelingt und gänzlich ohne JavaScript auskommt. Lediglich für den Internet Explorer 6 mussten wir auf JavaScript zurückgreifen.
[UPDATE]
Inzwischen haben wir den Code optimiert und stellen diesen der Typo3-Community zur Verfügung:
Neue Typo3-Extension: Scrollable for Typo3
Typo3-Extension: Scrollable for Typo3
Unsere neue Typo3-Extension “Scrollable for Typo3” wurde als moderne Bildergalerie-Extension entwickelt und sticht vor allem durch das moderne Webdesign hervor.
Die Typo3-Extension enthält mehrere Scroll-Elemente, wobei Miniatur- und Einzelansicht miteinander verknüpft sind: Ein Klick auf eine der Miniaturansichten lässt die Einzelansicht automatisch sanft an die entsprechende Position scrollen. Zusätzlich besteht die Möglichkeit, innerhalb der Einzelansicht direkt vor- und zurückzuscrollen.
Bilder mit und ohne JavaScript vorladen
Wer kennt das nicht: Beim Klick auf eine Miniaturvorschau oder beim Überfahren von grafischen Navigationsschaltflächen dauert es eine kleine Ewigkeit, bis die angeforderten Bilddateien im Webbrowser beziehungsweise im Browser-Cache bereitsteht – insbesondere bei Navigationsschaltflächen kann das mitunter sehr nervig sein.
Als Lösung für Navigationsschaltflächen kommen vor allem zwei Techniken in Frage. Die erste Möglichkeit besteht darin, die entsprechenden Bilddateien beim Laden der Seite via JavaScript im Hintergrund vorzuladen.
Dazu genügt ein kurzes JavaScript-Snippet, das wie folgt aussehen könnte:
var bilderverzeichnis = “images/”;
for(var zaehler = 0; zaehler < bildernamen.length; zaehler += 1) {
pic = new Image();
pic.src = bilderverzeichnis + bildernamen[zaehler] + ‘.jpg’};
Ist JavaScript allerdings im Browser des Besuchers deaktiviert, funktioniert die Lösung nicht. Zudem bedeutet das Implementieren und Anpassen des JavaScript-Codes zusätzliche Arbeit.
Als Alternative bietet sich für grafische Menüschaltflächen die so genannte “Sprite”-Technik an. Hier genügt ein einzelnes Master-Bild sowie etwas CSS, um den gleichen Effekt zu erreichen.