640x480.de

Beiträge aus dem Was-mit-Medien-Alltag

Webdienstag #3

Der Webdienstag zum Thema CSS am 11.12.2012

Mit dabei wieder Jens Weber (mediaarchitecture), Daniel Schmidt (xpdt), Marko Meister (netz-meister) im Büro bei Kohlhaas & Kohlhaas.

Nachdem der Input zu SASS ausfiel, haben wir selbst unser Halbwissen zusammengeworfen und uns einen Überblick über SASS und LESS verschafft. Dabei ging es um den Erfahrungsaustausch zu den jeweiligen Ansätzen (Frameworks nehmen vs. mit leerem File anfangen) zu Bootstrap, dem Sinn und Nutzen von Grid-Systemen und vielem mehr.

Neben diesen technischen Details wurde das Thema responsive Websites gestreift insbesondere Fragen zum Nutzen der Linearisierung unter anderem in Hinblick auf Barrierefreiheit: Zoom erlauben ja/nein, Wechsel zwischen den responsive-Stufen durch den Nutzer selbst, etc. Lebhaft war auch die Diskussion zu Ansätzen zu adaptive/responsive Images und auch dieses Thema ruft nach Fortsetzung.

Zu späterer Stunde drehte sich das Gespräch um Themen des Medienkonsums (anhand aktueller Beispiele aus den eigenen Kinderzimmern) und Rants in sozialen Netzen.

Der Abend war wieder sehr angenehm und horizonterweiternd. 

Die letzten drei Veranstaltungen waren ein guter Anfang für den Webdienstag. Im nächsten Jahr wollen wir stärker auf Vorträge und Workshops setzen, um zusätzlich zur (notwendigen) Presseschau und dem Halbwissen-Tratsch ganz konkrete Inputs zu bekommen.

Es geht am 8. Januar 2013 weiter mit einem Workshop zu processing

12.12.2012 | 3 Kommentare

Die Farbe des Jahres 2013

Pantone hat «Emerald» gewählt.

Pantone Color of the Year 2013 #009B77
Pantone Color of the Year 2013 #009B77

Pantone ernennt jedes Jahr eine Farbe zur «Color of the Year». Nächstes Jahr ist es Emerald, also Smaragdgrün. Die Farbnummer ist PANTONE 17-5641. Als Web-Entwickler sollte man sich allerdings eher die Hex-Kombination #009B77 oder den RGB-Wert 0, 155, 119 merken.

Mehr Informationen bei Pantone selbst.

07.12.2012 | Noch keine Kommentare

15 Thesen für die (digitale) Zukunft

t3n hat in die Glaskugel geschaut. Wie geht das so alles weiter mit der Technik und vor allem mit dem Leben damit? Das sind spannende Fragen – nicht nur kurz vor dem Jahreswechsel.

t3n hat 15 Thesen aufgestellt, wovon einige Lust auf die nächsten Jahre machen andere aber anpornen, es möglichst nicht so weit kommen zu lassen.

Programmiersprachen als Schulfach sind längst überfällig. Das wird kommen (müssen). Die Lesediskussion ist das Eine, aber die Technik-Geister zu beherrschen, die nun mal in der Welt sind ist das Andere. Die nächste Generation darf nicht total abhängig werden von den Tools der Konzerne (doofer Trend: Tablets überall). Wir müssen in der Lage bleiben, eigene Tools zu bauen (guter Trend: Minicomputer wie Raspberry Pi und Arduino).

Auf die Haushaltsautomatisierung, Fernsehen und Lieferungen am gleichen Tag kann ich verzichten, ebenso wie auf noch mehr Werbung und Selftracking. Das Nicht-mehr-ohne-sein (Kein Rückzug mehr vom Digitalen) kenne ich schon am egenen Leib. Man kann sich da schön einlullen lassen. Und auch die restlichen Thesen sind eher dystopischer Natur und rufen bei mir eher den Wunsch nach der Insel hervor.

Eine schöne Anregung zur Offline-Diskussion über die Feiertage.

(schriebs 21:24 bei einem analogen Glas Rotwein das Vinyl von «Spirit of Eden» von Talk Talk auf dem 1210 und das MacBook auf dem Schoß auf der Couch – was für eine Welt … immer mit einer Gehirnhälfte an der Arbeit)

07.12.2012 | 5 Kommentare

Bildbehandlung in flexiblen Layouts

Unser Ansatz zum Thema adaptive/responsive images

Problematik: bestmögliche Bildqualität bei optimalen Ladezeiten. Auslieferung unterschiedlicher Bildgrößen für Desktop oder Smartphone.

Bildauslieferung im Grid-System (wie es bisher war)

Bei Seiten mit festen Layouts (z.B. www.architekten-thueringen.de, 24er-Grid nach dem 960 Grid System) ist von vornherein durch das Template klar, welche Bildgrößen benötigt werden, z.B: Projekt-Kurzansicht (grid6 = 230px), Projektdetailseite, Bild über ganze Inhaltsspalte (grid12 = 470px), Großansicht in der Lightbox (grid18 = 710px) und so weiter.

Beispiel für Bildgrößen im festen Layout: Projekt-Kurzansicht, Projektdetail, Großansicht
Beispiel für Bildgrößen im festen Layout: Projekt-Kurzansicht, Projektdetail, Großansicht

Diese Größen werden in der Projekt-Konfiguration festgelegt:

$GLOBALS['imageSizesReceiver']['grid_3'] = array(110,110);
$GLOBALS['imageSizesReceiver']['grid_4'] = array(150,150);
$GLOBALS['imageSizesReceiver']['grid_5'] = array(190,190);
$GLOBALS['imageSizesReceiver']['grid_6'] = array(230,230);
$GLOBALS['imageSizesReceiver']['grid_12'] = array(470,470);
$GLOBALS['imageSizesReceiver']['grid_18'] = array(710,710);
$GLOBALS['imageSizesReceiver']['grid_24'] = array(950,950);

Beim Hochladen eines Bildes in das CMS werden die entsprechenden Bildgrößen sofort berechnet und im Dateisystem abgelegt. Beim Ausliefern der Seite werden dann jeweils die richtigen Bildgrößen an der richtigen Stelle angezeigt.

Bildauslieferung im flexiblen Layout (das ist neu)

Für das Webdesign unserer flexiblen Layouts (z.B. www.baukultur-thueringen.de) gehen wir einen anderen Weg. Hier ändert sich die benötigte Bildgröße nicht nur nach der Stelle der Verwendung des Bildes im Template, sondern auch noch je nach Ausgabegerät.

Beispiel-Seite mit verschiedenen Bildgrößen und flexiblem Layout

Wir gehen vom Template für den großen Monitor aus und definieren Bildgrößen für die verschiedenen Layoutboxen (volle Breite, halbe, drittel, viertel, sechstel, usw.) Für die kleineren Bildschirme werden diese Breiten in die jeweilig gewünschte Breite übersetzt (so wird z.B. aus einer halben Box auf dem Desktop eine ganze Box auf dem Smartphone, aus einer Viertelbox eine Halbe, etc.)
Die entsprechende Tabelle in unserer Konfiguration sieht dann so aus:

$GLOBALS['imageSizes']['full']=array(1600=>960, 1024=>960, 768=>768, 480=>480);
$GLOBALS['imageSizes']['half']=array(1600=>480, 1024=>480, 768=>480, 480=>320);
$GLOBALS['imageSizes']['third']=array(1600=>768, 1024=>768, 768=>480, 480=> 320);
$GLOBALS['imageSizes']['twothirds']=array(1600=>768, 1024=>768, 768=>480, 480=>320);
$GLOBALS['imageSizes']['quarter']=array(1600=>240, 1024=>240, 768=>480, 480=>320);

Auch die Behandlung der Bilder im CMS (Akira) erfolgt nun anders. Beim Hochladen wird nur das Originalbild im Filesystem abgelegt. Die Skalierung erfolgt erst bei der Auslieferung einer Seite – das skalierte Bild bleibt im Filesystem liegen. Das hat jeweils beim ersten Aufruf eines Bildes in einer bestimmten Auflösung eine kleine Verzögerung zur Folge. Alle weiteren Aufrufe nutzen dann das vorgerechnete Bild.

Im Seitenheader ermitteln wir das Ausgabegerät über Javascript und legen diese Angabe in einem Cookie ab.

<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>

Damit wird also beim ersten Laden der Seite auf einem Gerät festgelegt, welche Bildgrößen ausgeliefert werden und das bleibt dann (auch trotz Änderung der Browsergröße erhalten). Der Desktop ist hier ein Sonderfall, weil nur dort Größenänderungen Sinn möglich sind. Auf Mobilgeräten lade ich die Seite ja immer mit der gleichen Auflösung.

Noch eine kleine Abgrenzung zum Schluss: Wir haben hier nicht nach einer Lösung für vollflächige Hintergrundbilder gesucht, die beim Browser resizing dynamisch nachgeladen werden. Im Vordergrund steht bei uns die effektive Darstellung und Auslieferung von Bildern im Seiteninhalt.

Weitere Ansätze für responsive images in einem Artikel bei speckyboy design magazin

26.11.2012 | 5 Kommentare

Info(grafik): Illumat

ILLUMAT - Malen in Zahlen
ILLUMAT - Malen in Zahlen • (Handy)-Foto: Birgit Kohlhaas

„Malen in Zahlen“ steht über der kleinen Statistik-Schau von Illumat, die man zur Zeit im Untergeschoss des Neuen Museums Weimar studieren kann. Ich finde, „Zahlen vom Malen“ wäre auch nicht schlecht – kommt d’rauf an, als was man das Ganze betrachtet, eher als Gemälde aus Zahlen oder eher als selbstreferenzielles Info-Objekt… anyway.

Beim Vorbeilaufen hatte ich übrigens zuerst an diese Kunst-aufräumen-Bücher gedacht, die überall rumliegen.

23.11.2012 | Noch keine Kommentare

Bildgröße im Dutzend ändern

Bildgröße aller Bilder in einem Ordner unter MacOS X direkt mit Terminalbefehl ändern.

Bildgröße für mehrere Bilder in „Vorschau“ anpassen
Bildgröße für mehrere Bilder in „Vorschau“ anpassen • Bildschirmfoto 23.11.2012

Bei Petapixel gibt es eine Anleitung dazu. Den ersten Teil (folder settings) kann man sich auch sparen, wenn man weiß, wie man im terminal zum gewünschten Ordner kommt.

In den Kommentaren zum Artikel wird vehement auf den Automator verwiesen. Aber auch der Tipp, die Größe in der Vorschau anzupassen funktioniert sehr gut, vor allem, wenn man nicht im terminal zu Hause ist:

Gewünschte Bilder auswählen (das müssen dann auch nicht alle Dateien im Ordner sein) und in Vorschau öffnen. Danach in der Seitenleiste alle Bilder markieren. »Werkzeuge/Größenkorrektur« wählen und dann kann’s losgehen. Viel komfortabler als mit dem Terminalbefehl kann man hier bestimmen, welche Größe (Höhe oder Breite) als Zielwert festgesetzt werden soll.

23.11.2012 | 1 Kommentar