{"id":6342,"date":"2022-05-11T17:05:15","date_gmt":"2022-05-11T15:05:15","guid":{"rendered":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/?p=6342"},"modified":"2022-11-20T22:21:18","modified_gmt":"2022-11-20T21:21:18","slug":"promo-presentatie","status":"publish","type":"post","link":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/promo-presentatie\/","title":{"rendered":"Promo presentatie"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"alignright is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/intro-social-media-presentation.png\" alt=\"\" class=\"wp-image-6344\" width=\"168\" height=\"168\" srcset=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/intro-social-media-presentation.png 500w, https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/intro-social-media-presentation-150x150.png 150w, https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/intro-social-media-presentation-300x300.png 300w\" sizes=\"auto, (max-width: 168px) 85vw, 168px\" \/><\/figure><\/div>\n\n\n\n<p>Deze opdracht is onderdeel van het ED project &#8220;e-Commerce&#8221; (F2M4). Bij dit project ontwikkel je wekelijks 3 digitale promo-producten voor verschillende media\/platforms. Deze producten presenteer je op een passende manier in een webpagina. De stappen die je moet zetten om deze presentatiepagina te maken worden hieronder toegelicht.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"su-tabs su-tabs-style-default su-tabs-mobile-stack\" data-active=\"1\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-tabs-nav\"><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">Intro<\/span><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">week 1<\/span><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">week 2<\/span><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">week 3<\/span><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">week 4<\/span><\/div><div class=\"su-tabs-panes\"><div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"Intro\">\n\n\n\n<p>Gedurende het project maak je wekelijks 3 promo-producten. Het project duurt 7 weken, dus dat zijn er in totaal 21.  Deze producten bestaan uit:<\/p>\n\n\n\n<table class=\"wp-block-table has-fixed-layout is-style-regular\"><tbody><tr><td>Fotografie<\/td><td>JPG<\/td><\/tr><tr><td>Video<\/td><td>MP4<\/td><\/tr><tr><td>Geluid<\/td><td>MP3<\/td><\/tr><tr><td>Illustratie<\/td><td>JPG \/ PNG \/ SVG<\/td><\/tr><tr><td>Animatie<\/td><td>MP4<\/td><\/tr><tr><td>Mixed Media<\/td><td>divers<\/td><\/tr><tr><td>Interactie<\/td><td>XD<\/td><\/tr><tr><td>Typografie<\/td><td>JPG<\/td><\/tr><tr><td>Infographic<\/td><td>SVG<\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>De 21 uitingen moeten worden gepresenteerd op \u00e9\u00e9n of meerdere zelfgemaakte webpagina(&#8216;s). Je mag zelf weten hoe je de producten gaat presenteren.<\/p>\n\n\n\n<p>De webpagina moet voldoen aan de volgende <strong>technische<\/strong> eisen:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>De website is geschikt voor weergave in 1920&#215;1080 pixels.<\/li><li>De pagina(&#8216;s) is (zijn) opgebouwd met behulp van de methode <em>display:grid<\/em> (zie <a href=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/grid\/\">oefening Grid<\/a>).<\/li><li>De grid items zijn klikbaar en openen in een <em>lightbox <\/em>(zie <a href=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/lightbox\/\">oefening Lightbox<\/a>)<\/li><li>JPG \/ PNG \/ SVG afbeeldingen zijn maximaal 500kb.<\/li><li>MP3 \/ MP4 bestanden zijn ingesloten (embedded).<\/li><li>XD product is ingesloten (embedded).<\/li><\/ul>\n\n\n\n<\/div>\n<div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"week 1\">\n\n\n\n<p>De eerste stap is het bepalen van de layout voor de presentatiepagina. Het doel is om snel een opzet te bedenken die je zelf kan maken in HTML\/CSS. Hou rekening met de technische eisen die hieraan worden gesteld (zie tabblad Intro). <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright is-resized\"><a class=\"fancybox\" href=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/wireframes.png\" rel=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/wireframes-586x800.png\" alt=\"\" class=\"wp-image-6349\" width=\"184\" height=\"252\" srcset=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/wireframes-586x800.png 586w, https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/wireframes-220x300.png 220w, https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/wireframes.png 750w\" sizes=\"auto, (max-width: 184px) 85vw, 184px\" \/><\/a><figcaption>Klik om te vergroten<\/figcaption><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Hoe ga je de 21 producten indelen?<ul><li>Gegroepeerd op type \/ medium \/ week?<\/li><li>In volgorde van de tijd?<\/li><li>Welke Titels\/Headers gebruik je bij je indeling?<\/li><\/ul><\/li><li>Welke layout heeft een product?<ul><li>Staand \/ liggend \/ groot \/ klein<\/li><li>Hoe geef je groepen weer? <\/li><\/ul><\/li><li>Welke layout krijgt je pagina?<ul><li>Verticaal of horizontaal scrollend?<\/li><li>Werk je met een lightbox? Insluitingen? Links?<\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"has-background has-yellow-background-color clearboth\"><strong>Opdracht<\/strong> \u25ba Maak een wireframe voor de webpagina in XD.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Eisen<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Het wireframe is low-fidelity (alleen layout, geen typo\/kleur).<\/li><li>Het wireframe toont de plaatsing van tekst \/ headers \/ producten.<\/li><li>Je ontwerp biedt ruimte voor een &lt;h&gt; header en &lt;p&gt; tekst bij ieder product.<\/li><li>Indien van toepassing:<ul><li>Het wireframe toont een werkend menu.<\/li><li>Het wireframe toont werkende links (bv afbeeldingen naar mediabestand of lightbox. <\/li><\/ul><\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">Tips<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Je weet nu nog niet precies hoe je producten er uit komen te zien. Bedenk  dus een flexibele opzet die niet al te ingewikkeld is.<\/li><li>Bedenk een opzet en waar je makkelijk producten aan kan toevoegen gedurende de komende weken. <\/li><li>Bedenk een opzet die je kunt gebruiken bij je presentatie in week 9.<\/li><\/ul>\n\n\n\n<\/div>\n<div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"week 2\">\n\n\n\n<p>De presentatie-pagina wordt opgezet met behulp van display:grid. Dit betekent dat je het wireframe uit de vorige stap in kolommen en rijen verdeeld, en zo bepaalt welk element op welke plek komt.<\/p>\n\n\n\n<p class=\"has-background has-yellow-background-color\"><strong>Opdracht<\/strong> \u25ba Zet je wireframe op in html\/css.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Eisen<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Start met het <a href=\"https:\/\/www.dropbox.com\/s\/nbigxw7ck8oiygl\/index.html?dl=1\">basisdocument<\/a><\/li><li>Gebruik een externe stylesheet<\/li><li>Zet je layout op met <em>display:grid<\/em><\/li><li>Gebruik <em>placeholders<\/em> voor de 21 producten<\/li><li>Gebruik &lt;h&gt; en &lt;p&gt; voor toelichtende teksten<\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">Tips<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Denk aan de presentatie in week 9: hoe kun je een gelikte ervaring maken van je pagina?<\/li><li>Start eenvoudig, maar droom groot. Maak een verschil tussen <em>eisen<\/em> (wat moet er minimaal lukken) en <em>wensen<\/em> (wat zou tof zijn als het lukt).<\/li><li>Ga op zoek naar informatie op W3-schools en CSS-tricks, en vraag de docent om advies.<\/li><\/ul>\n\n\n\n<\/div>\n<div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"week 3\">\n\n\n\n<p>De komende weken blijf je deze pagina aanvullen met producten. Hou hierbij rekening met de presentatie: hoe je deze producten in beeld brengt. Let ook op de technische eisen (tabblad Intro).<\/p>\n\n\n\n<p class=\"has-background has-yellow-background-color\"><strong>Opdracht<\/strong> \u25ba Zet alle 21 producten in je presentatie pagina(&#8216;s).<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>lightbox \/ media<\/li><li>embedding<\/li><\/ul>\n\n\n\n<\/div>\n<div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"week 4\">\n\n\n\n<p>Deze week wordt je site beoordeeld. De site moet voldoen aan de technische eisen die op tabblad Intro te lezen zijn.<\/p>\n\n\n\n<\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Tijd: 8 uur<\/p>\n","protected":false},"author":1,"featured_media":6344,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,67,102],"tags":[346,352,274,345,144,347],"class_list":["post-6342","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","category-niveau-2","category-uxd","tag-css","tag-displaygrid","tag-grid","tag-html","tag-presentatie","tag-wireframe"],"rttpg_featured_image_url":{"full":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/intro-social-media-presentation.png",500,500,false],"landscape":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/intro-social-media-presentation.png",500,500,false],"portraits":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/intro-social-media-presentation.png",500,500,false],"thumbnail":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/intro-social-media-presentation-150x150.png",150,150,true],"medium":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/intro-social-media-presentation-300x300.png",300,300,true],"large":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/intro-social-media-presentation.png",500,500,false],"1536x1536":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/intro-social-media-presentation.png",500,500,false],"2048x2048":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/intro-social-media-presentation.png",500,500,false],"post-thumbnail":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/intro-social-media-presentation.png",500,500,false]},"rttpg_author":{"display_name":"Jof","author_link":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/author\/jof\/"},"rttpg_comment":0,"rttpg_category":"<a href=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/category\/html-css\/\" rel=\"category tag\">HTML-CSS<\/a> <a href=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/category\/niveau-2\/\" rel=\"category tag\">Niveau 2 - Basis<\/a> <a href=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/category\/uxd\/\" rel=\"category tag\">UXD<\/a>","rttpg_excerpt":"Tijd: 8 uur","_links":{"self":[{"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/posts\/6342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/comments?post=6342"}],"version-history":[{"count":22,"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/posts\/6342\/revisions"}],"predecessor-version":[{"id":6574,"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/posts\/6342\/revisions\/6574"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/media\/6344"}],"wp:attachment":[{"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/media?parent=6342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/categories?post=6342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/tags?post=6342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}