APP DESIGN

-

4. De praktijk

Maak in Dreamweaver een nieuwe pagina aan:

a. kies voor bestand --> nieuwe pagina --> pagina uit voorbeeld --> mobiele starters:

Je kunt nu kiezen uit drie mogelijkheden:

1. CDN (Content Delivery Network)

hierbij staan de javascript bestanden (.js) op een externe server

2. jquery mobile (lokaal), de javascript bestanden worden in een aparte map op je site gezet

3. jquery mobile met thema, idem maar met uitgebreide CSS

Uiteraard is mogelijkheid 1. het makkelijkste, maar voor de goede werking van je app heb je wel een internetverbinding nodig.

b. begin met het opslaan van deze pagina als "index", doe dit in een nieuwe map en noem deze map "app".

Als je gekozen hebt voor mogelijkheid 2 of 3 vraagt Dreamweaver vervolgens of er aantal bestanden gekopieerd moeten worden. Zeg ja. Dreamweaver zet deze bestanden neer in een mapje jquery-mobile. Let er op dat dit mapje ook upgeload wordt. Pijltje naar boven.

Je hebt nu het volgende beeld:

We gaan nu het scherm aanpassen aan het formaat van de tablet of smartphone.

Ik gebruik de samsung tab 2, deze heeft een schermgrootte van 1280 x 800 pixels.

Dit aanpassen doe je hier:

 

Je hebt nu een app die bestaat uit vier pagina's. Ieder met een koptekst en een voettekst.

Aanpassen aan het mobiele apparaat

Om er voor te zorgen dat de app goed afgebeeld wordt op verschillende mobiele apparaten, moeten we een meta-tag toevoegen. Dit gebeurt tussen de head-tags.

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

Je krijgt dan het volgende beeld:

<head>
<meta charset="utf-8">
<title>jQuery Mobile-webtoepassing</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>

of

<head>
<meta charset="utf-8">
<title>jQuery Mobile-webtoepassing</title>

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="../jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="../jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="../jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="/phonegap.js" type="text/javascript"></script>
</head>

 

 

Opdracht:

1. Voer bovenstaande handelingen uit. Controleer op internet of de app inderdaad werkt. Je moet via de hyperlinks naar de verschillende pagina's kunnen.

2. Stel de schermgrootte van Dreamweaver in op het apparaat waar de app voor wilt maken. Zoek eventueel de schermgrootte op met google

 

 

 

 

 

 

 

©jw webdesign