Beiträge mit dem Schlagwort ‘Templates’

25. Februar 2010

CSS-Frameworks

css-framework-header

Was sind CSS-Frameworks und wo braucht man die “Dinger”? Das sind die Fragen, die oft im Zusammenhang mit den nützlichen Frameworks auftauchen. War im Web 1.0 CSS mehr als Schrift und Tabellenformatierung verwendet worden, hat sich das in den letzten Jahren immer mehr verändert.

Im Web 2.0 werden fast immer die kompletten Websites über CSS Positionierung gestaltet und designed. Wie bereits im Web 1.0, ist immer noch ein deutlicher Unterschied erkennbar, wie die einzelnen Browser mit CSS umgehen (hierzu gibt es Tonen an speziellem  Material im WWW, deshalb lass ich das einfach mal so stehen).

CSS-Frameworks beschäftigen sich in Summe damit, eine entsprechend einfache und trotzdem browserübergreifende Gestaltung zu ermöglichen und zwar nicht nur für ausgesprochene CSS Spezialisten, sondern bereits für den ambitionierten Hobby WebDesigner.

Was alle nachfolgenden Frameworks gemeinsam haben, ist die Tatsache, dass sich diese mehr oder weniger an einem Raster-System (Grid) orientieren um Elemente entsprechend auf der Seite zu positionieren. Je nach verwendetem System kann dies mehr oder weniger komfortabel von statten gehen.

Nachfolgend mal eine Übersicht über die vier großen Frameworks, die in vielen Projekten Verwendung finden:

Blueprint

blueprint

Das Blueprint CSS Framework besteht aus 24 Spalten mit einer Breite von 30 Pixeln + jeweils 10 Pixeln Freiraum zwischen den einzelnen Spalten. Dadurch ergibt sich für das Basis-Framework eine feste Seitenbreite von 950 Pixeln. Im Downloadpaket enthalten sind zusätzlich eine gut aufgebaute Typography – CSS Datei, sowie eine gute Formatierung für Formulare. Die Dateien sind sowohl in einem lesbaren Format vorhanden, als auch zusammengefasst in einer Datei um die Ladezeiten entsprechend zu reduzieren. Wer eigene Blueprint basierende Dateien erstellen will, findet sogar einen entsprechend verwendbaren Kompressor. Durch letzteres ist es möglich ein individuelles Blueprint zu erstellen und auf den ganzen Balast einer “Download-Lösung” zu verzichten.

9. Januar 2009

Joomla Toolbox

joomla Das Smashing-Magazine hat vor kurzem den Beitrag “Joomla Developer Toolbox” veröffentlicht. Dort findet Ihr viele interessante Links zu Entwicklungstutorials für eigene Templates und wie ihr mit diesen umgeht (Variablen, Modulaufrufe etc.), aber auch zu Komponenten, eigenen 404 Seiten, Datenbank-Hacks etc. In Summe hat das Smashing Magazine den Beitrag wie folgt gegliedert:

  1. Official Ressource
  2. Getting Startet
  3. Tutorials (untergliedert in weitere Punkte wie das Arbeiten mit Templates, mit Modulen und Plug-Ins oder mit der Datenbank)
  4. Joomla Templates
  5. Extensions, Plug-Ins, Add-Ons
  6. Inspiration
  7. Compared to Other CMS’
  8. Developer Ressources

In Summe werden in dem Beitrag viele populäre Ressourcen für die Nutzung bzw. Wartung und Aufsetzen einer Joomla Seite genannt. Allerdings muss man sagen, dass einige der genannten Seiten sich noch mit der älteren Joomla Version 1.0.x beschäftigen.

Wer sich in Summe zu verschiedenen Seiten einer Joomla Installation den Überblick verschaffen will oder eben Lösungen zu gewissen Basisproblemen einer Joomla powered Site sucht, dem kann ich an dieser Stelle nur das Openbook von Galileocomputing ans Herz legen.

9783898428811

Joomla Experten werden hier zwar keine grandiosen Neuerungen finden, als Nachschlagewerk und für den ambitionierten Einsteiger ist das Buch aber auf jeden Fall geeignet UND es ist umsonst im Internet lesbar.

29. Dezember 2008

Photoshop Browser Templates

browser_psds Viele gestalten Webseiten erst in Photoshop, um diese dann Stück für Stück in HTML und CSS zu übernehmen. Ich hatte oft das Problem, das Websites, die man im Roh-Photoshop-Stadium zeigt, wenig mit der eigentlich Browser Darstellung zu tun haben. Grund ist einfach, dass die Websites nicht in einem Browser angezeigt werden und sich viele ungeübte mit dieser Darstellung schwer tun.

Dabei sind mir im Web zwei Seiten aufgefallen, die Browser-Templates für Photoshop zum kostenlosen Download anbieten. Beim Webdesigner Toolkit gibt’s Browser bis Firefox 1.5, Opera 8.5 bzw. IE5 für Windows und Safari 2.0, IE 5.2 bzw. ebenfalls Firefox 1.5 für Mac OS X (sind noch einige andere dabei, die ich hier nicht aufzähle).

browser_templates

Aktuellere Modelle von Browsern gibt es bei Piksels, mit von der Partie sind hier der Firefox und IE als Windows und Mac-Variante in verschiedenen Auflösungen.

Bei beiden Downloads ist es möglich die Adresszeile zu editieren, Titel, sowie Scrollbars und Favicon zu bearbeiten.

Ach ja, bei Webdesigner Toolkit gibt’s auch noch Form-Elemente für Photoshop, die man direkt in einer PSD-Datei verwenden kann um die Browser Input-Fields darzustellen.

Quelle:
http://piksels.com/photoshop-browser-templates/
http://www.webdesignerstoolkit.com/