640x480.de

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

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

„beyond tellerrand 2012“ - Zusammenfassung bei t3n

19. und 20. November in Düsseldorf

Mein Lieblingszitat aus dem Artikel (Vortrag Mark Boulton): „Er plädierte dafür, mit dem Nimbus, dass man den Rezeptionsprozess von Website-Besuchern unter Kontrolle habe, zu brechen. Vielmehr müssten Webentwickler und -Designer die Anpassungslogik von Responsive Design adaptieren und sie mehr als nur im bloßen Webdesign anwenden – sondern eben auch in ihrer täglichen Arbeit.“

oder auch gut: (Vortrag Mat Marquis): „statt Buzzword Bingo … die drei wichtigsten Säulen von Responsive Webdesign in den Fokus rücken: Ein Flexibles Grid, Media Queries und Flexible Media and Images …“

Zum Artikel bei t3n 

22.11.2012 | Noch keine Kommentare