Maak Van Je Html Mobiele Website Een Iphone Web Applicatie

[Wous]

Hier zijn een paar leuke tips om van van jouw mobiele website een iPhone web applicatie te maken, zodat gebruikers van jouw website een app-like bladwijzer kunnen maken en jouw site sneller kunnen bekijken!

Het kiezen van een Website icoon voor de iPhone homescreen

Bij het kiezen van een icoon maakt het niet veel uit of je hem zelf goed aanpast voor het iPhone beginscherm. De iPhone kan namelijk zelf ze volgende aspecten toevoegen:

1. ronde contouren
   
2. schaduw
   
3. glimmende spiegeling
   

Dit is een voorbeeld icoon:

En dit is hoe dat er dan uit zal zien op je iPhone scherm:

Nu denk je vast, hoe zet ik dit nou in mijn website en wat is dat rechter icoon dan? Nou daar hebben we ingesteld dat de iPhone niet de visuele aspecten toevoegd en om het op je website toe te voegen kun je de volgende codes toevoegen:

• plaats het icoon bestand in PNG formaat in je root folder waar je pagina zelf ook staat genaamd apple-touch-icon.png of apple-touch-icon-precomposed.png. Met deze methode zal dit icoon voor dehele website toegepast worden(elke pagina). Wanneer je precomposed in de afbeeldingsnaam zet zullen er geen visuele aspecten worden toegevoegd.
  

​

Je kunt ook een regel toevoegen in je header, zoals:

• 
  	<link rel="apple-touch-icon" href="/custom_icon.png">
  	

  
  

of

• 
  	<link rel="apple-touch-icon-precomposed" href="/custom_icon_precomposed.png">
  	

  
  

​

Verberg Safari componenten

Voeg deze META tag toe om er voor te zorgen dat de Safari componenten worden verborgen, je krijgt dus een volledig scherm:

<meta name="apple-mobile-web-app-capable" content="yes">

Status Balk Uiterlijk

Je kunt de Status balk van je web app/website veranderen door middel van de volgende code:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Er zijn drie verschillende kleuren:

1standaard (default)

2zwart (black)

3zwart-doorzichtig (black-translucent)

NOTE: Wanneer je dit instelt naar 'default' of 'black', de webinhoud zal dan worden weergegeven onder de status balk. Wanneer je het instelt op 'black-translucent', de webinhoud wordt dan weergegeven op het gehele schermthe web content is displayed on the entire screen, gedeeltelijk verduisterd door de status balk.

Specificeer een Opstart afbeelding

On iPhone OS, similar to native applications, you can specify a startup image that is displayed while your web application/website launches. By default, this image is a screenshot of the web application with the page that the user has visited the last time. If you want customize it, add a link element to the webpage, like this:

<link rel="apple-touch-startup-image" href="/startup.png">

Hier een voorbeeld voor een Duken.NL startup:

De afbeelding moet een .PNG bestand zijn met een afmeting van 320x460 pixels.

NOTE: deze optie werkt alleen wanneer apple-mobile-web-app-capable is ingesteld op yes.

Opmerkingen & conclusie

Al deze tips werken alleen op de webpagina's die zijn opgeslagen op het begin scherm door middel van het toevoegen van een bladwijzer, wanneer je gewoon via safari naar je website gaat zul je deze aanpassingen niet ervaren. Onthou dat elke nieuwe link die geopend wordt, er voor zal zorgen dat je deze instellingen verliest. Ik denk ook dat dit wel een idee is om in de Duken.NL mobiele site te implementeren.

_bron

Januari 19, 2012 bewerkt door Wous

[Duken]

LIKE! Al is het maak om de "Duken applicatie" maar die avatar is wel heel fout

[Wous]

Sorry ik begrijp je zin niet helemaal?

[T H W I T]

Ik denk dat hij zijn avatar rechts onderin dit plaatje 'fout' vindt.

[Duken]

Inderdaad het gaat om die avatar

[Wous]

Haha, ik heb het veranderd!

Maar wat vind je, duken? Zou dit ook een optie zijn voor de mobiele Duken.nl site?

[Gast ĐiŝaŝteɍƵaƞƴ]

Like ziet er wel netjes uit Maar ik vind die avatar van jou veel beter dan die van Duken

[Duken]

Tuurlijk kan het een optie zijn, geen probleem. Maar ik heb geen apple dus kan er niks mee

[Wous]

Er zijn denk ik wel een aantal mensen met een iOS apparaat op dit forum, en ik zal eens kijken of ze iets hebben voor android

[Farid.]

Is tapatalk niet gewoon een goed alternatief?

[Wous]

Dit kan ook met de homepage, en voor de homepage heeft Tapatalk geen opties.

Is tapatalk niet gewoon een goed alternatief?

[Piraatje]

Vergeten jullie alsjeblieft de VPN verbinding niet? Je internet provider zoals Ziggo of KPN kan door gebruik van de VPN niet zien wat er gebeurd op je internet verbinding en ben je volledig anoniem voor iedereen. Een vereiste tegenwoordig.... We een uitgebreide handleiding geschreven met informatie. 

Deze vindt je hier:   https://www.duken.nl/forums/handleidingen/downloaden/vpn-verbinding-en-anoniem-downloaden-r35/