Je mehr man kauft, desto interessanter wird es. Denn sie weisen ein Schwarmverhalten auf, interagieren miteinander und das Blitzen einer Zelle löst einen Impuls für die nebenstehenden aus. Irgendwie witzig.

Ausgangslage war in etwa folgende Webseite:

Daraus folgend soll das Logo neu interpretiert, umgestaltet und aufgefrischt werden. Unter Einbehaltung derselben Grundform und desselben Themas ist eine modernere Variante mit klassischer “High School” Schrift entstanden. Die Schrift und die Reduktion auf die wesentlichen Elemente hat klar zur Folge, dass es deutlicher lesbar ist und als solches auf verschiedenen Medien besser funktioniert. Dadurch wird der Wiedererkennungswert gesteigert.

Darauf aufbauend (im Prinzip durch das in die Länge ziehen des Logos) ist schliesslich das Banner für die Webseite entstanden. Die gleichen Gestaltungselemente sind darauf ersichtlich und zeigen die nächtliche Skyline von New York noch vor 2001:

Im schlichten, modernen, offenen und hellen Design ist somit auch die finale Webseite entstanden. Das Gesamtdesign ist einladender, nutzt den vorhandenen Platz besser aus und lässt sich in der Horizontalen nicht einschränken. In der Vertikalen sind dünne Striche als Abgrenzung vorhanden, wobei sie visuell sehr passiv sind und somit nicht als störend empfunden werden.

Die Preistabelle weist das gleiche gestalterische Thema auf, indem nur durch Farben die Kategorisierung gestaltet wird. Durch fehlende Begrenzungen in Form von Linien ist das Design offener und einladender, wobei das Farbthema “Gelb-Grau-Weiss” weiterhin bestehen bleibt und somit das Moderne unterstreicht.

Als Lageplan ist ein interaktives Element hinzugefügt worden, indem Google Maps verwendet wird. Dadurch lässt sich die Karte zoomen, in verschiedenen Darstellungen betrachten und eine Route planen.

Da die alten Bilder sehr klein und dadurch der aktuellen Design-Philosophie überhaupt nicht entsprachen, beinhaltete der Auftrag ausserdem, neue und hochauflösende Bilder zu erstellen. Daraus sind folgende zwei Beispiele hervorgegangen.

Wolfram|Alpha ist jedoch anders. Anstatt Vorschläge zu möglichen Quellen zu liefern, lieferst es auf eine beliebige Frage einfach eine Antwort. Möchte ich bspw. wissen, wann Barack Obama geboren wurde oder wieviel Einwohner die Stadt Basel hat, so gebe ich die Fragen entsprechend ein und erhalte gleich Antworten dazu.

Ich kann mir auch pi auf 50 Stellen berechnen lassen

3.14159265358979323846264338327950288419716939937511

oder die nächste Sonnenfinsternis vorsorglich planen, damit ich mich nicht frage, warum es am Tag plötzlich dunkel wird.

Endlich hat unsere Info-Seite ein Foto von uns.

Seit 2003 kennen wir uns schon, doch noch nie haben wir es gemeinsam auf ein Foto geschafft. Das ist uns erst aufgefallen, als wir ein Bild für den entsprechenden Text gesucht haben. Heute haben wir im VitraHaus die Gelegenheit der Fotostele genutzt, um dies nachzuholen. Schlussendlich.

Ach ja, www.myspace.com/saint_lazare ist mittlerweile online…

Bis dann!

Irgendwie cool :)

(Fotos: Eik Frenzel)

Demzufolge werde ich am 10. April 2010 im Hinterhof, im Dreispitz Areal in Basel ein 4-Stündiges DJ Set hinlegen. Von 22:00h bis 02:00h gibt es feinsten Downbeat, Electropop, Funk und sonstige alternativen Klänge.

Wäre cool, wenn ihr auch kommt!

Vor langer Zeit sind mir Art Lebedev mit ihrem Optimus Maximus keyboard aufgefallen: eine vollwertige Tastatur mir kleinen OLED Bildschirmen als Tasten.

Das ermöglicht natürlich eine völlig neue und kreative Art der Bedienung eines Computers. Je nach Programm, Spiel, Sprache, Tastaturkombination oder Wunsch lassen sich verschiedne Symbole, Buchstaben oder Bilder anzeigen. Eine gute Demo gibt es auch – und für knapp $2400 USD kann man es sogar selber ausprobieren :)

Doch ihre neuste Entwicklung hat mich letztens wirklich umgehauen, die Idee ist meiner Meinung nach einfach verblüffend:

Die Segmentus clock lässt sich am besten so beschreiben, wie es Art Lebedev auch gemacht hat: “(…) has hands that form numbers like those on a digital display. (…)”

Ansonsten wirkt es am besten, wenn man sieht wie sie genau funktioniert.

Bei meinen Auftritten als DJ wurde ich immerwieder gefragt, was ich da genau einsetze, dass die Musik von meinem MacBook Pro abgespielt wird und wie das denn genau funktioniert; und warum – aber die Kabel sind doch – häh?

Eben. Weil das Interesse daran ziemlich gross war, dachte ich, es wäre sicherlich auch spannend an dieser Stelle darüber zu schreiben:

Ich verwende Scratch Live von Serato. Serato hat sich mit ihrem Pro Tools Plugin “Pitch ‘n Time” einen guten Ruf in der Musikbranche geschaffen und damit ganz nebenbei die Grundlage für Scratch Live geschaffen.

Zusammengefasst ist Scratch Live ist eine Kombination von Software und Hardware, welche ein klassisches DJ Set (Mischpult, 2 Plattenspieler oder CD-Player) um die Möglichkeit ergänzt, Musik von einem Computer abzuspielen und dabei die gewohnte Steuerung beizubehalten.

Die Software kann man kostenlos im Internet herunterladen, jedoch ist sie ohne Hardware nicht wirklich sinnvoll einsetzbar. Dazu muss man bei einem Musik-Fachhändler wie House of Sound das Scratch Live Paket erwerben:

Ich verwende als DJ Set ein Rane TTM 56 Mischpult und 2 Technics SL-1210MK2 Plattenspieler mit Ortofon Concorde EleKtro Systemen.

Zu diesem System wird nun mein MacBook Pro hinzugefügt, auf welchem Scratch Live installiert wurde

und alles wird nun mit der SL1 Box verbunden.

Schlussendlich sieht das Setup etwa so aus:

(Kabelbeschreibung: rot = Audiokabel vom Plattenspieler, orange = USB, blau = Audiokabel zwischen SL1 und Mischpult, lila = optionales Mikrofon)

Die Funktionsweise ist relativ einfach: Die mitgelieferten Platten oder CD’s enthalten ein Kontroll-Signal, welches die Bewegungen und Veränderungen der Plattenspieler (oder eben CD-Player) in Echtzeit an die SL1 Box weitergibt. Die SL1 Box ist dafür zuständig aus diesem Signal eine Informationen für die Software bereitzustellen. Die Software spielt die Audio-Dateien ab und wandelt die empfangenen Informationen direkt um. So entsteht der Eindruck, als wäre die digitale Musik vom Laptop auf die Platte gepresst. Dies äussert sich dadurch, dass jegliche Änderungen in Bewegung und Tempo (wie bspw. beim Scratchen) live hörbar sind. Daher auch der Name “Scratch Live”.

Die Vorteile liegen offensichtlich auf der Hand: Anstatt grosse (und vor allem schwere) Kisten mit hunderten von Platten zu schleppen und jedesmal neu zusammen zu stellen oder vor allem neue Musiktitel auf Platte zu kaufen, sind alle Songs auf der Fesplatte vom Laptop gespeichert. So kann ich mit 2.5 kg einige zehntausend Songs tragen und brauche dazu nur 2 “echte” Platten und meine SL1 Box.

Andererseits kann ich Lieder mischen wie ich es mir gewohnt bin: Mit dem haptischen Feedback einer Platte.

Auch für CD-DJs gilt diese Regel, denn Taschen voller CDs mögen zwar leichter als Plattenkoffer sein, jedoch kann man seine gewohnten CD-Player zur Steuerung beibehalten. Wer an dieser Stelle an ganz normale HiFi CD-Player denkt, liegt leider falsch: DJs verwendet normalerweise entsprechende CD-Player mit mehr Einflussmöglichkeiten auf die Musikwiedergabe.

Scratch Live kann auch ohne Plattenspieler verwendet werden, jedoch ist die SL1 Box mit einem Mischpult trotzdem zwingend. Doch mit einer Maus oder Trackpad wird es bedeutend schwieriger Musik schnell und korrekt zu mischen.

Mein Thema Heute: Comics

Nebst Bill Watterson‘s “Calvin & Hobbes” und Joscha Sauer‘s “NICHTLUSTIG” gehört xkcd.com zu meinen absoluten Lieblingscomics.

Ich gebe zu, im Vergleich zu den anderen zwei richtet sich xkcd vor allem an eine bestimmte Randgruppe, demzufolge ist der Humor nicht massentauglich, aber dafür umso witziger, wenn man ihn versteht (was bei mir auch nicht immer gegeben ist).

Schon seit längerer Zeit setze ich Mac OS X ein und ab und zu ergibt es sich, dass ich tatsächlich auf Fremd-Software angewiesen bin. Viele Funktionen sind direkt in Mac OS X integriert, sodass man normalerweise nicht viele Drittprogramme braucht. Falls doch, so sind folgende ziemlich praktisch und vor allem von mir getestet:

Burn – Obwohl Mac OS X brennen kann, ist dieses OpenSource Brennprogramm manchmal ziemlich nützlich, oder einfach schneller als DiskUtility.

Cyberduck – Ein guter FTP Client, Spenden-basiert, und erst noch aus der Schweiz.

Firefox – Sollte mittlerweile jedem ein Begriff sein, für Webdesign ist es absolut notwendig, die Webseiten auf verschiedenen Browsern zu testen, vor allem mit den Add-ons Firebug, Web Developer und Adblock Plus

Flip4Mac – Erweitert QuickTime um WMV und WMA, falls man noch Material in diesem Format hat…

Google Earth – Immerwieder nützlich um die Welt von oben zu betrachten.

Google SketchUp – Manchmal hat man Ideen. Manchmal hat man auch sehr gute Ideen und möchte diese festhalten. Dazu eignet sich natürlich ein Block Papier oder ein Moleskine Notizbüchlein, aber das reicht nicht immer, dafür gibt es SketchUp.

HandBrake – Ist ein Programm zur Konvertierung von Videos. Ich verwende es hauptsächlich um Filme von DVD auf iPod und iPhone zu “tun”.

Mactracker – Eine Auflistung von fast allen Geräten, die Apple Inc. bisher herausgebracht hat. Praktisch um immerwieder technische Daten zu vergleichen oder nachzuschlagen.

Opera – Auf Windows mein mit Abstand favorisierter Browser. Auf Mac OS X verwende ich jedoch ausschlieslich Safari, Opera hauptsächlich wegen Webdesign. Ansonsten ist alles inbegriffen, was man für einen Ausflug ins Internet brauchen könnte: Zusätzlich zum Browser ist auch ein Mail-, Download-, BitTorrent- und IRC-Client mit dabei, nebst Notizzettel, Adressbuch und den Dragonfly Tools.

Perian – Gemäss eigener Aussage “The swiss-army knife for QuickTime”, was es ziemlich auf den Punkt bringt. Erweitert das QuickTime Framework nicht nur um DivX…

Phun – Klingt witzig, ist es auch. Natürlich inklusive pädagogischem Hintergrund. Phun ist eine Sandbox um physikalische Prozesse zu veranschaulichen, aber vor allem für Leute wie mich um mit Physik zu spielen.

Q – Dient zum erstellen virtueller Maschinen, um darauf andere Betriebssysteme laufen zu lassen. Praktisch, falls man seinen Horizont ausserhalb der Mac und Windows Welt erweitern möchte.

Skype – Ist sicherlich auch ein bekannter Begriff. Gibt es auch für Mac. Punkt.

Stellarium – Wer gerne in die Sterne schaut aber dank der Lichtverschmutzung in Mitteleuropa dazu keine guten “Aussichten” hat, findet mit Stellarium eine prima Alternative dazu. Das Nachthimmel-Äquivalent zu Google Earth ist auch prima für die Navigation und “Routenplanung”.

The Unarchiver – Apple bietet zwar in Mac OS X das Archive Utility zum packen/entpacken von komprimierten Dateien, aber es gibt immer noch Formate, welche von diesem Tool nicht unterstützt werden. Wer sich mit der Shell nicht auskennt oder (wie ich) zu faul für die Eingabe von Befehlen ist, verwendet dazu “The Unarchiver”; was übrigens auch ein prima Wrestling-Name wäre.

Transmission – “Der” BitTorrent Client schlechthin. Simpel, übersichtlich und praktisch. Ach ja, und nicht nur für Mac OS X…

Transmit – Wieder ein FTP Client, jedoch kostet dieser $29.95. Meiner Meinung nach ist er um einiges besser als Cyberduck, was aber kein fairer Vergleich ist, denn Cyberdruck ist immerhin kostenlos. Doch lohnt sich der kleine Aufpreis falls man häufig mit FTP zu tun hat. Auch ein kleiner Bonus, weil es in dieser Liste das einzige kostenpflichtige Programm ist.

VirtualBox – Wie bei Q lassen sich in VirtualBox virtuelle Maschinen erstellen und darin andere Betriebssysteme betreiben. Im vergleich zu Q ist VirtualBox eher für den produktiven Einsatz geeignet, was vor allem an der Unterstützung von Intel’s VT liegt.

VLC – Ein guter Media Player, aber ein noch besserer Streaming Server, denn dafür wurde er schliesslich an der École Centrale Paris auch entwickelt. In dieser Kategorie sicherlich unschlagbar für diesen “Preis” (kostenlos).

Sie sind grob in den Bereichen Küchen, Schreinerei, Innenarchitektur und Bauleitung tätig und wollten vor allem eine Webseite um Fotos, Referenzen und aktuelle Arbeiten darzustellen. Nebst textueller Information soll die Webseite vor allem optisch überwiegen und eine Präsentations-, Informations- und Verkaufs- Plattform sein.

Ausserdem sollen Events, Neuigkeiten und andere Informationen einfach gepostet werden können. Deswegen haben wir auch bei dieser Lösung WordPress als Grundlage verwendet.

Schlussendlich haben wir folgende Lösung umgesetzt:

Die URL wird entsprechend der Navigation immer hierarchisch logisch dargestellt, also beispielsweise:

http://marvida.ch/home

http://marvida.ch/angebot/kuechen/ewe

http://marvida.ch/referenzen/kuechen

http://marvida.ch/showroom

http://marvida.ch/news

Ausserdem wurde der Anfahrtsplan direkt mit Google Maps verlinkt, sodass Kunden die Route bis zum Showroom einfach und praktisch planen können.

Zur Kontaktaufnahme ist ein Kontaktformular eingebaut, welches auch einen Datei-Upload ermöglicht.

Alles in allem in das Design schlicht und im gleichen Konzept wie das marvida Logo gehalten, ohne jedoch die Farben des Logos zu verwenden. Ansonsten würde der Inhalt bzw. das Design zu sehr mit dem Logo verschmelzen und sich nicht klar davon abheben.

Weil es schwierig war zu definieren was wir eigentlich tun, war es entsprechend auch schwierig unsere Homepage zu gestalten. Schliesslich entschliessen wir uns für eine Portalseite mit drei Sektionen:

Diese Sektionen sollten unsere Vielfältigkeit wiederspiegeln und aufzeigen, dass wir nicht nur Informatiker sind, sondern uns auch für andere Bereiche interessieren. Doch die einzelnen Unterseiten wirkten konsequenterweise nicht einheitlich. Es war so, als wären die einzelnen Bereiche Tochterfirmen von Lotz&Jeremic GmbH und nicht Lotz&Jeremic eine Zusammenfassung vieler Bereiche. Nicht die Firma bot alles an, sondern die einzelnen Angebote waren voneinander getrennt und traten lediglich als gemeinsame Firma auf, ähnlich einem Multikonzern.

Dies sollte sich nun endlich ändern, und so entschloss ich mich ziemlich kurzfristig Lotz mit dieser Idee zu konfrontieren. Das Problem war überfällig geworden und daher sollte es nun endlich angegangen werden.

Das neue Konzept beinhaltet eine Seite, welche im Blog Stil geführt wird. Der Inhalt wird nicht mehr in Sektionen oder geschweige denn Unterseiten dargestellt, sondern als ein neuer Eintrag. Jeglicher Inhalt ist somit ein Eintrag. Die Navigation und Logik wird über Kategorien und Tags geregelt. Lediglich ein paar wenige statische Seiten sollen verfügbar sein.

Damit wollen wir aufzeigen, dass wir als Firma, aber vor allem als Personen hinter der Firma einiges mehr zu bieten haben als statisch aufgezählte Dienstleistungen. Es soll eine Plattform für uns sein, der Aussenwelt mitzuteilen was wir gerade tun, was wir nützliches gefunden haben oder wofür wir uns interessieren.

In diesem Sinn wünschen wir viel Spass mit der neuen Seite, auf weitere gemeinsame Jahre: Cheers!

P.S.: Als kleines Andenken an unsere alte Seite noch ein paar nostalgische Screenshots:

Meine persönliche Herausforderung bei dieser Homepage lag darin, meine (hohen) Ansprüche an die Sauberkeit des Quellcodes und des generierten HTML sowie an die Effizienz umsetzen zu können. Ein Problem bei solchen “Fertiglösungen” ist oft, dass im Hintergrund zu viel abläuft, und die Seite dadurch unnötig langsam wird und Ressourcen verschwendet. Trotz der grossen Internet-Bandbreiten und den leistungsfähigen Servern bleibt mein Grundsatz: Gut strukturierter und effizienter Code sowie saubere und kompakte Ausgaben sind langfristig ein Mehrwert der sich durch verkürzte Einarbeits-Zeiten, schnellerem Umsetzen von neuen Anforderungen sowie geringen Leistungsanforderungen lohnt.

Da in WordPress die meisten Ausgaben durch die im Theme enthaltenen PHP Dateien entstehen, war es verhältnismässig einfach meine Ziele umzusetzen. In erster Linie habe ich unsere Theme-Vorlage grundsätzlich umstrukturiert und diverse (für uns) unnötige Teile entfernt. Nach und nach ist so ein massgeschneidertes neues Theme entstanden.

Mir persönlich hat die Umsetzung dieser Homepage, bei der ich mehr Zeit für meine “Ideallösung” investieren konnte, deshalb WordPress wesentlich näher gebracht als die vorangegangenen Projekte auf WordPress-Basis. Ich kann nun sehr viel genauer einschätzen welche Möglichkeiten gegeben sind und werde dieses Wissen in spätere Aufträge einfliessen lassen.

http://www.webdesignerwall.com/general/free-vector-social-media-set/

Ziemlich praktisch, wenn man gute (und kostenlose) Icons für eine Webseite braucht.

Dazu einige Beispiele und Funktionen, welche die neuen Möglichkeiten aufzeigen:

http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/

http://www.webdesignerwall.com/trends/css3-examples-and-best-practices/

http://www.webdesignerwall.com/trends/best-of-css-design-2009/

http://www.webdesignerwall.com/tutorials/5-simple-but-useful-css-properties/

Beim Einrichten dieser Applikationen wird normalerweise vorgeschlagen CNAME-Records zu erstellen, welche es ermöglichen zum Beispiel eine Subdomain direkt auf die Google Applikationen zu verlinken. Leider ist es aber nicht immer möglich oder praktikabel an der DNS-Konfiguration herumzuschrauben.

Eine Möglichkeit diese Apps unter einer bestimmten Subdomain oder einem Unterordner zur Verfügung zu stellen ist deshalb einen Redirect per .htaccess zu erstellen. Die Apps laufen danach zwar nicht wirklich als “subdomain.domain.tld”, für den Benutzer, der sich in erster Linie einfach eine kurze URL merken will, ist diese Lösung jedoch meist gut genug.

Um einen solchen Redirect zu erstellen geht man wie folgt vor:

1. Einen Unterordner innerhalb der Homepage erstellen mit dem gewünschten Namen
2. Eine Subdomain auf diesen Ordner erstellen
3. Eine Datei mit dem Namen “.htaccess” erstellen mit folgendem Inhalt erstellen:
   

   redirect 301 /<ordnername> https://mail.google.com/a/<domain>
   redirect 301 / https://mail.google.com/a/<domain>

   Wobei als <ordnername> der oben verwendete Name und als <domain> die bei Google registrierte Domäne angegeben wird.

4. Diese Datei in den erstellten Ordner hochladen

Wenn man als Ordnername und Subdomain z.B. “apps” verwendet hat sollte nun sowohl beim Aufrufen von “apps.domain.net” als auch beim Anwählen von “domain.net/apps” direkt auf das entsprechende Login weitergeleitet werden.

So bestand dieses Design lediglich aus Bildern, welche als finaler Vorschlag in der virtuellen Schublade lagen. Diese Bilder wurden uns zur Verfügung gestellt und wir haben dieses Design 1:1 als Webseite realisiert.

Unsere Aufgabe bestand vor allem darin die Webseite einerseits von Bildern in Text umzuwandeln (mithilfe von PHP), damit Suchmaschinen den Inhalt auch “finden” können, andererseits sollte der News-Bereich vom Benutzer so verwendbar sein, wie es sich für einen News-Bereich gehört. Also es sollen eigene Einträge erfasst, bearbeitet und gelöscht werden können.

Schliesslich ist ziemlich genau zum ursprünglichen Design folgende Seite umgesetzt worden.