Nya funktioner klara – se sprint 2 screencast

Sprint 2 innehöll bland annat:

  • Fortsatt jobb med installations profilen
  • Lägg till och sätt stil på artiklar som visas på ämnessidor
  • Datumen i ”just nu” form, se microformats
  • Responsiv design
  • Mer style alternativ på ämenssidor (brandbylines)
  • Menu (även den responsiv design)
  • Infoga Arenan videon, citat, bilder i en artikel
  • Lägg till meta data*
  • Profilsidor
  • Nödmeddelande & breaking news meddelande

Jag vill påpeka att trots att det nu går att göra många saker är detta fortfarande att betrakta som en proof of concept, mycket finns ännu kvar att göra för att det skall vara i skick för publicering 🙂

* Meta data lösningen är ett sammarbete med SeCo på Aalto Universitet.

Hur bygger man en sajt som fungerar både på mobil, tablet och desktop – på respektive form factors villkor?

Svaret är: Responsiv design, med vilket vi bestämt att bygga nya svenska.yle.fi. Beslutet grundar sig på att vi vill tillgodose det behov som uppstår då sajten används på en allt större flora av apparater.

* När du tittar på demon, tänk på att den här versionen är en statisk html kopia, och att den saknar lösningar specifikt per apparat. Den är grunden med vilken vi börjar se vilka tilläggslösningar vi behöver göra för att få den att fungera optimalt i alla apparater.

Den modell vi gått in för betyder att vi byter utseende ‘on the fly’ med media querys beroende på hur stor skärm sajten visas på. För att det skall fungera lika smidigt för ngn som använder mobilen som för ngn vid sin dator behöver man utgå ifrån mobilens behov först.

Mobilen har förutom en liten skärm också långsammare nätförbindelse, och stöder inte alla nya tekniker. På en dator är det möjligt att lägga till saker som saknas i mobilen.

Vi har därför beslutat att leverera en liten bild som standard. Den laddas av alla apparater, som sedan byts ut till en större version beroende på vilken skärmstorlek som används. Problemet med den lösningen är att det uppstår en omritning av sidan, då den större bilden laddas in med viss fördröjning. Det problemet går att lösa genom att kombinera bild-utbytningsfunktionen med CSS (styr sidans utseende). Eftersom CSS:en är skild för varje skärmstorlek kan storlekarna för bilderna också anpassas korrekt.

Rent markup-mässigt vill vi inte ladda hela sökvägen för fem gånger, utan räknar med att lösa det med en egen bildutbytningsfunktion. Så här ser den dock ut i skrivande stund:

<img alt="Yle" src="http://www.yle.fi/ims/nyheter/2011/43/611054ea59521d6b15/611054ea59521d6b15_8.jpg" data-src-fluid="http://www.yle.fi/ims/nyheter/2011/43/611054ea59521d6b15/611054ea59521d6b15_8.jpg" data-src-narrow="http://www.yle.fi/ims/nyheter/2011/43/611054ea59521d6b15/611054ea59521d6b15_4.jpg" data-src-normal="http://www.yle.fi/ims/nyheter/2011/43/611054ea59521d6b15/611054ea59521d6b15_6.jpg" data-src-wide="http://www.yle.fi/ims/nyheter/2011/43/611054ea59521d6b15/611054ea59521d6b15_5.jpg">

Men layouten då?
I och med de fyra olika storlekar som sidan kan ses i måste man hitta på sådana layoutlösningar (layoutblock) som fungerar smidigt i alla storlekar. Detta för att redaktören som skriver artiklarna inte skall behöva kolla att textmängden inte ställer till problem i ngn viss skärmstorlek.

Ett utmaning uppstod i att omforma raden med fyra puffar bredvid varandra till en med två bredvid varandra. Lösningen ligger i att använda en CSS selector på varannat block för att bryta blocken annorlunda beroende skärmstorlek. Alternativet att krympa spaltbredden skulle ha lett till en allt för stor chans att orden skulle ha varit så långa att de inte rymts inom spaltbredden.

En annan är att ta bort bakgrundsfärger från layoutblocken då de visas i mobilen, då det inte längre är intressant att visa layouten som är gjord för större skärmar. Lösningen ligger i att använda media querys även för att lägga till bakgrundsfärgen i de större skärmstorlekarna, så att de aldrig ens finns i mobilversionen.

Vilka är nästa steg?
Nu går vi vidare och testar denna version, och bestämmer vilka specifika lösningar vi gör per apparat (dvs Android, Ipad, Nokia). Redan nu vet vi att demon inte fungerar så som vi vill på Android (Samsung Galaxy Tab) i och med att den inte visas i tablet läge. Javascript-lösningen är heller inte perfekt, i och med att den räknar skärmbredd annorlunda än media queryn, vilket gör att det i vissa skärmstorlekar blir fel bildstorlek i kombination med de fyra sidstorlekarna. En lösning vi ännu inte gjort, men kommer att ställas inför är hur vi visar och lägger in videon (istället för bilder). Då vi är nöjda med hur det fungerar kommer vi att bygga fler modeller för layoutblocken, och lägga på fler visuella stilar på de modeller som redan existerar.

Sprint 1 demo – Proof of concept

Torsdagen den 20.10. avslutades SYND-projektets första sprint, dvs. en två veckors arbetsinsats med i förhand uppsatta mål. Projektgruppen arbetade fram grundförutsättningarna för att skapa och producera innehåll med det nya verktyget.

Sprint 1 innehöll bland annat:

  • Skapa en installations profil
  • Skapa artiklar
  • Skapa en ämnessida
  • Puffa en artikel på en ämnessida
  • Lås av artiklar (förhindra att två ändrar samma artikel samtidigt)
  • Ge ett utseende till en ämnessida (brandbyline)

I videon ges en snabb presentation över hur artiklar och ämnessidor skapas. Det som visas i videon är en så kallad ”proof of conept” – en ytterst avskalad prototyp för att visa att en viss funktion fungerar. Häng med andra ord inte upp er på kosmetiska brister, det engelskspråkiga användargränssnittet eller referatets oslipade utförande! 😉 Syftet med demonstrationen är att visa enligt vilken logik och enkelhet innehåll skapas.

Efter andra sprinten (3.11) återkommer vi med en ny demonstration över andra egenskaper i Svenska Yles nya Drupal plattform.

Vad är Drupal?

Drupal är ett open source content management system byggt med programmeringsspråket PHP. Om man jämför Drupal med PHP så kunde man använda sig av den här analogin:

Drupal är som att få ett paket med lego, där ett nyckelfärdigt hus redan är byggt, men man får med delar och verktyg för att bygga till vissa saker.

Om man är nöjd med sitt nyckelfärdiga hus så behöver man inte göra mera (att flytta en vägg är svårare än att måla väggarna), men vill man ha ngt som inte existerar i paketet måste man bygga själv eller se om ngn annan byggt en sådan lösning som man kan kopiera.

PHP är ju också till delarna färdigt, men där får du en ritning hur du skall bygga huset, och instruktioner för hur du blandar plastmassan till legobitarna och bygger gjutformarna.

Semantisk webb

Odontologi?!? Nej, inte tandmedicin – ONTOLOGI!

Min förvirringen var stor bara ett par månader sedan kring begreppet ontologi. Semantisk webb hade jag hört som term, men knappast förstått. Likaså begreppet linked data, som inte är riktigt samma sak, men ofta används som ett nästan parallellt begrepp. Men ‘semantisk’ klingade vackert och väckte främst associationer till semiotiken jag bekantat mig med i studiesammanhang ett gott tag sedan. Och att länka data kändes ju tryggt och bekant 🙂 Kort sagt, flumnivån var inledningsvis hög.

Men så småningom började vissa insikter utkristallisera sig:

1. I Finland finns en på global nivå ledande forskningsenhet som utvecklar lösningar som kan komma att förändra infrastrukturen för webbens informationsinnehåll.

2. Nyckelord, organiserade i öppna strukturerade nätverk, som kan läsas av datorer kan på ett avgörande vis hjälpa att organisera den malström av information webben blivit. Dessutom sker oväntade möten och associationer mellan enskilda innehållselement då ontologier kombineras – illustrerat av engelskans vackraste ord – serendipity.

3. Detta är något som redan existerar, som vi kan ta i bruk i samband med vårt webbförnyelsearbete. Och detta är något som på lång sikt har potential att förändra hur vi bygger upp och strukturerar webbsidor. Vilket i sin tur är en väldigt relevant del av vad mitt arbete som konceptutvecklare på svenska.yle.fi handlar om.

 

Igår hade jag nöjet att lyssna på hur biblioteken, informationsvetenskapens högborgar och pionjärer, sedan 2007 (!) aktivt arbetat med webbontologier. Ett arbete vars konkreta resultat man kan ha glädje av i tjänsten Kirjasampo. Sajten är en informationens guldgruva som kombinerar sakkunskap om information och dess förvaltnng med ett levande intresse för litteraturen. Där kan man upptcäka 73k skönlitterära verk, 13k pärmbilder, 7k länkar, 14k fiktiva karaktärer, få bibliotekariens rekommendationer för vidare läsning, mm.

Ett annat mer komplext exempel på ontologiers samverkan är Kulttuurisampo. Kolla där t.ex. Den semantiska versionen av Kalevala för att se hur en texts kulturella kontext kan utvidgas online.

 

Jag hoppas på att kunna fortsätta utvidga de här begreppen under processens lopp. Och också gå in på mer konkreta användningssätt. Men i första hand känns detta som särskilt relevant för att göra vår webb framtidssäker, så att säga. Att ha möjligheten att erbjuda öppen data, ge det sammanhang och därmed kunna erbjuda det informationsrika public service-innehåll som dagens publik behöver.

Micke Hindsberg,
Konceptutvecklare på svenska.yle.fi

lε congεtturε dı Arlεcchıno . . (dε noms d'oısεaux)
By jef safi (writing)  Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic License.

What would be a good set of page widths with the current set of screen resolutions?

We have decided to work with responsive design and are in the process of setting the widths of the pages. I took a look at the screen resolutions our visitors are using at the moment.

The setup we are looking at right now would have four brackets:

  • Less than 740px (mobile or small tablet) – would see a fluid page
  • Less than 980px (tablets or notebooks) – would see a fixed-width page of 740px
  • Less than 1220px (smaller screens) – would see a fixed-width page of 980px
  • Wider than 1220px (big screens) – would see a fixed-width page of 1220px

When the current number of screen resolutions is applied to these brackets this is the outcome:

  • 2,5 % = Less than 740px
  • 2,2 % = Less than 980px
  • 16 % = Less than 1220px
  • 80 % = Wider than 1220px

These numbers represent 94 % of all visits to our site, the remaining 6 % are spread over 2,300 different screen resolutions.

If we would have a wider page for bigger screens, the result would be:

  • 2,5 % = Less than740px
  • 2,2 % = Less than 980px
  • 49 % = Less than 1360px – would see a fixed-width page of 980px
  • 45 % = Wider than 1360px – would see a fixed-width page of 1360px

It’s also possible to move the width bracket for smaller screen sizes, but that immediately creates a cascade effect. The tablet user is not happy when grouped with the mobile users, and someone using a screen resolution of 1192px is not happy being grouped with the users of a 768px screen.

Additionally, the numbers don’t tell the full story as they don’t take into account that a user might display the browser window in a smaller size than the screen resolution they have.

What brackets are you using, and any particular reasons why you chose them?

Välkommen till nya svenska.yle.fi

”Är ni helt galna?!”, frågade hon. ”Det är omöjligt att göra så många förnyelser under en så kort tidsrymd.”Reaktionen till trots är det just det vi på Svenska Yle tänker göra.

Förutom att vi helt och hållet reviderar vårt webbtänkande, kommer vi samtidigt också att skapa en ny plattform för publicering av innehåll, förnya vårt webbconcept, förnya det visuella utseendet, reformera journalisternas arbetsrutiner i förhållande till webben, osv. Och ja, det stämmer att vi har knappt med tid och resurser – annars vore ju allt för lätt att förverkliga!

Vi kommer att publicera inlägg här för att öppna upp och dokumentera processerna offentligt, mest för att vi tror på principerna för så kallad öppen design. Bloggen kommer att fungera som dokumentation för oss själva, men också för andra galningar som vill försöka sig på liknande saker i framtiden. En tydlig fördel av att vara öppen är att kvaliteten på dokumentationen kan öka dramatiskt.Vår främsta målsättning för projektet är att skapa en tydligare webbhelhet för Svenska.yle.fi, en helhet som möter användarnas behov bättre än tidigare.

Planeringen av web-reformen inleddes redan i våras och vi har nu ett team med sex utvecklare som sedan måndagen börjat utveckla vår nya publiceringsplattform, det väsentligaste elementet i förnyelsehelheten. Den första fasen varar i tio veckor. Då bygger vi grunden för vårt nya system. Vi planerar att lansera något som våra användare kan konkret ta del av i mars 2012.

I bloggen kommer vi att fokusera på användarperspektivet, alltså berätta vad vi jobbar på för dem som använder våra innehåll och dessutom förhoppningsvis föra diskussioner om förnyelserna.

Parallellt med den här bloggen publicerar vi en mera branschinriktad utvecklingsblogg på engelska, där vi behandlar tekniska webbutvecklingsfrågor, design- och mediefrågor.

Det här är en stor sak för oss och vi hoppas du vill ta del av berättelsen och som användare delta i utvecklingsprocessen genom att diskutera de behov och synpunkter som du har!

Welcome to SYND (#ylesynd)

”You must be raving mad to even try to do such a thing”, she said. ”It is simply impossible to change so many things simultaneously.”

This was one reaction to what we are now attempting to do now. We are trying to rethink how we do web here at the Swedish-language division of the Finnish Public Broadcasting Company (Yle), or Svenska Yle, as we are generally known. And the list of things we want to reform isn’t short: the technical platform, the concept, the look, the organization of people who contribute, and the way we do our journalism. It is also true that we have small resources and huge ambitions, but hey, would it be worth it if it were easy?

So this is just an initial note of welcome to this blog. We will post here to try to open up and document these processes publicly, mostly because we are believers in not only the principles for open source software but also those in open design. This will be a record for us, but also for others who will attempt to do similar things in the future. One clear advantage of being open is that the quality of your documentation can increase dramatically.

SYND refers to one of the strands in this big re-think. It is the one where we are building a new content management system for Svenska Yle—one that will be based on the open source system Drupal.  This blog will mostly follow the process of building that platform, although we will perhaps do some occasional detours into other larger questions relating to the reform, as well as other matters that keep us busy here at svenska.yle.fi.

The planning of this web reform started already last spring and we now have a team of six developers who have, since last Monday, officially gotten their hands dirty on the project. The first phase lasts five sprints (ten weeks) and we have scheduled our first release for March 2012.

This blog will be used to showcase the work that developers and designers are doing, as well as to discuss business-related questions that we have been working on. Personally, I can pledge to post entries that try to shed a light on our main business goals and how we are thinking about our “roof concept.” Furthermore, you should expect some posts on how we are organizing the process and thoughts about why we chose open source and Drupal from both technical and business perspectives. Expect also to see lots of posts about Drupal in general and some about meta data, linked data and such things.

It is true: this is a huge thing for us and I think I can guarantee the ride will not be smooth, at least all the time. Please do join us!

P.S.
SYND stands for “Svenska Yles nya Drupal-plattform,” which translates to the new Drupal platform of Svenska Yle. The acronym “SYND” means “sin” in English.

We will of course also be reporting individually about the project. These are the people to follow on the dev team:

Mårten Seiplax, Project Owner & AD @mseiplax
Tomi Mikola [Mearra], Project Manager @tomi_mearra
Christian Wikström, Developer @cwiks
Alexander Granholm, Developer @granholm
Ben Goodyear [Exove], Developer (Themer) @bengoodyear @typekitlove
Lauri Kolehmainen [Exove], Developer @dotsi

Some other key people related to the project:
Mikael Hindsberg, Concept Designer @mickhinds
Kristoffer Söderlund, Technical Producer @soderkr
Jonas Jungar, Svenska Yle News organisation @jonasjungar
Sami Kallinen, Head of programmes, Svenska.yle.fi @sakalli

Webbutvecklare

Ansökningstiden utgår 07.10.2011

Tjänstebeskrivning

Sökes: Masochistisk webbutvecklare som är bäst

Svenska.yle.fi är en liten, ung, hungrig meme-medveten avdelning på Svenska Yle. Googla ifall du inte vet vad det är. Vi har enorma ambitioner och behöver nu en webbutvecklare för två år för att fixa till allting hos oss. Ifall tid blir över får du också fixa på finska sidan. Vi talar om en person som har en klar vision om tekniska webbarkitekturer och får okontrollerade utbrott vid synen av spagetti. Personen både upphetsas och kallsvettas av olösta buggar. Kollar du på våra nuvarande webbsidor kan det hända att du blir rabiat.

Som de mest framgångsrika utvecklare har också du skägg. Ovårdat är ett plus. Bifogad bild i ansökan som bevis krävs. Photoshoppande och tusch är tillåtet för att modifiera bilden.

Vi erbjuder:

  • lön!
  • skyddad 70-tals sci-fi arkitektur
  • konstant förråd av legoklossar
  • vyer utöver Finland
  • helt orealistiskt långa semestrar
  • gratis tandvård
  • tillfälle att hänga med riktiga kändisar som har vårdade tänder
  • simbassäng
  • gym
  • empati
  • att få jobba med svenskfinlands största webbplattform
  • stort ansvar
  • helt gratis parkering
  • flexibla arbetstider
  • Mordors öga i skuggan av tornet.

Förutsättningar

Skicka in en lista på allt du är bäst på. Utöver det förväntas du vara bäst i hela världen på:

  • Objektorienterat PHP
  • Javascript/Ajax
  • Agila utvecklingsmetoder
  • Drupal
  • Att känna Dries personligen
  • Att utveckla Drupal Core
  • certifiedtorock.com
  • Du behöver inte ha en fetish för postitlappar, men det ses som en klar fördel.
  • Glöm inte att bifoga skäggbilden!

Ort Helsingfors
Tilläggsuppgifter om tjänsten Kristoffer Söderlund, 040-585 0806

Web-kehittäjä

Hakuaika päättyy 07.10.2011

Tehtävän kuvaus:

Palvelukseen halutaan: maailman paras masokistinen web-kehittäjä

Svenska.yle.fi on pieni, nuori ja nälkäinen meemitietoinen yksikkö Svenska Ylessä. Googlaa, jos et tunne meitä. Valtavaa kunnianhimoamme tyydyttämään tarvitsemme web-kehittäjän, joka hoitaa kaiken mahdollisen valmiiksi kahdessa vuodessa. Jos homma hoituu nopeammin, voit hoitaa kuntoon myös suomenkielisen puolen. Haemme ihmistä, jolla on kirkas käsitys web-arkkitehtuureista ja joka inhoaa spagettia. Haettu henkilö sekä kiihottuu että hermostuu bugeista. Nykyiset web-palvelumme saattavat aiheuttaa sinulle raivotautikohtauksen.

Sinulla on parta, kuten useimmilla lahjakkailla kehittäjillä. Parran epäsiisteys on plussaa. Parrasta pitää olla kuvatodiste hakemuksen liitteenä. Jos olet parraton, käsittele kuvasi Photoshopilla tai vaikka tussilla.

Tarjoamme:

  • Palkkaa!
  • Suojellun 70-lukuisen sci-fi-arkkitehtuurin
  • Legopalikoita
  • Näkymät koko maailmaan
  • Käsittämättömän pitkät lomat
  • Ilmaisen hammashuollon
  • Mahdollisuuden hengata aitojen, erittäin hyvin hammashoidettujen julkkisten kanssa
  • Uima-altaan
  • Kuntosalin
  • Empatiaa
  • Mahdollisuuden työskennellä Suomen suurimman ruotsinkielisen web-palvelun parissa
  • Paljon vastuuta
  • Ilmaisen pysäköinnin
  • Joustavat työajat
  • Tornin varjossa hehkuvan Mordorin silmän

Edellytykset

Lähetä lista kaikesta, missä olet paras. Odotamme, että olet maailman paras seuraavissa:

  • Objektiorientoitunut PHP
  • Javascript/Ajax
  • Ketterät kehitysmenetelmät
  • Drupal
  • Tunnet Driesin henkilökohtaisesti
  • Drupal Coren kehitys
  • certifiedtorock.com
  • Et tarvitse post-it-lappu-fetissiä, mutta siitä on selvästi hyötyä.
  • Työsuhde on aluksi määräaikainen (kaksi vuotta).

Älä unohda liittää partakuvaa!

Paikkakunta Helsinki
Lisätietoja tehtävästä Kristoffer Söderlund, 040-585 0806