För att skapa en iPhone-applikation bör du ha åtminstone grundläggande kunskaper i html, css och javascript. Om du vill lära dig mer i dessa ämnen rekommenderas ett besök till W3Schools Online Web Tutorials (http://www.w3schools.com).
En iPhone web app kan i bestå av följande dokument:
- En html-sida
I detta dokument finns byggstenarna som din web app ska bestå av, såsom textstycken, bilder, och listor.
- En css-fil
Här placeras reglerna för hur din applikation ska se ut: var saker ska placeras, vilka färger som ska användas, hur stora saker och ting ska vara och så vidare.
- I css-filen kan du även bestämma vilka eventuella övergångar, animationer och transformeringar som ska användas i din web app. Vi återkommer till detta i en senare del av vår web app-guide.
- En javascript-fil
Javascript är ett mycket viktigt verktyg för dig som vill göra web apps. Du kan bland annat använda javascript för att hämta och ladda in information i din applikation samt starta och stoppa visuella effekter.
Det räcker dock inte med att använda traditionell webbkod för att skapa den speciella iPhone-känsla som en web app bör förmedla. Här ger vi några tips på vad du kan göra för att få hemsidan att likna ett installerat program.
Visa i rätt storlek
När man surfar på en vanlig hemsida med iPhones webbläsare Safari så visas endast en del av hemsidan. Användaren kan sedan zooma in valda delar.
Innehållet på sidan bör dock visas i skala 1:1 och användaren bör ej kunna zooma. Du åstadkommer detta genom att lägga in följande rad i din html-kod, förslagsvis mellan head-taggarna:
<meta name="viewport" user-scalable=no; initial-scale=1.0; maximum-scale=1.0; width=device-width;" />
Visa i fullskärm
När en användare surfar in på din hemsida kommer en viss del av sidutrymmet att upptas av olika fält. Längst upp finns statusfältet som exempelvis visar batteritid och täckning. Under statusfältet finns webbläsarens adressfönster, och längst ner visas webbläsarens knappfält, som bland annat innehåller en back-knapp.
Det går att dölja allt detta och använda hela skärmutrymmet till din applikation. Det förutsätter dock att användaren har sparat hem ett web clip (en hemsidesikon) för din web app till sin Home-skärm, och öppnar din web app från Home-skärmen.
För att ta bort adressfältet och knappfältet behöver du bara lägga till följande i din html-kod (förslagsvis mellan taggarna <head> och </head>):
<meta name="apple-mobile-web-app-capable" content="yes" />
Även om du lägger in ovanstående kod så återstår en sak på skärmen: statusfältet längst upp. Du kan göra statusfältet lite mindre framträdande med hjälp av följande kod:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Kodraden ovan fungerar bara om du först har valt att dölja Safaris fält. Du behöver alltså lägga in båda kodraderna i detta avsnitt, så här:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Dölj adressfältet
Det går att dölja webbläsaren Safaris adressfält även om besökaren inte har sparat ett web clip till din sida. Detta åstadkommer du genom att använda följande JavaScript-funktion:
function hideSafariAddressBar() {
window.scrollTo(0, 1);
}
Funktionen placeras med fördel i en extern javascript-fil, exempelvis med namnet javascript.js. Den filen kan inkluderas genom att du skriver in följande rad i html-dokumentet, förslagsvis mellan <head>-taggarna:
<script type="text/javascript" src="javascript.js"></script>
Funktionen kan sedan anropas från html-sidans <body>-tagg, så här:
<body onload="hideSafariAddressBar()">
(OBS! Funktionen hideSafariAddressBar() fungerar endast om sidan har fyllts med så pass mycket innehåll att den går att skrolla vertikalt sett. Funktionen kommer inte att göra någonting om det finns för lite innehåll på sidan.
Användaren kan göra adressfältet synligt igen genom att skrolla uppåt med fingret.
Nästa gång ger vi fler tips på hur du kan öka iPhone-känslan i din web app.