Home | Reviews | Tips | Shop | Top 10 | Channel Navigator | Nieuwsbrief | Forums
Palmclub webclipping tutorial: modellen.pqa
Door Gonny van der Zwaag (gonny@palmclub.nl) Klik op de plaatjes voor een vergrote versie

Deze pagina beschrijft hoe je een zgn. self-containing webclipping applicatie kunt maken, d.w.z. een applicatie waarbij geen verbinding wordt gemaakt met het internet. Het is onderdeel van een tutorial over het programmeren van PQA's.

Beschrijving van de applicatie
De PQA biedt een overzicht van Palm- en Handspring-handhelds die momenteel op de markt zijn. Op verzoek van de gebruiker moet een foto van het apparaat worden getoond en worden een aantal technische specificaties gegeven (type processor, afmetingen, gewicht, hoeveelheid RAM, etc). Alle gegevens en grafische bestanden worden opgenomen in de PQA zelf.

Net als bij websites is het ook bij webclipping-applicaties van belang om goed na te denken over de navigatiestructie en de wijze waarop informatie over pagina's wordt verdeeld. Volgens de ontwerprichtlijnen van Palm moet je voorkomen dat de gebruiker teveel moet scrollen. Te weinig informatie op een pagina, waardoor de gebruiker steeds moet doorklikken, is ook niet aan te raden. Wil je scrollen voorkomen, dan ben je vanwege de titelbalk beperkt tot een gebied van 153 x 144 pixels. Dat komt neer op zo'n 10 tot 11 regels normale tekst.

Ontwerpbeslissingen
De index-pagina wordt het startpunt: hierop komt een opsomming van beschikbare modellen. In feite is dit een lijst van hyperlinks, die verwijzen naar vervolgpagina's waarop de details per model zijn uitgewerkt.
De index-pagina noemen we index.html. Er moeten 10 vervolgpagina's worden gemaakt, die worden genoemd naar het betreffende model: palm3c.html, palmm505.html, visorplatinum.html, enzovoort. Verder maken een about-pagina die about.html zal worden genoemd en details bevat over de maker en de bedoeling van de applicatie.
Vanaf de index-pagina zijn alle overige pagina's te bereiken. Op elke pagina komt in de voettekst een hyperlink "Terug naar index" en een hyperlink "About" toegevoegd. Overigens heeft elke PQA standaard een knop om terug te bladeren, zodat je altijd weer op de hoofdpagina kunt terugkeren.

De pagina's waarop de modellen zijn uitgewerkt, bevatten een foto van de handheld, gevolgd door een tabel met een opsomming van gegevens als prijs, gewicht, OS-versie en jaar waarin het model gelanceerd is. De naam van het model wordt reeds vermeld in de titelbalk en zal daarom op het scherm niet apart meer worden genoemd. Het plaatje krijgt een maximale hoogte van 70 pixels en wordt in 16-bit kleur uitgevoerd. Beschik je niet over een Palm met 16-bit kleurenscherm, dan kun je in WCA Builder ook kiezen voor een applicatie in puur zwart/wit, 2-bit grijs, 4-bit grijs of 8-bit kleur.
Omdat niet alle informatie op de pagina past, zal de gebruiker moeten scrollen. Dit is niet helemaal zoals het hoort: in de ontwerprichtlijnen van Palm wordt aangeraden om scrollen zoveel mogelijk te voorkomen. We zouden dit oplossen door de foto en de begeleidende tekst op twee verschillende pagina's te plaatsen, maar persoonlijk vind ik het mooier als alle informatie omtrent het model op dezelfde pagina staat. Voor de gebruiker is aan de scrollbar duidelijk te zien dat er onderin beeld nog meer informatie beschikbaar is.

Benodigdheden
We gaan er vanuit dat de WCA Builder en de teksteditor al aanwezig zijn. Voor het maken van deze applicatie heb je verder nog nodig:

             

         

  • Plaatjes van Palm- en Handspring-modellen. Kies voor gif- of jpeg-bestanden, bitmaps zijn niet zo geschikt - mede vanwege omvang van de bestanden. Op internet zijn voldoende foto's te vinden van de verschillende handhelds, onder andere op de websites van Palm en Handspring zelf. Gebruik een grafisch programma, bijvoorbeeld PhotoEditor van Microsoft, om het formaat van de foto's te verkleinen tot circa 70 x 70 pixels.

  • Informatie over de verschillende Palm-modellen. Hiervoor heb ik gebruik gemaakt van een pagina met een overzicht van handhelds op de Palmclub website, http://palmclub.nl/tips/modellen.shtml.
  • Een plaatje waarvan een icoon kan worden gemaakt. Met een tekenprogramma heb ik een PDA-symbooltje van 24 x 24 pixels getekend en als gif-bestand opgeslaan. De maximale afmetingen voor een icoon zijn 22 x 32 pixels. De straling aan de rechterzijde van het plaatje geeft aan dat het om een PQA gaat.
De HTML-code
Hieronder vind je de HTML-code voor de index-pagina. De code van de about-pagina en de pagina waarop de Palm m505 nader wordt uitgewerkt, vind je hier. De pagina's waarop de andere modellen worden uitgewerkt, zien er uiteraard identiek uit.
Wil je de applicatie namaken, dan kun je de complete verzameling HTML-pagina's en plaatjes hier downloaden.

<html>
<head>
<title>Palm-modellen</title>
<meta name="palmcomputingplatform" content="true">
<meta name="HistoryListText"content="true">
<meta name="Locallcon" content="palms.jpg">
<meta name="PalmLauncherRevision" content="1.0">
</head>
<body>
  <img src="palms.jpg" align="center"><br>
  <h1>Overzicht Palm-modellen</h1>
  <p>
  <table>
  <tr>
  <td>
    <a href="palmm505.html">Palm m505</a><br>
    <a href="palmm500.html">Palm m500</a><br>
    <a href="palmm105.html">Palm m105</a><br>
    <a href="palmm100.html">Palm m100</a><br>
    <a href="palmvx.html">Palm Vx</a><br>
    <a href="palm3xe.html">Palm IIIxe</a><br>
    <a href="palm3c.html">Palm IIIc</a>
  </td>
  <td>
    <a href="visoredge.html">Visor Edge</a><br>
    <a href="visorplatinum.html">Visor Platinum</a><br>
    <a href="visorprism.html">Visor Prism</a><br>
    <a href="visordeluxe.html">Visor DeLuxe</a>
    <p><br>
    <a href="about.html">About</a>
    </td></tr></table>
</body>
</html>

Compileren
Start WCA Builder, open het index-bestand en kies File, Build PQA.
Het hiernaast afgebeelde scherm verschijnt. Voer als bestandsnaam Modellen.pqa in, kies voor 16-bit kleur (of grijstinten, indien gewenst) en geef de gewenste PQA-versie aan. Als je versie 2.0 kiest, is de applicatie alleen geschikt voor handhelds met PalmOS 4.0 os hoger, dus je kunt het beste versie 1.0 laten staan.
Klik op de knop Icons, Large. Hier kun je aangeven welk plaatje als icoon aan de applicatie zal worden toegevoegd. Kies het bestand palmicon.gif of een zelfgekozen plaatje in bitmap-, gif- of jpeg-formaat. Het plaatje mag niet meer dan 22 x 32 pixels groot zijn.
Klik OK en tenslotte op Build. Sleep de zojuist gecompileerde PQA naar de Palm Emulator of installeer het op je Palm en het resultaat wordt zichtbaar.

Ga terug naar de webclipping tutorial.

Home | Reviews | Tips | Shop | Top 10 | Channel Navigator | Nieuwsbrief | Forums

Laatst gewijzigd:     Printvriendelijke versie