CMSMS Webapp Sjabloon 2.0

CMSMS Webapp Sjabloon 2.0

CMS Made Simple 1.11.x / 1.12 | 16-04-2014 | Pascal Merks | Reacties


Een nieuwe versie van het CMSMS Webapp Sjabloon versie 2.0. Nieuw is onder andere dat er een smart webapp banner voor je website in zit, een slide menu wat meer het gevoel geeft dat het een app is en afbeeldingen bij de samenvatting en het artikel zelf.

Klik naar een voorbeeld: http://webapp.pmkmedia.nl/webapp2

Zip bestand met alle bestanden: http://webapp.pmkmedia.nl/webapp-cmsms-v2.1.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 een nieuwe stylesheet aan met de volgend naam: (Koppel de stylesheet aan alle 5 de sjablonen.)

webapp (kopieer de css uit het webapp.css bestand er in en sla hem op).

 

Maak in Menubeheer een nieuw menusjabloon aan met de naam "webapp":

Code:

{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:

{$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:

<h3>{$searchresultsfor} &quot;{$phrase}&quot;</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:

{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:

{if isset($entry->canonical)}
{assign var='canonical' value=$entry->canonical}
{/if}

<div id="content">

{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 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: webapp (verbergen)
Interne link naar webapp Home

Onderliggende paginas:

Pagina 2: Home
Sjabloon: webapp - Content: {news number="20" summarytemplate="webapp" detailtemplate="webapp" detailpage="webappresults"}

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:

<script src="{root_url}/webapp/js/webbanner.js" type="text/javascript"></script>

Nu zie je op je website een mooie banner naar je webapp/app

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 naar de webapp gelijd en op een android telefoon 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 deze 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!

 

Voorbeeld video:

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets