Tools | tech | trends: Dreamweaver, jQuery Mobile
Expert: Mark Shufflebottom
Tutorialbestanden: downloaden
Het mobiele landschap is een ondoordringbaar mijnenveld. Er zijn zoveel verschillende apparaten en schermgroottes, dat het zo goed als onmogelijk is om te weten waar je moet beginnen wanneer je een site wil maken voor mobiele apparaten. Er gloort echter hoop aan de horizon. jQuery heeft altijd al het motto “schrijf minder en doe meer” gehad en stort zich nu met dat motto op de mobiele omgeving. Ze hebben met PhoneGap een progressief framework voor het ontwikkelen van mobiele websites, webapps en native apps in handen. Het jQuery Mobile-framework ondersteunt lay-outs en widgets die geoptimaliseerd zijn voor touchscreens voor een breed scala apparaten. Bovendien werkt het dankzij graceful degradation ook deels met oudere browsers samen.
In deze tutorial gaan we ons het framework eigen maken en kijken we hoe pagina’s gebouwd worden op basis van één bestand. Zo beperk je het verkeer naar de server. Dit is misschien even wennen wanneer je gewend bent traditionele sites te bouwen – en wellicht heb je wat overtuiging nodig –, maar we hebben hier goede redenen voor. Het zorgt voornamelijk voor een soepelere eindgebruikerservaring en dat is uiteindelijk toch waar het om draait. Wanneer er externe data of pagina’s vereist zijn, kunnen die geladen worden via AJAX. Dat leggen we op het einde nog uit.
“Het jQuery Mobile-framework ondersteunt lay-outs en widgets die geoptimaliseerd zijn voor touchscreens voor een breed scala apparaten”
01 Beginnen
Kopieer de map ‘start’ vanuit de download naar je harde schijf. Open structure.html in Dreamweaver (of een andere code-editor) en bekijk de structuur van dat bestand eens goed. Dit zal de basis worden van de pagina’s die we met jQuery Mobile maken. Sla het daarom op als index.html in dezelfde map.
001 <div data-role=”page”> 002 <div data-role=”header”> 003 <h1>Heading</h1> 004 </div> 005 <div data-role=”content”> 006 <p>Content</p> 007 </div> 008 <div data-role=”footer”> 009 <h4>Footer</h4> 010 </div> 011 </div>
<span id="more-3259"></span>
02 jQuery Mobile gebruiken
Om jQuery Mobile te gebruiken hoeven we niks te downloaden. Je kunt onderstaande code gewoon in de <head>-sectie van je document zetten. Het stijlelement onderaan is van onszelf en passen we verderop toe. Sla het bestand weer op en bekijk het in een browser op je telefoon.
001 <link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css” />
002 <script src=”http://code.jquery.com/jquery-1.4.3.min.js”></script><script src=”http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js”></script>
003 <style type=”text/css”>.img {padding-left:70px;}</style>03 Homepagina
Verwijder de paragraaftag in de Content-sectie en voer daar onderstaande code in. Deze code voegt een logo en menulijst toe. De navigatielinks verwijzen naar #About, #Portfolio et cetera – dit worden straks id’s binnen hetzelfde document. De laatste link verwijst naar een extern document om te laten zien hoe jQuery Mobile met behulp van AJAX links onderschept en laadt.
001 <img src=”img/logo.png” width=”300” height=”211” alt=”agile logo”> 002 <ul data-role=”listview” data-inset=”true”> 003 <li><a href=”#About”>About</a></li> 004 <li><a href=”#Portfolio”>Portfolio</a></li> 005 <li><a href=”#Contact”>Contact</a></li> 006 <li><a href=”news.html”>News</a></li> 007 </ul>
04 Stijl toevoegen
Voeg binnen <div data-role=”page”> de tekst theme=”b” toe. Dit laadt een specifiek thema van jQuery Mobile. Sla de pagina op en test hem in je browser. Je kunt alle thema’s van a tot e uitproberen. Wij vinden thema b het beste bij dit project passen, maar gebruik gerust een ander.
001 <div data-role=”page” data-theme=”b”>
05 Homepagina aanpassen
Zoals je in het ontwerp kunt zien, hebben we de titelbalk en de footer eigenlijk niet nodig. Duik dus in de code en verwijder <div data-role=”header”> en <div data-role=”footer”> en hun sluittags. Nu zijn we klaar om de andere pagina’s toe te voegen aan ons ontwerp. Kopieer de structuur uit stap 1 van structure.html. De volledige code is terug te vinden in de download.
001 <div data-role=”page” data-theme=”b”> 002 <div data-role=”content”> 003 <img src=”img/logo.png” width=”300” height=”211” alt=”agile logo”> 004 <ul data-role=”listview” datainset=”true”> 005 <li><a href=”#About”>About</a></li> 006 <li><a href=”#Portfolio”>Portfolio</a></li> 007 <li><a href=”#Contact”>Contact</a></li>
06 Plak de structuur
Plaats je cursor achter de laatste <div>-tag in het document en plak de structuur die je net gekopieerd hebt. Verander <div data-role=”page”> in <div data-role=”page” data-theme=”b”>. Het belangrijkste onderdeel is de id. Hier zal de ‘About’-knop van het menu namelijk naar verwijzen. Sla alles op en test het in je browser. Je ziet ook een automatisch aangemaakte knop ‘Back’.
001 <div data-role=”page” data-theme=”b” id=”About”>
07 Herhalen
Herhaal stap 6 nog twee keer, maar dan nu met de id’s Portfolio en Contact. Alle pagina’s zouden het nu moeten doen. Test het gerust uit. Verander ook de ‘About’-sectieheader, zodat de juiste titel wordt weergegeven. In de code kun je zien dat we ook een logo-icoontje toevoegen om de identiteit van de site en de continuïteit van pagina tot pagina te waarborgen.
001 <div data-role=”header”> 002 <h1>About <img src=”img/a.png” width=”20” height=”13” alt=”agile mini logo”></h1> 003 </div>
08 About content
In de Content-sectie van de About-id voeg je de onderstaande code toe. We voegen een <h3>-tag en wat voorbeeldtekst – die je zelf mag bedenken – toe. Nu je hier toch bezig bent, kun je om de pagina af te maken – als je dat wilt – een copyrightsymbool en -informatie aan de footer toevoegen.
001 <h3>Agile Design Solutions</h3> 002 <p><img src=”img/man.png” alt=”Man” width=”100” height=”207”align=”right”> Dummy text</p>
09 Paginaovergangen
Je hebt de overgangen tussen de pagina’s vast al opgemerkt. Deze kun je heel gemakkelijk zelf aanpassen. In de code kun je zien dat je data-transition=”naam van de overgang” kunt toevoegen aan de <a>-tag. Voeg wat overgangen toe aan je hoofdmenu op de homepagina. De overgangen worden herkend door alle mobiele WebKit-browsers.
001 <li><a href=”#About” data-transition=”flip”>About</a></li> 002 <li><a href=”#Portfolio” data-transition=”slideup”>Portfolio</a></li> 003 <li><a href=”#Contact” data-transition=”fade”>Contact</a></li>
10 Portfolio
Net als eerder zakken we weer af in het document. We gaan op zoek naar het deel met de id Portfolio. Verander de <h1>-tag zodat de juiste sectie aangegeven wordt. Voeg ook hier het icoontje toe om de identiteit van de site te waarborgen.
001 <div data-role=”header”> 002 <h1>Portfolio <img src=”img/a.png” width=”20” height=”13” alt=”agile mini logo”></h1> 003 </div>
11 Portfoliolijst
We gaan een lijstoverzicht maken dat het portfoliowerk laat zien. Deze lijst zal in tegenstelling tot de het menu op de homepagina de hele breedte van de browser gebruiken. Voeg onderstaande code toe aan de contentsectie van het portfolio. We kunnen zelf scheidingen aanbrengen tussen de lijsten. Hier laten we de bezoekers weten dat dit het meest recente werk in het portfolio is.
001 <div data-role=”content”> 002 <ul data-role=”listview” datadividertheme=”b”> 003 <li data-role=”list-divider”>Latest Work</li> 004 </ul> 005 </div>
12 Portfoliocontent
Zet onderstaande code voor de sluittag </ul>. Zo creëer je een projectthumbnail als plaatje voor in de lijst. De tekst bestaat uit een omschrijving en een kop. Zo weet de lezer wat het portfolio-item inhoudt. Herhaal deze code twee keer en verander de afbeelding in thumb2.jpg en thumb3.jpg.
001 <li class=”img”><img src=”img/thumb1.jpg” alt=”project thumbnail” class=”ui-liicon”/> 002 <h3>iPad Digital Publishing</h3> 003 <br> 004 Mobile tablets are becoming increasingly important areas to target for traditional print media and our solutions have worked for. 005 </li>
13 Feedback
Nu gaan we de Contact-sectie maken. We veranderen de kop – zoals we al vaker gedaan hebben – naar de juiste titel en voegen een icoontje toe. We voegen een formulier aan de content toe. Zo kunnen we gegevens van de gebruiker ontvangen. Gelukkig heeft jQuery Mobile een aantal formulieren zo aangepast dat ze gemakkelijker met een touchscreen aangestuurd kunnen worden.
001 <div data-role=”header”> 002 <h1>Contact <img src=”img/a.png” width=”20” height=”13” alt=”agile mini logo”></h1> 003 </div> 004 <div data-role=”content”> 005 <form action=”#” method=”get”> 006 </form> 007 </div>
14 Tekstvelden
Zet onderstaande code binnen de formuliertags die je net hebt toegevoegd. Als eerste geven de gebruikers aanwijzingen, daarna maken we twee invoervelden. Het eerste invoerveld is een standaard tekstveld en het tweede een tekstgebied van meerdere regels. Sla je bestand op en probeer het uit. Wanneer je het tekstveld aanraakt, komt het schermtoetsenbord tevoorschijn. De volledige code is terug te vinden op de cd.
001 <p>We want to hear from you!</p> 002 <div data-role=”fieldcontain”> 003 <label for=”name”>Name:</label> 004 <input type=”text” name=”name” id=”name” value=”” /> 005 </div> 006 <div data-role=”fieldcontain”> 007 <label for=”textarea”>Address:</label>
15 Schuifknoppen
Je kent die hippe Aan/Uit-knoppen uit de UI van de iPhone vast wel. Je hoeft niet langer jaloers te zijn, want jQuery Mobile biedt je de mogelijkheid om ze ook te gebruiken. Voeg deze code toe voordat je het formulier sluit. Zo voeg je je eigen Aan/Uit-knop knop toe, maar wij gebruiken deze voor een Ja/Nee-optie.
001 <div data-role=”fieldcontain”> 002 <label for=”slider2”>Do you want regular updates:</label> 003 <select name=”slider2” id=”slider2” data-role=”slider”> 004 <option value=”no”>No</option> 005 <option value=”yes”>Yes</option> 006 </select> 007 </div>
16 Aanvinkvakjes
Voor veel formulieren is het noodzakelijk dat er meerder opties gekozen kunnen worden. Daar zijn aanvinkvakjes handig voor, want in tegenstelling tot keuzerondjes kun je hiermee wel meerder opties selecteren. We gebruiken ze hier om te kijken in welke diensten een potentiële klant geïnteresseerd is. Alle <div>-tags om elke formulieroptie bevatten de data-role=”fieldcontain”. Deze geeft aan hoe jQuery Mobile met dit deel om moet gaan. De volledige code is terug te vinden op de cd.
001 <div data-role=”fieldcontain”> 002 <fieldset data-role=”controlgroup”> 003 <legend>Choose services you are interested in:</legend> 004 <input type=”checkbox” name=”checkbox-1a” id=”checkbox-1a” class=”custom” /> 005 <label for=”checkbox-1a”>iOS</label> 006 <input type=”checkbox” name=”checkbox-2a” id=”checkbox-2a” class=”custom” /> 007 <label for=”checkbox-2a”>Android</label> 008 <input type=”checkbox” name=”checkbox-3a” id=”checkbox-3a” class=”custom” />
17 Keuzes, keuzes
Een andere manier om informatie van gebruikers te krijgen is dus het keuzerondje. Je bezoekers gebruiken een mobiel apparaat, dus zorg ervoor dat ze het toetsenbord zo min mogelijk hoeven te gebruiken. Keuzerondjes zijn ideaal om een enkel antwoord te krijgen op een meerkeuzevraag. Zet deze code achter de vorige om keuzerondjes aan je formulier toe te voegen. De volledige code is terug te vinden op de cd.
001 <div data-role=”fieldcontain”> 002 <fieldset data-role=”controlgroup”> 003 <legend>How did you hear of us:</legend> 004 <input type=”radio” name=”radio-choice-1” id=”radio-choice-1” value=”choice-1” checked=”checked” /> 005 <label for=”radio-choice-1”>Online</label> 006 <input type=”radio” name=”radio-choice-1” id=”radio-choice-2” value=”choice-2” /> 007 <label for=”radio-choice-2”>Friend</label> 008 <input type=”radio” name=”radio-choice-1” id=”radio-choice-3” value=”choice-3” />
18 Verzenden
Nu alles op zijn plek staat willen dat je gebruikers de gegevens kunnen verzenden. Daarom voegen we onder aan het formulier een verzendknop en een annuleerknop toe. Wanneer dit gedaan is, zijn alle onderdelen af. Sla je werk op en test alle onderdelen vanaf een mobiel apparaat. Onderzoek hoe makkelijk je de verschillende elementen met je vinger kunt aansturen.
001 <div class=”ui-body ui-body-b”> 002 <fieldset class=”ui-grid-a”> 003 <div class=”ui-block-a”><button type=”submit” data-theme=”d”>Cancel</button></div> 004 <div class=”ui-block-b”><button type=”submit” data-theme=”a”>Submit</button></div> 005 </fieldset> 006 </div>
19 Naar buiten
Als je terugkijkt naar het oorspronkelijke menu uit stap 3, zie je dat er voor de nieuwspagina buiten het document wordt verwezen. We hebben deze pagina voor je gemaakt, maar als je deze bekijkt zie dat hij niet afwijkt van wat we hier hebben gemaakt. In het kader leggen we uit wat er allemaal gebeurt, zodat je snapt hoe het framework werkt.
001 <li><a href=”news.html”>News</a></li>
20 Knop toevoegen 1
Om zelf knoppen toe te voegen aan de toolbar moeten we eerst de homepagina een id geven. Zo kun je er handmatig naar toe navigeren. Zoek de eerste div die de data-role=”page” heeft. Daar voeg je de id=”home” toe. Hieronder zie je hoe dat er uitziet. Daarna ga naar de header-sectie van de About-pagina.
001 <div data-role=”page” data-theme=”b” id=”home”>
21 Knop toevoegen 2
Nu kunnen we de data-position=”inline” aan de header toevoegen, gevolgd door een regel waarin we de link toevoegen. We kunnen – zoals je hieronder kunt zien – zelfs het icoontje voor de knop aanpassen. Zo bouw je een unieke interface die aansluit bij de inhoud. Dit icoontje past bijvoorbeeld goed bij een grid-homepage.
001 <div data-role=”header” data-position=”inline”> 002 <a href=”#home” data-role=”button” dataicon=”grid” data-back=”true” data-theme=”e” >Back</a> 003 <h1>About <img src=”img/a.png” width=”20” height=”13” alt=”agile mini logo”></h1> 004 </div>
22 Tekstblok
Je kunt iets vergelijkbaar doen wanneer je zelf een tekstblok aan een pagina wilt toevoegen. We voegen het hier toe aan de About-sectie en geven het de gele kleur van het e-thema mee. Zo lijkt het op een Post-it en trek je de aandacht van de lezer. Sla nu alles voor de laatste keer op en test het nog een keertje.
001 <div data-role=”content” data-theme=”e”> 002 <p>Text here</p> 003 </div>
Eindelijk een goede tutorial die je stap voor stap leidt bij het bouwen van een mobiele website. Ik heb er in ieder geval veel aan gehad. Er staan alleen wel een paar foutjes in de tutorial, bij deze wil ik die even delen.
Ten eerste zijn de onjuiste ” gebruikt, dit gaat in ieder geval niet goed in Notepad++. Hoe dit in andere editors gaat weet ik niet.
Verder het volgende:
11 Portfoliolijst
regel 2:
moet zijn:
12 Portfoliocontent:
regel 1:
moet zijn:
14: Tekstvelden:
Laatste regel staat het volgende: “De volledige code is terug te vinden op de cd.”
Welke CD?
Na regel 007: mis je nog 2 regels met
18: verzenden:
Ik heb hier nu wel knoppen, maar waar is de configuratie die daadwerkelijk deze dat verstuurd?
Ik kon deze site niet, dus ga hem nu eerst verder bekijken. Succes met de wijzigingen!
Ik ontdek trouwens nog een probleem, maar dat staat ook in de gedownloade versie en heeft volgens mij niets met deze tutorial te maken.
De link naar News werkt wel als je er direct heen gaat, maar niet als je bijvoorbeeld eerst naar About gaat, dan weer terug via de BACK knop en vervolgens de News link aanklikt. Je krijgt dan “Error loading Page”. Dit komt volgens mij omdat de link niet meer goed werkt omdat #home in de adresbalk blijft staan en daardoor de link niet goed werkt.
Aangezien dit voor mij nieuw is weet ik zo snel niet hoe ik dit kan verhelpen.
Leuk tutorial, met jquery mobile kan je een mooie web app maken. Om een website voor mobiel te maken met een CMS moet je eens naar http://www.makemobile.nl kijken.
Dank je wel voor deze tutorial.
Ik heb een vraag over de css. Hoe kan ik het lettertype en de lettergrootte aanpassen? De css verwijst naar de jquery css. Dus daar kan ik niets aanpassen. Maar ik wil graag het lettertype aanpassen.
Hoe kan ik deze app testen (zonder hem op een mobiel/tablet te testen)?
@Joke Ouwerling: Een andere css pagina bij steken… je kan bij één html pagina meerdere css pagina’s hebben
@RSchefman: Met opera mobile emulator of android simulator
Net een maandje bezig met jquery mobile en deze tutorial ziet er idd heel goed uit.
Mark, Top!
Ik ben een leek en het is mij gelukt om het werkend te krijgen.
Nu snel de teksten invoeren en dan komt het vast goed.
O ja dat vergeet ik maar ik ben zo’n leek dat het formulier eenmaal ingevuld niet verzonden kan worden/ aankomt omdat er natuurlijk niets is om het naar toe te sturen.
Dus alles weggehaald en een email link gemaakt. Daar kan ik immers ook voorgekookte tekst in kwijt. Edoch helaas dat werkt nog niet.
En fin dat is voor het vervolg. Uitzoeken hoe het formulier werkt en de stylesheets.
Nogmaals dank
Groet,
Olaf
http://www.le16.nl