Oppgave 1: Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Svar: Ved første øyekast har utvikleren av nestesiden plasser altfor mange div elementer rundt om på startsiden, dette fører til at det blir veldig oversiktlig for leseren, med tanke på å navigere seg rundt. Utvikleren har også valgt et utrolig bredt format på siden, med en størrelse på 3020 (bredde)* 2575 (høyde). På grunn av manglene oppdateringer, eller mangel på oversikt, så er det angivelig jul hver dag på siden til arngren. Oppgave 2: Lag et eksempel som illustrerer nytten av/hensikten til multiple classes. Nytten av mulitple classes, er at du kan ta et element og kombinere dem med andre elementer. Css: HTML + Nettside: 1
Oppgave 3: Lag eksempler der du tester ut box model-prinsippet og flest mulig av cssegenskapene som gjelder box model. Eksemplene skal ikke ha noe fornuftig innhold. Her har jeg vært inne i css, og endret på box modellen. Med tank på margin, border, width, padding og border-radius. 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. Det som er ulempen med å gjøre store deler av «innholdet» i css, er at ordene du vil eksponere kanskje blir borte under søkemotorenes prosess. Ved at man foreksempel lager en logo med feks firmanavnet til bedriften på. Dette plukker da ikke søkemotorene opp, og det blir behandlet som et bilde (jpeg,png). Andre eksempler er at man ser flittig bruk av <br> taggen (linjeskifte). Særlig på store nettsteder som, vg, dagbladet og nrk. Dette fører til at settninger blir ufullstendige og meningsløse. Feks: Her ser man fort at «nyhetene» ikke gir noen mening. Dette er de «hotteste» nyhetssakene akkurat for øyeblikket 7.9.15. Oppgave 5: Beskriv tjenester/funksjoner du selv kommer opp med som bruker strukturelle tagger på en fornuftig måte. En tjeneste som er svært populær er facebook. Her har man en flott navigasjons meny + at det man søker på kan man fort komme seg ut igjen av, ved hjelp av menyene. Så her hjelper altså nav taggene 2
og søkemotoren ved å navigere frem og tilbake. Man har også eksempler som google maps, her får du valget med å skrive ut hele siden, inkludert menyer footere + html adressen. Men her har du hvertfall mulighet til å bare gjøre utskrift av det ønskede innholdet, nemlig kartet. For er det egentlig vits å skrive ut menyer? Oppgave 6: Lag flere små eksempler som illustrerer/tester ut de ulike posisjoneringsteknikkene/måleenhetene i CSS. Eksemplene skal ikke ha noe fornuftig innhold. Måleenhetene i css er: 1. Ex 2. Em 3. Px (denne taggen utvider eller minsker border, bilder eller tekst til at den tar flere pixler på skjermen.eller minsker antall pixler på feks et bilde eller en bestemt text box) 4. Vh 5. Vm 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>. 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. A = <header> B = <Nav> C = <Article> D = <Div> E = <Div> F = <Footer> G = <Background> 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, 4, 5, 8, 9 3
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/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. - <Head> H1 tag inne i head <head> - Mangler avslutte </body> tag. - Avslutter ikke paragrafen <p> etter linjeskifte taggen. - Benytter seg av <h1> taggen flere ganger. - <Br> taggen er brukt utenfor paragrafen, derfor får den liten nytte. 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. Inline: Brukes når man ønsker å endre et konkret element, foreksempel en h1 tag. Her kan man endre, farge størrelse, plassering osv, men man skal være påpasselig med å blande kode med layout. Internal: Her legger man koden inn i <style> tag inne i <head> taggen, og vi bruker internal når vi ønsker å endre 1 side. External: Et eksternt ark som inneholder alle CSS kodene, man kan derfor bruke kodene på flere sider, ved å referere til dem i head taggen i HTML dokumentet. User: Her broker man sitt eget stylesheet for å se på nettsider istedet for å bruke nettsiden eller designeren sin stylesheet, dette kan gjøre det enklere for noen å lese nettsider. Browser: Man bruker den spesifikke browsern sin stylesheet. 4
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? Det som menes med at HTML er bakover kompatibel, er at HTML5 vil fungere på nettlesere som ikke støtter HTML5. Hvis nettleseren finner innhold/koder den ikke forstår, blir dette bare hoppet over, men den viser fortsatt det som sto inni koden. For eksempel nav og article taggen vil den ikke forstå, men den viser fortsatt innholdet i disse taggene. <h2>velkommen til nettavisen</h2> <p> Bussvelt på E-18 </p> <article> Her vil man da altså få samme innehold som i en nettleser som ikke støtter nyeste versjon av html. Men nettleseren plukker ikke opp article taggen sin funksjon. </article> CSS er bakover kompatibel med tidligere versjoner. 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? Det som er positivt med en Picture tagg, er at elementet kan spesifisere flere kilder I en img tagg. Nettleseren som du benytter, enten det er gjennom nettbrett, mobil, tv eller pc, vil alltid finne det bilde som best tilpasset I forhold til layout på siden din. Oppgave E7: Hva mener vi med box model i CSS, og hvorfor er dette så sentralt? Alle elemente I HTML kan bli sett på som bokser. I Css, blir box modellen brukt når vi snakker om design og layout. Css box modellen er hovedsakelig en box som surrer seg rundt html elementene, og de deles gjerne inn i disse gruppene. 5
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. Det som er viktig å trekke frem er at nettet er nøytralt. Det er åpent for alle (hvis ikke man lever under et diktatur) og innholdet prioriteres kun etter hvor optimalisert hjemmesiden er for søkemotorene. Noe som gir den store bestanden av nettsider mildt sagt varierende innhold. Et eksempel som Tom Hàne trakk opp i en forelesning, var da alle øyne var rettet mot Pamela Andersson, og hvor store og mindre bedrifter bare kunne innflettet hennes navn inn på nettsiden, for å skaffe seg flere treff gjennom søkemotorene. 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 har en optimal ytelse, det går rask å koble seg til nettsiden og det gir en bedre opplevelse for brukeren. Ulemper: Det gjør det vanskeligere for utviklere å få til en nettside som er 100% korrekt. Fordi validering sidene kan finne mye smårusk som egentlig ikke har noen mening, men som kan være tidkrevende å få ryddet opp i. Her spiller også kunnskap og kompetanse en rolle med tanke på nye standarder og koder som dukker opp. 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 (til hva) vil man bruke hver av metodene? Forskjellen på disse metodene er at man skiller på innhold (HTML) stil (Css). For eksempel, hvis man skal ta utskrift av en side og man vil at bakgrunnen eller logoen til bedriften skal være med, så bruker man IMG (HTML). Men man bruker CSS når bilde ikke skal være en del av innholdet. Dette kommer heller ikke med i utskriften av siden. 6