Category: FFUniverse

Nytt Theme under utveckling – “1.5 light”

2015-01-21 / Bobby

I maj 2013 släppte jag äntligen FFUs första spelsajt byggt i WordPress. Nu snart två år senare har inte bara premiärsajten – FF7-guiden – flyttats utan även en mängd andra spelsajter på FFU. En efter en lämnar de gamla tunga dåliga system. Förbättringarna är för många för att klara att skriva ned. Sen är det alltid kul för besökare, och oss, med ny design och ett mer lättillgängligt innehåll.

Men det tar fortfarande en hel del tid att flytta en enda sajt. FF7-guiden tog månader att flytta. FF2-guiden bara en dag. Så det går framåt på den fronten. Vårt Open Source-projekt “Migrate-2-WP” underlättar enormt, det är vi helt beroende av.

Trots att det vi släppte i 2013 hade fått väldigt mycket tid under flera år så klarar jag ändå se fullt av förbättringsmöjligheter. Det gick länge under kodnamnet “FFU2 – version 2.0”. Där samlade jag en lista med hundratals små förbättringsförslag. För ett par veckor sedan var vi uppe i en lista på 200 förbättringar där. Men inga var påbörjade. Tanken var att göra ett helt nytt WordPress Theme, med ny design och nya funktioner. Men att göra ny design tar väldigt mycket tid, så jag gjorde en kompromiss för att äntligen få kommer igång med projektet och flera extremt välbehövda förbättringar.

“FFU2 – v1.5 light” är det nya Theme jag påbörjat. Från listan över “2.0”-saker så flyttade jag ut de 100 viktigaste punkterna, och då bara de som inte hörde till designen. Dessa har jag nu jobbat på i ett par veckor på ett nytt Theme som testas och utvecklas på kommande FF11 och FF12-sajterna.

De egentligen största problemen vi hade med våra tidigare WordPress-sajter var tre. De går trögt. Onödig administration. Övrigt. Så jag satte igång med full fokus på detta. Varje del har adresserats med en mängd olika förbättringar. Alla dessa förändringar är under ytan, men tillför väldigt mycket. Jag har också den stora fördelen av att jobba i ett separat Theme på sajter som inte lanserats, så ingen anledning att bli nervös om något går helt sönder.

Trög sajt

Här måste man analysera väldigt mycket för att komma till roten av felet. Flera åtgärder görs, och flera saker påverkar hur snabb en sajt är. Det är också gjort många många småförbättringar för detta. Här är några av de störra förbättringarna.

TopNav

Den var använd som en iframe för att jag då Themet gjordes inte visste hur jag skulle lösa det mer långsiktigt, men valde att inte lägga tid på att tänka på saken. Men nu har två år gått, och jag har tänkt på saken. Det slutade med att jag tog den senaste html-koden för TopNav och la in direkt i Themet. Med den ligger all tillhörande CSS och JavaScript så att det inte behöver läsas in som separata filer (inläsning av filer tar på snabbheten). Den stora utmaningen var att få TopNav att visa senaste nyheten, samt data om man var inloggad eller ej. Detta löste jag genom ett CORS-system, där får ett JavaScript i TopNav skicka en Ajax-förfrågan till Windows-servern och en JSON-fil som kan ge all denna data tillbaka. Detta sätt att jobba på var förvånadsvärt smidigt och enkelt.

Plugins

Det är flera plugins på plats i WordPress. Jag har genom åren testat flera fram och tillbaka, och i vissa fall behövde jag en funktionalitet som jag inte visste hur jag själv löste. Men nu i detta nya Theme så har jag lyckats lösa flera såna saker. Till exempel så hade vi förut ett plugin som genererade en brödsmulestig (breadcrumbs) överst på alla sidor. Den i sig tog inte direkt lång tid, men den krävde en del inställningar och extra filer, och allt detta kunde i FFU:s fall ersättas av bara 10 rader egen kod o Themet.

Inga Child-Theme

På grund av några små anledningar såg jag Child Themes som enda utvägen då jag gjorde det första Themet. Det är en smidig funktion i WordPress, men den gör enligt min uppfattning saker lite trögare. Men nu har detta gjorts om, bara ett enda Theme har skapats nu. De saker som förut krävde nya Child Themes per sajt var varje sajts personliga header-bild, logo, och eventuell annan design-grafik. Nu har jag löst detta mycket smartare och kan därför använda endast ett enda Theme. Dessutom har framsidan förbättrats. Förut ändrades där story och den lilla disclaimer/fotnot-texten manuellt i koden, nu hämtas den ut från WordPress.

Administration

Att kasta ut Child Themes underlättade massor för administrationen. Nu behöver jag inte längre lägga de cirka 30 minutrarna på att kopiera upp och ändra nya Themes till varje ny spelsajt. Dessutom blir det lite lättare med uppdateringar och förändringar på Themet, och lättare för administratörer. Men även andra saker har gjorts för att förenkla administrationen. Det ska absolut inte ses som att nya WordPress-systemet varit knöligt, jämfört med hur vi hade det på de riktigt gamla sajterna så är det enormt mycket enklare att jobba med sidorna. Men det fanns en del saker som ändå kunde förbättras, speciellt efter två års testning och erfarenhet från systemet “live”. Man märker efter ett tag vart saker skulle kunna förbättras eller förenklas, vart det uppstår flaskhalsar, och vart saker inte funkar helt som man först tänkte.

Inga CPT

Custom Page Types är genialt, men det kan bli lite tungt och krångligt att administrera. Det är en teknik för att jag i WordPress ska kunna definiera upp egna innehållstyper där jag själv bestämmer vilka fält som ska visas och hur de ska valideras. Detta har jag nu tagit bort helt, och allt är nu bara helt vanliga sidor. För att kunna fästa extra data till Bossar och Karaktärer, för exempel, så använder jag nu ett plugin som vi ändå hade på plats från början men inte utnyttjade. Inne i Admin så försvinner på grund av detta också tre huvudmenyer, och flera saker så som Sitemap.xml-generering och Breadcrumbs, förenklas. Den största förbättringen här dock var att jag upplevde problem med att på ett lätt sätt lära ut hur dessa fungerade. Nu är allt i nya Themet helt vanliga sidor.

Live Menu

När jag först lärde mig om meny-systemet i WordPress så älskade jag det. Det löste alla problem och utmaningar jag hade med FFU. Man skapar en sida, och när man är färdig med den så går man och placerar den i menyn. Men, detta är lite svårt att få folk som är ovana vid CMS att förstå. Dessutom upplever jag det själv som lite onödigt omständigt ibland, speciellt när en helt ny sajt skapas … på nära 100 sidor! Då lägger jag väldigt mycket tid i menysystemet. Nu har jag reducerat denna tid till nästan noll genom att helt undvika systemet! Nu har jag skrivit lite smart kod som istället genererar menyn från de sidor man har och den ordning de redan ligger i, och speciella “placeholders” placerars ut för att skapa nya menygrupper.

Injicera Boss-data

Inte visste jag att bara 10 rader kod skulle behövas för att göra det så mycket enklare att lägga in automatisk boss-data mitt i guiden. Skriver en skribent [boss url=”scorpion”] i sin text så kommer den koden se till att hitta fram till just den bossen och hämta ut data om den och skriva ut en fin och tydlig länk mitt i guiden. Förut måste jag göra en ganska omständig process för att detta skulle funka, och den hade jag nog omöjligen kunnat lärt ut till andra.

Guide-navigator

På FF7-sajten la jag tidigt upp en navigator i toppen och botten på alla guide-sidorna. Med den kunde man ta sig lätt till nästa sida, förra sidan, eller startsidan på guiden. Analys av våra besökare visade att alla inte fick med sig hur guiderna var uppbyggda och kom in på en av guidesidorna men gav upp direkt och gick inte vidare. Denna navigator löser detta problemet. Men jag la in denna kod manuellt, och den fick ändras för varje sida. Så det blev bara FF7-guiden som fick den. Nu i 1.5 så har jag en egen mall till guiderna som automatiskt genererar denna navigation.

Uppdaterings-publicering

Just nu dubbelpostar jag, i två olika system, alla uppdateringstexter från WordPress. Först skrivs de på respektive sajt i WordPress, men sen måste jag också logga in på Communityn och lägga in samma text i vår RSS-admin. Först då kommer nyheten ut i vår RSS och på sidan på Nyhetssajten där vi listar de senaste uppdateringarna. Men nu har jag ett litet system på plats som sköter den sista delen automatiskt.

Övrigt

Väldigt många andra saker har setts på också, så som förbättringar på JavaScript, CSS, och själva mall-systemet. Mycket kod har förbättrats. Fler mallar har introducerats till skribenter att välja mellan. Sökmotoroptimering har förbättrats. Bildgallerierna har äntligen utökats med Lightbox-funktion (på tiden).

Se fram emot detta nya Theme med många förbättringar.

FFU:s alla domännamn

2015-01-12 / Bobby

FFU har funnits sedan 1997. Men då låg vi inte på FFUniverse.nu utan på en mycket mer knepig adress (“http://tninet.net/users/~cro075t/ff7.html” om jag inte minns fel). Det var ett gratiskonto hos den internetleverantör jag hade som 16-åring. Domännamn och webbhotell var för dyrt för mig på den tiden, och dessutom visste jag knappt nånting om det.

Men så i 2001 köper jag domännamnet ffuniverse.nu. Anledningen att det blev just “.nu” är att “.se” bara såldes till företag i Sverige (och jag hade inget då), och “.com” var redan tagen. De andra alternativen (“.org”, “.net”, etc) tyckte jag inte lät lika bra som “.nu”.

Så där är historian bakom valet av domännamn.

Men vi har fler än bara det! Per idag har vi nu fem olika domännamn! Först ut var finalfantasy.nu som vi köpte upp efter att en konkurrent la ner sin verksamhet. Det var ju uppenbarligen ett väldigt bra och passande namn, som jag inte hade tänkt på då jag köpte “ffuniverse.nu”. Jag minns inte vilket år detta var, men det var nån gång runt 2003-2005 skulle jag gissa.

Skriver du in “www.finalfantasy.nu” i din webbläsare så kommer du till ffuniverse.nu automatiskt. Adressen är bara satt upp som en “redirect” (omdirigering av all trafik). De andra domännamnet är satt upp på samma sätt, men dessa tre är helt nya!

ffuniverse.se, ffu.nu, och squareenix.se. Den första, “ffuniverse.se” hade jag i ett par år runt 2005 men sa upp då jag var ute och reste ett år och inte hade mycket av inkomst. Så den domänen tappade jag medvetet. Turligt nog hade ingen köpt den så i slutet av 2014 kunde jag så äntligen köpa det igen.

Att få tag på det förkortande domännamnet “ffu.nu” var väldigt skönt, likaså att få tag på det mer breda “squareenix.se” som faktiskt passar nuvarande FFU lite bättre eftersom det är väldigt många år sedan vi var en 100% renodlad Final Fantasy-webbsida.

FFU är så mycket större än man tror

2014-12-04 / Bobby

Visste du att vår FF7-guide tillsammans med alla bossar består av över 150 olika sidor! Vi har över 20 olika spelsajter! Totalt sett är det inte dåligt med innehåll. Våra guider till FF8, FF9, FF10 och FFX-2 är inte så väldigt mycket mindre än FF7-guiden, så du kan alltid pröva räkna på den totala mängd information som finns. FFU är enormt stort, helt enkelt.

Om du skulle vara mer intresserad av hur vi lagrar all denna FFU-data så ta en titt på vår nya sida om våra servrar. Den visar vart alla våra sajter ligger och i vilken typ av system och kodspråk de körs i.

Där ska ni kunna få en överblick över hur det går med att modernisera FFU genom att flytta bort från alla de manuella special-uppsätten till ett enhetligt uppsätt. I vårt fall så valde vi att lägga in allt i WordPress på grund av väldigt många anledningarna.

Nästa FF-sajt att flyttas

2014-12-01 / Bobby

Nästa FF-sajt att flyttas blir inte en, utan tre stycken! Tre FF-sajter kommer att flyttas från det gamla tunga manuella hårdkodade systemet, över till det nya lättjobbade WordPress-systemet.

Sajterna som ska flyttas är FF1, FF2, och FF13. Alla dessa tre valdes för att de är förhållandevis små (jämfört med alla våra andra spelsajter) och enkelt uppbyggda. De tre körs just nu på vår ASP.NET-server, men FF13-sajten i vårt egenutvecklade CMS Gilgamesh (som kommer läggas ner).

Flytten av FF1 och FF2-sajterna gjordes med vårt egenutvecklade öppna källkods-projekt Migrate 2 WordPress. De flyttarna tog inte mer än 30 minuter styck, sen la jag en hel del tid i efterhand på att rensa upp och finjustera på ny menystruktur, nya bilder, rätta småfel, etc. Till exempel måste jag byta ut Karaktärs-bilderna på alla sajterna då de gamla inte funkar i nya designen. Mycket såna småsaker tar fort några timmar. Bara att finna tillräckligt högupplösta bilder från FF1 har ätit mycket tid av mig.

Totalt kanske jag hittills spenderat 8-10 timmar på att flytta dessa tre sajter. Men så är de nu också nästan alla klara till lansering. Och skönt blir det att kunna stänga ner ytterligare 3 gamla sajter, och öppna upp för att lättare ta in hjälp utifrån med allt innehåll.

Om några dagar är jag förhoppningsvis klar med allt arbete. Jag startade igår på FF13-sajten med att manuellt flytta över allt innehåll och rensa upp i gammal HTML-kod (fullt av FONT-taggar och CENTER-taggar … hallå 1800-talet!). Sajten har så lite innehåll att jag inte behövde köra den via Migrate 2 WP. Men det kommer behövs mer innehåll till den sajten innan det känns okej att lansera den, så vi får se vad jag hittar på. Klassikern är att i vartfall lägga upp alla karaktärer med minimal info, lägga upp lite bilder, och sen är frågan vad mer jag får till eftersom jag bara spelat några timmar av spelet.

Efter detta återstår fortfarande några sajter i gamla ASP.NET-systemet. Bland annat FF12-sajten som körs i Gilgamesh. FF11-sajten är enbart filbaserad. Alla andra sajter på FFU, om jag inte glömt nåt, körs i klassisk ASP. De vill jag så klart också få bort, men flera av dem är väldigt stora och komplexa, som FF7-sajten var, och den tog flera veckor av hårt arbete att få färdig. Så det är därför jag fortfarande inte tagit tag i våra allra största spelsajter: FFVIII, FFIX, FFX, FFX-2. Och de får nog vänta lite till.

Efter att dessa tre sajter lanserats i nya systemet så är då antalet sajter där 7 stycken (officiellt). 6 av dem är gamla som flyttats, och en sajt är helt ny – Bravely Default. Så systemet växer, och förbättras, hela tiden.

Några förbättringar på FFU Theme

2014-11-15 / Bobby

Jag har lanserat några förbättringar på vårt FFU Theme i WordPress. Ändringarna kom fram genom att jag märkte lite förändrade behov då jag satte upp nya FFIV-guiden.

Stöd för att stänga av bilder (och “Bild saknas”) helt på våra box-länkar till undersidor. Se boss-sidorna på FFIV-guiden.

Stöd för att visa vald sidbild inne på en vanlig sidmall. Detta funkade tidigare bara på specialskrivna mallar. Se sidan om Kain från FFIV.

Bildgallerierna visar nu alltid titel på alla bilder i ett bildgalleri. Om en bättre text skrivits (“Caption”) så visas den istället för titeln (som oftast är bildens filnamn och inte alltid så läsbar). Se nya bildgallerierna på FFIV-sajten.

Och så några mindre ändringar, bland annat för mobil-versionen.

Migrate-2-WP fixar flytt av FF4-sajten

2014-10-28 / Bobby

Vår egeneutvecklade produkt Migrate 2 WordPress har nu körts för första gången helt från start till slut och faktiskt resulterat i något som fungerar! Sannerligen dess eldprov.

Jag crawlade alla sidor på vår gamla Final Fantasy 4-sajt. Migrate 2 WP matas med en länk till startsidan, sedan sköter koden resten. Den finner alla undersidor och sparar undan dem i databasen. Sen genomgås flera olika steg för att “tvätta” resultatet så att all gammaldags kod byts ut mot mer modern kod.

Systemet har också en sjukt smidigt funktion, speciellt för FF4-sajten, som går ut på att splitta stora sidor till flera små undersidor. Som Karaktärer-sidan för exempel. På gamla sajten ligger all text på en enda sida, detta önskar vi inte i vårt nya system. I Migrate 2 WP ordnar man detta enkelt genom att “flagga” ett visst mönster i koden som man delar upp en sida på. Alla gånger denna flagga hittas i koden så skapas en ny undersida. Så på bara en sekund får jag Karaktärer-sidan uppdelad till en unik sida per unik karaktär. Detsamma gjorde jag för Magier och Bossar.

Hela denna process, från start till slut, tog cirka 30 minuter! Jämför det med hur lång tid det skulle ta att manuellt behöva gå in på varje undersida, ta “Visa källa”, spara undan all kod i filer lokalt, och sedan manuellt utföra “tvätt”-jobbet. Tidsbesparingen är enorm!

Sista steget är att spara in alla sidor i WordPress-databasen. Just nu har jag problem med detta via externa servrar, så jag måste spara allt lokalt. Men då kan jag ändå på några få minuter gå in och göra en “Export all pages” och sedan importera i min existerande WordPress-installation på FFU.

Bang! Alla sidor är nu på plats, med all sin text. Busenkelt.

Det jag dock måste göra efter detta är att manuellt gå igenom alla sidor inne i WordPress och ändra på detaljer. Det kryllar av stavfel och andra gamla små missar som Migrate 2 WP inte kan hantera. Sen så är det så klart att systemet helt missar vissa saker, glömmer lite html, eller liknande. Detta uppdaterar man manuellt. Dessutom är det väldigt nice att få en visuell bekträftelse på att alla sidor ser bra ut (så man bör ändå gå igenom sida för sida). Men det går fort i förhållande till att få göra allt själv från scratch.

Ett stort problem just nu är dock alla bilder. De flyttas inte automatiskt, och troligen kommer de inte göra det i version 1.0 heller. Men Migrate 2 WP flaggar alla bilder med en CSS-class, som jag i WordPress kan göra stor och röd (så att den lätt syns). Så detta uppdaterar jag manuellt då sidorna gås igenom. Bilden måste laddas upp på nytt och placeras ut på riktigt ställe, men inte heller detta tar jättelång tid.

Beräknad tid på alla dessa justeringar i WordPress är kanske 2 timmar på FF4-sajten. Vilket är förhållandevis lite tid. Totalt sett är det en väldigt stor förbättring. Och i framtiden är det möjligt att Migrate 2 WP förbättras ännu mer. Det hade varit kul att till exempel ha det som ett eget WordPress-plugin och se om andra kunde ha nytta av det. Mig har det hjälpt enormt. Jag hade aldrig moderniserat de gamla Final Fantasy-sajterna utan det.

Fokus-mallen

2014-10-26 / Bobby

Bild från gamla Paint Shop Pro-mallen

På FFUs nyhetssajt har vi något jag kallar för en fokusbild – “Fokus”. Denna skulle jag nu för första gången på många många år uppdatera genom att lägga in en ny bild där. För de flesta tillfällen (men tyvärr inte alla) av sånt här skapade jag mallar i Paint Shop Pro då jag designade sajten. Men jag har inte kvar det programmet längre utan använder uteslutande Photoshop. Så jag fick inte upp den filen som jag använt tidigare. Efter lite Googlande så testade jag lite olika program för att konvertera denna gamla fil (och flera andra), men de funkade inte.

Så det var bara att bita i det sura äpplet och designa allt från början igen. Samma fick jag göra med TopNav då jag skulle ändra i den. Stegen jag genomför är dock rätt identiska.

Finn fram måttet på bilden på FFU
Skapa en tom fil i Photoshop med detta mått
Lägg ett vitt bakgrundslager
Lägg en av bilderna från FFU ovanpå den (som eget lager)

Nu börjar det roliga. Efter det får jag steg för steg med effekter och lager återskapa precis det som syns i den platta JPG-bilden. För detta tillfälle var det flera små textsnuttar. De lägger jag då i ett lager över den platta bilden från FFU. Sen ändrar jag på storlekar, färger, och inställningar tills det ser nästan identiskt ut.

Så upprepar jag detta med andra element, så som skuggor, runda hörn, eller överliggande block med färg. På fokusbilderna har vi en bred horisontell vit linje som spelets titel ligger på. Den får jag stega mig igenom “opacity”-inställningen för att hitta rätt nivå. Sen gör jag samma med de tre lodräta svarta linjerna.

Här är det nu dags att skriva in spelets namn. Och där finner jag att fonten som jag använt förut – Long Tall Sally EEN – inte finns installerad på datorn. Jag har använt just den på all annan FFU-grafik, så jag vill helst ha just den. Googling efter andra FF-fonter visar inte helt lika bra resultat. Men jag finner fort min gamla goda font i mina gamla zip-arkiv. Men nu såg jag till att lägga den på ett smartare ställe på datorn =)

Nu börjar det ta sig. Bara en bild av Bravely Default behövs. Och det finner jag så klart lätt. Den lägger jag en “Shape” över, en fyrkant med rundade hörn. Jag Ctrl-klickar på den i lager-menyn för att kopiera rundningen. Sen skapar jag en Mask på bilden från Bravely Default och baserar den på den markering jag nyss gjort. Nu fick jag automatiskt runda hörn på denna bild. Detta underlättar väldigt nästa gång jag ska göra en likadan bild för då droppar jag bara in den i samma lager och får då automatiskt runda perfekta hörn.

Slutresultatet med Photoshop

Sist lite “Inner Glow” med svart ljus så hade jag nu en mall i Photoshop som är så gott som identisk med det flera år gamla Paint Shop Pro-originalet.

Nu är jag också duktigare på att spara alla dessa filer som “_TEMPLATE_xxx.psd” i samma mapp som de slutliga filerna sedan ligger. Då hittar jag mallarna mycket lättare.

Migrate 2 WP – status

2014-10-23 / Bobby

Som jag tidigare berättat om så utvecklar jag ett verktyg för att lätt flytta gamla hemsidor in i WordPress mer eller mindre automatiskt.

Det är nu stora förbättringar på plats. Jag kan med verktyget läsa av allt innehåll på FFU:s alla spelsajter. Innehållet granskas nu mycket smartare så hela den processen går mycket snabbare än den gjort förut, och inga felaktiga länkar kommer med.

Processen att sen tvätta innehållet bort från gammal dålig kod är markant förbättrad med bättre hantering, snabbare kod, och fler inställningar.

Jag tog också ett stort grepp runt menyn och lyfte ut hela projekt-admin till en egen menypunkt. Nu hanterar man alltså där alla sina projekt. Det blir då mycket tydligare när man valt sitt projekt och börjat jobba med det.

Andra nyheter är att man nu efter att ha läst av en hel spelsajt kan radera och på andra sätt administrera de sidor man läst in. Man kan till och med lätt splitta en sida till flera mindre undersidor, en funktion som FFU har extremt stor nytta av.

Med kanske bara 20 todo-punkter kvar så närmar vi oss en release av ett färdigt verktyg. Lite problem med inställningar och WordPress-kopplingar återstår att få ordning på. Sen börjar jobbet med en version 2 … kanske 😛

Av FFU-sajter så står just nu FF13, FF4, och FF1-sajterna på tur. De har redan gått några rundor i verktyget för att fixas.

Nya Bravely Default-sajten lanserad!

2014-10-17 / Bobby

Vårt senaste tillskott av sajter i nya systemet på FFU är då Bravely Default. Första lanseringsnyheten skrevs den 30 september, men det var egentligen först igår som nyheter spreds på övriga FFU att sajten är ute. Alla sidor med länkar till våra olika sajter uppdaterades ett par dagar innan det. Några fler uppdateringar kommer.

Och så klart kommer fler uppdateringar till Bravely Default-guiden allt eftersom jag tar mig vidare i spelet. Nu senast fick jag upp två bildsidor.

Nytt Theme till bloggen

2014-09-13 / Bobby

Wilson, ett svenskutvecklat theme till vår blogg är nu på plats. Lite mer fokus på läsupplevelsen, och väldigt mycket mer rent. Får se hur länge vi håller oss till det, det förra överlevde i ett och ett halv år.

Med just bloggen är tanken att lägga minst möjlig tid på annat än att skriva. Så egna themes kommer inte att utvecklas.