khib interaksjonsdesign 6 html og css
TRANSCRIPT
Introduksjon til interaktive medier 6
Marian Bantjes: Intricate beauty by design.
Introduksjon til HTML og CSS
Hyper Text Markup Language
Ikke programmeringsspråket markeringsspråk
HTML struktererCSS formaterer
Viktig å kunne grunnleggende om man vil jobbe med design på web og mobil.
Forståelse for det som gir form og farge, gir deg som designer muligheter
Egenskapene i nye media utnyttes best om man designer for mediet, i mediet
Flatt design vil alltid være en abstraksjon.
Responsivt design umulig uten å også vite om det som formgir i mediet
Tre sider hvor designet kun er mulig om man forstår HTML / CSS
(Prøv å gjøre nettleser vinduet større/mindre og se hva som skjer)
http://www.kennedyandoswald.com/
http://96elephants.org/
http://www.createpilates.com/
Et uendelig lærret med flytende proposjoner.
Det handler om designsystemer
Å kunne HTML og CSS vil gi faktisk kontroll over resultatet og deg mer tid til å designe (i web-design).
CSS = Cascading Style Sheet
Arv og klasser gir effektivt designRekkefølge gir deg kontroll og smarthet
CSS grunnleggende prinsipper:Mer spesifikk overstyrer mindre spesifikkSiste overstyrer tidligere
HTML tagger
Html-tags er kodeord som er omgitt av brackets: <>
Html-tagger kommer normalt i par:<h1>Overskrift</h1>
start-tag slutt-tag
navn.html = webside
Et rent tekstdokument
Nettleseren leser HTML-kodene til å tolke innholdet på siden.
<html><body><h1>Dette er en overskrift</h1><p>Dette er brødtekst.</p></body></html>
Type <tag> er viktig, den gir semantisk mening.
Alle <tags> kan ved hjelp av CSS få ønsket utseende
Mange <tags> har grunnleggende stil.
Class og id:<tags> kan ha både en class og en id
En id kan bare eksistere en gang på en webside, og beskriver det unike.
Class brukes for å gjenta stil og utseende.
Sammen med arv, kan man bruke CSS til effektivt lage interaktivt design.
<html><head><style>.button{color:#ff0000;} </style></head><body><div id=”header”><div class=”button”>Valg 1</div><div class=”button”>Valg 2</div></div>
</body</html>
.button { color: #ff0000;}
Punktum henviser til en classKrølleparanteser starter og avslutter stildefinisjonen.Color: er kodeordet for farge på tekstalle farger definereres enten som hex med #, som rgb med rgb(255,0,0) eller navn som red.
Design i CSS handler veldig forenklet om bokser.
Tenk hvor skal ting flyte, ikke hvor skal det være.
Kjartan koder litt live for å vise..
Oppgave på datalab:
http://d7.no/khibhtml
Kjartan går rundt og hjelper
