Blog - whr.se

Arbeta lokalt innan webbplatsen släpps

Jens — Tue, 30 Aug 2011 17:11:11 +0000

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

Jens — Sun, 12 Jun 2011 08:00:01 +0000

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?

Jens — Mon, 16 May 2011 15:35:56 +0000

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

Jens — Thu, 07 Apr 2011 15:39:21 +0000

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

Jens — Thu, 03 Mar 2011 15:38:16 +0000

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.

Skillnaderna GIF, JPG och PNG

Per — Fri, 11 Feb 2011 10:52:12 +0000

Du kan någonsin ha undrat varför några bilder har .gif på slutet av dess namn medan andra bilder slutar kanske .jpg. Även om du möjligtvis inte har funderat kring det här tidigare ska jag nu försöka förklara enkelt varför dessa skiljer sig och vad det innebär, eftersom det väldigt viktigt när du ska bygga en webbsida som ska innehålla bilder.

Mest använda bildformat på internet idag är JPG och GIF. Båda format har sina för- och nackdelar, och vi ska nu ta en titt på vilka dessa egenskaper är.

JPG bilder är väldigt bra fotografiska bilder. JPG bilder väger lite, är av liten filstorlek tack vare att den använder ”lossy compression” formateringsmetoden. Lossy compression är just som det låter i namnet, bilden blir komprimerad och förlorar därför en del detaljer från originalbilden. I fotografier är effekter av lossy compression minimala, medan bilder med klara skarpa linjer kan verka suddiga. Alltså för fotografier så är JPG bäst bildformat för användning på din webbsida, men vill du ha en logotyp t.ex. så kan du välja en annan bildformat som vi snart ska titta närmare på.

GIF bilder är, till skillnad från JPG, väldigt bra för illustrationer, som t.ex. logotyper och bilder som har stora ytor med samma färg. Bra för bilder med färre färgnyanser alltså. GIF är inte bildformat som du vill välja för fotografier eftersom den endast kan visa 256 färgnyanser. Alla dessa färger kan låta som mycket men sanningen är att en färgrik fotografi kan innehålla flera miljoner av olika färger. Ju fler färgnyanser desto sämre blir GIF bilden.

GIF bildformat är bra när du t.ex. behöver ha bilder med transparent bakgrund (genomskinlighet) eller bara att en viss del av bilden ska vara transparent. Det kan du inte göra med JPG.

Ett alternativ av dessa bildformat är PNG format. Det här är utmärkt format som har tagit på sig bästa delarna av båda tidigare nämna bildformat och har även mer goda egenskaper. Dock så har PNG ett gnatigt problem, den idag största webbläsaren Microsofts Internet Explorer stödjer inte fullt PNG bildformat.

Transparenta bilder

GIF är alltså mycket bra val om du vill ha enkla bilder med transparent bakgrund. Men så fort du behöver mer avancerade bildeffekter så blir GIF-format bristfällig. En bra egenskap av PNG är att den stödjer transparitet på flera nivåer, och inte som GIF enbart ”transparens på eller av”. Med PNG kan du göra en bild med transparent bakgrund men ändå låta bilden kasta en skugga, exakt som vårt bildexempel ovan visar.

Bakgrundsbilder med CSS

Per — Tue, 11 Jan 2011 10:52:42 +0000

CSS slår verkligen (X)HTML när det kommer till bakgrundsbilder. Med CSS är du inte fast i upprepande mönster, och så har du möjlighet att positionera bakgrundsbilden vart du än vill. Du kan även applicera bakgrundsbilden till ett specifik element i dokumenten, och inte enbart till hela webbsidan.

Nu ska vi ta en titt på vilka inställningar är använda till att placera och positionera runt bakgrundsbilder, med början från enklaste ”background-image” property.

Lägga till bakgrundsbild

Background-image property används till för att lägga en bakgrund till ett element. Dess primära jobb är att ge exakt läge för bildfilen.

background-image
Values: URL (bildplats) /none/inherit
Default: none
Applies to: all elements
Inherits: none

Värdet background-image är en sort URL- behållare som håller bildens URL. URL relaterar till (X)HTML dokumentet där bilden ska in på, och inte stylesheet dokument.

Bakgrund i vårt första exempel är applicerad bakom hela webbsidan (body).

I body style lägger du ny regel:

background-image: url(cabbage_A.jpg);

Så. Klart. Nu har du lagd till bakgrundsbild.

Upprepa inte bakgrundsbilden

Har du möjligen stor bakgrundsbild och inte som i vårt exempel och vill att bilden inte ska upprepas utan endast visas en gång så skriver du bara till:

background-repeat: no-repeat;

Den ska in i body style, du kan lägga in det precis under

background-image: url(cabbage_A.jpg);

Du kan även begränsa bilden så att den enbart kopieras horisontellt (repeat-x) eller vertikalt (repeat-y). Använd inte det tillsammans annars saknar det betydelse.

background-repeat: repeat-x;
background-repeat: repeat-y;

Positionering av bakgrund

Har du en mindre bakgrundsbild som ska ligga på endast en specifik plats på webbsidan så kan du lägga till tidigare nämnda no-repeat kommandon och t.ex. background-position: left; vilket kommer då att positionera bakgrundsbilden högt upp på webbsidans högra kant.

Nu kan du med tidigare nämnda funktionen repeat-x dra ut på den lilla bakgrundsbilden så att den visas längst upp över hela sidan, men endast där uppe.

Bild ex.

Du kan nu använda background-position: och positionera bilden left, right bottom, bottom, center eller hur du vill. Bläddra upp för kodexempel.

Med en enkel kod som background-position: 200px 15px; kan du positionera bilden mycket mer specifikt, hur långt ner eller upp på webbsidan du vill ha den. Du kan även använda procentantal här istället för px. Ex. background-position: 100% 5%;

Kombinera bakgrundsfärg med bakgrundsbild

Nu skulle det vara smart om bakgrundsfärgen kombineras med bakgrundsbilden. Det gör vi därför i vårt exempel och tar nu ändrar bakgrundsfärgen genom att i body satyle lägga till background-color: BBE09F;

Det här blir resultatet.

Friställ bakgrundsbilen från webbsidan, gör den oberoende

Vad händer med bakgrundsbilden när användaren scrollar sidan? Ja, bakgrundsbilden följer vanligtvis med. Det kan i vissa fall vara snyggt att bakgrundsbilden inte påverkas när användaren scrollar sidan, bakgrundsbilden förblir densamma alltså oberoende av andra objekt på webbsidan.

background-attachment: fixed;

Statistik över vanliga skärmupplösningar

Per — Mon, 13 Dec 2010 10:52:01 +0000

Eftersom webbläsaren bara kan vara så stor som skärmupplösningen tillåter, så är det viktigt att kunna förutse och planera vilken som är den bästa upplösningen. Här kommer statistik över vilka skärmupplösningar som är vanliga här på whr.se. Se mer global statistik på w3schools.com.

Statistik över skärmupplösningar för whr.se

Källa Google Analytics.

Flytande layout

Även om du som webbdesigner kan tycka att din sida ser bra ut i en specifik fönsterstorlek så behöver du tänka på att användaren själv kan bestämma hur bred, smal, liten eller stor sidan ska vara. Du vet alltså inte om din sida kommer vara stor som användarens fulla skärmstorlek, eller liten efter personlig preferens, eller p.g.a. att användaren har flera sidor öppna samtidigt bredvid varandra.

Skulle det inte vara bra med en webbsida som anpassar sin egen storlek automatiskt efter användarens skärmstorlek, som t.ex. ikoner, mappar, dokument, och filer i en Windows fönster?

Den så kallade flytande layouten är mest lämpligt för sidor med något enklare design och framför allt textsidor. Vi har här ett exempel på kod som du kan använda för att testa funktionen och eventuellt implementera den på din webbsida. Ett färdigt exempel med html-kod kan laddas ner här.

Style sheets

Nu även på danska och norska

Per — Tue, 26 Oct 2010 15:02:45 +0000

En variant av whr.se finns nu även på danska och norska, genom webhotelanmeldelser.dk (danska) och webhotelltester.com (norska). Flera artiklar har översatts och många recensioner även så.

Antalet webbhotell är mycket färre i Danmark och Norge. Sverige har faktiskt förvånansvärt många aktiva webbhotell, många danska webbhotell har även etablerat sig här så som One.com och Surftown. Exempel på svenska webbhotell som etablerat sig i Danmark är dock få. Samma sak gäller Norge, endast svenska Strongbox har en norsk sajt. Som tur är finns alltid amerikanska webbhotell så som Hostgator, som fungerar i utmärkt i alla länder.

Tips och råd inför etablering av hemsida utomlands

Här är våra råd inför en etablering på Internet i till exempel Norge och Danmark om du funderar på detta.

Skaffa en .dk i Danmark och en .com i Norge. En .se adress i andra länder är ej att rekommendera.
.no adresser kräver ett företag registrerat i Norge. Snapback.se kan hjälpa dig registrera .no adresser via ombud.
Använd samma Webbhotell som du använder för din svenska hemsida.
Att översätta en sajt tar tid, även om du lämnar bort själva översättningen. Så var beredd på det.

I det stora hela tar dock en översättning väsentligt mycket kortare tid än det tagit att skapa modersajten. Resultatet kan därmed bli mycket bra med relativt lite jobb.

Grundkurs i SQL

Per — Fri, 02 Jul 2010 09:32:55 +0000

SQL står för Structured Query Language och är ett språk som används när du, användaren, ska ställa frågor till en databashanterare. Du använder alltså språket när du ska söka information i en databas. Att kunna hantera SQL är en fördel då det är det mest förekommande frågespråket i dagsläget. Det finns flera olika databasmotorer som stödjer SQL, en av de mest kända av dem är mySQL.

Mot Sql-databaser arbetar också php och asp.net, dessa två språk används annars främst för att bygga dynamiska hemsidor. En dynamisk hemsida är en sida vars innehåll ofta förändras, raderas och tilläggs. Asp.net kommer från ett programmeringsspråk medan php snarare är ett scriptspråk.

Nedan presenteras några av de vanligaste SQL-kommandona som finns. En viktig grundregel är att alla kommandon måste skrivas med versaler. Du bör också ha koll på att information given i bokstäver, som text och namn alltid anges inom apostrofer. Det gör inte siffror och nummer.

SELECT

När du öppnat databasen måste du berätta för den vilken typ av information det är du vill ta fram. Detta gör du genom att tala om vilka kolumner som ska aktiveras. Vi kan föreställa oss att du ska ta fram både för- och efternamn ur en adressbok. Det är då rimligen från kolumnerna med samma namn som informationen ska hämtas, då vi kan anta att det även finns fler kolumner innehållandes t.ex. adress, telefonnummer m.m.

För att aktivera de kolumner som du behöver för den information du kräver skriver du SELECT följt av mellanslag och de olika kolumnernas namn. Om vi antar att vi har en adressbok (tabell) i din databas ser det ut så här:

SELECT Fornamn, Efternamn FROM Adressbok

Vill du ha mer information fyller du således bara på med kolumnernas namn.

UPDATE

Om du måste förändra redan befintlig information i databasen använder du dig av UPDATE. Du måste alltid använda dig av kommandot WHERE i samband med att du använder dig av UPDATE, annars kommer inte databasen veta vad den ska uppdatera.

Om vi sedan föreställer oss att du ska uppdatera adressen på Anna Andersson i adressboken skriver du följande:

UPDATE Adressbok SET Address=’Hejgatan 7’
WHERE LastName=’Andersson’ AND FirstName=’Anna’

Nu vet databasen att det är Anna Andersson som ska få ”Hejgatan 7” tillagd som adress.

DELETE

Du kan självklart helt radera information. För att göra det använder du dig av begreppet DELETE. Tillvägagångssättet liknar det ovan mycket, skillnaden är egentligen att vi bara anger vad som ska raderas.

Säg att du vill radera alla som heter Andersson i efternamn, så skriver du på följande vis:

DELETE FROM Adressbok
WHERE Efternamn = ’Andersson’

INSERT

För att addera ny information på en ny rad till databasen använder du dig av INSERT INTO. Vi kan föreställa oss att du har träffat en kvinna som heter Marit Andersson och nu vill föra i henne i din adressbok.

INSERT INTO Adressbok (Fornamn, Efternamn) VALUES (’Marit’, ’Andersson’)

WHERE

När du ska hämta ett värde är du oftast intresserad av en viss kolumn. För att begränsa hämtningen till endast den kolumn som du är intresserad av använder du dig av kommandot WHERE. Det innebär att vi kan definiera var vi vill söka efter eller förändra information. Vi kan här använda oss av samma exempel som ovan vid DELETE.

DELETE FROM Adressbok
WHERE Efternamn = ’Andersson’

Vi måste berätta var databasen ska radera information, i det här fallet är det från efternamn och det specifika namnet Andersson.

AND

AND används för att kombinera två booleska uttryck. När du använder dig av AND får du TRUE som svar om både villkoren är sanna. Du kan använda dig av AND om du t.ex. bara vill ta fram de som heter Anna Andersson ur adressboken.

SELECT Fornamn, Efternamn FROM Adressbok
WHERE Fornamn=’Anna’
AND Efternamn=’Andersson’

Vi vill välja ut den informationen som finns om de/dem som både heter Anna och Andersson, därför används AND.

OR används för att kombinera två villkor. Du kan använda dig av OR när du vill ta fram de personer i adressboken som heter t.ex. Anna eller Kalle.

SELECT Fornamn, Efternamn FROM Person
WHERE Fornamn=’Anna’
OR Efternamn=’Andersson’

I det här exemplet vill vi ta fram de som heter Anna i förnamn eller Andersson i efternamn.

ORDER BY

När du sökt något som finns på mer än en rad i databasen kommer du självklart att få flera rader med information presenterad. Eftersom de inte alltid ligger i den ordning du vill ha dem måste du tala om för databasen i vilken ordning du vill få dem presenterade.

Om du t.ex. vill att ditt resultat ska sorteras efter efternamn skriver du:

ORDER BY Efternamn

Efternamnen kommer nu att presenteras i bokstavsordning. Detta går att reglera med hjälp av kommandot DESC (som står för descending: fallande; detta är motsatsen till kommandot ASC som betyder ascending: stigande). Hela satsen ser då ut så här:

ORDER BY Efternamn DESC

Du har nu lite grunder för att kunna söka i en databas som t.ex. mySQL med hjälp av SQL. Se fler kommandon på w3cschools SQL sida.