einführung datenaufbereitung + datenstruktur:
- pdf
html & css
- struktur vs. gestaltung
- markup und html syntax
- css syntax
- html & css im zusammenspiel
- alle übungsdateien
- zusammenfassung der wichtigsten css eigenschaften
einführung iweb
- beispiel portfolio strukturieren + seite anlegen
- grobstruktur, architektur, layout, inhalte aufbereiten…
- funktionserklärungen
anmerkungen iweb
seite
- navigation ausschalten
layout
- header & footer auf 0
hyperlink
- immer auf ein textelement (ein wort, etc…), nicht auf textrahmen!!!
- formatierungen
normal, rollover, besucht
- testen im browser
iweb arbeitsdaten kopieren:
user / library /application support / iweb
aufgabe iweb als facebook ergänzung
erstelle eine website für eine musiklabel (ed banger)
gestelltes material:
- allgemeine informationen
- diverse logos und grafiken
- music/video (jeweils ein file)
- shopinhalte mit einem tshirt + link zum offiziellen shop
- neuen tourdaten
- tourtagebuch (mit text und bildern)
- veröffentlichungen (6x vinyl + text)
download link: musicstar.zip
vorstellung und präsentation der eigenen lösung im plenum
aufgabe: portfolioskizze (hand)
skizziere von hand die strukur deines portfolios
- zeige mindestens 5-10 wichtige arbeiten
- kombination mit kurzer erklärung oder beschreibung
- idee für ein bild und layoutkonzept
- seitenstruktur (sitemap) und ausformulierung von zwei fallbeispielen
- beachte dabei deine eigene wertung, wie organisierst du die arbeiten (zeit, zeitaufwand, gefühlte wichtigkeit?)
- versuche diese aufgabe anhand von zwei standpunkten zu lösen:
- - standpunkt eins: unbekannte/r betrachter/in deines portfolios, der mehr über deinen arbeitsansatz wissen möchte
- - standpunkt zwei: unbekannte/r betrachter/in deines portfolios mit kurzer aufmerksamkeitspannung, eine arbeit muss in kürzester zeit erfasst werden können
hausaufgabe
- eigenes portfolio weiterdenken + feinstrukturieren
- arbeit an der skizze mit FOKUS auf:
- farben, farbkonzepte, hintergründe
- schrift, schriftschnitte, hervorhebungen
- systematik
-
-
september 2011
wieso, weshalb, warum x web 0.5
-
-
unfolded
iweb hilfe
iweb hilfe online
iweb pdf (english)
iweb tricks
farben
color wheel
hex color picker
color scheme design
typografie
typetester
dafont
basic
- typetester.org
- screensize, grössen und statistiken
- raster entwickeln
html & css
- selfhtml
html & tools
- firefox extension für html/css und javascript debugging
- pixel-massstab für firefox (extension)
css raster
the 1kb css grid
type
typekit
pattern
patterntap
bild ressourcen
texturen und hintergründe
vektoren
interface
icons
graphical user interface