640x480.de

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

Bestandsaufnahme

Manchmal braucht man einfach schnell den passenden Link im passenden Moment - zum Beispiel im Kundengespräch. Dann will man schnell mal ein Beispiel für einen Webfont zeigen oder ein flexibles Layout oder, oder. Grund genug passende Beispiele nach Features sortiert aus dem Portfolio zu kramen.

Webfonts

SVG (scalable vector graphics)

flexibles Layout / responsive design

festes Layout im 960-Grid-System

CSS-basierte dynamische Diagramme / Grafiken

Shops / Warenkörbe

Mitgliederbereiche / Mini-CMS / geschlossene Bereiche

XML-Schnittstellen zum Print

  • bauhausakademie.de (Fortbildungsveranstaltungen für Programmhefte)
  • architekten-thueringen.de („tag der architektouren“-Projekte für diverse Drucksachen)
  • bazonbrock.de (Textgenetikplakate)
  • asw-verlage.de (Generierung der Kataloge)

Shariff

  • campus-thueringen.de
  • nh-projektstadt-immo.de/gotha/

Vermischtes

Webapps

12.10.2012 | Noch keine Kommentare

WebPlatform.org

Eine neue offizielle und zentrale Sammelstelle für Dokumentationen zur Webentwicklung.

Wenn ich das richtig aus den Ankündigungen herauslese, dann soll webplatform.org die bisherigen üblichen Quellen wie http://de.selfhtml.org/ oder http://www.w3schools.com/ ersetzen und eine offizielle, einheitliche Anlaufstelle für alle Fragen der Webentwickler bieten.

Find ich gut, dauert aber sicher noch etwas. Wenn ich zum Beispiel bei den media queries reinschaue, dann ist da bis auf einen externen Link noch gähnende Leere.

11.10.2012 | Noch keine Kommentare

Symbolschrift statt Bilddateien

Websites brauchen Icons und Symbole zur besseren Lesbarkeit. Diese wurden bisher direkt als Bild eingebunden bzw. über CSS als Hintergrundbild platziert.

Für die nächste Version unseres CMS verzichten wir auf Bilder für die Darstellung von Symbolen und nutzen stattdessen die Schriften von symbolset.com.

So lassen sich Funktionen wie compose «Neuer Artikel», oder Statusinformationen wie public  «freigegeben» oder locked «gesperrt» sehr einfach darstellen.

Schön ist auch, dass sich alle Symbole ganz einfach farblich anpassen lassen femaleavatar maleavatar – und das einfach per CSS ohne jedes Icon mehrfach vorhalten zu müssen (ja, das geht mit transparenten icons und wechselnden Hintergrundfarben per CSS auch).

Die Symbolschiften finden wir like und haben sie schon ganz in unser love geschlossen.

10.10.2012 | 4 Kommentare

The State of The Internet

Unter diesem Titel veröffentlichte Business Insider eine Sammlung von Folien zum Stand und den Prognosen rund um unseren Lieblingsspielplatz.

The future is mobile, The State Of The Internet, Alex Cocotas, Business Insider
The future is mobile, The State Of The Internet, Alex Cocotas, Business Insider • http://www.businessinsider.com/state-of-internet-slides-2012-10

Es werden alle nur erdenklichen Bereiche behandelt: „Internet vs. Old Media“, „Werbemarkt“, „Mit welchen Geräten geht man ins Netz?“, „Wer macht die Geschäfte“, usw.

Für uns als Webdeveloper sind natürlich die Fragen der Nutzung sehr interessant. Und da ist die Prognose eindeutig. Letztendlich spiegelt es auch nur das wider, was wir selbst jeden Tag erleben: Es gibt eine „Arbeitszeit im Internet“ am Desktop und dann gibt es eine - immer länger werdende - Zeit, die man per mobilem Gerät, smart phone oder tablet ebenfalls im Netz ist. Und beide Zeiten vermischen sich immer mehr, da man ja zum Beispiel auf dem Weg zum Geschäftstermin nochmal die Newsfeeds durchsieht, Mails checked oder ähnliches. 

Insofern, um wieder auf den Entwickleraspekt zurückzukommen, fallen immer mehr diejenigen Websites auf, die nicht für diese Geräte optimiert sind. Uns wenn man die ausgewählte Grafik betrachtet, dann macht es Sinn, Websites nicht nur für den parallelen Einsatz auf mobilen Geräten zu optimieren, sondern sie von Grund auf, als mobile Websites zu entwickeln, die auch auf dem großen Bildschirm eine gute Figur machen. Das Konzept heißt „mobile first“ und wie bei allen anderen Trends der letzten Jahre wird es auch hier eine Weile dauern, bis sich ein Gefühl für das richtige Maß und die geeignetsten Gestaltungsmittel einfindet.

Links

04.10.2012 | 3 Kommentare

Dislike

Letzten Sonntag in der Max-Liebermann-Straße in Weimar: am Wegesrand steht ein Karton…

2 Bilder. Klicken Sie auf ein Bild um die Diaschau zu starten.

Da steht ja was. Das  kenn’ ich doch.

Darin liegt das Architektenhandbuch der AKT – vor ziemlich genau drei Jahren von uns gesetzt. Offensichtlich wollten die Besitzer es nicht mehr, fanden es aber auch zu schade zum Wegwerfen.

Da lag es einsam in der Kiste und wartete.

„Gut, dass man Websites nicht wegwerfen kann“, dachte ich. Obwohl – wäre eigentlich cool, wenn man als Leser resp. Besucher Websites, die man nicht (mehr) braucht, „wegwerfen“ könnte. Es gibt immer nur Likes aber keine Dislikes. Das ist doch blöd.

04.10.2012 | Noch keine Kommentare

Betriebsblind

Wie wir eine PC-Tastaturbelegung zeichneten.

Tastaturbelegung Mac
Tastaturbelegung Mac • Zeichnung: Birgit Kohlhaas

Wir hatten den Auftrag für ein Programmheft mit Weiterbildungsveranstaltungen für Sektretärinnen. Unsere Idee: auf einer Umschlagklappe bringen wir eine Tastaturbelegung unter, damit die schönen typografischen Anführungszeichen, Ellipsen, Apostrophen usw. ihren Weg in Briefe, Anschreiben, Informationsblätter u.v.a.m. finden. Gesagt – getan und erst mal mit dem Naheliegenden angefangen: der gemeinen Mac-Tastatur. Als diese halbwegs fertig war, stand die PC-Tastatur auf dem Programm. Die Recherche auf einem unserer Alt-Rechner ergab, dass da nix war. Also Wikipedia angeworfen mit dem Ergebnis, dass da wirklich nichts ist, was nicht schon auf der Tastatur selbst zu sehen ist. Sonderzeichen werden am PC tatsächlich nach wie vor via Einfügen > Sonderzeichen oder über die Kombi Alt-Taste + Ziffern erzeugt. Die einfachsten Sachen geraten in Vergessenheit, wenn man immer nur mit einem System arbeitet. Also haben wir die Idee verworfen und dafür jetzt die fast fertige Illustrator-Datei einer Mac-Tastatur auf der Festplatte.

24.09.2012 | 1 Kommentar