Vi jobbar på eget WordPress-plugin

En stor styrka med WordPress är deras många plugin. Man kan enkelt installera en massa färdig funktionalitet på sin sajt istället för att slippa bygga allt själv. Detta är smart och något som hjälpt FFU mycket. Funktioner som jag tidigare lagt massor av timmar på för att bygga installeras med ett klick.

Men de har inte allt, och mycket de har är dessutom dåligt, eller inte exakt som just du vill ha det. Så därför kan man också bygga egna plugins.

FFU har redan ett eget WordPress theme (all design). I det ligger också massa funktionalitet som hör mer generellt till FFU och inte till just detta theme. Denna funktionalitet flyttar jag nu över till ett eget plugin som vi utvecklar på Bitbucket privat. Fördelen med denna separering är att vi nu kan jobba med flera olika themes (som denna sida) men ändå dela alla FFU funktioner via detta plugin.

Just nu är vårt plugin inte ens i alpha-version. Jag har efter många timmar och mycket frustration lyckats få upp grunden. Det var inte helt lätt, och php bjuder på en del rörig kod ibland. Men nuvarande version av pluginet klarar att lägga in FFUs Topnav med allt av html, CSS och Javascript som behövs. Detta öppnar så klart för att kunna introducera Topnav enkelt även på denna sida. Det enda som behövs är en ny så kallad “hook” som Topnav kan fästs sig till. Den lägger man enkelt in i sitt theme. Mer än så är det inte. Enorm skillnad från förut!

Vidare ska detta plugin få kod för att krysspublicera till uppdateringsdatabasen (rätt komplex kod som nu ligger i våra themes), kod för att lägga in Playstation-knappikoner i text (också komplex theme-kod idag), och en massa annat intressant på baksidan.

Som du säkert räknat ut kommer detta plugin fortsätta vara privat och inte delas. Det ger ingen mening utanför FFUs värld.

Kommer hålla er uppdaterade om hur det går, och eventuellt dela lite tips eller kod.

Nytt lanseringsflyt med Git

I alla år har jag jobbat med webbsidor på det mest grundläggande sättet när det kommer till att få ändringar ut “live”. Jag har öppnat ett FTP-program, oftast Filezilla, och så laddat upp filerna på servern. En efter en. Detta funkar ganska bra när man jobbar med en hemsida från bara en dator, och bara en person. Så fort nån av dessa parametrar ökar så kommer problemen. Man börjar skriva över varandras ändringar, eller sina egna.

För cirka ett halvår sedan moderniserade jag sättet jag får ut ändringar på genom att introducera Git på servern. Git är ett versionskontrollsystem, den har koll på ändringar i alla filer och sparar historik på allt. Det som är extra fint är att man oftast också har någonstans online där filerna lagras i tillägg mot lokala hårddisken. När man så slår upp en ny dator så säger man bara “Hämta hem de sista ändringarna från servern” och du vet att du alltid har rätt filer.

$ git pull origin master

Vi använder ett privat konto på Bitbucket för våra projekt. Men har också jobbat en god del med Github och öppna projekt (öppen källkod). Det passar dock bättre med ett privat konto för just FFU =)

En stor bonus med Git-kontrollerad uppdatering av filer – förutom det att det gör det superenkelt för mig att jobba på sajten från flera olika datorer – är hur jag får ut filer på FFU. Jag kan nu ändra massor av filer i massa olika mappar lokalt, testa det till perfektion, och så istället för att ladda upp en och en fil (där jag garanterat kommer glömma minst en viktig fil) bara går in på servern och säger “hämta alla ändringar från Bitbucket” och boom – alla ändrade filer hämtas ner i en smäll.

$ git pull origin master

Hur smidigt som helst! Jag har inte använt ett FTP-program sedan dess. Och utan detta nya sätt att jobba hade jag inte utfört de stora strukturella ändringarna jag fått gjort på Communityn i det sista (endast rensning/flyttning/namnbyten på filer). Där var det snack om över 50 ändringar i 40+ filer, det hade tagit år och dar med FTP att hantera, men nu bara ett kommande med Git.

En sjuttifemte bonus med Git är att jag nu har megakontroll på alla filer över hela sajten. Genom att bara fråga Git “Är några filer ändrade” så skannar den hela disken och svarar snabbt med “nej” eller en lista på ändrade filer. Jag har nu kontroll på om några skräpfiler eller “hacks” smyger sig in på servern (vi har haft stora problem med det tidigare).

$ git status

Det är allt. Det kommandot berättar exakt vad som ändrats och inte ändrats. Kan inte förstå hur jag överlevde med att jobba på det gamla sättet =S

Höststädning och ny 404-sida

Jag tänkte ta upp två FFU-problem som blivit löst denna höst. Mängder av skräpande filer (vissa hackade) och totalt värdelös felsida.

FFU har länge (sedan runt 2004) haft felsidor. Alltså sidor som fångar upp besökare som klickar på gamla länkar eller skriver fel adress. Dessa fick bara mer och mer trafik, mest på grund av bilder som tagits bort. Men de funkade långt ifrån 100%, var röriga att använda och programmera, koden var dålig. Dessutom loggade de överdrivet många fel – den sidan stod som FFUs populäraste sida! En enda röra helt enkelt.

Nu har detta blivit mycket bättre. Vi har utvecklat en helt ny felsida för status 404 (sidan finns inte). Lite fräschare design, bättre hjälptexter, och andra finesser.

Vad tycks?

Denna nya felsida är mycket smartare (och snyggare). Den slår inte vilt omkring sig, och alla fel registreras bättre. Detta har gett oss möjlighet att storstäda på servern. Sajter som vi förut flyttat från windows-servern till guide-servern har legat kvar med sina gamla filer. Inne i dem låg nämligen all redirect-kod. Som mest i över två år har filer legat och skräpat såhär. Vissa till och med hackade, vilket så klart gav oss massa bekymmer. Nu är de äntligen raderade. Istället hanteras redirects i serverns web.config som permanenta redirects (det smartaste sättet att hantera gamla länkar på). Web.config är en serverfil som analyserar varje besök – “Vilken sida är du på väg til? Jaha den ja, den har vi flyttat, jag skickar dig till ny adress istället.”. Och med tiden går fler och fler på rätt sida direkt istället för till de gamla. 404-sidan registrerar också de få som ännu är vilsna så att de manuellt kan hanteras.

Hundratals mappar och filer har raderats från servern i denna process. FFU har aldrig vägt så lite. Efter detta har vi sett statistiken för besök på 404-sidan i princip nå noll efter detta införst, 404-sidan är inte längre en av FFUs mest besökta sidor.

Sajterna på Windows-servern vi kunnat helt radera är: 1, 2, 4, 5, 11, 12, 13, Kingdom Hearts, Chrono Trigger, Crystal Chronicles, och Tactics Advance. Dessa finns nu bara på guide-servern i WordPress. Ljusår lättare att administrera.

Som bonus betyder också färre filer på disk att vi har mindre att hålla kontroll på, och generella fel är lättare att identifiera.

TopNav 4, oktober-edition

För cirka en månad sedan ändrade jag sist på TopNav. Och några nya idéer har dykt upp. Men också har flera saker fått smälta in lite mer och jag har kunnat fatta beslut som inte kändes rätt precis då jag satt med designen.

2015-10-04

Den nya logon jag testade har tagits bort, återgick till den förra, men gjorde den större. Den kändes mindre stökig, och lite gladare, mindre stel. På nåt sätt.

Dessutom så har Fat Chocobo fått komma in i värmen. Jag hade tänkt att han ska ligga bakom alla nyheter och uppdateringar (man ska kunna “kryssa ner” de man läst för att få upp nästa, upp till 3-5 stycken) och visas först då allt nytt har lästs. Men varför inte ta fram honom och alltid visa honom där uppe? Tycker han passar fint in. Rutan i sig är också lite större, inverterad gradient, och tydligare uppdelad text.

Community-rutan har fått en liten detalj ändrad. Eller två faktiskt. Knappen har gått från svag 3D-effekt till mer modern platt gradient, men i samma skarpa blå färg som förut. Rubriken gick från “Community” till “FF Community” och centrerades i fetstil ovanför knappen.

Sajtlänkarna (“Mer på FFU” och “Nyheter”) har fått permanent bakgrundsfärg för att de ska synas bättre, man missar dem så lätt annars.

“Fler Spelguider”-menyn har designats om till att likna mer på “Mer på FFU”-menyn. Ingen pratbubble-pil i toppen, bara en ren rundad ruta, med lista på sajter. I toppen en rubrik som beskriver menyn, med ett skarpt blått streck under. För att dela upp sajter i sektioner så används ett smalare ljusgrått streck än tidigare.

Här är också ett exempel på de fyra olika faser Community-menyn ska kunna vara i. Menyn kan vara minimerad eller expanderad. I designexemplet ovan är den minimerad, och användaren är inte inloggad. I följande exempel, från vänster till höger, har menyn klickats på (expanderats) så att man kan logga in. Sen är menyn minimerad men man är inloggad, och på sista exemplet är man inloggad och menyn är expanderad och visar några extra länkar. Knappar och länkar i dessa exempel är inte helt färdiga än.

2015-10-04_stages

Jag gillar kontrasterna med de mörka bakgrunderna med ljus text, och de nya skarpa färgerna av blått och orange för att kalla på uppmärksamhet (länkar, knappar), blandat med väldigt ljusa bakgrunder med svart text på.

Ny mall: FAQ dragspelsmeny

Vår gamla FAQ/Support-sajt är tänkt att med tiden flytta mer in på varje enskild guide-sajt. Detta så att man inte ska tvinga besökarna ut från guiden för att få svar på vanliga frågor. Dessutom är det bättre för sökmotoroptimalisering att man har denna info direkt på varje guide. FAQ-delen kommer dock leva kvar, möjligen i förändrad form, för att samla alla vanliga frågor för flera spel (och sajten) utan att besökaren behöver gå via guiderna. Två vägar till samma mål alltså.

Just nu är det bara vår FF7-guide som har en sådan FAQ-sida direkt på sajten. Vi håller fortfarande på och testar ut systemet för att se om det ska bli en permanent lösning för alla sajter. Och småjusteringar behövs hela tiden. Men de andra sajterna ska uppgraderas till detta nya system när vi är redo.

Men som det såg ut och funkade på FF7-sajten var extremt enkelt. Jag skapade bara en helt vanlig textsida som hette “Vanliga Frågor” och la sen in varje fråga som en undersida. Frågan var titeln, och brödtexten var svaret. En PHP-funktion listade så länkar på huvudsidan ner till alla undersidor.

Problemet med detta är två. Dels kom det extremt långa titlar på sidor in i menyn till vänster, som förstörde eller såg riktigt dåligt ut. Och dels så var det lite mer jobb eftersom man behövde första skapa den nya frågan med svaret och efter det sortera in den rätt i menyn.

Så det jag gjorde var att programmera en ny WordPress-mall i PHP med stöd av lite JavaScript. I WordPress så tog jag bort alla undersidor och flyttade istället in dem på huvudsidan, “Vanliga Frågor”, och la varje titel som en “h2”-rubrik. Min nya mall-kod analyserade denne text och gör en navigationsmeny av alla h2:or på sidan. Man kan lätt identifiera dem som dragspelsmenyer på grund av pilarna som visas i menyn före länktexten. Klickar man på en av dessa frågor så hämtas texten (svaret) automagiskt upp av JavaScript och visas direkt under, man scrollas också ned till rätt ställe på sidan på ett mjukt och smidigt sätt.

Testa gärna vår nya Vanliga Frågor-mall och säg vad ni tycker. Fler sajter följer efter en liten testrunda med mindre justeringar på koden

TopNav, uppdatering 10 september

Ytterligare en runda med TopNav. Just nu småskruvar jag mest på detaljer sedan sist.

Gick in i Community-menyerna och jobbade mer med dem. Gjorde knapparna för att logga in skarpare blå, så att de syns ännu bättre (och piggar upp sajten med mer färger). Och så gjorde jag så att all text blir grå och länkar orange med ett ljusare streck under. Jag testar nu två varianter av fält att skriva i, ett vitt med inre skugga och ett som bara är ljusgrått utan effekter. Tror jag gillar det sistnämnda bäst. Också nytt är den lite mörkare bakgrundsfärgen på slutet som ramar in sekundär info, här länk till att bli medlem om man inte är det.

comlist

Det är också ändrat så att skuggan blir mer enhetlig. Istället för en tonande skugga så är där nu en fem pixlar tjock skugga. En genomskinlig ram helt enkelt. Det används på andra elementer i TopNav i samma “styrka” så det matchar in lite bättre. Även om det just här ser lite grötigt ut, men ska jobba på det.

Testar också en variant av logon som skriver ut hela sajtens namn, och Final Fantasy för att betona det. Jag gillar tanken bakom detta, att fokusera hårdare på Final Fantasy. Men det ser lite rörigt ut med de romerska siffrorna nedanför som nästan smälter ihop med logon. Detta upplevde jag inte på den förra som var mindre och använde färger på ett annat sätt.

Även newstickern är lite ändrad. Den har fått en svag toning jag testar, får se om den får överleva. Och så har det lagts till en “Se fler xxx” i botten så att man kan komma vidare och få en bättre översikt om man önskar av uppdateringar, nyheter, eller vad det nu skrivs ut här uppe. Tanken är att klickar man på krysset ovanför så faller rutan ner och en ny glider in ovanifrån med näst sista händelsen. Detta fortsätter upp till 3-5 olika saker och efter det försvinner rutan helt, men något bör läggas under … kanske Fat Chocobo?

Så sist en skiss med nya “Mer på FFU”-menyn utvecklad. Den påminner en del om “Fler spelguider”-menyn, medvetet. Men utan pilen och en smalare horisontell linje. Denna ska lägga sig direkt över länken “Mer på FFU” när man klickar/svävar och bara kort och gott lista alla hörn och kanter på FFU.

sitelistUtöver det, inga fler ändringar än en liten skugga ned från TopNav på header-bilder på alla sajter. Och till vänster testar jag eventuellt ny bakgrund bakom headers (även om det inte tillhör TopNav-projektet) med grå bakgrund. Tänker mig att kanske använda samma stil i kommande omdesign av footern på FFU (som ska bli lite enklare än den är nu).

TopNav4 – tidig september-version

Såhär såg “TopNav4” ut för lite över en vecka sen:
topnav-skiss-(2015-08-25)Nu har jag gått en runda till på den. En av de största skillnaderna är kanske att den nu fått bli ännu lite högre. Det överst partiet (det med blå bakgrund) har växt från 90 pixlars höjd till 120 pixlar. Det kändes bara för trångt där uppe, och jag behövde mer utrymme oavsett.

Detta är så den ser ut just nu:

topnav-skiss-(2015-09-04)Fokus är att få menyn med alla FF-spel så ren som möjligt. Nu är det bara spel från originalserien där. Sedan en liten skiljelinje och så spinoffs, just nu bara FFX-2. Efter det en “Fler spelguider”-meny som listar alla andra guider vi har (det är väldigt många).

Sociala länkarmenyn fick flytta upp igen, men nu lite ändrad. Den är nu mer ren, ingen text, bara ikoner, och mer luft. Samtidigt la jag in kära Cactuar där. Det är dels än fin färgklick, en känd FF-symbol, och något som drar ögonen tills sig. Den får nya besökare att lättare upptäcka Communityn, de sociala länkarna, och “Fler spelguider”-menyn.

Med allt detta extra utrymme kunde jag ge mer luft runt logon, sajtlänkarna, nyhetsboxen, och under communityn (men där klämde jag nu in social-menyn). Sajtlänkarna har också ändrats lite. Det står nu bara “Nyheter”, kort och gott. Och under “Mer på FFU” med en pil. Detta är inte designat än men jag tänker mig en liten drop down där jag kan lista länkar till FAQ, extra länk till Communityns startsida, Sök, Blogg, och liknande. Det är en del som kan behöva få plats där uppe men som bara grötar till det om det ska skrivas ut, så det får lämpas in i en utfällbar meny helt enkelt.

Bytte också “sajtbakgrund” under TopNav för att testa med en ljus sajt istället och se hur det passar. Tycker det funkar riktigt bra. Här är ett exempel med “Fler spelguider”-menyn utfälld (den har jag också jobbat en del på):

topnav-skiss-(2015-09-04)2

Sista ändringar på TopNav4

Nu har jag sovit på saken flera nätter och sen återkommit till designutkastet jag gjorde till en framtida ny TopNav. Och flera saker har fått ändrats. Det gav ett lite för grötigt intryck och det känns inte bra.

För att friska upp era minnen så såg det ut såhär förra veckan:

topnav-skiss-(2015-08-19)

Flera detaljer i denna skiss är så klart bara test, så det är svårt att komma undan denna gröt. Men en del kan göras, och har nu gjorts. Detta är det senaste utkastet, en med “Fler spelguider”-menyn utvecklad och en utan.

topnav-skiss-(2015-08-25)---expanded topnav-skiss-(2015-08-25)

Den grå bakgrunden runt bilden på Noctis (och hela bilden med Noctis) är bara platshållare för mig för att jag ska se hur brett jag designar i förhållande till hur bred sajten är idag. Likaså de pixelmått jag lagt nere i högra hörnet.

Den största sak jag tagit tag i nu är “menyn” med sociala media-knappar/länkar. Den gjorde allt grötigt där under Community-menyn (som expanderar vid klick och visar login-formuläret). Den ligger nu till höger på sidan av menyn med alla spelguider. Inte helt perfekt, men i vartfall bättre. Föredrar att kunna ha en beskrivande text till alla ikoner, men det får inte plats nu, men vi får se om jag kommer på nån ny bätte lösning.

Dessutom böt jag plats på länkarna till andra avdelningar på FFU (startsidan med spelnyheter, samt vår FAQ med supportfunktion) och den så kallade “News tickern”. Det känns bättre att ha sajtlänkarna närmare logon, samtidigt får nyhets-tickern en väldigt central placering, och det känns som det funkar mycket bättre än jag trodde först.

Annars så har dessa saker ändrats:

  • Sub-titel till FFU är nu skrivet i vitt.
  • Länkarna till “Community” och “Guider” är borttagna, möjligt de ska visas till höger om de andra sajtlänkarna när man har väldigt stor skärm.
  • Nyhetstickern visar en uppdatering från en av guide-sajterna.
  • Ljusare skugga (och svart istället för blå) på “Fler spelguider”-dropdownen, dessutom är den mindre 3D och skuggig.
  • I Community-boxen så är all text nu grå och länkar orange, gillade hur det funkade med den mörkgrå bakgrunden.
  • Community-boxen är nu lite mörkare, och den övre färgade ramen lite ljusare.
  • Mer luft generellt i Community-boxen (som också blivit större).
  • Vertikal skiljelinje mellan alla FF-spel och de andra länkarna.
  • FFXVI borttaget från spelmenyn, det var ändå bara en test. När det spelet blir aktuellt så får “Bravely Default” och “Chrono Trigger” (allt som inte tillhör grundserien i FF-serien) stryka på foten. Hoppas bygga automatik på detta.

Ny TopNav lämnar skiss-stadiet

Jag skissar alltid med vanlig blyerts, eller bläckpenna, på helt vanligt papper när jag håller på med webbdesign. Idéer föds på sömnlösa nätter, oftast. De kladdas sen ner på papper, i en oerhörd mängd olika varianter. Där testar jag vad som känns som att det funkar.

Efter mycket skissande över lång tid går jag till Photoshop och börjar sätta upp det hela. Ibland skippas detta steg om det går att designa allt direkt med HTML och CSS istället. I Photoshop så får jag fram saker från skisserna som kanske bara varit med dem som små handskrivna kommentarer – detaljer, färger, med mera. Här märker jag hur saker får plats, luft, och liknande.

Även i Photoshop så går jag över min “skiss”/design flera gånger och gör om saker. Det gäller att inte vara rädd att bara kasta något man inte är helt nöjd med. Bättre det och börja om än att fastna i ett spår som bara är halvbra.

Vår TopNav, navigationsmenyn i topp på alla FFUs sidor med alla FF-spelen, får sig nu en runda. Det blir i så fall den fjärde i ordningen. Här är tre skärmdumpar från designprocessen än så länge. Det återstår så klart flera rundor till. Se hur designen ändras dag för dag.

Det ligger extremt många tankar bakom rätt många av detaljerna i designen. Kanske förklarar mer i en kommande bloggpost. Om inte annat då det börjar närma sig lansering (lång lång väg kvar än, räkna med upp emot ett år).

För 3 dagar sen:

Första rundan i Photoshop. Ett snabbt och litet rörigt upplägg på vad jag hade tänkt få plats med (märkte fort att det blev trångt). Här testar jag också en hel del idéer och känner in om de funkar eller ej. Många såna “försök” tas bort under designprocessen.

topnav-skiss-(2015-08-16)

För 1 dag sen:

Testar en meny för sociala media och har jobbat lite mer på en förbättrad Community-meny (mer lik mina pappersskisser). Fortfarande inte nöjd. Flera saker känns lite fel.

topnav-skiss-(2015-08-18)

Idag:

Gjort en pixlad backgrundsbild, som varit tanken ända sen skisserna. Förbättrat och jobbat mer på Community-menyn (alla delar av den: inloggad och utloggad). Dessutom gjort menyn med sociala länkar mindre synlig, men fortfarande inte nöjd med den. Ändra också “nyhets-tickern” mer röd-gul än grön-gul. Pilen ned på vald sajt är mindre spetsig. Och jag började snabbskissa på en dropdown-meny för alla spel som inte får plats i den horisontella menyn … inte direkt nöjd med den heller. Så det blir nog flera ändringar i nästa rundan.

topnav-skiss-(2015-08-19)

Uppdatering i TopNav – FFXV-sajt lanserad

Högst upp på alla sidor har vi vår guide-navigator, tekniskt döpt till “TopNav”. Alla sidor har den och vi den tar man sig snabbt runt mellan våra guider, till våra nyheter, eller loggar in på Communityn.

bg_gamelist

Idag gjordes en av de största omorganiseringarna på den sedan starten. Tidigare i år la vi till “XIV” men som man inte kan klicka på eftersom vi inte har någon sajt för FF14 … än. Och gamle goda “III” blev äntligen klickbart då vi för första gången fick upp en sajt om spelet.

Denna gång la vi till en ny sajt också. Final Fantasy XV som är ett väldigt hett ämne just nu över hela spelvärlden. För att få plats med ett helt nytt spel där uppe så måste vi ta bort något av de gamla länkarna. Därför valde jag att ta bort länken till FFCC (Crystal Chronicles). När den var borta så tänkte jag att det mer aktuella spelet Bravely Default borde få plats där uppe också, så jag böt in den mot länken till Advent Children-sajten.

bg_gamelist_2

I en framtid så kommer vi att designa om hela denna del. Den är lite jobbig att underhålla och krånglig att ändra på. Det går mycket lättare nu än för några år sedan då jag utfört flera större underhållsjobb bakom kulisserna. Men det är inte att undvika att detta är ett element på sajten som har lite för många år på nacken.