PHP & JS – perun.net http://www.perun.net WordPress & Webwork Mon, 23 May 2016 15:33:02 +0000 de-DE hourly 1 https://wordpress.org/?v=4.5.2 Javascript: ein ganz einfaches Toggle-Script http://www.perun.net/2012/10/06/javascript-ein-ganz-einfaches-toggle-script/ http://www.perun.net/2012/10/06/javascript-ein-ganz-einfaches-toggle-script/#comments Sat, 06 Oct 2012 12:21:25 +0000 http://www.perun.net/?p=4480 Ich war neulich auf der Suche nach einem ganz einfachen Toggle-Script. Unter Toggle-Scripten versteht man Lösungen, die auf Klick den versteckten oder den Rest des Inhaltes anzeigen. Das ist eine platzsparende Lösung, die häufig in langen Listen oder in FAQ-Bereichen eingesetzt wird.

Toggle-Lösungen gibt es wie Sand am Meer und einige stehen kurz davor auch Kaffee kochen zu können. 🙂 Leider ist dann auch entsprechend der Umfang der Dateien.

Daher war ich auf der Suche nach etwas ganz einfachem und nach Möglichkeit, sollte die Lösung auch ohne die Einbindung einer zusätzlichen Javascript-Bibliothek auskommen.

Nach ein bisschen Suche habe ich eine sehr einfache Lösung gefunden, die mit wenigen Zeilen Code auskommt. Ich habe es leicht an meine Bedürfnisse angepasst und nun funktioniert es auch mit dem Internet Explorer.

Hier dazu der Code und die Demo auf jsFiddle:

Die Lösung hat zwar ein paar Jährchen auf’m Buckel, funktioniert aber noch in den gängigen Windows-Browsern: IE9, Firefox 15, Chrome 22 und Opera 12.

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2012/10/06/javascript-ein-ganz-einfaches-toggle-script/feed/ 8
Chico UI: komfortabel Funktionen für Websites nachrüsten http://www.perun.net/2012/08/01/chico-ui-komfortabel-funktionen-fuer-websites-nachruesten/ http://www.perun.net/2012/08/01/chico-ui-komfortabel-funktionen-fuer-websites-nachruesten/#comments Wed, 01 Aug 2012 12:16:08 +0000 http://www.perun.net/?p=4132 Chico UI ist eine Sammlung von Tools um recht einfach Funktionen für eine Website nachzurüsten. Du brauchst eine Dropdown-, Akkorden- oder Tab-Navigation? Dann findet du bei Chico UI erprobte Lösungen.

Chico UI: Tab-Navigation

Neben diesen Funktionen findest du hier auch u.a. einen Bilder-Slider, einen Kalender-Widget und eine CSS-Bibliothek. Bei der CSS-Bibliothek sind die gängigen HTML-Elemente gestylt, es sind CSS-Icons definiert…

Chico UI: CSS-Bibliothek

… sowie Nachrichten-Boxen, Seitenumbruch-Links und Tabellen.

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2012/08/01/chico-ui-komfortabel-funktionen-fuer-websites-nachruesten/feed/ 1
Google aktualisiert seine Styleguides für HTML, CSS und Javascript http://www.perun.net/2012/07/18/google-aktualisiert-seine-styleguides-fuer-html-css-und-javascript/ http://www.perun.net/2012/07/18/google-aktualisiert-seine-styleguides-fuer-html-css-und-javascript/#comments Wed, 18 Jul 2012 20:22:55 +0000 http://www.perun.net/?p=4083 Styleguides ("Gestaltungsrichtlinien") werden zum Beispiel von größeren Firmen erstellt, damit auch externe Dienstleister nach den "gleichen Regeln" arbeiten, wie die internen Entwickler. Styleguides sind u. a. dann sinnvoll wenn zwei oder mehrere Freelancer zusammenarbeiten, damit man sich auf gemeinsame Regeln einigt.

Sie sind aber auch eine interessante Inspirationsquelle, damit man sieht wie andere arbeiten und da sie in der Regel auf Erfahrungswerten basieren, kann man an Hand solcher Regelwerke, dass eine oder andere lernen.

Auch Google listet solche Gestaltungsrichtlinien und hat vor ein paar Tagen die Styleguides für HTML, CSS und Javascript aktualisiert.

Unter anderem empfiehlt Google bei CSS auf Browser-Hacks zu verzichten, wo es möglich ist, die Kurzschreibweise zu verwenden, auch die letzte Deklaration mit Semikolon zu beenden und die Deklarationen eines Blocks alphabetisch zu sortieren.

Gefunden auf Sitepoint.

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2012/07/18/google-aktualisiert-seine-styleguides-fuer-html-css-und-javascript/feed/ 1
Schachspiel als 1 Kbyte großes Javascript http://www.perun.net/2012/07/16/schachspiel-als-1-kbyte-grosses-javascript/ http://www.perun.net/2012/07/16/schachspiel-als-1-kbyte-grosses-javascript/#comments Mon, 16 Jul 2012 16:01:17 +0000 http://www.perun.net/?p=4076 Obwohl ich schon sei 15-16 Jahren im Web unterwegs bin, so gibt es dennoch immer wieder Kleinigkeiten, die mich zum staunen bringen. Diesmal handelt es sich um ein Schachspiel das im Browser läuft. Das ist schon lange nichts mehr besonderes.

Das besondere an diesem Spiel ist, dass es auf einem Javascript aufbaut, dass nur 1 KByte groß ist … um genauer gesagt ganze 1023 Byte.

Schach: ein nur 1 Kbyte großes Javascript

Entstanden ist das ganze im Rahmen des "1k Javascript demo contest". Gut, in Punkto Funktionalität und Komfort, kann es nicht mit den ausgewachsenen Programmen mithalten. Aber man kann dennoch eine Partie Schach gegen einen Gegner spielen, den man nicht unterschätzen sollte.

Gefunden auf Google+

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2012/07/16/schachspiel-als-1-kbyte-grosses-javascript/feed/ 1
WordPress: Anzahl der Artikel & Kommentare anzeigen http://www.perun.net/2012/05/10/wordpress-anzahl-der-artikel-kommentare-anzeigen/ http://www.perun.net/2012/05/10/wordpress-anzahl-der-artikel-kommentare-anzeigen/#comments Thu, 10 May 2012 13:48:17 +0000 http://www.perun.net/?p=3891 Wie ich im Footer dieser Website die Anzahl der veröffentlichten Artikel, Kommentare und Kategorien ausgebe habe ich schon mal im Dezember letzten Jahres geschrieben.

Ich musste aber den Code von damals leicht anpassen und hier ist das neue Ergebnis:

<li>Artikel: <?php $nr_art = wp_count_posts('post'); $nr_art = $nr_art->publish; echo number_format($nr_art, 0, '', '.'); ?></li>
<li>Kategorien: <?php $nr_kat = wp_count_terms('category'); echo number_format($nr_kat); ?></li>
<li>Kommentare: <?php $nr_komm  = get_comment_count(); $nr_komm  = $nr_komm['approved']; echo number_format($nr_komm, 0, '', '.'); ?></li>

Der ursprüngliche Code hat nicht mehr funktioniert seit dem Serverwechsel. Ich vermute mal das lag daran, dass ich vorher PHP 5.2.x und jetzt PHP 5.3.12 und somit verursachten die Parameter-Angaben des alten Codes Fehlermeldungen.

Hier noch einmal die entsprechende Stelle im alten Code:

echo number_format($nr_art, '', '', '.')

Mit number_format formatiert man eine Zahl: Anzahl der Dezimalzeichen, Dezimaltrennzeichen und der Tausender-Trennzeichen. Gibt man (k)einen Parameter an echo number_format($nr_art), dann greift PHP hier auf die Standardangaben zurück und das heißt: Komma als Tausender-Trennzeichen und Punkt als Dezimaltrennzeichen … genau umgekehrt wie im deutschen und einigen anderen Ländern von Kontinentaleuropa.

Daher muss der entsprechende Abschnitt in meinem Fall so ausschauen:

echo number_format($nr_art, 0, '', '.')

Das heißt übersetzt: gebe die Zahl aus, ohne Nachkommastellen – was auch logisch ist, da es keine Viertelkommentare und Drittelartikel gibt – ohne Dezimaltrennzeichen, aber mit Punkt als Tausender-Trennzeichen.

Und wo lag jetzt genau der Fehler gegenüber der alten Version?


// alt
echo number_format($nr_art, '', '', '.')

// neu
echo number_format($nr_art, 0, '', '.')

Ich hoffe die Hervorhebung ist deutlich genug. Das PHP auf dem neuen Server störte sich am zweiten Parameter. Anstatt einem leeren Wert ('') wird eine Zahl erwartet.

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2012/05/10/wordpress-anzahl-der-artikel-kommentare-anzeigen/feed/ 3
Codepad: (PHP-) Code online testen http://www.perun.net/2011/10/15/codepad-php-code-online-testen/ http://www.perun.net/2011/10/15/codepad-php-code-online-testen/#comments Sat, 15 Oct 2011 12:27:00 +0000 http://www.perun.net/?p=2989 Nehmen wir mal an du arbeitest gerade an einem fremden Rechner, dieser ist spartansich eingerichtet und du musst auf die schnelle PHP-Code testen. Oder ein Kollege hat eine Frage zu einem Perl-Skript und du brauchst etwas wo man das Skript testen kann und worauf ihr beide zugreifen könnt. Für solche Fälle gibt es so Dienste wie codepad:

codepad: PHP-Code testen

Man gibt in die Textbox seinen Code ein, neben PHP und Perl werden noch u.a. noch C, C++, Python und Ruby unterstützt. Man hat die Möglichkeit das Code-Beispiel als privat zu markieren und dieser ist nur dann erreichbar wenn man den Permalink zu dem Beispiel kennt. Nach dem du auf Submit klickst wird der Code ausgeführt und auch der Permalink zu dem Beispiel generiert:

codepad: die Ausgabe des PHP-Codes

Nützliches Webwork-Tool.

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2011/10/15/codepad-php-code-online-testen/feed/ 2
Javascript: sanftes Scrollen bzw. nach oben Springen http://www.perun.net/2011/08/11/javascript-sanftes-scrollen-bzw-nach-oben-springen/ http://www.perun.net/2011/08/11/javascript-sanftes-scrollen-bzw-nach-oben-springen/#comments Thu, 11 Aug 2011 07:46:53 +0000 http://www.perun.net/?p=2715 Auf vielen Websites gibt es am Ende von lange Seiten einen Link, der wenn man ihn anklickt einen auf den Anfang der Seite "springen" lässt. Am einfachsten realisiert man einen solchen Link, wenn man als Ziel lediglich das Rautenzeichen als Ziel angibt:

<a href="#">Nach oben springen</a>

Man kann aber auch auf schon existierende IDs verweisen:

<div id="kopfbereich">...</div>
...
<a href="#kopfbereich">Nach oben springen</a>

Hierbei dient das Universalattribut id sowohl als Ansatzpunkt für die CSS-Regeln als auch für Seiten-interne Verweise: #kopfbereich ist damit Sprunganker und Selektor.

Nicht springen sondern scrollen

Wenn man auf so einen Ankerverweis klickt, dann gelangt man sofort nach oben bzw. zu der definierten stelle. Manchmal wünscht der Kunde oder Grafiker, dass nicht gesprungen sondern gescrollt wird. Hier kommt dann Javascript ins Spiel.

Für ein aktuelles Projekt, war so ein sanftes springen bzw. scrollen gewünscht. Da die Website sonst kein Javascript oder Javascript-Bibliotheken im Einsatz hat konnte ich nicht auf Lösungen zurückgreifen, die auf jQuery & Co. basieren. Alleine wegen ein bisschen Scrollen bis zu 90 KByte extra einzubauen ist doch auch irgendwie albern.

Daher habe ich nach einer "Standalone"-Lösung gesucht. Nach etwas Suchen und ein paar Tests habe ich mich für die Lösung auf kryogenix.org entschieden. Einer der Gründe ist, dass ich nicht extra Anker mit der veralteten Methode (<a name="top"><a>) definieren musste (wie einige andere Testkandidaten das verlangt haben) sondern auf schon existierende id-Attribute zurückgreifen konnte.

[Nachtrag] da einige Leute längere Texte nicht lesen möchten, kommt hier eine Anmerkung. In jedem Browser kann man auf #ankername verweisen und der Browser springt dorthin: egal ob man den Ankernamen mit einer ID (id="ankername") oder mit dem veralteten Attribut name (name="ankername") definiert wurde. Das habe ich auch im ersten Teil des Artikels beschrieben.

Aber es gibt draußen aber ein paar JAVASKRIPTE! (nicht vergessen: das Thema ist scrollen statt springen) die kommen mit ids nicht klar und verlangen einen Anker der per name definiert ist, damit die Ihre Wirkung – scrollen anstatt springen – entfalten können. Deswegen habe ich das vorgestellte Skript als positiv hervorgehoben, weil das Skript mit schon vorgegeben ids zu Recht kommt.[/Nachtrag ende]

Ich habe den Code im Original hier hochgeladen: Sanftes Scrollen (javascript, 4,56 kbyte), falls es die Seite mal nicht geben sollte. Ist mir leider schon ein paar mal passiert, dass es Websites mit nützlichen Code-Fragmenten irgendwann nicht mehr gab.

Wenn man den Code durch einen Komprimierer schickt, dann kann man ihn um einiges kleiner machen. Ich habe drei Komprimierer getestet, aber bei allen hat der Javascript hinterher nicht funktioniert. Bei jscompress.com erreichte ich ein positives Ergebnis. Das Script war danach nur 1,94 kbyte groß und hat auch funktioniert: Download (javascript, 1,94 kbyte).

Und was ist mit der Tastatur

Ich persönlich brauche keine Links auf der Website, die mich nach oben springen oder scrollen lassen und benutze die auch nie. Mal abgesehen von der Scrolltaste auf der Maus nutze ich folgende Tasten auf der Tastatur:

  • pos1: an Anfang der Seite springen
  • ende: an Ende der Seite springen
  • bild⇑: in jeweils der aktuellen Höhe des Browserfensters nach oben springen
  • bild⇓: in jeweils der aktuellen Höhe des Browserfensters nach unten springen

Aber das ist meine Vorliebe und die muss sich nicht immer mit der Vorliebe des Kunden decken. 🙂

Ach ja, wer was besseres, cooleres, einfacheres oder kleineres kennt, nur her damit.

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2011/08/11/javascript-sanftes-scrollen-bzw-nach-oben-springen/feed/ 13
Gastartikel: Smarty: PHP-Templates für Designer http://www.perun.net/2011/04/06/gastartikel-smarty-php-templates-fuer-designer/ http://www.perun.net/2011/04/06/gastartikel-smarty-php-templates-fuer-designer/#comments Wed, 06 Apr 2011 10:06:32 +0000 http://www.perun.net/?p=2370 Dieser Gastartikel stammt von Matthias Mees. Vielen Dank dafür.

Smarty-Logo Die PHP-Templateengine Smarty polarisiert. Entwickler, die an Projekten, die Smarty einsetzen, beteiligt sind, schwören auf die Vorteile – andere Entwickler argumentieren üblicherweise (technisch absolut zu Recht), PHP selbst sei bereits eine Templatenengine und ein zusätzlicher "Aufsatz" somit unnötiger Ballast.

Was ist Smarty überhaupt?

Smarty ist eine Art "Basic-PHP für Designer". Die verwendeten Templatedateien sind im Wesentlichen HTML-Dateien, die mehr oder weniger komplexe Platzhalter enthalten, welche durch dynamische Inhalte ersetzt werden. Ergänzend stellt Smarty zudem komplexere Strukturen wie Schleifen, if-Abfragen oder Funktionen bereit und ermöglicht das Einbinden externer Dateien ebenso wie die Definition eigener Konstanten. Die Smarty-Syntax ist an PHP angelehnt, aber vereinfacht.

Wer setzt es ein?

Zu den bekannteren Open-Source-Projekten, die auf Smarty setzen, gehören:

Aber die Performance…

Es ist nicht wegzudiskutieren, dass Smarty einen gewissen Overhead erzeugt, der zu Lasten der Performance geht. Als Kompensation werden die Templates in PHP-Code vorkompiliert, optional kann zusätzlich ein Caching-Mechanismus eingesetzt werden. Zusätzlich kann es sich lohnen, auf bestimmte verzögernde Features zu verzichten, z. B. Rechenoperationen in Smarty oder das Inkludieren zusätzlicher Subtemplates.

Dennoch sind Smarty-Templates selbst unter idealen Bedingungen natürlich niemals schneller als reine PHP-Ausgabe – ganz logisch bei einem "Aufsatz". Die Performance ist aber auch nicht das Auswahlkriterium für Smarty.

Teile und gestalte

Smarty ist nicht für jedes Projekt die richtige Wahl. Die Entscheidung, den zusätzlichen Overhead in Kauf zu nehmen, kann "philosophischer" oder ökonomischer Natur sein.

Moderne Webentwicklung trennt Struktur, Gestaltung und Verhalten. In der Praxis bedeutet das, dass CSS-Anweisungen und Javascripts in externe Dateien ausgelagert und im HTML-Markup eingebunden werden. Ebenso sollten reines Markup und
Programmcode getrennt sein, was in reinen PHP-Templates kaum möglich ist – in Smarty schon. Templateautoren werden bestimmte Inhaltsbausteine in Variablen übergeben, zudem erhalten sie einfach benutzbare Werkzeuge, mit welchen sie diese
(innerhalb bestimmter Grenzen) modifizieren können.

Wirklich gut geeignet ist Smarty für Projekte, in denen reine Programmierer und Gestalter beteiligt sind, z. B. dünn besetzte Open-Source-Projekte, die für jeden dankbar sind, der sich aktiv beteiligt. Gerade Webdesigner ohne nennenswerte PHP-Kenntnisse haben oft Respekt vor Templates, die Programmlogik enthalten, und kommen mit der vereinfachten Syntax von Smarty deutlich besser zurecht.

Ein Beispiel

Nehmen wir als einfaches Beispiel mal die Ausgabe eines Artikel-Titels in einem Blog inklusive Permalink. In einem PHP-Template wie hier der loop.php des TwentyTen-Themes für WordPress sieht das so aus:

<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

Umgesetzt mit Smarty in einem Template für Serendipity wird daraus:

<h2 class="entry-title"><a href="{$entry.link}" title="Permalink to {$entry.title}" rel="bookmark">{$entry.title}</a></h2>

Der Smarty-Code ist nicht nur kürzer, sondern auch leichter lesbar. Abgesehen von zwei praktisch selbsterklärenden Variablen mit sehr einfacher Schreibweise können Templateautoren mit reinem HTML arbeiten.

Fazit

Gestalter können mit Smarty Templates unabhängig vom Programmcode erstellen und Programmierern damit die Arbeit an Templates abnehmen. Wiegt dieser organisatorische und zeitliche Vorteil die Nachteile einer aufgesetzten Templateengine und eines zusätzlichen Kompilierschrittes auf, kann Smarty die richtige Wahl für ein Projekt sein.

Matthias Mees Matthias Mees ist freier Webdesigner aus Schleswig-Holstein. Er bloggt über Webdesign, Webstandards und Serendipity und twittert auch (aber nicht nur) darüber.

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2011/04/06/gastartikel-smarty-php-templates-fuer-designer/feed/ 6
Gastartikel: Turbine: ein PHP-Framework um schneller und problemfreier Stylesheets zu schreiben http://www.perun.net/2010/07/19/gastartikel-turbine-ein-php-framework-um-schneller-und-problemfreier-stylesheets-zu-schreiben/ http://www.perun.net/2010/07/19/gastartikel-turbine-ein-php-framework-um-schneller-und-problemfreier-stylesheets-zu-schreiben/#comments Mon, 19 Jul 2010 10:55:23 +0000 http://www.perun.net/?p=1955 Dieser Gastartikel stammt von Christian Schaefer aka derSchepp.

Wer kennt das nicht: Bei jedem neuen Webprojekt beginnt man von Neuem, sich sein bewährtes projektübergreifendes Basis-Stylesheet zu schnappen, um sich im weiteren Verlauf der Stylesshet-Programmierung an allerlei langatmigen Selektoren, doppelten und dreifachen Vendor-spezifischen Eigenschaften, IE-Hacks, sowie an syntaktischem Füllmatarial ({};…) abzuarbeiten.

Deshalb kommt es meist so, dass sich das, was in der eigenen Vorstellung umsetzungsmäßig schnell erledigt scheint, am Ende doch immer überraschend lange hinzieht. Und immer wieder flammt auch danach Arbeit in Form von Nachbesserungen auf.

Einem Frontendentwickler macht das in vielen Situationen durchaus Spaß. Es gibt aber auch solche Fälle, in denen man einfach nicht die Zeit und/oder das Budget für so viel Handarbeit zur Verfügung hat. Oder es ist einem einfach gerade zu stupide.

Und in solchen Fällen könnte in Zukunft das Framework Turbine zum Einsatz kommen.

Das Mantra: Weg mit allem Überflüssigen

Turbine entstand im Laufe des letzten Dreivierteljahrs und ging aus einem Projekt von Peter Kröner (@sir_pepe) hervor. Peter schrieb damals an einem CSS zu PHP-Array Parser/Umwandler, in den ich nach und nach als Kollaborator immer tiefer involviert wurde.

Was ursprünglich nur als kleines Werkzeug Stylesheets auf- bzw. nachbereiten sollte, wurde im Laufe unserer Arbeit daran immer umfangreicher, und vor allem radikaler in seinem Ansatz. So landeten Peter und ich irgendwann an einem Punkt, an dem wie einen neuen Stylesheet-Dialekt vor uns liegen hatten, kombiniert mit einer PHP5-Bibliothek, die diese Sprache nach altbekanntem CSS weiterverarbeitet.

Für die Ausarbeitung dieser Sprache nahmen wir das Beste aus CSS sowie aus anderen ähnlich ausgerichteten Frameworks wie Sass, Less und Scaffold und sattelten eigene Ideen obendrauf.

An Less fanden wir gut, dass es auf die Zeichen {, } und ; verzichtet. Alles unnötige Tipperei in unseren Augen! Als strukturienden Ersatz verordneten wir Turbine wie bei Less eine etwas striktere, an Python angelehnte Schreibweise, in der Einrückungen die Rolle der geschweiften Klammern übernahmen, und in der jede Eigenschaftszuweisung zwingend in eine eigene Zeile wandert, die aber eben nicht mehr auf einem Semikolon enden musste (allerdings immer noch kann).

Aus einem


#foo, #bar {
	color: #FF0000;
	margin-left: 4px;
	margin-right: 4px;
}

in CSS wurde in unserer zeichensparenden Syntax nun ein


#foo, #bar
	color: #FF0000
	margin-left: 4px
	margin-right: 4px

Durch die Einrückung nach dem Selektor erkennt Turbine, dass wir es ab da mit Eigenschaften zu tun haben. Auch bei den @media rules lassen wir die geschweiften Klammen weg:


@media screen
#foo
	background:red

@media print
#foo
	background:green

ergibt:


@media screen {
	#foo {
		background:red;
	}
}

@media print {
	#foo {
		background:green;
	}
}

All diese Anweisungen werden nicht mehr in .css- sondern in .cssp-Dateien abgelegt, die dann zur Laufzeit von Turbine in übliches (manchmal auch unübliches) CSS umgewandelt werden. Das geht so, dass man das Framework in seiner PHP-angetriebenen Seite folgendermaßen einbindet:


<link
	rel="stylesheet"
	href="pfad/zu/turbine/css.php?files=styles.cssp"
/>

Also ganz easy, einfach anstelle einer CSS-Datei, und in dem Parameter files benennt man eine oder, kommasepariert, mehrere .cssp-Dateien, die Turbine aufbereiten soll. Die Pfadangabe der .cssp-Dateien ist dabei relativ zum Ordner, in dem Turbine, also die css.php-Datei liegt.

Wir bringen etwas intelligente Logik ins Spiel

Doch damit sind die arbeitssparenden Maßnahmen bei Weitem noch nicht erschöpft, denn sonst würde sich der ganze Aufriss ja gar nicht lohnen.

Inspiriert von den anderen genannten Frameworks und geleitet von unseren eigenen Bedürfnissen, haben wir darüberhinaus allerlei Kurzschreibweisen-Logik eingebaut.

Selektorverschachtelung

Zum Beispiel die Selektorverschachtelung. Durch diese wird es beispielsweise möglich, folgendes zu schreiben:


#foo div > p
	color:red
	font-weight:bold
	span
		color:blue

Diese Anweisung transformieren wir dann in folgendes CSS:


#foo div > p {
	color:red;
	font-weight:bold;
}

#foo div > p span {
	color:blue;
}

Und spätestens bei Konstellationen wie dem nachfolgenden Konstrukt spart das richtig viel Arbeit:


#header, #footer
    ul, ol, p
        a:link, a:visited
            text-decoration:underline
        a:active, a:hover
            text-decoration:none

Dies entspräche in klassichem CSS nämlich diesem Mammut-Apparillo:


#header ul a:link, #header ul a:visited,
#header ol a:link, #header ol a:visited,
#header p a:link, #header p a:visited,
#footer ul a:link, #footer ul a:visited,
#footer ol a:link, #footer ol a:visited,
#footer p a:link, #footer p a:visited {
	text-decoration: underline;
}
#header ul a:active, #header ul a:hover,
#header ol a:active, #header ol a:hover,
#header p a:active, #header p a:hover,
#footer ul a:active, #footer ul a:hover,
#footer ol a:active, #footer ol a:hover,
#footer p a:active, #footer p a:hover {
	text-decoration: none;
}

Zusammengefasste Eigenschaften

Wir haben darüberhinaus die "expanding properties", die sehr praktisch bei der Zuweisung ein und desselben Wertes zu mehreren Eigenschaften sind.


#foo
	position:absolute
	top, left:4px

…extrahiert sich zu folgendem CSS:


#foo {
	position: absolute;
	top: 4px;
	left: 4px;
}

Variablen für Eigenschaftswerte und für Selektoren

Sicherlich ein Wunsch vieler Coder ist die Möglichkeit Variablen für Wertzuweisungen innerhalb von CSS zu verwenden. So etwas hilft besonders in solchen Situationen, wo zum Beispiel Farben seitenweit ausgetauscht werden müssen.

Bei Turbine haben wir zu diesem Zweck "Konstanten" für Eigenschaftswerte und "Aliase" für Selektoren.

In beiden Fällen setzt man im Kopfbereich der .cssp-Datei einen @constants– (Eigenschaftswerte) oder @aliases-Block (Selektoren) ein, der alle Definitionen aufnimmt, auf die man im Anschluss als Representanten zurückgreifen kann.


@constants
	myRed:#C02222
	imagePath:/assets/images

#foo
	color:$myRed
	background:url($imagePath/foo.png) top left no-repeat

Hier haben wir die Konstanten $myRed und $imagePath erstellt und sie dann in unseren Styleinganweisungen verbaut. Das daraus erzeugte CSS sieht deshalb so aus:


#foo {
	color: #C02222;
	background: url(/assets/images/foo.png) top left no-repeat;
}

Die beiden Konstantenwerte wandern in die Eigenschaften und unser Definitionsblock wird anschließend herausgenommen.

Aliase funktionieren ähnlich, sind aber wie gesagt für Selektoren zuständig. Ein…


@aliases
	mainNavigation: #wrapper #header > div ul

$mainNavigation
	list-style:none

…ergibt:


#wrapper #header > div ul {
	list-style: none;
}

Eigenschaften anderer Selektoren kopieren

In Turbine könnt Ihr Eigenschaftswerte anderer Selektoren mit "copy" kopieren/übernehmen:


#foo
	background:#F00

#bar
	color:copy(#foo background)

Eigenschaften erben

Oder Ihr könnt ganz im Sinne der Objektorientierung neue Selektoren alle Eigenschaften eines anderen Selektoren erben lassen. Die Anweisung…


#parent
	color:red
	font-weight:bold

div.child
	extends:#parent
	margin:4px

…sorgt für folgende Ausgabe im CSS:


#parent {
	color: red;
	font-weight: bold;
}
div.child {
	margin: 4px;
	color: red;
	font-weight: bold;
}

Soviel ersteinmal zu den möglichen syntaktischen Verkürzungen. Es gibt noch ein paar mehr Spielarten, die Ihr allesamt im entsprechenden Abschnitt der Turbine-Dokumentation nachlesen könnt. Auch findet Ihr dort etwas tiefergehende Infos zu den eben abgehandelten Features.

Plugins für Bugfixes, für CSS3, für Performance, etc.

Die syntaktischen Verkürzungen sparen uns schon einiges an ungeliebter Arbeit. Was uns aber außerdem viel Arbeit macht, ist der Kampf mit den Browsern. Mal dürfen wir uns mit Darstellungsfehlern der IEs herumschlagen, mal geht es darum, für jeden Browser einzeln irgendwelche fortschrittlicheren Darstellungsformen handzuklöppeln, etwa Schriftarten Einbinden, Inline-Block zu faken, oder das browserübergreifende Erzeugen von Transparenzen, Schatten und anderen CSS3-Effekten.

Und hier kommen die Turbine-Plugins ins Spiel, welche uns dabei unter die Arme greifen.

Es gibt Plugins, die im stillen Kämmerlein Bugs fixen oder Browser um Basisfähigkeiten erweitern. Andere sorgen dafür, dass wir CSS3-Features heute schon nutzen können, indem sie Code erzeugen, den alle Browser verstehen.

Plugins aktivieren

Um eines der Plugins zu nutzen, aktivieren wir es in einem speziellen Kopfbereich der .cssp-Datei, hier zum Beispiel aktivieren wir gleich drei von ihnen:


@turbine
	plugins:boxsizing,borderradius,transforms

Diverse Plugin-Gattungen

Mit Turbine liefern wir eine ganze Palette von Plugins mit, 17 an der Zahl.

Das bugfixes Plugin behebt allerlei Abstandsprobleme in den IEs (unterer "Geistermargin" bei Bildelementen, doppelter Abstand bei Floats, Geisterpadding in Buttons), verhindert im IE6 Hintergrundbildflackern, rüstet im IE6 min-height nach, verbessert die skalierte Bilddarstellung im IE7, entfernt Geistermargins im Firefox um Buttons. Auch bringt es dem IE6 via Behavior :hover für alle Sorten Elemente und schließlich PNG Alphatransparenzen bei.

Das html5-Plugin rüstet Defaultstyles für alle neuen HTML5-Elemente nach, und zwar so wie die Defaultsstyles laut W3C geplant sind (betrifft vor allem display: inline; und display: block;);

resetstyle enthält eine Sammlung von Eric Meyer inspirierter Reset-Anweisungen, mit denen man global alle Margins und Paddings in allen Browsern auf Null zurücksetzt, das Listen in normale Blockelemente wandelt, Schrifteigenschaftenvererbung für Formularfelder und Tabellen aktiviert, und noch ein/zwei Dinge mehr.

Die Plugins @font-face, backgroundgradient, borderradius, boxshadow, boxsizing, colormodels, inlineblock, opacity, transforms rüsten wiederum in allen Browsern Unterstützung von CSS(3)-Eigenschaften nach.
Das gilt außer beim borderradius-Plugin explizit auch für die IEs!

Bei borderradius boxshadow, boxsizing, inlineblock, opacity, transforms verwenden wir einfach die vom W3C vorgesehenen Deklarationen und die Plugins setzen das dann in vendor-prefixte Varianten und teilweise in IE-Filter und -Behaviors um. Beispiel:


@turbine
	plugins:boxsizing

#foo
	box-sizing:border-box

Ergibt:


#foo {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	behavior: url(plugins/boxsizing/boxsizing.htc);
	box-sizing: border-box;
}

Die visuellen Resulate sind dann in allen Browsern die gleichen.

Andere Plugins haben eigene Syntaxen, weil es entweder noch keine Übereinkunft gibt, oder um Tippaufwand zu sparen.

@font-face funktioniert zum Beispiel so, dass man in einem Ordner möglichst viele gleichnamige Schriftdateien aller Formate (eot, ttf, woff&hellip) ablegt, um sie dann mit einer kurzen Anweisung einbinden zu lassen.
Sagen wir also wir hätten in einem Unterordner fonts/ folgende Dateien hinterlegt:

SaginawMedium.eot
SaginawMedium.woff
SaginawMedium.otf
SaginawMedium.ttf
SaginawMedium.svg

Dann könnten wir sie mit dieser Anweisung einbinden:


@font-face
	font-family:'SaginawMedium'
	src:url('fonts/SaginawMedium')
	font-weight:bold
	font-style:italic

backgroundgradient erzeugt browserübergreifend zweifarbige lineare Farbverläufe für den Hintergrund eines Elements. Da sich noch keine einheitliche Syntax herausgeschält hat, Mozilla aber am nächsten am aktuellen Vorschlag des W3C dran ist, haben wir uns syntaxmäßig auf dessen Seite geschlagen. Dies der wäre der Aufruf, um einen vertikalen Farbverlauf von oben Weiß nach unten Schwarz zu erzeugen:


#foo
	background-image: linear-gradient(top,#FFF,#000)

colormodels rechnet hingegen alle Vorkommnisse an HSL(A)-Farbwerten für Browser die damit nichts anfangen können in RGB(A) Werte um.
Im IE funktionieren HSLA- und RGBA-Werte, wenn wir damit Hintergrundfarben definieren, in allen anderen Fällen nur HSL ohne Transparenz und natürlich RGB.

minifier und datauri steigern wiederum die Ladegeschwindigkeit des resultierenden CSS. Das erste, indem es dieses minifiziert, also von überflüssigen Leerstellen, Nullen und Einheiten befreit und wo möglich Shorthand Notationen einsetzt. Das zweite spart HTTP-Requests ein, indem es Datei-Resourcen, die es in den Styles findet und die unter 24K wiegen per Data-URI, oder für die älteren IEs per MHTML, einbettet.

Des sniffer-Plugins bedient Ihr Euch, wenn Ihr Styles nur ganz bestimmten Browsern oder Plattformen servieren wollt, bzw. wenn Ihr die ganz bestimmten Browsern oder Plattformen vorenthalten wollt. Beides ist möglich.

Gesetzt den Fall, Ihr wolltet etwas nur auf Desktops in der Textfarbe rot darstellen, dann könntet Ihr bei aktiviertem Plugin folgende Anweisung schreiben:


#foo
	device:desktop
	color:red

Der Selektor #foo mitsamt all seinen Eigenschaften würde dann nur noch in dem Fall an den Browser durchgereicht, wo dieser ein Browser einer Desktop-Plattform ist (also z.B. nicht an iPhones, iPads, WebOS, etc.).

Wenn Ihr die Textfarbe rot für alle Plattformen, außer den Mobilgeräten ausliefern wollt, dann schreibt…


#foo
	device:^mobile
	color:red

Neben device kennt der sniffer auch noch os mit Versionnummern oder -namen:


// Nur Mac
#foo
	os:mac
	color:pink

// Nur für Windows neuer als Vista
#bar
	os:windows>=vista
	color:lightblue

// Nur für Windows neuer als Vista
#goatse
	os:windows>=6
	color:blue

// Für alle außer Linux
#tubgirl
	os:^linux
	color:red

Und er kennt die Eigenschaft browser:


// Nur für IE
#foo
	browser:ie
	color:darkblue

// Nur für Firefox Versionen neuer als 3.5
#bar
	browser:firefox>3.5
	color:orange

// Nur für Safari 4
#goatse
	browser:safari=4
	color:lightblue

// Nicht für Chrome
#tubgirl
	browser:^chrome
	color:green

Und zu guter letzt haben wir noch die Meta-Plugins css3, performance, legacy und utility. Diese sind selbst eigentlich keine Plugins (daher auch: Meta-Plugins), sondern sie fassen mehrere Plugins in Funktionsgruppen zusammen, um sie gemeinsam aktivieren zu können (und wieder Tipparbeit zu sparen).

Das css3 Meta-Plugin besteht zum Beispiel aus der Sammlung backgroundgradient, borderradius, boxshadow, boxsizing, colormodels, opacity und transforms. Anstatt alle Plugins einzeln zu aktivieren kann man nun ganz einfach folgendes deklarieren:


@turbine
	plugins:css3

Und schon sind sie allesamt aktiv!

Zieht all das nicht mächtig an der Performance?

Unclever programmiert täte es das aufgrund zahlreicher Regular Expressions und Plugin-Schleifen sicherlich. Es ist aber nicht unclever programmiert. Turbine nutzt serverseitiges Caching. Einmal verarbeitete Ergebnisse werden aufbewahrt und so lange nicht neuberechnet, wie auch die .cssp-Quelldateien unverändert bleiben. Es geht serverseitig also nicht sonderlich viel Extrazeit drauf.

Desweiteren würden wir sogar soweit gehen, zu behaupten, dass Eure Seite durch den Einsatz von Turbine clientseitig sogar schneller ist als wenn Ihr den klassischen Weg einschlagen würdet. Denn unser CSS-Output ist kombiniert und mindestens ZIP-komprimiert, bei Nutzung unseres performance-Metaplugins sogar noch minifiziert und von unzähligen bremsenden HTTP-Requests befreit. Zu guter letzt sendet Turbine dem Browser auch nur dann alle Daten, wenn dieser den Output nicht schon bei einem vorherigen Aufruf geladen hat und sie bei ihm noch im Cache liegt. Das spart Übertragungszeit zum Client, und natürlich auch Traffic!

Was man zum Loslegen braucht

Wenn Ihr jetzt angefixt seid und Turbine ausprobieren wollt, was wir schwer hoffen, dann geht Ihr am besten in die Download-Sektion unseres Projekts bei Github und ladet Euch dort die aktuellste Version herunter.

Dann entpackt Ihr alles in einen Ordner auf Eurem PHP5-getriebenen Webspace (PHP5 ist Pflicht!), zum Beispiel den Ordner /turbine. Ihr könntet nun einen weiteren Ordner /css anlegen, darin eine style.cssp mit den Turbine-Anweisungen. Zu guter letzt bindet Ihr das Style beispielsweise in der index-Datei im Root per HTML, wie ganz oben erwähnt, folgendermaßen ein:


<link rel="stylesheet" href="turbine/css.php?files=../css/styles.cssp"/>

Dokumentation

Eine sehr umfangreiche und hoffentlich gut verständliche Dokumentation zu den Sprachfeatures, den Plugins und dem Einrichten von Turbine findet Ihr auf http://turbine.peterkroener.de. Ist allerdings in Englisch.

Fragen?

Für Fragen haben wir zum einen eine FAQ-Sektion, aber auch eine Frage/Antwort-Plattform für Turbine auf Qhub.

Code Highlighting und Autocompletion für Turbine-Syntax in Webeditoren

Uns ist bewusst, dass Ihr wenig Lust habt auf die unterstützenden Funktionalitäten Eures Lieblings-Webeditors zu verzichten, also konkret das Einfärben des Codes sowie die automatischen Befehlsvorschläge. Deshalb haben einige Mithelfer und wir uns an Plugins bzw. Erweiterungsmöglichkeiten für einige Editoren drangesetzt und Lösungen für Dreamweaver, UltraEdit, GtkSourceView (also Gedit und Anjuta), sowie TextMate in petto.

Ihr findet einen Fehler? Stellt Dinge zur Diskussion?

Lasst es uns wissen, indem Ihr einen Eintrag in unsere Issues-Abteilung bei Github vornehmt. Schaut aber vorher, ob dieser Bug, oder ein solcher Vorschlag nicht schon existiert.

Christian Schaefer (Schepp) Christian Schaefer ist Jahrgang ‘78, hat seine Wurzeln bei Köln, lebt aber seit 2004 unbehelligt in Düsseldorf, und wird von jedermann außer den Eltern "Schepp" genannt. Und das ist auch gut so. Es verschlug ihn 1998 ohne Studium direkt in eine 3D-Firma in Köln. Dort entwickelte er virtuelle Figuren für Messen und TV. Selbstständigmachung Anfang 2004 und Verlagerung des Fokus’ auf die Webentwicklung. Sieht seine Schwerpunkte bei der Frontend-Entwicklung, hat aber auch kein Problem mit Backends und dem Architekten großer Sites in PHP und MySQL. Fertige CMSe nerven ihn. Frameworks sind OK. Nebenbei unterstützt er technisch den Kölner Multimediatreff, hat gerade ein Videotraining biblischen Ausmaßes in der Mache. Er twittert unter dem Account derSchepp und mag alles was sich um Essen dreht.

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2010/07/19/gastartikel-turbine-ein-php-framework-um-schneller-und-problemfreier-stylesheets-zu-schreiben/feed/ 26
Korrigiert eure Hinweise für die Copyright-Jahre http://www.perun.net/2010/01/02/korrigiert-eure-hinweise-fuer-die-copyright-jahre/ http://www.perun.net/2010/01/02/korrigiert-eure-hinweise-fuer-die-copyright-jahre/#comments Sat, 02 Jan 2010 08:00:41 +0000 http://www.perun.net/?p=1728 Bei vielen Websites steht entweder im Fußbereich oder in der Seitenleiste ein Copyright-Hinweis samt dem Jahr, als das Projekt gestartet wurde und dem aktuellen Jahr. Weil aber viele auch das aktuelle Jahr hardcoden bzw. manuell eingeben steht jetzt dort immer noch z. B.:

© 2002-2009 Max Müller

daher sollte man die ganzen manuell eingetragenen Jahreszahlen aktualisieren oder stattdessen einfach das aktuelle Jahr dynamisch eintragen:

© 2002-<?php echo date('Y'); ?> Max Müller

Erinnert via @smashingmag.

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2010/01/02/korrigiert-eure-hinweise-fuer-die-copyright-jahre/feed/ 16
Homer Simpson macht CSS http://www.perun.net/2008/05/06/homer-simpson-macht-css/ http://www.perun.net/2008/05/06/homer-simpson-macht-css/#comments Tue, 06 May 2008 06:20:39 +0000 http://www.perun.net/?p=1135 Roman Cortes. Er hat mit jede Menge div-Elementen und CSS das Portrait von Homer Simpson gezeichnet. Einfach mal in den Quelltext schauen.

Ned Batchelder hat die Demo erweitert und daraus mit ein bisschen jQuery eine Animation erstellt.

Vielen Dank an Sahanya für den Hinweis.

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2008/05/06/homer-simpson-macht-css/feed/ 6
NicEdit: ein kleiner WYSIWYG-Editor http://www.perun.net/2008/03/19/nicedit-ein-kleiner-wysiwyg-editor/ http://www.perun.net/2008/03/19/nicedit-ein-kleiner-wysiwyg-editor/#comments Wed, 19 Mar 2008 00:55:49 +0000 http://www.perun.net/2008/03/19/nicedit-ein-kleiner-wysiwyg-editor/ NicEdit ist zwar ein kleiner, aber dennoch leistungsfähiger WYSIWYG-Editor. Das Einbauen ist sehr einfach, man muss das Javascript in seiner Website einbauen. Dazu benutzt man entweder den vorbereiteten Code-Schnippsel, dann wird auf das Javascript auf der Hersteller-Website zurückgegriffen oder man speichert es auf dem eigenen Webspace ab.

Wenn das Script eingebaut ist, werden alle Textbereiche bzw. Textboxen (textarea) durch einen bearbeiteten Bereich ersetzt. Doch das ist nicht alles. Im Prinzip kann man auch div-Blöcke oder Absätze mit so einem Editor beglücken, einfach id="myNicPanel" zuweisen.

Man könnte jetzt stundenlang über die Vor- und Nachteile von WYSIWYG-Editoren diskutieren, ich persönlich arbeite auch innerhalb von WordPress lieber mit den Quciktags bzw. in der Code-Ansicht. Aber wenn WYSIWYG gewünscht wird, warum nicht auf schon eine vorgefertigte Lösung setzen.

Ich habe es vorhin hier im Weblog getestet und es funktioniert so weit gut. Es werden dann ca. 35 KB mehr geladen, aber die Qualität des ausgelieferten Codes ist OK.

Via: Jens (ICQ)

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2008/03/19/nicedit-ein-kleiner-wysiwyg-editor/feed/ 6
Druckvorschau, CSS und die Nutzer http://www.perun.net/2007/12/16/druckvorschau-css-und-die-nutzer/ http://www.perun.net/2007/12/16/druckvorschau-css-und-die-nutzer/#comments Sun, 16 Dec 2007 17:04:05 +0000 http://www.perun.net/2007/12/16/druckvorschau-css-und-die-nutzer/ Seit sehr langer Zeit setze ich hier im Weblog eine CSS-Datei für die Druckausgabe, hier der Code aus dem entsprechenden Bereich:

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Das Ergebnis ist jedem halbwegs erfahrenem Webworker klar. Der Browser liest beide CSS-Dateien ein [1] und je nach dem im welchen Modus man sich befindet (z.B. Druckvorschau) wird die entsprechende CSS-Datei eingesetzt. Somit kann man z.B. für die Druckausgabe eine optimiertes Dokument ausgeben lassen. Hier in diesem Weblog blende ich so gut wie alles was nicht direkt zum Inhalt gehört aus. Einfach mal im Browser die Druckvorschau aufrufen oder auf den Druckvorschau-Link klicken.

Das Problem ist aber hierbei, dass viele Nutzer und unter anderem auch recht erfahrene Nutzer (da war ich vor einiger Zeit sehr überrascht) nicht davon ausgehen, dass es eine CSS-Datei für die Druckausgabe gibt und diese Lösung auch schlichtweg nicht kennen. Die Suchen krampfhaft nach einem "Drucken" oder "Druckvorschau"-Link auf der Website. Die entsprechenden Menüpunkte im Browser sind entweder völlig unbekannt oder einfach "aus den Augen, aus dem Sinn".

Was kann man den nun tun? Eine sehr einfache Lösung ist es einen Javascript-Link einzubauen:

<a href="javascript:window.print()">Drucken</a>

Diese Lösung hat zwei Nachteile. Bei ausgeschaltetem Javascript ist nix … ist logisch. Zudem ruft dieser Link nur den Druck-Dialog auf. Das ist nicht sonderlich hilfreich, denn man will vorher auch sehen was man druckt. Eine Javascript-Lösung zum Aufruf der Druckvorschau gibt es, allerdings funktioniert es nur im Internet Explorer … also recht Witzlos.

Was könnte man jetzt machen um eine browserübergreifende "Druckvorschau" zu realisieren und für die sehr erfahrenen Nutzer die CSS-datei für die Druckausgabe unangetastet zu belassen:

<?php if (isset($_GET['d']) && $_GET['d'] == 'druckvorschau') { ?>
<link rel="stylesheet" type="text/css" media="screen" href="print.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<?php } ?>

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Der obere Codeschnipsel (gefunden bei maratz) realisiert genau das. Sollte der Schlüssels d des assoziativen Arrays $_GET den Wert druckvorschau haben, dann wird das Druck-CSS als das Haupt-CSS eingebunden. Ist dies nicht der Fall dann wird die "normale" CSS-Datei eingebunden. Hierbei handelt sich um kein Hexenwerk sondern es reicht folgenden Link an der entsprechenden Stelle einzubinden:

<a href="?d=druckvorschau">Druckvorschau</a>

Wenn man diesen Verweis aufruft bzw. anklickt, dann wird der Schlüsselwert-Paar d=druckvorschau abgegeben und die eigentliche CSS-Datei wird ersetzt und man bekommt im Browser das Dokument so zu sehen, wie es dann auch gedruckt werden soll.

Man könnte sich hier fragen, warum ich die print.css außerhalb der Abfrage noch einmal einbinde und zwar im media="print"-Modus. Das hat zwei Gründe. Zum einen für die Nutzer die direkt über den den Druck-Dialog oder die Druckvorschau des Browser gehen. Aber auch wenn man aus der "künstlichen" Druckvorschau druckt. In beiden Fällen sucht der Browser nach einer eventuellen CSS-Datei für die Druckausgabe. Würde ich diese nicht wie oben einbinden, würde der Browser das Dokument so drucken lassen als ob kein CSS eingebunden ist.

Das ist allerdings nicht der Sinn der Sache weil ich mit der print.css bestimmte Ziele verfolge u.a. nicht-relevante Bereiche ausblenden.

[1] Mir ist durchaus bewusst, dass man die CSS-Dateien schonender in Bezug auf Server-Abfragen einbinden kann.

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2007/12/16/druckvorschau-css-und-die-nutzer/feed/ 14
Bilder schöner präsentieren http://www.perun.net/2007/05/09/bilder-schoener-praesentieren/ http://www.perun.net/2007/05/09/bilder-schoener-praesentieren/#comments Wed, 09 May 2007 13:57:39 +0000 http://www.perun.net/2007/05/09/bilder-schoener-praesentieren/ Eins der Themengebiete, vor dem ich mich bis neulich erfolgreich gedrückt habe, war das Thema Lightbox. Für die die es nicht wissen: es geht u.a. darum die Präsentation der Bilder durch Javascript zu verschönern und mit einfachen Mitteln rudimentäre Galerien mit netten Effekten zu realisieren.

Als ich das Layout für Herr der Ringe-Weblog erstellt hatte, habe ich mich entschlossen auch dieses Thema anzugehen, da ich das neue Weblog u.a. deswegen gestartet habe um mich mit neuen Themen zu beschäftigen. Für WordPress-Blogs gibt es jede Menge Lightbox-Plugins und ich habe vier getestet. Am meisten hat mir aber Thickbox zugesagt, es ist schlank, leicht anzupassen und mein Bauch hat gesagt: "nimm dieses Plugin" :-).

Wie alle Plugins ist auch dieses einfach zu installieren: einfach den Ordner hochladen und das Plugin aktivieren. Die Anpassungen nimmt man entweder in der CSS-Datei (thickbox.css) vor oder in der Javascript-Datei (thickbox.js) wenn man z.B. die Bezeichnungen anpassen oder eindeutschen will.

Wenn man dann den Lightbox bei den Bildern einfügen will, dann muss man nur class="thickbox" einfügen:

<a href="..." class="thickbox" title="..."><img src="..." alt="..." /></a>

Und schon hat man einen kleinen und netten JS-Effekt wenn man das Bild aufruft und der Wert bzw. der Inhalt des title-Attributs dient als die sichtbare Beschreibung des Bildes. Hat man mehrere Bilder zu einem Thema innerhalb des Beitrages und man will diese Bilder zu einer Art Galerie verknüpfen, dann schaut der Code folgendermaßen aus:

<a href="..." class="thickbox" title="..." rel="galerie-name"><img src="..." alt="..." /></a>

Mit dem Attribut rel und dem eindeutigen Wert (der bei den zu verknüpfenenden Bildern identisch sein muss) erreicht man, dass das Skript die einzelnen Bilder durch ein "Weiter"- bzw. "Zurück"-Link verbindet. Hier zwei Beispiele: Beispiel 1 und Beispiel 2

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2007/05/09/bilder-schoener-praesentieren/feed/ 13
Javascript: Bibliotheken, Frameworks und IDE http://www.perun.net/2006/08/26/javascript-bibliotheken-frameworks-und-ide/ http://www.perun.net/2006/08/26/javascript-bibliotheken-frameworks-und-ide/#comments Sat, 26 Aug 2006 13:53:18 +0000 http://www.perun.net/2006/08/26/javascript-bibliotheken-frameworks-und-ide/ Hier einige Links zum Thema Javascript & Co. welche ich in den letzten Monaten gesammelt habe:

Prototype
Prototype is a JavaScript framework that aims to ease development of dynamic web applications.
qooxdoo
qooxdoo is an advanced open-source JavaScript-based GUI framework.
jQuery
New Wave Javascript: jQuery is a new type of Javascript library. It is not a huge, bloated, framework promising the best in AJAX – nor is just a set of needlessly complex enhancements… Nachtrag: jQuery für WordPress.
moo.fx
moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, written with prototype.js.
script.aculo.us
Effects and controls library built on Prototype.
Rico
An open-source Javascript library for creating rich internet applications (basiert auf Prototype).
Yahoo! User Interface Library
The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.
Aptana – the WEB IDE
Aptana is a robust, JavaScript-focused IDE for building dynamic web applications.

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2006/08/26/javascript-bibliotheken-frameworks-und-ide/feed/ 5
Liste mit Linklisten http://www.perun.net/2006/05/07/liste-mit-linklisten/ http://www.perun.net/2006/05/07/liste-mit-linklisten/#comments Sat, 06 May 2006 23:41:09 +0000 http://www.perun.net/2006/05/07/liste-mit-linklisten/ Ich bin gerade dabei meinen Lesezeichen-Ordner "Abarbeiten" auszumisten, daher hier mal eine Liste mit Linklisten zu diversen Themen rund um den Bereich Webwork:

  • The Web Developer’s Handbook
  • Eine Liste mit Online-Generatoren (von CSS bis XML)
  • Internet in Zahlen (Internet-Nutzung in Zahlen)
  • Tutorialsammlung (von Ajax bis XML)
  • CSS- und Design-Galerien
  • Schriften und Typographie
  • Symbole, Buttons und Icons zum Download

Verwandte Beiträge:

  • Keine verwandten Beiträge

- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2006/05/07/liste-mit-linklisten/feed/ 2
Hasenjagd und Javascript http://www.perun.net/2006/04/19/hasenjagd-und-javascript/ http://www.perun.net/2006/04/19/hasenjagd-und-javascript/#comments Wed, 19 Apr 2006 17:22:36 +0000 http://www.perun.net/2006/04/19/hasenjagd-und-javascript/ Ein kleines aber feines Browserspiel für Zwischendurch hat der "Man in Blue" entwickelt: Bunny Hunt. Zutaten:

  • XHTML 1.0
  • CSS
  • Jede Menge Javascript
  • Nix Flash

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2006/04/19/hasenjagd-und-javascript/feed/ 1
Lightbox in WordPress http://www.perun.net/2006/03/30/lightbox-in-wordpress/ http://www.perun.net/2006/03/30/lightbox-in-wordpress/#comments Thu, 30 Mar 2006 11:21:19 +0000 http://www.perun.net/2006/03/30/lightbox-in-wordpress/ Lightbox ist ein Script welcher es ermöglicht, die Bilder schöner zu präsentieren. Mittlerweile gibt es für WordPress ein Plugin, der die Einbindungen des Skriptes erleichtern soll.

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2006/03/30/lightbox-in-wordpress/feed/ 8
Variable Breite und Layouts, schöne Sitemaps http://www.perun.net/2006/03/29/variable-breite-und-layouts-schoene-sitemaps/ http://www.perun.net/2006/03/29/variable-breite-und-layouts-schoene-sitemaps/#comments Wed, 29 Mar 2006 14:31:31 +0000 http://www.perun.net/2006/03/29/variable-breite-und-layouts-schoene-sitemaps/ Hier drei interessante CSS-Links:

Verwandte Beiträge:

  • Keine verwandten Beiträge

- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2006/03/29/variable-breite-und-layouts-schoene-sitemaps/feed/ 1
Revolver http://www.perun.net/2006/03/25/revolver/ http://www.perun.net/2006/03/25/revolver/#comments Sat, 25 Mar 2006 09:23:47 +0000 http://www.perun.net/2006/03/25/revolver/ "Revolver" ist zuerst eine Waffe :-), aber in diesem Fall handelt es sich um ein kleines (2 kb) PHP-Script welches OpenSource ist und es einem ermöglicht z.B. eine einfache Diashow zu erstellen:

Revolver is a Fast Image Rotation Engine (FiRE)
Revolver can be used to show a stream of images without the need for an image viewer utility or Custom User Interface.

Verwandte Beiträge:

  • Keine verwandten Beiträge

- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2006/03/25/revolver/feed/ 2
Interview mit Garvin Hicking http://www.perun.net/2006/02/10/interview-mit-garvin-hicking/ http://www.perun.net/2006/02/10/interview-mit-garvin-hicking/#comments Fri, 10 Feb 2006 00:11:30 +0000 http://www.perun.net/2006/02/10/interview-mit-garvin-hicking/ Nicht zuletzt Jörg Petermann hat mir gezeigt, dass man auch in der Blogosphäre interessante Interviews führen kann. Auch für mich gibt es ein paar Leute die sich mit interessanten Themen beschäftigen oder an interessanten Projekten mitarbeiten an die ich die eine oder andere Frage stellen will.

Das erste Interview habe ich mit Garvin Hicking geführt. Er lebt in Köln, arbeitet als PHP-Entwickler und einen Großteil seiner Freizeit spendet er den Projekten PHPMyAdmin und Serendipity.

Hallo Garvin, vielen Dank das du dir die zeit genommen hast auf meine Fragen zu antworten.

Das tue ich doch gerne. Wer etwas mein privates Blog verfolgt, weiß, dass ich keiner Umfrage bzw. Fragebogen wiederstehen kann. 🙂

Was war dein erster Rechner und was hast du hauptsächlich damit gemacht?

Also wenn man es als Rechner bezeichnen kann, dann war das der Schneider CPC 464. Mit Datasettenlaufwerk. Darauf konnte man sogar Musik hören, wie mein 4-jahre jüngerer Bruder herausgefunden hat – was mich aber eher zur Weißglut brachte.

Eigentlich hätte ich mir lieber damals einen C64 geben lassen, weil ich ja damit spielen wollte wie die anderen Kids – demonstrativ habe ich für meine Eltern damals einen C64 aus Spanholz und Pappschachtel-Disketten hergestellt, bis ich
dann endlich mit dem CPC beglückt wurde. Nach viel Zeit vor dem grünochromen Monitor habe ich dann auch rausgefunden, dass das Ding zum Spielen nicht wirklich gut war. Dann habe ich angefangen, Listings aus Zeitschriften abzutippen, die nie klappten – bis ich dann meine eigenen kleinen Grafik-Spielereien gebastelt habe. RÜckblickend war es wohl gut, dass ich keine bessere Spielekonsole bekommen habe. 🙂

Du arbeitest als PHP-Entwickler in Köln. Könnte man ein bisschen mehr über deine Arbeit erfahren?

Jein; eigentlich arbeite ich festangestellt als PHP-Entwickler bei der Faktor E in Bonn. In Köln arbeite ich (sehr selten) zusätzlich noch freiberuflich, wenn man Dinge anfallen wie z.B. Fachgutachten für PHP-Bücher des O’Reilly Verlages oder ähnliches.

Meine Arbeit ist eigentlich recht vielfältig und beinhaltet so ziemlich alles, was man mit PHP und Webservern machen kann. Von Shellscripts zur Systemadministration, Apache-Spielereien, CMS-Implementationen bis hin zu komplexen datenbankgestützten Web-Applikationen, die so alles tun, was sie laut Kunden tun sollen. Was mir dabei besonders gefällt, ist dass die Arbeit vielfältig ist – ich könnte wohl nicht in einer Firma arbeiten, wo ich auf ein einzelnes Projekt festgelegt würde.

Wie kamst du zu PHP, wann war das und wie hast du PHP gelernt?

Das muss ungefähr ’98 gewesen sein. Damals hatte ich mit einem guten Freund ein Gewerbe gegründet, um hauptsächlich Computerhardware zusammenzubauen und zu verkaufen. Da ich nebenher schon sehr an HTML und Design interessiert war, gelangen wir über PC-Hardware auch in Kontakt mit einem anderen Dienstleister, der eine Onlineshop-Seite für einen Kunden entwickeln sollte. Ursprünglich wollte ich nur das Design entwickeln, aber dann warf mir unser Partner das Stichwort "PHP" entgegen. "Damit kann man wohl im Web tolle Dinge machen" – und dann war’s um mich geschehen.

In einer Woche hatte ich das PHP Manual durchgearbeitet, und mit meiner Erfahrung in Basic und Turbo Pascal war die neue Syntax auch ziemlich einfach. Eine weitere Woche später stand dann meine erste MySQL-Datenbankapplikation eines Shop-Systems. Später habe ich dann meinen Zivildienst in der Caritas-Werkstatt begonnen und konnte dort eine Art Warenwirtschaftssystem entwickeln. Über den Zeitraum von 6 Monaten sind dabei gut 100.000 Codezeilen angefallen – rückblickend natürlich grausliger Spaghetti-Code, aber es hat toll geklappt und sogar mit Barcode-Scannern interagiert. Ich glaube das war dann der Punkt bei dem ich entschieden habe, dass mir logische Software-Entwicklung mehr Spaß macht und mir mehr liegt als das Design.

Was fasziniert dich an PHP?

Prinzpiell ist es die Einfachkeit, und der hohe Verfügbarkeitsgrad. Es gibt kaum noch Webserver, bei denen man kein PHP anwenden kann. Zudem ist die Sprache extrem simpel und bietet für viele algorithmische Probleme direkt integrierte Funktionen an. Die Einrichtung von PHP ist ziemlich einfach, und viele Entwickler die sich damit auskennen, stehen zur Verfügung.

Besonders die einfache Verknüpfung von HTML und PHP hat mich wohl damals fasziniert, und macht es auch heute noch möglich extrem schnell zum gewünschten Ziel zu gelangen. Ausserdem hat PHP eine sehr flache Lernkurve aber bietet auch nach Jahren immer noch neue Möglichkeiten zur Optimierung, so wie die neuen OOP-PHP5 Features.

Was meinst du was wir von PHP in den nächsten 2-3 Jahren erwarten können und wie siehst du den Stand von PHP in Anbetracht der "Konkurrenz" (Python, Ruby)?

Ich denke der große Vorteil von PHP ist, dass es kommerziell etabliert ist. Viele Web-Agenturen haben sich darauf bereits eingelassen, der Support von Hostern ist entsprechend groß.

Der Ur-Konkurrent Perl ist meiner Meinung einfach zu 'obfuscated'; Perl-Code ist (für mich) einfach hässlich zu lesen, und kann aufgrund seiner Syntax durchaus die ein oder andere Gehirnwindung verdrehen. Zudem ist Perl schon zu sehr auf’s
"Alles Können" spezialisiert, und daher für den einfachen Webentwickler zu komplex.

Wie man an vielen PHP-Projekten sieht, sind viele PHP-Entwickler Anfänger, die schnell Ergebnisse produzieren – das ist das Hauptproblem von Python und Ruby. Durch die strenge Syntax von Python wird kaum ein Anfänger damit klarkommen –
denn wie man an PHP-Code sieht, ist der überwiegend "hässlich" erstellt.

Einsteiger denken bei der Programmierung auch eher in funktionaler Strategie – kaum jemand wird direkt den Umgang mit Objektorientierung begreifen, worauf Python und Ruby aber basieren. Und das Web gewinnt man letztlich nur mit geringen Anfangshürden und flacher Lernkurve, aber mit Möglichkeit zum "sauberen Code". Beides bietet PHP, und wird es auch in Zukunft bieten.

Ich hoffe sehr darauf, dass durch die aktuellen Anstrengungen Zend-Framework und ezComponents der generelle Code von Entwicklern mehr vereinheitlicht wird. Gute Komponenten entschlacken den eigenen Code und machen ihn leichter
wiederverwendbar. Worauf PHP sich auch "besinnen" muss, ist den faulen Entwickler einfacher zu sicherem und sauberen Code zu zwingen. Sicherheitslücken wie XSS und SQL Injection müssen für den User begreifbar in Programmierkonzepte umgewandelt werden, und die Entwicklung von PHP6 scheint da schon in eine gute Richtung zu gehen.

Das Fallbein wird da die Backward-Compatibility werden; das schönste, neue und sichere Konzept nutzt nichts, wenn jeder die "alte Syntax" verwendet. Hier wird es schwierig werden, einen guten Weg zu finden.

Gibt es für PHP Einsatzgebiete wo PHP noch gar nicht oder zu wenig eingesetzt wird obwohl PHP dort viel Potential entfalten könnte?

Prinzpiell denke ich, dass jedes Einsatzgebiet speziell betrachtet werden muss, und man schauen muss, welche Programmiersprache für ein Projekt am geeignetsten ist. Bei freien oder langjährigen Projekten sollte man auf die Verbreitung der Programmiersprache achten, um nicht irgendwann zu wenig Entwickler zu haben. Aber genauso wichtig ist, ob die Sprache performant und stabil genug für den Anwendungszweck ist.

Als Einsatzgebiet für PHP noch wenig geeignet erscheint mir der Einsatz von stark parallelisierten oder geclusterten Anwendungen. Die nur rudimentäre Unterstützung von persistenten Objekten über mehrere Requests hindurch ist noch eine Sache, die PHP lösen muss um in diese Region der JSP/Java-Anwendungen sinnvoll vorzudringen. Gleichzeitig sollte PHP aber keinen so massiven Footprint und Systemvoraussetzungen wie für JSP/Java vorbringen.

Für Desktop-Anwendungen macht PHP, trotz allen PHP-GTK-Spaßes meiner Meinung nach wenig Sinn. PHP ist eine Scriptsprache, und kann/sollte mit solchen Anwendungen nicht konkurrieren.

Welche Neuerungen dürfen kurz- und mittelfristig vom PHPMyAdmin-Projekt erwarten und was ist deine Aufgabe dort?

Das ist eine stechende Frage. Leider ermöglicht es mir meine beschränkte Zeit und andere Aufgaben in letzter Zeit kaum, im phpMyAdmin-Team anders als strategisch-beratend tätig zu sein.

Kurzfristig wird gerade sehr viel an einem Menü-basierten Installer vorgenommen, der schon gut voranschreitet. Auch MySQL5-Unterstützung ist in letzter Zeit besser geworden.

Was phpMyAdmin mittelfristig leisten muss (meiner Meinung nach) ist ein komplett überholtes Framework. Der jetzige Spaghetti-Code mit vielen HTML-Brocken ist bei der Menge an Code sehr unübersichtlich geworden. Hier bietet es sich an, über eine Objekt-Orientierung zur Abstraktion nachzudenken, und auch ein Session-Handling zu konzipieren. phpMyAdmin initialisiert einen gewaltigen Wust an Initialdaten, und muss bei JEDEM Seitenaufruf die gesamte Konfiguration parsen. Das wird heutzutage immer mehr zu einem einschränkenden Faktor.

Weiterhin soll(t)en die Funktionalitäten für Rapid-DB-Prototyping ausgebaut werden; der Editor zur Behandlung von Referenz-Tabellen/Spalten und Fremdschlüsseln müsste mehrdimensionale Verknüpfungen zulassen, um so auch das Layout von komplexen Datenbank-Strukturen zu erleichtern.

Gerade bei phpMyAdmin würde der Einsatz von Ajax und einem leichten Framework extrem viel Sinn machen.

Diese drei Zentralpunkte (Framework-Neubau, MySQL5, Relationen) sind essentiell wichtig, um den Nutzen des Tools voranzutreiben. Ich sehe da allerdings wenig Licht am Ende des Tunnels, da diese Aufgaben mehrere Monate Entwicklungszeit und kompetenter, vorausblickender Entwickler bedürfen.

Du arbeitest auch am Serendipity-Projekt mit. Was ist deine Aufgabe dort?

Ich arbeite dort inzwischen fast nicht mehr nur mit, sondern verbringe den 99%igen Großteil meiner Freizeit-Programmierzeit damit.

Meine Aufgabe dort umfasst (leider) eigentlich fast alles: Release-Manager, Support, Feature-Entwicklung, PR.

"Leider" deshalb, weil ich mir eine größere Community mit stärkerer Aufgabenteilung wünsche. Ich mache das ganze zwar aus Leidenschaft und Spaß am Projekt, aber möchte auch, dass das ganze nicht nur von einer handvoll Personen abhängt.

Könntest du in Kurzform erzählen warum man Serendipity als Weblog-Software einsetzen sollte?

Es wäre einfacher zu erklären, warum man Serendipity nicht verwenden sollte. Dann wäre ich jetzt fertig. 😉

Spaß beiseite. Serendipity bietet ein aufgeräumtes, Plugin-orientiertes Framework. Damit ist es extrem flexibel und sehr anpassbar. Wir verwenden das Smarty-Template System, mit dem man alle möglichen Anpassungen vornehmen kann – und darum geht es dem Blogger ja häufig.

Mehr als 100 Plugins lösen bei Serendipity so ziemlich jedes Problem und jeden Wunsch, den man beim bloggen entwickeln könnte.

Doch da hört Serendipity nicht auf, denn auch zum Einsatz für "normale "Webseiten ist es inzwischen gut geeignet.

Eine detailierte Benutzer- und Rechteverwaltung, eine Online-Plugin-Verwaltung und eine ausgebaute Mediendatenbank runden das ganze Paket gut ab.

Letztlich muss man natürlich sagen, dass Blogger eigenwillige Zicken sind. Es gibt immer spezielle Wünsche, damit man sich individuell präsentieren kann, und so zählt auch die Auswahl der Weblog-Software dazu. Ob Serendipity, WordPress, Textpattern oder MoveableType: Alle bedienen das Metier fast gleich gut. Serendipity sticht durch seine Flexibilität, geordneten Code und hohe Integrierbarkeit hervor.

Generell gilt: Probieren geht über studieren. 🙂

Wie schaut die Zukunftsplanung für Serendipity aus?

Wir haben derzeit viel vor. Version 1.0 steht vor der Tür, und rundet die mehr als 3 Jahre Entwicklungszeit in einem schnuckeligen, stabilen Release ab. Dafür polieren wir gerade viel am Design und der Präsentation. Denn eine Community kann nur dann größer werden, wenn auch mehr Leute von Serendipity wissen und auf den ersten Blick umfassend informiert werden können. Das ist derzeit in der Tat eher nur für denjenigen möglich, der sich mehr mit Serendipity befasst.

In mittelfristiger Zukunft liegt der Ausbau der Dokumentation. Parallel befriedigen wir eigentlich immer Feature-Requests und kurzfristige Pluginwünsche. Gerade das Plugin zur Bearbeitung von "statischen Seiten" wird noch einen wichtigen Punkt darstellen, und wird derzeit vom Hauptentwickler des Plugins detailiert vorbereitet.

Weitere Zukunftsplanung ist die Integration offener Schnittstellen, wie die Atom REST-API, den Ausbau des Online-Repositories. Auch dem User-Interface wollen wir uns stärker widmen, und dort stehen uns in naher Zukunft voraussichtlich eine Usability-Expertengruppe der OpenUsability.org zur Verfügung.

Auch Ajax (an den Stellen, wo es wirklich Sinn macht!) wird nach wie vor ein Thema bleiben. Vieles wird sich anhand der neuen Wünsche der Blogger zeigen, auf die wir immer sehr großen Wert legen. Wir sind ein offenes und flexibles
Projekt, und werden dies nicht durch 2-jährige Vorausplanung zunichte machen.

Braucht ihr (PHPMyAdmin und Serendipity) Hilfe und wie könnte man euch unterstützen?

Hilfe braucht man natürlich immer. Gerade im Bereich der Dokumentation, Design und User Interface haben wir großes Bedürfnis. Doch auch Entwickler, die sich gerne mit dem Framework an sich befassen möchten, sind immer willkommen.

Ein aktuelles "Problem" in Verbindung mit PHP sind Kontaktformulare. Viele Kontaktformulare werden von Spamern als Spam-Schleudern missbraucht. Gefährdet sind sogar Formulare, die bis dato als "sicher" galten. Also auch Formulare die eine feste Empfänger-Adresse hatten und die auch htmlspecialchars und stripslashes intus hatten. Könntest du uns kurz erklären, welches Prinzip wird hier ausgenutzt, wie kann man testen ob man gefährdet ist und wie kann man sich gegen so was schützen?

Leider gibt es im heutigen Spam-Zeitalter immer neue Mittel und Wege, wie Spammer ihre Sachen an den Mann kriegen. Nicht nur Viren, Trojaner und Phishing werden genutzt, sondern auch bestehende Webseiten.

An dem Wust von aktuellen Sicherheitslücken (XSS, XSRF, SQL Injection, Header Injection, DDOS, …) gibt es vieles, worauf PHP-Entwickler achten müssen. Seiten wie www.hardened-php.net widmen sich dem sehr ausführlich, daher möchte ich nur kurz darauf eingehen.

Das oben angesprochene Problem der Kontaktformulare war insofern tückisch, als dass man mit der Anwendung der "üblichen Sicherheitsfunktionen" htmlspecialchars()/stripslashes()/*_escape_string() einen Fall nicht bedacht hat:

HTTP-Anwendungen und auch E-Mails erlauben beide die Festlegung von Metadaten, sogenannter Header. HTTP-Header geben Meta-Informationen zur Dokumentgröße, Cookies und Systemzeit aus, während E-Mail Header den Absender, Absendezeit, Inhaltstyp u.ä. angeben.

Beide Header unterteilen die einzelnen Felder mit einfachen Zeilenumbrüche (\r\n). Wenn irgendwo in den Header einen Benutzereingabe auftaucht (z.B. "From: $user"), dann kann es sein, dass ein böswilliger User in dieser Variable einen
Zeilenumbruch mit weiteren individuellen Headern eingeschleust hat. Diese Header werden dann vom HTTP-Browser oder E-Mail-MTA durchaus interpretiert, und können sowohl zu gefälschten HTML-Seiten als auch zu völlig anderen Spam-E-mails
umgewandelt werden.

Seit PHP 5.1.2 und 4.4.2 besteht das Problem bei HTTP-Headern nicht mehr, da Zeilenumbrüche nicht mehr erlaubt werden. Für E-Mails die mittels der mail() Funktion versendet werden, gilt dies jedoch nach wie vor. Daher muss der Programmierer darauf achten, dass er aus allen Benutzereingaben ungültige Zeichen wie \r, \n, \t, \0 alle entfernt.

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2006/02/10/interview-mit-garvin-hicking/feed/ 10
Titel-Attribut gestalten http://www.perun.net/2006/01/27/titel-attribut-gestalten/ http://www.perun.net/2006/01/27/titel-attribut-gestalten/#comments Fri, 27 Jan 2006 08:21:50 +0000 http://www.perun.net/2006/01/27/titel-attribut-gestalten/ Evtl. ist die Überschrift etwas missverständlich 😕 es geht um die Möglichkeit mittels CSS und Javascript den Titel-Attribut (title="...") zu "gestalten" oder besser gesagt stattdessen CSS-Tooltips auszugeben:

Verwandte Beiträge:


- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2006/01/27/titel-attribut-gestalten/feed/ 9
"onload"-Grenzen umgehen http://www.perun.net/2005/08/29/onload-grenzen-umgehen/ Mon, 29 Aug 2005 07:38:14 +0000 http://www.perun.net/?p=489 Alessandro gibt Tipps wie man die Grenzen von window.onload (eine Funktion, Ausführung wenn die Seite vollständig geladen wurde) umgehen kann.

Verwandte Beiträge:

  • Keine verwandten Beiträge

- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
DHTML-Container http://www.perun.net/2005/06/04/dhtml-container/ http://www.perun.net/2005/06/04/dhtml-container/#comments Sat, 04 Jun 2005 09:03:18 +0000 http://www.perun.net/?p=445 Diese relativ neue Werbetechnik taucht unter verschiedenen Namen auf: DHTML-Layer, Flash-Layer, DHTML-Container etc. Es geht hier darum mittels DHTML (HTML, CSS und Java Script) z. B. eine Werbebotschaft oder zusätzlichen Inhalt auf der Website einzublenden ohne dafür ein Popup zu bemühen. Daher können die klassischen Popup-Blocker diese Technik nicht unterdrücken.

Ok, ich weiß das einige Leute solchen Techniken gegenüber sehr skeptisch und teilweise feindlich gegenüber stehen. Aber ich bin der Meinung daß diese Technik, wie übrigens das klassische Popup, an sich neutral ist. Was manche Betereiber daraus gemacht haben bzw. machen ist eine andere Geschichte.

OK, nun zu der Erstellung eines DHTML-Containers. Im Prinzip handelt sich hierbei um einen Div-Block in dem man verschiedenartige Inhalte (Text, Grafik, Flash etc.) unterbringen kann und nach einer bestimmten Zeitspanne oder Aktion des Besuchers soll dieser Block sichtbar werden. Ich werde hierbei ein mögliches Beispiel aufzeigen, welches für den Besucher eine nützliche Information bereithält.

Also erstellen wir zuerst einen Div-Block und fügen diesen in die Website ein:

<div class="info-box" id="info">
<h2>Die letzten Kommentare</h2>
<ul>
<li>Kommentar 1</li>
<li>Kommentar 2</li>
<li>Kommentar 3</li>
<li>Kommentar 4</li>
<li>Kommentar 5</li>
</ul>
<a href="javascript:schliessen()">Schließen</a>
</div>

Und jetzt geben wir die der Klasse info-box in der CSS-Datei die Formatierung:

.info-box {
position: absolute;
top: 50%;
left: 50%;
padding: 1em;
visibility: hidden;
z-index: 999;
}

Somit ist dieser Block standardmäßig unsichtbar. Falls er sichtbar wird, dazu später, dann wäre er absolut positioniert und würde mitten auf der Webseite erscheinen und zwar über all dem anderen Inhalt (z-index: 999;).

Jetzt kommt Java Script ins Spiel:

<script type="text/javascript">
var warten = setTimeout('anzeigen()',2000);
function anzeigen()
{
document.getElementById("info").style.visibility="visible";
}
function schliessen()
{
document.getElementById("info").style.visibility="hidden";
}
</script>

Dieses kleine Script kann man entweder im Kopfbereich der jeweiligen Seite einfügen oder in eine externe Datei auslagern. Und was bewirkt dieses Script? Das Script wartet 2000ms (2 Sekunden) und ruft dann die Funktion anzeigen() auf. Diese Funktion ändert in dem Container mit der Id=info den Wert von unsichtbar auf sichtbar. Somit erscheint die Info-Box auf der Website.

Wenn man auf den Link "Schließen" klickt, wird die Funktion schliessen() aufgerufen und dies ändert den visibility-Wert auf unsichtbar.

Hierbei sollte man natürlich erwähnen, daß diese Technik nicht funktioniert wenn Java Script im Browser deaktiviert ist. Auch in den Standardeinstellungen von Win XP SP2 für Internet Explorer wird diese Technik ebenfalls geblockt (zumindest war es bei mir so). Und wenn man in Mozilla oder Mozilla-Firefox den Flash-Blocker installiert hat, dann werden die "Flash-Layer" ebenfalls geblockt.

Verwandte Beiträge:

  • Keine verwandten Beiträge

- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2005/06/04/dhtml-container/feed/ 5
Spickzettel für Webworker http://www.perun.net/2005/05/28/spickzettel-fuer-webworker/ http://www.perun.net/2005/05/28/spickzettel-fuer-webworker/#comments Sat, 28 May 2005 09:22:36 +0000 http://www.perun.net/?p=442 Wer kennt das nicht aus der Schulzeit 🙂 . Tagelang vor einer Klausur hat man an einem Spickzettel gebastelt und versucht so viel Wissen wie möglich auf einem kleinen Zettel unterzubringen. Auch wenn es man es innerhalb der Klausur nicht zum Schummeln verwendet hat, so war dieser Zettel nicht umsonst. Dadurch, daß man sich mit der Materie auseinandergesetzt hat ist zumindest etwas vom Lernstoff hängengeblieben.

Jetzt gibt es für Webworker Spickzettel, welche man ohne Angst und schlechtes Gewissen verwenden darf :-):

Via CSS-Technik-News.

Verwandte Beiträge:

  • Keine verwandten Beiträge

- WordPress-Anleitung für Autoren und Redakteure...
- WordPress-Handbuch für Administratoren und Webmaster...
... als E-Book und als PDF-Volumenlizenzen

Premium WordPress-ThemesWordPress-Pluginskostenloser WordPress-NewsletterUnsere Bücher

Wir im Web: TwitterFacebookGoogle+WordPress-Buch


]]>
http://www.perun.net/2005/05/28/spickzettel-fuer-webworker/feed/ 3