Programmera i PHP/Skapa hemsidor som fungerar som appar med php

Många tror att en app och en hemsida anpassad för mobiler är samma sak, men det är fel. Enkelt sagt är en app ett litet program man kör i telefonen medan en hemsida kräver internetuppkoppling för att nå. Appen körs direkt i telefonen medan hemsidan nås med mobilens surfprogram. Bägge sätten har både för- och nackdelar. Problemet är att du inte kan göra appar med php, men det går bra att göra anpassade hemsidor för mobiler med hjälp av php, speciellt om du behöver kontakt med en kraftfull databasmotor som t.ex. MySQL.

Med ”affärsnätverk” nedan menas: iTune, Google Apps, Samsung apps, Windows store och andra aktörer som säljer och/eller distribuerar appar åt tillverkarna.

App – fördelar och nackdelar

Fördelarna med att utveckla en app är:

1. En app går snabbare än en hemsida i telefonen.
2. En app distribueras genom Googles, Apples eller Microsofts affärsnätverk.
3. En app behöver ingen koppling till Internet för att köras.
4. En app i en mobil går att starta med ett enda klick på en ikon.
5. En app kan använda inbyggda verktyg i mobilen som gyroskopet eller kameran.

Nackdelarna med att utveckla en app är:

1. En app kostar mer pengar att utveckla.
2. En app måste utvecklas med olika programmeringsspråk för olika plattformar.
3. De olika affärsnätverken tar betalt för att distribuera appen.
4. De olika affärsnätverken godkänner inte vilka appar som helst.
5. En app kräver manuell nedladdning från de olika affärsnätverken.

Mobilanpassad hemsida – fördelar och nackdelar

Fördelarna med en mobilanpassad hemsida är:

1. En sida fungerar till alla olika mobiler, men även surfplattor och datorer.
2. Många kan tekniken och en sida är billig att utveckla.
3. Sökmotorer, andra sidor och bloggar länkar till den och gör den lätthittad.
4. Ingen annan än du avgör- och godkänner innehållet.
5. Det krävs inget affärsnätverk för distributionen.
6. Har du redan mjukvara för att göra hemsidor kan du använda samma för en mobilanpassad sida.

Nackdelarna med en mobilanpassad hemsida är:

1. Den är inte skriven i den kod mobilen är anpassad för och går därför vanligen långsammare.
2. Det går inte att komma åt och använda mobilens inbyggda verktyg som t.ex. kameran.
3. Man får ingen draghjälp av andra appar när användare är ute efter en speciell funktion utan att bry sig om någon särskild app.

Ändringar i head-taggen

Så, då är du redo att börja skapa en hemsida anpassad speciellt för mobiler och surfplattor. För att det skall fungera så bra som möjligt måste vi föra in några begrepp som inte har något alls med php att göra. Nu är det ingen djuplodande beskrivning utan du får själv söka mer information om du vill skaffa dig mer kunskaper än vad som beskrivs här.

Viewport

En viewport är egentligen den yta ett surfprogram ritar upp en hemsida på i minnet innan den visas upp för surfaren. När man skriver html kod har det ingen större betydelse eftersom skärmytan vanligen räcker mer än väl, och det gör inget om man måste scrolla ut litet för att se innehåll som är större än ytan.

En mobil fungerar inte på samma sätt. En användare som inte ser hela ytan får istället lov att förminska hela viewportbilden vilket i sin tur även förminskar text och annat innehåll tills det blir oläsbart på mobilens skärm.

För att komma till rätta med det problemet finns meta-taggen viewport. Den sätts in i sidhuvudet innan body-taggen:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Detta säger oss att det som läggs ut på sidan skall gå från kant till kant inom mobilens- eller surfplattans sidokanter. Den skall vara 100% och kan inte förstoras.

 width=device-width  Betyder: lika bred som fönstret
 initial-scale=1.0   Betyder: 100% när det visas första gången för surfaren
 maximum-scale=1.0   Betyder: sidan går inte att förstora mer

 
<meta name="viewport" content="width=800, initial-scale=1.0, maximum-scale=2.0">

Skriver du så här istället är den 800 pixlar bred, oavsett skärmens bredd och går att zooma upp till 200%, standardvärde är 1.6 för maximum-scale. Värdet 800 motsvarar den minsta bredd skärmen kan ha och samtidigt ha skarp text, inte den största. 980 bredd är standardvärde i HTML5. Bredden kan inte understiga 200.

Eftersom du inte vet hur bred skärm mobilen har, eller om man håller mobilen på höjden eller bredden, är det enklast att aldrig beskriva exakta pixlars bredd. Däremot kan du låta användarna zooma om de vill.

Bilder skalas litet olika och webdesigners brukar göra dem 1.5 gång bredare än den tänkta skärmbredden för att de inte skall bli grumliga.

Andra inställningar

Det går att ställa in höjden också med:

height=device-height eller height=600 t.ex

Normalt sett behöver inte höjden ändras eftersom användare inte har särskilt mycket emot att scrolla sig neråt, så länge innehållet ryms mellan höger- och vänster kant.

Det går även att lägga till värdet:

user-scalable=yes eller user-scalable=no 

om man vill vara helt säker på om surfaren skall kunna, eller inte kunna, förstora eller förminska ytan. Vill man begränsa utzoomning kan man även lägga till värdet:

minimum-scale=0.25

eller något liknande värde under 1.0. I det här fallet går det alltså att minska ytan så att det syns fyra gånger så mycket i fönstret. 0.25 är standardvärde.

Ställa om storleken dynamiskt

Anta att du bara vill ha två storlekar på en sida beroende på om användaren håller telefonen med kort- eller långsidan uppåt, hur gör man då? Det går inte med php, men ett enkelt javascript kan användas. Skriv in det i sidhuvudet alldeles under meta-taggen så ställs rätt storlek in innan sidan laddats. Om användaren vänder mobilen efteråt måste sidan laddas om på nytt för att ändringarna skall träda i kraft:

<meta id="testViewport" name="viewport" content="width = 380">

<script>
if (screen.width > 740) {
        var mvp = document.getElementById('testViewport');
        mvp.setAttribute('content','width=740');
}
</script>

Scriptet förutsätter att användarnas mobil har en skärm som är minst 380 pixlar bred ner den hålls på högkant och mer än 740 pixlar bred om den hålls med långsidan uppåt.

CSS

Är det så att du designar en sida där du själv ställer in bredden på all text behövs inte taggarna här ovanför. Är bredden 100% är den även 100% i en mobil eller på en surfplatta oavsett bredd. Texten är således inget problem. Däremot blir bilder ett problem eftersom de är så stora att de kan krypa iväg utanför kanten. Om man bara vill begränsa storleken på bilderna men inget annat gör man det enklast med en style-regel:

<style>
img{
   max-width:100%;
   height:auto;}
</style>

Skriv in style-taggarna i sidhuvudet innan body. Nu kommer ingen bild att visas utanför kanten oavsett vilken bredd skärmen har. Samtidigt blir inga bilder deformerade eftersom höjden anpassas utifrån den förändrade bredden, helt automagiskt.