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.
Bravely Default är ett JRPG som gavs ut av Square Enix i december förra året till Nintendo 3DS. Jag fick tag på demot för några månader sen och blev helt förälskad. När jag så till slut skaffade mig hela spelet så var det oundvikligt: detta spel måste få en egen guide-sajt på FFU! Så jag började hamra iväg på tangentbordet och skriva ner korta små steg-för-steg guider till allt i spelet. Om ni kollar sajten nu så kan ni ta er igenom de första tre kapitlena (och det första beginner-kapitlet), samt få tag på en mängd extra jobb. Dessutom har jag fått upp info om Summons, samt hjälp till hur spelet funkar.
Kolla gärna in den nya Bravely Default-sajten medan jag håller på och bygger den. Mer kommer men det blir lite allteftersom jag spelar spelet. Jag har bara kommit så långt som jag hunnit skriva i guiden för jag skriver och spelar samtidigt. Kom gärna med synpunkter och felrättningar här!
Sent igår gjorde jag en liten justering på det vi kallar för “TopNav” på FFU. Det är den meny högst upp på alla våra sidor som länkar till alla våra spelsajter, communityn, senaste nyheten, och lite annat smått och gott.
För många herrans år sedan fanns inte TopNav, och efter första lanseringen så är vi nu uppe i en tredje design. Denna design har vi haft – med endast minimala förändringar – i långt över 5 år (jag håller inte ens räkningen). Internt har jag kallat den “TopNav3”.
För många år sedan uppdaterades länklistan med spel, Kingdom Hearts 2 (KH2) tog plats i menyn. Men den länkade direkt till Kingdom Hearts 1-sajten. Väldigt förvirrande. Någon KH2-sajt kom aldrig. Efter några år så störde detta mig bara mer och mer.
Så nu igår tog jag bort KH2-länken och la istället in en inaktiv FFXIV-länk (FF14). Alltså en länk som inte kan klickas på, men den ligger där och syns, och tar plats. Sajten finns inte, den är inte påbörjad, inte ens i min fantasi. Men ett spel i originalserien som faktiskt är släppt hör ju minst sagt hemma i vår meny med FF-spel, eller hur?
Men det är fan inte enkelt med dessa gamla system jag lämnat efter mig. År av uppdateringar, och lite för komplicerad struktur, har gjort sina avtryck. Det underlättar ingenstans att FFU är ett gigantiskt lapptäcke av olika eror av teknik, olika språk, olika kunskap, byggt som tegelstenar försiktigt staplade ovanpå varandra under nu snart 17 års tid.
FFU tuffar och går på två helt olika servrar – en Windows, en UNIX. Dessa servrar snackar tre olika programmeringsspråk – ASP classic och ASP.NET, respektive PHP. Detta är problem ett. Eftersom TopNav inte bara är en länklista utan även utför en massa saker i bakgrunden (bland annat kollar att du är inloggad på Communityn) så måste den programmeras i alla dessa tre språken! Vi har spelsajter på alla av dem nämligen.
Så, då sitter vi med 3 stycken TopNav. Men sakta i backarna, vi borde ju faktiskt ha en till, eftersom varför inte liksom. Vissa av våra spelsajter har så gammal och dålig HTML-kod, vi snackar Tables-styrd design, inte ens HTML 4.1, definitivt inte Strict, och garanterat väldigt väldigt “quirks mode” (när koden är så dålig att webbläsarna får svårt att tolka den). Ja till dessa sajter måste vi ha ytterligare en TopNav-kod.
Sen har vi alla stilmallar (CSS) till detta, det är två olika filer. Med nästan lik kod. En för de riktigt gamla sajterna och en för de nya.
Alla filer är sedan utspridda lite hursomhelst, så man får gräva runt ordentligt för att hitta allt. Jag glömde till exempel i över ett år att Nyhetssajten kör en egen TopNav, så länken till nya FF7-sajten kom aldrig på plats.
En ren mardröm är detta att uppdatera. Först ska man hitta den bakgrundsbild som innehåller de romerska siffrorna för alla spelen. Jaha, på servern ligger två exemplar av denna gif-bild, och en jpg-bild med samma namn. Vad nu då?! Jag ser i CSS-filerna att det är en av gif-bilderna som används, så jag gör ett slag för mitt framtida jags sinnesro och raderar de andra filerna.
Men nu att lägga till ett spel i menyn är inte jättelätt, jag behöver lägga in XIV som en inaktiv länk. Först tänker jag – inga problem, TopNav har redan ett X, ett I, och ett V, så jag kan klippa och klistra. Men de är aktiva, mitt XIV ska vara inaktiv. Allt ser fel ut. Så jag tänker att någonstans måste jag ju ha mitt original, en Photoshop PSD-fil som är mallen till TopNav. Jag letar och letar och letar. Och letar. Ingenstans. Filen finns inte. Så jag får improvisera. Jag gör om gif-bilden till min nya PSD-mall (och döper den noggrant till “TEMPLATE: topnav3.psd”, så som jag satte i system på absolut alla mina filer då nya guidesajterna designades).
Men jag får improvisera stilen på den inaktiva “XIV” lite, jag har ju inte kvar fonten eller något för att generera bokstäverna från grunden, och det hade behövts om jag skulle behålla exakt den stil de hade innan. Jag klipper helt enkelt ut “KH2” ur bilden, och flyttar sen hela högerdelen mer åt höger så att plats lämnas åt mitt “XIV”. Det får plats, och det blir fint. Men nu ser jag att designen på det inaktiva “III” står helt ut. Där råder den gamla designen fortfarande. Så här blir det att klippa ut även den, och sedan genom att klippa och klistra in “I” tre gånger och slå ihop dem så får jag en ny fin länk.
Nu ser allt bra ut. Nu ser allt likt ut. Nu är XIV med i menyn, och designen på de två inaktiva länkarna är likadan, och KH2 är borttaget.
Dessutom störde jag mig på att klickytan på “I” ute på FFU började liksom en bit in i I:et, 3 pixlar in närmare bestämt. Så även detta korrigerade jag, till min egen fröjd.
Men det var väldigt många filer att uppdatera och hålla koll på, och sedan testa. Så det gäller verkligen att ha tungan rätt i mun. Bara dessa små ändringar tog ett par timmar, och då har jag ändå dokumenterat ganska gott för mig själv hur man ska göra. Utan det hade jag nog återigen missat nåt.
Så, verkligen, om jag nångång i framtiden ska designa en ny TopNav, då ska jag lägga mycket krut på att inte behöva uppdatera dess kod på mer än ett ställe (två med stilmallen).
Vad är Migrate 2 WP kan man undra. Det är ett namn som dyker upp lite här och där på guide.ffuniverse.nu. Men vandra inte i okunskap. Ta några minuter av din tid så ska jag här förklara det du behöver veta (OBS! Teknisk artikel).
Först och främst så står “WP” för WordPress, världens största system för bloggar, nu senare också för vanliga hemsidor – som FFU. Enligt Wikipedia kan så körs över 60 miljoner olika hemsidor i världen på WordPress! Du besöker nästan garanterat dagligen hemsidor som visas tack vare att WordPress ligger bakom och puttrar.
WordPress har nog hundratals fördelar jämfört med att fortsätta utveckla varje sajt på FFU på det gamla sättet: manuellt i statiska filer, utan databas. Men jag ska inte gå in i detalj på WordPress i denna artikel. Utan här ska jag förklara vad då “Migrate 2 WP” är, ett system som jag skapade med hjälp av Jimmy “epaaj” då FF7-sajten skulle göras om med start i 2012.
Migrate 2 WP är ett migreringsverktyg som springer ur all kod jag var tvungen att skriva för att kunna underlätta mitt jobb att förnya FF7-sajten. Jag byggde då upp allt i flera mindre filer, varje fil kördes genom att skriva in rätt sökväg i webbläsaren. När koden på en sida var gjord så hade ett steg i migreringen utförs. Sen gick man till nästa sida. Och så vidare, tills alla steg var utförda. Men det var ingen grafik eller design på systemet, inga hjälptexter, stegen länkade inte mellan varandra, allt var manuellt och komplext, och det kraschade titt som tätt.
Så det jag gjorde var att starta upp ett nytt projekt på GitHub (en av världens största hemsidor för öppen källkod där alla kan delta). Efter det började jag så smått att bygga bryggor mellan alla stegen, göra så att man måste ta dem i en speciell ordning, samt så klart att lägga på en fin och användarvänlig design.
Just idag är systemet officiellt i version 0.8 och inte färdigt för beta ens. Men jag har gjort flera förbättringar och fler ska in. Förhoppningen är att nå en stabil version 1.0 och använda den för att få flyttat våra största och mest komplexa sajter, så som de för FF8, FF9, och FF10.
De stegen systemet utför är:
Systemet är väldigt smart på detta sätt, och även om vissa saker fortfarande kräver en utvecklares fulla uppmärksamhet, så underlättar varje litet steg enormt mycket då vi snackar om runt 100 sidor på vissa sajter. Att flytta och uppdatera alla sidorna på FF7-sajten hade till exempel tagit mig många långa och tråkigt repetativa timmar.
Först och främst loggar man in i systemet och lägger upp den eller de sajter man vill flytta. Varje sajt har några egna inställningar man kan ändra på. När man är klar väljer man en av de sajter/projekt man lagt in och kan så börja på Steg 1.
I Steg 1 så fyller man in en startsida på FFU, t.ex. “www.ffuniverse.nu/ff8/” och sedan går en robot dit och börjar leta länkar. Roboten sparar samtidigt undan absolut all kod på sidan, även det som inte är själva textinnehållet på sidan. Roboten finner sen alla länkar i koden som går innanför FF8-sajten (den går aldrig utanför den sökväg man angett) och börjar att “tvätta” dem från dubletter. Roboten går sedan till den första länken i listan och upprepar mönstret. Detta fortsätter den med tills absolut alla sidor den kunde finna har sparats in i databasen – utan en enda dublett.
Nu är det som hade tagit en person upp till någon minut per sida färdigt – i loppet av kanske 1-2 minuter för vår robot. På enbart FF7-sajten sparade vi alltså in minimum två timmar, på endast detta steg!
Det fina är också att man kan dels köra varje steg flera gånger (det gamla sparas då helt enkelt bara över), och dels kan man alltid göra en provkörning först som visar alla resultat man kommer få, men utan att något sparas. Genialt va?
När vi kommer nått Steg 2 så har vi alla sidorna i databasen. Detta hjälper oss väldigt mycket framöver då Migrate 2 WP prövar att automatisera så mycket som möjligt åt dig. Det vi nu ska göra är att definiera det jag kallar “Needles” i systemet. Det är snuttar med kod som garanterat visar vart allt innehåll på en sida startar och börjar – alltså själva guidetexterna. Vi måste ha “Needles” eftersom att i Steg 1 så sparade vi precis all HTML-kod på sidan, och där finns mycket vi inte behöver – eller ska – ha med in i WordPress sen.
Man kan till exempel skriva in “<div class=’main’>” som en “Needle” att starta på. Koden kommer då öppna alla sidor i databasen och leta efter denna kodsnutt och sedan klippa bort den och allt kod innan. När sedan samma görs för en andra, avslutande “Needle”, så har vi faktiskt klippt bort all onödig HTML-kod, alltså allt av copyright-texter, gamla menyer, gammal design, och liknande.
Den avskalade HTML-koden sparas in i ett nytt fält i databasen (så att man kan köra om stegen separat). Detta ska endast vara text som vi vill publicera i sin helhet på den nya guiden i WordPress. Om resultatet inte är perfekt kan man antingen behöva testa några andra “Needles”, eller uppdatera originalkoden på sajten som roboten läste av i Steg 1 och manuellt lägga in unika “Needles” i form av till exempel unika html-kommentarer.
När vi fått rensat bort all upprepande kod med våra Needles i förra steget så är det dags att gå ned på djupet i den text som blev kvar. Många av guiderna på FFU skrev och utvecklade jag för upp till 15 år sedan. Det är inte bara svenskan som är mindre bra på sina ställen, det värsta är all fruktansvärt dålig kod som gömt sig i alla texter. Allt från komplexa och dåliga tables, till gamla html-taggar som inte längre stöds.
Detta steg är i nuläget manuellt i det att man måste lägga in all gammal kod man vill rensa bort inne i koden till detta steg. Den finner massa gammal dålig html och byter ut den med något bättre, eller tar det bort helt. Du väljer själv.
Detta steg ska jag jobba lite på för att förenkla. Det kommer fortfarande vara lite manuellt, men man ska i vartfall slippa ändra direkt i källkoden. Möjligen får man lägga upp en egen lista på ersättningar, som sparas undan så att de kan återanvändas på andra sajter. Extra kul hade varit om koden kunde analysera all text och ge konkreta förslag på ersättningar.
Mest använder jag detta steg till att för exempel ersätta vissa img-taggar för ikoner med span-taggar med en specifik class och sedan visa ikonen via CSS. Alltså är detta steg mest för att skriva om och förbättra semantiken på html-koden. Dessutom funkar den utmärkt till att rensa bort onödig kod man använde för 15 år sen men inte behöver nu längre.
Nu är den mesta skräpkoden borttagen, men kvar har vi säkerligen en hel del gammal kod ändå. Styggelser så som “inline-style”, stilning via attribut (color=red, cellpadding=2, width=10, med flera), gamla taggar (<font>), och mycket annat spännande. Det är ganska mycket jobb att fixa upp i denna röra. Så detta steg kör ett Tidy-plugin till PHP på all kod som uppdaterar den till att hålla de standarder som satts de sista 15 åren.
Som du ser finns flera likheter med Steg 3, men det är viktigt att köra det steget först för att bara få bort det absolut värsta. För sen modifieras det mesta till oigenkänlighet rent kodmässigt (men resultatet är oförändrat).
Även detta steg kan köras valfritt antal gånger. Ser man att man inte fick ett så bra resultat så kan man gå tillbaks till Steg 3 och göra lite justeringar och köra det på nytt och sedan köra Steg 4 igen.
Efter att Tidy gått igenom all kod så lämnas det lite kod man inte önskar sig. Bland annat CSS-kod som man bör se över och eventuellt flytta vidare. I FFU:s fall så ska all stil sättas via CSS:er som redan skapats, så ingen stil ska komma med i de texter vi lägger in i WordPress sen. Så detta steg rensar bort allt sånt, samt tar bort lite onödiga dubletter, som till exempel “<strong><span>ord</span></strong>”.
Du har även här möjlighet att ändra på semantiken. Kanske alla img-taggar ska få en speciell class, eller liknande?
Nu kan vi säga att texten har hämtats ut från den gamla sajten och sedan putsats upp till modern standard. Den är inte perfekt, men för att vara behandlad mer eller mindre automatiskt så är den väldigt bra nu. Det är dags att flytta in allt i WordPress.
På denna sida får du en lista på alla sidor vi har i databasen från gamla sajten. Vid sidan av dem finner vi alla sidor i WordPress (med länk till ett smidigt plugin som kan skapa hundratals sidor i WordPress med ett knapptryck). Det man gör här är att koppla ihop de olika sidorna så att Migrate 2 WP vet vilken text som ska till vilken sida. Detta manuella jobb är lite trögt och jag ska i framtida versioner jobba på att förenkla detta, bland annat genom Ajax och automatiska matchningsförslag.
Om en sida inte kopplas så kommer den gamla sidan inte att flyttas med till WordPress. Detta faktum använde jag för att “radera” några gamla och dåliga sidor på FF7-sajten, som GameShark-koderna och sidan om FF7-leksaker.
Man kan också koppla en gammal sida till flera WordPress-sidor, gör man det så dupliceras texten, något jag använde mycket när jag till exempel ville dela upp en gammal text i 2-3 mindre delar.
Kopplar man flera gamla sidor till samma WordPress-sida så slås de ihop, texterna kommer efter varandra på samma sida. Detta använde jag också mycket på FF7-sajten för att kunna lätt slå ihop 2-3 sidor till en enda sida i WordPress.
Genom att spendera lite tid och tanke i detta steg så kunde jag förbättra strukturen på menyn avsevärt, minska mängden överflödig text, och generellt förenkla för besökarna på jakt efter hjälp.
Detta steg är bara en stor knapp. När man klickar på den så skjuts all text rätt in på respektive sida i WordPress utifrån valen man gjorde i förra steget. Självklart finns allt kvar i databasen till Migrate 2 WP så att man kan ändra sig och göra fler justeringar på sina texter.
Koden gör dig också en extra tjänst genom att uppdatera alla gamla länkar i texterna till de nya riktiga länkarna. Koden lägger också på några class:er på alla länkar och bilder som gör att de sticker ut dels på sajten sen men också inne i WordPress admin. Detta är för att de ska liksom “lysa” lite så att man kan testa dem manuellt. Efter det kan man manuellt ta bort den class:en.
Kör man detta steg en gång till senare så raderas den text som redan finns i WordPress!
Nu är det bara att börja testa den nya WordPress-sajten. Gå igenom alla länkar och uppdatera bilder, lägga upp menyer, rätta gamla stavfel, lägg till texter, etc. Denna del av jobbet är den mest tidskrävande och kanske cirka 70% av tiden spenderad på nya FF7-sajten hamnade i denna fas. Det är ett manuellt jobb. Lyckligtvis kan man nu bjuda in flera extra skribenter som hjälper en gå igenom alla texter. Utvecklarens jobb kan ses som avslutat.
Migrate 2 WP hjälper dig med ett enormt tråkigt och tidskrävande jobb, och den fungerar på alla sajter. Förhoppningen är att fler ska komma och bidra till koden, och att produkten ska vara ett smidigt verktyg för att lättare gå från statiska sidor till WordPress. Och eftersom egentligen bara Steg 6 och 7 är specifikt till WordPress så kan man potentiellt utveckla produkten vidare till att även stöda andra CMS.
Den andra Final Fantasy-sajten vi lanserar i vårt nya system guide.ffuniverse.nu är vår aningen uppfräschade Final Fantasy 5-guide. Som vi skrivit om tidigare så var det en av de sajter vi såg på att flytta efter att Final Fantasy 7-guiden nylanserades i maj 2013.
Jobbet var ganska litet då sajten i sig inte innehåller så mycket text. Men det hjälpte oss att finna några små buggar, samt lägga till några mindre förbättringar. Samtidigt lär vi oss processen i att flytta över gamla sajter till vårt nya avsevärt förbättrade system.
Bara processen att flytta all text in i det nya systemet är tyvärr en ganska tidskrävande process, även om jag utvecklat ett verktyg – “Migrate 2 WordPress” som hjälper till lite med jobbet. Cirka 40 olika steg ska man gå igenom för att sätta upp och sedan lansera den nya sajten. Därimellan ska absolut all text läsas, behandlas och uppdateras. Så det var skönt att ta jobbet med en av våra minsta sajter.
Nytt på Final Fantasy 5-guiden är att den nu fått en liten och enkel Bilder-sida. Jag har också fyllt i information om alla magier: Black, White, Time, och Blue Magic. Jag har även lagt upp sidan Songs om de sånger en med jobbet Bard kan spela, samt skapat sidan Hemligheter. Så lite nytt godis har ni där.
Huvudsaken med att flytta sajterna till vårt nya systemet är att komma in i ett modernt system, få bättre kod (vilket betyder enklare och snabbare sidor), och underlätta för oss att göra stora och små ändringar i all text. Detta har vi sett resultatet av på FF7-guiden som uppdaterats och småjusterats nästan hundra gånger sedan lanseringen för lite över ett år sen. Se detta mot hur det var i gamla systemet: en (1) ändring på fem år!
Det är inte meningen att varje flytt ska ge en guide en massa nytt innehåll, men det är alltid en fin bonus att kunna bjuda våra kära besökare på.
Så, lyssna inte mer på mitt babbel utan dra över till vår nya FF5-guide!
De nya guide-sajterna har gått under projektnamnet “FFU v2”, något som fastnade efter lanseringen. FFU i sig har kommit ut i många versioner, och jag har alltid varit noggrann med att skriva ut detta överallt, till exempel “Community v4.3”, “FF8-sajten v4.0” och så vidare. Det går inte helt att sätta ett versionsnummer på hela FFU, det har liksom alltid varit ett stort och spritt nät av mer eller mindre helt unikt uppbyggda sajter. Därför passar det så bra att se på det som FFU version 1, och det nya enhetliga och kraftfullt förbättrade systemet som version 2.
I samband med lanseringen av nya FF5-sajten så fick jag några önskade förbättringar, ändringar, och buggfixar utförda på vårt theme i WordPress. Här följer en kort lista (uppdateringar/byte av externa plugins är ej listade):
Som extra bonus har jag också fått implementerat några nya bra plugins, vidare justerat de plugins vi har, kraftigt uppdaterat interna guider och dokumentation om det nya systemet, och jobbat mycket på vårt egenutvecklade migreringsverktyg Migrate 2 WP. Ett system som snart når den efterlängtade 1.0 statusen (så att det faktiskt fungerar utan en massa manuell handpåläggning och drösvis av krascher).
Är du en person som gillar att skriva, är duktig på svenska språket, och har några timmar över i veckan? Kanske du varit medlem på vår community en längre tid, eller vid flera tillfällen klarat dig förbi det där svåra partiet, eller den där jobbiga bossen, i något Final Fantasy tack vare våra guider och vill visa din tacksamhet. Då kan du få hjälpa oss att få några av våra riktigt gamla och ibland dåligt formaterade sajter/guider över till vårt nya format. Och i samma veva möjlighet att producera helt nytt innehåll som saknats tidigare.
Att flytta FF7-sajten till vår nya moderna lösning tog ganska lång tid, och cirka 80% av allt jobb gjordes av en enda person. Nu är jag i och för sig extremt perfektionistisk av mig, men det är mycket innehåll att flytta och piffa upp. Det återstår väldigt mycket innehåll på FFU som fortfarande behöver flyttas över och moderniseras. FF7-sajten var bara början.
Vill du vara med och hjälpa oss?
Alla sidor skapas, ändras, och designas via WordPress, ett av världens största innehållsverktyg för webben. Du måste dock inte ha någon erfarenhet av det då vi tillhandahåller upplärning i allt du behöver. WordPress är dessutom väldigt enkelt att komma in i och arbeta med.
Det mesta innehållet finns redan på våra gamla sidor. Att flytta över det in i WordPress är tyvärr ett manuellt klipp-och-klistra-jobb, där man samtidigt ser till att rensa bort gammal/dålig HTML-kod. Man ska också, då man ser möjligheten, skriva om dåliga formuleringar, rätta gamla stavfel, ta bort gammal design som “sitter fast” i texten, samt så klart skapa helt nytt innehåll där det saknas helt eller delvis. Vi har också ett nytt tänk för att lyfta fram viktig information i innehåll, samt hur innehåll länkas, som ska införas i de gamla texterna.
De guider vi först och främst vill flytta över är de äldsta och de som ser ut att vara i störst behov av en uppfräschning:
Det är också av intresse att flytta över andra guider vi har till det nya systemet, vi är också intresserade av skapandet av helt nya guider, t.ex.:
Vad med FFVIII, FFIX, och FFX-sajterna då? Dessa är så fulla med innehåll, och i så stort behov av programmering för att flyttas att dessa kommer Webmaster själv ta hand om, och sedan invitera er att hjälpa till när tiden är mogen.
Låter detta intressant? Send ett mail till mig – Webmaster (Bobby) – så ska vi se om vi kan få plats för dig någonstans på sajten. Ange ditt namn, din ålder, samt den/de guider du är mest intresserad av att flytta/skriva. Länka gärna till något du skrivit tidigare, eller bifoga en PDF eller liknande.
Ja, denna sajt (och alla under den) tillhör och utvecklas av samma team bakom www.ffuniverse.nu. Enda skillnaden är att där du är nu så körs en annan server i bakgrunden än den som bland annat håller våra nyheter och vår community igång.
I en framtid är det möjligt att fler av våra spelsajter flyttas över hit till “guide”-servern. Lite enklare att hitta, och lite tydligare med exakt vad du kan förvänta dig hitta här – guider!
Just nu har vi bara Final Fantasy 7-sajten upplagd här.
Copyright © 2024 Om FFUniverse
Theme by Anders Noren — Up ↑
