Oblig 1 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 arngren.net: 1. Nettsiden er SYKT uoversiktlig! 2. Det er en veldig tung side, det tar lang tid å laste inn bildene med vanlig netthastighet. 3. Nettsiden passer ikke til skjermvinduet, man kan scrolle til siden. 4. Ingen god løsning for bestilling og betaling av varer. 5. Forskjellige farger og størrelser på alle lenker, dette blir bare forvirrende. 6. Noen elementer ligger oppå hverandre 7. Juledekorasjon nederst på siden. 8. Veldig rotete lang kode! 9. Ikke stilark, alt av stil er kodet direkte inn i HTML, internal og inline. 10. Hvert enkelt element har egen style kode med egen absolutt posisjon i egen div og table tag html er altså brukt til design. 11. Unicode feil, kan ikke se æøå. 12. Title er utrolig lang, dårlig forsøk på search engine optimization? 13. 973 feil og 33 advarsler i W3C validator (HTML 5) 14. ALLE produktene har hver sin egen.html fil, og med dette blir det sinnsykt mange sider å forholde seg til (fra en utviklers perspektiv).
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 fiskes. Diskuter spesielt tvilstilfellene www.arngren.net er selvsagt et godt eksempel på dette. På denne siden benyttes inget stilark, alt er internal og inline skrevet i koden. Her er alt av design plassert på siden med <table> taggen. Et annet eksempel er meny navigasjonen til nettsiden www.vestlund.no Visuelt ser den slik ut; og dette er koden bak: <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr style="lineheight:1px"><img src="vestlund_left.png" border="0" height="27" width="2"> <a href="javascript:;" onmouseout="tidymenu(event);" onmouseover="openmenu(event, 'vestlund_b1',2,3882129,16777215);setgraphic(event, 'vestlund_b1_over.png');return <img src="vestlund_b1.png" border="0" height="27" width="78"> </a> <a href="javascript:;" onmouseout="tidymenu(event);" onmouseover="openmenu(event, 'vestlund_b2',2,3882129,16777215);setgraphic(event, 'vestlund_b2_over.png');return <img src="vestlund_b2.png" border="0" height="27" width="78"> </a>
<a href="javascript:;" onmouseout="tidymenu(event);" onmouseover="openmenu(event, 'vestlund_b3',2,3882129,16777215);setgraphic(event, 'vestlund_b3_over.png');return <img src="vestlund_b3.png" border="0" height="27" width="78"> </a><a href="javascript:;" onmouseout="tidymenu(event);" onmouseover="openmenu(event, 'vestlund_b4',2,3882129,16777215);setgraphic(event, 'vestlund_b4_over.png');return <img src="vestlund_b4.png" border="0" height="27" width="78"></a><a href="javascript:;" onmouseout="tidymenu(event);" onmouseover="openmenu(event, 'vestlund_b5',2,3882129,16777215);setgraphic(event, 'vestlund_b5_over.png');return <img src="http://www.vestlund.no/vestlund_b5.png" border="0" height="27" width="78"> </a> <img src="vestlund_right.png" border="0" height="27" width="2"> </tr> </tbody> </table> Istedenfor å bruke <table>, bilder og inline javacript kunne dette blitt løst enkelt med <ul> og <li> lister, og external CSS. På den måten blir koden mye bedre strukturert, mer lesbar, raskere å laste inn, og enklere å gjøre endringer på om det skulle være et ønske. Oppgave 5 Beskriv tjenester/funksjoner du selv kommer opp med som bruker strukturelle tagger på en fornuftig måte. Videostreamingstjenerser, som for eksempel YouTube eller Netflix. For slike tjenester er det aktuelt å bruke semantiske og strukturelle tagger som; <header> <nav> <main> <section> <aside> <details> <time> <footer>
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> B: <nav> C: <main> D: <aside> E: <aside> F: <footer> G: <wrapper> 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, 3, 5, 8, 9. 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> og tilhørende <h1> skal ikke ligge i <head>, men i <body> Det finnes ingen <body> I bildelenken er verken bilde.psd, 344 og 266 satt i, bruk heller ikke width og height i html, skaler bildet i CSS. <br /> er brukt til design Den siste paragrafen er ikke avsluttet med </p>
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. Cascading er ordenen på rekkefølgen CSS stilen oversyrer andre stiler. For eksempel så er et external stilark en egen.css fil, men hvis man skriver css kode inne i selve.html dokumentet betyr dette at det er en internal css kode og da er stilen til internal som vises fordi internal ligger over external i rekkefølgen. 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 betyr at selv om HTML oppdateres og blir tillagt nye funksjoner så vil fortsatt gamle nettlesere kunne vise innholdet på siden, men ikke alle nye funksjoner, det samme gjelder CSS. 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? <picture> taggen vil da bli brukt som semantikk og kan hjelpe bland annet søkemotorer å enklere filtrere ut (eller å raskt finne) bilder på nettsiden. Det vil også bli enklere og fjerne bilder fra for eksempel printvennlige stiler av siden. Ulempen er at det er mer jobb å sette inn bilder og CSS blir dratt inn i HTML (Inntil videre).
Oppgave E7 Hva mener vi med box model i CSS, og hvorfor er dette så sentralt? Boxmodel i CSS er på mange vis hvordan CSS er satt opp, og hvordan essensen i det fungerer. Du har innholdet innerst, så padding, så border, og så til slutt marginer ytterst. 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. Hvis for eksempel ikke Tim Bernes Lee hadde fått lov til å jobbe med sitt prosjekt hadde det mest sannsynlig eksistert mange forskjellige standarder på nettet, og det hadde da vært mye vanskeligere å navigere og lage nettsider. Nettet kunne også ha blitt vesentlig mer kontrollert, og det hadde da ikke vært fritt frem for alle å ferdes på internett, og i hvert fall ikke gratis! 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".) Fordelen med 100% validering er at alle nettsider hadde fungert akkurat slik de skulle, og at de hadde fungert fra alle type media enheter. I tillegg ville all koding vært riktig strukturert. Det hadde også gått raskere å laste sidene fordi nettleserne ikke hadde måttet gjette på hva som var riktig å vise. Ulempen med 100% validering er at det tar mye lengre tid å kode websider, og det hadde da vært overaskende mange websider som ikke hadde fungert. Grunnen til at de fungerer i dag selv om ikke all kode er skrevet riktig i rett struktur er at nettleserne gjetter på hva som er riktig, og med det fungerer sidene.
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 {backgroundimage:url('logo.jpg');} Hva er den praktiske forskjellen på disse metodene, og når (til hva) vil man bruke hver av metodene? Hvis man legger inn bildet i HTML vil det regnes som innhold i siden, men hvis vi legger inn bildet med CSS vil det regnes som design av siden. Når bildet legges inn i HTML vil det være til rette for å laste ned og dele bildet, mens det ikke er så lett hvis bildet er lagt inn med CSS.