OBLIG 2 WEBUTVIKLING

Transkript

1 OBLIG 2 WEBUTVIKLING Oppgave 1 Design ved hjelp av skisser eller wireframes et nettsted med et "avansert" design. Lag spesifikke design for ulike skjermstørrelser og utskrift. Fokuser spesielt på å få frem hvordan siden skal skalere (responsive web design) i skissene. Skissene ligger som egen PDF under skisser på Oblig 2 siden. 1/8

2 Oppgave 2 Lag nettstedet i fra oppgave 1. Fokuser på følgende: Bruk av media queries Flest mulig (så lenge det er fornuftig) CSS selectors (+pseudo elementer, pseudo klasser) Strukturelle/semantiske tagger Skille struktur og innhold fra utseende Nettsiden som jeg leverer obligene på, er svaret på denne oppgaven. 2/8

3 Oppgave 3 a) Fyll nettstedet med eksempler på bruk av webfonter, video, RSS, CSS animasjon, MathML og SVG. Eksemplene må lages selv, men trenger ikke være veldig avanserte. "Råvideo" og fontfil kan hentes fra annen kilde. b) Lag en statisk RSSfeed til nettsiden med dummyinnhold. A) B) Jeg har brukt 2 typer webfonter på nettsiden som disse oppgavene leveres på. Video svaret på denne oppgaven ligger som egen html side kalt Video på Oblig 2 siden. CSS Animasjon ligger som egen html side kalt CSS Animasjon på Oblig 2 siden. MathML ligger som egen html side kalt MathML på Oblig 2 siden. MERK: Fungerer ikke i Chrome! SVG ligger som egen html side kalt SVG på Oblig 2 siden Print jeg har laget en liten test side med litt lorem ipsum tekst, slik at du lettere skal kunne se print versjonen på en ordentlig måte. RSS jeg har lagt til et xml ark under RSS på Oblig 2 siden, men vil fungere optimalt om du har en rss reader. 3/8

4 Oppgave E.1 Forklar den praktiske forskjell på følgende to måter å linke inn et printstilark sammen med et annet stilark for visning på skjerm. I hvilke generelle situasjoner ville du brukt hvilken metode: Alternativ 1: <link rel="stylesheet" type="text/css" href="stilark.css" media="screen /> <link rel="stylesheet" type="text/css" href="print.css" media="print /> Alternativ 2: <link rel="stylesheet" type="text/css" href="stilark.css" media="all /> <link rel="stylesheet" type="text/css" href="print.css" media="print /> I alternativ en har du to komplette stilark som ikke har noen innvirkning på print stilarket, stilarket er også beregnet for data skjermer. Dette vil kun ha invirkning på nettsiden dersom du bruker en datamaskin, ved bruk av andre plattformer vil det ikke skje noe spesielt. I alternativ to har du et endringsstilark, som vil si at nettsiden er tilpasset en eller flere plattformer. Her vil det ofte finnes flere stilark, som inneholder egenskaper ved nettsiden ved bruk av de forskjellige plattformene. Ved bruk at media= all, vil nettsiden kunne respondere ved bruk av for eksempel smartphone eller tablet, begge stilarkene vil være i bruk. Ved å bruke andre plattformer enn pc vil ikke print stilarket bli brukt like mye som det ville blitt brukt dersom du hadde brukt en pc, av den enkle grunn at det ikke er alle som kan skrive ut direkte fra en tablet eller en smartphone til skriveren. Dersom jeg ville at en nettside skulle sett relativt lik ut på de forskjellige plattformene ville jeg gått for alternativ 2. Men dersom nettsiden skulle innehold mange forskjellige designelementer som for eksempler kunne ha en innvirkning på det å kunne lese hva som står på siden, ville jeg gått for alternativ 1. 4/8

5 Oppgave E.2 Hva er den praktiske forskjellen på å endre en tekst til uppercase "manuelt" i HTML fremfor å kjøre text-transform:uppercase i CSS? Hvilken metode bør man benytte (om du mener begge, så angi i hvilke tilfeller)? Ved å endre teksten til uppercase manuelt, vil du enklere ha oversikten over hvor du bruker kun store bokstaver og hvor du eventuelt måtte bruke små bokstaver. Du kunne for eksempel satt <h1> til uppercase, slik at du skriver heading 1 / overskriften i store bokstaver, og innholdet i <p> taggene i små bokstaver. Men dette kan også regnes som design. Ved å bruke CSS for å endre til for eksempel uppercase bokstaver ville vært greit dersom du for eksempel vil at alle <h1> taggene skulle være i store bokstaver, for da hadde du ikke måttet være så nøye med å følge systemet i HTML fila som du har brukt tidligere, med andre ord det hadde ikke spilt noen rolle om du hadde skrevet med små eller store bokstaver i HTML fila, for CSS fila ville automatisk skjønt at alle <h1> taggene skulle vært uppercase. Dersom du hadde begynt å blande litt i CSS koden, slik at du ville hatt uppercase noen stedet og brukt lowercase eller capital andre steder ville det fort blitt rot. 5/8

6 Oppgave E.3 I kurset har vi sett på tre ulike teknikker for å tilpasse en webside til ulike skjermstørrelser; relative måleenheter, medietyper med spesiell vekt på handheld og media queries. a) Hva er forskjellen på disse teknikkene, og hvilke(n) vil du anbefale? b) Hvilke av disse teknikkene er relatert til begrepet responsive web design, og hvordan? A ) Ved å bruke av relative måleenheter vil nettsiden du lager være fysisk like stor på de forskjellige plattformene. Nettsider som er laget med medietyper er laget med forskjellige stilark, ett for hver plattform som du ønsker at siden skal være brukbar og lesbar. Ved bruk av media queries vil du kunne ha for eksempel forskjellig utseende på forskjellige plattformer. Det vil si at ved bruk av data skjerm vil designet på nettsiden din være forskjellig fra for eksempel en smartphone. Det vil ikke si at designet MÅ se annerledes ut, men det er et eksempel. B) Media Queries er teknikken som er relatert til begrepet responsive web design. Dette fordi denne teknikken gjør at nettsiden responderer til de forskjellige plattformene. 6/8

7 Oppgave E.4 Det dukker stadig opp "utvidelser" til HTMLspråket, og MathML er en av disse vi har sett på i kurset. Hvilke fordeler og ulemper er det ved å bruke MathML fremfor å sette inn et bilde slik det ble gjort tidligere? Fordelene ved å bruke MathML er at lærere og forelesere kan legge ut matteoppgaver på en nettside ved hjelp av noen enkle kodesnutter, samtidig vil også oppgavene være søkbare. Dersom de hadde lagt ut bilder av oppgavene, noe de fleste gjør i dag, vil ikke oppgavene lenger være søkbare for søkemotorer. Ulempen med MathML er at ikke alle nettlesere støtter denne formen enda, og vil derfor ikke fungere optimalt i for eksempel Google Chrome. 7/8

8 Oppgave E.5 Forklar kort, og så pressist som mulig, hva RSS er og hva det benyttes til. RSS står for Really Simple Syndication, men er i flere sammenhenger kalt for Levende Bokmerker. RSS lager en enkel og maskinlesbar side som kun inneholder det mest sentrale fra en nettside, for eksempel nyhetsoverskrifter på en nyhetsside. Disse blir oppdatert gjevnlig og automatisk så fort en nettside med RSS oppdateres. VG for eksempel har en egen RSS side som har et helt enkelt og rent design, men en liste over de nyeste nyhetsoverskriftene, dersom du klikker på en av de blir du sendt direkte til den valgte nyheten. Et annet eksempel som ofte bruker RSS feeder er blogger, disse sidene blir i de fleste tilfeller oppdatert ganske gjevnlig og leserne vil derfor kunne ha stor bruk for en RSS feed for å kunne holde seg oppdatert. Med mindre de absolutt ønsker å gå inn på siden for å se siste nytt. 8/8