Archiv der Kategorie: Javascript

Inclusives Design: Das „current page“-Problem

Was ist das „current page„-Problem?

Beim „current page„-Problem geht es darum, wie man Nutzer idealerweise darüber informiert, auf welcher Seite man sich in einem Webangebot befindet und wie die geöffnete Seite im Hauptmenü dargestellt und ausgezeichnet werden soll.

Im Fazit am Ende dieser Seite gebe ich zusammenfassende Empfehlungen. Bitte lesen Sie dennoch den gesamten Text, da er die Vor- und Nachteile der verschiedenen Methoden erläutert. Es gibt leider keine Methode, die immer optimal ist.
Inclusives Design: Das „current page“-Problem weiterlesen

Slick – interessanter Slider

Im Moment kann man sich kaum noch in einem Social Media Network bewegen, ohne über den Slider Slick zu stolpern. Scheint im Moment ziemlich angesagt zu sein und die Anleitung ist mit Code als „Copy & Paste“-Vorlagen gespickt.

Dem Einsatz in einer eigenen Website steht also nichts im Weg!

Slick beeindruckt mit einer langen Feature-Liste, umfangreichen Optionen und angeblicher Barrierefreiheit. Klar, dass ich hellhörig geworden bin. Bisher habe ich ihn noch nicht produktiv eingesetzt – ich steh generell nicht besonders auf Slider – aber Slick gefällt mir vom ersten Eindruck her.

Setzt Ihr Slick bereits ein? Welche Erfahrungen habt Ihr gemacht?

Linktipps Responsives Webdesign (RWD)

In aller Kürze ein paar nützliche Links zum Thema responsives Webdesign:

Online Tool zum  Testen:
https://quirktools.com/screenfly/

RWD muss schnell sein und ein (von mir nicht präferierter) Lösungsansatz:
http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/

Die Bücher aus dem Galileo-Verlag haben mich immer wieder begeistert. Das unten verlinkte werde ich mir auf jeden Fall besorgen. Ihr solltet Euch mal die Videos ansehen. Vor allem im Video Lektion: 3.4 Mobile First, Content First [12:02] wird eine prima Lösung gezeigt, um (ältere) InternetExplorer zu unterstützen, die ja keine media queries verstehen (Stichwort response.js).

Da diese Lösung JS benötigt könnt Ihr natürlich alternativ (falls die Seite auch ohne JS laufen muss) meine an anderer Stelle vorgeschlagene Lösung verwenden (d.h. alle Angaben in media queries für den IE wiederholen. Entweder per HTML5-Boilerplate-Klasse oder in einer CSS-Datei extra für den IE (was ich aus Performanz-Gründen empfehlen würde)).

Hier der Link zum Buch, (Auszüge und einige Videos können Online betrachtet werden):
http://www.galileocomputing.de/katalog/buecher/titel/gp/titelID-3347

Alle hier genannten links habe ich auch der Seite über Responsoves Webdesign zugefügt.

Speed is a feature – Tuning für Ihre Homepage

Wer eine Webseite besucht, möchte normalerweise nicht auf ein weißes „Blatt Papier“ starren.

Um die eigene Webseite richtig schnell zu machen, muss Men eigentlich nichts tun. Wenn man ein statisches HTML-Dokument erstellt und dieses weder gestaltet noch per JavaScript aufpeppt, ist die Seite schneller beim Betrachter, als der gucken kann.

Aber wer will schon eine ungestaltete Webseite? Also kommen CSS, JavaScript, Bilder und all die anderen Zutaten hinzu, mit denen man den Besuch zu einem Erlebnis für den Betrachter macht.

Damit die Seite trotzdem blitzschnell beim Betrachter ankommt, kann man an verschiedenen Schrauben drehen. Dabei muss die Seite nicht immer schneller laden: es kommt auch darauf an, wann die großen Brocken übertragen werden. So kann man beispielsweise die meisten JavaScripte nach den eigentlichen Inhalten laden. Der Besucher bekommt auf diese Weise schnell etwas zu sehen und im Hintergrund wird noch unbemerkt weitergeladen.

Wie das geht und noch viel mehr erklärt die Seite browserdiet.com (die eigentlich Websitediet heißen müsste)

Auch Erfahrene Entwickler finden hier noch die eine oder andere Perle – und weil die Texte kurz und übersichtlich geordnet sind, lassen sich diese Perlen auch schnell finden.

20130331-110203.jpg

Übersicht Webseiten-Techniken

3D CSS Box Model Diagramm von Jon Hicks.
3D CSS Box Model Diagramm von Jon Hicks.

Eine sehr schöne und kompakte Übersicht über Techniken, die auf jeder Webseite zum Einsatz kommen, gibt es auf der Seite isobar.com

Eine ganze Reihe namhafter Autoren hat sich zusammengesetzt, um Herangehensweisen, vorbildliche Beispiele und sinnvolle Arbeitsweisen vorzustellen.

Die Autoren sind

 

 

 

 

Der Artikel ist in englischer Sprache abgefasst.

http://na.isobar.com/standards

Autor für HTML5-Lehrbuch gesucht

für einen renommierten Lehrbuchverlag suche ich einen Autor, der HTML5 inklusive API, JavaScript-Script-Beispiele, Canvas, Offline-Features usw wortgewandt vermitteln kann.

Zur Abgrenzung: die semantischen Elemente werden in einem zweiten Buch erläutert, das vor kurzem erschienen ist.

Wer Komplexes leicht verständlich erklären kann und in HTML5 und JavaScript/AJAX fit genug ist, ein Fortgeschrittenen-Buch zu schreiben, kann mir bei Interesse einfach mailen.

Der Autor ist längst gefunden – darum bitte nicht weiter teilen! ;-)

WAI-ARIA – werden dadurch Javascript-Anwendungen barrierefrei?

Das Projekt Barrierefrei informieren und kommunizieren (BIK) hat einen interessanten Artikel über WAI-ARIA veröffentlicht. Der Artikel erklärt leicht verständlich wissenswerte Dinge zu WAI-ARIA und erläutert auch die Probleme und Bewertungen im BITV-Test.

Zusammenfassend lässt sich sagen, dass mit WAI-ARIA Javascript-Anwendungen zugänglich werden, sobald diese Technik von assistiven Technologien, wie Screenreadern unterstützt wird. Derzeit ist diese Unterstützung noch recht dürftig und – wenn überhaupt – nur in den aktuellsten Versionen von beispielsweise Screenreadern vorhanden.