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

CategoryWebbutveckling

Snabbare hemsida med CSS istället för bilder

De sista par veckorna har jag jobbat sakta men säkert med att plocka ut några bakgrundsbilder i från vår design och ersätta dem med endast några få linjer text (CSS).

Bakgrundsbilderna är oftast små, så de tar inte tid per styck (eller tillsammans) att ladda ner. Men webben fungerar i bakgrunden i stort sett på samma sätt som när den för många år sedan först slog igenom. Saker går i en och samma “lina”, så när du kommer in på FFU så får du första själva koden och texten till sidan, sedan kommer alla bilder som står för själva grafiken, och de skickas till din dator en och en. När vi då har runt 30 bilder för olika grafiska element i vår design så springer tiden fort iväg. Millisekunder blir till sekunder. Och sånt märkt. Speciellt på mobil med dålig täckning, t.ex. när du åker tunnelbana eller står ute i en skog (varför du nu ska surfa på FFU när du är i en skog låter jag vara osagt).

Med CSS (CSS3 för att vara specifik) kan man lätt göra väldigt många effekter idag som för 10 år sedan bara kunde göras i t.ex. Photoshop och läggas upp som bilder (jpg, png, gif). Slutresultatet är inte visuellt annorlunda, man får i princip exakt samma resultat, men det krävs ingen extra nerladdning för filen och sidan kan ritas upp för besökaren lite snabbare.

Dessa veckor har jag fokuserat på bakgrundsgrafik som jag tidigare gjort i Photoshop och som innehåller gradienter av färger, och/eller linjer (vertikalt eller horisontalt) för att ge skugg/ljus-effekter på linjerna. I nästan 10 fall av bilder har jag kunnat bytt ut bilderna mot en linje CSS vardera. Med linear-gradients i CSS kan vi åstadkomma ganska häftiga effekter, enkelt. Och för att ändra i effekten behöver man bara ändra i denna kod, man slipper alltså helt att starta upp några bildhanteringsprogram eller liknande.

Gradient färg

Denna lilla fina gradient ligger bakom inloggningsformuläret till Communityn uppe i TopNav. Den designades för snart 10 år sedan, som en bakgrundsbild. Denna onödiga nerladdning har jag nu tagit bort och ersatt med denna rad kod i CSS istället:

background-image: linear-gradient(to bottom, #c5d1d9, #74899a);

Genom att bara säga att bakgrundsbilden är en så kallad linjär gradient, som går från toppen ner till botten (top bottom) samt de färger som ska användas, så klarar din dator och webbläsare att blixtsnabbt måla upp gradienten. Allt utan att ladda ner en endaste bild.

Detta är alltså gjort på flera ställen i TopNav och vårt FFU-tema till WordPress. Genom detta laddas sidorna lite snabbare, och det gillar inte bara sökmotorer som Google, utan även du och jag som använder sidorna.

Ett mer komplicerat exempel är en dubbla sidoram vi har i vår “footer” runt våra populäraste guider. Den ser ut så här idag (och fram till nu var denna grafiska “effekt” uppnådd med en bakgrundsbild):

Koden för dessa linjer (en tunn vit tillsammans med en tunn svart linje till vänster, och samma upplägg till höger – alla med en genomskinlighet på 75%) är lite mer komplex än den tidigare vi såg.

background: linear-gradient(
     to right,
     hsla(1,1%,100%,0.15) 0px,
     hsla(1,1%,100%,0.15) 1px,
     hsla(1,1%,1%,0.15) 1px,
     hsla(1,1%,1%,0.15) 2px,
     transparent 2px,
     transparent 179px,
     hsla(1,1%,100%,0.15) 179px,
     hsla(1,1%,100%,0.15) 180px,
     hsla(1,1%,1%,0.15) 180px,
     hsla(1,1%,1%,0.15) 181px
);

Här definierar jag upp att de genomskinliga färgerna bara ska vara en pixel breda, först vit, sen svart, sen genomskinligt i merparten av bilden, för att så göra två nya linjer. Inte kanske det första man hade förväntat sig uppnå med linjära gradienter, men såhär kan man göra många kul effekter på sin webbsida. Utan bilder!

Och, man ser ingen skillnad på resultatet. Här är två bilder, en från före uppdatering (med bakgrundsbilder) och en från efter (med bara CSS-kod):

* Bakgrunden som kommer fram till höger om login-formuläret har inte med denna ändring att göra.

Här är hela 3 bakgrundsbilder ersatta av CSS.

Första version av plugin laddar in TopNav

Jag skrev tidigare om att vi bygger på ett litet WordPress-plugin som ska förenkla några delar på FFUs WP-sidor (alla spelguiderna ligger där). Vi har ju flera themes och olika sajter (denna blogg är en av den), och det är mycket kod vi önskar köra på alla dessa. Fram till nu har vi gjort copy+paste på all denna kod, men det är slut nu när vi har ett smidigt plugin alla sajter får använda istället. Detta plugin är nu redo att testas ut live, i sitt första utförande.

Genom att ladda upp och aktivera detta plugin så får en sajt automagiskt FFUs “TopNav” insatt på toppen av sidan (förutsatt att man lagt in en WP-hook för FFU topnav). Och detta är den moderna versionen av TopNav som utvecklades med vårt FFU-Theme 1.5 för nåt år sen. Med massa förbättringar under ytan! Bättre HTML5-kod, CSS3 och JavaScript som hämtar JSON med data från Windows-servern (för att kunna se om du är inloggad på communityn eller ej). Rätt komplicerade saker och väldigt mycket att tänka på för att få allt detta till. Bara det att hämta JSON från Windows-servern krävde massor av jobb på grund av CORS – Cross-site origin (man får egentligen inte hämta filer från andra servrar, så lite nya regler behövdes programmeras).

Detta är nu tagit steget längre, TopNav som nu hämtas in ser likadan ut som förut- men går du ner på surfplatta eller mobil så får du nu en helt ny design och upplevelse! Vi har en drastiskt förbättrad TopNav för små skärmar. FFUs logo visas och en knapp för att glida in en meny med alla våra guider och spelsajter. Du kan enkelt scrolla runt i denna meny, eller stänga den. Sista nyheterna ser man också hela tiden. Ju mindre skärmyta man har, ju mer plockar vi bort från TopNav, utan att ta bort viktig funktionalitet. Dessutom droppade jag helt jQuery och skrev om all JavaScript (200 linjer) till vanlig äkta “vanilla” JavaScript.

Såhär ser TopNav nu ut, med finare blå bakgrundsfärg (förut tråkigt vit). Logo och stor tydlig knapp för att visa alla våra andra sajter. Skulle du ha ännu mindre skärm så kapar vi bort “niverse”-delen av logons text.

Såhär ser det ut på läsplattor. Har man större skärm får man den gamla vanliga TopNaven.

När man klickar på “+ fler guider” så animerar vi snyggt in menyn från höger sida. Självklart med CSS transitions. Scrolla ner för att se hela listan. Eller stäng den med X uppe till höger.

Längst ner i menyn ligger en mer tydlig “Fler spel”-länk (vi har inte alla våra guider i TopNav). Och underst ligger våra andra sajter. Lätt att komma sig överallt, även på mobil!

Hoppas detta gillas och förbättrar upplevelsen för våra besökare! Detta är bara ett litet smakprov, ett öppet beta-test. Fler förbättringar på TopNav, och vårt plugin, är på väg! Det är trots allt FFUs 20:e år på nätet i år!

PS. Det är bara de sidor vi har på WordPress som får denna nya TopNav. Så communityn, nyhetssajterna, med flera, får den inte.

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.

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

Nya Cookie-regler

Lagar tillkommer, försvinner, och förändras kontinuerligt. En som funnits länge är den att någonstans på sin webbsida – alla webbsidor, stora som små – informera om cookies (webbkakor, små textfiler som lagrar information). Så vi har haft en sån enkel liten sida med information, och detaljer om hur man kan stänga av cookies på sin dator om man så önskar.

Numera har denna lag skärpts och man måste meddela på alla sidor där man använder Cookies. Besökaren måste mer aktivt säga att detta är OK. Vi använder Cookies överallt, det är svårt att ens kunna ha en webbsida numera utan att behöva Cookies.

Vi är helt beroende av Cookies för marknadsföring (annonser) på de få ställen såna finns, vi är också helt beroende av det för att kunna få ut statistik om besök på sajten. Dessutom är Communityn helt beroende av att Cookies är tillåtet och inte stängs av under användning.

För att följa lagändringen så har jag nu lagt upp en informationsruta på Communityns alla sidor, alla våra moderna Guide-sajter, och så småningom även på Nyhetssajtens alla sidor. Denna ruta har genererats via ett verktyg som heter “Cookie Consent“. Det kan starkt rekommenderas för att spara dig mycket tid om du hamnar i samma sits som mig!

De sajter hos oss som ännu inte har denna information är de gamla guide-sajterna (FF8-sajten, FF10-sajten, med flera). Det kommer uppdateringar dit så småningom.

Två nya superbra funktioner

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å Independet 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.

Gilgamesh nergång

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

WordPress-sajternas “nya” TopNav

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:
Screen Shot 2015-02-18 at 10.01.59

Efter:
Screen Shot 2015-02-18 at 10.05.22

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.

Lanseringsplan av nytt theme

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.