Page 4 of 6

Två nya superbra funktioner

2015-07-09 / Bobby

I vårt WordPress-Theme (version 1.5) av FFU så har vi ett flertal olika mallar att välja på för våra sidor. Alla med lite olika funktionalitet.

Jag har nu programmerat två helt nya mallar, bägge med en varsin funktion som jag tror avsevärt kommer underlätta det för besökarens jakt på information. Än så länge är det bara vår FF7-guide som aktiverat dessa nya mallar, men möjligheten finns att använda dem på alla våra spelguider som körs i WordPress.

Automagisk innehålls-meny

Den första är ganska enkel i sin funktionalitet, men var oerhört tidskrävande att göra manuellt. För att inte tala om oerhört lätt att göra fel!

De sidor med denna funktion aktiverad får en meny genererad automatiskt av koden. Den ser till att markera upp alla rubriker på sidan med ett litet “ankare” och sedan skapa en meny precis innan den allra första sidorubriken. Denna meny innehåller så namnen på alla rubriker på sidan, t.ex. “Clouds Omnislash”. Klickar man på den så scrollar man smidigt ner till just denna text.

minimenu

Det har aldrig varit enklare att hitta till rätt innehåll på FFU än nu!

Automagiskt innehålls-filter

När du står inne på en av sidorna med massa text på så blir det fort svårt att hitta till rätt information. Tänk dig alla Materia-sidorna. Hur ska du hitta den materia du är ute efter? Jo, du scrollar sakta ner för sidan och läser igenom alla rubriker. Men oftast vet du ju exakt vad du söker. Ja, de smarta har listat ut att alla webbläsare har en inbyggd sökfunktion som de använder. Men den träffar ju på precis all text på sidan.

Så vi byggde en egen filter/sökfunktion! Denna kunde man omöjligt ha lagt upp själv som skribent.

Överst på sidan kommer en sökruta upp. Bara skriv så filtrerar vi bort allt som inte matchar i realtid. Skriver du in “Plu” så visas bara materior som innehåller “plu” någonstans i titeln.

before-filter

Precis under sökrutan finns också en smidig meny med snabblänkar och också den filtreras samtidigt som du söker. Så du ser alltid vad det är du får träff på, och du kan enkelt bara klicka på något för att hoppa vidare.

after-filter

Glöm dock inte att klicka på “Rensa filtret” för att visa alla materior som dolts efter ett sök.

Bägge dessa funktioner är i testfasen, och det återstår lite jobb med dem på mobil-versionen av sajten. Men testa dem gärna och kom med dina synpunkter! Filter-funktion finns bara på Independent Materia-sidan, medan den automagiska menyn finns på nästan alla sidor där den behövdes, till exempel på sidan som visar hur man får alla karaktärers bästa limit breaks.

FFUs första WordPress-theme borta

2015-07-06 / Bobby

Nu har den sista sajten flyttats bort från vårt gamla WordPress theme. Det var inte någon direkt skillnad i design, utan mer i hur det tekniskt var uppbyggt. Att flytta FF7-sajten var det största jobbet, många saker behövdes göras manuellt, t.ex. lägga in all karaktärsdata på nytt.

Men nu är det gjort och vi kan då äntligen radera ytterligare en TopNav-fil som vi har allt för många av.

Säg till om du skulle hitta något som ser konstigt ut på FF7-sajten efter flytten. Väldigt mycket var som sagt tvunget att ändras manuellt, och med 160+ sidor så är det lätt att missa nåt.

Nästa steg är att fysiskt radera detta Theme från servern. Måste bara uppdatera lite sökvägar till bilder som fortfarande används.

Gilgamesh nergång

2015-06-22 / Bobby

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

Shoppens nergång

2015-05-15 / Bobby

När jag postade om vår lilla helt osynliga uppdatering av TopNav för några månader sedan så gick kanske en liten liten detalj förbi alla. Se på bilderna här igen:

Ser du nåt som skiljer de två åt (den nedersta bilden är den gamla TopNav)?

De vita länkarna mot botten av menyn är våra sajter/delar av FFU som inte hör till något av spelen. Alltså Nyhetssajten, Communityn, och Support finns där. Och här ligger ändringen. Den tredje länken gick från att heta “FF-shop” till att bli “Final Fantasy”. Man klickar på den för att få en lista på alla Final Fantasy-spel vi har guider om. Där visas de alla med logo för enkel översikt.

Men vart tog vår shop vägen? Utan buller och brak så har den faktiskt lagts ner. Det var en rätt död del av FFU som hade stora visioner i starten men som aldrig fick någon uppmärksamhet från oss trots att besökare önskade liv i den. Då den fortsatte ligga inaktiv i många år, och inga planer finns på att återuppliva den, så valde jag att helt enkelt bara ta bort den helt. Klippa bort den döda kvisten från trädet.

Dessutom har FFU mer aktivt nu börjat ta bort alla annonser på sajten. De tar plats och stör samtidigt som de ger nästan ingenting alls ekonomiskt. Så då kan vi lika gärna ta bort dem och samtidigt förbättra upplevelsen för besökarna. Och detta med annonserna var tidigare en stor del av shoppen, man kunde handla på t.ex. CDON och få poäng i communityn för detta.

Du kan fortfarande komma till shoppen om du hittar en gammal länk, eller om du minns adressen. Men även denna möjlighet kommer att tas bort då alla filer kommer att raderas i en snar framtid.

Nya Migrate 2 WordPress

2015-04-21 / Bobby

Jag har skrivit om Migrate 2 WP tidigare. Det är ett egetutvecklat verktyg som assisterar mig väldigt mycket då jag ska få uppgraderat alla gamla FFU-sajter. Det läser av alla gamla sajterna, följer alla länkar, sparar ner allt innehåll i en databas, och sen genom fler olika steg tvättar denna html-kod/innehåll på flera sätt, för att i slutet skjuta in all data i WordPress.

Koden jag jobbade på nådde nästan version 1, men lades ner på 0.9.9. Då hade jag cirka 5 buggar kvar. Men det jag upptäckte var att mycket med grundstrukturen i projektet inte var så bra, och jag kom på väldigt många ändringar som inte var så lätta utan att behöva förstöra stora delar av grundstrukturen och bygga om.

Därför gjorde jag en kopia på koden och påbörjade ett nytt projekt. Migrate 2 WordPress 2.0 BETA.

Den största skillnaden är att jag nu helt tagit bort de sista delarna som sköt in data direkt i WordPress, det blev helt enkelt för många problem, buggar, och annat med det tankesättet. Nu har jag istället lagt på två helt nya steg. Ett för att administrera sidstrukturen en sista gång, där man nu kan ändra HTML-koden direkt, eller skapa nya sidor till och med. För att så i sista steget generera en XML-fil som är byggd upp i WordPress egna export/import-format. Denna fil kan du lätt ladda upp i WordPress och på direkten få den sidstruktur och det innehåll du redan definierat i Migrate 2 WordPress-systemet (M2WP).

Med några bra plugins sen i WordPress så ska man med M2WP kunna på bara någon timma få upp en sajt från statiska filer till WordPress! Detta jämförs med många timmars manuellt arbete, speciellt vid större sajter.

Det nya Steg 7 heter “Structure”, nya steg 8 heter “Finalize”. Och så på slutet ligger en knapp som bara heter “Export”. Där laddar du bara ner din färdiga fil. Detta steg jobbar jag just nu på att färdigställa en beta av.

Jag ska också jobba lite mer på generell struktur och bättre användarupplevelse. Ska pröva att slå ihop onödiga steg och upprepande kod. Möjligtvis också ta bort hela användardatabasen eftersom det är rätt lite poäng med det i ett sånthär projekt. Vi får se vad som landar i färdiga 2.0.

WordPress-sajternas “nya” TopNav

2015-03-08 / Bobby

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.

Förbättrad meny

2015-03-07 / Bobby

Theme 1.5 får nya små förbättringar kontinuerligt. En ganska stor (men osynlig) förbättring jag precis rullat ut är en helt ny meny.

Till vänster på alla sidor har vi en blå fin meny med en liten gradient på, samt vita ramar. Precis som menyerna brukar se ut i Final Fantasy-spelen. För två år sedan då detta theme designades så var stödet för att göra sådana saker (gradienter och skuggor) med CSS inte så bra. Men nu är stödet över 90% av alla webbläsare (inklusive mobil).

Så det jag har gjort är att istället för att ha fullt med extra “div”-taggar i koden, och flera olika bakgrundsbilder till menyn, så är nu koden omskriven till att enbart använda CSS till de fina menyerna. Dessutom kan nu menyerna ha fri höjd, förut var de tvungna att alltid vara minst 180 pixlar höga (pga hur allt var satt upp). Nu kan vi ha en meny med bara en enda länk utan att det är ett jättestort tomrum i botten.

Som en liten bonus så la jag också in så att denna design fick vara kvar på menyerna också på mobil. Tyckte det såg lite trevligare ut än att bara ha den där stora mörkblå bakgrunden med vita länkar på.

HTML5 + CSS3 for the win!

Fyra sajter till har nytt theme

2015-03-01 / Bobby

Då har jag på fyra av de fem återstående sajterna bytt till vårt nya Theme. På dem alla så gjorde jag en liten insats att pröva möjligen förbättra sidstrukturen. Speciellt FF4-sajtens meny förändrades för att bli lite enklare och mer överskådlig.

På Bravely Default-sajten så la jag också in alla bossar från guide-texterna till egna sidor med info om HP, svagheter, och tips.

Också FF1 och FF2-sajterna har bytt theme.

Nu är det bara FF7-sajten som inte bytt theme, men den får vänta lite eftersom den mer komplexa strukturen och de många sidorna på dem kan ta lite tid att flytta över till nya themet (eftersom menyer och sidmallar hanteras rätt annorlunda i nya themet).

FF11 och FF12-sajterna flyttade

2015-02-21 / Bobby

Då är det dags, de sista två buggarna är krossade och sajterna som jag testkört nya förbättrade WordPress-Themet till FFU är nu färdig för rampljuset. Förutom att flytta sajterna så har jag också gått igenom det mesta innehållet och justerat på det, framför allt på strukturen. Se FF11-sajten och FF12-sajten i nya designen.

Lanseringsplan av nytt theme

2015-02-18 / Bobby

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.