Arbeta lokalt innan webbplatsen släpps

De flesta utvecklare känner till att man kan arbeta lokalt på datorn med HTML, CSS och Javascript. Inte alla vet om att man även kan arbeta med serversidospråk som exempelvis PHP och databasen MySQL.

Oavsett vilket verktyg man använder för detta skapas i regel en testmiljö på adressen http://localhost/. Det kan ses som ett alias istället för din riktiga domän.

WAMP och MAMP

WAMP betyder Windows Apache MySQL PHP och finns att ladda ner på wampserver.com. Det är lätt att installera och man behöver inga direkta förkunskaper för att klara av det.

Det som kan vara lite lurigt innan man är van är att få databasen rätt inställd. Den ska exempelvis helst ha en annan användare än ”root”-användaren.

Om man väljer att använda WAMP för att köra WordPress finns en utmärkt guide för varje steg på urbangiraffe.com.

WAMP finns även till Mac men då heter det istället MAMP som betyder Mac Apache MySQL PHP. Det finns att ladda ner på mamp.info.

Instant WordPress

När detta skrivs används WordPress av 14,7 procent av världens webbplatser och det är därmed världens mest använda publiceringssystem. Därför har några utvecklat speciella server-”paket” just för detta endamål. Instant WordPress är ett sådant.

Med Instant WordPress kan man starta en tom WordPress-installation från vilken enhet som helst, exempelvis ett USB-minne. Om man har kunder kan man visa dem den webbplats man byggt åt dem.

I programvaran ingår även genvägar till plugins-mappen, tema-mappen, admin, MySQL och startsidan på webbplatsen.

Nackdelen med Instant WordPress är att det tar ca 200 MB och har man 50 webbplatser så blir det mycket utrymme.

WordPress Portable

Ett bra alternativ till Instant WordPress är WordPress Portable. Till skillnad mot Instant WordPress tar det bara upp ca 20MB, vilket är en tiondel. Även här kan man starta WordPress direkt från USB eller någon annan enhet.

En nackdel med WordPress Portable är att det inte finns några genvägar till WordPress olika mappar. En annan nackdel är att man inte kan köra det samtidigt som WAMP eftersom båda körs mot http://localhost/. Det går därför inte heller att köra flera instanser av WordPress Portable samtidigt för jämförandet av webbplatser, vilket ska gå i Instant WordPress.

Personligen tycker jag ändå bättre om WordPress Portable då det är snabbt och inte tar upp så stor plats.

Andra alternativ

Är man inte nöjd med något av dessa alternativ så finns det fler. Ett av dem är Bitnami. Här finns stöd för WordPress, Drupal och Joomla med flera.

Ett annat alternativ är XAMPP som ska kunna göra samma sak som de övriga.

Fördelar med att köra lokalt

• Laddningstiden är betydligt kortare vid körning lokalt än att sitta och vänta på att internet ska svara.
• Om internet slutar fungera kan man ändå fortsätta arbeta, såvida man inte kör externa Javascript, typsnitt eller annan kod.
• Man slipper extraarbetet med att kopiera filerna till servern mellan varje ändring vilket kan spara mycket tid. Ofta arbetar man genom att skriva, testa, skriva, testa. Då är det skönt att bara behöva trycka på F5 eller uppdatera.
• Om man kör något skript som låser sig, låser man bara sin egen dator. Annars kanske man använder webbhotellets kapacitet i onödan.
• Man är inte beroende av att webbhotellet ska ligga uppe hela tiden.

Nackdelar med att köra lokalt

• Det kan ibland vara svårt att få den lokala miljön att alltid vara identisk med live-mijön. Detta eftersom man uppdaterar en del lokalt. Sedan uppdaterar man en del på live-servern och det är oftast inte samma ändringar som görs.
• Ibland händer det att inställningarna på servern eller databasen inte är samma lokalt som på live-servern. Då kan man få konvertera databasen eller anpassa inställningarna.
• En flytt av webbplats från lokalt till live-server tar alltid lite tid. Dock är det inte att jämföra med den tidsvinst man gör när man arbetar lokalt.

Säkerhet i WordPress

Uppdatera till senaste versionen

Det kanske enklaste sättet att hålla WordPress-systemet säkert är att helt enkelt uppdatera WordPress till den senaste versionen. När en ny version har kommit får man information om det genom en gul informationsruta. På de flesta webbhotell kan man uppdatera WordPress direkt från administrationen och det gör att man blir mer motiverad att hålla installationen uppdaterad.

På vissa webbhotell går det inte att uppdatera automatiskt och på andra krävs det en liten handpåläggning. På Binero krävs att man lägger till tre rader kod i wp-config.php för att kunna uppdatera WordPress via administrationen. Det är värt att lägga den tiden.

define( ‘FS_METHOD’, ‘direct’ );
define( ‘FS_CHMOD_DIR’, 0755 );
define( ‘FS_CHMOD_FILE’, 0644 );

Håll koll på instickningsprogrammen

Vissa instickningsprogram / plugins innehåller virus, andra innehåller säkerhetshål. Därför är det viktigt att bara använda instickningsprogram som går att lita på. För att lösa problemet med säkerhetshål i instickningsprogrammen är den bästa lösningen att inte installera för många samt att hålla dem som är installerade uppdaterade.

Rent konkret rekommenderar jag att alltid ladda ner instickningsprogram från wordpress.org, samt hålla koll på när de uppdaterades senast, vilken version de stödjer, hur bra betyg de har fått och hur många nedladdningar de har. Har de många nedladdningar, bra betyg, är nyligen uppdaterat samt stödjer den versionen du använder så kan man vara ganska säker.

Göm WordPress och versionsnumret i metadatan

Virus och elaka robotar på internet kan hitta WordPress-installationer genom att helt enkelt titta på metadatan. Där står i de flesta WordPress-installationer att WordPress används samt vilken version det är. Perfekt för en robot som vill attackera en specifik WordPress-version där säkerhetshålen ännu inte är fixade.

Det går dock att åtgärda detta genom att antingen köra en eller flera remove_action i PHP, eller installera ett plugin för att dölja WordPress-versionen och att WordPress används. Jag rekommenderar det sistnämnda.

Ange ett säkert lösenord

Säkerheten är inte bättre än dess svagaste länk. Tänk därför på att ange ett säkert lösenord. ”admin” som användarnamn och ”password” som lösenord är ingen bra kombination, även om den dessvärre är mycket vanlig.

Ett säkert lösenord är följande:

• Går inte att forma till ett ord.
• Innehåller både stora och små bokstäver.
• Innehåller siffror.
• Innehåller konstiga tecken.
• Är mer än 8 tecken långt.

För att testa ett säkert lösenord, gå till Post och Telestyrelsens webbplats testalosenord.pts.se.

Sätt inte läs och skrivrättigheter på alla filer

I vissa fall kan man behöva ändra läs- och skrivrättigheterna för att exempelvis kunna ladda upp bilder i WordPress administration. Dock ska man vara mycket försiktig med filrättigheterna på servern då de kan användas vid attack.

644 är ok för de flesta filer. Det innebär att filerna endast är läsbara och elaka skript kan därför inte göra så mycket. För att kunna ladda upp och ändra filer behövs dock utökade rättigheter. Det kan vara frestande att sätta 777 som innebär fulla läs och skrivrättigheter. Oftast kan man göra samma sak med 755 som är betydligt säkrare.

Sammanfattningsvis ska man försöka använda 644 så långt det går. Det är bara uploads-mappen som brukar kräva utökade rättigheter som 755.

Ta backup ofta

Trots att man arbetar säkert kan det värsta inträffa, att man råkar ut för ett angrepp. Därför bör man ha ett väl fungerande backup-system. Att kopiera filerna och databasen manuellt en gång i veckan är ett sätt men det kan lätt innebära att det rinner ut i sanden. Även om webbhotellen också tar backup så är det vanligt att detta bara görs exempelvis upp till 10 dygn bakåt.

Vissa använder Dropbox för backup och det går även att använda Dropbox vid backup av WordPress.

Använder man inte Dropbox eller söker en annan lösning rekommenderar jag att använda BackWPup. Det har stöd för schemaläggning, databasbackup och filbackup. Man kan välja om backupen ska mailas, placeras på FTP-kontot eller ett externt FTP-konto. Man får välja vilka mappar som ska backas upp vilket är en fördel eftersom man sällan behöver hela WordPress-kärnan i backupen.

Har du fler säkerhetstips? Lämna gärna en kommentar!

CSS eller tabeller för layout?

Det finns ett antal skillnader mellan att skapa layout i CSS i jämförelse med tabeller. Här kommer några av dem.

CSS

CSS står för ”Cascading Style Sheets” och är ett språk skapat för att på ett bra sätt separera HTML-strukturen från designen.

Fördelar

• Genom att separera HTML-strukturen från designen är det betydligt lättare att förstå koden. Stilmallen läggs med fördel i en separat fil.
• Layouten är ”flytande” vilket gör att man kan positionera elementen fritt, till skillnad från tabeller som använder sig av ett fast rutnät.

Nackdelar

• Alla webbläsare läser inte CSS likadant. Internet Explorer är en webbläsare som länge legat efter vad det gäller att vara kompatibel med CSS. Med Internet Explorer 9 kommer Microsoft ifatt de andra webbläsarna, även om inte heller den webbläsaren har stöd för det senaste inom CSS.
• Att centrera element vertikalt med enbart CSS är ingen lätt uppgift. På Theme Forest finns en bra guide som visar 5 olika sätt på hur man kan göra.
• Att få två kolumner lika höga är ett annat problem som inte är lätt att lösa med CSS. På BuildInternet.com finns 4 olika guider för hur man gör.

Tabeller

Fördelar

• Det är enkelt att centrera innehåll i en cell.
• Eftersom hela tabellen ses som en enhet håller den koll på kolumnernas relationer till varandra. I praktiken innebär det att om en kolumn dras ut på höjden så följer den andra med. Det kan vara en fördel om man exempelvis vill att den ena kolumnens repeterande bakgrund ska följa med hela vägen ner.

Nackdelar

Om man har en komplex webbplats och skapar den med tabeller kan det lätt bli ett ormbo av td och tr (table data och table rows). Ska man sedan lägga till flera td eller tr i den redan komplexa layouten kan man få stora problem eftersom man kan behöva göra fler anpassningar flera olika ställen för att det ska fungera.

Det anses enligt ”Best practice” att undvika tabeller för layout / design. Eftersom det inte är rekommenderat bör man istället anamma ny teknik.

Den gyllene medelvägen

Det finns som jag beskrivit både för och nackdelar med både CSS och tabeller.

Det finns en variant som är en blandning av dem båda. Man kan skapa tagg i stilmallen och ställa in så att den beter sig som en tabell, tabell-cell, eller tabell-rad. Det kan göra att man får en mindre rörig kod fritt från tabeller, men ändå dra nytta av att exempelvis få två olika kolumner lika långa.

Här är de olika fallen som de ser ut i stilmallen:

display: table;
display: table-cell;
display: table-row;

Skillnad mellan design och layout

Vad är egentligen skillnanden mellan design och layout? Man kan lätt förvillas och tro att det är samma sak, eftersom båda i regel förekommer när man pratar om en webbplats utseende.

Jag väljer att börja med att gå igenom vad layout är eftersom det är grunden till hur designen kommer att hamna.

Layout

Man skulle kunna beskriva layout som en webbplats skelett. Den håller uppe hela webbplatsen. Layouten utgör alla olika delar som placerats på webbplatsen.

En logotyp i toppen och menyn till höger är två exempel på vad layouten styr. Ett motsatt exempel skulle vara att layouten talar om att logotypen ska ligga i botten och menyn till vänster. Även om det sistnämnda inte är bra i praktiken visar det ändå på två olika scenarion.

Jag har i mitt exempel ovan berört några huvudelement. Dock innehåller layouten placering av alla element oavsett storlek. Det kan exempelvis vara vart en bild ska läggas, om den ska placeras till höger eller vänster.

Wireframes

För att snabba upp arbetet med att skapa layouten kan man använda sig av wireframes. Det gör det visuellt tydligt och man kan snabbt upptäcka brister utan att ens behöva lägga till någon design. Ett exempel på ett verktyg som kan användas är Mockingbird.

God layout talar för sig själv

En användare stannar kvar i snitt 4 sekunder på en webbsida. Då gäller det att på den korta tiden låta användaren snabbt hitta det han / hon söker. Layouten är viktigare än designen för just detta. Det kan spela roll om menyn ligger i toppen, till vänster eller till höger.

Detta är också viktigt när det gäller placeringen av annonser. Layouten är många gånger avgörande för om en annons genererar en intäkt eller ej.

Design

När layouten (delarnas placering) väl är på plats, då som först kan man lägga in designen. Designen innebär utseendet i färg och form. Det kan bildligt ses som webbplatsens klädsel.

Textfärg, typsnitt, bakgrundsfärger och webbplatsens färgprofil är alla en del av designen.

Håll isär layout och design

Många som inte separerar layout och design sitter länge och filar på visuella delar på webbplatsen, utan att först ha spikat layouten. Det kan i värsta fall innebära att arbetet måste göras om då designern inte tänkt till från början.

En god design är lätt för ögonen att förstå

För liten text, för dålig kontrast och fel fokus är exempel på vanliga misstag som kan göras.

• Utgå ifrån att texten ska vara läsbar för alla besökare, även de äldre.
• Dålig kontrast kan på vissa skärmar innebära att texten försvinner.
• Med fel fokus menar jag att användaren uppmärksammas på någonting annat än det man vill att användaren ska fästa blicken på. Det kan vara att användaren fäster blicken på menyn istället för innehållet.

Att tänka på

Många som skapar en webbplats för första gången blandar ihop layout och design. Det gör att det kan bli tokigt om man inte tänker sig för. Det viktigaste är att layouten stämmer. Om den inte är rätt och behövs ändras i efterhand kan det innebära ett stort arbete. Om designen däremot behöver ändras är det inte alls lika stort arbete, så länge som inte designen gör att layouten också måste ändras.

Mitt råd är att i första hand se till att få layouten korrekt. I nästa steg, skapa designen. Om arbetet görs åt någon annan, var tydlig med att informera om att layouten är svår att ändra när den väl är spikad.

Sammanfattning

Bygg layouten först och designen i andra hand. Detta eftersom en webbplats egentligen rent funktionellt klarar sig utan design. Designen är webbplatsens kläder och har syftet att med sitt visuella intryck locka besökaren att via layouten ta sig till informationen han / hon söker.

CSS3 – Skapa snyggare webbplatser utan bilder

Gradienter / toningar

Heltäckande färger i all ära men ibland är det riktigt snyggt att använda sig av gradienter eller toningar som de också kallas. Ett stort användningsområde för detta är knappar som ska se ut som att de går att klicka på. Att i det fallet lägga till en toning gör att knappen får effekten av att den är utbuktad. Gradienter på bakgrundsbilder fungerar med alla moderna webbläsare. Använd Ultimate CSS Gradient Generator för att skapa din egen gradient.

Multipla bakgrundsbilder

Man har tidigare kunnat använda flera bakgrundsbilder på varandra, men bara genom att placera olika HTML-element på varandra genom att antingen använda transparanta (genomskinliga) bilder eller genom CSS-kommandot opacity. Nu med CSS3 går det även att skapa dessa direkt i CSS:en utan att använda onödig HTML. Läs mer om multipla bakgrunder på CSS 3 Multiple Background Images – Zen Elements.

Bilder på ramar

Tidigare har man enbart kunna använda sig av linjer för att skapa ramar runt element. Nu med CSS3 kan man även använda en uppsättning bilder för detta. Det gör det betydligt lättare att skapa en god design utan att behöva lägga till en massa krånglig extra HTML-kod. Kommandot heter border-image. Läs mer om bilder på ramar på Border-image: using images for your borders – CSS3 info.

Rundade hörn på element

Att använda sig av rundade hörn på webbplatsen ger ett mjukare behagligare intryck. I CSS3 finns det något som heter border-radius. Det fungerar i alla moderna webbläsare förutom Internet Explorer 8 och neråt. Det finns en bra generator för att skapa rundade hörn på CSS Border Radius Generator.

Skugga på texter

Hur snyggt är det att ha en skugga på texten? Man bör vara försiktig med detta eftersom läsbarheten lätt kan försämras om man inte arbetar med textskuggor på rätt sätt. Om det ska användas på små texter bör man använda skuggan ytterst diskret. På större texter har man lite större friheter eftersom man då har fler punkter på skärmen att arbeta med. Kommandot heter text-shadow och fungerar på alla moderna webbläare. En trevlig generator för detta är Westciv – Text Shadow. Där kan man generera skuggor på texter och mer därtill.

Skugga på element

Att lägga en skugga på ett element innbär att man visuellt lyfter upp elementet från bakgrunden. Det kan ha många användningsområden. Framför allt så kan det dra uppmärksamheten till sig. I vissa fall kanske man vill särskilja elementen från mängden och då kan en skugga vara bra. Kommandot heter box-shadow och fungerar bra i de flesta moderna webbläsare. En artikel som beskriver hur det används är Dimox.net – Cross-browser CSS3 box shadow.

Rotera element

Ibland kan det vara snyggt att luta ett element, exempelvis en bild. Om man exempelvis vill illustrera en stökig hög med fotografier kan transform i CSS3 användas. När detta skrivs är det bara Safari, Firefox och Google Chrome som har stöd för detta så använd inte detta fullt ut än. Dock fungerar det bra att använda så länge som den är bakåtkompatibel. I det här fallet innebär bakåtkompabilitet att elementen ska kunna fungera väl tillsammans även då de inte är roterade. Information om hur man roterar element finns på Animation Using CSS Transform – The Art of Web.

Sammanfattning

Det här var några exempel på vad man kan använda CSS3 till. Eftersom de flesta kommandon inte är standardiserade än så bör de användas med viss försiktighet.

Ta för vana att testköra dem i alla de vanliga webbläsarna så att de fungerar som tänkt. Kontrollera även at det fungerar för lite äldre webbläsare. 2 versioner bak ses som ”best practice”. Använder vi version 9 av Internet Explorer idag bör webbplatsen även fungera ner till version 7 om man ska rikta sig till den större massan.

I många fall där det inte fungerar finns det workarounds som fungerar bra. Vissa tar hjälp av Javascript-bibliotek som jQuery.

Grundkurs i CSS

När du bygger en hemsida formas stommen av HTML och hur den ska se ut och placeras definieras av CSS. Det brukar förklaras som att HTML är strukturen och CSS presentationen. Dessa två är båda programspråk som berättar för webbläsaren vad denna ska visa.

Men vad är då CSS?

CSS står för ”Cascading Style Sheets”, men kallas också för stilmallar, och är till för att styra hela utseendet och layouten på en sida. CSS definierar hur HTML ska visas. Du bestämmer med hjälp av CSS hur din text ska se ut och var den ska ligga, hur menyn ska bete sig och vilken färg den ska ha. Om du har bilder på sidan kan du göra dem klickbara eller lägga dem prydligt på rad i högermarginalen. CSS är helt enkelt ett verktyg för att skapa layouten på din hemsida.

CSS finns i tre nivåer; mest används dock nivå ett och två då alla webbläsare inte stödjer den tredje nivån. De två nivåerna som används finns till för att forma texten, bakgrunden, länkarna och fonterna samt placera bilder och texten osv.

Hur används CSS?

CSS kan användas på tre olika sätt. Vilket sätt du väljer att använda dig av är upp till dig.

Användningsområde 1: Du kan göra en extern stilmall, external CSS, vilken får styra all formatering på alla hemsidans sidor. Denna CSS-mall ligger helt utanför dokumentet där HTML-koderna finns och kopplas endast samman med hjälp av en länk i ”head”-delen. Detta alternativ är ofta det mest praktiska om hemsidan är stor eller om du vill leka med specialeffekter. Du har endast ett dokument att ändra i och inte behöver gå in i varje specifik sida för att göra uppdateringar och justeringar.

Användningsområde 2: Du använder dig av en inbäddad CSS-kod, även kallad embedded, i varje specifikt HTML-dokuments ”head”-del. Vid kodningen använder du dig här av attributet style och skriver koden utan klamrar. Detta sätt att använda sig av CSS är bra om dina sidor ska se olika ut.

Användningsområde 3: Du kan även skriva in CSS-koden direkt bland HTML-koderna för att forma en viss del av dokumentet. Denna typ av CSS-kodning kallas för inline och fungerar utmärkt så länge du vid varje kodning använder dig av attributet style och skriver CSS-koden utan klamrar.

Hur skapas CSS?

Det går att skapa en extern stilmall i de flesta program och t.ex. Anteckningar fungerar utmärkt. Detta dokument kan du sedan döpa till förslagsvis ”style.css”, namnet är fritt men filändelsen måste vara ”.css”. Om du ska använda dig av embedded eller inline-metoderna skriver du direkt i HTML-dokumentet.

Sedan är det bara att sätta igång. De första koderna brukar oftast behandla bakgrund, vad texten ska ha för typsnitt, vilken storlek den ska vara i, om det ska vara något radavstånd o.s.v.

Ett exempel på en extern kodning, då koden ligger i ett separat dokument kan se ut så här:
”hr {color:green;}
p {margin-left:25px;}
body {background-color:#000000;}”

I det här fallet betyder ”hr {color:green;}” att texten blir grön, ” p {margin-left:25px;}” att texten hamnar 25 pixlar in från vänstra sidan och ”body {background-color:#000000;}” betyder att bakgrunden blir svart. Vi hade också kunna haft med vilken storlek texten skulle vara i (kan anges i bl.a. pixlar, procent eller em) eller huruvida olika texter på sidan ska vara i olika färger m.m.

Det är också möjligt att enbart färglägga en av sidans kanter eller att skapa en större marginal i botten på texten. Det viktiga att komma ihåg här är att de olika kommandona bör vara medsols, d.v.s. topp – höger – nederkant – vänster. För dig som just har börjat med CSS är detta något av en överkurs, men det kan vara kul att känna till dessa möjligheter eftersom du lättare kan utveckla dina kunskaper då.

Olika begrepp, namn på färger och liknande går enkelt att hitta på Internet. Det finns också många specifika och avancerade guider som ger dig konkret hjälp kring olika problem som kan uppstå. Använd gärna w3cschools för vidare referens.

Publicera hemsida på Internet

För att publicera en hemsida på internet måste du gå igenom ett par steg. Du måste t.ex. välja ett webbhotell och en domän, men också lyckas med att faktiskt lägga upp sidan.

Välj webbhotell & domän

När din hemsida är färdigbyggd och bara väntar på att få komma ut och visa upp sig på internet behöver du välja ett webbhotell och en domän. Vilket webbhotell du bör välja kan skilja beroende på om du är en privatperson som behöver webbhotell för din egen sida eller om det är ditt företag som är ute efter tjänsten.

ONE för privatpersoner

Webbhotellet One.com kan vara ett bra alternativ för dig som är privatperson då det är både bra och billigt. One erbjuder både webbhosting och domännamn och är därför perfekt om du vill samla allt sådant på ett och samma ställe. Det är en innovativ leverantör som funnits på marknaden sedan 2002 och som idag är en av Europas främsta aktörer. De har förmånliga erbjudanden som kan vara värda att titta på.

Binero för företag

Är du ute efter ett webbhotell för ditt företag är istället Binero att föredra. Detta företag har en lång lista med nöjda referenspersoner och har precis som One vunnit några priser. Här kan du utöver att köpa plats på en server även köpa ett domännamn och välja mellan alla de populära toppdomänerna. Bineros erbjudande för företag ger 200 GB i utrymme och möjlighet till hög trafik, allt till en relativt låg kostnad.

FTP-program

FTP står för File Transfer Protocol och är ett av de äldsta och idag mest populära filöverföringsprotokollen (vilket är en metod för att överföra filer mellan två olika datorer). Det vanligaste användningsområdet för FTP-program idag är i form av överföring av filer från den egna datorn till ett webbhotell, i syfte av att publicera en hemsida på internet.

Det finns ett antal olika FTP-program att ladda ner på internet . Ett som är väldigt populärt, lättanvänt och dessutom gratis är FileZilla Client. FileZilla fungerar med de flesta typer av Windows. För Mac finns det också gratis och avgiftsbelagda program, t.ex. NcFTP och FireFTP.

Vid själva uppbyggandet av dina HTML-sidor är det en fördel om du organiserat dessa samt tillhörande bilder och dylikt i passande mappar. Kom ihåg att du måste ha döpt förstasidan, den sidan som ska läsas in automatiskt, till index.html.

Att hålla reda på saker är alltid lättare om det finns struktur. Kom ihåg att den struktur som du byggt upp när du skapat hemsidan på din dator måste finnas kvar på den mottagande webbplatsen. Annars kommer länkningen i dem inte att stämma och därmed kommer sidan bli felande. Det betyder att du inte kan ändra namn på dina filer när de väl är upplagda.

När du öppnat FTP-programmet kommer du att få upp en ruta där du ska fylla i ett antal uppgifter. Det är bland annat namnet/adressen till din host, ditt egna användarnamn och lösenord. Om programmet ber dig fylla i en port ska denna oftast vara ”21” när du använder dig av FTP. Här är ett exempel för hur vi ansluter till webbhotellet One.

När du är inloggad kommer du att få upp en ny ruta indelad i olika kolumner. Kolumnerna ligger parallellt med varandra och det är oftast bara att dra eller klicka över filerna från kolumnen som representerar din dator till kolumnen som representerar webbhotellet för att de ska laddas upp.

Att göra uppladdning till webbhotellet kan även ske med hjälp av andra program, men proceduren är i de flesta fall relativt lika.

Hur byter jag webbhotell för min redan existerande hemsida?

När du gjorde din hemsida kanske du inte läste på tillräckligt om ditt webbhotell eller så har din sida idag utvecklats så pass att ditt förra webbhotell inte längre kan tillgodose dina behov. Som tur är går det att byta webbhotell utan en massa krångel! Det enda du i princip behöver göra är att följa dessa åtta steg.

Byta Webbhotell – Åtta steg

1. Först och främst måste du ta fram dina inloggningsuppgifter med lösenord hos det företag där du köpte ditt domännamn.
2. Kolla runt och läs recensioner och tips om olika företag som erbjuder hosting. Se till att det du ska byta till uppnår de krav som behövs. Du vill i största mån undvika risken att behöva byta snart igen. Se vår framsida för recensioner.
3. När du hittat ett nytt webbhotell med ett erbjudande som passar dig är det dags att köpa. Det är viktigt att du sparar informationen som du får vid köpet, det kan t.ex. vara e-post och kvitton. Skriv helst ut denna information för säkerhetsskull, då har du den på flera ställen och risken att den försvinner minskar markant.
4. När du har ett nytt konto ska själva informationen, alltså det du har på din hemsida, flyttas över till det nya webbhotellet. Detta kan liknas vid att du har köpt en ny dator och vill flytta över dina gamla filer. Det kan ske på lite olika sätt beroende på vilken typ av hemsida du har. Har du en vanlig statisk hemsida är det enkelt, då behöver du bara kopiera hela filstrukturen och föra den till det nya webbhotellet.Är det däremot en blogg eller liknande som ska flyttas är det lite krångligare, vilket beror på att en blogg ofta är uppbyggd med hjälp av en databas. Då måste du först skapa en helt ny databas hos ditt nya webbhotell, som bör ha samma användarnamn och lösenord som din gamla. När den nya databasen är skapad och redo att kopiera kan du slopa den gamla databasen, kopiera över informationen till den nya och låta den ladda in på det nya webbhotellet.

   Desto mindre aktivitet som sker på din blogg under själva flytten desto bättre, eftersom det kan nämligen ställa till problem om saker på databasen ändras under flytten.

5. Vid köpet ska du noga se till att du får information om namnet på den nya servern. Du bör få ett primärt och ett sekundärt namn av ditt webbhotell. Dessa namn skickas med stor sannolikhet till din e-post. Om du inte får dem måste du läsa på sidan och ta reda på om de skickar ut informationen på annat sätt. Hittar du inget måste du självklart ta kontakt med företaget ifråga så snabbt som möjligt.
6. När detta är gjort är nästa steg att logga in på kontot för ditt domännamn, där byter du den DNS-information som finns ansluten till din domän till de uppgifterna du fått från ditt nya webbhotell. Du måste se till att du ändrar namnet både på den primära och på den sekundära servern! Ibland, beroende på vilka tjänster det är du använder dig av, kan du efter förändringen få ett mail som måste bekräftas för att förändringen verkligen ska ske.
7. Nu kommer du troligen att få vänta innan du kan beskåda resultatet. Det beror på att all information som finns på din hemsida kan var lagrad på datorer som kan finnas utspridda världen över och att föra in denna nya information och ta bort den gamla tar därför lite tid. Oftast tar förflyttningen mellan ett och tre dygn. Självklart kan det ske snabbare, men det är klokt att vara tålmodig och inte hetsa upp sig över att det tar lite tid.
8. Om alla ovanstående punkter genomförts felfritt bör ditt domännamn nu vara ihopkopplat med ditt nya webbhotell. I så fall återstår det för dig att nu bara ladda upp din hemsida på den nya servern.

Läs gärna Matt Cutts mega artikel om att byta webbhotell (på engelska) också.

Användarvänlig hemsida – hur gör jag en sådan?

Första intrycket betyder mycket och avgör om din besökare kollar vidare på din sida eller inte. Speciellt om du vill att dina besökare ska handla av dig är det viktigt att din hemsida uttrycker professionalitet.

När du skapar en hemsida är det viktigt att den är attraktiv och tilltalande, men den måste även vara användarvänlig och funktionell. Om din hemsida är krånglig och förvirrande är risken för att dina besökare vänder sig någon annanstans stor, trots att du kanske har en exceptionell design. Det är därför du måste ta stor hänsyn till användarvänligheten. Tänk användarvänlighet först, sen grafisk design.

Struktur
Hemsidans struktur är stommen den vilar på. Det är den planen du har över vilka undersidor som skall finnas och vart besökaren ska hitta vad. Det är ofta väldigt bra att ha en panel eller översiktskarta någonstans på hemsidan där besökaren kan känna igen sin position.

En väl strukturerad sida ger ett professionellt intryck och lockar besökaren till att stanna och bli en kund. Tänk i kundens banor – det som är självklart för dig som företagare är säkerligen inte lika självklart för den potentielle kunden.

Navigationen på hemsidan utgör också en viktig del i strukturen. Kunden måste snabbt kunna gå fram och tillbaka mellan olika sidor, undersidor och kategorier. Förutom översiktskartan kan det därför vara bra att markera länkar som kunden har besökt i en annan färg, att skriva ut den aktuella länken som kunden besöker i fetstil o.s.v. För att öka användarvänligheten bör du även placera menyn där den platsar mest naturligt, alltså där besökaren kommer att förvänta sig att den ska vara. Naturligt är till vänster precis som vi har här. Tänk efter noga innan du placerar den någon annanstans, det kan förvirra besökaren.

Användarvänlighet
Du bör även tänka på att inte använda dig av för stora filer (t.ex. bilder eller ljudklipp), då detta kommer att drabba besökaren i form av långa laddningstider, vilket ofta kan uppfattas som störande. Det finns många som sitter på ADSL-anslutningar med låg hastighet runt 0,5 mbit, därtill ökar antalet mobila besökare hela tiden där anslutningshastigheten kan vara ännu lägre stundtals.

Bygg gärna sidan med funktioner som gör att texten kan förstoras, vilket hjälper för dem som har svårt med mindre textstorlekar. Använd också ett typsnitt som är framtagen för webben, t.ex. Arial eller Verdana. Dessa ökar läsbarheten och ju mer kunden finner din sida behaglig och läsbar, desto mer intresse kan han eller hon få.

Design
Designen bör bl.a. vara sammanhängande i sin stil och inge ett harmoniskt uttryck, utan att olika delar suddas ihop till en. Bild och text bör inte överdoseras och deras plats måste beslutas med eftertänksamhet. Det är t.ex. jobbigare att läsa på en datorskärm och texter bör därför vara indelade i kortare stycken. Text ska inte läggas i bilder vid publicering, det är både mindre bra för besökaren och sökmotorerna då de inte kan läsa din text.

Du bör också tänka på att olika skärmtyper kommer att visa din hemsida på olika sätt. Därför måste du anpassa den efter den mest förekommande. Vilka upplösningar som används är rätt spritt. Vanliga upplösningar just nu är 1280×800, 1024×768 och 1280×1024. Man bör alltså kunna se din hemsida korrekt i så lågt som 1024×768, vilket många bärbara dator använder.

Det mesta är egentligen ganska logiskt. Du bör anpassa utseende och funktion efter dina besökare. Därför kan en hemsida ämnad till nöje för ungdomar och en hemsida innehållandes viktig information för vuxna självklart vara olika utformade. Kolla runt på andra populära hemsidor, hur har de byggt sin hemsida?

WordPress – verktyget och möjligheterna

WordPress är idag kanske mest känt som ett bloggsystem, men det är mycket mer än så. Det är faktiskt ett av det mest använda publiceringssystemen i hela världen och används flitigt på både bloggar och webbplatser. Hela denna webbplats är faktiskt utvecklad med WordPress i grunden! Verktyget utvecklas konstant, är modernt och håller sin fokus kring utseende, användarvänlighet och webbstandard.

Verktyget

Systemet är skrivet i PHP och sprids gratis under GNU-licensen. GNU-licensen innebär att du får använda programvaran i valfritt syfte, sprida den vidare samt förbättra och anpassa den efter dina egna behov. Det är på så vis egentligen ett ovärderligt program eftersom du kan utforma det helt efter dig själv.

Utöver att vara ett användbart verktyg för bloggning är WordPress även utformat för att kunna sköta hela hemsidor. Programmet går att anpassa genom olika tillägg, vilka du antingen skapar helt själv eller laddar ner från WordPress. Både tillägg och mallar går att installera direkt från administrationsgränssnittet i WordPress. Även uppdateringen kan installeras automatiskt med ett knapptryck.

Du som använder programmet behöver inte ha någon FTP-klient (datorprogram som genom att använda filöverföringsprotokollet FTP ansluter sig till en FTP-server) för att kunna uppdatera och redigera innehåll på dina sidor. Det beror på att allt detta blir tillgänglig genom att du loggar in via en inloggningssida.

Möjligheterna

WordPress är uppdelat på två sidor, wordpress.org och wordpress.com. Den förstnämnda är huvudsidan där du kan ladda ner mjukvaran och sköta installationen på din server eller hos ditt webbhotell. Med denna version har du full kontroll och kan styra över hur din sida ska fungera och se ut, när det gäller allt från design till innehållsfunktioner. Med denna version är det bara du och ingen annan som kan begränsa möjligheterna. För att lära dig hantera programmet kan du använda dig av guider som finns på WordPress egen hemsida.

WordPress.com är den fria bloggtjänsten som WordPress erbjuder. Med denna bloggtjänst behöver du inte inneha någon plats hos ett webbhotell eller en egen server och det krävs inte heller några installationer på din dator. Du har tyvärr därmed inte heller samma frihet, utan är bunden till att använda programmet så som det är utformat och ser ut. Mot en kostnad kan du dock få möjlighet att ändra på vissa saker, men grunderna står konstant fast.

Så vare sig du ska starta en blogg eller bygga en företagspresentation, välj WordPress då kan du enkelt underhålla hela hemsidan direkt på webben utan krångel.