MEVIT2500 Multimodal design IMK, 15. februar 2010 Forelesning 3. Suhas Joshi IMK, UiO MEVIT2500 Multimodal design

Transkript

1 MEVIT2500 Multimodal design IMK, 15. februar 2010 Forelesning 3

2 Kort presentasjon Suhas Joshi Utdanning, UiO Profesjonsstudiet i Informatikk Systemutvikling og modellering. Ferdig høsten Skriver masteroppgave for SINTEF: Mobile decision support in emergency situations. Bachelorgrad i samfunnsøkonomi Undervisning vår 2010 Seminarleder ECON1310 Økonomisk aktivitet og økonomisk politikk Gruppelærer INF1050 Systemutvikling t MEVIT2500 Arbeidslivet Teknisk ansvarlig, Telipol AS (2005 ) Utviklingsavdeling, 24SevenOffice ASA (2008 )

3 Hva har dere gått gjennom? Mål for kurset Hvor mye tid kurset krever Beskrivelse av hver av oppgavene Detaljert undervisningsplan Seminargruppene og veiledergrupper Det praktiske ved innlevering Pensum

4 Hva skal vi gå gjennom i dag? Time 1 Hvem er de forskjellige personene involvert i kurset? Innleveringsprosessen Hvordan blir hjemmesidene evaluert av veileder og sensor? Programvare og utstyr t Kreativitet i fokus Publisering på folk.uio.no/brukernavn Kort innføring i HTML Rask titt på CSS Time 2 Introduksjon til Nvu generell bruk av programmet Første mappeoppgave Verktøykurset Spørsmål

5 Hvem er involvert i MEVIT2500? Ragnhild Fjellro Suhas Joshi Ulf Rokkan Forelesning, skrivekurs, oppgaveveileder Forelesning, veiledning, datalab, verktøykurs Workshop/kreativitetskurs, foto og GIMP kurs, veiledning Ketil Blom Chris Allan Simonsen Filip Lange Nielsen Fotokurs, GIMP kurs, oppgaveveileder Video og lydkurs, oppgaveveileder Oppgaveveilder Anders Fagerjord Synnøve Kleive Gunnar Liestøl Gjesteforelesning Gjesteforelesning Gjesteforelesning Det blir en del e post, de som ikke bruker UiO mailen sin regelmessig bør sette opp videresending

6 Hvordan fungerer mappeinnleveringene?

7 Hvordan fungerer mappeinnleveringene?

8 Hvordan fungerer mappeinnleveringene?

9 Hvordan fungerer mappeinnleveringene?

10 Hvordan fungerer mappeinnleveringene? Som vi ser, mange ulike sider som skal forenes til en helhetlig side til slutt Trenger ikke nødvendigvis skille mellom oppgave 1 og 2 osv. Tenk helhet Mulighet til å endre totalt på mappeoppgavene etter veiledning En startside med emblem Husk å tenke rød tråd så åtidlig som mulig Naturlige koblinger mellom de ulike oppgavene/sidene er viktig ved vurdering

11 Evaluering av mappeoppgaver Foreløpig ramme for vurderinger av mappeoppgaver. Rammen skal utvides og konkretiseres utover i veiledningsapparatet, og resultere i en veiledning til sensorer for å sikre at de stiller like krav og baserer seg på samme vurderingskriterier som oss. Til sammen: Utforming/helhet/ Tekst Foto Video Lyd håndverksmessig kvalitet Kreativitet, idérikdom og originalitet Selvstendighet og graden av egenproduksjoner Skaper nettstedet opplevelser? (latter, gråt, innlevelse osv)

12 Kreativitet i fokus Ikke heng deg opp i det tekniske Ikke bruk opp tiden på ting som ikke vurderes: krysskompatibilitet, CMS, søkeoptimalisering osv. HTML/CSS blir kun vurderte ut i fra det som står under tekniske minstekrav Nettsideformatet skal brukes til å kommunisere budskap Spør forelesere, gruppelærere, veiledere om du er i tvil om hva som er realiserbart Bruk fantasien og vær original men ikke glem å svare på oppgaven Ingen grenser for hvor absurd det kan være men det må være forståelig og sakelig for en sensor Velg din måte å presentere informasjon på men husk at noen oppgaver kan ha tekniske minstekrav Jakt inspirasjon på Internett, i lærebøkene og hos hverandre men pass på opphavsrett og ikke bruk noe du ikke har laget selv

13 Kreativitet i fokus

14 Kreativitet i fokus

15 Kreativitet i fokus

16 Kreativitet i fokus

17 Publisering på folk.uio.no Alle har i utgangspunktet mulighet til å publisere hva de vil på folk.uio.no/brukernavn Man må lage seg en mappe som heter www_docs på sitt itthjemmeområde (M:/) Denne mappen må ha de riktige leserettighetene for at den skal bli synlig for folk utenfor De fleste har allerede gjort dette (for eksempel gjennom obliger i INF1040) Dette kan kun gjøres gjennom bruk av terminal (evt. en Linux maskin) Hvordan endrer jeg rettighetene på denne mappen? Les USIT sin guide: Kom på verktøykurset Spør noen andre på kurset som har fått det til Send oss e post

18 Utstyr Datamaskin: på skolen eller egen laptop Fotokamera: speilrefleks, kompaktkamera, mobilkamera, webcam Videokamera: kan lånes (etter avtale), lånes av hverandre, kompaktkamera, mobilkamera, webcam Lyd: mikrofon,headset med mikrofon, mobiltelefon, laptop,diktafon Skanner: tilgjengelig i de fleste arbeidsstuer, inklusiv multimediarommet Øvrig: kopimaskin, tegnebrett, båndopptaker osv.

19 Primær programvare Nvu Skal brukes til HTML og CSS kode WYSIWYG editor Gratisalternativ til Adobe Dreamweaver, AdobeColdFusion, Microsoft Expression Web osv. Kan lastes ned gratis til hjemmebruk (se detaljert undervisningsplan) GIMP Skal brukes til tekst og bildebehandling, foto, logo og emblem Gratisalternativ til Adobe Photoshop (Elements), Corel Paint Shop Pro osv. Kan lastes ned gratis til hjemmebruk (se detaljert undervisningsplan) Annen programvare Evt. programvare til lyd/video (kommer senere i kurset)

20 Hvorfor lære seg HTML til dette kurset? I mappeoppgave 1 er det spesifikke krav om bruk av CSS. Må forstår HTML for å forstår CSS Dere trenger ikke kunne skrive HTML og CSS utenat, men dere skal ha kjennskap til hovedprinsippene Programmeringsspråk, valideringsfeil, metainformasjon, ryddighet i koden osv. er irrelevant Lurt å ha kjennskap til hvordan HTML koden fungerer hvis dere for eksempel skal bruke Javascript Lyd, video (evt. flash) kan kreve at man skriver eller limer inn kode i stedet for å bruke et grensesnitt Dere bør allerede ha noe kjennskap til HTML. Utklipp fra kursets emneside:

21 HTML (Hyper Text Markup Language) HTML er et markeringsspråk (Markup Language) Brukes til å definere strukturen på sidens innhold Sidens innhold omtales som hypertekst Hypertekst er tekst med umiddelbare kryssreferanser (hyperlenker) til annen tekst Mer enn bare tekst: bilder, tabeller, lister osv. Siste versjon støtter også video Markup vs. programmering

22 Bruk av HTML Filendelse:.html og.htm (.xhtml,.xht,.xml) Består av vanlig tekst formatert med HTML elementer og deres attributter Uten disse elementene blir det hele kun et langt avsnitt med tekst Hva kan vi bruke HTML til: Vise bilder Opprette lenker Sette opp tabeller og lister Lage linjeskift, avsnitt og paragrafer Endre farger, størrelse og formatering av tekst (her bør vi fortrinnsvis bruke CSS) Angi informasjon om siden: navn på siden, språk, søkeord osv.

23 Hvordan ser et HTML dokument ut? Vi har et fast oppsett på HTML sider som alltid gjelder: Head Informasjon om siden. Hva den inneholder, hvilket språk, hvilket tegnsett, sidens tittel osv. Body Sidens innhold. Tekst, tabeller, lister, bilder osv. Vi har dermed følgende struktur som utgangspunkt når vi skal lage et HTML dokument: START PÅ HEAD <head> Informasjon om side SLUTT PÅ HEAD START PÅ BODY Sidens innhold SLUTT PÅ BODY </head> <body> </body> Dette er HTML elementer La oss se nærmere på de

24 Hvordan ser et HTML element ut? Hovedregelen er at man starter og slutter HTML elementer med en starttag og en sluttag. Starttag: <strong> Sluttag: </strong> <strong> Velkommen til min Internettside! </strong> <p> Denne teksten vil bli oppfattet som en paragraf </p> <a href= >Link til VG</a> Attributt Men ingen regel uten unntak. Noen elementer har kun starttag og trenger ikke avsluttes: <img src= ruben.jpg alt= Ruben /> <br /> Elementer kan altså ha attributter som utfyller elementenes funksjon. <a> elementet brukes til å angi at vi vil ha en link, mens href attributtet brukes til å angi hvor vi vil linke til.

25 De vanligste elementene Vi bruker som regel i underkant av 20 elementer til over 90% av all HTML: <h1>, <h2>,, <h6> Header (overskrifter kift og flere nivåer på underoverskrifter) <table>, <tr>, <td>, <th> <img> <ul>, <ol> <div> <p> <br> <strong>, <b> <i> <a> <form>, <input> <style> <title> Tabell, rad, kolonne, overskrift Bilde Uordnet og ordnet liste Layer (ofte brukt i kombinasjon med CSS) Paragraf Linjeskift Bold (fet skrift) Italic (kursiv) Anker (enten link eller referansepunkt) Skjema elementer Brukes i forbindelse med stilark (CSS) Sidens tittel Det finnes flere, og glem heller ikke de obligatoriske elementene: <html>, <head> og <body>.

26 Minimumskrav til en side <html> <head> <title></title> </head> <body> </body> </html>

27 Minimumskrav til en side <html> <head> <title> Hjemmesiden min! </title> </head> <body> <h1> Velkommen til min hjemmeside! </h1> <p> <img src= bilde.jpg alt= Meg /> <a href= ommeg.html > Les mer om meg </a> </p> </body> </html> Husk å lagre som.html fil. For eksempel index.html.

28 CSS (Cascading Style Sheets) Vi ønsker å bruke HTML til å utforme strukturen på siden: tabeller, lister, bilder, lenker osv. CSS skal brukes til å definere utseende på siden: farger, fonter, størrelser, kantlinjer osv. Hvorfor ønsker vi å bruke CSS til dette? Fleksibilitet Båndbredde Generalisering av større sider Skille mellom innhold og gpresentasjon Bedre presisjon Lettereågjøreendringer endringer

29 CSS (Cascading Style Sheets) CSS informasjon kan defineres inni.html filen, alternativt i egen.css fil. CSS er litt mer komplisert enn HTML, men til gjengjeld j et kraftigere verktøy Flere regler = større nøyaktighet Vi kan bruke CSS til å definere og dermed overstyre nettleserens standardformateringer Hovedprinsippet med CSS: Velg enten ett enkelt HTML element, en klasse med flere elementer eller alle elementer av en type Definer regler for valgte element(er). For eksempel font, størrelse, farge osv. Nvu har innebygget CSS editor som vi kan bruke, men la oss se gjennom hovedprinsippene pp

30 Bruk Vi kan velge oss hvilke elementer vi ønsker å formatere på følgende måter: ID Brukes når vi kun ønsker én instans av formateringen <img src= silje silje.jpg jpg alt= Silje id= bilde bilde_silje silje /> Class Brukes når flere elementer skal se like ut <img src= ruben.jpg alt= Ruben class= bilder /> <img src= silje.jpg alt= Silje class= bilder /> Generelt for elementet Brukes når vi vil at regelen skal gjelde alle forekomster av et element <img src= ruben.jpg alt= Ruben > #bilde_silje { border: 0px; float: left; }.bilder { border: 0px; float: left; } img { border: 0px; float: left; }

31 Definisjon Vi kan definere style sheets ( stilark ) på følgende måter: Inline style sheets <img src= ruben.jpg alt= Ruben style= border: 0px; /> Embedded style sheets <head> <style type= text/css > text/css img { border: 0px; } </style> </head> External style sheets <head> <link rel="stylesheet" type="text/css" text/css href= stilark stilark.css css" /> </head> I dette eksempelet trenger vi altså en fil i samme mappe som heter stilark.css hvor informasjonen ligger.

32 Tips til mappeoppgave 1 Prøv å styre unna tre linker på rad og et bilde av dere selv Husk at lenker ikke må være kjedelig tekst. Det kan være bildelenker eller fancy tekst laget i GIMP Fokuser på det dere har tilgjengelig av utstyr, materiale og kunnskap. Ikke på hva dere ikke kan Bryt med tradisjonelle nettsider. Ikke tenk struktur, men tenk hvordan budskapet best presenteres Å oppfylle minstekrav betyr ikke nødvendigvis at oppgaven blir god, men det er en start Identitet. Hva klarer du deg ikke uten? Sykkelen din? Så få med den da vel Ikke heng dere opp i ordet utstillingsvindu dere skal presentere dere selv, det er poenget Husk at ikke alle sidene trenger å se like ut kanskje det er bra om de ikke gjør det? Ta veiledningen til dere og husk at dere har mulighet til å korrigere. Veilederne er ikke sensorer Er siden din ikke like i alle nettlesere? Skriv hvilken du har tatt utgangspunkt i (i e posten til veileder) Prøv å tenk fremover neste oppgave skal inn om et par uker igjen

33 Verktøykursene på tirsdag og torsdag Hovedformålet med kursene er: Å sørge for at alle forstår og behersker Nvu At alle vet hva GIMP går ut på og kjenner til enkle operasjoner (dere får grundig veiledning senere) Videre kan vi bruke kursene til: Å sørge for at alle får til minstekravene til oppgave 1 Se nærmere på HTML/CSS Ordne med publisering på folk.uio.no Hjelpe dere videre med oppgave 1 (andre ting dere lurer på eller trenger hjelp til)

34 16. februar 18. februar Plan (begge dager) Jørn Hermansen Julia Weiss Ove Magnus Halkjær Abdurrahim Gunaydin Farhad Lak Behzad Pashaie Henni Kärner Corita Sophia Valle NihadaAvdic d Per Magnus F. Bauer Stella Heieren Helene Sandvold Elin Fallås Inger Lin Skjerve Joachim Mortensen Lena Risvik Suzanne Sannes Helena Pedersen Silje Estil Marte Holm Løvstad Ingrid Arnesen Heloie Marie Jacob Marta Szelerska Audun Brekke Kamilla Nyegaard Larsen Cato Fagermoen Dag Sølvberg Aria Shahidi Nejad Tina Becker Holt Rita Johnsen Rebecca Louise Clements Thea Børresen Mikkelsgård Kristin Maasø Ida Skjelderup Rask repetisjon i bruk av Nvu Løse enkle HTML/CSS oppgaver (?) Jobbe videre med mappeoppgave Kjemperask innføring i GIMP Løse enkel bildeoppgaver m/ web (?) Jobbe videre med mappeoppgave Hvis behov: jobbe videre med mappeoppgave 1 Eventuelle andre ting

35 Spørsmål? Husk at dere også kan sende e post: suhasgj@student.sv.uio.no For administrative i ti ting bør dere ta kontakt ktmed Ragnhild Spør oss når dere ser oss: etter forelesning, på datalab osv.