scrollleiste.de

Bei Google Code gibt es das Syntaxhighlighter-Projekt, eine JavaScript-API die Quellcode-Syntax verschiedenster Sprachen auf Websites farbig darstellt (siehe Artikel “SyntaxHighlighter macht Quellcode schön“). Das Parsen des Code, um diesen einfärben zu können läuft dabei in der JavaScript-Engine des Browsers, also beim Client ab. Das spart zwar Rechnenkapazität auf dem Server, jedoch ist JavaScript in den Browsern der Generation vor Chrome nicht sehr performant. Am ehesten merkt man dies beim Einsatz des Google Syntaxhighlighters im Internet Explorer kleiner 7 beim Parsen mittelgrößer Code-Stücke. Fehlermeldungen, dass Skripte nicht zum Ende kommen und einfrierende Browserfenster sind die Folge.

Eine brauchbare Alternative stellt highlight.js von Software Maniacs dar. Diese JavaScript-Bibliothek funktioniert analog zu der von Google Code, jedoch ist sie weit performanter. Zwar lassen sich die Browsermeldungen nicht ausschließen, jedoch treten diese erst bei weit größeren Codeblöcken auf. Highlight.js ist mittlerweile auch Bestandteil des JavaScript-Framework Dojo.

Geübte Webdesigner schütteln ein-, zwei- oder gar dreispaltige CSS-Layouts oft noch aus dem Ärmel. Einfache “Fixed Width”-Layouts, also Layouts mit fester Breite, lassen sich für alle gängigen Browser relativ einfach umsetzen, wenn man die Tücken um die Browserbugs und typische Problemstellungen kennt. Der bekannte Box-Modell-Fehler des Internet Explorer gilt hier als Paradebeispiel.

YAML als CSS-Framework für Spaltentechnik

Sollen Webseiten-Layouts vielspaltig werden und möglichst mit der Fenstergröße skalierbar sein, wird es schon komplizierter. Bei großen Webprojekten kommt man hier als “Professional” meist wohl nicht um eine Individualentwicklung des Seitenrasters herum.
Aber gerade die Umsetzung kleinerer Projekte müssten sich doch mit fertigen Bausteinen oder gar Frameworks beschleunigen lassen. Und in der Tat gibt es ein ausgereiftes und praxiserprobtes CSS-Framework, das hierbei helfen soll. Viele werden YAML (“Yet Another Multicolumn Layout”) zumindest vom Namen kennen. Es stammt von dem mittlerweile recht bekannten Webworker und Hobby-Fotograf namens Dirk Jesse, der eigentlich wissenschaftlicher Mitarbeiter der Universität Dresden im Bereich Maschinenbau ist. Diesen kennt man neben YAML von seinem Webdesign-Blog “High Resolution” oder seinem Fotoweblog “Staring at the Sun“. Beides für den eigenen Feedreader rechts empfehlenswert.

Den ganzen Beitrag lesen »

Von dem erst 17-jährigen argentinischen Web-Entwickler Guillermo Rauch stammt ein Nachbau der JavaScript-Slideshow, die der eine oder andere von Obama’s Wahlkampfwebsite kennt. Mit “BarackSlideshow” lassen sich Bilder nacheinander abspielen, der Titel des jeweils aktuellen Bildes wird rechts daneben durch einen wandernden Pfeil und ggf. durch eine andere Formatierung hervorgehoben:

Den ganzen Beitrag lesen »

Shiftzoom ist eine JavaScript-Tool, mit dem sich Bilder in einem Rahmen vergrößern (und verkleinern) lassen und bewegen lassen. Diese Navigation kennt man beispielsweise von Google Maps. Das eignet sich deshalb insbesondere für die Darstellung von Kartenmaterial oder für extrem hochaufgelöste Bilder:

Den ganzen Beitrag lesen »

Google bietet den kostenlosen Dienst “AJAX Libraries API” an, mit dessen Hilfe sich über JavaScript automatisch ein oder mehrere bekannte JavaScript-Frameworks laden lassen. jQuery, prototype, script.aculo.us, mootools oder dojo lassen sich somit mit einer Zeile JavaScript-Code vom Google-Server laden.

Der Vorteil ist: Der Webbrowser des Besuchers meiner Seite lädt sich die gewünschten JavaScript-APIs direkt vom Google-Server anstatt meinen eigenen Webserver mit dem verhältnismäßig hohen Traffic der JavaScript-Dateien zu belasten. Zudem lässt sich die gewünschte Version des einzubetteten Scriptes einfach per Parameter bestimmen und schnell austauschen oder upgraden.

Den ganzen Beitrag lesen »

Web 2.0 Verläufe im Text per CSS – ohne Flash oder eingebettes Bild unmöglich?

Nicht mit Hilfe dieses CSS-Tricks: Das Geheimnis ist in den Tag um den Text, z.B. <H1> am Anfang einen weiteren <span>-Tag einzufügen:

<h1><span></span>Metallic shine</h1>

Per CSS wird dann dem <span>-Element ein halbtransparentes PNG-Hintergrundbild zugewiesen, das per position-Angabe über die Headline gelegt wird:

h1 {
   font: bold 330%/100% "Lucida Grande";
   position: relative;
   color: #464646;
}

h1 span {
   background: url(gradient.png) repeat-x;
   position: absolute;
   display: block;
   width: 100%;
   height: 31px;
}

So kann man sich den Aufbau später vorstellen:
Den ganzen Beitrag lesen »

Der “syntaxhighlighter” von Google Code ist ein freies Skript, um die Syntax der Sprachen C++, C#, CSS, Delphi, HTML, Java, JavaScript, PHP, Python, Ruby, SQL, VB und XML iauf Websites farbig darzustellen. Der Highlighter ist vollständig in JavaScript geschrieben, arbeit rein clientseitig und lässt sich per CSS anpassen.

So sieht’s aus

Hier ein Beispiel in der Sprache CSS zur Demonstration der Auszeichnung.

/* TOGGLER */
div.toggler > *:first-child {
   margin-top: 0;
}

.toggler_head {
   background-image: url('images/expand.gif');
   background-repeat: no-repeat;
   background-position: left center;
   padding-left: 16px;
   cursor: pointer;
}

* html .toggler_head {
   cursor: hand;
}

Den ganzen Beitrag lesen »

Scrollleiste.de stellt sein erstes Wordpress-Plugin vor: “Highslide Integration”.

Mit Hilfe dieser Erweiterung für das Weblog-System “Wordpress” lassen sich eingebundene Bilder mit dem von Torstein Honsi bekannten JavaScript Tool “Highslide JS” vergrößern.
Kein aufwändiges Hinzufügen irgendwelcher Quicktags, von JavaScript o.ä. – einfach eine Null-Klick-Lösung!

Demo

Leistungsmerkmale

• Einfache Integration von Highslide JS
• Automatische Aktivierung/Deaktivierung für alle (auch bereits) veröffentlichten Bilder
• Unterstützung der Anzeige von Bild-Titel
• Unterstützt Bilder-Galerien
• Keine JS-Eventhandler im Code des Editors nötig, funktioniert vollständig mit Hilfe von CSS
• 2-Ebenen Anpassung des Aussehens über JavaScript und CSS
• Die integrierte Highslide-Bibliothek kann gegen eigen konfigurierte Bibliothek getauscht werden
• Mehrsprachig (aktuell: deutsch, englisch und italienisch)

Den ganzen Beitrag lesen »

Bei Smashing Magazine findet sich ein interessanter Artikel über neue nette JavaScript- bzw. AJAX-Frameworks. Neben kleinen GUI-Widgets für Aufgaben, wie Showcases, Kalender oder Steuerelementen, finden sich in der Liste auch umfangreiche und mächtige Frameworks mit Fenstersystemen und kompletten Webdesktops.

Frameworks

Ext JS bietet so gut wie jedes vom Desktop bekannte Steuerelement und kann mit einem kompletten Webdesign glänzen, der dem Look & Feel von Windows XP sehr nahe kommt:

Auch GWT-Ext zeigt in seinem Showcase ein mehr als umfangreiches Portfolio an GUI-Widgets:

Den ganzen Beitrag lesen »

Wer im Informationsdesign tätig ist, beschäftigt sich damit, Informationen zu visualisieren. Besonders interessant sind Aufgabenstellungen, bei denen besonders große Datenmengen ästhetisch, eindringlich und dennoch aussagekräftig bzw. übersichtlich dargestellt werden sollen. Verschiedene Portale und Magazin berichten immer wieder über neue Ideen und kreative Umsetzungen und dienen somit als ausgiebige Inspirationsquelle. Auch Gestaltungsmagazine, wie PAGE schreiben immer öfter über den Trend Datenvisualierung, wie jüngst in Ausgabe 05/08 mit dem Titel “Info-Design interaktiv”.

Inspirationsarchiv

Ein sehr inspiratives und ständig aktualisiertes Weblog über Informationsvisualisierung mit großem Archiv ist information aesthetics. Neben reinen Printbeispielen, werden genauso interaktive Anwendungen und Videos veröffentlicht:

Über die interaktive Anwendung “Naming Names” der New York Times zur Veranschaulichung von Zitaten von Präsidentschaftskandidaten der USA, berichtete neben information aesthetics auch PAGE:

Den ganzen Beitrag lesen »