Archiv für die Kategorie „Markup“

Sample Markup for CSS Authors

Freitag, 9. Oktober 2009

Have you ever written a CSS file? Have you heard about this “lorem ipsum” thing? Or do you regularly transform designs into CSS & XHTML? If you answer one of these questions with ‘yes’, then this is for you.

What is the first thing you do when it’s time to create a new CSS file? You might start from scratch with a blank CSS every time. You might use Eric Meyer’s reset.css. You might probably work with one of the numerous CSS-frameworks, such as Blueprint CSS or YAML or even use the CSS stuff from that YUI framework. You might even start with your CMS’s standard theme and adjust things from there…

One thing you might forget when you hack in the first lines of CSS (and this happens to the best of us) is to use reallife markup instead of that boring “Lorem ipsum…” designers seem to have a faible for. This is where this markup snippet comes into play: it should help you with filling your wireframe layout with some actual HTML-markup.

So just plain HTML, huh?

This snippet provides a wide range of commonly used markup, that should be supported by most rich editors (a.k.a. WYSIWYG editors).
Since every coder has his own preferences towards class names. I decided to leave out the fancy stuff you could do with classes at all, as this would force some people to spot, delete, or rename those classes afterwards, which would be counterproductive. So this is plain HTML.

Download

Since each and every CMS treats the markup you insert into its page editor differently, I decided to provide both: a version with regular HTML and one without the paragraphs for those CMS that come with their own paragrapher-functionality.
Sample Markup v0.1 (text file, 8 KB)
Sample Markup v0.1 without paragraphs (text file, 8 KB)

Some notes: the HTML-elements included in the snippet are: p, a, abbr, acronym, samp, code, pre, ol, ul, li, blockquote, cite, q, table, caption, thead, tfoot, tbody, tr, td, th, em, strong, sup, sub, div, span

That’s basically it. Just create a code snippet in your favorite editor and remember: Sample markup is the new lorem ipsum.
Am I missing something? Looking forward your improvement suggestions.

Changelog:
v0.1 Initial version. (2009-10-9)

WYSIWYG-Editoren im Vergleich

Donnerstag, 8. November 2007

Auf der Webseite "Editoren im Vergleich" nimmt sich das BIK-Projekt (siehe unten) den gängigsten WYSIWYG-Editoren an. "Lassen sich mit Ihnen Inhalte einfach und barrierefreie - also standardskonform ins Netz stellen?
Im Speziellen und ausschließlich werden Online-Editoren unter die Lupe genommen die in Redaktionssystemen verwendet werden um Inhalte zu publizieren - nicht zu verwechseln mit den gleichnamigen Programmen die zum Erstellen von kompletten Webseiten verwendet werden können. Ein großes Lob muss man Tiffany Wyatt von der Firma feld.wald.wiese aussprechen, denn sie hat sich die Mühe gemacht und die aktuelle Version 2.0 von XStandard im Detail angesehen und mittels der von BIK erarbeiteten Prüfkriterien (Word-Dokument) getestet.

Hier gibt es ihre Ergebnisse: Editoren im Test: XStandard Pro 2

Auch wenn mich die Probleme, die beim Test von Copy & Paste aus Microsoft Word auftraten überraschten, kann es mit den geplanten Test zum FCKEditor und TinyMCE nur schlechter werden: das zeigte Anfang des Jahres bereits der Vergleich von Peter Krantz der hier zu finden ist (engl.). Dort sah die Rangliste im Februar folgendermaßen aus:

  1. XStandard
  2. EditOnPro
  3. TinyMCE
  4. FCK-editor
  5. WYMeditor
  6. Loki
  7. Xinha
  8. Cute Editor

Suchmaschinenoptimierung ohne Webseite

Samstag, 23. Juni 2007

Der folgende Artikel ist etwas älter. Er liegt seit etwas mehr als einem dreiviertel Jahr als Entwurf herum. Und weil Artikel nicht wie Wein sind - sie reifen nicht ohne zutun ;) - ist das doch ein guter Zeitpunkt ihn mal flink überarbeitet zu veröffentlichen, nein? Mein Plädoyer gegen den ganz alltäglichen Suchfrust. Adressiert an die Entscheider in mittleren, kleinen oder noch kleineren Unternehmen.

Betrachtet man die Ergebnisse, die die Suchmaschine seiner Wahl für “Suchmaschinenoptimierung” oder “SEO” ausspucken bekommt man angesichts mehrerer Millionen Ergebnisse den Eindruck, dass sich eine riesige Branche dem Ziel verschrieben hat, die Webseiten ihrer Kunden auf die oberen Plätze der Search Engines zu hieven. Das ist auch so (und das ist auch gut so). Dass auf dem Gebiet viel professionelle Arbeit geleistet wird ist Tatsache - auch wenn regelmäßige Spammails eine andere Sprache sprechen. Schwarze Schafe gibt es überall. Nun können kleinere Internetagenturen oder Freelance-Webdesigner nur schwer das gesamte Spektrum modernen Webdesigns abdecken. Semantisches Markup, die Trennung von Inhalt und Gestaltung mittels Stilvorlagen (CSS) sind die Grundwerkzeuge die jeder Webdesigner beherrscht. Doch zu modernen Webseiten gehört weitaus mehr.
Je nach Möglichkeit sich zu spezialisieren, können aber auch andere Aspekte der Webseitenerstellung wie DOM-Scripting (Javascript Frameworks, AJAX, etc), insbesondere Programmierung oder die Arbeit mit oder die Einarbeitung in gar die Weiterentwicklung von Redaktionssystemen einen nicht unerheblichen Teil der Arbeit darstellen. Niemand kann Experte auf allen Gebieten sein - allein der Zeitaufwand sich in ein paar der Gebiete auf dem Laufenden zu halten ist immens und könnte den Eindruck vermitteln Webdesigner surfen nur… Während Grundkenntnisse über Suchmaschinenoptimierung bei jedem Webdesigner vorhanden sein sollten - schließlich überschneiden sich hier beide Themen: semantisches Markup mit (X)HTML hat einen großen Einfluß auf die Positionierung - hat der Griff zum Suchmaschinenexperten auf jeden Fall seine Berechtigung. Valid ist nicht Suchmaschinen-optimiert. Und Suchmaschinenoptimierung ohne an Markup, Inhalte oder Struktur Hand anzulegen funktioniert nicht. (Wird einem zu kostenpflichtigen Eintragungen in Linkfarmen, Verzeichnissen etc. geraten sollten die Alarmglocken läuten).
Die sogenannte “Search Engine Optimization” zielt auf ein möglichst gutes Ranking, also eine möglichst gute Platzierung einer bestehenden Webseite ab. (weiterlesen…)

Gründe für sauberes HTML

Donnerstag, 10. August 2006

Sauberer Code interessiert keinen Otto-Normal Internetnutzer (genausowenig wie das Ergebnis eines oder besser mehrerer Validatoren, als Begründung für guten Code ausreicht!)
Wer heute Tabellenkonstrukte oder gar Frames beim Schreiben seiner Webseite nutzt wird diese (in aller Regel) trotzdem in jedem Browser ansehn können. Würden die modernen Browser (firefox, opera, safari, etc.) proprietäres Markup einfach ignorieren würde kaum ein Unentschlossener von einem alten Browser (zb IE) zu diesen neuen Alternativen wechseln, sie verwenden und dann auch bei diesen bleiben. Stichpunkt “Der Browser XY stellt das falsch dar!” (weiterlesen…)

einheitlicheres Markup für Weblog-Designs

Donnerstag, 10. August 2006

Wie Majordojo berichtet sollen Wordpress-Themes künftig einheitliches Markup bekommen. Damit wird es wohl mehr Ordnung in Wordpress-Themes geben, und die teilweise chaotischen (und teilweise fehlerbehafteten) Konstrukte der Vergangenheit angehören. Ein Vorbild nimmt man sich dabei an den Vorlagen für den Movable Type Design Contest Link. Damit wird es möglich das Design des Blogs mit nur einer einzigen Datei zu wechseln (was ja an sich keine neue Idee ist, Styles in Form einer einzigen CSS-Datei gab es ja auch in Wordpress 1.5 schon - nur dass es dabei noch keine Dateistruktur für Hintergrundbilder gab). Nimmt man Hintergrundbilder dazu käme man künftig immernoch sortierter zum neuen Blogdesign. Auch bei Type Pad ist der Gedanke entstanden. Bis die Grundvorlagen aber für Wordpress portiert sind, wird es wohl noch eine Zeit dauern. Mal sehen ob ich dazu komme und Lightpress-Versionen schneller hinbekomme (einfacher als Wordpress-Themes wären sie ja…)
via Ludo - Qix.it