09.02.2010
Nachschlagewerk für HTML und CSS
Heute entdeckt bei www.webwork-tools.de.
Der CodeBurner von Sitepoint bietet eine gute HTML/CSS-Referenz, allerdings in englischer Sprache. Es gibt verschiedenen Möglichkeiten, das Angebot zu nutzen:
- als Firefox-Erweiterung
- als Firebug-Erweiterung
- als Adobe-Air-Desktop-Programm
- für das Mac-OS-Dashboard
- als Opera-Erweiterung
- (noch nicht) als Dreamweaver Plugin
Ein paar weitere Infos lest ihr am besten im oben genannten Artikel unter webwork-tools nach.
13.01.2010
Stöbere mal wieder
Und wieder war ich auf der Suche nach Informationen zur Verwendung von CSS, diesmal zum Thema Vererbung, und bin auf einer Seite gelandet, die zum Stöbern einlädt. Das möchte ich euch nicht vorenthalten. Ich kannte die Seite auch schon von früher - aber man kann ja nicht über alles den Überblick behalten …
Also hier der Link zur Web-Toolbox.
Eine kleine Übersicht über die behandelten Themen gibt die folgende Abbildung.
Die Erklärung zum Thema Vererbung war übrigens sehr verständlich formuliert und mit anschaulichen Beispielen garniert.
Viele Dank an Wilhelm Jansen
09.01.2010
CSS-Templates zeichnen - wie cool ist das denn …
Heute bin ich via webstockbox.com auf ein Online-Tool aufmerksam geworden, mit dessen Hilfe es möglich ist, css-basierte Webseiten-Templates zu zeichnen. Es nennt sich Drawter und ist unter der gleichnamigen Adresse zu finden: drawter.com. Ich habe gleich ein wenig damit rumgespielt und bin schwer beeindruckt. Der grundlegende Einstieg ist ganz einfach: Man malt die benötigten Boxen und generiert anschließend den Code - fertig. Diesen gibt es sowohl als (X)HTML/CSS-Code in einer Datei als auch in getrennten (X)HTML und CSS-Dateien.
Allerdings ist mit dem Tool noch einiges mehr an Feinarbeit möglich. Wenn ihr ein wenig damit herumexperimentiert habt, seht euch unbedingt den zugehörigen Screencast an (oder heißt es das Screencast??). Hier einige Möglichkeiten des Tools aus der Erinnerung:
- Farben festlegen
- Schriftgrößen festlegen
- Bilder einbinden
- Boxen selbst benennen
- alle möglichen Styles für unterschiedliche Elemente festlegen
- Doctype und Sprache festlegen
- …
- …
Zukünftig ist von Drawter noch mehr zu erwarten. Das gegenwärtige Tool wird als Pro-Variante bezeichnet. HTML- und CSS-Kenntnisse werden vorausgesetzt. Demnächst soll es auch eine “Amateur”-Version geben, die dies nicht erfordert. Man darf gespannt sein.
Drawter Beta 2 is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website’s code. … Each tag is presented as a layer you have drawn.
Currently Drawter is available in Pro version, which means that it is intended for webmasters use only - knowledge of HTML and CSS is required.
…
Drawter is not a tool for laymen, for the time being, but the whole team behind the project is putting every effort to launch a new version called “Amateur”. Soon you will be able to draw your websites without any knowledge of HTML or CSS. Launching soon, really soon.
18.11.2009
DIV-Suppe vermeiden
Ein Template, das sauber geschrieben ist und möglichst wenig überflüssigen Inhalt besitzt, erfreut das Herz auf vielfältige Weise. Insbesondere, wenn andere es nutzen müssen/dürfen oder man selbst nach längerer Zeit auf Fehlersuche gehen muss. Das leuchtet ein. Eine DIV-Suppe, also das massive Verwenden eigentlich überflüssiger DIV-Elemente, sollte man also möglichst vermeiden. Doch welche DIVs sind denn die überflüssigen? Das ist ja für einen Laien nicht so einfach ersichtlich.
Bei der Beantwortung dieser Frage hilft ein Artikel auf webdesignerwall.com. Coding Clean and Semantic Templates beschreibt in einfachen englischen Worten, wie die Verwendung sematischer Elemente eine DIV-Suppe zu verhindern hilft. Kleine Code-Beispiele runden den Artikel ab.
Weitere Infos:
Der Div-Wahnsinn.
—-
Abb. von hifix
13.09.2009
Cheat Sheets, Spickzettel, Kurzreferenzen
Cheat Sheets, Spickzettel, Kurzreferenzen - das sind meist einseitige Kurzübersichten zu einem bestimmten Thema. Für uns interessant sind diejenigen, die sich mit Webseitengestaltung befassen. Ich bin über Terrashop darauf gestoßen, aber natürlich gibt es diverse kostenlose Angebote im Netz. Wie so oft haben sich freundliche Mitmenschen die Mühe gemacht, Kurzreferenzen zu erstellen und diese allgemein verfügbar zu machen.
Hier ein paar ausgewählte Links zu CSS & Co:
CSS
http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
http://www.gosquared.com/liquidicity/archives/501
(X)HTML
http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/
http://www.addedbytes.com/cheat-sheets/html-character-entities-cheat-sheet/
http://www.gosquared.com/liquidicity/archives/501
http://home.uchicago.edu/~gan/file/html.pdf
JavaScript
http://www.addedbytes.com/cheat-sheets/javascript-cheat-sheet/
PHP
http://www.addedbytes.com/cheat-sheets/php-cheat-sheet/
http://www.gosquared.com/liquidicity/archives/501
… noch viel mehr
Kurzreferenzen gibt es zu vielen Themen und Programmen. Wer eine richtig fette Liste benötigt, findet diese z.B. bei Dr. Web.