PHP Blogger

Startseite Schreib mir ne Mail! RSS Abo Webnews

Archiv für HTML

Usability von Paginations-Elementen

Wer kennt sie nicht, die schicken Navigationselemente. Die “vor” und “zurück” Links, Buttons und Bildchen. Dazwischen Seitenzahlen und was des Blätterers Herz noch so begehrt. Selfhtml hat sich diesem Thema mal aus Usability-Sicht genähert und stellt Fragen wie:

  • Bild, Button oder Text?
  • Sind Direktlinks in Form von Zahlen zu Ergebnisseiten sinnvoll?
  • Was tut der Übersichtlichkeit abbruch?

Lesen und Bescheid wissen über sinnvolle Paginationen. Auch direkt interessant: Dirks Artikel zum Paging… Und eine Umsetzung mit jQuery (Danke Jann).

Teile und genieße Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • MisterWong
  • del.icio.us
  • Technorati
  • Digg
  • Slashdot
  • YahooMyWeb
  • Furl
  • Ma.gnolia
  • Spurl
  • Netscape
  • StumbleUpon
  • MyShare
  • blogmarks

CSS: Feststehende Kopf- und Fusszeile

Via Jann. Kann man immer mal gut gebrauchen: eine fixierte Kopf- und Fußzeile nebst feststehender Navigation (Will heissen: Scrollt nicht mit). In einem ausführlichen Artikel erklärt Dennis Riehle genau wie es funktioniert.

Und damit’s besonders viel Spass macht, hier gleich noch ein Link zur Demoseite: http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htm

Teile und genieße Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • MisterWong
  • del.icio.us
  • Technorati
  • Digg
  • Slashdot
  • YahooMyWeb
  • Furl
  • Ma.gnolia
  • Spurl
  • Netscape
  • StumbleUpon
  • MyShare
  • blogmarks

Abstraktes HTML mit HAML

Haml LogoNein. Es ist kein Hase, es ist ein Haml. Gerade über dieses erstaunliche Projekt gestolpert, muss ich es auch gleich mal bloggen. Was ist Haml? Und was macht es?

Haml ist eine Abstraktions-Auszeichnungssprache für Webfrontends, original entworfen für Ruby. Es erinnert mich an einen Mix aus CSS, Yaml und TextilePHP… Mit anderen Worten: Man beschreibt anhand strukturierter Ausdrücke den Aufbau einer HTML-Datei:

%h2 Überschrift
  %ul
    %li Eintrag 1
    %li Eintrag 2

wird zu:

<h2>Überschrift</h2>
<ul>
  <li>Eintrag 1</li>
  <li>Eintrag 2</li>
</ul>

Im Haml-Labor kann man ein bisschen mit der Syntax rumspielen. Aber Haml kann noch ein bisschen mehr. Auch logische Verzweigungen und Schleifen sind möglich.

Den kompletten Artikel lesen »

Teile und genieße Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • MisterWong
  • del.icio.us
  • Technorati
  • Digg
  • Slashdot
  • YahooMyWeb
  • Furl
  • Ma.gnolia
  • Spurl
  • Netscape
  • StumbleUpon
  • MyShare
  • blogmarks

Syntax-Highlighting auf Blogs

Viele Blogger berichten von großen und kleinen Errungenschaften. Oft geht es um Codebeispiele die CSS, HTML, PHP oder andere Programmiersprachen betreffen. So auch der PHP Blogger. Hier geht es natürlich vorzugsweise um PHP, aber auch andere Sprachen werden gelistet.

Um ein schickes Syntax-Highlighting auf seinem Blog anbieten zu können, kommen mehrere Varianten in Betracht. Die schönste ist meiner Meinung nach mittels Starlight von Dean Edwards, über das ich bereits im Artikel “Highlight-Express” berichtet habe.

Den kompletten Artikel lesen »

Teile und genieße Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • MisterWong
  • del.icio.us
  • Technorati
  • Digg
  • Slashdot
  • YahooMyWeb
  • Furl
  • Ma.gnolia
  • Spurl
  • Netscape
  • StumbleUpon
  • MyShare
  • blogmarks

Flash Scripte ohne Rahmen einbinden

Seit Microsoft seinen Internet-Explorer um ein Sicherheitsupdate aus SP2 bereichert hat, müssen ActiveX Objekte erst durch einen Klick aktiviert werden, bevor man sie verwenden kann. Sehr nervig bei Flash-Navigationen und anderen Spielereien.

“Klicken Sie, um das ActiveX Element zu aktivieren.”

So oder ähnlich wird man bei einem Mouse-Over über das fragliche Element aufgefordert zu klicken. Eine kleine Javascript Bibliothek namens SWFObject (vormals FlashObject) automatisiert das ganze, in dem das Flash-Movie mittels Javascript eingefügt wird.

Den kompletten Artikel lesen »

Teile und genieße Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • MisterWong
  • del.icio.us
  • Technorati
  • Digg
  • Slashdot
  • YahooMyWeb
  • Furl
  • Ma.gnolia
  • Spurl
  • Netscape
  • StumbleUpon
  • MyShare
  • blogmarks

Pseudo-Tags mit Textile

Man kennt es von Foren, Blogs und Wikis: Die Pseudo-Tags. Oft möchte man, das Besucher Ihren generierten Inhalt in Form von Kommentaren und/oder Beiträgen selbst etwas gestalten können. Um trotzdem das leidige Thema XSS zu vermeiden hilft oft nur eine Whitelist an zugelassenen Tags oder eben Pseudo-Tags.

Irgendwo bin ich letztens über TextilePHP gestolpert. Textile wurde 2002 von Dean Allen entwickelt, um die Eingabe von formatierten Inhalten in Wikis oder Blogs zu vereinfachen. Ein beabsichtigter Benefit ist die Generierung von validem XHTML Code. Der Code ist auf Lesbarkeit optimiert und entsprechend einfach zu verstehen. Eine Demo zum ausprobieren gibts direkt bei Dean Allen.

Den kompletten Artikel lesen »

Teile und genieße Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • MisterWong
  • del.icio.us
  • Technorati
  • Digg
  • Slashdot
  • YahooMyWeb
  • Furl
  • Ma.gnolia
  • Spurl
  • Netscape
  • StumbleUpon
  • MyShare
  • blogmarks

Caching deiner dynamischen Inhalte

Nachdem ich ja vor einiger Zeit meinen Vorschlag gemacht habe, dass man Javascript und CSS Dateien doch gemeinsam über PHP parsen und ausgeben konnte kam natürlich gleich die Frage, ob und wie man das dann cachen kann. Nach einigen harten Fehlschlägen ist hier meine aktuelle Strategie dynamische Bilder, Skripte etc. den Browser (zumindest die Meisten) cachen zu lassen.

Den kompletten Artikel lesen »

Teile und genieße Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • MisterWong
  • del.icio.us
  • Technorati
  • Digg
  • Slashdot
  • YahooMyWeb
  • Furl
  • Ma.gnolia
  • Spurl
  • Netscape
  • StumbleUpon
  • MyShare
  • blogmarks

Firebug und Webdeveloper Toolbar

Heute wollte ich euch von drei, für mich inzwischen unverzichtbaren, Helfern erzählen. Wer auch nur einen davon noch nicht kennt, kann hier noch was für sich mitnehmen.

Den kompletten Artikel lesen »

Teile und genieße Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • MisterWong
  • del.icio.us
  • Technorati
  • Digg
  • Slashdot
  • YahooMyWeb
  • Furl
  • Ma.gnolia
  • Spurl
  • Netscape
  • StumbleUpon
  • MyShare
  • blogmarks

Highlight-Express

Nachdem Phil über die Simulation von CSS Selektoren mit Hilfe von Dean Edwards Bibliothek berichtet hat, hab ich auf der Seite von Dean gleich mal weiter gestöbert und eine interessante weitere Bibliothek gefunden: Starlight.

Hat nix mit dem gleichnamigen *-Express zu tun sondern realisiert auf einfache Weise das Syntax-Highlight beliebiger Programmiersprachen auf Webseiten z.B. im <pre>-Tag.

Da ich auf PHP Blogger für Syntax-Highlights ebenfalls das <pre>-Tag verwende (<code> ist übrigens auch möglich), hab ichs gleich mal beim PHP Blogger eingebunden und getestet.

Den kompletten Artikel lesen »

Teile und genieße Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • MisterWong
  • del.icio.us
  • Technorati
  • Digg
  • Slashdot
  • YahooMyWeb
  • Furl
  • Ma.gnolia
  • Spurl
  • Netscape
  • StumbleUpon
  • MyShare
  • blogmarks

ul.dropdown li:hover > ul {display: block}

Wer kennt es nicht. Die schöne neue CSS-Layout Welt. Damit kann man aus einfachen HTML-Listen Tabbed Drop Down Menüs erstellen und am Besten noch über mehrere Ebenen. Doch was ist falsch an dem Code? Was hält uns im Moment noch davon ab ihn so zu benutzen? Richtig. Der gute alte IE6 unterstützt das obige Konstrukt nicht, weil der schöne CSS2-Selektor > nicht erkannt wird. Genausowenig wie der :hover Effekt in was anderem als in einem <a> unter IE6 funktioniert.

Den kompletten Artikel lesen »

Teile und genieße Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • MisterWong
  • del.icio.us
  • Technorati
  • Digg
  • Slashdot
  • YahooMyWeb
  • Furl
  • Ma.gnolia
  • Spurl
  • Netscape
  • StumbleUpon
  • MyShare
  • blogmarks
Ältere Artikel »