Een nieuwe versie van het CMSMS Webapp Sjabloon versie 3.0. En nu is hij ook geschikt voor iPad en Android tablets. Versie 2.0 was nog al uitgerekt op een tablet omdat hij eigelijk bedoeld was voor mobieltjes. Ik ben toen gaan bedenken hoe ik hem mooi op een tablet kon weergeven. Versie 3.0 ziet er op een mobiel nog exact het zelfde uit maar als je hem op een tablet opent zie je dat de homepage nu gelijk het laatste artikel laat zien en links daar van de overige artikelen. Zo kan je direct navigeren naar het artikel die je graag wilt lezen. Verder kan je het laatste artikel op de homepage direct delen op Facebook en Twitter. Hiervoor moesten een paar regels gewijzigd worden in de sjablonen en de pagina structuur. Vandaar een nieuwe tutorial!
Klik naar een voorbeeld: http://webapp.pmkmedia.nl/webapp3
Zip bestand met alle bestanden: http://webapp.pmkmedia.nl/webapp-cmsms-v3.0.zip
Wat te doen
Download het zip bestand en pak hem uit. Je ziet nu 2 mappen:
Map 1: sjablonen
Map 2: root
Eerst gaan we alles in CMSMS goed zetten uit Map 1:
Maak 4 nieuwe Sjablonenen aan met de volgende namen:
webapp
(kopieer de html uit het webapp.html bestand er in en sla hem op).
webapppages
(kopieer de html uit het webapppages.html bestand er in en sla hem op).
webappsearch
(kopieer de html uit het webappsearch.html bestand er in en sla hem op).
webappresults
(kopieer de html uit het webappresults.html bestand er in en sla hem op).
Maak ook twee nieuwe stylesheet aan met de volgend namen:
webapp-home (kopieer de css uit het webapp-home.css bestand er in en sla hem op).
webapp-pages (kopieer de css uit het webapp-pages.css bestand er in en sla hem op).
Koppel de stylesheet aan webapp-home aan het webapp sjabloon en koppel webapp-pages aan de overige webapp sjablonen.
Maak in Menubeheer een nieuw menusjabloon aan met de naam "webapp":
Code: Select all
{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul>' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->current == true}
<li><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->type == 'sectionheader'}
<li><a class="sub">{$node->menutext}</a>
{elseif $node->type == 'separator'}
<li>
{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Pas het Zoeksjabloon aan naar dit:
Code: Select all
{$startform}
<input type="text" class="search-input" id="{$search_actionid}searchinput" name="{$search_actionid}searchinput" value="{$searchtext}" {$hogan}/>
<input class="search-button search-hidden" name="submit" value="{$submittext}" type="submit" />
{if isset($hidden)}{$hidden}{/if}
{$endform}Pas het Zoek Resultaatsjabloon aan naar dit:
Code: Select all
<h3>{$searchresultsfor} "{$phrase}"</h3>
{if $itemcount > 0}
<ul>
{foreach from=$results item=entry}
{if $entry->module == 'News'}
<li><span class="displaynone">{$entry->title} - </span><a href="{$entry->url}"><div class="searchblock"><p>{$entry->urltxt}</p></div></a><span class="displaynone"> ({$entry->weight}%)</span></li>
{else}
<li><span class="displaynone">{$entry->title} - </span><a href="{$entry->url}"><div class="searchblock"><p>{$entry->urltxt}</p></div></a><span class="displaynone"> ({$entry->weight}%)</span></li>
{/if}
{/foreach}
</ul>
<p>{$timetaken}: {$timetook}</p>
{else}
<p><strong>{$noresultsfound}</strong></p>
{/if}Maak een Nieuws Samenvattingssjabloon aan met de naam webapp:
Code: Select all
{foreach from=$items item=entry}
<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">
<div class="listblock">
<div class="imgbox">
{if $entry->fields.Foto->value}
<img src="{$entry->file_location}/{$entry->fields.Foto->value}" />
{else}
<img src="{root_url}/webapp/images/news-blank.jpg" />
{/if}
</div>
<div class="listtxt"><p>{$entry->title|cms_escape|truncate:65}</p></div>
</div>
</a>
{/foreach}Maak een Nieuws Artikelsjabloon aan met de naam webapp:
Code: Select all
{if isset($entry->canonical)}
{assign var='canonical' value=$entry->canonical}
{/if}
<div id="content">
<div class="container-push">
{if $entry->fields.Foto->value}
<img src="{$entry->file_location}/{$entry->fields.Foto->value}" />
{else}
<img src="{root_url}/webapp/images/news-blank.jpg" />
{/if}
<h1>{$entry->title|cms_escape:htmlall}</h1>
<h5>{$category_label} {$entry->category} | Datum: {$entry->postdate|cms_date_format} | Auteur: {$entry->Auteur}</h5>
{eval var=$entry->content}
</div>
</div>
<div id="share" class="hidden">
<img src="{root_url}/webapp/images/facebook.png" alt="facebook"><a href="http://www.facebook.com/sharer.php?u={$canonical}">Delen op Facebook</a>
<img src="{root_url}/webapp/images/twitter.png" alt="twitter"><a href="http://twitter.com/home?status={$canonical}">Delen op Twitter</a>
</div>
{assign var='alt_title' value=$entry->title}
Maak nu 2 Nieuws Velddefenities aan:
Velddefenitie: Auteur - Type:Tekstinvoer - Publiek
Velddefenitie: Foto - Type:Bestand - Publiek
Nu zijn alle sjablonen aangemaakt en kunnen we de pagina's gaan aanmaken.
Maak 5 nieuwe pagina's aan met de volgende namen en eigenschappen:
Pagina 1: app (verbergen)
Interne link naar app \ Home
Onderliggende paginas:
Pagina 2: Home
Sjabloon: webapp - Content: {news action="detail" articleid="-1" detailtemplate="webapp"}
Pagina 3: Info
Sjabloon: webapppages - Content: "Informatie over de webapp"
Pagina 4: webappresults (verbergen)
Sjabloon: webappresults - Content: "leeg"
Pagina 5: webappsearch (verbergen)
Sjabloon: webappsearch - Content: "leeg"
De volgende stap is de benodigde bestanden aanpassen in de map root-upload:
Onder het mapje root/webapp/images staat een afbeelding genaamd touch-icon.png deze kan je vervangen door je eigen "Web App" iconen van 144x144 pixels. Ze word dan getoont op je iOS of Android apparaat alsof het een echt App is.
In de map root/webapp/js staat een bestand genaamt webbanner.js dit bestand laat een app banner zien op de hoofd website in dit bestand moet je onderaan de gegevens wijzigen naar die van jou website (zie Een Android App maken: voor de url naar de android app). Als je dat gedaan hebt kan je de volgende regel tussen de <head> </head> van je hoofd website plaatsen:
Code: Select all
<__script__ src="{root_url}/webapp/js/webbanner.js" type="text/javascript"></__script>Nu upload je de hele inhoud van de map root naar de ROOT van je website of in de submap waar je website staat.
Als het goed is werkt je Web App nu naar behoren op zowel een iOS als Android apparaat.
Als je alles goed hebt ingevult in webbanner.js word je op een iPhone/iPad naar de webapp gelijd en op een android telefoon/tablet naar de link van je app of als je de webapp url gebruikt hebt naar de webapp zelf (deze kan je in Chrome for android makelijk koppelen aan je homescreen).
Een Android App maken:
Surf naar http://www.appsgeyser.com/ en maak een account aan.
Na dat je bent aangemeld en ingelogt op http://www.appsgeyser.com/ klik je rechts boven in de hoek op "CREATE APP".
Kies voor de optie "WEBSITE ENTER URL" en vul de velden in als volgt:
Website URL: http://www.website.nl/webapp (uiteraard wijzigen naar de juiste url)
App name: Jouw Web App Naam
Description: Beschrijving (hoeft niet als je dat niet wilt)
Icon: Custom icon (upload hier je "touch-icon.png" die je gemaakt hebt zodat het een echte app wordt)
Screen Orientation: Auto
Category: News (mocht je hem gebruiken voor je Blog dan kan je dat ook kiezen)
Vervolgens druk je op "CREAT APP" en download hem naar je computer.
De link naar de app kan je in webbanner.js verwerken bij de Android url.
iOS: Word direct doorgelinkt naar de Webapp met de vraag of je hem op je beginscherm wilt plaatsen.
Android: Vraagt nu of je de app wil downloaden die je net gemaakt hebt of als je hem hebt doorgelink naar de webapp zie je de webapp.
Voorbeeld in gebruik:
Surf op je Mobiel naar http://pmkmedia.nl website en je ziet een werkende versie.
Dat was het veel plezier er mee en zijn er vragen of verbeterpunten stel ze! Zo leren we wat van elkaar!
