Category: FFUniverse

Gilgamesh kan vara det system på FFU ingen har hört om. Vårt egna CMS (publiceringssystem för att skapa hemsidor med menyer, sidor, etc). Det byggdes för många år sen av mig för att jag skulle slippa lägga upp alla nya sajter manuellt. Ni vet, skapa en ny fil, lägg in lite html-kod, lägga upp lite text, kolla länkar, och så ladda upp på servern med FTP. I Gilgamesh lagrades allt i en databas, så man bara skrev in massa data i olika formulär för att skapa helt nya sajter, sidor, och menyer. Genialt!

Men det blev aldrig färdigt. Inte ens i närheten av. Vi körde ut FF12 och FF13-sajterna i systemet. De funkade. Men det var fortfarande rätt hopplöst att jobba i. Man kunde inte jobba på en sida i smyg, som ett utkast, utan allt publicerades direkt man sparade nåt. Och väldigt få tekniska saker var annat än manuellt jobb, som att sen publicera sajten. Skulle man göra sidor med tabeller och/eller bilder så var man tvungen att knacka ren html-kod.

Nu igår så tog jag ner detta system från FFU, för gott. Det har tjänat sitt syfte. De två sajterna som låg publicerade i systemet har sen länge flyttats till WordPress. Och de sajter som var på gång var få till antalet och all den datan har jag sparat undan.

Här får ni några bilder på systemet för att se lite hur det såg ut. Kan ju vara kul för … kanske nån i vartfall ;P

TopNav är den lilla sidnavigeringen som ligger i toppen på alla sidor över hela FFU. Den har sett likadan ut i många år. Men nu har jag skrivit om koden till den, från grunden.

Här följer två jämförande bilder mellan den gamla versionen och den nya.

Före:

Efter:

Såg du någon skillnad? Nej, inte jag heller. Det är ingen skillnad. Designen är identiskt. Enda mikroskopiska skillnaderna man kan se är att text man skriver i login-formuläret fått lite marginal till vänster, ikonerna har justerat sina placeringar lite i samma formulär, och “FF-shop” har blivit “Final Fantasy”. Men annars är allt identiskt.

Vår förra TopNav var gjord som en iframe. Detta är en dålig teknik, den är speciellt dålig för sökmotoroptimalisering och sidan laddar lite saktare när sådant används. Så steg ett var att göra koden direkt på sidan och inte använda en iframe alls.

Inte heller var HTML-koden direkt semantiskt korrekt, eller direkt SEO-vänlig. Helt enkelt var koden väldigt ful. CSS:en var också väldigt dålig, upprepade väldigt många saker, och gjorde massa onödigt. Därför har bägge dessa skrivits om totalt från grunden. Samma utseende men så extremt mycket bättre (och modern kod istället för stenålderskod).

Sen så var den inte heller något mobilvänlig alls. Detta har också ändrats så att man kan få TopNav (utan login-funktionen dock) även på sin mobil. Ett stort lyft för våra mobilanvändare som behöver ta sig mellan våra olika spelguider.

Den nya lösningen är skriven in i vårt nya WordPress theme – “FFU2 – v1.5“. Trots att detta theme är byggt i PHP så använder faktiskt inte nya TopNav någon PHP alls. Jag tänkte lite långsiktigt och har skrivit koden så att allt baserar sig på bara JavaScript istället. Detta JavaScript anropar en fil på Windows-servern. Denna fil är skriven i klassisk ASP mest för att mycket kod redan fanns till detta och för att det är enda sättet att kunna kommunicera med Communityn som är helt lagad i det språket.

JavaScriptet börjar alla sidvisningar med att sända en fråga via Ajax till Windows-servern. Detta funkar vanligen inte, men genom att tillämpa CORS-principer så funkar allt nu fint. Windows-servern svarar med en JSON-fil som innehåller all data som behövs. Där står senaste nyheten vi har, om du är inloggad, och lite annan sån data. Dessutom – och detta är helt nytt – skickar vi med info om den senaste uppdateringen som gjorts på någon av våra guider. Så nu kan vi visa inte bara senaste nyheterna utan också senaste guide-uppdateringarna.

Denna JSON-fils data cachas också lokalt så att den genereras max en gång var 15 minut. Cachningen är global också, inte per besökare.

En annan liten fin detalj är att TopNav förut gjorde många http-request på grund av alla de små ikonerna, till communityns inloggnings-formulär bland annat. Detta är nu löst genom att jag slagit ihop alla ikoner till en enda “tilemap”-fil som istället får placera ut ikonerna genom att flytta på en bakgrundsbild och sedan “klippa bort” de ikoner som faller utanför.

Många roliga tekniker insprängda i en enda liten “modul” med andra ord. Nu återstår bara att byta ut alla Windows-sajternas gamla TopNav-kod med denna nya. Sen kommer jag hata TopNav lite mindre ;P

Och ja, FF-shoppen är nerlagd. Jag ska komma med mer info om det sen, men det var på tiden att klippa bort den döda grenen från FFUs träd.

Det nya themet har bara en sak kvar på todo-lisan. Hade. De förökade sig och nu är de två.

Den första buggen är ett mindre JavaScript-problem inne på bildgallerierna som ibland krympte alla bilder till 15 pixlars höjd. Tror det ska vara enkelt att lösa och att buggen beror på att bilderna inte hunnit laddats ner.

Den andra buggen upptäckte jag idag på t-banan till jobbet. TopNav (menyn överst med alla romerska siffror) har mobilanpadsats i nya themet. Dock dök där upp en liten grafisk bugg där man ser några pixlar av en text jag prövar dölja tills man aktivt öppnar menyn. Detta är en väldigt lätt sak att lösa i CSS.

Men istället för att lösa dessa två sista buggar idag eller igår så förberedde jag de nya FF12 och FF11-sajterna så att de är så gott som redo att lanseras samtidigt som det nya themet.

I nästa vecka senast vill jag tippa på att vi kan lansera. Efter det byter jag theme på sajt efter sajt eftersom lite tekniska saker bakom menyn och startsidorna är annorlunda mellan themen och kräver manuell hantering vid ett byte.