Profile

Scrapbook photo 1
Wise Online Services
39 followers|5,918 views
AboutPostsPhotosVideos

Stream

Wise Online Services

Shared publicly  - 
 
 
The +Think with Google team released the latest issue of Think Quarterly today. Focused on digital creativity, the issue includes interviews with the founders of agencies AKQA and BBH, as well as some creative people here at Google—VP of Marketing +Lorraine Twohill and +Aaron Koblin from our Creative Lab's Data Arts Team. We hope it inspires some creativity in you!
With insights and outlooks on the digital future, Think Quarterly is a snapshot of what Google and industry leaders are thinking about and inspired by today.
1
Add a comment...

Wise Online Services

Shared publicly  - 
 
Ojoj, her var det mye gøy! :)

(via +Herman Hassel )
 
You want a Public Beta of Adobe #Photoshop CS6?

Ok. You can have it. :)

Nice to finally be able to talk about it, too.

http://labs.adobe.com/technologies/photoshopcs6/
1
Add a comment...
Have them in circles
39 people
Linda Firveld's profile photo
Sølvi E. Suongir's profile photo
Kenneth lever's profile photo
Jan Otto Weberg's profile photo
Firmablogg's profile photo
Joao Paulo Reis's profile photo
Joakim Eide's profile photo
Steve John's profile photo
Heming Leira's profile photo

Wise Online Services

Shared publicly  - 
 
På denne dagen anbefaler vi alle våre designer-venner å begynne å bruke MORE-CSS.

LESS og SCSS er helt ut, nå er det MORE som gjelder! ;)
 ·  Translate
#header colour: cmyk(one-hundred-and-eight, eighteen, zero, forty-five) !unimportant; #header width: twenty-five-and-three-quarters percent !unimportant; #about h2 span background-attachment: scroll !...
1
Add a comment...

Wise Online Services

Shared publicly  - 
 
Hvordan skrive hurtigere vendor-specific-CSS3 med SCSS

Et av de kjedelige aspektene med CSS3 er hvor bred støtten egentlig er, men at man da ofte må inkludere flere linjer med vendor-specific CSS. Samtidig er det nødvendig å inkludere alle. Enkelte designere inkluderer kun webkit-varianten siden det inkluderer Chrome, Safari, iOS og Android, men dette er en farlig trend. På linje med grusomheten "This page works best in Internet Explorer 6" får man et dårligere internett. Alle gode designere inkludere så mange nettlesere som mulig.

En lineær gradient i bakgrunnen, fra topp til bunn har relativt enkel syntaks:

background-image: linear-gradient(to bottom,#ffffff,#dddddd);

Men som vi kan se av http://caniuse.com/css-gradients krever alle nettleserne sin egen prefix da ingen er helt ferdige med implementeringen av css-gradients. Med alle prefixene vil hele blokken se slik ut:

background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
background-image: -webkit-linear-gradient(top,#ffffff,#dddddd);
background-image: -moz-linear-gradient(top,#ffffff,#dddddd);
background-image: -ms-linear-gradient(top,#ffffff,#dddddd);
background-image: -o-linear-gradient(top,#ffffff,#dddddd);
background-image: linear-gradient(top,#ffffff,#dddddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd', GradientType=0);

Med to webkit varianter, prefixer for alle nettlesere, en "ekte implementering" som ikke er støttet av noen enda (men vil være det i fremtiden) samt et gammelt microsoft filter for deres utdaterte nettlesere er dette et mareritt å skrive(huske) for alle webdesignere.

Vi har verktøy som http://css3please.com som hjelper oss med syntaksen for de forskjellige prefixene, og så kan vi dobbelsjekke med http://caniuse.com om vi har med alle prefixene vi trenger, men allikevel tar det lengre tid enn nødvendig.

SCSS - Sassy CSS
SASS er en forlengelse av CSS, det gir oss muligheter for å bruke variabler, funksjoner og mye mer. SCSS er SASS med CSS syntaks. Det vil si; alle CSS ark er også SCSS ark, du trenger ikke endre på det du allerede har for å legge til SCSS muligheter. SCSS filene dine kompileres til CSS-ark til slutt da nettlesere ikke forstår SCSS. Dette er ikke en bruksanvisning i alt SCSS kan. Les mer om SASS på http://sass-lang.com/

Mixins and Includes
I vårt tilfelle med gradients skal vi bare innom en av mulighetene i SCSS, Mixins. En Mixin er en funksjon/metode slik vi kjenner de fra andre programmeringsspråk. Den kan ta imot variabler og lage output for oss.

I SCSS defineres en ny funksjon/mixin med @mixin og variabler bruker '$' som prefix, bortsett fra det brukes ordinært krøll-parantes-språk. (curly-bracket language).

@mixin name( ... $args ) {
$key: $value;
}

Mixins kalles opp i CSS'en med @include name( ... $args);.

Tilbake til vår lineære gradient
Gradienten vår (slik vi skrev den lengre opp) har to variabler, topp-farge og bunn-farge som gjentas hele veien gjennom. Ellers er det svært lite som endres.

Vår mixin ser da slik ut:

@mixin linear-gradient( $top, $bottom ) {
background-image: -webkit-gradient(linear, left top, left bottom, from($top), to($bottom));
background-image: -webkit-linear-gradient(top, $top, $bottom );
background-image: -moz-linear-gradient(top, $top, $bottom );
background-image: -ms-linear-gradient(top, $top, $bottom );
background-image: -o-linear-gradient(top, $top, $bottom );
background-image: linear-gradient(to bottom, $top, $bottom );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$top}', endColorstr='#{$bottom}', GradientType=0);
}

Og i SCSS arket kan vi da skrive.

.gradient-box {
@include linear-gradient(#fff,#ddd); /* vil skrive ut hele blokken for oss med "riktige" farger. */
}

Alle box-shadows, border-radius, gradients og andre css3-effekter som krever flere linjer med "vendor-specific prefixes" benytter slike mixin's nå på vår nettside. Ta en titt på: http://wiseonlineservices.com

Andre ressurser for denne artikkelen:
http://sass-lang.com/
http://mhs.github.com/scout-app/

Denne artikkelen er skrevet av +Herman Hassel for +Wise Online Services
2
1
Herman Hassel's profile photo
Add a comment...

Wise Online Services

Shared publicly  - 
 
Trygg bruk av SVG sprites på web med støtte for eldre nettlesere.

I januar fikk vi litt tid til overs til å leke oss litt med svg ( scalable vector graphics ) både i noen wip-prosjekter samt vår egen hjemmeside.

Siden slutten av 2011 har vi hatt mer og mer fokus på å bygge responsive sider som fungerer like godt på små telefon-skjermer som på normale monitorer. Dette medfører at i arbeidsprosessen sitter vi ofte med mange nettlesere oppe og zoomer og skalerer skjermbildet. Da er det lett å irritere seg over logoer og ikoner som bruker "vanlige" raster-bilder. Irriterende pixlete i +250% zoom!


SVG, to the rescue!
SVG formatet har jo eksistert siden sent forrige årtusen, men siden vi gutta på design har måttet støtte Internet Explorer (som igjen ikke støtter noe fra etter svartedauen) har det ikke vært noe tema å bry seg med å implementere det.

"Det er da nesten ingen som ser forskjell uansett."

Vel det at vi nå satt og så det selv var grunn nok.


Løsningen, Modernizr!
Vi har lenge brukt Modernizr for "feature-detection" på nettsidene våre, og det er i Modernizr vertøyet for fallback-bildet kommer. Kort fortalt; Modernizr tester om din nettleser støtter spesifikk funksjonalitet på få millisekunder og lagrer svaret på disse testene som klasser helt i toppen av markupen.

Utgangspunktet i html-arket vårt er:
<html class="no-js">
Hvis nettleseren din ikke lar deg kjøre JavaScript, er dette resultatet som går videre også. Slik kan vi henge fallback-design på nettsider for de som ikke har JavaScript.

Etter modernizr har kjørt vil den skrive om .no-js klassen slik:
<html class="js">
Så lenge klassen .js eksisterer på toppen av markupen, vet vi at JavaScript fungerer. Deretter kjører Modernizr de testene man ønsker å legge til. Når vi har inkludert SVG testen i Modernizr-builden, får vi tre resultater html tilbake.

<html class="no-js"> <-- Uten JavaScript, Modernizr har ikke kjørt.

<html class="js no-svg"> <-- JavaScript, men ikke SVG støtte.

<html class="js svg"> <-- JavaScript og SVG støtte.

Markupen for ikonene våre er en standard ul-li-a markup.

<ul>
<li><a href="../" class="icon">destination in words!</a></li>
<li> ... </li>
</ul>


På ikonene på siden kan vi da ha følgende CSS:
/* jpg versjon av ikonene for gamle nettlesere, eller nettlesere uten javascript så vi ikke vet om de har støtte for svg */
.no-js .icon,
.no-svg .icon {
background-image: { my-icon-sprite-sheet.jpg }
}
/* svg versjon for nye nettlesere med svg støtte */
.svg .icon {
background-image: { my-icon-sprite-sheet.svg }
}
/* rydde bort anchor-tag teksten på ikonet
og vise bildet istedet. (SEO + screen-reader støtte)
*/
.icon {
display: block;
border: 0;
text-indent: -999em;
overflow: hidden;
background-repeat: no-repeat;
text-align: left;
direction: ltr;
height: 24px; width: 24px; /* størrelsen på ikonet */
}

Slik vil nettsiden kun laste ned "riktig" fil til "riktig" nettleser og ikke dobbelt opp slik man ofte før prøvde å løse ting. Siden bildet kommer via CSS vil lenken vår fungere også for søkemotorer som lurer på hva vi lenker til, samt blinde besøkende med screen-readers, som ikke ser bilder men får teksten istedet.

Se eksempler på vår side, sosiale media -ikonene og logoen benytter denne teknikken:
Wise Online: http://wiseonlineservices.com

Andre ressurser for denne artikkelen:
Modernizr: http://modernizr.com


Denne posten er skrevet for +Wise Online Services av +Herman Hassel.
 ·  Translate
1
1
Herman Hassel's profile photo
Add a comment...
People
Have them in circles
39 people
Linda Firveld's profile photo
Sølvi E. Suongir's profile photo
Kenneth lever's profile photo
Jan Otto Weberg's profile photo
Firmablogg's profile photo
Joao Paulo Reis's profile photo
Joakim Eide's profile photo
Steve John's profile photo
Heming Leira's profile photo
Contact Information
Contact info
Phone
+47 92 62 44 00
Address
Beddingen 8 Trondheim, Norway 7014
Story
Tagline
Utvikling av webløsninger for et globalt marked.
Introduction

Vårt team har jobbet med alt fra bedrifter, foreninger, organisasjoner, universiteter og offentlige etater siden slutten av 90-tallet. Vi har siden den gang levert verktøy, opplæring, design, prisvinnende nettsteder, portaler og webløsninger til kunder i inn- og utland.

Selskapet er lokalisert i Trondheim, Oslo, Washington og Silicon Valley. Hovedkontoret ligger på Solsiden i Trondheim; hvor det meste av programvareutvikling foregår, i tett samarbeid med forskningsavdelingen i Silicon Valley.