In deze opdracht maak je een iPad magazine. De inhoud mag je helemaal zelf verzinnen. Gebruik bij voorkeur eigen teksten en beelden. Baseer je design op bestaande magazines die jij mooi vindt. Maak alles in Indesign. Als het klaar is maak je er een online versie van.
De online versie kan op drie manieren: met een pdf op je website, met een online service en met een Javascript. Zie dit voorbeeld aartjan.nl/mag voor een Swipe-versie met Javascript.
Stap 1: staand of liggend?
Wil je het magazine in staand of liggend formaat?
Liggend kan op tv, laptop, desktop, iPad en iPhone.
Staand kan niet op TV, laptop en desktop. Kies dus liggend als je twijfelt.
Kies in Indesign > nieuw document > INTENTIE: WEB.
Stap 2: design en inspiratie
- Als PDF. Je plaatst een jpg van de cover, met daarop een link naar de pdf waarin alle pagina’s zitten.
Een pdf werkt overal en altijd, ook op IOS. - Als JPG’s. Met een javascript om te kunnen swipen, pinchen, dubbeltappen, en tap voor de interface. Zie de handleiding hieronder.
Zie het voorbeeld op aartjan.nl/mag - Via ISSUU.com (of een andere vergelijkbare service zoals docufiller.nl)
Zie meer info hieronder, en als voorbeeld aartjan.nl/journal2
Exporteer als jpg en pdf
In Indesign exporteer je alles als JPG, noem het 1.jpg, 2.jpg etc in de map images in de map ipad in de map websites. Kies kwaliteit Normaal en 120 dpi.
Exporteer het hele magazine ook als pdf-interactief, kleinste bestandsgrootte. Maak ‘m daarna kleiner via smallpdf.com. Noem ‘m mag.pdf en zet die in de map pdf in de map websites.
1. Website met PDF
Plak onderstaande code in een nieuw leeg document in Dreamweaver en bewaar het als index.html in de map pdf in de map websites. Pas zonodig de code aan. Zie aartjan.nl/journal (ook al is dat een staand krantenformaat, dus totaal iets anders).
Upload de map pdf, en bekijk het online op ROCstudent.nl/ftp/jenaam/pdf
<body style="margin:0; padding:0; background:black;"> <a href="mag.pdf"> <img src="../ipad/images/1.jpg" width="100%" /> </a></body>
Deze code betekent:
body: De pagina heeft geen witranden of marges en de achtergrond is zwart
img: toon plaatje 1.jpg beeldvullend: 100% breed.
../ betekent een map omhoog.
a href: Als je op het plaatje klikt opent mag.pdf
Zet deze versie ook op je WordPress-site:
Maak in je WordPress-site een pagina over je magazine, en plaats daar de afbeelding van de cover. Als je daar op klikt moet de pdf openen. Zet de pagina ook in je Menu.
2. Website met Javascript voor iPad
[Deze versie 2 kan je voorlopig helemaal overslaan]
Maak een tweede versie, met een Javascript, zodat je kan swipen en zoomen. Maak een map “images” in de map “ipad” en bewaar daar de pagina’s vanuit Indesign: exporteer als 1.jpg, kwaliteit Normaal, 120 dpi. Ga naar de map, en hernoem de plaatjes tot 1.jpg, 2.jpg, 3.jpg etc.
Kijk op aartjan.nl/mag. Kopieer die code (rechtsklik > Toon paginabron > Kopieer) en plak dat in een leeg document in Dreamweaver. Bewaar dit in de map ipad als index.html. Pas de code aan (zie instructies in de code). Maak ook een app icon, ofwel een favicon.png, van 250×250 pixels.
Upload de map ipad. Bekijk het online op ROCstudent.nl/ftp/jenaam/ipad
Fullscreen op je mobiel? Kies dan op je mobiel “Zet in beginscherm (IOS) / toevoegen aan startscherm (Android)” en start de website vanaf je startscherm. Fullscreen op een computer? Zet je browser fullscreen.
3. Website via issuu.com
[Deze versie kan je ook overslaan]
Zie ISSUU.com of een vergelijkbare service zoals docufiller.nl of Turn.js.
Account aanmaken (afstellen/instellen) > pdf uploaden > embed kiezen met de iframe.
Maak een nieuw HTML-document in Dreamweaver.
Plak je iframe code in. Verander de width en height zoals hieronder.
Verander de <body> tag ook naar de code hieronder.
Bewaar als index.html in de map issuu in de map websites.
Als je dit upload komt het op ROCstudent.nl/ftp/jenaam/issuu
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Magazine</title> </head> <body style="height:100vh; margin:0; padding:0; background:black"> <iframe src="https://e.issuu.com/anonymous-embed.html?u=jenaam&d=mag" width="100%" style="height: 100vh" frameborder="0" allowfullscreen="true"></iframe> </body> </html>
- Op pagina 2 een inhoudsopgave of iets dergelijks, of een leuke opener.
- Bijschriften bij alle foto’s: want die leest iedereen
- Bonuspunt als alle tekst en/of beeld van jezelf is.
- Maak eventueel een plank: dat is de indeling van het magazine, op papier, met in het klein elke pagina en wat daar dan opkomt. Zodat je makkelijk kan schuiven en alvast een indruk krijgt van het geheel: van ritme, spanning en afwisseling.
- 1 tot 3 pagina’s INSPIRATIE met plaatjes van wat jij mooie magazines vindt
- VERVALLEN: 1 pagina over jezelf. Met o.a jouw tekst: welke waarden vind jij belangrijk in het leven?
Dreamweaver STE
Start Dreamweaver en kies Site Beheren > Import > jouw .STE.
Of Maak in Dreamweaver een nieuwe site. Geef aan dat je lokale map jouw map Websites is, en stel de server in, met servernaam, login, password, en pad. Het pad is je voornaam, in kleine letters. Dit hoef je maar 1x te doen: Exporteer deze setting als jouwnaam.ste, en bewaar dat BUITEN je website-map. Alle volgende keren hoef je alleen maar deze STE te dubbelklikken, alles staat dan startklaar.
OF probeer Turn.js. Zie een voorbeeld op aartjan.nl/journal2 Als je deze doet krijg je een bonuspunt, en je mag het met zijn 3-en doen!