Twelve rules for a logo

12 regler man bør følge for å designe en god logo.

Fonter

Erik Spiekermann mener det bør være like mange fonter (webdesignbegrep)/skriftsnitt (typograftermen) som det finnes stemmer, språk og følelser. Den interessante filmen fant jeg via Tor Espens blogg, hvor du forøvrig finner enda en film om fonter.

Live Web - Power Point

Nå kan du legge inn nettsider i din Power Point presentasjon, som oppdateres automatisk. Takk til Guttorm for tips c",)

Oppdatering: Rolf Anders har laget en screencast av hvordan du går frem:

Ripway

Her er oppskriften på hvordan jeg la inn fanene.øverst. Forhåpentligvis blir det nå letter å navigere. Logoen har jeg prøvd å gjøre mer i tiden og mer personlig med de verktøy jeg har nå og et bilde datter knipset i dag. Jeg brukte blant annet tjenesten Ripway for å laste opp bildene knyttet til fanene. På Ripway kan man laste opp intill 30 MB gratis. Det holder til en del blog design skulle man tro. Det gjenstår fremdeles en del tilpasning i menyene på de forskjellige sidene i skrivende stund. Og hvem vet? Kanskje blir det flere redigeringer før kvelden er omme. Det har vært skikkelig morro å jobbe med html og CSS igjen - kjapt, trygt og billig. Baren en snodig forekomst har oppstått. En av fanene oppfører seg merkelig på noen av sidene, uten at jeg kan lokalisere noe feil i kodene. Bortsett fra det, så har dette vært en god start på ferien c",)

Nettbasert arbeidssted i yrkesfag

Hvordan bør et nettbasert arbeidssted i yrkesfag utformes? Bloggen for helsefag på NDLA gir meg svar og strukturen jeg er på jakt etter.

Leafletter

Nyttig side for tips om html

Har du drømt om å lage din egen hjemmeside? Her ligger nyttige lenker som tar deg til:


Web Developer for Beginners - enkel "alt-på-en-side"-innføring
Tagliste fra W3Schools - omfattende men lettfattelig liste sortert på funksjon


Kilde: http://www.nettredaktor.no/Fakta_om_Web/?module=Articles;action=ArticleFolder.publicOpenFolder;ID=580 Nettstedet bugner av nyttige tips!

Webredaktørens ABC

Tidligere på sommeren - 12 juli - midt i eksamenstiden kom jeg over dette tipset på fosseng.info
Spesialisten Fredrik Wackå forteller deg om hvordan du best kan skrive, redigere, strukturere innhold for å informere på nett. Vel verdt en titt for alle i skoleverket! Webredaktørens ABC kan lastes ned gratis som pdf.

Fargevalg i nettsider

Deuteranope og Protanope høres kanskje ut som et par forhistoriske reptiler. Eller om din språklige lyriske sans slår inn, så ser du kanskje for deg en slektning av en grasiøs antilope som elegant spretter over en duggfrisk grønn savanne …, men hvis jeg sier Tritanope, og at den er veldig sjelden, så kanskje tenker du da på regnskogen og alle de fargerike skapningene man finner der.

Men nei …, og bildene under representerer heller ikke siste skrik innen farger og interiørstil hos nærmeste Maxbo. Du aner kanskje at vi snakker om noe helt annet?









De grønne remsene er fra et av mine eksperiment laget i forbindelse med Tema 1 i IKT 1. Jeg prøvde ut flere typer layout-elementer i PSP 8, og fant til slutt en frisk grønnfarge jeg var fornøyd med. I forbindelse med refleksjon over nettstedets brukervennlighet, kom jeg til å tenke på fargebruk i forhold til svaksynte og fargeblinde. Hvordan var det nå med de fargeblinde? Rødt sammen med grønt var kanskje ikke beste løsning, mente jeg å huske… men stort mer visste jeg ikke om den saken. I samtale med faglærer kom jeg fram til at det beste var å undersøke litt mer.
Etter søk på nett kom jeg over stedet http://www.vischeck.com/, som gir mulighet til å kjøre simulator for både nettsider og bilder. De tre typene fargeblindhet bærer navnene Deutranope, Protanope og Tritanope (engelsk betegnelse). De to første variantene rammer omtrent 8 % menn og 2 % kvinner. Den siste varianten er en veldig sjelden tilstand hverken jeg eller min kilde kommer ytterligere inn på.

Navnet Fargeblindhet gir en litt misvisende betegnelse siden vi ikke har å gjøre med blindhet i det hele tatt, men en form for svekket fargesyn. Likevel vil den som er rammet av tilstanden – i det rette fora – kunne være ganske funksjonshemmet, ja helt på tyttebærtur. Bærene blir vanskelige å se, og vedkommende vil nok plukke litt senere enn andre. Enkle dagligdagse handlinger som å finne matchende farger på klær om morgenen, kan skyldes noe mer enn mangel på forfengelighet.

Hva kommer det av?
I øyet er det tre typer tapper bestående av synspigmenter som er lysfølsomme for rødt, grønt og blått lys. Hos en som er fargeblind er pigmentene i en av fargetappene enten helt borte (hos 2 %), eller de har en mangelfull funksjon (anomal trikromasi, hos 8%). Dette er en arvelig defekt som følger x-kromosonet, og rammer derfor oftest menn.

Mange tror at rødgrønnblinde vesentlig har problemer med de røde og grønne fargene. Det er ikke riktig. Riktignok er det slik at dikromater ikke kan se røde og grønne farger, hele den langbølgede del av spekteret oppfattes som varianter av gult. Anomale trikromater derimot kan se røde og grønne farger, men mer eller mindre saturert. (…) I praksis er det ofte vanskelig å skjelne mellom røde, oransje, gule, brune, grønne, fiolette og lilla farger. (http://www.tidsskriftet.no/pls/lts/pa_lt.visSeksjon?vp_SEKS_ID=959942
vp_SEKS_ID=959942 Lesedato: 19.09.05 )

Man bør altså være bevisst bruken av disse i kombinasjoner med hverandre. Når jeg så skulle velge farger til nettsiden min, testet jeg de forskjellige sidene jeg hadde laget tidligere på http://www.vischeck.com/. Ikke alle sidene var like lesbare for simulatoren (bilder med DHTML leses for eksempel ikke), men jeg fikk likevel en pekepinn på hvordan hverdagen for en fargeblind arter seg. Ut fra det kunne jeg resonnere, og prøve meg frem til farger som vil forbli tilnærmet lik for meg og en fargeblind. På den måten er det lettere for meg å kontrollere lesbarheten. Litt farge i livet må man jo ha, men en bør kanskje være mer bevisst fargebruken – som pedagog i det minste.

Original logo:
Når jeg kjører startsiden min gjennom simulatoren, så faller bildene bort, men da kan jeg om jeg ønsker kjøre bildet separat via simulator for Image Files (finnes på nettstedet i menyen til venstre). Og slik vil altså en fargeblind se min logo:







Hva innebærer det for meg som pedagog?
Som lærerstudent har jeg i liten grad reflektert over den fargeblindes daglige barrierer, og som nettsideprodusent er det mange formelle hensyn å ta. Farge forbindes kanskje oftest med de uformelle valg. Det er liksom pynten på kaka, og velges med større frihet. I følge tidsskriftet det refereres til her, vil vi finne at omtrent 10 % av befolkningen er fargeblinde. Det vil si at jeg som pedagog bør være bevisst hvordan funksjonshemningen arter seg, og hvordan den gjør seg gjeldende. Kanskje trenger den fargeblinde eleven mer tid til å skille de fargede klossene fra hverandre.

Hva kan jeg som pedagog gjøre?
Den største feilen jeg antakeligvis kan gjøre er å klandre vedkommende for å være lat - for ikke å gidde. Som pedagog bør et prinsipp være at: Det er en bakenforliggende grunn som forklarer de fleste handlinger – på godt og vondt. En annen tabbe vil nok være å gå i den fellen at en forveksler tilstanden med en type lærevanske.

Det beste jeg kanskje kan gjøre er å være bevisst mine og andres handlinger, og å ta høyde for at det – i fellesrommet – alltid vil kunne finnes en eller to jeg kan lette kommunikasjonen for når det gjelder synssansen. Dette innebærer som veileder også at man bevisstgjør andre i samme rom, og benytter seg av den kunnskapen man sitter inne med i refleksjoner og vurderinger. For den som er fargeblind eller svaksynt, er godt lys et godt hjelpemiddel – også foran PC'n.
Ja, så var det de svaksynte ja … Farge og fargekontrast er av stor betydning når det gjelder lesbarhet - ikke bare for orienteringens skyld. Forsøk har vist at vi synes det er mest behagelig å lese svart tekst på svak gul bakgrunn. (…) Svaksynte opplever svart tekst på blå bunn som en håpløs variant. (Macromedia Dreamweaver 4, Visual World AS, Oslo 2001) Mørke farger: blå og sort på lyse: hvite, gule, og oransje bakgrunner gir som regel god kontrast og lesbarhet.
Mine valg i forhold til nettsted

Muligheten til å kunne lese med størst kontrast – hvitt på svart eller svar på hvitt – vil være til hjelp for de som er mest svaksynte.

Et tredje middel for å gjøre kommunikasjonen tydelig, er å beskrive bilder ved hjelp av skjermtipsfunksjonen. Denne funksjonen gjør at de blinde bokstavelig talt kan se (skriften kommer fram på det spesielle tastaturet). Fantastisk - ikke sant!
Om du leser dette, og sitter inne med kunnskap eller erfaring som kan bidra til å gjøre nettsider lettlest for fargeblinde eller synshemmede, så legg igjen en kommentar!


Blått er regnet for å være den mest attraktive i fargeskalaen. Kanskje fordi de to største eksponentene for fargen er havet og himmelen. Siden fargen var så kostbar og vanskelig å fremstille, fikk den status som edel og guddommelig og ble av den grunn en farge for kirken, overklassen og de kongelige. Blått gir tillit, derfor har fargen vært bankenes og storindustriens signaturfarge. Blått har også alltid vært forbundet med autoritet, stabilitet og trygghet - og brukes av den grunn i maritime miljøer, på uniformer og på skilt som signaliserer stabilitet som f.eks. parkeringsskilt. Blått har siden gammelt av vært brukt på kjøkkenet på grunn av sin friskhet, men også fordi man mente at den sterke blåfargen holdt fluer og insekter borte.

Kilder:
Macromedia Dreamweaver 4, Visual World AS, Oslo 2001

Kilder på nett med lesedato: 19.09.05
www.vischeck.com p://www.zeiner.no
http://www.tidsskriftet.no/pls/lts/pa_lt.visSeksjon?vp_SEKS_ID=959942

Hvorfor ...

Fargeverdier
- om farger og heksadesimal koder:
Hvorfor opererer man med 16 777 216 ulike fargeverdier, for eksempel som teoretisk mulige farger i et jpg-bilde?

Først litt om det heksadesimale tallsystem, og hvordan arter det seg? La oss telle ... (Trykk på bildet for å se bedre)

Forklaringen deretter er enkel: Alle farger består av tre primær farger:
Rød – Grønn – Blå (RBG).

Et bit: har samme funksjon som et flagg. Det kan signalisere to tilstander. En av to mulige – av eller på. 0 eller 1 (null eller en). Enten er døre oppe, eller så er den stengt. Hvis du har to bite, kan du signalisere 4 mulige tilstander: 01- 10 – 00 – 11.
3 bit = 8 mulige, 4 bit = 16 mulige osv. ... 8 bit = 256 mulige tilstander.

En bite = 8 bit. Ved hjelp av en bite kan du telle til 256 mulige tilstander (en tolkning), eller fra minus 128 – pluss 127 (en annen tolkning).

I det binære tallsystemet bruker vi 8 siffer. Som for eksempel: 00000000, eller 11111111.
00000000 = 0 og 11111111 = 255

I det heksadesimale tallsystemet er FF = 255
Farger angis i RGB-verdier, og alle farger er en blanding av R (rød) G (grønn) B (blå). Styrken angis fra 0-255, i det heksadesimale tallsystemet.

Tag: En tag er en kode som angir en kommando for utforming i et dokument. For eksempel i et HTML-dokument. Fargen 000000, vil være svart fordi ingen av de tre fargene (de to første sifferplassene er R-verdien, de to neste G-verdien, og de to siste B-verdien) har blitt tilført noen styrke. Når vi har tallet: FFFFFF, er fargen motsatt fordi F er høyeste verdi, maks i alle tre farger. 255, eller FF, gir altså helt hvit. FF0000 = Rød, 00FF00 = Grønn, og 0000FF = Blå.
Verre var det ikke.

Svaret på spørsmålet blir da: 256 • 256 • 256 (eller om du vil: R•G•B)= 16 777 216 teoretisk mulige fargeverdier i jpg bilder.

Enkelt - ikke sant :O)

Byggesteiner

I menyen har jeg skiftet navnet Digitales, til Digitelling. Jeg prøver å finne navn på sidene som har en god internasjonal fonetikk. I kunnskapsfeltet digital kompetanse er det mange engelske ord - av mangel på norske. De fleste av disse blir nok - som et resultat av en utvidet kultur - våre nye lånord.

Navn er i følge Bjørn Rybakken's bok Visuell identitet, det aller viktigste identiteselementet. Det finnes mange navn:

• Personnavn (Porche)
• geografiske navn ((Imsdal)
• kategori navn (Foto Knutsen)
• funksjonsrelaterte og beskrivende navn (Kvick Lunch)
• naturrelaterte navn (Apple)
• uspråklige ord (med et forhold til latin, gresk, mytologi (veritas))
• konstruerte navn ( ordspill, gode og ha i munnen - Kodak)
• innovative navn (Walkman)
• forkortelser (BBC) eller akronymer (forkortelser som kan uttales som et ord - Statoil)
• visuell navn (Apple)
• synergiske (Big Mac (sier at den er stor og at den kommer fra Mac Donalds)
• tallbaserte navn (501 (Levis))

Navnet digitales, er et innovativt engelsk navn som springer ut fra digital + tales (historier). Både nettstedets navn - Diginalet (Det digitale penalet) og siden Digitelling er innovative navn jeg har funnet på, som jeg håper er identitetsbærere med god fonetikk. Digitelling har nok en mer internasjonal snert over seg enn den førstnevnte siden den henviser både til det norske ordet fortelling, og det engelke telling. Om noen av navnene er så innovative at de vil bli brukt av noen andre enn meg er slettes ikke sikkert :O) Det som er sikkert derimot, er at vi i vårt nye kunnskapsfelt trenger ny terminologi som byggestener for ny kunnskap.

Analyse av nettstedet

I forbindelse med forberedelse til eksamen har jeg prøvd meg på en analyse av eget nettsted - som øvelse. Jeg har brukt ankerpunkter fra boken: Digitale verdener - Gyldendahl 2004, med artikelene: De nye mediers astetik og design av Ida Engholm og Visuel kommunikation på www av Lisbeth Thorlacius. Her er en beskrivelse ut fra sistnevntes

Modell for visuell kommunikation:

MEDIET:

Sidebar: For å skape kontinuiet, rytme og variasjon på sidene og for å opprettholde kontakt (den fatiske funksjon) er alle sidene bygd opp med samme malen - Minima, laget av Douglas Bowman. På den måten blir det lett for brukere å navigere.

I menyen til høyre har jeg øverst på siden en tekst som forteller hvilke side du befinner deg på. Under den har jeg lagt til et samarbeidsverktøy - skype - hvor jeg kan kontaktes for synkrone samtaler. Dette verktøyet kan også være nyttig i forbindelse med samtaler som kan tas opp ved bruk av goldwave lydredigeringsprogram for podcasting etc. Dette kan du lese mer om på på Web 2'ls siden (kommer). Etter dette ligger profilen min.

I Meny har jeg listet opp de forskjellige sidene på nettstedet. Jeg har også lagt inn et klase kart (Clustermap) som viser aktiviteter og treff på siden, antall og geografisk beliggenhet for ip-adresser. Under dette legger jeg inn sider eller nettsteder som fungerer som ressurser. På denne siden ligger sider jeg har opprettet som viser eksempler på webloggens bruksområde i forbindelse med undervisning - kalt Prosjekter. Menyen for ressurslenkene på de forskjellige sidene har forskjellige navn på hver side, men har lik plassering slik at jeg forhåpentligvis ved å bygge logiske strukturer opprettholder en god navigativ funksjon.

Til slutt ligger Poster som denne, og et arkiv. Postene arkiveres månedlig.

KODE:

Den intersemittiske funksjon er når bilder understøttes av en tekst, eller omvendt. Det ligger også inne bilder i form av forskjellige badges i menyen. Det finnes forskjellige verktøy til dette formål, og jeg vil jakte på nye og presentere dem etterhvert. De kan være gode for dokumentasjon av prosesser som feks i Elevens valg, men foreløpig har de altså ingen intersemmittisk funksjon med forankring (når bilde og tekst viser det samme) eller avløsning (hvor bildet tilfører noe nytt til teksten.

PRODUKTET (NETTSTEDET):

Produktet - den formale funksjon - legger ikke så mye vekt på estetikk og den uutsigelige funksjon ( sanselig opplevelser med virkelmidler som gir mottaker: overraskelser, behagelige opplevelser gjennom humor, mystikk eller magi - som ikke kan utrykkes med ord). Weblogg er en type nettside som åpner for både fokusering på innhold og design, og jeg har gjort noen forandringer i CSS'en (Cascading Style Sheet), men har altså valgt å fokusere på innhold.

Fargevalget (hår og øyne) henger heller ikke nevneverdig sammen med ideologi eller verdier, og ingen linjer eller kolonner representerer stil eller sjangrer. Ingen visuell identitet annet enn logoen - ikke enda iallfall. Logoen står i visuell kommunikasjon for fysikk og holdning. Kanskje jeg finner et nytt banner-bilde som representerer mer av den sosiokulturelle ånd og den sosiale ideologi som weblogg og andre kollektive arbeidsformer er tuftet på, i løpet av sommeren 2006. Typisk for dette vil da være barn og voksne i aktivitet sammen - ute i friluft (Nybakken Bjørn: Visuell identitet, Abstrakt Forlag 2004)

KONTEKSTEN:

som fokuserer på innhold fremfor elementers estetiske form er derfor ikke så mye representert. Når det gjelder den referensielle funksjon er det to former: den tekstlige sammenheng (her på siden hvor innholdet formidles) er ganske renset for elementer som henviser til innholdet - estetiske formmessige utrykk som ikoner (henviser til innhold basert på likhet som feks at elgen på et elgskilt ligner på elgen), index (årsaksforbindelse som feks at dialekt kan knyttes til geografi) og symboler (vedtatte konvensjoner som at bokstavene HEST betyr hest selv om de ikke ligner en hest). De symboler som er brukt er de vi kjenner fra andre websider, med feks krysset øverst som lukker vinduet, tilbakeknappen øverst til venstre osv.
Den andre formen for referensiell funksjon er den situasjonelle sammenheng - altså hvem du er som leser, hvor du befinner deg osv - alt utenfor min rekkevidde.

Den intertekstuelle funksjon: farger på skrift, typografi og grafiske elementer referer alle til webdesign. Alle lenker har samme farge (bryter litt med konvensjonen blå), og skriften Garamond er tilpasset nettvisning og er: tegnet etter gamle forbilder på 1930 tallet i London. En vennlig imøtekommende stemme (Nybakken: 2004) - i tråd med det helt fundamentale beskrivende for webblogg - en stemme. Seriffene gjør at øyet glir lett over teksten.

MOTTAKER:

Interaktivitet: Jeg prøver derimot å påvirke den imlisitte mottaker (den jeg tenker du er i forhold til målgruppen min: lærere, lærerstudenter og andre ikt interesserte), med forskjellige typer interaktiviteter. Ikke alle er på plass enda, men her er listen over konative funksjoner (mine henvendelsesformer som opptrer i form av imperativsetninger, som feks Flick-badgen) og interaktive funksjonformer som jeg har eller ikke har:

Den transmitterende funksjon: filmer
Den konverserende funksjon: e-mail, kommentarer, chat funksjon (skype)
Den transaktive funksjon: e-handel (drømmer om å skrive bok engang)
Den konsultative funksjon: søkfunksjon (vil jakte på en)
Den registrerende funksjon: Clustermap (klasekartet) og kommentarer (med tidsregistrering)

Kilde: Thorlacius Lisbeth: Visuell kommunikasjon på WWW (artikkel fra studiet)

Nettstedet har altså ingen homogen visuell identitet. Dette skyldes at jeg ikke har noen dedikert person - enda - som kan ivareta de ytre signaler. Og selv om jeg mangler ansikt (symbol) så har jeg en stemme ...

Med denne stemmen prøver jeg å nå deg (du er min implisitte mottaker), jeg din implisitte avsender (den tenkte avsender - den du tror jeg er). Du kan analysere meg ut i fra produktet (i følge Thorlacius) ved å sette fokus på følelser og holdninger som vises gjennom språkbruk go fargevalg - illustrasjoner, typografi og lyd etc. Dette er sidens ekspressive funksjon som vises gjennom mine bevisste og ubevisste intensjoner. Mellom oss knyttes en emotiv funksjon som angår oss begge:

Den første emotive funksjon: kommer til utrykk når de følelser og utrykk jeg skaper gjennom design samsvarer med din smak - altså når vi har samme smak.

Den andre emotive funksjon: kan være når jeg prøver å formidle en holdning til brukeren som jeg ikke selv står inne for.

Den tredje emotive funksjon: kan være følelser jeg fremkaller hos deg som absolutt ikke var min intensjon, som jeg ikke var klar over eller så ville komme.
Kilde: Thorlacius

Skulle du oppleve noe slikt (både på godt og vondt) så vennligst legg igjen en kommentar :O)