CSS1 – CSS3

September 21st, 2015
by Atlero

Css (Cascading Style Sheet) kan forklares som et kodespråk som vi bruker til og utforme og “style” tekst og elementer i et HTML dokument. Vi kan sammenligne med en bygning der HTML er selve strukturen på bygningen og CSS er farger på veggene, utforming av vinduer eller dører. CSS koder kan innarbeides i selve HTML dokumentet, men det er mer vanlig og linke til et eget stilark med endingen .css da det fort kan bli uoversiktelig og ha alle css elemtene i selve HTML dokumentet. Vi kan peke til en rekke dokumenter med  samme CSS fil og dette gjør at når vi endrer en farge eller tekstboks i CSS filen så endres dette i alle dokumentene CSS filem peker til.  I HTML dokumentet bruker vi følgende kode for å peke til en .css fil :

<link rel=”stylesheet” href=”mappe/filnavn.css” type=”text/css” />

CSS ble først utviklet i 1994 av Håkon Wium Lie og han viderutviklet konseptet sammen med Bert Bos. Idag er det W3C CSS Working Group som oppdaterer og bestemmer hva som gjelder som standard innen CSS.

I og med at nettsider og nettbruk er i stadig forandring må det fortløpende oppdateres og utvikles nye css koder. Css1 var ganske enkel og det var begrenset hva slags muligheter man hadde til og utforme nettstedene. Derfor ble neste linje med CSS koder kalt CSS2 og her var hovedforskjellen bruk av ulike “mediatypes”. Medietypes brukes til å definere ulike stiler utifra  hva dokumentet skal brukes til. Om det var til vanlig pc bruk, mindre skjermer print eller storskjermfremvisning.

Tilslutt ble CSS3 utviklet. Hovedforskjellen mellom CSS2 og CSS3 er at CSS3 har blitt delt opp forskjellige seksjoner som vi kaller moduler. CSS3 tilbyr også en rekke nye “selectors” samt en ny “combinator” og noen nye pseudo- elementer. Du kan lese mer om disse her:  www.webdesign.about.com/od/css3/a/differences-css2-css3.htm

W3C har blitt enige om at CSS3 er siste stadiet av CSS, men dette betyr ikke at kodespråket er ferdig utviklet, istedet oppdateres CSS i egne moduler slik at brukeren skal slippe å vente på nye versjoner av CSS.

Det er utrolig mange CSS koder jeg synes er både smarte og nyttige og jeg har valgt ut 5 eksemler du kan benytte ved utarbeidelse av linker.

På et nettsted er det viktig at linkene skiller seg ut og er utformet slik at brukeren skjønner at det er en link. Derfor er det i CSS viktig å utforme linkene slik at man oppnår ønsket effekt.
For det første kan en link utformes med hvilkensomhelst “CSS property” slik som color, font-family, bakgrunn m.m.
I tillegg kan vi i CSS gi brukeren en formening om hva slags tilstand linken befinner seg i. De 4 forskjellige tilstandene er-

  • a:link. (En normal link som enda ikke er besøkt)
  • a:visited. (En link som brukeren har besøkt)
  • a:hover. (En link som bytter farge når brukeren beveger musen over den)
  • a:active. (En link det øyeblikket brukeren klikker på den)

Eksempler på CSS bruk til linker finner du her:

 

Jeg leste en spennende artikkel på sitepoint.com om trender innen mobildesign. Her har forfatteren Gabrielle Gosha listet opp det hun oppfatter som de fem største trendene innen design for mobil i 2015.
En trend er bruk av beskjedne fargepaletter. Hun skriver at i motsetning til den moderne trenden med skarpe og frekke farger innen design så er altså trenden ved mobil design og holde tilbake på bruk av disse fargene. Siden designere som jobber mye med begever seg i retning mot minimalistisk design så er det også naturlig og også tone ned på fargene. Sett fra et psykologisk standpunkt er dette et smart trekk i.o.m at klare sterke fargepaletter tiltrekker seg oppmerksomhet men de kan også være distraherende. En mer subtil fargepalett hjelper brukeren til å holde fokus og ikke miste konsentrasjonen.

En annen trend er større bruk av animasjoner innen mobil design. Et levende design gir bedre respons fra brukeren hevder Gabrielle. Med animasjoner imlentert i designet vil man ha en mer realistisk tilnærming til mennesklig adferd imotsetning til et mekanisk og tørt design.

En av de viktigste og største trendene i 2015 er muligens “scrolling” eller da mer spesifikt “parallax scrolling”. Vi har kanskje allerede sett hvordan scrolling er blitt tatt til nye høyder de siste årene, men vi kan anta å se denne trenden i full blomst nå i 2015. Med parallax scrolling mener vi da at man scroller på en måte at elementer er lagt i diverse lag som beveger seg i ulik hastighet i forhold tilhverandre når brukeren scroller nedover på en side. For eksempel at en tekst beveger seg hurtig nedover mot en bakgrunn som da beveger seg vesentlig saktere. Artikkelen kan du lese her: http://www.sitepoint.com/5-big-mobile-design-trends-of-2015/

 

 

 

 

Posted in Uncategorized | Comments (0)

Arbeidskrav 3 . (del 1)

October 1st, 2014
by Atlero

Hey hey :)

Arbeidskrav 3 går da ut på å lage 2-3 skisser på egen logo.  (Navnet vårt.)  Begrunn valgene – fargebruk , valg av font , illustrasjon etc. og forklar hvordan disse representerer deg.

De to første skissene mine har jeg valgt å bruke en type signatur.  Det er håndskrevet tekst er både personelig og tillitsvekkende. Stilen er kanskje mer moderne grafitti street art inspirert noe som sier mye om meg som person og mine ferdigheter innen design. Svart på hvitt for å gjøre det enklest mulig. med mindre forstyrrende elementer er logoen lettere å huske pluss at den fungerer like godt i forskjellige medier. Nett, avis svart hvitt etc. Jeg har to versjoner av samme ide hvor den ene er type skarp i kantene og mer direkte. Mens den andre er en type rundere versjon som er mildere og har litt mer flow.

IMG_0900            logo2

Mitt andre utkast er basert på old school grafitti stil. Denne er kanskje litt umoderne men jeg synes det er et kult utrykk og det sier noe om meg ved at den refererer til grafittistilen på 90-2000 tallet da jeg var aktiv.  Her har jeg brukt litt flere elementer som skygge og bakgrunn. Kunne også kanskje tenkt meg litt farger på denne men valgte å la være da bruksområdene på logoen blir innsnervet. Dette er også en type personlig design der skriften også er en illustrasjon .

logo4

 

Min siste skisse er en mer radikal ide. Og har et symbol som de fleste kjenner til å forbinder med noe opprørskt og rebelskt.  Logoen er som et anarkist symbol der A`en representer fornavnet mitt Atle, mens sirkelen rundt representerer etternavnet mitt Olsen. Jeg ser i ettertid at skriften rundt blir litt i meste laget og konkluderer med at jeg kan sløyfe “grafisk design” og heller plassere navnet mitt under på hver side i en type font som er lett leselig men samtidig litt røff. Denne logoen representerer meg ved at jeg også kan være litt rebelsk og gå mine egne veier men at resultatet som regel blir ok. Hvis jeg skulle gjort denne på nytt ville jeg hatt en firkantet innramming som A èn bryter ut av og samtidig eksprimentert litt med farger . Forskjellige grå toner + svart og rødt.

logo3

Posted in Uncategorized | Comments (0)

Første Bloggen.

September 10th, 2014
by Atlero

Da er bloggen oppe og går. Begynner med og legge ut grovskisse over nettstedet vi skal konstruere i web/html undervisningen.

Nettside grovskisse

Neste er en skisse på hvordan jeg tenker siden skal se ut designmessig.

Nettside skisse 1

Posted in Uncategorized | Comments (0)

Hello world!

August 27th, 2014
by Atlero

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Posted in Uncategorized | Comments (1)