Mens musikken fra hovedscenen er fylt med sampling fra jingler kjent fra 8-bit Nintendo og enkelte deltagere løper rundt ikled kostymer som forestiller creepers fra Minecraft eller Pikachu fra Pokemon løses rubiks kuber og kruttsterk kaffe drikkes. I tillegg er det laget et webside hvor deltagerne kan skru av og på en lampe på UiO-standen ved hjelp av et web-interface eller delta i en krevende hacking-oppgave som involverer mange skills fra charset, cæsars-kode til nivåer jeg ennå ikke har kommet til

Fra et musikkperspektiv er det morsomt å observere en tilnærmet tredeling av hvordan deltagerne hører på musikk. Fra hovedscene drønner bassen fra egenkombinerte sanger fra kreative konkurranser og fra kjente DJer (fra nesten bare elektroniske sjangere), i gruppene spilles det gamle klassikere for hverandre (om ikke GAMLE, så iallefall sommerhits fra et par år tilbake) og individuelt brukes det headset hvor flere blander alle lydene som måtte komme fra aktivitene de driver med, enten om det er spill, filmer, YouTube, programmering eller gamle episoder av Derrick. Jeg tror nok i de fleste tilfellene at musikken mer opptrer i bakgrunnen enn aktiv lytting, men med en så stor og mangfoldig gruppe er det vanskelig å si noe sikkert. Uansett, det er veldig spennende og interessant å være på denne arenaen som nå etterhvert begynner å få den oppmerksomheten den fortjener (for å si det sånn, jeg tror flere ungdommer er interessert i internett, gaming og data enn skirenn i Holmenkollen og skøyteløp i, ja, Vikingskipet). Artikler fra Vikingskipet finnes i de fleste riksmedier og fornyingsminister Åsland var med på åpningen (som du kan lese mer om på Morten Dæhlen sin blogg).

Her er utklipp fra en liten video jeg filmet i nærheten av UiO-standen.

Click here to view the embedded video.

Et av de morsomste aspektene ved screen scraping, syntes jeg, er å forstå hvordan innholds-serveren er satt sammen og dekonstruere denne. Ettersom få organisasjoner (og personer for den saks skyld) håndkoder hver HTML-side de viser til offentligheten ligger det et system bak sidene som publiseres. Hvordan hele nettstedet er organisert og hvordan hver enkelt side er lagt opp er et godt utgangspunkt for å forstå strukturen. Mange nettsteder følger i dag også en REST-arkitektur, og dette gjør at vi kan finne ut mye bare av å se på URLen vi bruker for å få tilgang til sidens forskjellige funksjoner. Mange slike sider er laget med populære rammeverk med REST-implementering slik som Ruby on Rails og Django, som også har tilrettelagt for en enkel implementasjon av data-grensesnitt slik at spørringer kan resultere i et dataformatert svar som for eksempel XML eller JSON imotsetning til et template-basert HTML svar. Hvis du kan spørre om et datasvar kan du muligens finne dataene dine uten å scrape. Uansett, i mange tilfeller et klipp-og-lim eller filopplastning fra Excel eller Word klippet inn i et web-grensesnitt eller endret programmatisk til HTML, eller data hentet fra et annet datasystem matet til publiseringsportalen også i HTML. I disse tilfellene trenger vi å tweeke og endre litt for å hente ut data.

Et slag for demokratiet (?)

Francis Boulle, kanskje mest kjent fra TV-serien Made in Chelsea, har laget siden sexymp. På denne siden blir du presentert med bilder av to representanter fra det britiske underhuset. Din oppgave er å klikke på den mest attraktive personen, og basert på dine og andres klikk rangeres representantene. Dette systemet er nærmest identisk med siden som Mark Zuckerberg setter sammen i åpningsscenen i filmen The Social Network fra 2010. Det kan være spennende nok å se på vektingsalgoritmen og prøve å forstå hvordan Chris Evans fra Islwyn blir ansett som den mest og Steve McCabe fra Birmingham den minst attraktive, men for vår undersøkelse er det mer interessant å se hvordan vi kan innhente navn og bilder dersom vi ønsker å lage en tilsvarende side for Norge.

Stortinget.no

Et bra sted å begynne dersom vi skal utvikle en norsk sexymp (eller et annet atributt som f.eks troverdighet, ærlighet, classyness osv.) er Stortinget.no. Hvis vi går inn i listen over representanter kan vi finne ut at URLen har følgende oppbygning: http://stortinget.no/no/Representanter-og-komiteer/Representantene/Representantfordeling/Representant/?perid=SMY (for Sverre Myrli fra Arbeiderpartiet) og tilsvarende for en annen representant: http://stortinget.no/no/Representanter-og-komiteer/Representantene/Representantfordeling/Representant/?perid=IME (Ine Marie Eriksen fra Høyre). Hvis du studerer disse URLene nøye, hva er det som det er verdt å merke seg? … Ja, nemlig, representantene har en ID.

La oss nå gå inn å se på hvordan Ine Marie Eriksen sin profil egentlig ser ut. Siden nettleseren din, når du åpner en side, kun laster ned et dokument med angitte referanser skjer det ikke noe magisk (okey, med web 2.0 med Ajax og masse Javascript, eller Flash, Silverlight og andre plug-ins kan det virke mer mysterisk eller være veldig vanskelig å titte inn i boksen). I alle nettlesere kan du få tilgang til råteksten som senere skaper siden, og hvis du går inn å ser på denne kan du finne ut hvordan siden er bygget opp og hvilke andre ressurser (som f.eks bilder, stylesheets, javascript-kode) som kalles. Forsøk nå å se på HTML-filen til Eriksens stortingsbio og se om du kan finne bilde-ressursen.

Der ja, på linje 472 finner vi følgende HTML-snutt:

Dersom du følger denne filbanen med stortingsdomenet slik at URLen du benytter er: http://stortinget.no/Personimages/PersonImages_Large/IME_stort.jpg vil bare bildet åpnes. Du har nå funnet bildet som hentes inn i bio-siden vi tidligere åpnet. Nå kan du forsøke å åpne bildet til Sverre Myrli ved hjelp av kun hans system-ID som er SMY og URLen til Ine Marie Eriksen.

Hvis du nå har byttet “IME_stort.jpg” med “SMY_stort.jpg” har du forstått hvordan vårt detektivarbeid har bært frukter, og at vi nå kan få tak i alle bildene dersom vi har alle IDene. Vi trenger nå to ting: En liste over alle representantene med deres respektive IDer, og en måte å laste ned bildene til vår lokale maskin. Det er på tide å scripte litt.

Python

Det vi skal gjøre nå kan du gjøre i alle multi-purpose programmeringsspråk, men jeg har valgt å bruke Python. Jeg syntes Python er et flott språk å bruke til å løse små oppgaver hvor det er mye prøving og feiling involvert. Det finnes også veldig mye dokumentasjon og litteratur om Python i forskjellige roller, det kommer med mange nyttige biblioteker som kan brukes “right out of the box”, og det er allerede installert i de fleste Linux-distribusjoner og på alle Macer.

Jeg har lagt ut forskjellige kodeeksempler på GitHub, og du kan finne kildekoden vi bruker videre i denne lille artikkelen der. Dersom du ikke har installert Python eller mangler noen av bibliotekene jeg benytter finnes det mange gode guider på nettet på hvordan du kan få fikset dette.

Som tidligere nevnt er en av de første tingene vi trenger en liste over alle representantene. Heldigvis for oss finnes det en side med en slik liste. På siden med URL http://stortinget.no/no/Representanter-og-komiteer/Representantene/Representantfordeling/ finner vi en komplett liste over alle representantene med navn, parti, stortingsnummer og ID. Hvis vi åpner siden i en nettleser får vi ikke opp IDen, men denne finner vi dersom vi istedet ser på kildekoden. Dette er nok fordi IDen ikke er så viktig for de fleste besøkende, men for stortingssystemet er essensiell og derfor er den viktig for oss også. For å finne den informasjonen vi trenger før vi kan gå videre må vi gå inn å ta en nærmere titt på HTML-kilden.

Her kan du se at representantlista er lagt inn i en tabellstruktur. tr-taggen er table row og td-taggen er table data. Nedover kan vi se at tabellstrukturen er fast så vi kan ta utgangspunkt i denne, men i scriptet findPerId.py  har vi tatt utgangspunkt i et annet gjengående mønster. Alle representantoppføringene har en link-struktur som følger et bestemt mønster.

Det at vi har et bestemt mønster bestående av “Representanter-og-komiteer/Representantene/Representantfordeling/Representant/”, etterfulgt av et spørsmålstegn som igjen følges av en HTML closing bracket (“>) og så to tekststrenger separert med et komma (,) og at dette mønsteret ikke finnes på andre steder enn akkurat der hvor vi ønsker å finne data er bra for oss. Dette kan vi nemlig representere med regulære utrykk

Vi kan selvsagt hente hele HTML filen fra Stortingets nettsider og kjøre scriptet på all tekst, men hey, nettleseren din parser HTML så det kan jo vi gjøre også. Etter vi har lastet ned dokumentet via HTTP-protokollen med urllib2 sender vi HTML-teksten til BeautifulSoup som gjør at vi kan hente ut alle anchor-taggene og begrense RegEx sjekken vår til disse. Mange av linkene vil feile mønsteret vårt, og det er jo litt av poenget ettersom verken “tilbake til forsiden” eller “rettighetsinformasjon” er representanter vi ønsker å hente ut fra systemet. Siden vi har gruppert treffene i tre grupper ved hjelp av paranteser vil vi kunne hente ut henholdsvis brukernavn, etternavn og fornavn. Etter vi har hentet ut all informasjonen vi trenger skriver vi denne til en kommaseparert fil (populært referert til som CSV) som vi da kan hente inn i vårt neste script.

Laste ned bilder programmatisk

Etter å ha kjørt findPerId.py i forrige avsnitt har vi nå en lagret CSV-fil med fornavn, etternavn og ID på stortingsrepresentantene. Nå trenger vi bare å iterere igjennom denne listen og laste ned bilder for våre folkevalgte. Scriptet som gjør denne jobben heter downloadPictures.py og dette benytter metoden urlretrieve fra urllib biblioteket til å forespørre hvert enkelt bilde, laste dette ned og plassere det i en folder vi oppretter med os.makedirs (hvis ikke folderen vår allerede eksisterer). Bildene vi skal laste ned har før og etter representant IDen følgende tekst:

Som du sikkert kan forstå fra disse variabelnavnene og tekststrengene er at det for hver representant er både et stort og et lite bilde. Metoden urlretrive tar to argumenter hvorav det første må være den absolutte filbanen, altså med IDen samt teksten før og etter i URLen, outfolderen kan benytte en relativ filbane så her kan du endre filnavnet dersom du ønsker det.

Veien videre

Når du har kjørt begge scriptene har du både navn, id og bilder av alle stortingsrepresentantene, og hvis du har lest teksten og googlet ukjente navn og fremgangsmåter har du også lært noe nytt. Lykke til med videre bruk og andre eksperimenter.

Dette innlegget er skrevet på UiOs stand under The Gathering 2012 på Hamar, en myldreplass for kreativitet. 

Når du skal kjøpe ny TV er utvalget av som møter deg i butikken overveldende. Med sterke farger og skarpe linjer skal du overbevises om at akkurat Sony, Philips eller Sharp er merket for deg. Problemet når du skal velge i dagens TV-marked, sammenlignet med tidligere, er at produksjonen av apparatene og funksjonene de inneholder i stor grad er standardiserte og i liten grad skiller seg fra hverandre. Å velge en TV produsent over en annen har derfor mindre å si enn for eksempel å velge mellom et Android eller iOS produkt. Når du skal kjøpe en gaming-TV er det derfor andre kravspesifikasjoner du må bestemme deg for, noen av disse spesifikasjonene er personlige som for eksempel hvordan du liker at fjernkontrollen ligger i hånda eller vinkelen på de avrundede hjørnene rundt skjermen, men det er også en del tekniske, objektive spesifikasjoner som det kan være lurt å følge.

Før du går til butikken for å se hva de har tilgjengelig bør du ha forberedt deg hjemme og tenkt over et par ting:
- Hvor mørkt er rommet du ønsker å sitte i?
- Hvor nær Tven kommer du til å sitte?
- Hvor mange eksterne apparater kommer du til å koble til (konsoller, dekodere, medieavspillere)
- Vil du benytte lyd gjennom apparatet eller har du eget anlegg for lyd.

Disse spørsmålene vil hjelpe deg å finne ut av hvor sterk bakgrunnsbelysning du vil trenge, hvor stor skjerm du kommer til å trenge, hvilken oppløsning du burde velge, hvor mange innganger du kommer til å trenge, og om du burde påkoste en TV med bedre lyd. Det som er viktig å huske på er at ved å gjøre et valg utelukker du andre alternativer eller øker prisen du må gi for å få en TV som dekker dine ønsker og behov.

Plasma eller LCD

Et valg som må bestemmes er hvorvidt du skal velge en TV med plasma eller LCD visningsteknologi. Tradisjonelt har plasma blitt tilskrevet å ha bedre fargegjengivelse og spesielt på mørke farger. Dette skyldes at LCD, liquid crystal display eller flytende krystall skjermer, hittil har benyttet en hvit lyskilde bak eller på siden av fargeflaten. I dag blir dette bakgrunnslyset i stor grad blir avgitt fra LED-punkter (derav navnet LED-TV), som har tatt over for mer strømslukende og varmeutviklende teknologier. LED, som står for light emitting diode eller lysavgivende diode, er en stadig mer populær lysteknologi som gir mye lys og bruker lite strøm. Dette har resultert i slankere apparater. Det er per i dag flere teknologier som forsøker å fjerne baklys-metoden og LCD-flaten med fargepunkter som også avgir lys. På CES-messen i Las Vegas tidligere i år viste Sony fram sine Crystal LED-skjermer og flere produsenter viste fram skjermer basert på Organisk LED. For begge disse teknologiene er det hvert fargepunkt som også avgir lys og i forhold til aparater som bruker baklys får du et større fargespekter, bedre fargemetning og du slipper noen av problemene bakbelysning fører med seg. I tillegg sies det at disse teknologiene er enklere å tegne til, og derfor vil Tven bruke mindre tid fra å ha motatt signalet til dette er vist på skjermen.

Størrelse

Size does matter, og skjermstørrelsen spiller definitivt inn på hva slags TV mange ser for seg, men også her kan det være lurt å ta et bevisst valg. Er størst mulig TV alltid det beste? Dersom du blir sittende for nære en stor skjerm kan dette være slitsomt for øyet som stadig må bevege seg for å endre fokusområde på skjermen. Samtidig er det viktig å huske at oppløsningen på signalet skal fordeles utover hele skjermen og at antall punkter per kvaderatcentimeter reduseres med størrelsen. Skal du sitte plassert et lite stykke unna apparatet kan en stor TV være en god idè, men dersom du trenger en TV til det 10 kvaderatmeter-store spill-rommet burde du nok ikke gå for en 70-tommer.

Vi har så vidt nevnt oppløsning, og selv om dette har vært et veldig viktig aspekt tidligere har vi nå kommet til et punkt hvor de fleste Tver selges med full-HD. Full HD vil si at skjermen kan vise 1080 horisontale linjer ved et bildesideforhold på 16:9. Dette er den høyeste standardiserte oppløsningen som komersielle Tver har for øyeblikket. Alternativet, som ofte kalles HD-ready eller 720 har tilsvarende en oppløsning på 720 linjer.

Tilkoblinger

Som gamer er tilkoblinger viktig. Det er ikke kun èn boks som skal kobles til, men ofte mange forskjellige enheter. Mange har en tuner for TV-signalene, en DVD eller Blueray-spiller, en avspiller for digitale filer, kanskje en kabel liggende for tilkobling til laptop, og flere spillkonsoller. Med mindre du ønsker å måtte fysisk flytte fram TVen for så å tråkke i kabelsalaten kan det være greit å velge en TV hvor du kan koble til alt du måtte ha av nye og gamle spill konsoller. Hvis du velger et apparat med tre-fire HDMI-innganger og et par Scart-innganger kan du ved hjelp av fjernkontrollen switche mellom Gears of War på Xboxen, og Zelda: Occarina of Time på din Nintendo 64. Når du først har koblet flere enheter på Tven kan det være lurt å samtidig tenke litt på hvordan alt skal høres ut.

Lyd

Det visuelle spiller helt klart en stor rolle i spillopplevelsen, men det blir ingen helhetsfølelse uten lyd. Alle Tver kommer med innbygde høytalere og forsterkere, men også her er det stor forskjell på apparatene. Ettersom masseproduserte skjermenheter har blitt relativt standardiserte og rimlige legger mange produsenter sin prestisje i lyd-delen, samtidig har hjemmekinotrenden virkelig fått fart på salg av avanserte surround-systemer, og kanskje du allerede har et lydsystem som kan brukes. I såfall burde du sjekke at Tven du ønsker å kjøpe har en utgang som støtter digitallyd. Både Playstation 3 og Xbox 360 leverer 5.1 dolby sourround, og dersom metoden din for å koble TV-apparatet til forsterkeren din er gjennom hodetelefonutgangen går du glipp av mye opplevelse. Her kan du også spare penger ettersom lyd aspektet av apparater med veldig god lyd blir overflødig dersom du bruker et separat hjemmekinoanlegg som lydkilde.

Smart-TV

Hittil har datamaskinene gjort sin inntreden i både mobiltelefoner og tablets, og det var bare et spørsmål om tid før også Tvene ble smarte. Ideen er ganske enkel: Plasser innmat fra en datamaskin i en hvilkensomhelst annen teknologi, lag en måte å styre programvaren og koble til en skjerm. Som gamer kommer du nok oftest til å se skjermbildet fra din konsoll, men når spill i større grad er tilkoblet Internet, og oppdaterer resultater og sosiale aspekter til verdensveven kan det være praktisk å kunne se disse dataene igjennom Tven.

Alt klart

Å investere i en TV har blitt enklere og mindre risikabelt ettersom prisene har har sunket og de brede, masseproduserte skjermenhetene har fått et forholdsvis godt innslagspunkt kvalitetsmessig. Prisene er ofte høyere dersom du velger apparater med cutting-edge teknologi, og det kommer til å bli dyrt for de første apparatene med OLED eller krystal LED. Ofte vil du også oppleve at en TV nå er mye mer enn bare skjerm-enheten som er plassert i boksen. Software med forskjellige grensesnitt, ambilight, minnekortlesere og annet småsnacks er også ting produsentene har plassert i apparatene for å gjøre de mer ettertraktet og for å skille de fra konkurrentenes. Det kan ofte være lurt å sjekke de objektive fakta med apparatenes spesifikasjoner, størrelse, responstid og oppløsning er bare noe produsentene klisterer med fancy farger og under fine logoer på skjermen. En god innkjøpsstrategi kan være å la produsentene forsvare prisen på produktet, og sammenligende argumentasjonene mot dine ønsker og krav. Er apparatetet dyrt fordi det inneholder en stor og fin forsterker som leverer gromlyd er dette irrelevant dersom du ønsker å bruke hjemmekinoanlegget til lyd. Ved å være bevist på dine egne krav, ønsker og muligheter kan du spare mye penger, penger som du kanskje ville ha brukt dersom du hadde kjøpt det beste og feteste på markedet, men som du aldri ville ha utnyttet til fulle.

Bildet er tatt av Duncan Rawlinson (thelastminute) og publisert på Flickr under en Creative Commons lisens. Her kan du finne bilde.

To look closer on the social web I have recently bought the book with the self explanatory title Mining the Social Web, I have also established a GitHub repository in which I will try to publish some of my scripts. Please have a look, clone and come with feedback.

The projects English website and Norwegian website

The picture is a word cloud made up from genre tags, in courtesy of the project

A digital copy is a perfect copy. Since all media expressions can be represented in zeros and ones cloning these patterns will make a identical copy, no loss involved (unless intended e.g. by compressing). This has removed some of the downsides that were with analogues copying. Before digitalisation the process of mechanically copying on exemplar to another involved technologies that also removed some of the quality for each reproduction iteration. The copying process was also bound to either temporal or geographical space: a mixtape required tapes and recording of broadcasting was limited to when programs were broadcasted. Today a request to a file server or another peer will initialise a transfer.

With the Interconnection between computers, through the Internet, this effect has accelerated. Groups of networks does not only grow linear in number of nodes, they also grow exponentially in number of connections between nodes, and new technologies harness this. With peer-to-peer or torrent technology which work decentralised and with designated parts of files sent through the Internet copying is very efficient.

This impacts our life world. Information is now at everyone fingertips (earlier just metaphorical, but recently also literally). To google has for years been a generic term for searching through the abundance of information made available, and more and more organisations are making their information available online. Live-feeds of time data from public transports providers, menus from restaurants, telephone directories, books, tv-series, music and movies are accessible through the Internet. The Internet has become everyone’s personal media and data repository. This effect is only increased with a recent emphasis on cloud computing.

With new ways of acquiring information comes new behaviour and expectations. The intellectual property organisations of the culture industry has several times told us piracy is stealing, but even if copyright infringement is against the law the examples used, e.g. “you wouldn’t steal a car”, is not representable as stealing a car would be theft of something with physical material value and something of physical exclusivity (I’m driving a car deprives you of the possibility to drive the same car). One should remember, however, that just a little cost of the production of a cultural artefact is in the physical product, the true value is in the production process. Well, enough of the law and philosophical consideration. Let’s speak about:

Free + Expectations = Freexpectation

Grown up digitally, information, as I perceive it, is free. So what is free? Richard Stallman has learned us that a distinction must be made. You get free beer, free speech or both. The first is good as you can save some pocket money, but the second is crucial in a liberal democracy. The second part of the distinction is often entitled with the word “libre”. The free presumptions which follows the web can, according to Manuel Castells, be traced back to the initial user groups working on the Internet. Scientists within the university and military sphere who lay out the architecture of the Internet placed more emphasis on alternative routing (through packet switching), open standards (TCP/IP, HTTP etc are free to implement and build upon) and equality (two-way traffic and later the culturally groups of prosumer and hobbyist culture producers through e.g. YouTube) than intellectual property protection. In the Internet sphere mash-up and other forms of mixing and building upon culture and data is considered to be a good, not necessary a matter of copyright infringement.

The definition of free is also dependent on the idea of the user. In a traditional broadcasting economy where the culture institutions have a exclusive right to be the sender limited by legal and/or physical laws the user is pretty much limited to be the receiver. With the Internet and its ways of physically transferring the signals and its free jurisdictional corpus regulating the medium the limits to who can act in various roles are limited to other contrast. No doubt broadcasters and news agencies are the ones going to war zones to report upon what is happening. A very few have time, interests and the economical means to conduct such research on their own. In other cases, however, actors not traditionally associated with the trade can now do more than before. The nature of the constraints have changed. The user now have tools earlier limited by restrictions, legal or economic, to partake in the creation of cultural artefacts, and the user can also distribute these artefacts. A lot of these creation processes involves sampling of other peoples work. Not just music, but all forms of cultural artefacts that can be represented on a computer can also be basis, or a part of new creations. The initial groups of the Internet made their works (code) freely available, and the code community has established many paths to reuse of other’s work. Legally GNU GPL, MIT Licence and more are encouraging users to build-upon creations, in code-methodology object orientation creates a paradigm where classes can be implemented into code without a tight coupling and hence easier to adapt.

Don Tapscott mentions in his book Grown up digitally how the “net generation”, the recent generation which grew up with the net, are more apt to take a larger involvement in buying and configuring products. This way they have gain the name “prosumer” which is made up of producer and consumer. The traditionally consumption patterns exists in lesser degree than before. 30 years ago the users waited for a new product as their time and attention-span was abundant, today this have changed, the products and attention-consuming artifices are abundant and attention is scarce. The supply and demand curve have changed axis-for-axis.

Illustration picture: Dollar close-up by Shai Barzilay on Flickr. The picture is licensed under a Creative Commons licence. Another good example on how free can be free to build upon. 

Plattform

Apple har to forskjellige programmer (som i opplegg, ikke software) for utvikling avhengig av hvilken plattform du ønsker å utvikle for. Prisen for å utvikle for for Mac OS X (desktop) eller iOS (mobile flater) er per i dag $99 per plattform. Dette inkluderer distribusjonsavtale igjennom respektive programvare-marked, ressurser på developer.apple.com som for eksempel tilgang til mange av foredragene fra utviklerkonferansen WWDC som video. Jeg har ennå ikke investert i en slik avtale, men har likevel hatt mulighet til å lage små programmer for både Mac OSX og iOS, og fått tilgang til masse ressurser, jeg har dog ikke lansert noen programmer. Utviklingsverktøyet XCode er tilgjengelig gratis til Lion, igjennom AppStore, og versjon 4.1 kommer med SDK for Lion og versjon 4.2 kommer med iOS5 SDKet. Med mindre du ønsker å benytte deg av fordelene med en utviklingslisens kan du programmere uten, og i startfasen kan dette være lurt da det kan ta litt tid å bli kjent med Objective-C og de respektive rammeverkene. Det er viktig å få med seg at for å benytte en fysisk iPad, iPhone eller iPod touch for å teste ut egen programvare trenger du en lisens. I iOS SDK-pakken følger det med simulator for disse enhetene (merk: ikke en emulator) og den har ikke mulighet for å benytte seg av de fysiske sensor-dataene som det kan være moro å inkludere i programmer på iOS.

Verktøy

Apple har laget gode verktøy for sine utviklere og disse er fritt tilgjengelig igjennom App Store. I Snow Leopard kom verktøyet som et ekstravalg på installasjons

platen, men nå som OS distribusjonen skjer gjennom skyen har også ekstra programvare blitt tilgjengelig for nedlastning. Fram til Xcode 4 var det i hovedsak to programmer du ville ha brukt i utviklingsprosessen: Xcode og Interface Builder. I dag er begge disse programmene bygget inn i Xcode 4 og det å skifte mellom kode-editoren og GUI-editoren skjer sømløst basert på hvilke fil du bearbeider. For Objective-C filer får du opp en god tekstbehandler som er godt integrert med dokumentasjonen, feilsøkingsverktøy og andre hjelpefunksjoner. Dersom du velger en xib-fil vil du få mulighet til å grafisk plassere brukergrensesnitt-enheter som NSTextField, NSLabel og NSSlider. Xcode tar seg også av kompilering, versjonskontroll og fra og med XCode 4.2 kan du også legge ut forskjellige view i iOS applikasjoner ved hjelp av Storyboard. I tillegg kommer utviklingspakken med et godt analyseverktøy kalt Instruments og et morsomt og kreativt verktøy kalt Quartz Composer.  Sistnevnte benytter et visuelt grensesnitt tilsvarende de som finnes i Max MSP og Pure Data.

Språk

Selv om du kan programmere i mange språk på Apple plattformen er det foretrukkede språket Objective-C. Dette språket startet i utgangspunktet som et objekt orientert klasse bygget på C, men har i dag en lang tradisjon og er i versjon 2. Språket har mange likheter med andre C baserte språk, men har en ganske annerledes syntaks når det gjelder å kalle metoder hvor de bruker noe så utradisjonelt som square brackets. Noe jeg hadde problemer med å forstå når studiene krevde at jeg arbeidet med C var viktigheten av kompilatoren til å kunne utføre oppgaver ifra funky syntaks. Etter et par måneder med objective-C kan jeg lært å se viktigheten av dette. For eksempel lar Objective-C deg autogenerere get og set metoder basert på synthesize i implementeringen og property i interfacet.

#import "SessionController.h"

@implementation SessionController

@synthesize user, sessions;

- (void)viewDidLoad

{

user = [[User alloc] init];

sessions = [[NSMutableArray alloc] init];

Session *s = [[Session alloc] init];

[sessions addObject:s];

}

Jeg har ingen intensjon om å fortelle så veldig mye om Objective-c, men det virker som å være et morsomt språk å kunne. Det finnes i dag mange halv-gode og noen gode løsninger som lar deg programmere for flere plattformer uten å måtte kunne hver plattforms egne språk og skikker, men jeg syntes det har vært en lærerik opplevelse å forsøke å få hodet rundt Objective-C. For meg, som hovedsakelig har arbeidet med Java, er det vanskelig å fatte den dynamiske naturen til Objective-C: ikke bare kan du sende hvilken som helst datatype igjennom id-signaturen, du kan også kalle ting igjennom stier og laste inn ny kildekode mens programmet kjører.

Rammeverk

Rammeverkene er det som skaper mye av det som kan gjøres på en plattform. Det er her Python får sine “batteries included” og funksjonaliteten plattformene blir realisert. Skal du tegne grafikk eller initialisere en datastruktur basert på et XML HTTP-svar eller mange av de andre hverdagslige eller spesielle oppgavene som kreves av et program er det kjekt å kunne stå på skuldrene til noen som allerede har gjort tilsvarende oppgaver. Xcode kan linkes mot et stort antall rammeverk, men noen brukes mer enn andre. I første rekke kan det være greit å lære seg Foundation og et eller begge Cocoa-rammeverkene (Cocoa for Mac OS X og Cocoa Touch for iOS). Dokumentasjonen til disse, og andre rammeverk, er bygget inn i XCode så ved å holde inne alt og klikke på et metodenavn dukker denne opp. I tillegg vil rammeverk som er linket til fra headerfilen automatisk bli inkludert i auto-completion, og siden kodehintingen er god vil du med kun begrensede  kunnskaper om metodenes navn kunne gjøre ganske mye i XCode.

Hvordan begynne?

Hvis du har en mac er første steg å få tak i siste versjon av XCode. Gå inn på i App Store for å laste denne ned. Installasjonsfilen er stor og dette tar derfor litt tid, men benytt tiden til å gjøre deg kjent på developer.apple.com. Her kan du finne mange artikler, APIer og introduksjoner til forskjellige Apple teknologier, og dette kan være et greit utgangspunkt. Her finner du også artikler for nybegynnere som skal starte å lage sin første app samt best practices, rettningslinjer og demonstrasjonsapplikasjoner.

Lykke til, og si gjerne ifra om hvordan det gikk!

Bildet Big XCode er laget av Lee Gillen og gjort tilgjengelig på Flickr under en Creative Commons lisens.

TED Talks

TED is a conference series about Technology, Entertainment and Design that has made most of their content available online for everyone to see. They offer a variety of lectures about the topics in question. These lectures are constrained in length and the speakers (some of the world’s brightest minds) are invited to speak of what they believe to be most important. TED has also been franchising out their concept into what is called TEDx conferences, and many of the lectures held as these are also available.

There are many TED videos worth watching, and new are released almost daily. If you do, as I, use iTunes to subscribe to podcasts I can recommend the TED-podcast for a daily inspiration and deeper understanding in matters that matter. Here are some videos I recommend and that I find interesting, some of them are a couple of years old, but they are still important and amazing.

Click here to view the embedded video.

In this video Ken Robinson speaks about the importance of making a school system that also appreciates other forms of expression than the ones expressed typically by the right part of the brain. Not only is this movie interesting, it is also very funny. I laughed a lot watching this movie, not only because Sir Robinson is a funny man, but also because of some of the interesting truths this speech articulates which makes you reconsider thoughts and ideas you have.

Click here to view the embedded video.

This video has really been viral after the death of Jobs earlier this year. It is curated through TED’s best of the Internet. The speech was originally held and filmed at Stanford University. I think this is one of the most inspiring speeches to graduating students ever held, and I bear with me some of the ideas conveyed in this rhetorical masterpiece.

Click here to view the embedded video.

This video is also an old classic. The Swedish Professor Hans Rosling has become an Internet star in his quest for giving people a more correct understanding of the contemporary world. Through his software GapMinder he gathers data and visualises them in a way that helps us understand the state of the nations and global issues through data. His speeches are also great as he contextualises the data in a good way, one of his latter ways of conveying knowledge is through using inventions such as his grand-mother’s washing machine to explain important shifts in humans’ ‘lebenswelt’.

Click here to view the embedded video.

This video shows technology already available for synthesising many images into huge image worlds. Microsoft’s Photosynth technology is available, but the wow factor of this video documents some of what will be recorded in history when we are to understand the shift from the document based alphabetic web to the emerging. I think Blaise Aguera y Arcas also presents this technology in a good way.

Click here to view the embedded video.

There are many ways of using an iPod, but Marco Tempest probably show you a way you have never seen before. Ingenious timing and creative use of technology creates a spectacular from everyday consumer electronics. This is true inspiration on how technology can be used in the arts and I hope to see many less known magicians making (christmas) party tricks application in the future.

RSAnimate

RSAnimate is a collection of lectures held by great minds organised by the Royal Society for the Encouragement of Arts, Manufactures and Commerce, then edited and visualised. I wished that every educator could make such drawings in real-time as it is a great way of remembering things both visually and auditory.

Click here to view the embedded video.

In the first video Matthew Taylor explores the meaning of 21st century enlightenment, how the idea might help us meet the challenges we face today, and the role that can be played by organisations such as the RSA.

Click here to view the embedded video.

In the second Ken Robinson (who also has a great lecture at TED.com – linked above) speaks about educational paradigmes and how the school of today isn’t suited for the world of tomorrow. I think all who have ever been to school have an opinion on how the education was conducted, and in this video Robinson addresses some important questions such as schools in an age of instant gratification and information overload.

Click here to view the embedded video.

iTunes University

iTunes U contains a wide variety of lectures held at the worlds foremost universities. The variety in topics, educational and technical quality is large so it make time some time to find the best lectures. Luckily some of the best lectures are promoted, and Apple change between interesting sub-categories often. I have used this resource primarily to follow lectures in computer science, but also in various humanistic fields. I have found the iPod and iPad development lectures by Paul Hegarty and the the Human-Computer Interaction Guest Lectures at Stanford University, the Cambridge Ideas short videos, and the introductions to programming lectures as well as the Innovation/invention lectures from MIT inspirational and educational. It’s definitely a great resource to be able to access the lectures at the best universities in the world. Edinburgh University does also have a lecture series that has been promoted the last few months: the Gifford Lectures containing among other a lecture and Q&A with former UK Prime Minister Gordon Brown.

Non-Free Webucation

Lynda.com

is a great place for screen captures in many of the creative software products from Adobe, but also for web-design and 3D and more. They are constantly updating their web-page with new lectures, the entry point is low and the amount of information you get is normally high. The lectures are also organised into chapters and topics, so it’s easy to come back to check how they solved your problem in a lecture. The exercises are relevant and it seems that they cover technologies requested by the market. For many the page may be a bit too general, for topics as e.g. Ruby on Rails there are two lectures, one fundamental and one for experienced users. Lynda does not discuss a certain technology that thoroughly as e.g. the specific screen casts for these technologies. In general Lynda.com is a great place to learn about new technologies and to get a good introduction, but if you are an expert it may find it too pedantic.

The Great Courses

I recently re-heard the title track of many of the great courses audio courses while watching The Office, and even if the concept of DVDs with lectures may be something Michael Scott from Dunder Mifflin would appraise, it is also a great idea for us mortals. The courses is about everything from science, to language to history. The lecture series on Great Minds of the Western Intelectual Tradition is one of my favourites, among the Modern Intelectual Tradition: From Descartes to Derrida and No Excuses: Existentialism and the meaning of life. Their lectures comes in both video and audio format. I found that I like the audio best as I can listen to the lectures while traveling. While living in Edinburgh I used half an hour each way to the university and being able to follow these courses made each one of them into an educational journey (dannelsereise).

Do you have any other favourite videos at any of the sites I mentioned earlier, or perhaps you have other sources to knowledge that are simliar, in that case, I would greatly appreciate it if you could give me a link in the comment field.

Finally, I want to wish all my readers a merry christmas.

The picture depicts Hans Rosling speaking at TED. The image is taken by Bill Holsinger-Robinson and is licensed under a Creative Commons license. Please refer to the picture on Flickr for more information.

To do this little project we’ll need a text editor and a browser to preview the result while we are working. Since we’re not going to apply some server magic in this project we won’t need to install a server, but we need somewhere to write our stuff and somewhere to display it. To display the project we need a web browser. I guess you already have one (and if you are the average Joe visiting my page you are using Chrome on Windows), but you need to make sure it’s up to date. For a long time i preferred Firefox, but lately I have spent more time working with browser using the webkit-based browsers Google Chrome and Apple Safari. I will exclusively be using Chrome while working on this project so I recommend you to use the same. I will, however, also include the moz prefix support where CSS3 support is limited to vendor specific implementation.

Text editors are available in all shapes and colours. What you don’t need is a word processor, you will need a program that writes plain text to a file. If you are working on the Mac I will recommend TextMate or the free version TextWrangler. Lately, I have tried out an Integrated Development Enviroment built on Eclipse named Aptana Studio. This was also very good and comes with more advance features, but is not as lightweight. If you are working on Windows I recommend Notepad+.

The Final Result

We need some idea of how our web-page should look like. Before we start to prototype we need to establish some really fundamental concepts of what we’ll need. If we look at the new HTML5 syntax as an indicator of popular practices we can see that HTML5 includes some new elements named header, footer, nav and article. Let us use them to structure a basic HTML document. A rather conventional structure which makes the design coherent at larger screen sizes is to wrap the content of a page within an element, and to do this we can use the div element. Newer practices takes advantage of screen real-estate through media queries, but for this little project we are not going to do so, instead we make a wrapper with the width of 1000 pixels. This is going to render as a “page inside the browser window” on most modern computers. We wil also be placing two columns for the main content area one with the content and another with a local menu. A global menu we place in the header element. For the footer we are also creating two columns: one with some information about the page and one with links. To get a better idea you can take a sneak peak at the final result here: projects 206.

To create the documents we need I like to first go into the root folder of my web projects using the terminal and create a new folder with mkdir, then I go into the folder and create the following files index.html, style.css and script.js with the touch command. If it’s a bigger project I would use a more advance structure, but for our little mockup this would be more than enough.

We can leave the style.css and script.js files empty for now and type or copy the following into the index.html:

<!DOCTYPE html>
<html>
<head>
   <title>Webpage</title>
   <link type="text/css" rel="stylesheet" href="style.css" />
   <script type="text/javascript" src="script.js"></script>
</head>
<body>
 <div id="wrapper">
   <header>
      <h1 id="main_title">Christmas</h1>
      <nav id="top_menu">
        <ul>
          <li><a href="#">Literature</a></li>
          <li><a href="#">Tradition</a></li>
          <li><a href="#">Recipes</a></li>
          <li><a href="#">Songs</a></li>
       </ul>
     </nav>
 </header>
 <div id="main">
   <nav id="left_menu">
     <ul>
        <li><a href="#">A Christmas Carol</a></li>
        <li><a href="#">Three nuts to Cinderella</a></li>
        <li><a href="#">A Christmas Story</a></li>
        <li><a href="#">Nightmare before Christmas</a></li>
     </ul>
   </nav>
  <article>
    <h2>A christmas story</h2>
    <p>Some text</p>
  </article>
 </div><!-- End of main -->
 <footer>
   <div id="footer_about">
      <p>This is some footer text</p>
   </div><!-- End of footer_about -->
 <div id="footer_links">
   <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
   </ul>
  </div><!-- End of footer_links -->
     <p id="footer_bottom">Legal information and a link to my <a href="http://www.lovholm.net">blog</a></p>
   </footer>
 </div> <!-- End of wrapper -->
</body>
</html>

The HTML markup above differs a bit from the HTML in the final version, but only in the sense that the “about” text in the footer and the main text is changed with shorter versions. The rest of the markup is the same. As you can see this is pretty conventional stuff. The header element contains links to the css and javascript file we created earlier so we can take advantage of these and at the same time keep them separate from the content. The body-elements consists of one child element, the wrapper, which further is divided into three elements: header, main and footer. The first and the last of these take advantage of the HTML5 semantic markup for their function within a page, the main element is a div-tag with an ID of “main”. All the main sections contain a link list and these are located within unordered lists. For convenience I use HTML-comments after closing a div-tags to make nesting easier. If you copy this HTML or the HTML of the final version into a document and open this in the browser the result will however be without styling. To keep content and presentation separated is a good practice: it makes it easier to update each of them in the future, re-use them or provide separate versions to accomodate different user scenarios. In another post we are going to make our little page dynamic, and then this rule of thumb will prove useful.

The text used in the finished version is an excerpt from the beginning of Charles Dickens famous book A Christmas Carol. I copied it from the Gutenberg Project, a service that provides loads of books where the copyright is no longer valid. Please support this project, it is a really good resource for gaining example texts not to mention the gigantic cultural value it makes available for free.

The Style

Here is the CCS modifying the HTML above. The css is the content of the style.css file:

body {
 background: url('bg_thick_red.png');
 background-repeat: repeat-both;
}

#wrapper {
 margin: 20px auto 20px;
 width:1000px;
 background-color: #FFF;
 background-color: rgba(255,255,255,.92);
 box-shadow:2px 2px 15px #000;
 border-radius:4px;
}

header {
 padding:5px;

 background-image: linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
 background-image: -o-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
 background-image: -moz-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
 background-image: -webkit-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
 background-image: -ms-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
 background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.04, rgba(244,250,240,.3)),
 color-stop(0.52, rgba(102,168,204,.3)),
 color-stop(0.76, rgba(92,131,209,.3))
 );
}

header h1{
 text-align:center;
 color: #888;
 text-shadow: 0 1px 0 #FFF;
 font-size:3em;
 text-transform:uppercase;
 font-family: helvetica, sans-serif;
}

header nav {
 text-align:center;
}

header nav ul {
 list-style: none;
}

header nav ul li {
 display:inline;
}

header nav ul li a{
 background-color: green ;
 text-align:center;
 padding:5px 20px 5px;
 margin:0 2px 0;
 text-decoration:none;
 color:white;
 font-size:1.5em;
 border-radius: 4px;
}

#main {
 margin: 0;
 padding: 0;

}

#main nav {
 float:left;
 width:215px;
 margin: 20px 5px 0 20px;
 background-color: #FFF;
 background-color: rgba(255,255,255,0.2);
 border-radius:4px;

}

#main nav ul {
 list-style:none;
 margin: 0;
 padding: 0;
}
#main nav ul li a{
 display: inline-block;
 font-size: 1.2em;
 background-color: #DDD;
 border-radius:4px;
 margin: 5px 0 10px 0;
 padding: 5px;
 width:100%;
 text-decoration:none;
 color: green;

}
#main article {
 background-color:#FFF;
 border-radius:4px;
 float:right;
 width:680px;
 padding:10px;
 margin:15px;
}

footer {
 clear: both;
 background-color: #D4C4AD;
 padding:10px;
 border-top: 3px solid #000;
 font-size:0.9em;
}

#footer_about {
 width:450px;
 float:left;

}

#footer_links {
 width:450px;
 float:right;
}

#footer_links ul {
 list-style:none;
 margin: 0;
 padding: 0;
 background-image: url('post_service.png');
 background-repeat:no-repeat;
 background-position:right top;
 height:130px;
 padding-top:15px;
}

#footer_bottom {
 border-top: 1px solid #333;
 padding-top:4px;
 clear:both;
 text-align:center;
 font-family:monospace;
}

nav ul li a:hover{
 padding-top:10px;
 padding-bottom:10px;
 box-shadow: 0 0 30px #FEE100;
}

nav ul li a {
 -webkit-transition: all 0.2s ease-in-out;
 -moz-transition: all 0.2s ease-in-out;
 -o-transition: all 0.2s ease-in-out;
 -ms-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
}

This is where the magic happens. It’s amazing how much some lines of CSS can change how the HTML is styled within the browser. As you may see, I have tried to keep the CSS in somewhat same structure as HTML in the sense of the place in the document. I’ve added some global rules at the bottom that applies to all links within a nav-element list. If you been working with CSS before you probably recognise the techniques chosen. I will now comment on some of the choices I made while authoring this stylesheet.

For this project I thought it could be cool with some stripes in the background, this really emphasises the transparency in the alpha layering supported by the new rgba and hsla tags. To get stripes as a background I chose to repeat the basic structure of the background using the background-repeat property. I crated the image used at Stripegenerator. For colours I prefer to use Adobe Kuler.

The new CSS3 features I have used includes: gradients, border-radius, transition, shadows and the new colour tags. CSS3 is not yet a fully implemented standard and many of the functions are only available through vendor prefixes (such as -moz- or -webkit-) but why wait for the future? Most of the CSS3 modules are working and not likely to go through major changes, other things are still in blueprints. The stuff I’m been using here seems to be widely adapted and let alone the gradients are all using simliar syntax across browsers. An important argument for adapting and using new standards you are also playing an active role in defining how these can be used and their popularity, so you can in fact be a part of defining your own future.

Gradients

The gradients as you can see are here located within the background image. The syntax diverge between webkit-browsers (e.g Safari and Chrome) and non-webkit-browsers. The most commonly used syntax includes the type of gradient in the title, while webkit takes it as an argument. Webkit does also needs clearly defined start and stop position while other syntax just need the defined start location. In the code here I have used the rgba elements (which we will return to later) and colour stops. When these are defined will they work as absolute stops which the browser interpolates between. The percentage defines where the stops will be. I am only applying gradients to the header, but if I chose a higher element the gradients would be equally distributed. For this example I have also changed the version without a vendor-prefix to the bottom, this may be a good idea as the browsers will drop prefixes as the function becomes a standard, the browsers adapts the rule last defined and will skip the rules without the prefixes for the specific browser. The syntax can be a little hard to type with many parentesis and commas so to save time and worries I can recommend you to use a CSS3 gradient generator.

background-image: -o-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);

background-image: -moz-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);

background-image: -webkit-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
 background-image: -ms-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
 background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.04, rgba(244,250,240,.3)),
 color-stop(0.52, rgba(102,168,204,.3)),
 color-stop(0.76, rgba(92,131,209,.3))
 );

background-image: linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);

The vendor prefixes are o for Opera, moz for mozilla which Firefox is the most known in the family, webkit is used by webkit browsers which have gained popularity trough Chrome and Safari. The built-in browser on iOS and Android devices are also built on the webkit engine. Ms is short for Microsoft and is the vendor prefix for the widely used Internet Explorer browser. IE is supposedly getting better in newer versions so let hope that users upgrade.

New Colour Tags

Traditionally colours have been expressed with three or six hexadecimal numbers or name constants. Opacity has been available since CSS2 through the opacity function, but it is all brought together in the rgb, hsl, rgba and hsla tags. The two first takes three values and the two latter four. The RGB colours (Red, Green, Blue) constitutes the additive colour model, while the HSL (Hue, Saturation, Lightness ) makes up the colour wheel variables. To use of the models call either of the rules with the appropriate number of argument such as:

background-color: #FFF;
 background-color: rgba(255,255,255,.92);

In the excerpt above the first background-color tag is sent the three hexadecimals as a concatenation of the six hexadecimal version #FFFFFF. This can also be expressed as rbg(255, 255, 255) and if you’re into maths you may see why. The first two ‘F’s correspond to 255 and the same goes for the subsequent. The range between  0 and 255 corresponds to what can be distinguished in a byte. The HSL version has another range. Since it is based on the colour wheel the first argument corresponds to the degree or the circular point on the wheel; the accepted range leads from this and is somewhere between 0 and 360. The second and third arguments are stated in percentage (and the syntax is a number between 0 and 100 followed by the percentage sign). If you choose to add some transparency you add an a to hsl or rgb so it becomes hsla and rgba. In addition you will need to add a fourth argument which takes a number between 0 and 1 where 0 is totally transparent.

Border-radius

Boxes in the web browsers may seem a bit hard from time to time, so to make them more visually friendly you can round the angles using the border-radius rule. This is easy to use either if you want to create a subtle visual effect or going wild with round boxes. I like to add this feature to buttons in order to make them more click friendly but I also think it looks good on boxes. In the little code above I have used a 4 pixel border radius on buttons and also on the wrapper.

border-radius: 4px;

Shadows

You have probably noticed the heavily use of shadows in various graphical user interface the last years. Shadows make a subtle three dimensional feel on the screen, adding depth and give visual cues of what information should stand out. There are two shadows I have applied to this little page: box and text shadows. In the header h1 element I add a text shadow to make the text a bit more crispy:

text-shadow: 0 1px 0 #FFF;

In this example I keep the x-axis of the light source straight on the text, but I move the y-axis one pixel down. I do not want to blur the shadow, and I set its colour to  white.

I use the box shadow function in more sections. Perhaps the most apparent shadow is the one applied to the wrapper, but also on the link elements are shadows used for an effect. When the user  hover an anchor tag in the nav section is a subtle box shadow applied. Here are the two examples in the CSS markup:

box-shadow:2px 2px 15px #000;

box-shadow: 0 0 30px #FEE100;

The first line is the box-shadow from the wrapper element, and the second is from the light effect I try to emulate applied to the buttons when the user is hovering them. The idea is for the light to look like the radiation around a light source hidden by the button. These two implementations of the same function are just a little example on all the effects which can be accomplished using the new shadow functions.

Animation

The last piece of code I want to comment upon is the animation. This is a new element providing visual effects without having to apply Javascript.

nav ul li a {
 -webkit-transition: all 0.2s ease-in-out;
 -moz-transition: all 0.2s ease-in-out;
 -o-transition: all 0.2s ease-in-out;
 -ms-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
}

For all the a tags used in a unordered list within a nav section (pretty much all navigational links) I apply a transition element. This is used to interpolate an animation when the visual state of the element is changed. The code excerpt above is quite long due to the vendor-prefixes, but one line will, in the future, be enough. The syntax as you can see is three arguments: the first is a selector for what should be included in this rule. I choose to include all. In a case where you a using CSS transformations  you can here choose which of the transformations it should apply to, which is great in case you plan to make something advance. The second and third argument is the timing and interpolation approach. I choose a rather short time 0.2 seconds from the animation starts until it is finished, I also choose an ease-in-out interpolation. A short demonstration of the various interpolation approaches can be found here.

I hope this post has been useful and perhaps provided you with some new knowledge or ideas. Please tell if anything is unclear or if you would have chosen another approach. At a later point I hope to take this page, or a similar one, and apply some Javascript magic and a little back-end providing some text or data. Well, until next time.

Anyhow, this marks the end of my second round of formal education, and the start of a new era in which I hope to bring with me the ideals and inspiration I’ve accumulated through five years at universities in Oslo, Stuttgart and Edinburgh. It’s been five interesting years, and I meet a good deal of great people which I hope I will be lucky enough to work with at a later occasion.

I try to keep my blog semi-professional and I try to write more about various topics than about myself. However, as I use this little place as a way of keeping track of what I think, care about and do from year to year I think I should mention my newest little achievement. On the continuous line of life, which is dived into past and future by the razor-thin present I think it’s important to think back and hopefully this can be a little personal milestone for future me.

I do hope that I can put my studies to use, and that I can still learn and develop my skills and thoughts. Learning is not just formal degrees, nor a profession, or an intrest, it is a life-long process which enrich me, and hopefully you as well. There are still big questions to be explored, questions to be answered and arguments to be presented. I look forward to the next challenge