Syntax Highlighting

tempa wrote this 01:25:

Ich will bunte Codeschnipsel-Bereiche. Wie geht das? Die kurze Antwort ist ein Verweis auf das populäre GeSHi, den Generic Syntax Highlighter.

Die PHP-Funktion, die diese Aufgabe mittels inline styles löst, lautet: highlight_string().

  1. <?PHP
  2. $extCodeFile = "codeFolder/codeschnipsel.phps";
  3. $codeSample = <<<CODESCHNIPSEL
  4. Hier mehzeiligen Code-Schnipsel einfügen.
  5. CODESCHNIPSEL;
  6. ?>
  7. <h3>Code von externem File?</h3>
  8. <div class="codetxt">
  9. <?PHP highlight_string($extCodeFile); ?>
  10. </div>
  11. <h3>Code von HEREDOC Variable?</h3>
  12. <div class="codetxt">
  13. <?PHP highlight_string($codeSample); ?>
  14. </div>

Wer auf ein einheitliches, ungebrochenes Farbschema in seiner Site achtet und ansonsten es liebt die Kontrolle über seinen Code und sein CSS zu behalten, der wird die PHP-Funktion überarbeiten müssen. Einen sehr guten Beitrag hierzu findet man im Blog auf regexp-evaluator.de: PHP-Highlighting-Funktion verbessern.

Was ist ein Template?

tempa wrote this 00:21:

Wozu ist ein Template gut?

Gestern [geschrieben am 24 Okt. 2006] fiel mir nicht schlecht die Kinnlade herunter, als ich hörte, dass bei der Vorstellung zur Planung von größeren Projekten ein Punkt sich mit der Design-Änderung während des Projektverlaufs und der daraus resultierenden, stundenlangen Anpassung des bis dahin fertigen Zwischenstandes befasste. Da es sich dabei auch noch um einen ehemaligen Interessenten handelte, also die Templaterie bekannt sein dürfte, habe ich offensichtlich noch ein Problem Sinn und Zweck von Templates zu transportieren.

Ein Template ist ein Grid, ein Raster, eine Matrix, ein Rahmen, in den veränderliche Inhalte eingefüllt werden können. Ein gutes Template besteht nicht nur aus modularen Kopf- und Fußzeilen oder einem Seitenstreifen, den man beliebig austauschen kann. Ein gutes Template berücksichtigt auch Seitenstrukturen. Das gestrige Beispiel – eine Seite mit Kochrezepten – ist dabei eine wunderbare Ausgangssituation.

Ein Kochrezept besteht aus:

  1. Titel des Rezeptes
  2. Kategorieen wie z.B. Land, Vegetarisch,
    Dunkles Fleisch, Menufolge, etc.
  3. Abbildung des aufgetafelten Gerichtes
  4. Liste der Zutaten
  5. evt. Liste der Gerätschaften
  6. Arbeitsanweisung in x Schritten inklusive Illustrationen
  7. Rezept-Historie, Quellen, Einkauftipps

Das sind sieben verschiedene Elemente mit unterschiedlichen Anforderungen und Positionierungen und Rahmenbedingungen, welche sich in HTML-Strukturen wiederspiegeln. Jeder HTML-Struktur kann eine ID oder eine Klasse zugeordnet werden und zu jeder HTML-Struktur, zu jeder ID und zu jeder Klasse werden in der CSS Designanweisungen hinterlegt.

Was bringt es ein, ein Template von A-Z
durchzuplanen und umzusetzen?

Gerade in größeren Projekten ist die Planung und Identifizierung der Objekte, Elemente und Bausteine essentiell, um:

  1. Design-Entwicklung und Projektinhalte zusammenstellen parallel beginnen zu können
  2. Frei zu sein in der Design-Entwicklung und sich z.B. auf Sponsorenfarben einstellen zu können
  3. Im Design den Modetrends auch in den kleinen Details folgen zu können, und damit frisch und aktuell zu wirken.
  4. !Most important: Sich das stundenlange Fieseln mit Design-Änderungen in 100ten und 1.000den von Textstellen zu ersparen.

Planung und die Verwendung von Semantik für Layout-Anforderungen ist nicht nur eine Spielerei mit dem man einen CSS-Zengarden ins Netz stellen kann. Es ist bares Geld, das man spart, weil man vorher ein wenig mehr Zeit in die Meta-Ebene (dem was ist was und was bedeutet was …, welche Mengen, Grade der Bedeutsamkeit, etc.) steckt und kontinuierlich der Versuchung wiedersteht, mal g’schwind einen Inlinestyle oder schlimmer einen Font-Tag zur Gestaltung zu verwenden.

Ursprünglich gepostet am 24. Oktober 06, 13:52 in meinem Blog “Silkester erzählt”.

Es ist nicht alle Hoffnung verloren

tempa wrote this 17:30:

Es ist noch nicht alle Hoffnung für die Redmonder verloren. Nachdem die Redmonder angekündigt hatten, dass sie ohne Targeting-Metatag mit ihrem IE8 den Kopf in den IE7-Sand stecken wollten, gab es mit Recht einiges Rumoren unter den Webdesignern (auch hier). Wer seinen Job ernst nimmt, der bemüht sich mit den Seiten aktuell zu bleiben und gemäß den Standards eine Webseite in bestmöglicher Weise zu schreiben. Wer seinen Job ernst nimmt versucht hier und da die neuen Feature einzelner Browser einzubauen, wenn diese dem Design und der Funktion dienen.

Es ist nicht der gemeinsame kleinste Nenner der Webdesign vorantreibt. Es wird der gemeinsame kleinste Nenner bedient. Das ist ein gewaltiger Unterschied, den die Redmonder so langsam doch begreifen wollen.

Langer Rede kurzes Zitat:

We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously.

Quelle: MSDN.com IE-blog: Microsofts interoperability principles and IE8 via einfach für alle

Good decision!

Big-Foot im Gespaa endlich geflickt

tempa wrote this 16:04:

Der Fuß im Bigfoot des Gespaa-Wordpress-Template hat ein kleines Problem, wenn bei Kommentaren viele sehr lange Titel vorkommen, denn dann werden diese in den roten Fuß hineingeschoben, oder auch wer wie ich etwas zu heftig in der Kategorienvergabe wird … die zwei neuen Kategorien, waren dann einfach zu viel, nun war nicht mehr nur das input-Feld etwas schepps im Rot, sondern das ganze *****deite Formular und die Begriffe nur noch schwer lesbar. Langer Rede kurzer Flicken, die absolute Höhe einfach aufbrechen mit min-height achten Sie auf die Anderungen in Zeile 4:

  1. #ancillary{
  2. padding:20px 0 0 0;
  3. background: #415262;
  4. height: 440px;
  5. color:#8798A8;
  6. border-top:6px solid #7C8999;
  7. border-left:1px solid #7C8999;
  8. border-right:1px solid #7C8999;
  9. }

Die Stelle sieht dann so aus:

  1. #ancillary{
  2. padding:20px 0 0 0;
  3. background: #415262;
  4. min-height:440px;
  5. height: auto !important;
  6. height: 440px;
  7. color:#8798A8;
  8. border-top:6px solid #7C8999;
  9. border-left:1px solid #7C8999;
  10. border-right:1px solid #7C8999;
  11. }

Ein einfacher schmerzfreier Hack:

  1. min-height:440px;
  2. height: auto !important;
  3. height: 440px;

Zunächst einmal min-height für alle modernen Browser, dann die eigentlich überflüssige Anweisung „height: auto“ welche standardmäßig vorliegt, weil aber gleich im Anschluß diese überschrieben wird, hier noch ein „!important“ ergänzt, denn der IE<7 hat nicht nur ein Problem mit min-height, er hat glücklicher weise auch ein Problem mit „!important“, während andere Browser das „!important“ ernst nehmen. Eleganter und zukunftssicherer wäre es über conditional comment ein Stylesheet für den IE zu nehmen und dort die height anzugeben, damit könnte auf das „height: auto !important“ verzichtet werden, aber dazu war ich zu faul und die meisten, die wie ich das Gespaa verwenden, werden diese Ergänzung über die eingebaute Editierfunktion des Styles schnell vornehmen können.

Wer sich mein Anderungen im Quelltext genauer anschaut, wird noch zwei Anderungen feststellen, diese aber sind nicht relevant um das Problem zu flicken, sondern eher nicht bereinigte Reste meiner ersten Versuche.

Zum einen ist das in der sidbar.php in der letzten Zeile ein <div class="clear0"></div> und zum anderne im Stylesheet das dazu passende „clear0„:

  1. .clear0 {
  2. clear: both;
  3. height: 0px;
  4. width: 0;
  5. overflow: hidden;
  6. }

Aber wie gesagt, das wird man nicht brauchen. Schon die erste Anderung sollte dem Big-Foot ein felxibleres Verhalten geben.

   

Recent Comments:

  • Silke schümann { Du warst auf dieser Seite: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau http://templaterie.de/blog/931/step1-zur-archiv-thumbgalerie-via-custom-fields-marke-eigenbau/ Hier war ich noch am Basteln. Ich fürchte meine PHP-Kenntnisse sind... } – Aug 26, 9:29 AM
  • Andreas { Hey, ich habe den Code wie oben benutzt und auch $dgal = get_posts('category=1′); on der richtigen Zeile eingesetzt nur bei mir läufts immernoch nicht. Kann... } – Aug 26, 3:20 AM
  • Fred { "wer Smarty lernt, kann tatsächlich gleich auch PHP mitmachen, ich hatte es eine zeitlang auch eingesetzt, aber jetzt mach ich es wieder auf meine art... } – Jan 06, 7:14 PM
  • Silke Schümann { Das klingt nach einem Syntaxfehler in der ersten Zeile. Anführungszeichen korrekt? Und das Plugin funktioniert nur innerhalb von Editland. Die index.php ausserhalb von Editland aufzurufen... } – Jun 18, 3:40 PM
  • Jörg { Hallo, ich habe die index.php im ersten Abschitt Nr. 3 beschrieben, angelegt. Beim Aufruf der Seite wird folgende Fehlermeldung angezeigt: Parse error: parse error, unexpected... } – Jun 18, 3:14 PM
  • Michael { Gern geschehen 😉 } – Mai 29, 2:31 PM
  • Silke Schümann { Jepp. Das war's: ES tut! Lösung ist nun in einem eigenen Beitrag: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau Fertig und betriebstüchtig! 🙂 } – Mai 29, 1:25 PM
  • Michael { Wie wäre es, wenn Du die Zeile $dgal = get_posts('category=1'); auslagerst und den Rest in eine Funktion packts, der Du $dgal übergibst. Das wäre auch... } – Mai 29, 12:45 PM
  • Silke Schümann { Ich ziehe diees Variante ebenfalls vor, dovh wenn ich Code übernehmen, dann ändere ich hierfür nicht extra. Es dürfte gehzpft wei gesprungen sein, welche man... } – Mai 29, 2:00 AM
  • Ulf { ich würde bei der Syntax für Schleifen konsequent die C-ähnliche Variante mit geschweiften klammern nehmen, nicht die alternative mit Doppelpunkt und "endwhile" bzw. "endforeach". } – Mai 29, 12:00 AM
  • Silke Schümann { Ich habe ich http://franchie.de die Thumbs in der Sidebar erfolgreich ausgelesen. Ansonsten ist die Test-Umgebung unter 1a-test dot de / blog Ich will diese Adresse... } – Mai 28, 11:37 PM