Oblig 2: Oppgave 1. section { width: 50%; height: 30%; margin: 5% 0 0 0; } h1 { color:#000000; font-size:2em;

Transkript

1 Oblig 2: Oppgave 1 Hva og hvorfor Jeg har valgt å lage et nettsted basert på relative målenheter. Det vil si at jeg tar i bruk prosent og em istedenfor pixler. For eksempel: section { width: 50%; height: 30%; margin: 5% 0 0 0; } h1 { } color:#000000; font-size:2em; Det er både positive og negative sider ved relative målenheter: Det positive er at nettsiden i de fleste tilfeller blir mer brukervennlig i og med at nettsiden tilpasser seg oppløsningen. Nettsiden vil også som oftest se bedre ut siden nettsiden ser lik ut i de fleste nettlesere er det en fordel for den som designer nettsiden, da han/hun har en viss oversikt over hvordan andre vil se nettsiden. Det negative er at man har mindre kontroll over hvordan nettsiden ser ut ved ulike oppløsninger. Nettsiden kan se bra ut ved høy oppløsning, mens den kan se rar ut ved mindre oppløsning. Det kan også være omvendt i høye oppløsninger kan nettsiden ha mye white space - altså mye plass uten innhold. Det kan derfor være greit å teste nettsiden med ulik oppløsning under designprosessen, for å se hvordan nettsiden blir seende ut med ulike innstillinger. Et annet problem er hvis noen ønsker å printe ut nettsiden. På grunn av standardinnstillingene kan det oppstå en liten krasj her, men det kan fikses ved å ta i print i CSS. I tillegg kan det ved anledninger være vanskelig å lese innhold. Ved høy oppløsning kan teksten ha veldig lange linjer som nesten dekker hele skjermen, mens ved lav oppløsning kan teksten ha altfor korte linjer slik at kun noen ord får plass på en linje om gangen. Men, det er ikke noe som IKKE kan fikses. Jeg har valgt denne metoden først og fremst fordi jeg syntes det er den beste metoden å arbeide med. I tillegg blir nettstedet så å si automatisk responsivt og skalerbart. Hvis man gjør nettleservinduet mindre, vil innholdet på nettsiden skalere og bli mindre. Gjør man nettleser vinduet større, vil innholdet bli større. Det gjør det også ved media queries, som jeg også har tatt i bruk men her tar jeg i bruk pixler for å sette verdiene for ulike skjermstørrelser.

2 Wireframes/skisser Wireframes/skisser er ikke like detaljert som resultatet, og i forklaringene under skissene kommer jeg til å forklare slik som nettstedet ser ut, altså resultatet. Forside (PC) Paragraf: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum H2 - Ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Forsiden består av header og meny på toppen, som er markert med en strek under. Deretter følger overskrift og tekst. For å få bakgrunnen til å dekke hele nettsiden, ikke å repetere seg selv og følge skalering, har jeg tatt i bruk denne kodesnutten: body { background: url(bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } Den skal gjøre at dette fungerer i Safari, Chrome, IE, Opera og Firefox om det er nyere versjoner av nettleseren. Jeg har også tatt i face for å ta i bruk en annerledes font enn de som er standard. Jeg har da valgt ut en font og lagt ved.woff filen for fonten og deretter henvist til den i CSS- filen. Jeg har også tatt i bruk H1 på to forskjellige steder, i headeren og i <section>. For å få til dette har jeg tatt i bruk h1 header og h1 i CSS- filen.

3 Video (PC) Paragraf: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Video (width:100%;) Video- siden inneholder en video med 100% bredde. Jeg har tatt i bruk <video>- taggen og tatt med.ogg og.mp4 slik at hvis en nettleser ikke støtter den ene filtypen, vil den (mest sannsynlig) støtte den andre. I og med at videoen har en relativ målenhet, skaleres den hvis nettleser vinduet forstørres eller forminskes. Den tilpasses også hvis man er på mobil, nettbrett eller andre enheter. Den skaleres til 100% av <section> der den er plassert.

4 Audio (PC) Paragraf: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Audio Audio- siden inneholder <audio>- taggen.

5 MathML (PC) Paragraf: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum MathML MathML- siden inneholder et regnestykke med MathML.

6 Diverse (PC) Paragraf: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Bilde/CSS animasjon/svg (width:100%; height:100%;) Bilde/CSS animasjon/svg (width:100%; height:100%;) Diverse- siden inneholder et bilde, et bildet med en CSS animasjons- effekt og SVG laget i HTML. Alle elementene er satt til en verdi med 100% slik at de skaleres. De skaleres til 100% av <section> der de er plassert. Hvis det ikke skjer noe med SVG, oppdater nettsiden men det skal ikke være nødvendig.

7 Print Paragraf: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Bilde/SVG/CSS animasjon = 50%; Bilde/SVG/CSS animasjon = 50%; I print.css har jeg endret all fontfarge til sort, slik at det skal syntes når det printes ut, da all fontfarge er hvit på nettsiden. Header og meny er tatt bort. Jeg har også valgt å skjule <video> og <audio>. Bildene og SVG er satt til 60% slik at de ikke blir altfor store ved printing.

8 Forside (Mobil/nettbrett oppløsning mindre enn 700px) HEADER - Lorem Ipsum Dolor Sit Amet <- menyknapp Paragraf: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum H2 - Ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Nettsidene endres når oppløsningen er mindre enn 700px. Menyen blir til en knapp som man kan hovere over på PC eller trykke på, på mobil/nettbrett. Da dukker det opp en halvveis gjennomsiktig boks med meny- elementene presentert vertikalt. Dette er gjort med media queries. I tillegg blir den originale menyen skjult.

9 Andre sider med innhold (Mobil/nettbrett oppløsning mindre enn 700px) HEADER - Lorem Ipsum Dolor Sit Amet <- menyknapp Paragraf: Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Video/bilde/SVG/CSS animasjon = 100%; Video/bilde/SVG/CSS animasjon = 100%; Header H1 blir forminsket ved 380px, 320px og 295px fordi den blir for stor slik at menyknappen treffer den. For å holde menyknappen på plass ble derfor dette gjort, og det er også utført med media queries.