» Uncategorized » Webprosjekt

Webprosjekt

I første semester på både IT (Informasjonsteknologi), Dataingeniør og Anvendt Data, tar man ett kurs som heter Webprosjekt. Siden et par år tilbake er det fantastiske Anthony Gianoumis som holder kurset og nå er det står fokus på at nettsider skal være tilgjengelig for flest mulig. Som jeg nevnt tidligere er kalt Universell Utforming. Dette området driver også Anthony og forsker innenfor. Så for guds skyld alle studenter som går det kurset nå…lag ihvertfall et nettsted som er responsive. Det er et minimumkrav idag. Med responsive mener jag at nettstedet skal se bra ut på alle plattformer (iphone, tablet) og alle oppløsinger på skjerm (13″,14″,15″..)
Andre viktige ting og tenke på er at dere har bra kontraster i forhold til tekst og bakgrunn, eller andre elementer i forhold til hverandre. Det vil si at dere ikke bruker en lys tekstfarge på en lys bakgrunn. Velg ikke en for liten fontstørrelse, dersom dere gjør det, se til at brukeren får valget og endre det selv. Konstistens i navigering er viktig. Hvis det er en og samme funksjonalitet på nettstedet, skal den også opptre på samme måte hele veien. Dersom du skal referere til linker, gjør det tydlig og ikke bruk «les mer» eller «trykk her». Vær tydelig i teksten!.

For å se til at nettstedet blir responsive så setter du dette i CSS (det vil si i stylesheet’en din).

@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

Dette for eksempel sier at når browser vinduet blir mindre enn 500 px så vil bakgrunnsfargen bli blå. Alt du setter innenfor body vil da bestemme hvordan nettstedet vil se ut når vinduet er under 500.

Se på et eksempel her gjeldende Media Query.
http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Iphone for eksempel sin media query er;
@media only screen
and (min-device-width : 320px)
and (max-device-width : 736px){
// your style goes here
}

Isteden for å ha allt i et og samme stylesheet kan man også gjøre det slik at man bruker flere forskjellige stylesheet til ulike oppløsinger og roteringer (det vil si landscape eller portrait).
https://developers.google.com/web/fundamentals/design-and-ui/responsive/#css-media-queries

W3C Schools har også bra forklaringer og eksempler på hvordan man lager responsive design.
http://www.w3schools.com/css/css_rwd_mediaqueries.asp

En Meny som følger med på nettsiden

Dersom du vil lage en meny som følger med når brukeren scroller ned på nettsiden så finnes det et triks for det via CSS.

#meny {
width: 30%;
positiion:fixed;
}

position:fixed. Der har du trikket. Fixed betyr at elementet er plassert i forhold til nettleservinduet.
Når det gjelder posiisjon av elementer finnes det flere forskjellige typer, fixed, relative og absolute. Vil du vite forskjellen mellom dem går du inn på linken nedenfor;
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Det va alt for nå 😀

 

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *