Blog von Leonard Hertel, leonerd.de » HTML

Links: Episode #010

Leonard Hertel — Mon, 22 Mar 2010 16:22:03 +0000

Im 10er-Bereich der Serie angelangt, gibt es heute ein paar mehr nützliche Links für Webdesigner und Medien-Interessierte:

100 Greatest Abstract and Grunge Fonts. Hongkiat.com listet eine Reihe von kostenlosen Grunge-Fonts (Schriftarten für den Computer) auf.
50 Freebies: Download Free Grunge Fonts komplettiert die Liste der Grunge-Font-Auflistung von Hongkiat.com.
30 Free Fonts For Creative Projects ist eine vielseitige, handverlesene Kollektion frei downloadbarer Fonts.
Poshcss.com ist eine Quelle für die neuesten CSS-Techniken, -Tipps, und CSS-Tutorials. (CSS = Cascading Stylesheets)
The 5 Most Under-Used HTML Tags ist ein Artikel über HTML-Tags, die in der Praxis viel zu selten verwendet werden.
Der Artikel 300+ Essential WordPress Hacks, Tools and Frameworks that Will Change the Way You Develop Themes verweist auf viele nützliche Hacks, Ressourcen, Code-Snippets und Cheat Sheets für WordPress und Theme-Designer.
Schnell und einfach Browserdetails ermitteln kann man mit dem Webservice, welchen Jürgen Liechtenecker auf seinem Blog vorstellt.

Und hier noch was für konstruktive Pausen:

Der Flix – Flix Heldentage 2.10 ist das Comic-Tagebuch von Felix Görmann (von Anfang an)

einfaches CMS für kleine Projekte

Leonard Hertel — Sat, 12 Sep 2009 08:00:05 +0000

Durch phpjournal.de bin ich kürzlich auf ein noch in den Kinderschuhen steckendes Content Management System (CMS) -Projekt gestoßen: gp|Easy. Was CMSysteme angeht, bin ich stets auf der Suche nach neuen, besseren und einfacher zu bedienenden Lösungen. Wenn es darum geht, ein Template (Theme, bzw. Design) für ein CMS zu schreiben, stehe ich auf wenig Aufwand und schnelle Ergebnisse (WordPress finde ich zum Beispiel sehr angenehm).

Überblick

Mit derzeit 1,03 MB ist das Paket recht überschaulich. Die Installation geht im Normalfall in ca. 20 Sekunden über die Bühne und man kann sofort loslegen. Das Besondere an gp|Easy ist, dass es ohne Datenbank arbeitet und allein mit PHP 4.1 (oder höher) auskommt. Die zweite Seltenheit, welche mich noch neugieriger machte, ist, dass das CMS ebenso ohne direktes Backend auskommt. Sprich: Wenn man als Administrator/User angemeldet ist, erscheint am oberen Rand eine Toolbar mit üblichen Bearbeitungs-/Einstellungsfunktionen, der Inhalt der Seite wird in selbiger auch bearbeitet. Im angemeldeten Status erscheinen in der Seite selbst “Bearbeiten”-Schaltflächen, klickt man auf eine solche, öffnet sich dann im Inhaltsbereich ein Editor (FCKEditor) mit dem zu bearbeitenden Inhalt der ausgewählten Box.

Derzeit unterstützt das CMS zwei Seiten-Typen (normale Seite, Bildergalerie), eine Navigation (mit bis zu 3 Ebenen), ein Kontaktformular, eine Uploadfunktion und weiteres.

Einschränkungen

Wie schon erwähnt, ist das Projekt noch relativ jung (Version 1.0) und demnach noch wenig umfangreich. PlugIns gibt es noch keine und hier und da ist die ein oder andere Funktion noch nicht ganz ausgereift. Bei der Erstellung eingener Designs wird man schnell merken, dass das “Inline-Backend”-System noch nicht ganz ausgereift ist, dann kommt es schon mal vor, dass sich so manches Objekt verschiebt und der Editor sich sehr dünn machen muss.

Angesichts des Aufbaus von gp|Easy wird es heute (und auch morgen) nicht für mittlere bis große Projekte geeignet sein. Die Funktionen und der Aufbau sind meiner Meinung nach auf Portfolios und kleine About-/Einmannpages ausgerichtet; So ist es zum Beispiel vergleichsweise einfach, eine Bildergalerie (Lytebox) anzulegen, eine Newsfunktion fehlt hingegen noch komplett.

Fazit

gp|Easy setzt in vielen Punkten intuitiv an, stößt aber schnell an seine Grenzen. Für Minisites bis Portfolios eignet es sich jedoch gut.

Tutorial: Templates für gp|Easy erstellen

…Ist eigentlich ziemlich einfach! Im Themes-Ordner findet man schon drei Beispiele, wie es funktionieren kann.
(dieses Tutorial dient nur dem schnellen Einstieg in gp|Easy und soll keine ausführliche Hilfe für HTML/CSS/PHP-Einsteiger sein, es wird nur die Funktionsweise von gp|Easy erläutert)

Dateien anlegen

Im ersten Schritt werden zwei Dateien und zwei Ordner angelegt:

Im Ordner themes wird ein Ordner angelegt, der den Namen eures Designs trägt.
In diesem neuen Ordner wird nun eine template.php und ein weiterer Ordner platziert, dieser kann beispielsweise css benannt werden.
Zum Schluss wird im css-Ordner noch eine Datei style.css angelegt.

Der Aufbau von gp|Easy

GetHead(); ?> kommt zwischen und , enthält META-Informationen und die Administrator-Optionen.
GetFullMenu(); ?> Gibt das komplette Menü (bis zu drei Ebenen) im Stile einer unsortierten Liste (
) aus.
GetMenu(); ?> Gibt die erste Ebene des Menüs im Stile einer herkömmlichen, unsortierten Liste aus.
GetSubMenu(); ?> Gibt nur die Menüpunkte ab der zweiten (bis zur dritten) Ebene aus.
GetContent(); ?> Gibt den Inhalt aus.
GetAdminLink(); ?> Zeigt einen “Sitepmap”-, “Login”-, und “Powered by”-Link hintereinander an.

Es lassen sich auch leicht eigene “Inhaltsfelder” (wie: GetContent(); ?>) zum Beispiel für den Header oder Footer der Site erschaffen. Zum generieren eines solchen Inhaltsfeldes muss nur ein Code-Schnipsel wie folgender eingefügt werden: GetExtra(‘MeinInhalt’); ?> An der Stelle erscheint dann ebenfalls ein Bearbeiten-Button und es wird automatisch eine Datei für dieses Feld angelegt.

Im Grunde muss man bei der Erstellung eines Themes nur darauf achten, dass man allgemeine Richtlinien, wie zum Beispiel das Erstellen von Menüs mit Listen-Elementen, beachtet. Die Struktur des Codes kann beliebig sein, da wo Inhalt erscheinen soll, werden lediglich die oben genannten PHP-Schnipsel eingebunden.

Wichtige CSS-Klassen

Gibt es eigentlich kaum welche. Bei der Erstellung des Themes muss allerdings etwas darauf geachtet werden, dass man nicht zu Global auszeichnet, da sich die Administrationselemente leicht in ihrem Aussehen beeinflussen lassen.

Die Galerie ist ziemlich stark vorformatiert, folgende Klassen verändern die Darstellung einer “Gallery”-Seite:
.gp_gallery{}, .gp_gallery img{}, .gp_gallery div{}, .gp_gallery li{}
Folgende Klasse hebt den aktiven Menüpunkt hervor:
.selected{}

Ich werde gp|Easy auf jeden Fall (probeweise) mal für das ein oder andere kleine Projekt verwenden, wo ein System wie WordPress, Joomla!, oder gar Typo3 einfach viel – viel zu mächtig wäre.

Links: Episode #004

Leonard Hertel — Sat, 18 Jul 2009 10:00:18 +0000

Heute gibt es mal wieder eine neue Ausgabe der Links-Serie, Schwerpunkt ist diesmal Webdesign:

SmashingMagazine.com behandelt in einem ausführlichen Artikel die Neuheiten und Vorteile von HTML5.
Ryan hat auf Webitect.net eine, wie ich finde, beeindruckend lange und gute Liste mit WordPress-Plugins veröffentlicht.
5 Ways to instantly write better CSS ist ein Artikel von Travor Davis, veröffentlicht auf NetTuts.com. Empfehlenswert für jeden CSS-Schreibenden.
CSS-Hamster.de ist eine von wenigen deutschen “gib mir Inspiration”-Websites. Gar nicht mal schlecht!
Für die Allgemeinheit, die mit den ersten Empfehlungen heute nichts anfangen konnten: GarfieldMinusGarfield.net – sehr amüsant!

Opera 10 kommt

Leonard Hertel — Wed, 03 Jun 2009 13:11:45 +0000

…in großen Schritten. Nach der Veröffentlichung der Alpha-Version Ende letzten Jahres, wurde heute, ein halbes Jahr später, die erste Beta des neuen Browsers zum Download bereitgestellt. Nachdem ich mich ein halbes Jahr lang erfolgreich vor der Alpha-Version drücken konnte, ich wollte die Vorfreude auf die finale Version nicht verlieren, konnte ich mich heute nicht mehr länger zurück halten.

Das neue Design

Die Aufteilung und einige Elemente wurden aus der “alten” Version, teils leicht abgeändert, übernommen; der neue Browser kommt im Ganzen nicht mehr so “3D-Plastik-mäßig” herüber, sondern eher platt. Elemente wie die Tableiste erinnern nun leicht an den Firefox-/Apple-Style, vertikal nun etwas schmaler, wenn man möchte. Denn die Tableiste lässt sich nun in ihrer Höhe frei skalieren: Hat die Leiste eine gewisse Höhe erreicht, werden Vorschaubilder der inaktiven und des aktiven Tabs angezeigt, für große Bildschirme ein tolles Feature, für Netbooks vielleicht nicht zu empfehlen.

Opera Mail

Der Opera Mail-Client, welcher ganz nebenbei grandios ist, bietet nun endlich auch die Möglichkeit HTML-Mails (anpassen des Textes fast wie in bspw. Word) zu versenden und nicht nur zu empfangen. Da der Client in den Browser integriert ist und nun auch dieses neue Feature bietet, HTML-Mails zu verfassen, werden sich hoffentlich einige User zu Opera umorientieren ;-)

Offiziell bitte Opera Version 9.80

Opera war einer der ersten Browser überhaupt und ist demnach nun schon (als erster) fast bei Version 10 angekommen. Dies ist nicht nur toll, es wirft auch Probleme auf: Der sogenannte “User Agent” hat Probleme bei der Erkennung der zweistelligen Versionsnummer “10″, daher hat sich Opera dazu entschieden, Version 10 für den “User Agent” in Version 9.80 umzubenennen. Craig Buckler erklärt dies in seinem Artikel “Why Opera 10’s User Agent Smells Bad” (englisch) auf sitepoint.com für alle interessierten noch einmal genauer.

Plain and useful

Leonard Hertel — Wed, 11 Mar 2009 14:11:47 +0000

Wenn man viel mit Quellcode in Form von HTML, CSS, PHP etc. in Kontakt ist, gibt es Zeiten in denen man mit dem verwendeten Text-Editor (grundlos) nicht mehr zufrieden ist, in den meisten Fällen geht dann die Suche nach Alternativ-Software los. Kostenlos, umfangreich, leicht zu bedienen. Diese und weitere Merkmale soll der Editor haben - allerdings versprechen die meisten mehr, als sie halten können.

Anfangs war ich Verfechter des absolut funktionsarmen, aber schnellen Notepad-Editors von Microsoft®, welcher bei Auslieferung des Betriebssystems Windows® von Microsoft® standardmäßig dabei ist. Da dieser Editor weder eine Syntaxhervorhebung hat, noch das Arbeiten mit mehreren Dokumenten in einer Programminstanz unterstützt, habe auch ich mich bald nach Alternativen umgeschaut.

Vor gut einem Jahr bin ich schließlich auf PlainEdit von Werner Rumpeltesz gestoßen. Wegzudenken ist der Editor für mich heute nicht mehr, er bietet all das was man zum Schreiben von Quelltext braucht, verzichtet aber auf für den (zufuß gehenden) Webdesigner überflüssigen Schnickschnack. Das ganze ist portable, kann also per USB-Stick, oder externer Festplatte verschleppt werden. Das Programm gibt es als normale und als .NET Version (Microsoft® .NET Framework 3.5 erforderlich).

Meine favorisierten Funktionen und Eigenschaften

Anpassbare Syntaxhervorhebung (HTML, CSS, PHP etc. + 300 weitere im Zusatzpaket erhältlich)
Automatische Sonderzeichenumwandlung (in entsprechende HTML-Kodierungen) bei Eingabe, oder nachträglich für das gesamte Dokument
individuelle Erstellung von Vorlagen (bspw. HTML-Grundgerüst)
Kommt ohne Installation aus
Mehrere Datein in einer Programminstanz bearbeiten

Jedem, der dieses Programm verwendet, oder nun testet, empfehle ich kurz in die Programm-Einstellungen zu schauen, dort können auch Verknüpfungen für das Startmenü und das Kontextmenü angelegt werden.