Masken & Quellen – Beispiele erklären und wie man es macht

Vorwort

Wenn man einen Blog betreibt, schreibt man meist über ein Thema. Sport, Freizeit, Politik, Filme, Bücher, Reisen… Manche Leute, wie auch ich, schreiben zu allen möglichen und unmöglichen Dingen.  🙄 Und ich überlegte welches Thema ich als nächstes “durchkaue”. Der Urlaub ist fast zu Ende. Da komme ich dann auch weniger dazu ihn zu füllen. Über was also schreiben?

Gestern stieß ich auf einen Beitrag, der um Tools für das “highlighten” von “Code Snippets” handelt. Auf gut Deutsch:

Dokumentationswerkzeuge zur Darstellung von Programmier- und Auszeichnungssprachen oder Teilen von diesen zur darstellenden Erklärung.

Braucht nicht jeder. Vor Allem dann nicht, wenn er nicht über Quelltexte, Formeln zu Berechnungen berichtet. Ich werde das hin und wieder mal machen, also interessiert es mich.

Der Blogbetreiber schrieb über seine Erfahrungen mit diesen Tools, unter dem Gesichtspunkten von der optimalen Darstellung und auch Systemanforderungen und Auslastung für Betreiber von WordPress Blogs. (solche, die wie ich ihre Blogs selber hosten und mit den PlugIns von wordpress.org arbeiten). Ich fand den Artikel sehr gelungen und dachte an ferne Zeiten, wo man über Foren und andere Plattformen Wissen weitergeben wollte.

Informieren und Dokumentieren

Wir leben in einer Zeit, wo sich Informationen schnell verbreiten sollen. Es sollten:

  • die richtigen Informationen,
  • sie sollten kurz und deutlich erklärt,
  • sie sollten übersichtlich und nach Möglichkeit gut strukturiert sein

Und auch, der es erklärt, hat auch nicht alle Zeit der Welt dazu.

Doch was hat das mit Masken und Quellen zu tun?

Im Beitragsbild sieht man, außer den bescheuerten formschönen Halloween Masken zwei Dinge:

Einen Text (Quelltext einer HTML Datei) und die Umsetzung dieser im Browser.

Hier an diesem Beispiel soll gezeigt werden, wie man eine

Überschrift 2. Ordnung

umsetzt. Das ganze geht so, wenn man folgenden Quelltext eingibt

<h2>Überschrift 2.Ordnung</h2>

Diese Darstellung wurde mit dem empfohlenen Plugin “Prism for WP” realisiert. 😆 Ich brauchte also den so dargestellten Quelltext nicht maskieren und es ging schnell von der Hand. Jedoch ist das PlugIn nicht völlig kompartibel mit der aktuellen WP Version.

Im Vergleich dazu, wenn man alles manuell per Hand tippt (also ohne das Plugin), sieht dass so aus:

erklaerung-editor
Das ist mit “Maskierung” gemeint. Um eine “<” Klammer darzustellen muss man diese mittels “&lt;” diese Klammer “>” mit “&gt;” maskieren. Damit ein “&” nicht so umgesetzt wird mit “&amp;” maskieren usw. Dauert also manuell etwas länger, auch wenn man Suchen und Ersetzen wählt.

Hierzu verwendete ich offline meinen Lieblings Editor “PSPad”. Im internen Browser dieses Editors wurde es wie folgt umgesetzt:

So sieht die Umsetzung mit dem Browser aus.
So sieht die Umsetzung mit dem Browser aus.

Also so sah dass damals aus, wenn man über ein HTML fähiges Forum jemanden etwas zeigen wollte. Wollte dieser es wiederum anderen zeigen, musste man ihn auch zeigen, wie man die Zeichen so maskiert, damit er nicht direkt umgesetzt wird. 😥

Ich finde es jedenfalls schön, dass Plugin Entwickler auch an Menschen denken, die nur mal schnell etwas erklären oder dokumentieren wollen. Ich verlinke hier nochmals auf den Blogbeitrag, der über solche Tools Einblick bot.

 
Teile es:

Das HTML5 Handbuch…

Gestern habe ich es mir bestellt, das “HTML5 Handbuch” von Stefan Münz und Clemens Gull. Morgen sollte es dann im Verlaufe des Tages da sein, ich bin gespannt.

Stefan Münz begleitet mich nun schon seit dem Jahr 2000. Nicht in Person, sondern seine Werke 😉 . Über “SelfHTML (Link öffnet sich im neuen Fenster/Tabulator)” lernte ich damals mittels Quellcode Websites normgerecht zu erstellen, sodass sie möglichst Browserkonform rüberkommen und egal ob man sie mit (damals waren es hauptsächlich Internet Explorer oder Netscape Navigator, Mosaic, Opera, Conqueror…) betrachtet werden.

Mein erster Versuch 1999 eine Website mit einen Tool zu erstellen war blanke Ernüchterung. Zuhause sah alles so wunderschön aus, glühende Schattenschrift, großer Laufschrift.. doch ich sah auf anderen PC Bildschirmen, wie “unschön” es dort rüberkam. Statt glühende Schriften, schwarzer Text auf schwarzen Hintergrund, statt Fließtext – Text der den Browser unerträglich in die Länge zog – es war schlichtweg entsetzlich. Und es war auch nicht überall möglich Java Apleets dargestellt zu bekommen. Mit Java strukturierte ich mein Navigationsmenü, konnte man Java nicht installieren, kam man auch nicht weiter… Ich lebte damals in den Glauben, dass überall alles so ausieht, wie ich es zuhause entwickelte. Ein Irrglaube! HTML, CSS und Javascript so anwenden, dass es überall gleich aussieht ist eine Lernsache.

Auch wenn Stefan Münz seit 2005 sich nicht mehr an diesen Projekt beteiligt und dieser Standart sehr veraltet ist ein Blick auf SelfHTML ist immer noch lohnenswert.

HTML 5 ist jetzt neuer Standart, wurde auch Zeit, dass man mittels HTML jetzt auch als Alternative zu Fash Videos, Audios und andere Multimediainhalte auf seine Seiten einbinden kann. Die Zeit ist nicht stehen geblieben. Und so dachte ich es ist mal eine gute Investition dieses 816 Seiten starke Buch zu ergattern, auch wenn es nicht gerade sehr billig, seinen Preis aber durchaus Wert ist. Gerade wer sich verstärkt sich mit Webdesign beschäftigt, das notwendige “1*1” Schritt für Schritt lernen möchte, braucht auch Literatur jenseits des Bildschirmes, es ist aber auch in Kindleversion preiswerter erhältlich. Es braucht schon einiges an Zeit sich mit diesen Thema zu beschäftigen.

Über das Bild können übrigens auch interessierte Leserinnen und Leser sich dieses Buch bei Amazon ordern 🙂

 
Teile es: