image/svg+xml Ta mig upp

Category: FFUniverse

Nu är vi färdigflyttade

Vi står nu i mitten av april. Flera år av migrering från gammal utdaterad kod skiven i VBScript / ASP classic, och lite ASP.NET, till ett gäng mer moderna wordpress-installationer. Från att tidigare bara kunna göra ändringar i text genom att direkt ändra statisk html-kod och ladda upp över FTP, till att styra all text, struktur och bild över ett smidigt admin-system. Vi har kommit en lång väg även om det tagit tid.

Så långt i 2021

I februari flyttade vi de sista guiderna in i WordPress. Då kunde alla gamla guider stängas av. Samtidigt ströps de sista delarna av annan gammal teknik vi hade, så som gamla framsidan, gamla uppdateringssidan, gamla felsidor och de sista spåren av FAQ-sajten. Allt ersattes med sidor på WordPress.

Hundravis av små filer med gammal teknik har en efter en tagits bort i år. Allt från en liten textfil som höll reda på antal max inloggade till små bilder till mobilvisningar, som inte användes.

Det största vi gjorde var nog att helt radera communityn. Hundratals filer rätt i soptunnan. Men med en myriad av säkerhetsproblem och över tio år gammal kod så var det nåt vi var nödvändiga att göra. Alla medlemmar har hållits uppdaterade om detta och med tanke på hur få som faktiskt använde communityn gick detta ganska smidigt.

Migreringen

Och där nådde vi målet. När all gammal utdaterad Windows-teknik var utbytt kunde vi lämna en gammal (och väldigt bra men dyr) server med PHP5 som kostade oss 200 NOK i månaden, till en mer uppdaterad server med PHP7 och utan Windows som kostar 250 NOK i året (första året, sen 1000 i året). Detta hjälper oss väldigt att fortsätta satsa på guiderna och eventuellt utöka och växa på sikt. Det ska också ha hjälpt en del på farten på sidorna.

Så, mindre styr och jobb, och lägre pris. Även om vi gillat alla våra år hos gamla leverantören blev vi för små och det blev för mycket pengar för ett fritidsprojekt.

Själva migrering till nytt webbhotell gick smidigt … “smidigt”, eftersom jag råkade beställa migreringen samtidigt som jag tog en veckas påsk-semester och kunde då inte ladda upp alla filer på nytt webbhotell, så FFU låg nere i en vecka.

Vi kör ett konto med 10 databaser och kunde lätt via phpmyadmin exportera och importera all data. Det var så klart guiderna som tog mest tid, men vi hoppade över några gigantiska logg-databaser för att spara tid. Det tog en stund innan jag såg dessa log-databaser eftersom de ligger i vår multisite-installation som innehåller hundratals tabeller.

Alla filer (bilder etc) åkte upp med FTP. VI hade sedan tidigare förberett så mycket vi kunde och ordnat smartare struktur på alla mappar och filer, till exempel för resurser som nedladdningsbart material. Detta gjorde att vi bara kunde ta en massa filer lokalt på PCn och skicka upp över FTP. Detta stod och gick under en kväll och var efter cirka en timma färdigt.

När vi var igång på nytt webbhotell märkte vi att symlinks av plugins inte funkar, något gamla servern hade och som sparade massor av tid eftersom vi kunde dela plugins mellan WP-installationer. Vi får utforska alternativ. Supporten på nya webbhotellet är grym och har hjälpt oss massor i migreringen, så ska ta tag i detta vid tillfälle.

Nu

Nu kastar vi också ut community-login till höger uppe i TopNav (och efter all rensning är det nu bara en topnav att underhålla koden på, lyckligtvis). Inga spår av communityn finns kvar i koden, nästan, bara vår lilla “game over”-skärm som länkas till med text från vissa väl utvalda platser.

Vi byter också ikon för guiderna till en incirklad Moogle i FFU-blå. Samma ikon pryder nu också våra sociala medier. Den gamla galaxen (som skulle symbolesera “Universe” i FFUniverse) är nu ett minne blott. Sättet vi la upp Favicons i koden var också nästan 10 år gammalt, och där har mycket hänt, så vi gjorde ett ordentligt lyft i denna kod samtidigt. Resultatet är att FFU nu ger ett mer samlat uttryck, och det är kul. Klickar du dig runt på alla sidor ser du Moogle överallt, på alla guiderna har han en blå bakgrund, och på framsidan är hans ansikte inzoomat. Detta hjälper med att ge ett enhetligt FFU-uttryck men samtidigt att se skillnad om man har många flikar med FFU öppet.

Nästa steg

Nästa steg nu förutom att övervaka hur saker flyter på, är att kanske flytta eller slå ihop någon av våra tre mindre WordPress-installationer – root (www), Dev eller Om. Det är lite knöligt att ha tre olika installationer att hålla reda på, och efter Windows-serverns död behövs det ej vara så många olika (på grund av DNS-problematik och två olika servrar förut var vi tvungna att ha massa olika WP-installationer i olika subdomäner).

Vi ser också på att göra några justeringar på TopNav, som vi hade planlagt från starten men ej prioriterat. Och det är att kunna visa när någon guide eller nyhet är uppdaterad, direkt i TopNav. Vi kommer återkomma om det, men en JSON med all senaste info samlad från alla våra system är redan på plats och funkar på ny server.

Vart vi står i slutet av året vet jag inte, det hade varit kul med lite skribenthjälp på guider och nyheter, men också är jag sugen på att sätta upp någon form av forum på FFU. Jag saknar livet på sidorna vi fick av Communityn. Men vi får se. Tiden går fort och det är alltid massa smått som ska göras, och det är bara lite kvällstid då och då som sätts av till FFU. När det startades var jag student som satt dygnet runt (bokstavligen), nu är jag småbarnsfar med heltidsjobb.

Februari-release på FFU

I dessa dagar har vi rullat ut nye versioner av våra tre viktigaste kodbaser – designen till alla guiderna – theme-ffu2, till vårt plugin som ger oss TopNav och EndNavplugin-common, samt designen till guide-väljarentheme-light (det ligger också annan funktion och andra sidor där, så som “Senaste uppdateringarna“).

Detta har vi nu lanserat:

Theme Light

1.2.0 av theme-light – Theme Light är alla de där småsidorna på FFU som inte är guider, alltså startsidan, felsidor, lista över alla uppdateringar, och liknande. Theme Light har nu utvidgats stort för att ta över absolut allt som vi tidigare använde ASP classic och vår Windows-server till, detta är ett kritiskt steg för att kunna helt stänga ner den servern.

Theme light kan nu:

  • Visa vår 404 sida, ersätter den vi har på Windows-servern.
  • Visa RSS för alla uppdateringar på alla våra guider, ersätter den vi har på windows-servern. Vår gamla RSS för detta dirigeras nu hit.
  • Visa en community-template för när den stängs ner 1 mars. Ersätter communityn som ligger på Windows-servern.
  • Visa vår “välkommen”-sida där man väljer väg (guider, nyheter eller annat). Ersätter sidan vi har idag på Windows-servern.
  • Några andra mindre fixar:
    • Fixat länkar som ej funkade på uppdateringssidorna (namn och logo länkade ej till guiden på översikten).
    • Länk till RSS i toppen och botten på sidor som visar uppdateringar från bara en guide.
    • Förbättrad och modernare kod för hur titlar (<title>) hanteras på alla sidor. Lite småjusteringar återstår, men nu är det lättare att specialanpassa detta.
    • Alla spelloggor ligger nu i /logos/ istället för i /img/ som inte gav nån mening.

Theme FFU2

1.7.2 av theme-ffu2 – Theme FFU2 används för att visa alla våra guider, och innehåller således väldigt många olika mallar, och väldigt mycket kod. Vi har gjort några lyft här för att dels visa upp våra RSS-feeds bättre, och dels för att på sikt kunna ta bort kod för saker som nyare WordPress gör för oss.

  • Vid sista migreringen (FFX-2-sajten) la vi in några bildgallerier på det sätt WordPress öppnar för inne i admin, för att få testa systemet gott. Och det funkade så bra, men det såg helt trasigt ut. Vi har nu skrivit om koden för detta så att dessa gallerier ser ut och beter sig exakt som de gamla, fast i tillägg använder alt och title attributen på rätt sätt.
  • En liten orange länk till guidens RSS-feed på startsidan efter listan men nyheter.

Plugin Common

1.6.0 av plugin-common – Vårt FFU-plugin som ansvarar för att alla delar av sajten – trots olika design på sidorna – får TopNav, EndNav, och i övrigt ser ut och funkar likadant. Detta plugin har fått flera tillskott som gör att vi kan ta bort kod andra platser, eller flytta något bort från Windows.

  • Tagit över all koden för att lägga in uppdateringar (posts) som skrivs på guiderna i en egen databas som vi nu lagrar tillsammans med guiderna. Detta ger oss mer flexibilitet runt val av themes i framtiden, men mest gjordes detta för att säkra serverbyte – få allt bort från Windows.
  • En ‘ta mig till toppen’-knapp nede till höger på alla våra sidor som aktiverat den nya topnaven (just nu är det 100% av sidorna). Den animeras snyggt och kan användas för att komma till toppen på sidan snabbt när du är långt nede i en guide och läser.
  • Tagit över all kod för att skjuta in länkar till alla våra olika feeds på alla sidors <head>. Förut underhölls detta manuellt på alla sajter, nu ordnar pluginet det.

Vi är nu ett stort steg närmare att inte vara beroende av Windows-servern och 15 år gammal kod full av säkerhetsproblem som inte fixas. Nu återstår bara att stänga av communityn, och att flytta hela vårt www-område till den nya WordPress-server vi satt upp för att ta över med hjälp av alla utökningar i Theme Light.

Alla guider migrerade

De sista fyra guiderna på FFU som låg kvar i gammal infrastruktur var FF9, FFX-2, Brave Fencer Musashi och Sword of Mana. De har vi under starten av 2021 gjort stora insatser för att flytta över till ny modern struktur. Sword of Mana var dock så liten och utan trafik att den valde vi att helt lägga ned (för första gången i FFUs historia).

Nu bor alla våra 22 spelguider på vår Unix-server, körandes i vårt fina och moderna FFU-theme, på WordPress i ett Multisite-uppsätt. Äntligen kan vi med få klick flytta sidor, lägga till sidor, rätta stavfel, lägga upp fler bilder, med mera. Vi började detta stora projekt med FF7-sajten för snart 8 år sedan, och där har vi verkligen märkt fördelarna med att ha allt innehåll i ett modern CMS eftersom vi har utökat med innehåll där hela tiden.

Nu är vi på en plats i livet där tillägg och uppdateringar är busenkelt, det gör att guiderna kan växa och fortsätta bli bättre. Vi har just nu bara fokus på att förbättra de guider vi var, mest för de första 15 FF-spelen. På sikt får vi se om vi lägger till fler guider, men det är inte något vi prioriterar då det kräver en dedikerad skribent först.

Och med allt över i WordPress kan vi äntligen börja planlägga framtiden. Vi kan stänga av vår Windows-server som kommer spara oss massa pengar men också rensa bort massa gammal kod och specialtricks vi inte behöver längre. Det enda som just nu återstår är att lägga ner communityn, den läggs ner den 1 mars. Vi har också ett eget system för hantering av uppdateringar på alla guider, och RSS för detta, samt ett eget system för redirects från gamla URL till nya. Allt detta flyttar vi just nu och räknar med att vara färdiga till månades slut.

Så, nu kan alla våra spelguider endast läsas från guide-servern, ständigt uppdaterade genom WordPress.

Vi sover inte, vi jobbar

Nej då vi har inte somnat sedan sist. Vi jobbar vidare för fullt. Det som varit fokus i hela 2019 har varit att skriva färdigt nya FF7-guiden, för första skivan. I samma släng så såg vi behov för fler designelement för att kunna lyfta fram viktig information, Side Quests med mera. Detta skapade vi och har lagt in i vårt guide-theme i början av detta år.

FFU2 v1.7

Nu idag släppte vi samtidigt version 1.7 av vårt guide-theme. Det innehåller mest förbättringar för mobilanvändarna, buggfixar, samt bättre sök, samt stöd för EndNav via vårt plugin.

Vi tog också tag och gjorde några mindre knappt märkbara förbättringar på vår TopNav.

EndNav

FFUs footer/endnav har spretat i sin design väldigt. Varje sida har gjort den på sitt sätt. Du kan tro det varit jobbigt att ändra något i den. Men nu äntligen har vi flyttat den helt in i vårt wordpress-plugin så att de automatiskt läggs till alla våra guider, med kod från endast en källa.

Vi har tre olika footers, den på guidesajterna, den ljusare på guideväljaren (startsidan) samt så alla andra (upp till 10 olika). Alla dessa har ersatts av en av de två varianter vi utvecklat. Vi har en guide-variant, som passar bäst på guiderna, och en ljusare och mindre variant till alla andra sajter. Alla våra sajter som kör i WordPress har nu en av dessa, de andra får leva vidare tills de dör, utan underhåll.

Som bonus förbättrade vi designen på bägge dessa varianterna. De blev luftigare och mer polerade, samtidigt optimerade vi dem så mycket vi kunde genom att ersätta gamla bakgrundsbilder med CSS, eller bara helt enkelt tog det bort. Samtidigt har vi förbättrat väldigt för mobilanvändarna, de har tidigare oftast inte ens sett footern, nu får de den, i responsiv design.

Vi kan också bjuda på flera små enkla men klädsamma animationer, och för att balansera det annars vita och blå FFU: massa starka färger.

Bye Bye Windows (snart…)

Ett av våra största projekt, som hållit på under flera år, är flytten från Windows-servrar till PHP och WordPress. Det återstår just nu bara 4 guider och communityn, och så några sista småsidor med funktioner på www. I dagarna har vi tagit ett stort lyft för att flytta den gamla sidan som listade alla sajterna uppdateringar, den ligger nu på guidernas startsida och kan visa sista ändringarna i ett snyggt format. Man kan antingen se uppdateringar för alla guider, eller via länk från en guide se endast vad som är relevant för den. Trots att de flesta inte kommer behöva den sidan så är den värd en titt, den är riktigt snygg. Ännu en sida från Windows-servrar kan tas bort.

Utvecklingsflyt

Störst grund till att vi lyckas rulla ut så här relativt stora ändringar samtidigt utan märkbart antal buggar är vårt förbättrade arbetssätt på lokal maskin. Vi använder först Local (från Flywheel) som kör WordPress och databas lokalt. På detta sätt kan vi simulera hela FFU i en trygg miljö innan nåt läggs ut. Sen så versionshanterar vi allt genom BitBucket (genom VScode) och när det är dags att lansera något kör vi bara en git pull på servern via SSH och alla ändringar lanseras i en stöt. Tänk att vi jobbade på ett mer manuellt sätt förut … hemsk tanke.

Framtiden

För resten av 2020 planlägger vi att få flytta de där fyra sista sidorna så att det mesta av gammal asp-kod kan tas bort. Vi fantiserar också massor om en helt ny design till guiderna, trots att den utvecklats massor över åren så är den i grund och botten 8 år gammal! Kanske dags för nåt nytt. Men det är ett stort projekt så vi får se.

Nya funktioner till våra guider

Alla våra guider har idag uppdateras till version 1.6 av vårt egna WordPress theme. Det är inte en helt ny design, men mycket är förbättrat eller nytt. I denna version har vi fått med nästan hundra små (och några stora) förbättringar – synliga och osynliga. Här är de du säkert kommer ha mest glädje av:

Bättre på mobil

Vi har rent generellt jobbat ganska hårt på att FFU ska se snyggare ut på mobil och mindre skärmar. Detta var inte alltid helt optimalt förut, till exempel gick hela guiden in i mobil-läge på relativt stora skärmar, vilket är lite onödigt. Vi har nu fixat och jobbat på detta mer genomtänkt. Vår helt omdesignade mobilmeny är en stor del av detta (mer om den senare)! Dessutom, går du in på våra bildgallerier så kommer du kunna njuta av fullt stöd för att gå mellan bilderna genom att swipa med fingret.

Bättre guide-navigator

Vi har små länkar för att komma till nästa (eller förra) del i guiden. Detta är väldigt praktiskt och uppskattat, men funktionen har saknat det där lilla extra. Nu går vi hårt ut och introducerar en uppdaterad sådan navigator. Vi lyfter fram vad de olika delarna heter, så att du bättre vet vart du är på väg. För att lyfta fram det vanligaste man vill göra när man kommit till botten av en sida så har vi lagt in en stor och tydlig knapp för nästa sida i guiden. En liten detalj som underlättar mycket för den som spelar samtidigt som denne läser våra guider. Självklart är mobilstödet för denna navigator väldigt bra.

Ny mall: innehållsförteckning

Våra guiders guider (wow, kan man säga så? – men jag menar alltså själva FF7-guiden som tar dig genom spelets story) har haft lite bristande översikt på alla de delar/kapitel de består av. Vilken del ska man börja på? Vart hittar jag information om boss X? Vart kan jag läsa om grotta Y? Det ordnar vi genom att helt omarbeta hur vi gör översikten på en guide – möt vår nya innehållsförteckning! Med snygga bilder och tydliga rutor kan man snabbt få sig en översikt av allt innehåll. Bilderna matchar så klart innehållet. Under varje kapitel (vi ska nu pröva kalla detta för “kapitel” mer konsekvent) visas korta “taggar” som representerar allt det stora just detta kapitel tar upp, men utan att spoila för mycket. Du har nu den perfekta översikten direkt på guidens startsida! Just nu är detta bara introducerat på nya FF7-guiden, men kommer till fler guider framöver.

Syskonnavigering

En egen liten navigator för att lätt navigera till nästa (eller förra) sidan + tillbaka till översikten. Aktiverad på alla bossar och karaktärer. Fungerar i stort sett exakt som guide-navigatorn beskriven tidigare. Självklart med utmärkt mobilstöd. Vi hoppas detta ska göra det lättare för dig att komma igenom flera bossar på en gång, samt få klickat dig runt ännu mer på FFU!

Omdesignad och bättre mobilmeny

Detta är möjligen en av mina personliga favoriter, en helt ny meny för mobil! Inte bara är den riktigt snygg och i sann gammal Final Fantasy-anda, den är också extra funktionell genom att den sätter sig fast på toppen av din skärm när du skrollar ner på sidan. Använd den närsomhelst för att ta fram alla sidor på en guide, så att du lätt hittar dig till nästa sak du söker. Som bonus är den helt gjord i CSS och extremt mycket snabbare än den gamla.

Stora boss-utklipp till guiderna

Guiderna kan enkelt hämta in data om en boss bara genom att redaktören länkar till bossen. Vi hade detta förut men introducerar nu en större och bättre inforuta för bossar – den visar HP, svagheter, styrkor, samt kortfattade tips för att besegra bossen (självklart med en länk vidare till full beskrivning på boss-sidorna). Används än så länge bara i nya FF7-guiden. Dessutom prövar vi något ganska nytt – gul och orange färg i vår design för att bryta lite mot det blå.

Mängder av småförbättringar

Guiderna är i behov av mer rikt innehåll, så vi lägger in snyggare citat och tydligare markering av vad du ska välja i menyer eller i dialoger i spelen. Vi har också lagt in små toningar, animeringar, och grafiska uppdateringar här och där som du kanske (eller kanske inte) lägger märke till. Även jobbet för oss att skapa helt nya guider, samt underhålla existerande guider, har förbättrats enormt (för att inte nämna alla förbättringar vi gjort på kodbasen). Vill du veta mer, eller få tekniska detaljer så skrev vi om det för någon vecka sedan.

Tack för nu. Vi får se vad som väntar i nästa version, om det blir 1.7 eller om vi hoppar direkt till 2.0. Men jag har flera önskemål, bland annat bättre översikt samt sök till bossarnas sidor.

FFU2 Theme 1.6

Ett märkligt namn – “FFU2 version 1.6” – men FFU har haft två större eror – den gamla där alla sidor såg ut som de ville och var handkodade och svåra att underhålla, bestående av mest HTML och lite ASP classic (utan databas eller admin) på en FTP-server. Och så den nya där de alla körs på WordPress, har mer modern kod (HTML5, CSS3), ny server och subdomän (“guide.”), och samma snygga design överallt. Den eran kallar jag “FFU2”. Alla våra guider flyttas sakta men säkert över till detta system.

Den design vi har nu på FFU2 har redan över 7 år på nacken, men den lever och utvecklas lite hela tiden så det känns inte gammalt (över 500 ändringar har gjorts över åren). Just nu är vi på version 1.5.1, det stora nya som kom med 1.5 var att väldigt mycket kod skrevs smartare och effektivare, så våra sidor laddas fortare, något som bidragit till toppbetyg hos många tjänster online som mäter hastighet.

Nu jobbar jag på 1.6. Där tar vi tag i ett gäng gamla irritationer, utdaterad kod, repetativ kod, osmart kod, och förenklar mycket för oss själva. Samtidigt utförs flera önskningar vi haft en längre tid, speciellt ett större lyft på guiderna och bossarna.

Några highlights på det vi jobbar med:

Design och funktioner

  • Småjusteringar på designen, bland annat “transitions” och “gradients”:
  • Ny större boss-snippet (visar det viktigaste om varje boss) till guiderna, i härlig orange färg:
  • Förbättrad guidenavigator (med helt ny och tydlig “nästa”-knapp):

  • Ny “syskon-navigering” (baserad på guide-navigatorn), lagt in på alla karaktärer och bossar:
  • Ny startsida/översikt till våra guider, en “ruta” per del/kapitel, med information om innehållet:
  • “Sticky” meny för varje guide (sajt) som följer med när du scrollar på mindre skärmar:
  • Fixat “med i striden”-funktionen på bossar (hade inte funkat på länge):

Övrigt

  • Generellt bättre på mindre skärmar (allt blir inte klumpigt stort redan vid 960 pixlars bredd).
  • Uppdaterat Lightcase (för bildgallerier) från version 1.6 till 2.5 (nu med swipe-stöd på mobil).
  • Helt omskriven kod för menyn (löser flera problem vi haft).
  • Omarbetad och förbättrad JavaScript.
  • Förbättrad CSS och struktur.
  • Massa annat smått.

Du kan följa utvecklingen direkt i källkoden på Bitbucket om du vill, vi utvecklar i en egen branch (gren). Namnet “MENU2” är historiskt, jag skulle bara skriva om logiken bakom menyn för att fixa tre gamla långlivade buggar som irriterat mig … men skulle bara fixa lite till i samma släng.

Version 1.6 är precis runt hörnet och vi räknar med att bli färdiga med de sista 5-6 små förbättringarna i loppet av en vecka. När allt är på plats så släpps det över hela FFU omedelbart tack vare vårt smidiga uppsätt med git som jag skrivit om tidigare.

En ny sak som är värd att nämna, även om den inte syns, är att jag för första gången på länge har en ordentlig lokal testmiljö, något som snabbar upp utveckling och testing oerhört. Detta tack vare Local By Flywheel, ett enkelt och användarvänligt program för alla som jobbar med WordPress och behöver sätta upp lokala miljöer.

Ny framsida på FFU

För snart ett år sedan fick FFU en helt ny och uppdaterad guideväljare. Alltså sidan där du får en fin översikt över alla spel vi skriver om så att du lätt kan ta dig vidare.

Vår guideväljare

Flytten av denna sida var en del i ett väldigt omfattande projekt att flytta ut allt vi har på vår “root”-sajt (allt som ligger på www men inte är communityn eller en guide, oftast slutar URLen på “.aspx”). Allt där ska flyttas, och guideväljaren var en viktig del. Nu har vi över tid också flyttat ut många andra bitar: alla infosidor och vanliga frågor blev till “om oss”-sajten, och alla nyheter ligger nu på en egen ny sajt.

Vår gamla startsida.

Sist är då själva startsidan. Vi började med att ta bort alla nyheter och endast behålla länkar och vår Twitter feed. Men planen var att helt ändra denna sida. Och det har vi nu fått gjort.

Vår nya startsida!

Baserat på designen till guideväljaren har vi nu en helt ny startsida till FFU. Den ger dig en extremt enkel och kort välkomst, och ger dig sen fem olika vägar att gå: guider, nyheter, community, blogg, eller om oss. Allt med stora tydliga knappar, starka färger, stor text, och snygga bilder. Självklart funkar sidan perfekt på alla skärmar, även mobil.

Vi har också medvetet tagit bort navigatorn vi har överst på alla sidor – TopNav – på nya startsidan, detta för att minimera antal val en ny besökare får och antal länkar de måste ta ställning till.

Med denna flytt så återstår bara några få små delar av “root”-sajten att få flyttat. Då har vi inte längre någon ASP.NET kvar på FFU, ett stort steg i vår gigantiska migrering. Redan är 1000 sidor av guider migrerade, 1500 nyheter, och en mängd annat. Målet är på sikt att vi endast har kvar communityn på vår Windows-server och ASP classic.

Ta en titt!

Gigant-guiden för FF8 migrerad

FF8-sajten, vår största sajt att flytta sedan FF7 för nu 5 år sen. Den kom ut i feburari i år efter många månaders jobb av och på (glömde skriva denna post då …). Tror det var en period på tre-fyra månader vi jobbade på den. Originalet innehöll ett hundratal sidor med sin stora guide och många undersidor, detta förändrades till migreringen där massa förbättringar och förenklingar gjordes. Vi har nu exakt 160 sidor guide på nya FF8-sajten!

Header-bilden till sidorna fick våra fans på Facebook välja.

Flera sidor har slagits ihop, till exempel har alla vapensidor slagits ihop till en sida per karaktärs alla vapen, medan alla sidor för guiden har behållits. Allt har optimaliserats för bättre flyt för dig som läser guiden och prövar hitta fram. Vi blev också av med alla irriterande popups, och tog bort dåliga sidor, så som de med Gameshark-koder (som inte funkade).

Till detta jobb använde vi oss som vanligt av M2WP (Migrate 2 WordPress) för att läsa av alla våra gamla sidor, tvätta kod och text, strukturera om saker, och så skjuta in det i WordPress. M2WP låter oss göra stora delar av jobben med några knapptryck. Under processen noterades flera önskningar för att vi framöver ska kunna flytta våra sista stora sajter – FF10 och FF9-sajterna – utan så mycket manuellt arbete.

Borta är all gammal dålig kod, som var dålig för sökmotorer och för mobiler. Varje liten detalj har vi sett på. Gamla krångliga tabeller har förenklats eller tagits bort helt, sidor har strukturerats om med tydliga rubriker och undersidor.

För att färdigställa sidorna denna gång (innan stöd läggs in i M2WP) så gjordes stora jobb i kodredigeraren Atom på att köra regex-koder för att snabbt kunna finna mönster i den gamla koden och direkt möblera om den totalt.

Den migrerade sajten står nu för över 50% av trafiken på nya guide-servern!

Alla gamla sidor för FF8-sajten är nu borta och trafik leds till sina nya sidor automatiskt av vår dirigeringskod. Denna kod är nu dessutom extremt mycket smartare så att jag bara kan radera de gamla sidorna och så förstår den nya koden vad du var ute efter för sida och skickar dig rätt direkt. Nu för vi också statistik på hur många som “går fel”, alltså fortfarande går in på de gamla URLerna.

Nästa steg blir flera nya viktiga funktioner i M2WP så som att göra titel smartare på nya sidor (blev färdigställt för någon vecka sedan), snabbt kunna ändra block med kod via regex, samt en god del andra mindre saker. Då kan de 5 återstående sajterna flyttas lättare, men speciellt FF9 och FF10-sajterna behöver dessa förbättringar. Flytten av dem ska inte behöva ta flera månader och massa manuellt jobb.

Säker anslutning och TopNav5 beta

Säkerhet med https

Vi har nu aktiverat säker anslutning på alla våra guider, och vår nyhetssajt. Guider på den gamla servern omfattas ej av detta.

Du känner igen säker anslutning genom att adressen till hemsidan börjar på “https” och inte bara “http”. Detta säkerställer data du får av – och skickar till – oss.

TopNav5 öppen beta

I tillägg har vi också aktiverat TopNav5 på dessa sidor. “TopNav” är den översta raden med navigering som ligger på alla våra sidor, där du kan fort ta dig mellan våra spelguider och andra sajer. Den har varit under utveckling länge men tog en paus för migreringen av FF8-sajten (som visade sig vara ett oerhört omfattande jobb). Vi börjar nu med en blygsam beta-test där vi testar hur den funkar medan vi jobbar på de sista detaljerna.

Vi har några kända småproblem med nya TopNav5, och de ska vi fokusera på framöver. Vi har också några saker som ännu inte är på plats som vi kommer rulla ut med tiden, så som visning av aktuella uppdateringar och nyheter.

Självklart funkar nya TopNav5 ypperligt på din padda, mobil, laptop, eller stationära dator. Designen är så klart ett väldigt lyft och en modernisering av denna centrala navigation för hela FFU.

På sikt ska denna också rullas ut på andra sidor, så som communityn. Men det återstår många tekniska utmaningar innan det blir löst.

FFU-navigator version 5

Överst på alla våra sidor och guider ligger ett över 10 år gammalt design-element. Vår sajtnavigator. Via den kan man se om man är inloggad på communityn, man kan logga in, man kan ta sig till våra olika delar av FFU (om oss, bloggen, med mera), och man kan framförallt se en översikt på alla våra spelguider och snabbt öppna en av dem. Detta är den tredje versionen av denna navigator.

FFU-navigatorn version 3 (nuvarande per 2017)

Version 4

För ett par år sedan började jag smått designa om den (äntligen) – version 4. Dessvärre var jag tvungen att pausa det jobbet lite. Såhär såg den ut då jag la projektet på hyllan.

FFU-navigatorn version 4 (aldrig lanserad)

Och bra det pausades. För med tiden föddes en helt ny design, löst baserad på det jag kom fram till först, men extremt mycket renare och enklare – väsentligt mycket bättre. Som ni ser är version 4 ganska rörig, full av små små detaljer.

Version 5

FFU-navigatorn version 5 – utkast

Såhär ser den ut just nu, i tidigt designstadium. Version 5. Berikad med fullt stöd för mobila enheter, för listning av alla våra guider (även de som inte får plats i menyn, de visas omedelbart då man lägger muspekaren över “Fler spelguider”), och små fina animationer. Ny är också vår logo med Mog, den använder vi redan på Facebook, Twitter, och på många andra platser.

Ute är formuläret för att direkt logga in på communityn, och borta är också sista nyheter (eftersom vi inte postar så brutalt ofta). Tanken är att introducera någon form för hint likt Trello gör det för att påkalla uppmärksamheten till något nytt som hänt, men det kommer efter lansering.

Tidigare versioner har jag alltid designat i Photoshop, men denna gång “designade” jag dem från grunden direkt med CSS och HTML i Firefox Developer Edition. Detta har gjort att jag omedelbart får något testbart, som lätt kan ändras på, och ingen tid läggs i Photoshop. “Code first”!

Förhoppningsvis blir vår nya FFU-navigator färdig och lanseras i starten av 2018. Men först ska den kännas perfekt på liten som stor skärm (över 50% av våra besökare använder mobil).

Copyright © 2024 Om FFUniverse

Theme by Anders NorenUp ↑