Een Web App is een mobiele website die werkt als een echte App. We maken een FaceSwap App met vier faceswaps van jullie zelf. Je mag in duo’s werken.
Maak een foto op liggend formaat, van dichtbij, met jullie 2 gezichten vlak naast elkaar. Mail dat naar jezelf, en open in Photoshop:
- Crop het plaatje (C) en Bewaar (1.psd) op het bureaublad
- Pak de Lasso (L), en stel de Feather af op 25 pixels
- Selecteer ogen, neus en mond ruim
- Kopieer en plak. Verplaats.
- Transform met ⌘-T
- Maak de layer 50% transparant
- Zet het linkeroog precies op elkaar
- Verplaats het middelpunt-anker, en zet die precies in het linkeroog
- Roteer en stretch. Zet de Layer weer op 100%.
- Maak Aanpassingslagen met o.a. Kleur en Levels
- Herhaal alles voor het tweede gezicht
- Export via Save for Web (⌘-Alt-Shift-S) preset JPG High, 1200 pixels breed,
noem het 1.jpg. Zet het in een nieuwe map “app” in je map websites. - Bewaar alle varianten (klik layers uit): 2.jpg, 3.jpg, 4.jpg
Nu de Web App:
- Start Dreamweaver. Maak een nieuwe HTML-pagina.
- Bewaar als index.html in de map “app” in de map websites.
- Plaats 1.jpg via Insert Image
- Zet bij het plaatje de width 100%, height mag helemaal weg
- Maak het plaatje klikbaar in de Properties naar 2.html
- Zet er eventueel h1 tekst onder: <h1>Swapp!</h1>
- Plak achter de <head> deze css:
<style>
body {margin: 0; padding:0; background:black; text-align:center;}
h1, a {color:#666; text-decoration:none;}
</style>
- Maak de pagina responsive en fullscreen op je mobiel, zie hieronder
- Zorg dat de app fullscreen blijft, zie het script hieronder
- Zet er een image preloader bij, zie hieronder
- Eventueel een autoplay erbij, zie hieronder
Bewaren, aanpassen, App Icon
- Bewaar. Kies dan Bewaar Als: 2.html, en dan 3.html, 4.html
- Pas in elke pagina de link, plaatje en preloader aan
- Maak een App icon: 250 x 250 pixels. Bewaar voor Web (⌘-Alt-Shift-S) PNG 24, noem het favicon.png en zet het in de map.
- Kies Site > Manage > Import > jouw ste en zet het online (uploaden)
- Bekijk op je mobiel: gameschool.nl/jenaam/app
- Kies “Zet in Beginscherm”. Start de App nu vanaf je Beginscherm.
Responsive fullscreen code
Zet dit in de <head> om de App fullscreen te starten (nadat je het hebt Toegevoegd aan je Beginscherm – op IOS via de knoppen onderaan, op Android via de 3 puntjes). Verander Naam.
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Naam"> <link rel="apple-touch-icon" href="favicon.png" /> <link rel="icon" type="image/png" href="favicon.png" /> <link rel="shortcut icon" href="favicon.png">
Web App fullscreen houden
Dit script in de <head> zorgt ervoor dat de App ook fullscreen blijft na het klikken:
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
CSS Image Preloader
Je kan dit in de <style> toevoegen, zodat het tweede plaatje alvast geladen wordt:
body:after{
position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
content: url(2.jpg);
}
Dat moet dan op elke pagina: verander telkens 2.jpg.
Optioneel: Autoplay
Zodat-ie automatisch afspeelt. Pas het op elke pagina aan, in de <head>
Zie http://aartjan.nl/app
<meta http-equiv="refresh" content="4;url=2.html" />