+ fler guider ×
Bli medlem
Inloggad som ...
Inloggningstid: ??

MonthOctober 2014

Migrate-2-WP fixar flytt av FF4-sajten

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

fokus_ff7

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.

  1. Finnfram måttet på bilden på FFU
  2. Skapa en tom fil i Photoshop med detta mått
  3. Lägg ett vitt bakgrundslager
  4. 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.

fokus_bravely-default

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

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!

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.