Oblig 1 Webutvikling av Jon-Håkon Rabben

Størrelse: px

Begynne med side:

Download "Oblig 1 Webutvikling av Jon-Håkon Rabben"

Karen Løken
8 år siden
Visninger:

Oblig 1 Webutvikling av Jon-Håkon Rabben Oppgave 2 og 3) http://www.it-stud.hiof.no/~jhrabben/boxmodel.html Oppgave 6) http://www.it-stud.hiof.no/~jhrabben/oblig1oppg6.

1 Oblig 1 Webutvikling av Jon-Håkon Rabben Oppgave 2 og 3) Oppgave 6) Oppgave 1) Siden tar lang tid å laste, grunnet for mange bildeelementer og bevegelige elementer. Siden skremmer nærmest bort kunder før de får åpnet siden skikkelig. Siden er uorganisert, med bilder som nærmest ligger over hverandre, og navigeringen er ikke gjort på noen god måte, og spesielt ikke med tanke på at den er såpass rotete fra før. Siden har dårlige fargekombinasjoner som ikke passer sammen, og et generelt dårlig og lite brukervennlig design. Siden har flere menyer, som fører til de samme tingene men ingen struktur på hvor de legger seg i siden. Det er et flertall av søkemotorer, og en veldig dårlig og lite sikker betalingsmåte som burde gjøre en hver kunde lite komfortabel med å gjennomføre et kjøp. Betalingssiden er også veldig dårlig på funksjonalitet da det er veldig vanskelig å føle seg sikker. Det bruket en julelayout hele året, noe som ikke passer for alle årstider eller anledninger. Etter en validering av html og css filene til arngren.net får man et sjokkerende resultat med hele 9477 feil. 1

Siden er uorganisert, med bilder som nærmest ligger over hverandre, og navigeringen er ikke gjort på noen god måte, og spesielt ikke med tanke på at den er såpass rotete fra før.

Her er et utklipp fra htmlkoden til siden, og her ser man at det er uorganisert og nærmest umulig å gå inn for å gjøre endringer, eller kunne forstå hvordan det hele fungerer sammen.

2 Her er et utklipp fra htmlkoden til siden, og her ser man at det er uorganisert og nærmest umulig å gå inn for å gjøre endringer, eller kunne forstå hvordan det hele fungerer sammen. Siden inneholder så mye kode at den nærmest er helt håpløs, dette er kun en brøkdel av den lange koden. Koden inneholder ingen innrykk, som gjør det til et totalt kaos. Og for den som skal sitte og lese dette i etterkant kan man nærmest gi opp der man startet. Oppgave 4) Denne siden får 90 feil ved en valideringssjekk. Koden er et ganske stort kaos, hvor alt av innhold, design og javascript er lagt inn i HTML-koden. Det er derfor ingen god måte de har brukt for å skille disse elementene. Om man skal finne fram i koden er det relativt vanskelig, selv om det er brukt kommentarer til å forklare en del av hva visse elementer er og betyr. 2

Og for den som skal sitte og lese dette i etterkant kan man nærmest gi opp der man startet. Oppgave 4) http://www.nhl.com/ Denne siden får 90 feil ved en valideringssjekk.

3 For at dette kunne vært gjort på en bedre måte kunne utviklerne brukt eksterne stilark for css og javascript, brukt innrykk for å få flyt i koden og brukt kommentarer hyppigere for at man lett skulle kunne finne fram. Oppgave 5) En funksjon som til enhver tid kunne kjenne igjen hva slags enhet man åpnet siden med, altså at man i HTML-koden hadde en funksjon som går på å kjenne igjen enheten, og deretter tilpasser alt av innhold og design deretter. På denne måten kunne vi hatt «smarte» HTML-koder som forstår hva slags enhet den skal tilpasse seg til, og derfor også slippe mange forskjellige funksjoner som gjør tilnærmet samme utførelsen ved at vi setter maks størrelse og minste størrelse på elementer osv. Man kunne brukt kun et fleksibelt CSS-stil ark som design for alle enheter med kun en enkelt funksjon. En annen funksjon eller tjeneste som kan være interessant for innehaver av siden vil kunne være en form for innhenting av informasjon om hvor i verden folk besøker fra, hva slags enheter folk bruker mest på siden, og deretter tilrettelegge og planlegge for videre utvikling og brukervennlighet for gode opplevelser ved besøk. Oppgave E1) A - <header> B - <nav> C - <article> D - <aside> E - <aside> F - <footer> G - <main> Oppgave E2) Alternativ 1, 3 og 8. Oppgave E3) Punkt 1 header-tagen er inni head-tagen Punkt 2 mangler body-tag 3

Oppgave 5) En funksjon som til enhver tid kunne kjenne igjen hva slags enhet man åpnet siden med, altså at man i HTML-koden hadde en funksjon som går på å kjenne igjen enheten, og deretter tilpasser

4 Punkt 3 - <br />-tagen kan gjøres i css Punkt 4 p-tag ikke avsluttet Punkt 5 feil filtype i image-tagen Punkt 6 image-tagen mangler en <a>-attributt. Oppgave E4) Inline - vi Inline style det er stilen som blir definert inne i et bestemt HTML element (<h1 style="color:blue;margin-left:30px;">dette er en overskrift<h1>) Internal det er stilen som blir definert inne i <style>-taggen, innenfor <head> seksjonen i HTML-siden. External - det er et eksternt stilark linket inn i HTML-koden som en ekstern CSS fil. User - når brukeren selv kan endre på stilsettet i nettleseren, ved at siden har flere stilark man kan velge mellom de som passer best. Browser - eller default, det er nettleserens standard på hvordan sider skal vises. De forskjellige nivåene av stilark overskrider hverandre i den rekkefølgen de er satt opp over. De forskjellige er til for at brukeren skal få et optimalt brukervenlig og godt resultat av siden. Først og fremst har vi disse forskjellige mulighetene siden folk er forskjellige, og har forskjellige behov. Noen vil kanskje at man skal ha en «standard» visning av alle sider, og velger dette i sin egen browser og tilpasser til sitt behov. Nettsider er ofte laget til en kunde, og skal følge visse retningslinjer som er gitt for å framheve produktet eller informasjonen siden inneholder. At vi da har external style-sheets vil dette gjøre det lett for en utvikler å kunne endre, legge til eller bytte mellom de forskjellige visningene av siden. Oppgave E5) HTML5 er bakoverkompatibelt, det vil si det har en doctype som alle nettlesere godkjenner. HTML5 vil kunne hente informasjon fra nyere HTML-versjoner, og hente mest mulig informasjon til browseren selv om den ikke støtter denne typen HTML. Man kan altså laste inn et HTML5 dokument i en eldre versjon av en nettleser uten at mye av informasjonen vil gå tapt. Det betyr da at nyere versjoner av HTML vil være bakoverkompatible med eldre versjoner av HTML hvis nettleseren ikke skulle kjenne igjen eventuelle nye tager vil den kunne vise informasjon fra siden, men ikke noen form for styling eller CSS. 4

blir definert inne i <style>-taggen, innenfor <head> seksjonen i HTML-siden. External - det er et eksternt stilark linket inn i HTML-koden som en ekstern CSS fil.

5 <picture alt= > </picture> <source media= (min-width:45em) srcset= large-1.jpg 1x, large-2.jpg 2x > <source media= (min-width:18em) srcset= med-1.jpg 1x, med-2.jpg 2x > <source media= small-1.jpg 1x, small-2.jpg 2x > <img src= small-1jpg > Dette er en ny tag, som er et forslag til å forbedre HTML5. Denne tagen ville ikke kunne blitt lest i en eldre versjon, men det ville kunne blitt hentet ut informasjon av bildet, f.eks tekst som sier hva det inneholder. Oppgave E6) Picture-tagen tror jeg kan bli en god løsning for framtiden, særlig når det settes stadig større krav til tilgjengelighet. At man kan velge hvilken størrelse bildet skal ha etter hvilken størrelse man har på skjermen siden vises på. Denne tagen gir kanskje litt mer arbeid med koden, men dette vil man få igjen for hvis det fungerer som det skal, tilgjengelighet blir et stadig større problem da skjermstørrelser og enheter er såpass variert, at det da stilles store krav til utviklere som vil nå alle brukere. Oppgave E7) Alle HTML-elementer kan betraktes som bokser. I CSS, er begrepet "boks modell" brukt når vi snakker om design og layout. CSS- boks modellen er egentlig en boks som flyter rundt HTML-elementer, og den består av: marger, grenser, at man kan ha luft mellom innholdet og det rundt(padding), og det faktiske innholdet. Boks modellen tillater oss å legge en ramme rundt elementer, og å definere mellomrom mellom elementer. 5

Denne tagen ville ikke kunne blitt lest i en eldre versjon, men det ville kunne blitt hentet ut informasjon av bildet, f.eks tekst som sier hva det inneholder.

6 Oppgave E8) Internett er mer eller mindre fritt, alt fra informasjon til personlige opplysninger kan legges ut. At internett er såpass fritt har gjort det til det store marked det er i dag. I tillegg er det tilgjengelig på de aller, aller fleste steder i verden. Det kunne vært annerledes om det hadde vært mer «konkurranse» mellom de ulike firmaene som i dag utvikler og viderefører internett om det blant annet kun hadde vært tilgjengelig for noen enkelte samfunn, folkeslag eller at det for eksempel kun var militært. At folk i dag kan gå inn på internett, følge med, lese nyheter, sport eller værmeldingen gjør at folk er mer oppdatert enn hva man hadde vært om man måtte vente til papirutgaven av avisen kom i posten. Folk er mer bevisst på ting som skjer andre steder i verden på grunn av den raske spredningen over internett, hadde det vært lukket for de fleste folk ville man trengt helt andre metoder for å skaffe seg ofte kritisk eller viktig informasjon om situasjoner i andre land(krig, sult, naturkatastrofer mm.) Oppgave E9) Det ville vært vanskeligere å kunne sjekke siden sin for utseende underveis i utviklingen. Derfor setter det store krav til de som lager siden. Fordeler vil være at sider som har dårlig struktur og brukeropplevelse ikke ville kunne blitt vist uten at de endret kritiske feil. Oss som brukere ville fått enda bedre opplevelser som besøkende, bedrifter ville muligens fått flere treff, flere utførte kjøp og mer interesse. Mange velger bort sider på grunn av enkelte dårlige løsninger andre har løst på en bedre måte. Eksempel: betalingsløsninger. Oppgave E10) Den praktiske forskjellen mellom bilder i CSS og bilder i HTML, er at alt som har med design å gjøre på en side skal gjøres i CSS, mens all informasjon skal holdes til HTML. For eksempel kan en logo være informasjon hvis den gir et bilde av firmaet, og at den appellerer til innholdet siden skal få fram. Hvis logoen er mer til pynt vil det kunne gjøres i CSS, og det vil ligge i et eksternt stilark. 6

Det kunne vært annerledes om det hadde vært mer «konkurranse» mellom de ulike firmaene som i dag utvikler og viderefører internett om det blant annet kun hadde vært tilgjengelig for noen enkelte

Like dokumenter

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.

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. 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. Tar lang tid å laste inn siden: Mye bilder Mange animasjoner