Erik Söderholm

Digital journalist

Så gjorde jag F1-specialen för AMS

Nu är det premiär för mitt senaste projekt inom datajournalistik, och det handlar om Formel 1. Nästan lika bra som att se ett race live!

Publicerat 2014-03-02

Jag är verkligen ingen motorsportnörd, men mina kollegor har varit i extas i flera månader sedan det blev klart att Marcus Ericsson ska köra för Caterham i årets F1-säsong. En svensk förare i F1 – det var inte igår!

Här kan du se F1-specialen!

Vi på Auto Motor & Sport har gjort en ovanligt innehållsrik F1-bilaga som följer med nummer 6/2014, och för att fira F1-festen har jag gjort en webbartikel med hjälp av datajournalistik.

Det stod klart tidigt att jag inte kunde använda vår "vanliga" sajt där vi publicerar nyheter. Vi byter just nu till en ny design och att rama in min artikel i både den gamla och nya versionen av automotorsport.se hade inte funkat. Därför har jag gjort en helt fristående sajt. Jag hoppas ändå det framgår att Auto Motor & Sport är avsändare.

Hela sidan är gjord i sektioner, inte i enskilda sidor. Nackdelen är att det blir knepigt att länka mellan de olika sektionerna. Men det finns också en stor fördel: man behöver bara ladda en enda sida. Med några rader kod blir menytexten för aktuell sektion rödmarkerad.

function highlightSection() {
    /*Börja med att kolla var på sidna användaren är*/
    var currentPosition = $(this).scrollTop();
    
    /*Ta bort CSS-klassen active från alla länkar*/
    $('a[href*=#]').removeClass('active');
    
    /*Räkna ut start- och slutposition för varje sektion*/
    $('#content .section').each(function () {
        var sectionStart = $(this).offset().top;
        var sectionEnd = sectionStart + $(this).height();

        /*Om skärmens position är mellan start- och slutpunkterna för sektionen...*/
        if (currentPosition >= sectionStart  && currentPosition < sectionEnd) {

            /*...lägg till CSS-klassen active*/
            $('a[href=#' + $(this).attr('id') + ']').addClass('active');
        }
    });
};

Detta är mitt första helt responsiva projekt. Jag har säkert gjort en hel del tabbar men på det hela taget tycker jag sidan funkar okej i både datorn och mobilen. Att helt bortse från mobilanvändarna är ju inte okej.

Så hur gör man en sida responsiv? Först skapade jag en "ram" som sidan håller sig inom. Den är högst 1 200 pixlar bred.

#container {
    max-width: 1200px;
}

Sedan finns en del smarta funktioner i CSS som skapar "brytpunkter" för mobila enheter. All kod som kommer efter media-taggen påverkar bara sidan om den, i det här fallet, är smalare än 1 200 pixlar. Ett bra exempel är listor. Alla listor som läggs horisontellt i datorn brukar istället läggas vertikalt i mobilen.

@media all and (min-width: 641px) {

    /*Datorer*/
    ul {
        display: inline;
    }
}

@media all and (max-width:640px) {

    /*Mobiler*/
    ul {
        display: block;
    }
}

Högst upp finns en öppningsbild. Jag ville också göra något "extra" för att sätta tonen för hela artikeln. Därför blev det en startlampa som brukar sitta på F1-banorna. När man för muspekaren över lamporna blir de gröna. Nu kör vi!

Efter öppningsbilden kommer en kort text av vår motorsportredaktör Thomas Berggren, som är precis lika taggad som alla andra på Marcus Ericssons nya jobb som F1-förare. Thomas var med när Marcus deltog i tidningens Young Drivers Team som 14-åring.

Sedan kommer ett bildgalleri, och här stötte jag på problem. De tio bilderna tar relativt lång tid att ladda, särskilt för mobilanvändare. Lösningen blev Ajax. När man klickar på "Visa bildgalleri" laddas en extern sida (galleri.html). Den laddas annars inte alls.

$(function(){
    /*När användaren klickar på länken med CSS-klassen classloader...*/
    $(".classloader").click(function(){

        /*...ladda sidan gallery.html och göm CSS-elementet gallery-placeholder*/
        $("#gallery").load("gallery.html");
        $(".gallery-placeholder").hide();
    });
});

Jag vet, det blir ett klick som alla kanske inte orkar göra. Men att bädda in tio högupplösta bilder var heller inte aktuellt. Själva galleriet är responsivt och använder Javascript.

Årets F1-bilar kommer vara snabbare än någonsin trots att de kanske inte är så vackra. Det visar jag med fyra "boxar" och en bild på Fernando Alonso.

Sedan kommer en riktigt rolig grej. Marcus har ägnat nästan hela sitt liv åt motorsport och det ville jag visa med en tidslinje. Och självklart skulle den se ut som en racingbana! Varje "milstolpe" är markerad med en svartvitrutig flagga.

Jag älskar kartor, men hur visar man Formel 1 med hjälp av en karta? Man placerar ut de olika Grand Prix-tävlingarna, förstås! Varje tävlingshelg är markerad med en plupp.

Google Maps API är faktiskt riktigt trevligt att arbeta med. När man klickar på en pil öppnas en inforuta. Positionerna och texten som står i rutan ligger i en Javascript-array.

När jag skrev koden som skapar kartan valde jag att lägga till vissa inställningar för att göra upplevelsen lite bättre. Man kan scrolla upp eller ned på sidan även om muspekaren står på Google Maps-kartan. Annars zoomar man ju in eller ut på kartan. Det går ändå bra att zooma med knapparna till vänster.

På surfplatta panorerar man på kartan när man drar fingret över den, men själva kartan är smalare i mobilen än i datorn så det går ändå smidigt att komma vidare på sidan.

/*Var ska kartan centreras, och vilke egenskaper ska den ha?*/
var latlng = new google.maps.LatLng(32.807538,12.442360);
    var myOptions = {
    zoom: 3,
    center: latlng,
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

/*Skapa en karta som visas i elementet #map_canvas*/
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Formel 1 handlar ju om fart och ljud. Därför kommer också en Youtubefilm där läsarna kan lyssna på motorerna. Därefter följer den obligatoriska tidningspuffen för F1-bilagan, en puff för iRace där du kan tippa Formel 1 och en prenumerationspuff.

Det finns också en nyhetsticker som roterar fram de senaste motorsportnyheterna från AMS-sajten. Den är gjord som en lista med items. Ett jQuery-skript roterar sedan dessa items med jämna mellanrum. Överflödig text tar jag bort med hjälp av CSS.

Mer Youtube! Jag fixade en spellista med de bästa F1-klippen, som är placerad nedanför nyhetstickern. Klippen ligger i en vanlig iframe, men eftersom den är placerad i ett responsivt CSS-element blir hela iframe-delen responsiv och ska funka lika bra i mobilen som i datorn.

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0;
	height: 0;
	overflow: hidden;
}

.video-container iframe {
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}

Sist av allt är det ju förstås kul om folk hittar till min F1-special. Därför finns ett antal <meta>-taggar. Men jag har också lagt mig själv som författare till sidan på Google+. Förhoppningsvis dyker alltså mitt ansikte upp i sökresultaten när folk letar efter F1-specialen.

Dessutom finns ett antal så kallade og:cards som ger en liten förhandsvisning av sidan på sociala medier.

Det blev ju ganska många SEO-taggar till slut, så jag har lagt sidans titel och beskrivning i varsin PHP-variabel för att enkelt kunna klistra in dem dynamiskt.

<?
	$description = "Äntligen har vi en svensk förare i Formel 1! Här finns allt du behöver veta om årets säsong med kartor, grafik och bildgalleri.";
	$title = "auto motor & sport F1-special";
?>

<meta name="keywords" content="f1, formel 1, marcus ericsson, caterham, auto motor sport, auto motor & sport, ams">
<meta name="author" content="Erik Söderholm, Egmont Tidskrifter AB">
<meta name="description" content="<?php echo @description; ?>">
<meta name="twitter:description" content="<?php echo $description; ?>">
<meta name="twitter:site" content="@ams_sverige">
<meta name="twitter:creator" content="@ams_sverige">
<meta name="twitter:card" value="summary">
<meta name="twitter:title" value="<?php echo $title; ?>">	
<meta property="og:url" content="http://www.automotorsport.se/f1-special">
<meta property="og:site_name" content="auto motor & sport">
<meta property="og:title" content="<?php echo $title; ?>">	
<meta property="og:description" content="<?php echo $description; ?>">
<meta property="og:type" content="article">
<meta itemprop="name" content="<?php echo $title; ?>">
<meta itemprop="description" content="<?php echo $description; ?>">
<link rel="author" href="https://plus.google.com/114712100570616863470/posts">
<link rel="publisher" href="https://plus.google.com/114712100570616863470">

Problem jag stötte på

Särskild testsida. När jag skulle testa mig fram till olika lösningar för till exempel bildgallerier använde jag dumt nog den "skarpa" sajten. Problemet med det är att när något inte funkar, och jag tar bort en sektion, glömmer jag ibland att ta bort allt. Ibland kan det alltså ligga kvar inbäddade js-filer eller annat som slöar ned sidan. I fortsättningen måste jag bli bättre på att ha en särskild testsida.

Ordning och reda. Jag borde också bli bättre på att hålla ordning i mina CSS-filer. Nu finns tre stilmallar för dator, mobil och slideshows. Men inte en enda selector ligger i rätt ordning. Man måste ska sig fram till rätt del. Inte så vackert.

Kortare laddtid. Laddtiden för sidan är ju extremt viktig, men tyvärr tänkte jag inte så mycket på den förrän mot slutet av utvecklingen. Om jag hade fokuserat på extremt kort laddtid redan från början hade sidan förmodligen laddat snabbare. En sak jag ska göra bättre till nästa gång är att använda CSS-spritemaps istället för enskilda bilder för exempelvis ikoner. Pingdom har en utmärkt tjänst för att mäta laddtid.

Svårt med responsiva sidor. Responsiv layout har ju blivit en snackis i branschen, men det kommer med en del problem, om man uttrycker sig milt. Tanken är ju att sidan ska vara lika snygg både i datorn och mobilen. Men i själva verket kan sidan istället bli lika ful i både datorn och mobilen. Det blir helt enkelt aldrig riktigt bra. Kanske gör jag en helt separat mobilsida nästa gång – det har jag gjort här på eriksoderholm.se. Allt som allt har det här projektet varit avklarat på halva tiden om sidan inte hade varit responsiv – men då kanske mobilanvändarna hade blivit förbannade.

SASS eller LESS. Det här verkar väldigt spännande! Till nästa projekt funderar jag på att använda SASS eller LESS för att göra CSS-koden effektivare.

Och mer blir det!

Självklart kommer jag bjuda på mer datajournalistik och roliga visualiseringar framöver.

Här kan du se F1-specialen!

Blogginlägg
2016-02-22

9 sätt att jobba smartare och effektivare

2015-08-15

Nya bilinbrottskartan – så gjorde jag granskningen

2015-04-07

Första recensionerna av nya Apple Watch

2015-03-21

Interaktiv karta: Se när Sverige byter däck

2015-03-20

Så fixade jag ett mediacenter för 350 spänn

Projekt & artiklar

Laddhybriderna ger enormt stor osäkerhet i hur mycket utsläppen minskar Recharge granskar: Nu har det hänt – elbilar körs längre än bensinbilar i Sverige Recharge granskar: Nu kan du "optimera" din elbil eller laddhybrid för längre räckvidd – men du riskerar garantin Lista: Här är elbilarna där du kommer längst per krona Svenska AdBlue-piraterna säljer fuskbox till lastbilar – och den går igenom besiktningen Recharge granskar: Därför har elbilsförsäljningen i Danmark havererat fullständigt Recharge granskar: Därför kan elbilar vara dyrare att försäkra än fossilbilar Nästan alla elbilsägare skulle göra om köpet – men Tesla är inte bäst Begagnade miljöbilar vräks ut ur Sverige – exporteras till utlandet Testa själv: Så snabbt kommer du fram med Hyperloop Kritikerna har fel – det behövs inte mer än en simpel skärm i Tesla Model 3 Därför är trådlös laddning mycket viktigare än de flesta tror för elbilsomställningen Årets Bil utsedd – knappt en miljöbil i sikte 6 anledningar till att energimiljardären har fel – elbilar är framtiden och Tesla riskerar INTE konkurs Räckvidden framför allt – eller ställer vi fel frågor om nya elbilar? Miljösmart, ja – men det kommer inte alltid vara tokbilligt att köra elbil Det är egentligen på landsbygden som elbilarna passar bäst Detta säger jag till alla elbilsskeptiker – funkar nästan varje gång Efter dödskraschen: "Lösningen är inte att stoppa utvecklingen – snarare tvärt om" Succé eller konkurs – Tesla vinner i vilket fall BMW betalar inte rasslande kamkedjor automatiskt – trots ARN:s beslut Skrotningsklassad Mercedes låg ute på annons hos auktoriserad säljare Toyota Prius säljer bra – så länge bensinpriset är högt Bilrån drabbar inte bara lyxbilsägare – detta gäller om du blir rånad Läsarna hyllar sina elbilar: "Jag är oförskämt nöjd" BMW fälls för kamkedjehaveri i dieselmotor – kostar 50.000 Ägarna berättar: Nya bilar allt snålare – men inte så mycket roligare BMW svarar på kritiken: "Vi prövar saken internt" Försäkringsbolagen känner till Volkswagens dåliga kvalitet Volkswagen svarar på kritiken: "Det är förstås olyckligt" Bilhandlare slutar sälja vissa Volkswagen- och Audimodeller: "Orkar inte med eländet" Vi köper allt fler bilar – men kör allt mindre Här är bilhandlarna som fuskat med momsen – och dömts Unik karta: Här sker bilinbrotten – kolla läget i din kommun Car2go-bilarna kör med vinterdäck på sommaren – det är du som får betala Så fuskar bilhandlarna – struntar i moms och skruvar mätarna Trots siffrorna: "Tycker polisen gör ett bra jobb" Bilhandlarnas åtta vanligaste knep Unik grafik: 185 viltolyckor – varje dag Handlare säljer bilar med olagliga lån Lista: Här är fartkamerorna som fångar flest Så många fastnar i fartkamerorna Läsarna tycker till om bilhandlarna Bilhandlarna med bäst service – enligt köparna Bilhandlarna utnyttjar inte nätet Många bilhandlare svarar inte på mejl Polisen krockar – för dina skattepengar Så får polisen köra – och inte köra Unik karta: Här sker flest bilinbrott Så undviker du bilinbrott Polisen: "Bilinbrotten har minskat dramatiskt" Läsarna berättar om bilinbrotten

Om mig

Jag är digital redaktör på Auto Motor & Sport och Recharge. Jag har en kandidatexamen i journalistik från Mittuniversitetet i Sundsvall och jobbar gärna med datajournalistik och visualiseringar.

Jag skapade min första hemsida i stolpig HTML-kod när jag var tolv. Sedan dess har jag lärt mig CSS, PHP, Javascript, MySQL och en del annat nyttigt. Den här sajten är byggd i mitt eget publiceringssystem eCMS.

Jag jobbar i Sublime Text och Coda och versionshanteringsprogrammet SourceTree. Jag borrar gärna ner mig i avancerade Excelark och gräver runt i Open Refine. Jag använder också grafikbiblioteket D3.js, InDesign, Photoshop, Illustrator och Audacity. Experimenterar med en del PHP-ramverk, Final Cut och Motion, Python, Xcode och Swift.

Kontakt

Mejla mig gärna på eriksdh snabel-a gmail punkt com, följ mig på Twitter eller läs mina artiklar på Auto Motor & Sport och Recharge.