Designing Web User Interfaces

FLV-Movie in Blogseite einbinden

admin — Thu, 19 Nov 2009 13:30:24 +0000

Die Projektendabgabe beinhaltet das Erstellen eines Screencast und/oder Sneak Peeks. Dieser soll auf der jeweiligen persönlichen «Konzept & Prototyp»-Seite direkt eingefügt werden. Und das geht folgendermassen:

Zuerst Film in das .flv Format umwandeln (z.B. mit MPEG Streamclip). Format max.: 650px x 366px (16:9 Breitformat ist das)
Video mit normalen WP-Upload in Blog hochladen
Startbild in gleicher Grösse (650px x 366px) als .png vorbereiten und ebenfalls uploaden
beide URLS rauskopieren und folgendermassen in Artikel Inhalt einfügen:
[flvtest:movie poster width height]
- flv statt flvtest
- movie – absoluter Pfad des FLV-Files (http://nm.merz-akademie.de/~stefano.vannotti/wui09/wp-content/uploads/test-clip.flv)
- poster – absoluter Pfad zum Bild (http://nm.merz-akademie.de/~stefano.vannotti/wui09/wp-content/uploads/students-working.jpg)
- width – Breite des FLV Movies
- height – Höhen des FLV Movies

Wichtiger Hinweis: Grössenangaben müssen zwingend angegeben werden!

HTML 5 und CSS 3 – ein Kurzüberblick

admin — Wed, 04 Nov 2009 19:47:50 +0000

Erst einmal paar nützlichste Links zur wunderbaren Welt von HTML 5 und CSS 3 und was denn alles so möglich ist (oder sein wird)…

Als Einstieg…

HTML 5 – Was geht heute schon, was geht nicht? Der grosse Überblick von Peter Kröner
Get Ready for HTML 5 (A List Apart)
HTML 5 and the Future of the Web (Smashing Magazine)
Yes, You Can Use HTML 5 Today!
Immer wieder falsch verstanden, hier mit einem Comic Strip auf den Punkt gebracht oder was es mit dem Ende von XTHML 2, dem Weiterbestehen von XHTML 1.1. und der Zukunft von HTML 5 so auf sich hat: Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip (Smashing Magazine)
Alles Wissenswerte zu CSS 3 gibts hier: CSS3.info – All you ever needed to know about CSS 3
5 nützliche CSS 3 Techniken (Border Radius, Border Image, Box und Text Shadow, Transparency, Fonts): Push Your Web Design Into the Future with CSS 3 (Smashing Magazine)

Interaktiv und Visuell

Weitere nützliche Ressourcen

Galerien und Demos

Und was macht mein Browser?

Entwickeln mit HTML 5 und CSS 3

Ein HTML 5 / CSS 3 Layout von Grund auf schreiben: Coding A HTML 5 Layout from Scratch (Smashing Magazine)
HTML 5 Cheat Sheet
HTML 5 Visual Cheat Sheet von Woork
CSS 3 Cheat Sheet
HTML 5 @W3C
HTML 5 Spezifikation

Layouts

Modern CSS Layouts (Smashing Magazine)

HTML 5 APIs

Das Canvas Element

Das Video und Audio Element

Firefox 3.5 versteht das HTML 5 Video und Audio Element: Using Audio und Video in Firefox
Video Beispiele mit HTML 5 auf der Mozilla Website: Video Tour of Firefox Browser Features

Smart gefloatete Boxen mit CSS und jQuery

admin — Thu, 29 Oct 2009 13:24:09 +0000

Eine sehr elegante Lösung wie gefloatete Elemente dynamisch in einem elastischen Layout angepasst werden können.

CSS Frameworks

admin — Thu, 29 Oct 2009 08:53:57 +0000

In der Webentwicklung bietet es sich an auf bewährte CSS Frameworks zurückzugreifen. Es bieten sich verschiedene Möglichkeiten an:

TimThumb PHP Image-Resize Script

admin — Wed, 21 Oct 2009 06:05:53 +0000

Praktisches PHP Bildmanipulationsscript zur automatischer Erzeugung von Thumbnails.

Wireframe Schablonen für Omnigraffle

admin — Wed, 21 Oct 2009 05:57:33 +0000

Konigi hat praktische Wireframe Schablonen für das low-fidelity Prototyping mit Omnigraffle zusammengestellt.

Sketchboarding

admin — Wed, 21 Oct 2009 05:38:05 +0000

Youtube Video von Adaptive Path zu Sketchboards als schnelle Methode zur UX Lösungssuche.

Internet Explorer und CSS

admin — Wed, 21 Oct 2009 05:24:40 +0000

Lehrreicher Artikel im Smashing Magazine zur unterschiedlichen Interpretation von CSS durch den Internet Explorer 6, 7 und 8.

Firefox Add-ons für die Webentwicklung

admin — Wed, 07 Oct 2009 06:13:05 +0000

Für den Firefox-Browser gibt es eine Fülle von nützlichen Erweiterung für die erfolgreiche Webentwicklung.

Design Handbook mit diversen UCD-Techniken

admin — Tue, 06 Oct 2009 11:25:12 +0000

Ein nützlicher Design Guide des Fluid Project mit gängigen UCD-Techniken für den Designprozess.

UI-Konzept von Openlibrary.org

admin — Tue, 06 Oct 2009 11:22:35 +0000

Die Freie Bibliothek (openlibrary.org) hat sich zum Ziel gesetzt, Angaben zu allen jemals erschienen Bücher in einer Datenbank zu speichern und über eine entsprechende Plattform zugänglich zu machen. Dieses ambitionierte Projekt verfügt auch über ein ausformuliertes UI-Konzept.

Worldcat – MetaBibliothek

admin — Tue, 06 Oct 2009 11:20:37 +0000

Worldcat.org ist ein Digitales Meta-Repositorium, welche die Suche in Beständen von über 10′000 Bibliotheken erlaubt. Das Webinterface verfügt über interessante Elemente und Interaktionsstile.

Zentrale CSS Grundlagen

admin — Tue, 06 Oct 2009 06:24:02 +0000

Aktuelles Roundup im Smashing Magazine zu zentralen CSS-Grundlagen für die Gestaltung webbasierter Benutzungsschnittstellen.

Roundup zu modalen Fenstern im Webdesign

admin — Mon, 05 Oct 2009 17:45:22 +0000

Artikel im Smashing Magazine zu aktuellen Methoden und Techniken in der Entwicklung und Gestaltung modaler Fenster im Web. Empfehlenswert!

Weitere Wireframe Ressourcen

admin — Wed, 30 Sep 2009 08:43:40 +0000

Eine gelungene Zusammenstellung im Smashing Magazine mit Wireframe-Methoden, Beispielen und -Tutorials.

Wireframes Collection

admin — Wed, 16 Sep 2009 16:32:19 +0000

Eine schier unerschöpfliche Wireframes-Sammlung zusammengestellt von Ivana Jurcic.

User Experience Deliverables

admin — Mon, 14 Sep 2009 16:38:24 +0000

Informationsarchitekt Peter Morville präsentiert auf seiner Website eine umfassende Sammlung von User Experience Deliverables. Auf einer Treasure Map werden die einzelnen Methoden und Techniken übersichtlich zusammengefasst.

User Experience Deliverables Treasure Map (Jeffery Callender & Peter Morville)