OBLIG 1 - WEBUTVIKLING

Transkript

1 OBLIG 1 WEBUTVIKLING Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Problemer med funksjonalitet / bruk Uoversiktlig side For store bilder, siden blir tung å laste. Bredden og høyden på nettsiden er ikke tilpasset de forskjellige platformene Nettsiden er ikke av typen responsive design Skriftstørrelsene kan gjøre det vanskelig å lese hva som står der. Kontaktinformasjonen ligger gjemt midt på siden, går i ett med resten. Forskjellige elementer ligger over hverandre Useriøs betalingssystem Problemer i koden bak nettsiden Hvert bilde/hver annonse er lagt inn i en egen table. (Enormt mange table på siden). Enormt mange div tags. Alt er kodet i HTML. Noe CSS i div tagger. Han må selv beregne posisjonen til de forskjellige table taggene, samt størrelse. Koden inneholder ikke UTF8 Charset Han lister opp alle typer produkter i <title> taggen Han refererer til en link for å sette bakgrunnen, i stedet for å lagre bildet og ha filene sine strukturert i en mappe. Ikke noe struktur i koden 1/14

2 Oppgave 2 Lag et eksempel som illustrerer nytten av/hensikten til multiple classes Svaret på denne oppgaven ligger som egen side under navnet Multiple Classes. Ved bruk at multiple classes kan du enkelt bruke forskjellige klasser med egenskaper hos forskjellige elementer du har med på siden din. Oppgave 3 Lag eksempler der du tester ut box modelprinsippet og flest mulig av css- egenskapene som gjelder box model. Eksemplene skal ikke ha noe fornuftig innhold. Denne oppgaven er også løst med å bruke en egen html side, Box Model. 2/14

3 Oppgave 4 Finn eksempler på (deler av) nettsider som ikke skiller innhold og design på en god måte. Beskriv hva som er galt og hvordan det kan fikses. Diskuter spesielt tvilstilfellene Et fantastisk godt eksempel på en nettside som ikke skiller struktur og innhold på noen god måte er Nettsiden skiller ikke innhold eller design på noen som helst måte Siden er uoversiktlig, rotete og slitsom i den forstand at du ikke kan finne det du leter etter på en enkel måte. Mange elementer, alt for lite luft mellom elementene. Nettsiden benytter seg ikke at et eksternt cssark, men blander html og css i et ark. Med litt struktur i siden ville den blitt en helt grei nettside. De kunne benyttet seg av et egen css stilark for å separere design og innhold Bildene på siden burde vært skalert ned til mindre størrelser, slik at nettsiden ikke blir så tung å laste, eventuelt laget thumbnails til hvert av bildene. De burde hatt én stil, slik at alle sidene ville sett like ut design messig. 3/14

4 Oppgave 5 Beskriv tjenester/funksjoner du selv kommer opp med som bruker strukturelle tagger på en fornuftig måte Enhver nettside trenger forskjellige strukturelle tagger for å kunne definere hva siden skal inneholde. De fleste nettsider i dag bruker blant annet: <header> denne taggen definerer overskriften på siden, enten om det er tekst med for eksempel navnet ditt eller et bilde av logoen til firmaet ditt. <nav> denne taggen definerer navigasjonsmulighetene du vil ha på nettsiden. <section> denne taggen definerer seksjoner i dokumentet, for eksempel kapittler, overskrifter og andre seksjoner som et dokument inneholder. <footer> denne taggen definerer en footer for et dokument eller en seksjon. Oppgave 6 Lag flere små eksempler som illustrerer/tester ut de ulike posisjoneringsteknikkene/måleenhetene i CSS. Eksemplene skal ikke ha noe fornuftig innhold. Denne oppgaven er også løst med å bruke en egen side, Positions. 4/14

5 Tidligere eksamensoppgaver Oppgave E1 Du har følgende webside. Hvilke tagger vil det være naturlig å velge for å angi de 7 rektangulære områdene? Omrisset rundt selve siden teller også med, og er markert ved bokstaven G. Den grå fargen er satt på taggen <body>. A: <header> <h1> B: <nav> C: <main> <p> D: <aside> og en klasse som definerer egenskapene. <p> E: <aside> og en klasse som definerer egenskapene. <p> F: <footer> <p> G: <div id= wrapper > og en klasse i css fila som definerer egenskapene til wrapper 5/14

6 Oppgave E2 Hvilke av disse punktene er vanligvis med i en valideringssjekk for HTML (ta utgangspunkt i w3c sin validator i strengeste innstilling). Å angi et punkt som er feil vil telle negativt. 1. Sjekker at det kun er benyttet gyldige tagger og tilhørende attributter. 3.Sjekker at linker ikke er døde (at det de peker til finnes) og at bildefiler som det blir referert til i imgtagger eksisterer. 5. Sjekker at strukturen i koden er korrekt (dvs. at tagger avslutter i riktig rekkefølge osv.) 7. Sjekker at websiden er tilpasset mobil, print og andre medietyper på en riktig måte. 8. Sjekker at man benytter tagger "inni hverandre" på en riktig måte (f.eks. at title- taggen ikke kan stå inni en bodytag osv.) 6/14

7 Oppgave E3 Hvilke feil ser du ved følgende kode (en samling av feil som ble gjort på obligene). Du skal vurdere koden ut i fra HTML5 skrevet i XML/XHTMLstil med vanlig praksis for struktur og kodeoppsett. Ikke ta hensyn til at siden mangler meny, semantiske tagger osv. Se kun på feil ved den koden som faktisk er der. <header> skal ikke være i <head> taggen. <body> taggen er ikke tatt med. <h1> taggen blir brukt flere ganger, kunne brukt <h2> i stedet for. Da taggene ville fått samme egenskaper dersom du skulle definert et sett med egenskaper til taggen <h1> i css. <img> taggen er ikke skrevet på riktig måte, mangler, korrekt måte ville vært: <img src= bilde.psd width= 344 height= 226 > <br /> skal helst ikke brukes. Den siste <p> taggen blir ikke avsluttet. 7/14

8 Oppgave E4 I CSS finnes det (minst) fem ulike "nivåer" av stilark: Inline Internal External User Browser C'en i CSS står for cascading ("sammenfallende" er en upresis norsk oversettelse som ofte er brukt). Forklar hva dette begrepet betyr i sammenheng med at det finnes ulike "nivåer" av stilark. Bruk som minimum internal og external som et konkret eksempel på din forklaring. CSS står for cascading style sheets, som på en måte kan oversettes til seriekoblet stilark. CSS er med på å definere utseende på en nettside, mens HTML tar seg av innholdet. Inline ved bruk av denne typen stilark mister du mange fordeler, her blander du inn css direkte inn i en relevant html tag. Slik som eksempelet under. <h1 style color: red; > Overskrift <h1> Internal her legger du inn et sett med css kode i en <style> tag som skal være innenfor <head> taggen. Slik som eksempelet under. <style> h1 { color: red; fontsize: 24px; } </style> External Ved bruk av external css ark, lager du en egen css fil som inneholder all form for css kode, deretter må du linke til dette arket i html koden. h1 { color: red; } 8/14

9 Oppgave E5 Hva menes med at HTML er "bakoverkompatibelt" med nettlesere (også omtalt som å støtte en "fallback"løsning)? Forklar med et lite konkret eksempel (du trenger kun skrive de kodelinjene som er relevante for å vise poenget ditt). Hvordan er det med bakoverkompatibilitet i CSS? At html er bakoverkompatibelt med nettlesere betyr at selv om HTML oppdateres og nye funksjoner blir lagt til, så vil de gamle nettleserne fremdeles kunne vise innholdet på nettsiden, men kan ikke vise alle de nye funksjonene som har blitt brukt. Dette gjelder også CSS. 9/14

10 Oppgave E6 Fra W3C er det foreslått en ny tagg kalt <picture>: Hva tenker du om denne taggen, behovet for den og dens muligheter for å bli en del av den endelige standarden? Ville du gjort endringer på forslaget? Flere og flere av dagens nettsider er av typen responsive design, altså nettsidene har forskjellige stilark og egenskaper for de forskjellige plattformene vi har i dag, blant annet smarttelefon, nettbrett og ulike størrelser av datamaskiner og skjermer. Ved å bruke <picture> taggen vil også bildene vi ønsker å ha med på nettsiden automatisk forandre seg avhengig av hvilken plattform du velger å vise nettsiden på. Men samtidig må du lage for eksempel tre forskjellige størrelser av et og samme bilde. Dette kan da skape til mange filer som kunne vært unngått. 10/14

11 Oppgave E7 Hva mener vi med box model i CSS, og hvorfor er dette så sentralt? De fleste elementer i HTML kan betraktes som bokser. Når vi snakker om boxmodel prinsippet, snakker vi om design og layout. Boxmodel prinsippet består av margin, border, padding og det faktiske innholdet, content. Box modell prinsippet lar oss legge en ramme rundt elementene vi ønsker å ha med på nettsiden vår, samt definere mellomrom mellom elementene. 11/14

12 Oppgave E8 Selv om historien strekker seg over forholdsvis kort tid, er det flere viktige veiskiller som har gitt oss Internett og webben i den formen vi har i dag. Hvordan kunne Internett og webben sett ut og fungert annerledes i dag dersom utviklingen hadde tatt andre veier underveis? Merk at du ikke trenger kunne historien i detalj for å svare på dette spørsmålet. Det gjelder mer å se hvilke egenskaper Internett og webben har i dag som ikke nødvendigvis burde vært slik. Internett er i dag en åpen kilde som er tilgjengelig for alle og enhver, og inneholder en mengde informasjon om alt fra a til å. Dersom historien hadde vinklet en annen vei, og internett og webben hadde vært eid av privatpersoner eller vært under politisk eller militær kontroll, ville det ikke vært så tilgjengelig som det er til dags dato. Det ville kanskje inneholdt en større mengde med sensur av informasjon og vi måtte vel kanskje betale lisensieringer for å kunne lese innholdet. Selvfølgelig finnes det flere steder i verden i dag som har veldig mye sensur på webben, og mer vil det antageligvis komme grunnet mer dramatisk og enda sterkere innhold. Vi blir ikke lenger beskyttet for sterk informasjon på den måten som vi ble tidligere. 12/14

13 Oppgave E9 Hvilke fordeler/ulemper ville det hatt dersom en webside måtte være 100% korrekt/validert før den kunne vises av en nettleser? Tenk på standarder, teknologi, utviklere og brukere. (I de tilfellene den ikke var korrekt ville man kun sett "siden kan ikke vises".) Fordeler: Siden ville vært lettere tilgjengelig for en søkemotor, derfor ville det vært lettere å søke etter en spesifikk nettside. Nettsiden ville vært lettere å vedlikeholde. Ulemper: Det vil kreve mer kunnskap og ferdigheter for å kunne lage en 100% korrekt nettside. Dersom nettleserne ikke holder følge med de nye standardene, ville deler av eller all informasjon bli vist på en ukorrekt måte eller ikke vist i det hele tatt. 13/14

14 Oppgave E10 Vi kan sette inn et bilde i en webside enten ved å kun bruke HTML: <img src="logo.jpg" /> eller ved CSS: <div id="logo"></div> #logo {background-image:url('logo.jpg');} Hva er den praktiske forskjellen på disse metodene, og når (til hva) vil man bruke hver av metodene? Bruk IMG: Dersom du vil at siden skal være printbar og du vil at bildet ditt skal være inkludert som standard, bruk IMG i HTML. Dersom bildet har en viktig semantisk betydning, for eksempel et advarselsukon, bruk IMG. Dette sikrer at betydingen av bildet kan formidles på alle brukeragenter, inkludert skjermlesere. Bruk CSS backgroundimage: Dersom bildet ikke er en del av innholdet, bruk css. Dersom du vil at siden skal være printbar, men at bildet ikke skal være med i utskriften. Hvis du trenger å forkorte nedlastningstiden, bruk css. Dersom du ønsker at bildet skal være bakgrunnen på nettsiden din, kan du bruke css til å strekke bildet ut slik at det fyller hele siden din. 14/14