Sorry, hier wird Flash 8 benötigt...

Montag, 28. April 2008

Please Panic



Wer jetzt hier nur noch schwarze Schachteln sieht: Keine Sorge, das erklärt sich alles im Kurs diese Woche. Die Website der kleinen feinen Mac-Softwareschmiede »Panic« ist zur Abwechslung mal kein schwarzer Klotz, sondern ein prima Beispiel für Webseiteninteraktivität ohne gleich komplett durchzuflashen. Die Startseite bietet eine Drag'n'Drop-Funktion, die Unterseiten reichlich Animation in dezent milchigen, Web2.0igen Farben.
Im zweiten CSS-Beispiel (auch wieder als ZIP) habe ich mal versucht, die wesentlichen Arbeitsschritte zu einer exemplarischen Website abzuspeichern (jetzt mit Ausgangstext!). Die HTML-Seite ist gestalterisch nichts besonderes, aber z.B. so kommt man heile hinten an und ein paar CSS-Feinheiten für den IE 5/6 und eine JS-Lytebox sind zumindest schon dabei.
Das erste CSS-Beispiel als ZIP. Das ist nun wirklich noch gar keine echte Übung aber ein paar der grundsätzlichen Basics sollten hier hoffentlich deutlich werde: Block- und Inline-Elemente, Kaskadieren und Vererbung, CSS aus externer Dateien einbinden, verschiedene Stylesheets je nach media-type, usw.

Mittwoch, 23. April 2008

Die erste HTML-Übung als ZIP. Die Übung enthält hoffentlich alles an notwendigem Basiswissen, um so einfach und schnell wie möglich für den Kurs Interface-Design freitags Euer Konzept verzweigt klickbar zu visualisieren: Bilder in HTML anzeigen, mittels Image-Maps verschiedene Links setzen, zurück verlinken, usw.

Samstag, 19. April 2008

Vatikan

Joseph Karl Ratzinger präsentiert das kleinste Ländle Europas auf komplexem Raum im WWW...



www.vatican.va/phome_ge.htm

Freitag, 18. April 2008

Links findet Ihr als Zip zwei Bild-Dateien in klassischen Druckformaten für die Bildkompressionsübung. Das Zip hat satte 50 MB, entpackt noch wesentlich mehr, Optimierung fürs Web tut also Not! Zur Orientierung: Bei den Studenten im Kurs kam die Stadt in fast Browservollbild auf unter 150 KB, die Krokos auf unter 100 KB, die Vorschaubilder für eine Auswahl-Seite je klar unter 10 KB.

Montag, 14. April 2008

Alter Schwede


Obwohl sie vielleicht schon jeder kennt, aber trotzdem weil es so schön ist.
Überraschend, interaktiv und noch viel mehr...
Viel Spaß dabei!



Und den Link dazu: www.bekindmovie.com

A List Apart



A List Apart (ALA) versteht sich als ein Online Magazin für Leute die Websites machen, daher 'erscheint' grob alle 14 Tage eine neue Ausgabe mit neuen Artikeln für Designer und Entwickler zu einer Vielzahl von Themen. Neben Web Standarts, Code und Design gibt es auch eher theorielastige und kulturelle Themen, allesamt inhaltlich aktuell und hochwertig.

Bei ALA stehen diese Inhalte dann auch klar im Vordergrund. In der aktuellen Version 4 hat ALA einen klaren Aufbau und ein übersichtliches Layout (natürlich voll Standart-konform :). Die unvermeidbare Werbung ist relativ unaufdringlich integriert, die Inhalte werde sortiert zusätzlich über RSS-Feeds angeboten. Man kann vielleicht sagen, ALA macht nicht mehr als nötig, das dann aber wirklich gut: Das 2/3-spaltige Layout ist angenehm zu bedienen, die Navigation funktional, die Typo gleichermaßen angenehm anzuschauen und gut lesbar in jedem Browser, die Illustrationen haben mit ihrer aquarell-artigen Anmutung einen eigenen wiedererkennbaren Stil entwickelt.

Meiner Meinung nach insgesamt ein sehr gelungener und ausgereifter Kompromiß. Das man das auch deutlich schlechter machen kann sieht man z.B. an den inhaltlich ähnlich gelagerten FOWD (voll mit Web2.0 Bling Bling) oder selfHTML (cremefarbige Typowüsten in eher unübersichtlichem Layout)

Donnerstag, 10. April 2008

„Seam Carving“ - content-aware image resizing

Da Sebastian gestern danach gefragt hat: „Seam Carving” ist grob gesagt eine geschickt programmierte Bildanalysemethode mit dem Ziel, 'unwichtige' Bildbereiche zu definieren, um diese beim Skalieren des Bildes bevorzugt zu bearbeiten (und dadurch die wichtigen Bereiche heile zu lassen).

Ein Bild sagt mehr als 1000 Worte - das Video der Präsentation von Shai Avidan und Ariel Shamir auf der Siggraph 2007 erklärt es ganz gut denke ich...


Wer es ganz genau wissen möchte findet mehr Infos hier im PDF.
Mario Klingmann hat das ganze auch bereits in Flash/AS3 nachvollzogen/umgesetzt, das kann man sich z.B. hier anschauen.