I tillegg til møysommelig bruk av jQuery.css() og .animate(), finnes det også litt mer «avansert» her. Det er forskjellige animasjoner som skjer avhengig av skjermstørrelsen:

if( $(window).width() >= 600 && $(window).width() < 768) {
    //kode
}
if( $(window).width() >= 768 ) {
    //kode
}
else{
    //kode
}

Dette gjør at ting fungerer selv om innholdet tilpasser seg nettleservinduet og forskjellige enheter. Animasjonen tar også hensyn til hvor langt ned man har scrollet i forhold til det elementet man trykker på:

function scrollSjekk(e) {
    if (e.offset().top / $(window).scrollTop() > 1.3) {
        //kode
    }
    if( e.offset().top -70 == $(window).scrollTop() ){
        //kode
    }
    else {
        //kode
    }
}

Det gjør at ting ser bra ut uansett hvor på siden man befinner seg, og gjør opplevelsen mest mulig sømløs. Den første biten regner ut forhold mellom elementet man trykker på og hvor langt man har scrollet på siden, den andre skjer dersom elementet befinner seg i "riktig" posisjon for animasjonen, og den siste skjer dersom man har scrollet forbi elementet før man trykker på det. Bruk gjerne litt tid på å sjekke det ut selv her. Det er ganske subtile variasjoner, men de små tingene kan utgjøre store forskjeller.

Dette har da jeg drevet med mellom fortæring av julemat og pakking av gaver, og jeg kan anbefale det som en god terapi for å bli kvitt julestresset. Videre har jeg lyst til å hente artiklene ved bruk av Ajax, for slik som det er nå, lastes alt innhold ned med en gang. Det spørs litt om jeg får tid til det med det første, for nå skal jeg begynne på bacheloroppgaven i nye medier, hvor jeg skal utvikle noe for Bergens Tidende. Jeg gleder meg!

Prosessen var egentlig ganske enkel, men jeg klarte å bruke en del timer på det likevel. Alt man trenger å gjøre er å følge denne guiden (under «Moving WordPress to a New Server»). Når man har gjort de stegene, burde man legge inn følgende tekst i «.htaccess»-filen på det gamle domenet:

Redirect 301 /gammel-adresse http://nyttdomene.com/ny-adresse/

Dette gjør at den gamle siden redirecter til den nye siden, slik at google osv skal oppdatere linkene og brukere som besøker den gamle siden automatisk kommer til den nye.

Om du følger denne siden via RSS må du dessverre subscribe på nytt, da jeg også bytter navnet på feedburner. Beklager det, men får håpe det er verdt bryet!

Selv om det finnes mye informasjon på nettet, er informasjonen ofte spredt, og det er knotete å surfe gjennom treff på Google, besøke diverse diskusjonsfora og andre generelle sider. Om man i tillegg vil ha informasjonen tilgjengelig mens man ser en episode blir det fort vanskelig å holde styr på alt og finne det man er ute etter.

Samtidig som de gode TV-seriene har gjort sitt inntog, har også laptopen og andre mobile enheter fått fast plass i sofaen. Omtrent halvparten av alle amerikanere ser på TV med en eller annen form for enhet på fanget. Rettet innhold til disse enhetene basert på hva brukeren ser på er et voksende marked og kalles for “the second hand experience”. Ved å gi seeren en nettside, “Serieguiden”, hvor all informasjon er samlet vil det komplimentere TV-tittingen fremfor å stjele fokus fra den.

Dette var premisset jeg jobbet ut i fra i forbindelse med en oppgave jeg hadde i interaksjonsdesign på UiB. Oppgaven var å lage en prototype på et interaktivt produkt ment å hjelpe mennesker i hverdagen eller på jobb til å lære, leke, sosialisere eller lignende. Prototypen kunne være alt fra et interaktivt fysisk apparat til en nettside. Den trengte ikke å begrense seg til dagens teknologi, men antagelsene om teknologien skulle være realistiske og tilgjengelig i en ikke så alt for fjern fremtid.

Det var viktig for meg at serieguiden skulle skille seg fra andre lignende nettsider. Derfor satte jeg karakterene og seriens univers i sentrum. Serieguiden skal være et sted for å gå dypt inn i enkeltepisoder og serier, ikke for å få et helhetlig overblikk over skuespillere og annen overflødig informasjon slik sider som IMDB gir. Nettsiden må også være tilgjengelig på alle type enheter, fra stasjonære datamaskiner til smarttelefoner, ved å støtte avanserte funksjoner som media queries. I tillegg skal den støtte forskjellige typer input-metoder. Prototypen går ut i fra at man kan ta opp lyd via nettleseren for å «lytte» til programmet man ser på TVen, på samme måte som Shazam og lignende programmer fungerer. Det gjør det lett for brukeren å finne riktig episode uten å vite navnet på den. Lydgjenkjenning på nett vil nok bli mulig i en ikke så alt for fjern fremtid, da W3C allerede arbeider med å utvide mulighetene for lyd i nettleseren. Manuelt søk må også fungere enkelt, og gi forslag basert på det brukeren skriver inn.

Serieguiden skal få innhold på samme måte som IMDB, hvor brukere bidrar med mesteparten av innholdet, og redaktører kvalitetsikrer og redigerer. Siden samler også lenker som er relatert til en episode, som anmeldelser og oppsummeringer fra sider som What’s Alan Watching, The A.V. Club og andre relevante sider. I tillegg kan brukere poste sine egne anmeldelser og diskutere episoder i diskusjonsforumet.

Poenget bak prototypen er at man kun skal trenge å besøke ett nettsted for å få all den informasjonen man trenger. Serieguiden er laget i Photoshop, så du kan stoppe å lete etter en link til siden. Vil du se flere skjermbilder derimot, kan du besøke portfolioen min.

På første oblig lagde jeg forøvrig en studieplanlegger til iPhone som kan sjekkes ut her.

Planen var egentlig å utvikle et eget slideshow og andre artige funskjoner i jQuery, men jeg rakk ikke dette i førsteomgang pga eksamensperioden og sykdom. Jeg har valgt å publisere en tidligere versjon av siden hvor jeg bruker shadowbox istedet. I første omgang er det kun fade-in som er aktiv på siden når det kommer til egen javascript-kode. Dette var en relativt enkel affære. Først gjør jeg alle elementene jeg skal fade inn usynlige. Deretter animerer jeg de inn igjen, en etter en, ved hjelp av en teller. Koden ser slik ut:

//henter ut elementene og itererer over de
$('#fade1, #fade2, #introundertittel, #content').each(function(i) {

    //setter opacity til 0 på alle elementene slik at de blir usynlige
    $(this).css('opacity', 0);

    //fader inn elementene med delay, hvor delay-tiden øker med hvert element
    $(this).delay(i*1500).animate({opacity: 1}, 1500 );
});

Siden jeg bruker wordpress, la jeg også inn et lite triks slik at scriptet bare lastes inn dersom man er på forsiden. Hele koden ser da slik ut:

<?php if (is_front_page() ){ ?>
<script type="text/javascript">
    $('#fade1, #fade2, #introundertittel, #content').each(function(i) {
  	$(this).css('opacity', 0);
  	$(this).delay(i*1500).animate({opacity: 1}, 1500);
    });
</script>
<?php } ?>

Planen fremover vil være å gjøre ferdig min implementasjon av jQuery-slideshow og tilpasse siden forskjellige skjermstørrelser.

Magien bak dette kalles media queries og er en ny funksjon i CSS3. For de som måtte bry seg, støttes det ikke av Internett Explorer 8 og eldre nettlesere, men det gjør lite da det vil fungere på de mest populære enhetene som iPhone og Android.

Tilpassing av siden

Media queries støtter en rekke forskjellige variabler, som høyde og bredde på nettleservinduet, høyde og bredde på selve enheten, om enheten er i landskapsmodus og enhetens oppløsning. Dette gjør det enkelt å tilpasse siden til forskjellige enheter basert på disse variablene. Man kan f.eks. lage en versjon tilpasset små enheter, en til tablets og netbooks, og en for laptoper og stasjonære.

Alt man trenger å gjøre for å begynne er å legge til denne kodesnutten nederst i css-filen:

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

}

All kode som legges inn i denne kodesnutten vil da kun gjelde nettleservinduer som er 480px bred eller mindre og enheter som har en skjermstørrelse på 480px i bredden eller mindre. Her kan man som nevnt velge ut i fra mange forskjellige variabler, og man kan også ha flere slike etterhverandre, slik at siden dynamisk endrer seg etter forskjellige skjermstørrelser eller vindustørrelser.

Etter man har bestemt seg for de størrelsene man ønsker, er det bare å begynne å designe for de nye formatene. Det som er kjekt er at den gamle css-en fortsatt gjelder, og man bare overstyrer de elementene man ønsker. For mobile enheter er det f.eks smart å sette bredden på innholdet til auto, slik at innholdet tilpasser seg forskjellige enheter. Her er ett eksempel:

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

     #content{
          width: 100%;
     }

     img{
          max-width:100%;
          height:auto;
     }

}

Her er det egentlig bare å prøve seg frem og se hva som ser bra ut. Til slutt må du legge til følgende kode i head i html-filen:

<meta name="viewport" content="width=device-width" />

Dette gjør at siden tilpasser seg bredden til mobile enheter.

Testing av siden

For å se endringene du har gjort, finnes det flere muligheter. Den første er simpleten å endre størrelsen på nettleservinduet. En annen mulighet er å bruke ProtoFluid. Her kan man se hvordan siden vil se ut på iPhone, iPad osv. Merk at den bare tilpasser høyden og bredden på vinduet, så den kan se annereldes ut på den faktiske enheten.

For en dypere innføring i dette emnet anbefaler jeg artiklene til A List Apart og Smashing Magazine. Webdesignerwall har også en god artikkel om emnet, og javascript-hacks for å få det til å fungere i Internett Explorer 8 og eldre nettlesere. Jeg svarer også gledelig på spørsmål i kommentarfeltet.

[...] nye medier handlar om digitaliseringa av både produksjon og distribusjon av medieinnhald. I denne prosessen er det viktig med kompetanse både om tekniske løysingar og verktøy. Det er også viktig å vite korleis dette kan nyttast i journalistikken og når ein skal formidle ein bodskap.

Nye medier er med andre ord et paraplybegrep som kan dekke det meste av digitalt innhold og produksjon. Ved å vise til det praktiske arbeidet jeg har gjennomført i løpet av de to første semestrene vil det forhåpentligvis bli tydelig hvor omfattende det er.

Første semester startet med å skrive for studentprosjektet Brostein. Her skrev jeg en artikkel om den nye haitunnelen i Bergen akvarium og, sammen med Marius, en anmeldelse av Fifa10 (Lenker er dessverre ikke tilgjengelig da de ikke finnes på Brosteins sider lenger). Jeg var også med på å lage grafikken og vignetten for videoene som ble publisert på Brostein det semesteret.

Vi hadde også et grunnleggende HTML og CSS-kurs. Den første ordentlige siden jeg lagde var en side om Led Zeppelin (med innhold fra ikkepedia). Deretter lagde jeg, Yngve og Torje en nettside som inneholdt julegavetips, som ga tips til hva slags gaver man skal gi til forskjellige stereotyper. Så hadde vi et grunnleggende kurs i foto og video, men jeg har ingenting håndfast å vise til , bortsett fra min side på Flickr.

Dette var alt vi gikk gjennom første semester (dersom jeg ikke har glemt noe). Etter en velfortjent ferie var det i gang igjen med mer praktisk arbeid. Vi fortsatte å lære om video og lyssetting og vi hadde et grunnkurs i flash. Sistnevnte kunnskaper ble brukt for å lage et interaktivt kart over Bergen sentrum. Det er viktig å merke seg at dette kun er en prototyp og litt røff i kantene.

Vi bygde også videre på HTML og CSS-kunnskapene våre, og lærte i tillegg litt PHP og satte opp våre egne wordpress-blogger. Jeg og Marius samarbeidet om å lage en videoblogg som du kan ta en titt på her. På dette punktet hadde allerede hkjersem.com/blogg eksistert en stund, så dette ble mest repetisjon for min del.

Vi skrev også en nettstedsanalyse, hvor jeg skrev om nettstedet culturedcode som er hjemmesiden til task managment-programmet «Things». Til slutt samlet vi alt i en innleveringsmappe som du finner her. Etter at du har besøkt alle de forskjellige sidene jeg har laget i løpet av det første året på nye medier, håper jeg det er tydelig at sidene bare blir finere og finere:)

I tillegg til dette lærte vi også grunnleggende programmering i Java. Vi leverte til sammen 5 obliger, som til slutt ble et ganske simpelt rollespill, som jeg skal forsøke å legge ut en link til så snart som mulig.

Dette var stort sett det vi gjorde av praktisk arbeid, med unntak av noen innleveringer og semesteroppgaver som bare var ren tekst, og som jeg derfor velger å ikke presentere her. Håper dette ga en liten innsikt i hva nye medier er og hva man kan forvente å lære, og det ga meg en liten oppvekker på hvor mye vi faktisk rakk i løpet av et år.

Bookmarklets installerer man enkelt bare ved å dra en link inn i bokmerkelinja i nettleseren. Man kan også høyreklikke på linken og velge «lagre som bokmerke» eller hva nå nettleseren din har valgt å kalle denne funksjonen.

Noen nyttige bookmarklets

Lenkene under peker midlertidlig til en ekstern side, da WordPress ikke likte å linke direkte til bookmarkletsene. Tips til å fikse dette mottas med takk.

Readability

Har du noensinne kommet over en side som har så dårlig layout at det er vanskelig å lese teksten? Frykt ikke, denne bookmarkleten tar ut teksten og viser den i en veldig lesbar form.

Åpne PDF i Google Viewer

Denne bookmarkleten konverterer lenker til pdf-filer til å åpne i Google Viewer, en enkel og kjapp PDF-leser. Da slipper man at PDF-filer åpnes i et eksternt program, eller kaller en nettleserplugin som henger maskinen.

Lage side som PDF

Kjekt dersom man vil lagre en side til senere. Kanskje planlegger man å lese innholdet når man ikke har tilgang til Internett, eller rett og slett bare arkivere siden, da alt på Internett er i konstant endring.

Bugmenot

Det finnes mange sider der ute hvor man må registrere seg for å få tilgang til innholdet. Personlig har jeg registrert meg på mange slike sider, bare for å få tilgang til en spesifikk ting. Her kommer Bugmenot til nytte. Det er en database over brukernavn og passord til de fleste nettsider. Brukerne kan stemme på hvilke som fungerer og ikke, og sannsynligheten er derfor stor for at det første brukernavnet og passordet vil fungere. Anbefales!

Dette var et lite knippe av hva som finnes der ute. Et enkelt søk på google vil gi deg en idè om hvor nyttig dette kan være, og ikke minst hvor mange som finnes der ute.

bilde spackletoe

Den utvikler bein, kanskje armer. Kanskje tilogmed tomler. Tomler er visst det som er den viktigste forskjellen på mennesker og aper. Bortsett fra intelligensen da. Har den hjerne forresten? Denne tingen som nå plutselig har både bein og armer, med fleksible tommeltotter. Kanskje har den enda en ekstra finger, og snart tar igjen menneskene når det kommer til intelligens. Hvorfor streber egentlig alle etter å være så intelligente? Hva oppnår vi egentlig med store hjerner. Logisk tenking? Min oppfatning er at det setter opp en god del murer opp for seg selv. Man blir innsnevret, man ser det man vil se, og bare det som er innenfor ens egen oppfatning. Men, men, takk gud for at vi ikke vet alt.

Hvem er egentlig gud? Han har sikkert mange tomler. Tenk bare hvor smart han må være. Eller, kanskje han ikke har tomler i det hele tatt. Kanskje bananene hersker. Egentlig. Det er jo genialt. Ingen ville gi skylda på bananene. De er uskyldige. Alltid uskyldige. Ingen vil noen gang si ”det var bananen som gjorde det!”. Aldri! Genialt.

Men hvorfor har vi ikke oppdaget det? Hjelper virkelig tomlene stort? Sett i det store bildet mener jeg. En ekstra finger som har en litt annen vinkel enn de andre. Hva om vi hadde noe tilsvarende på føttene? Da ville vi garantert blitt mye mer effektive. Men vi bare dytter føttene våre ned i vondtluktende sko, ikke rart foten ikke gidder å gjennomgå en aldri så liten evolusjon og få tær i alle himmelretninger. Uansett ville vi bli sett på som annerledes, og mest trolig fått den kirurgisk fjernet.

Alt dette pga. logisk tenking. Vi er en og samme art, dermed skal vi være like. Men hva er nå logikk? Finnes det? Eller fant menneskene det opp fordi vår IQ ikke strakk til? Får man virkelig mer forståelse av ting rundt en, jo smartere en er? Uansett, hvem vil vel vite alt? Da mener jeg alt. Ikke bare masse, men altomfattende bevissthet om du vil. Om det er noe… Jeg har i hvert fall ikke nok fingre til å kalkulere det, og selv om jeg hadde nok fingre, så er det ikke sikkert de står i riktig vinkel.

Dette må forskerne ta tak i. Eksperimentere med fingre. Glem forskning på hjernen. Konsentrer heller om det som er rett foran oss, det mest brukte hjelpemidlet mennesker har. Fingre, hender, armer… kroppen. Selvfølgelig teller det indre, men kanskje vi overser ytre attributter? Bare i det jeg sitter å skriver nå, mister jeg mange av tankene mine, fordi fingrene mine ikke er effektive nok. Tenk om jeg skrev fortere, da ville jeg mest sannsynlig ha kunne løst flere uløste gåter. Hadde de store tenkerne i verden sett mer på tomler, og dens viktige rolle i verden, da, ja kanskje da ville vi forstått mer på flere plan.

Nå har det bosatt seg en liten svak skapning på skjermen min. De tiltrekkes av lys. Varme. Kanskje den sanker informasjon fra skjermen min. Kanskje ikke. Den har ingen tomler, så jeg tviler. Den ser ganske stakkarslig der den sitter, loddrett på en lysende, varm skjerm. Den kan umulig være særlig smart. Men igjen så har den flere bein enn oss. Kanskje det også er viktig. Jo flere, jo bedre, men så er det jo også kvalitet fremfor kvantitet. To armer med tomler er bedre enn seks bein uten. Ikke vet jeg. Det er også noe folk burde ta tak i.

Jeg kjenner at jeg burde bruke mer av min tid til å forske. Forske på alt mulig. Tenkte på ting man kanskje ikke vanligvis tenker på. Hva om vi hadde operert på tomler på insektets alle seks bein? Ville det skjedd en evolusjon over tid? Ville den dominert over de andre innsektene, og dannet en ny art. En art bestående av smarte innsekter, med bevegelige vinkleriktige tomler. De har jo tross alt mye makt, om de hadde visst hvordan de kunne brukt den. De har muligheten til å utrydde alt på denne jorda. De tukler med en vital bestanddel av alle skapningers kropper. Blodet. Blodsugere er de. Det eneste beviset på at vampyrer finnes, riktignok uten tomler. Hollywood skal alltid ta smør på flesk. Men det hadde vel ikke vært det samme med vampyrfilmer spilt av innsekter… Kanskje om de hadde fått operert på tomler. Det må jeg notere meg bak øret, ett filmanus kanskje, med innsekter. Neste evolusjons insekter. Det tror jeg hadde blitt noe.

Den sitter der fortsatt. Sanker informasjon ser jeg for meg. Jeg ser det nå. Den er ikke så dum som vi tror. Kanskje den bare fungere som et slags spionkamera for noe mektigere. For noe med tusenvis av tommeltotter. Hvem nå enn det er. Må være en mektig skapning. Kanskje fra en annen planet. Hva vet vel jeg. Det må jo finnes noe der ute, som kanskje var heldigere enn oss og blir naturlig født med ett mektig antall tomler. Det åpner jo opp en hel del nye muligheter.

bilde herr_hartmann

Dette er første gangen jeg har laget et eget WordPress-tema, så hvor robust det er vet jeg ikke enda. Fint om dere rapporterer eventuelle feil dere kommer over Nå må dere unnskylde meg, har fortsatt en god del tweaking igjen før ting fungerer nogenlunde optimalt.

Neste er Lady and the Reaper. Starten minner meg litt om Se opp, men utvikler seg fort til å bli en kamp mellom mannen med ljåen og en selvgode lege med dameteke. Veldig underholdende og godt laget animasjon. Det går dessverre ikke an å embedde denne, men du kan se den her.

Wallace & Gromit med sitt bidrag A Matter of Loaf and Death er også bra, og følger den gode gamle stilen. Anbefales dersom du liker deres øvrige filmer:

Oscarvinneren

Filmen som stakk av med årets pris var Logorama. Her er alle karakterene og byggningene kjente logoer og merkevarer, hvor blant annet Ronald McDonald er skurken og Michelin-menn er politet. Handlingen er ikke det viktigste, men snarere det stilistiske uttrykket. Det er ganske utrolig hvor mange detaljer som er presset inn her, og det gjør at den også kan sees mange ganger. Avsluttningen alene gjør at denne er verdt å se!

De har dessverre fjernet muligheten for å embedde filmen, men den kan sees i sin helhet her.

Til slutt

en som dessverre ikke ble Oscarnominert, The Cat Piano fortalt av Nick Cave. Dette er poesi med tilhørende nydelig animasjon. Anbefales!

via montages.no
bilde logorama-themovie.com