EKSAMEN. Webutvikling Dato: ITF Eksamenstid: 25/ Hjelpemidler: Faglærer: Ingen. Tom Heine Nätt

Transkript

1 EKSAMEN Emnekode: Emne: ITF10511 Webutvikling Dato: Eksamenstid: 25/ Hjelpemidler: Faglærer: Ingen Tom Heine Nätt Eksamensoppgaven: Oppgavesettet består av 7 sider inkludert denne forsiden, og er inndelt i tre deler. Det er på hver del angitt hvor stor andel denne teller av totalen. Det er ikke gitt at alle deloppgavene innefor en hoveddel teller like mye. Karakter fastsettes på basis av en helhetsvurdering av besvarelsen. På alle spørsmål er det viktig at du svarer presist. Dette fordi det er forholdsvis dårlig tid, men også fordi måten du besvarer et spørsmål på vil være med på å vise hvor godt du behersker temaet. Husk at hensikten er å vise sensor at du forstår temaet, ikke skrive en "håndbok". Du bør fokusere spesielt på at det du skriver gir mening og ikke bare er "fyllmateriale". Felles for alle oppgaver er at det ikke er noen "ro-poeng" å hente. Du kan ha svart mye tekst uten å få noe uttelling eller svart lite og få full uttelling. Uttellingen avhenger av kvaliteten på svaret, og ikke mengden. Til mange oppgaver står det spesielle instruksjoner til hvordan du skal svare. Disse er skrevet i bold med understreking. Til enkelte oppgaver er det også i en grå boks gitt et eksempel på hvordan du skal presentere svaret. Noen spørsmål bes besvart som punktlister. Prøv her å strukturere svaret slik at hvert punkt handler om ett tema/element. NB! Det er svært viktig at du skriver slik at det er lett å tyde/forstå for sensorene. Dersom man under sensur ikke klarer å tyde/forstå hva som står skrevet, får man ikke uttelling for disse delene av teksten. Takk for et hyggelig semester, og god juleferie:-) Lykke til! Sensurdato: 17/ Karakterene er tilgjengelige for studenter på studentweb senest 2 virkedager etter oppgitt sensurfrist. Følg instruksjoner gitt på: Side 1 av 10

2 Del 1: Påstander (20 %) I besvarelsen din skal du på denne delen skrive entydige svar (sant/usant) på formen: 1: Sant 2: Usant osv.. Vær nøye med at det ikke blir noen uklarheter om hva du har svart på de ulike oppgavene. Eventuelle "helgarderinger" teller som feil svar. Mener du det er tvetydigheter eller at påstanden er upresis, så skriv tydelig de to måtene du ser å lese påstanden på, og hvilke av mulighetene du anser som sann/usann. Dette skal det imidlertid IKKE være behov for å gjøre slik oppgavesettet er ment utformet. NB! Feil svar teller tilsvarende negativt, så om du ikke kan svaret er det ikke lønnsomt å gjette. 1. "CSS3 Web Fonts" er et sett på 12 fonter (bl.a. Arial, Times New Roman m.f.) som er sikre å benytte på web, da alle nettlesere skal ha de installert som standard. USANT 2. For å sikre en problemfri overgang er det ikke mulig å fjerne tagger fra HTMLstandarden i nye versjoner. HTML5 inneholder derfor alle tagger som HTML4 hadde, men selvsagt også en del nye. USANT 3. Ettersom Ogg Theora er en integrert del av HTML5-standarden, så er dette det eneste videoformatet man trenger på nett. Alle nettlesere som følger standarden plikter å støtte dette formatet. USANT 4. Selv om stort sett alle nettlesere støtter HTML5, er ikke standarden ferdig. Med andre ord følger nettleserne kun et utkast til endelig standard. SANT 5. CSS dukket opp som et tillegg til HTML3, og har etter dette gått hånd i hånd ved at HTML3 krevde bruk av CSS1, HTML4 krevde bruk av CSS2 og HTML5 krever bruk av CSS3. USANT 6. Muligheten for bilder i CSS er på sikt ment å erstatte HTML-taggen <img> helt. Inntil standarden har satt seg er det valgfritt hvilken teknologi man benytter. For å være mest mulig fremtidsrettet bør man imidlertid alltid benytte CSS til å sette inn bilder. USANT 7. I forbindelse med floating som posisjoneringsteknikk er det mer riktig å oversette det engelske ordet "clear" med "gå klar av" enn "tømme". SANT 8. Ettersom man har innsett at det er umulig å lage semantiske tagger for alle typer innhold, ønsker man i stadig større grad å benytte div'er med en satt id isteden. På den måten kan man ha en ubegrenset mengde med semantikk i websiden. F.eks. vil på sikt tagger som <main>, <footer> og <header> bli erstattet av <div id="main">, <div id="footer"> og <div id="header">. USANT Side 2 av 10

3 9. Etter hvert som man så utfordringen med at det ikke finnes noen "standard" for hva utviklere benytter som størrelser på websider i media queries, er man i ferd med å gå bort fra dette og heller innføre handheld som en slags standardisering for mobiltelefoner og tablets på samme måte som print er for papir. Vi får derfor kun medietypene screen, print, handheld og all å velge mellom i tiden fremover istedenfor å selv sette avgrensninger på størrelse til mediet. USANT 10. Dersom vi gjør endringer på en webside i forhold til SEO må vi ofte vente flere minutter (i helt spesielle tilfeller helt opp til en time) før vi ser resultater av dette i en søkemotor. USANT 11. Dersom vi lar innholdet på en webside være helt konstant over lengre tid, vil vi alltid havne på samme plassering i søkemotorenes rangering så lenge ikke søkemotorene endrer sine rangeringsalgoritmer. USANT 12. PHP egner seg best til validering m.h.p. sikkerhet, mens JavaScript egner seg best til validering m.h.p. brukeropplevelse. Ofte kombinerer man de to for å oppnå begge. SANT 13. Med "responsive web design" mener vi at websiden inneholder programkode (f.eks. JavaScript) som gjør at websiden "responderer" på ting brukeren gjør på siden slik som å klikke på knapper eller holde musepekeren over menyer. USANT Del 2: Kortsvar (30 %) Oppgave 2.1 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>. Husk at en tagg kan ha andre tagger "inni" seg. Det er kun taggen som matcher selve boksen som du skal angi. Prøv å tenke semantikk så sant det er mulig. Svar ved å skrive navn på felt og tagg: A: <p> B: <h1> Side 3 av 10

4 Osv... A: <header> B: <nav> C: <main> (((eller til nød <section>/<article>)) D: <aside> (((eller til nød <section>)) E: <aside> (((eller til nød <section>))) F: <footer> G: <div> eller <section> Dette er en oppgave uten100% fasit, så andre svar bør også godtas om like fornuftige Oppgave 2.2 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. Angi kun nummeret til punktene som du mener er riktige i din besvarelse: Svar: 2,4,7,9 og Sjekker at det kun er benyttet gyldige tagger og tilhørende attributter. 2. Sjekker at tabeller ikke er benyttet til layout. 3. Sjekker at linker ikke er døde (at det de peker til finnes) og at bildefiler som det blir referert til i img-tagger eksisterer. 4. Sjekker at riktige semantiske tagger er brukt i forhold til innholdet. 5. Sjekker at strukturen i koden er korrekt (dvs. at tagger avslutter i riktig rekkefølge osv.) 6. Sjekker at koden er riktig indentert. 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 body-tag osv.) 9. Sjekker at siden er tilpasset en rekke kriterier i forhold til SEO (f.eks. at title ikke inneholder med enn 70 tegn, at alle bilder har alt-tekst og at menyer er bygget med listepunkter) 10. Sjekker at websiden ikke tar for lang tid å laste (dvs. for store bildefiler, for mye multimedia osv.) Svar: 1, 5 og 8 (ut over dette er noen av de andre "nesten riktige" og noen "helt feil") Oppgave 2.3 Du har følgende HTML-kode (kun body vises): <body> <div id="dela"> <h1>a</h1> <p>a1</p> <p class="t">a2</p> <p class="t">a3</p> <p class="t">a4</p> </div> Side 4 av 10

5 <div id="delb"> <h1>b</h1> <p>b1</p> <p class="t">b2</p> <p class="t">b3</p> <p class="t">b4</p> </div> </body> (fortsetter neste side) Skriv CSS-selectors som matcher taggene med følgende innhold: a) A, B h1 b) A1, A2, A3, A4, B1, B2, B3, B4 p c) A1, A2, A3, A4 #dela p d) A2, A3, A4, B2, B3, B4 p.t (evt..t) e) A2, A3, A4 #dela p.t (evt. #dela.t) f) A, A1, A2, A3, A4, B, B1, B2, B3, B4 h1,p For alle #dela, kan man skrive div#dela (noen kan ha laget mer kompliserte selectors, om de ikke forstod det med at websiden aldri vil bestå av mer innhold... Så lenge de ikke er "for kompliserte" gir vi full pot. ) Du kan anta at websiden aldri vil inneholde noe mer/andre data enn det som er der nå. Svar ved å skrive oppgavebokstav og selve selectoren (altså ikke { og } med innhold ): a) img b) div img osv... Oppgave 2.4 Hvilke feil ser du ved følgende kode (en samling av feil som ble gjort på prosjekt 1). Du skal vurdere koden ut i fra HTML5 skrevet i XML/XHTML-stil 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. NB! Du skal svare på oppgaven som en ryddig punktliste, der én feil er ett punkt. Dersom samme feil gjentar seg flere steder, kan du dekke alle feilene i samme punkt. Angi også hva som ville være riktig dersom dette ikke går frem av feilbeskrivelsen. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <header> Side 5 av 10

6 <h1>logo og tittel</h1> </header> </head> <h1>testside</h1> <p> Hei på deg. Se på bildet mitt: <img src=bilde.psd width=344 height=226> </p> <br /> <br /> <p> Nok en paragraf </html> I hvert fall følgende: <header> får ikke stå i <head> mangler <body> (Ser at teksten " Se kun på feil ved den koden som faktisk er der." kan forvirre ang. denne. Body må være der for å få et korrekt dokument, som var spørsmålet) <br /> brukes for å lage space, noe CSS burde ha gjort (ikke noe krav om at de har skrevet CSS-kode for å vise hva som er riktig her) mangler en </p> mangler alt-attributt på bildet width/height på bildet skulle vært gjort via CSS (ikke noe krav om å skrive CSS her...) Attributtene skulle hatt " og " psd er ikke noe bildeformat for nett. mangler / til slutt i img-taggen Indenterign (ikke direkte feil, men "bra ting å gjøre") Side 6 av 10

7 Del 3: Tekstsvar (50 %) I løsningsforslaget er kun det mest sentrale listet opp. Dette er ikke fullgode svar for en toppkarakter. Oppgave 3.1 a) Forklart kort, og så pressist som mulig, hva microdata er. Microdata er annotering av informasjonen. Man forteller med andre ord hva ulike deler av teksten er (navn, adresse osv) og i hvilken setting (Person, Event, CD osv). Selve annoteringen gjøres ved å inkludere nye attributter i de allerede eksisterende HTML-taggene, samt linke til et vokabular som forteller "settingen" b) Hvilken overordnet ide/prosjekt/målsetning skal microdata bidra til? Microdata er en del av HTML5 og er ment å være en konkret teknikk for å nærme seg en semantic web. Dersom flere benytter microdata kan vi forvente å få smartere søkemotorer som finner informasjon/svar ut i fra hva vi faktisk leter etter. Det vil også dukke opp nye tjenester (slik som prissammenligninger osv). Også nettlesere kan tenkes å få nye tjenester der man f.eks kan dra ut eventer, kontaktinfo osv fra nettsider og over i kalendere, adressebøker osv. (Her vil nok mye av forklaringen på hva microdata er også befinne seg i b. Derfor er det ikke sikkert at a er "godt nok", men at man allikevel får full score her pga b..) Oppgave 3.2 a) Forklar kort, og så pressist som mulig, hva RSS er. RSS er et format for å presentere innhold på websiden lett lesbart for maskiner. Formater er bygget på XML og er standardisert. Man lager et RSS-dokument i tilegg til innholdet som alt er på siden. b) Hva benyttes RSS til av vanlige brukere? Man kan samle mange RSS-feeds fra ulike websider og ha et overblikk i en RSS leser. Dermed slipper man besøke hver enkelt webside for å holde seg oppdatert c) Hva benyttes RSS til av søkemotorer? Søkemotorer kan benytte RSS som et slags sitemap for å få oversikt over et webområde, samt lettere kunne oppdage nye saker. Alternativ til XML-Sitemap. Oppgave 3.3 Class-attributtet til HTML-tagger kan ta flere klassenavn ved å skille klassenavnene med en space: <p class="test1 test2 test3"> Hva er hensikten med å benytte multiple class istedenfor å lage en ny klasse som inneholder alt det man trenger? * Vi kan lage kombinasjoner av eksisterende klasser enkelt * Enkelt å legge til/fjerne tilleggsstiler til en tagg * Vi unngår å repetere deler av klasser og få redundant kode Side 7 av 10

8 Oppgave 3.4 Forklar den praktiske forskjell på følgende to måter å linke inn et print-stilark 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 /> Alternativ 1 lager en "helt ny" stil for print. Alternativ 2 lager en "endring" i forhold til defaultarket. Alternativ 1 er å foretrekke når forskjellene er så store at det er lettere å begynne "på nytt". Alternativ 2 gjør at vi kun trenger oppdatere "grovdesignet" ett sted. Oppgave 3.5 a) For hvilke grupper brukere (en vid definisjon av ordet) ønsker vi å øke tilgjengeligheten når vi snakker om tilgjenglighet og websider? Svar som en punktliste. (Dette blir selvsagt ikke noen absolutt og endelig liste, men få med de viktigste) Opplagt: blinde, svaksynte (døve) OG: dysleksi, eldre, barn, begrensede "mentale evner", språk Men også: Nettlesere/OS (ulike typer/versjoner), hardware (mobiltelefoner osv), nettilgang (fiber vs 3G) osv.. b) Hva er WAI i forbindelse med tilgjengelighet? (Her er det ikke hva forkortelsen står for som er det viktige, men hva som ligger i begrepet) Standard for utforming av websider m.h.p. tilgjengelighet (W3C). Tar for seg problemområder, tester og løsninger. Inneholder også forskjellige "grader" (A til AAA). Har tre deler: utviklere av websider, nettlesere og webediterignsverktøy Oppgave 3.6 Ta for deg følgende "generelle" utdrag av en HTML-fil med JavaScript (topp/bunn av koden vises ikke): <script> window.onload = oppstart; function oppstart() { //masse kode her som genererer data Side 8 av 10

9 } </script> </head> <body> document.getelementbyid("resultat").innerhtml = "Masse data generert av JavaScriptet"; <div id="resultat">xxx</div> I kodeutdraget er det satt inn XXX som en markering. Bør det i det hele tatt stå noe her (hvorfor/hvorfor ikke), og i så fall hva? Her bør det stå en feilmelding og evt. et "defaultresultat". Vil kun vises for søkemotorer som ikke tolker JS og for brukere som ikke kan kjøre JS.. Her kan man vel også gi noe uttelling for "ikke noe", dersom kandidaten godt forklarer at koden erstatter innholdet i taggen. Synes allikevel det er ganske opplagt at man bør ha nevnt dette med feilmelding/defaultverdi/backupløsning for å få full score. Oppgave 3.7 Hvilke konkrete råd om sikkerhet vil du gi til de som skal sette opp og drifte et CMS? Begrunn rådene med hvilke trusler de skal motvirke der det ikke går tydelig frem. Svar som en punktliste i kortfattet form. Avanser passord Kontroll med brukere Ikke gi bort rettigheter til folk med liten forståelse Benytte noe annet enn defaul (f.eks admin) som rotbruker Sørge for å holde CMS'et oppdatert Oppdater serveren (f.eks PHP, apache, database osv) Vær kritisk til moduler/plugins/templates du installerer Brukt hest en "testinstallsjon" og en "prosuksjonsintallasjon" Vær svært skeptisk til å bruke systemet/backup etter et hackingangrep. Ligger ofte bakdører inne. Oppgave 3.8 Hvilke faktorer(/elementer/parametre/informasjon) for en webside bruker en søkemotor i rangeringen? (Dette blir selvsagt ikke noen absolutt og endelig liste, men få med de viktigste) Svar som en punktliste i kortfattet form. Side 9 av 10

10 - tittel - linker til siden (fra hvem + tekst) - linker internt på siden (tekst) - nøkkelord i siden - domenenavn - filnavn - struktur - unikhet på innhold - site authority - osv.. Side 10 av 10