Artikel der Kategorie Web

Unter Bewegungsparallaxe versteht man in der Wahrnehmungspsychologie den Effekt, der sich optisch ergibt, wenn verschiedene Objekte unterschiedlich von einander entfernt in einer Landschaft verteilt sind und sich der Beobachter parallel zu diesen Objekten seitlich fortbewegt und dabei in Richtung Horizont blickt. Dieser Effekt tritt beispielsweise auf, wenn man aus dem Seitenfenster eines fahrenden Autos oder Zuges schaut.
Wikipedia

Das JavaScript-Widget „jParallax“ simuliert den Parallaxe-Effekt durch teiltransparente Bilder, die sich in unterschiedlicher Geschwindigkeit zueinander bewegen, wenn man mit der Mause darüber fährt. Ganz anzuschauen, außer um es ins Layout zu integrieren, fällt mir eine geeignete Verwendung im Augenblick nicht ein. Was man zumindest feststellen kann ist, dass heutzutage immer mehr Dinge mit JavaScript gelöst werden, für die früher nur Flash in Frage kam. Schön.

Da es auf der Basis von jQuery geschrieben ist, lässt sich das Widget leicht nutzen, anpassen und erweitern.

Das Plugin „Flutter“ für die beliebte Blogging-Software „WordPress“ erlaubt es neben dem Schreiben einfacher Artikel oder Seiten beliebige neue Typen an Content-Elementen in WordPress festzulegen. Zum Beispiel zeigt das Demovideo der Flutter-Website, wie der Nutzer eine für WordPress völlig neue Klasse von Content-Objekten anlegt. Nämlich Events. Diese erhalten dann entsprechende Attribute, wie Namen, Datum und Name des Artisten. Diese Attribute der neuen Klasse Events werden dabei typisiert, sodass z.B. ein Datum später über einen Kalender-Dialog ausgewählt werden kann. Jetzt kann der Nutzer neben Artikeln auch Events in WordPress anlegen und veröffentlichen.

Dieses nette Plugin verwandelt WordPress wieder ein Stück mehr in ein brauchbares Content-Management-System für „Non-Blog-Websites“.

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. Weiterlesen »

GTD steht für „Getting Things Done“ und ist die Selbstmanagement-Methode nach dem beliebten Buch von Dave Allen. Einige Mac- und/oder iPhone-Nutzer kennen vielleicht die GTD-Anwendung „Things“ von Cultured Code. Auch wenn es der eine oder andere nur als ToDo-Liste verwendet, oder GTD ganz und gar verschmäht, die Software erweist sich für zumindest für mich als hilfreiches Werkzeug. Die Mac-Version ist noch Beta und daher kostenlos, die iPhone App schlägt mit € 7,99 zu buche. Besitzt man beide Anwendungen, können die Daten über WLAN synchronisert werden.

Interessant ist die Offenlegung des Entstehungsprozesses der Anwendung für das iPhone. Eine Bilderreihe zeigt dabei Einblicke in die Oberflächengestaltung vom Scribble zur fertigen GUI.

Auf der Website brainr.de kann man zusammen mit anderen Usern Ideen zu den verschiedensten Themen suchen und finden – auf deutsch. Ohne Anmeldung kann man über ein knackig kurzes Formular ein neues Topic anlegen. Fragestellung, kurze Beschreibung, Schlagwörter, E-Mail-Adresse, Kategorie auswählen – Fertig!

Sehr gut geeignet ist die Site um interessante Namensvorschläge für neue Produkte oder Unternehmen zu finden. Häufig findet man auch völlig abstruse Fragestellungen zu alltäglichen Dingen, die dann mit noch witzigeren Antworten versehen werden. Scheinbar nicht umsonst schmückt sich brainr.de mit der Tagline „hier spinnt die Welt“. Wer sich z.B. schon immer gefragt hat, was er mit gebrauchtem Kaffeesatz machen soll, wenn er ihn nicht wegwerfen möchten oder wer schon immer wissen möchte, wie man die Arbeit der Bienen ersetzen kann, der ist hier richtig.

Jedes Brainstorming lässt sich per RSS abonnieren.

Wenn Sie sich beim Umsetzen von Websites per CSS schon öfter gefragt haben, welche default-CSS-Angaben bestimmte Elemente eigentlich haben, dann finden Sie im Appendix D der W3C-Spezifiktion von CSS 2.1 Antwort.

Dies ist inbesondere dann interessant, wenn Sie Formatierungseigenschaften eines Elementes entfernen möchten. Denken wir an die Verwendung einer unsortierten Liste <ul> als Menüpunktaufzählung. Wenn Sie die einzelnen Punkte horizontal nebeneinander, ohne Aufzählungszeichen und ohne Außen- oder Innenabstand darstellen möchten, können Sie im genannten Anhang nachsehen, welche CSS-Eigenschaften Sie dazu überschreiben müssen.

Beachten Sie jedoch, dass nicht jeder Webbrowser sich an die Vorgaben der vom W3C veröffentlichten Recommendation hält. Dies können Sie insbesondere dann feststellen, wenn Sie das Stylesheet Ihrer Website einmal völlig ausschalten und die Darstellung des reinen Markups in den verschiedenen Browsern vergleichen.

Für Webdesigner ist diese Seite auf jeden Fall ein Bookmark wert.

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:

Weiterlesen »

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:

Weiterlesen »

Hyphenator ist ein Google Code Projekt, das per JavaScript eine Silbentrennung in die eigene Website bringt. Einfach API in die Seite einfügen und Silbentrennung starten:

<script src="http://hyphenator.googlecode.com/svn/trunk/Hyphenator.js" type="text/javascript">
</script>

<script type="text/javascript">
   Hyphenator.run();
</script>

Jetzt muss man nur noch den Elementen der Seite, auf die die Silbentrennung angewendet werden soll, die CSS-Klasse class="hyphenate" zuweisen. Explizit verhindern lässt sich die Trennung per class="donthyphenate".

Weiterlesen »