14 - Site tbv Mobiel

© Z-point - 20???

Aangepaste site tbv. Mobiel

SCHAKELBARE INDEX

================

Aangepaste site tbv. Mobiel

Pagina redirects opzetten

Mobile site bouwen van een eerder gemaakte site

Doorschakelen naar een desktoppagina

Opmaken van mobiel-georiënteerde pagina's

Marges tbv. de mobiele breedte aanpassen

Masterpages aanpassen

Navigatiebalk aanpassen

Formaat en inhoud van de 'footer' aanpassen

Sociale-Bookmark-Strip aanpassen

Inhoud van de site aanpassen

Slider aanpassen

Preview van de mobiele versie

Mobiele site op het net plaatsen

—------------------------------------------------

Aangepaste site tbv. Mobiel   <TOP>

Sites ontwikkeld voor desktop-computers kunnen ook op mobiele telefoons en tablets worden bekeken. Het laat zich raden dat dit gezien de schermopbouw vaak erg onoverzichtelijk zal zijn. Echter wanneer je er de tijd voor hebt kun een speciale versie voor mobiele apparaten maken.

WebPlus biedt deze mogelijkheid en wel op drie manieren

1):  Door een op zichzelf staande mobiele site te maken

2):  Een 'Hybrid Desktop/Mobile' site te creëren die desktoppagina's automatisch omzet naar

een mobiele versie (redirect/doorstuurt) en omgekeerd en dat allemaal in één project.

Kijk hiervoor in de 'Help'-sectie van WebPlus en kijk onder Creating mobile sites and pages

3):  Een aparte desktop en mobiele site te creëren die van de desktopversie via redirect (doorgestuurd) wordt doorgestuurd naar de mobieleversie en als een apart project wordt gezien/opgeslagen.

Versie 1 is het minst aantrekkelijk ivm. de hoeveelheid werk.

Versie 2 wordt hier niet besproken, maar wordt beschreven in de 'Help'-sectie van  WebPlus, kijk onder Creating mobile sites and pages

Versie 3 bespreken we hier…

Pagina redirects opzetten   <TOP>

Pagina redirects binnen WebPlus opzetten is een eenvoudig proces.

Eerst gaan we een redirect opzetten van de Homepagina naar een mobiele versie wanneer de site via een mobielapparaat wordt opgevraagd.

We openen de 'Page Properties'-tab in de 'Context'-toolbar en kiezen in de linker kolom de categorie 'Redirect'.

Klik op de 'Link'-knop rechts van 'Redirect to:'

In het volgende scherm kies de categorie 'Internet Page'

Vul het complete internetadres in waar de 'Desktop'-versie is opgeslagen:

In dit geval: http://grdro.nl/EnZoDoeIkHet/Webplus/Mobiel/ dus.

En klik 'OK'

Terug in het 'Page Properties'-scherm vink 'Redirect only on conditions' aan. Kies daarna voor 'If recognised mobile device'.

En klik 'OK' en sla je werk op met 'Ctrl-S'.

Herhaal deze procedure voor alle pagina's.

Sla je werk op met 'Ctrl-S'.

Bovenstaande handelingen vinden dus plaats in de DeskTop-versie.

Wanneer we dus later beslissen om van een bestaande site ook nog een mobiele versie te maken, moeten we alle 'rederects' eerst aanbrengen alvorens we de site opslaan tbv. een mobiele versie…!!!

Mobile site bouwen van een eerder

gemaakte site  <TOP>

De site waar we bijvoorbeeld nu mee bezig zijn. Hiervoor moeten we deze site eerst onder een andere naam opslaan voor de mobiele verse.

In dit geval noem ik de site EnZoDoeIkHet-Mobiel.wpp

Vanaf dit punt blijven we in het nieuw

opgeslagen bestand 'EnZoDoeIkHet-Mobiel.wpp' werken…

Alle aanpassingen/wijzigingen hebben dus geen effect op de originele desktop-versie.

Voordat we ons gaan verdiepen in het aangepaste ontwerp tbv. van de mobiele versie moeten we eerst de aangebrachte 'rederects' aanpassen zodat iedereen die zijn desktopcomputer deze aangepaste versie in zijn browser wil openen automatisch zal worden doorgeschakeld naar de desktop versie:

Doorschakelen naar een desktoppagina  <TOP>

Met de 'Homepagina' geactiveerd in het werkscherm,

klik  op de 'Contect'-toolbar op 'Page Properties' en kies in de linker kolom de categorie 'Redirect'

Kilk vervolgens op de 'Link'-knop en pas zo nodig het internetadres in het 'Edit Page Redirect'-scherm aan. Het internetadres moet verwijzen naar de Desktop-versie dus (http://grdro.nl/EnZoDoeIkHet/WebPlus/WWW/paginabestandsnaam.html) en klik 'OK'.

Controleer terug in het 'Page Properties'-scherm of 'Redirect only on condition:' aangevinkt staat en kies daar voor 'If non mobile divice'.

Doordat schermresoluties steeds beter worden kun je er ook voor kiezen de optie 'If screen is not more than:' te kiezen en vervolgens de gewenste waarden in te voeren.

Klik 'OK' om deze procedure af te sluiten en vergeet niet je werk op te slaan met ctrl+s.

Iedereen die nu met zijn desktopcomputer deze mobiele versie in zijn browser wil openen zal automatisch worden doorgeschakeld naar de desktop versie.

Herhaal deze procedure voor alle pagina's die je beschikbaar wil stellen in de mobiele versie en sla alles weer op met ctrl+s.

Opmaken van mobiel-georiënteerde pagina's   <TOP>

Één van de grootste verschillen tussen de desktopversie en de mobieleversie is de beschikbare pagina breedte in pixels.

Deze kunnen we gelukkig voor alle pagina's simpel instellen door in de 'Context'-toolbar naar 'Site Manager' te gaan.

Klik links in de bovenste rubriek 'Page Properties' aan en vink rechts 'Page' aan, waarna alle pagina's worden aangevinkt. Let Op: Mogelijk moet je het 'Site Manager'-scherm in de breeddte groter slepen om alle info te kunnen zien….

Vul onder aan de kolom 'Width'(pic) 600 en bij 'Height'(pic) 2500 in of naar wenst andere waarden in pixels in. De meeste moderne smartphones zullen geen moeite hebben met een breedte instelling van 600.

Selecteer nu in de rubriek 'Masterpage Properties' de aangemaakte 'MasterPages' en stel hier de waarden in op respectievelijk 600 en 1500. Deze waarden kun je altijd achteraf aanpassen.

Klik 'Close'. Alle master- & andere pagina's hebben nu de nieuwe instellingen.

We zien direct dat er het nodige aangepast moet worden, maar geen paniek.

Marges tbv de mobiele breedte aanpassen   <TOP>

In de 'Context'-toolbar ga naar het 'Site Properties'-werkscherm.

Selecteer in de linkerkolom de rubriek 'Margins'

De door mij gebruikte kolombreedte in de desktopversie is 560 pixels

wanneer ik de marges links en rechts op 20 instel kom ik precies op 600 uit,

Hoogte voor de topmarge en bottommarge heb ik voorlopig maar even op 225 en 80 pixels ingesteld. Met deze marge-breedte-instellingen hoef ik straks in ieder geval de in een kolom geplaatste inhoud niet meer qua opmaak aan te passen. Dat we met de hoogte aan het werk moeten spreekt… Voor je 'kennie-weten' toch ook maar even twee kolommen aangegeven met tussen de kolommen een ruimte van 15 pixels.

Klik op 'OK'.

'Masterpages' aanpassen  <TOP>

Ik open eerste de Master A pagina en kijk hoe ik de header binnen de ingestelde breedte er weer fatsoenlijk kan laten uitzien en vervolgens doe ik hetzelfde voor m'n tweede Masterpage: WebPlus B. Veelal een kwestie van vergroten / verkleinen / slepen…

Via de 'Transform'-tab kunnen de objecten weer heel nauwkeurig worden geplaatst.

Positie X & Y alsmede de Breedte (W) en hoogte (H) zijn natuurlijk vrij om te veranderen…

Houdt de 'Anchor top left' en de 'Aspect ratio' op 'Unlocked'.

Navigatiebalk aanpassen   <TOP>

Klik op de navigatiebalk en klik op het icoontje (Edit on Masterpage) rechtsonder het frame en de masterpage wordt geopend. Dubbelklik op het navigatiebalk-frame.

Afhankelijk van de navigatiebalk die geplaatst is kun je nu de gewenste aanpassingen aanbrengen en klik op 'OK'.

Formaat en inhoud van de 'footer' aanpassen   <TOP>

Open de 'masterpagina' en selecteer het achtergrond-kleurvlak.

Open de 'Transform tab' en zorg dat de settings staan op 'Anchor Top Left' en de Aspect

Ratio op Unlocked. Stel de breedte en hoogte opnieuw en de X en Y waarde op 0.

Verplaats de verdere objecten naar wens en pas zo nodig de formaten aan.

Omdat het niet aannemelijk is dat er vanuit de mobiele versie zal worden geprint, kunnen we het 'print-icoontje' uit de 'Sociale-Bookmark-Strip' verwijderen:

Sociale-Bookmark-Strip aanpassen  <TOP>

Dubbelklik op de ' Social Bookmarking Button Strip' nadat je de 'masterpage' hebt geopend. In het 'Edit Social Bookmarking Button Strip'-menu klik de ' Social Bookmarking Button Strip Configuration tab' en uit de 'Included In Strip'-lijst

delecteer je 'Print' en klik op 'Remove' en klik op 'OK' en safe alles met Ctrl+S.

Inhoud van de site aanpassen   <TOP>

Tijdens de bouw van de Desktop-versie heb ik al rekening gehouden met het feit dat er mogelijk ook een mobiele versie gemaakt zou moeten worden. Vandaar dat ik daar met kolommen heb gewerkt van 560 pixels breed. Samen met marges van 20 pixels kom je zo op 600 pixels voor de mobiele versie. Alle frames die op die 560 pixels zijn ingesteld kunnen dus moeiteloos in de digitale versie worden geplaatst.

Handig om te weten

Wanneer je een frame aanklikt en vervolgens de 'Shift'-knop ingedrukt houd en terwijl je deze ingedrukt houd ook op andere frames klikt. zul je merken dat al de aangeklikte frames worden geselecteerd.

Wanneer je nu op het icoontje rechts onder het 'totaal'-frame klikt, worden alle geselecteerde frames gegroepeerd (het puzzeltje sluit zich…)en kunnen dan als een enkel frame worden verplaatst. Veranderingen binnen en enkel frame kunnen niet worden aangebracht wanneer dit frame tot een gegroepeerd object behoort.

Slider aanpassen  <TOP>

Open de pagina waarin de slider is geplaatst en klik op de slider om deze te selecteren. Open de Slider Studio.

En open daar de 'Panel'-tab en klik op het eerste 'panel' en vervolgens op de foto in het werkscherm. In de Transform'-tab kunnen we weer alle benodigde aanpassingen doen:

Pas waar nodig andere frames die boven een foto geplaatst zijn ook aan.

Herhaal deze procedure voor alle geplaatste afbeeldingen en sluit de Slider Studio met:

Terug in het werkscherm en het sliderframe geactiveerd kun je nu ook de maten van het frame en de positie op de pagina weer heel precies afstellen via de 'Transform'-tab.

Safe alles weer met Ctrl+S.

Preview van de mobiele versie  <TOP>

Klik  op de standaard-toolbar en klik daar op het pijltje. Selecteer 'Disable Page Redirects when Previewing' Dit voorkomt dat de 'redirect-instellingen' worden gebruikt en daarmee de desktopversie wordt getoond.

De browser heeft een eigen (beperkte) besturingsbalk:

Mobiele site op het net plaatsen   <TOP>

De manier waarop wij de mobiele site hebben aangemaakt vraagt om een nieuwe plaats op de FTP-server. Ik ga daar een nieuwe map onder WebPlus genaamd Mobiel aanmaken.

De totale URL wordt zo: http://grdro.nl/EnZoDoeIkHet/WebPlus/Mobiel/

We zetten het ftp-account op:

Op de Hoofdmenubalk klikken we op 'File' dan ' Publish Site' en selecteer dan 'Publish to Web'.

In het 'Publish To Web' dialoogmenu, klik op' Change'

Klik in het 'Publish to Web'-scherm op 'Manage Accounts '.

Klik in het 'FTP-Accounts'-scherm op in de Account drop-downlijst de URL (internetadres) die gebruikt is voor het uploaden van de Desktop-versie en klik dan op 'Copy'.

In het 'Account Details '-scherm pas je het internetadres aan achter 'Account Name:'  en

ook achter 'Folder:'  (Twee maal dus…)…

En klik 'OK'.

Terug in het ' FTP Accounts dialoogscherm, klik 'Update Account'

Terug in het 'Publishing Options'-dialoogmenu, klik 'OK'.

Terug in het ' Publish To Web'-scherm zie je bovenin de juiste URL staan.

Onder 'Publish Tasks' zie je een overzicht van mogelijk te verwachten problemen na publicatie. Wanneer je deze hebt opgelost (kan altijd ook later) en je bent er klaar voor:

Klik nu op de 'Select All'-knop (Alle bestanden zijn nu aangevinkt) en klik 'OK'.

Webplus zal nu alle gewenste html-pagina's genereren en uploaden.

Sla voor alle zekerheid je werk nogmaals op met 'Ctrl+S'.

En als alles gegaan is zoals je verwacht kun je nu de mobiele internetversie opvragen in je geliefde browser….

<TOP>