Webutvikling oblig 1 Marius Hanssen

Transkript

1 Webutvikling oblig 1 Marius Hanssen Oppgave 1 arngren.net er en rotete nettside, enkelt sett forpestet med et uorganisert layout og en kode så grov at jeg ikke skjønner hvordan de klarte å finne en så vanskelig måte å lage nettstedet på. Selve nettsiden i en browser ser ut til å være fremtidssikker, da man sikkert må ha en skjerm med 4k ultrahd oppløsning for å få plass til vidden av siden i en skjerm uten å zoome ut. Burde heller ha gått for en responsiv løsning, noe som selvom det ikke er optimalisert for alle enheststyper er standard oppførsel for html sider om man ikke låser vidden på ting. Den er fylt av overlappende elementer, har ingen fornuftige kategoriseringsalternativer og ser ut til å være fylt av tilfeldige linker og cliparts spredd rundt på nettsiden. Det første som slår meg når jeg inspiserer kildekoden er mangelen på en dokumenttype ærklering (!DOCTYPE something something). En nettleser, la navn være unevnt, er veldig forvirret på grunn av dette. Neste feil ligger innen title i head. Ingen nettleser har plass til denne tittelen på fanene sine eller lignende. Kunne godt skrevet arngren webbutikk i stedet for alle produktkategoriene som selges her, da folk bare får se de fem-seks første av de. Er også en mystisk meta tag her, er litt usikker på hva den er for, men tror det har noe med semantikk for søkemotorer å gjøre. Det neste som slår meg er at bakgrunnsbilder og cliparts er linket inn fra eksterne nettsider. Om de blir fjernet fra disse eksterne stedene, vil ikke stilelementene til nettstedet fungere lenger. Når vi snakker om stilelementer Nettstedet tar ikke bruk av eksterne stilark, men putter i stedet det den bruker av stilelementer rett inn i tags på nettstedet. De kunne gått for en ryddigere og lettere modifiserbar løsning selv uten eksterne stilark, som å skrive det man ville skrevet i et CSS dokument i en style tag i head eller noe. I stedet møtes jeg med det jeg antar er hundrevis av div tags med individuelt kodet stil, noe som må ha vært tidskrevende og gjør det vanskelig å oppdatere siden. Disse div taggene er fylt med andre individuelt stiliserte div tags og en mystisk bruk av table uten noe tegn til tabeller noen plass. Tror personen bak denne nettsiden kunne trengt en innføring i nav, ul og li. Kan nesten tenkes at det ville vært lettere for en person som er så glad i divs å holde seg ekslusivt til de i stedet for å misbruke tables så grovt. Ikke at div misbruk er noe bedre. Når jeg graver lenger inn i disse divene, finner jeg flere eksterne linker. Denne gangen til egen nettside, i stedet for å bruke en lokal filsti. Dette er det meste jeg klarer å forstå ut av denne forbløffene tragiske nettsiden, som jeg bare må anta er en slags parodi eller eksempel på dårlige nettsteder, og ikke en ekte nettbutikk, eller en gammel og glemt nettside fra lenge siden. Jeg føler

2 at nettleseren min fortjener pensjon etter å ha jobber hardt for å rendre dette makkverket av ett nettsted. Jeg gir den alikevel pluss for å ha en blinkende julebanner på bunnen av siden med minst to menn ridene på kameler i snøen, som jeg antar kanskje er to av tre vise menn på nordpolen? Oppgave 2 HTML <h1 class= header > dette er overskriften til en side </h1> <h2 class= header > dette er en undertittel> <article> <h1 class= article > Dette er overskriften til en artikkel på en side</h1> <h2 class= article > Dette er en undertittel </h2> <p> så kommer noen paragrafer og sånt </p> </article> CSS /*header */ h1.header { font-size: 25px; h2.header { font-size: 18px; /* article */ h1.article { font-size:15px; h2.article { font-size:12px;

3 Oppgave 3 HTML <body> <div class= box > <h1 class= header > dette er overskriften til en side </h1 <article> <p> en stygg paragraf er det dette er. </p> </article> </div> </body CSS body {padding-left:5%; padding-right: 10px; margin-top:auto; margin-bottom: 3cm; border: 3px solid black; header { padding: 0px; p { font-size: 10px; padding-left:5%; padding-right: 10%; border: 25px solid navy; text-align: left; Oppgave 4 Fant denne perlen på forsiden til hiof.no, der vi ser bakgrunnsbilder (de som er blurret ut i bakgrunnen) direkte skrevet inn i html dokumentet. De har ingen verdi i forhold til innholdet på siden, og er der på et rent aestetisk grunnlag.

4 Oppgave 5 taggene <nav>, <ul> og <li> kan brukes på mange måter i en nettside, for eksempel med med en navigasjonsmeny låst på siden av skjermen (som helst skal bli en toggled dropdown sak via media queries på små skjermer) og en slags innholdsfortegnelse i en artikkel som bruker href til å linke til andre punkter nedover siden (som på wikipedia artikler). Om man vil bruke nav ul li på flere steder på en side kan det være ideelt å gi de hver sin <div> med et spesielt navn og en egen stil via klasser og en child-of den idivinduelle klasser i CSS, så de kan plasseres og stiliseres individuelt. Oppgave 6 HTML <body> <div id= box > <h1 class= header > dette er overskriften til en side </h1 <p> en stygg paragraf er det dette er. </p> </div> </body CSS div#box { position: fixed; left: 10px; top: 20%; header { position: relative; left: 5cm; margin-left:auto; margin-right:auto; p { float:left; bottom:5px; h1 { position: absolute; font-size: 50px;

5 Oppgave E1 A: <h1> B: <nav> <ul> <li> C: <article> D: <aside> E: <aside> F: <footer> G: <main> Oppgave E2 1, 5, 8, 9 Oppgave E3 og <h1> er plassert inne i <head>, og <h1> skal være innholdet i siden, derav ting i <head> beskriver hvordan innholdet skal leses og diverse annen metadata. og <h1> skulle vært plassert i <body> en plass. koden mangler en <body>, som skulle vært wrappet rundt alt innholdet som vises den andre <h1> taggen skulle vært wrappet i en. den sistnevnte <h1> taggen skulle antakelig ha vært en <h2> tag, siden den ser ut til å være en undertittel. bildelinken i source mangler paranteser (<img src= bilde,psd >, ikke <img src=bilde.psd > <img> (og generelt html) støtter ikke psd filer såvidt jeg vet <img> bildet mangler en alt attributt (<img src= bilde,psd alt= alt tekst >) width og height i <img> skal være i en i en style attributt ( <img src= bilde,psd alt= alt tekst style= width:344;height:226 > <br> skal ikke lukkes som deet er gjort i oppgaven (<br /> ) Kunne også vært fornuftig om <br> ble erstattet med CSS, kanskje med en p.irstof-type margin-bottom for å øke avstanden mellom bunnen av den første <p> taggen. den siste <p> taggen er ikke lukket med en </p> Oppgave E4 1. Inline: stil som en slags attributt inne i en html tagg 2. internal: bruk av <style> tag i html dokumentes <head> 3. external: et eksternt stildokument som er linket fra inne i html dokumentet( i dag brukes css. Fraser det slik siden det kan komme en tid der vi bruker en annen form for eksterne stilark.) 4. User: Eget stilark implementert fra brukersiden(gjerne via en plugin) 5. Browser: Stilarket til en browser, som ligger lokalt/innebygd i programmet. Kanskje en bedre oversettelse av cascading style sheets er sammenslående stilark? Uansett man bruker mange forskjellige CSS nivåer, slåes de sammen og leses som ett dokument av nettleseren din, basert på hvilken rekkefølge de leses

6 i. Om man i <head> linker et ekstern stilark, leses først det stilarket inn, deretter leses det gjennom HTML dokumentet. Om det finnes et stilnivå her, som i en tagg, leses dette etter stilarket, og jeg tror det vil overskrive hva som står i stilarket, siden det ble lest sist. Oppgave E5 Ikke bare brukes mange av de samme tags gjennom mange versjoner av html, men gamle browsere kan lære ny funksjonalitet via ekstensibiliteten til for eksempel en javascript fil man kan linke til i <head> før resten av siden leses. Jeg forstår det som at nettlesere som kun støtter gamle html lesere også vil ignorere tagger den ikke forstår, så om man i de nye taggene integrerer en noe gamle nettlesere forstår, vil den bare lese den taggen, som i den nye picture taggen illusrert i oppgave E6. <picture alt= > <source media=( min-width:45cm) srcset= something.jpg > <! dropper en nesten lik som taggen over her > <img src= small-1.jpg > <! dette er linjen en gammel browser vil lese > Oppgave E7 Box Model er sentralt i CSS fordi det er det som brukes for å manipulere størrelsen dedikert til innholdet og størrelen som omringer innholdet til noe i html, en veldig viktig del av hvordan man lager layout. Oppgave E8 Marerittscenario for internet i dag hadde vært om et selvskap hadde på mystisk vis fått retten til å sette alle web standarder for html, css og diverse protokoller, i stedet for at vi bruker de åpne standardene vi ser i dag. Om for eksempel Bill Gates hadde likt internet tilbake i 1995 eller noe og hadde dratt i de riktige trådene, kunne den eneste platformen for å se internet ha vært Windows, og den eneste nettleseren kompatibel med internet kunne vært Internet Explorer Oppgave E9 En stor ulempe med veldig strenge standrader ville vært at man ikke nødvendigvis ville hat fleksibiliteten til å utvikle systemer og strukturer som spesifikt passer ditt prosjekt og din logikk. Fordeler ville vært at nettlesere ikke måtte gjettet seg til hva som skal vises når det er en feil i koden, og de ville muligens kunne optimaliseres for raskere fart og mindre minnebruk rundt en fast standard. Det ville også vært lettere for andre utviklere å ta over prosjektet etter deg. Oppgave E10 CSS bilder brukes for stilelementer på hjemmesiden, som bakgrunnsmønstre, parallax bilder, egne ikoner o.l

7 Bilder i html skal være relatert til, eller være selve innholdet i en nettside. For eksempel ville det vært naturlig å bruke <img> for å sette opp et bildegalleri, og css for å kontrollere hvordan disse bildene distribueres over nettstedet. (enda lettere med litt fiffig php og javascript som automatiserer linkeprossessen for deg..)