640x480.de

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

Welcher Editor darf’s denn sein?

Im Zweifelsfall jede Woche ein anderer wäre eine bei uns passende Antwort. Der aktuelle Wechsel zu Sublime Text dient mir als Anlass, die in der letzten Zeit genutzten Editoren mal Revue passieren zu lassen und da kommen einige zusammen:

Welcher Editor darf’s denn sein?
Welcher Editor darf’s denn sein?

(in alphabetischer Reihenfolge)

AptanaStudio3

http://www.aptana.com/products/studio3

Das war eine Empfehlung aus einem unserer Stammtische. Wenn man viele Fenster, Menüs, Optionen und Erweiterungsmöglichkeiten mag ist man hier sicher gibt bedient, für uns war das aber nix.

Coda

http://panic.com/coda/

Wurde mal angeschafft, weil wir aus gleichem Hause Transmit als FTP-Programm nutzen und uns davon wohl eine einheitliche Bedienung versprochen haben. Wie auch immer, das Programm ist eher ein Spielzeug und sieht auch so aus.

jEdit

http://www.jedit.org/

Auf Empfehlung von Marko und wegen der Suche nach einem Editor, den wir alle einheitlich nehmen können. War aber wegen der Java-Umgebung und des damit verbundenen anderen User Interfaces nicht unsere erste Wahl. Pluspunkt war das Code folding, gerade in größeren Projekten absolut hilfreich für die Übersicht im Quelltext.

SubEthaEdit

http://www.codingmonkeys.de/subethaedit/

Wegen des Versprechens der gemeinsamen Arbeit an Dokumenten, was wir zwar mal ausprobiert aber in der Realität nie wirklich ausgenutzt haben. Ansonsten ein lange Zeit genutzter, sehr angenehmer Editor.

Sublime Text 2

http://www.sublimetext.com/

Unser Neuzugang unter den Editoren nach einer Empfehlung von Harry Keller während der Typo Berlin. Ist plattformübergreifend zu haben, weswegen auch von Marko einsetzbar und mit vielen hilfreichen Features. Erster konkreter Super-Vorteil war die Installation des Less-Build-Pakets womit man direkt .css-Dateien aus seinen .less-Dateien rendern kann. (vorher mit Crunch unter Adobe Air - http://crunchapp.net/)

TextWrangler

http://www.barebones.com/products/textwrangler/

Aus dem Hause BareBones (remember BBEdit), der wohl am längsten benutzte Texteditor bei uns bisher. Gerne und viel genutzt die Suchen-Funktion über ganze Verzeichnisse.

Welchen Editor nutzt ihr und wie oft wechselt ihr die Werkzeuge? Seid ihr einem bestimmten Editor auf Jahre treu oder seid ihr – wie wir – ständig auf der Suche nach einem noch besseren Tool?

22.05.2013 | 2 Kommentare

Neuer Beruf: „System-Sekretär/in“ oder „Secret Administrator“

Was kleinen Unternehmen und Freiberuflern echt weiterhelfen würde, wäre jemand, der sich liebevoll und sachkundig um IT & Co kümmert, Office-Software bedienen kann (und weiß, dass man damit mehr machen kann, als mit einer Schreibmaschine), in der Lage ist, Telefonate freundlich entgegenzunehmen, Rechtschreibung nicht als notwendiges Übel betrachtet, ein wenig Ahnung von Buchhaltung hat … und überhaupt alles ein bisschen zusammenhält – die Kombination aus Sytemadministrator/in und Sekretär/in eben. Das wär’s.

12.02.2013 | Noch keine Kommentare

MoSCoW-Meeting

Unsere kleines Entwicklerteam traf sich heute zur Priorisierung der Aufgaben zur Finalisierung von Akira2.

Priorisierung der Todo-Liste nach MoSCoW
Priorisierung der Todo-Liste nach MoSCoW • Foto: Martin Kohlhaas

Die Feature-Liste ist geschlossen, jetzt geht es ans Aufarbeiten der letzten Problemstellen, Kontrolle und Doku. Bei der Sortierung der Aufgaben sind wir nach der MoSCoW-Priorisierung vorgegangen.

15.01.2013 | Noch keine 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

Akira2-Logo

Akira2 steht in den Startlöchern. Die ersten drei neuen Websiteprojekte arbeiten bereits mit der aktuellen Betaversion, um letzte Fehler für Benutzer auszuschalten.

Akira2-Logo
Akira2-Logo

In diesem Zusammenhang wollen wir natürlich auch die Akira-Website überarbeiten. Eines unserer aktuellen Lieblingsspielzeuge, SVG, soll darauf auch wieder eine Rolle spielen, als animiertes Logo. Der Schriftzug mit seinen zerlegten Buchstaben steht für die Modularität und Anpassungsfähigkeit des Systems. Unser Feriengast Arthur hat in den letzten Tagen die Animationseffekte von SVG ausgelotet und das Resultat kann sich sehen lassen. Ob das Logo wirklich so auf die Website kommt, wird sich zeigen. Einen Freischaltungstermin gibt es noch nicht - erstmal steht die Arbeit am CMS selbst im Vordergrund.

26.10.2012 | 1 Kommentar

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