ONTWERPEN VAN INTERACTIEVE PRODUCTEN

Maat: px
Weergave met pagina beginnen:

Download "ONTWERPEN VAN INTERACTIEVE PRODUCTEN"

Transcriptie

1 ONTWERPEN VAN INTERACTIEVE PRODUCTEN WORKSHOP INTERACTIEF PROTOTYPE BOUWEN F. van Slooten

2 WORKSHOP INTERACTIEF PROTOTYPE BOUWEN Ontwerp Keuze tool/techniek Maken layout 2 dagen: dinsdag 23 september Ochtend: OH 113 Middag: HT 900 dinsdag 30 september hele dag OH 111 Programmeren interactie ONTWERPEN VAN INTERACTIEVE PRODUCTEN

3 DOEL WORKSHOP Introductie van software tools die gebruikt kunnen worden voor het maken van een GUI / interactieve product simulatie Hulp bij plan van aanpak en selecteren van geschikte tools voor het bouwen van de simulatie Kennismaking gebruik HTML Ondersteuning bij het bouwen ONTWERPEN VAN INTERACTIEVE PRODUCTEN

4 ONTWERP: PLAN VAN AANPAK Denk na over werkwijze en geschiktheid tool Wat moet er getest worden? Wat moet gedemonstreerd worden? Aan wie? Welke taken worden uitgevoerd Dynamische vs statische test Niveau van realisme Gewenste interactie & animatie Grafische presentatie ONTWERPEN VAN INTERACTIEVE PRODUCTEN

5 ONTWERP: LAYOUT Ook van prototype/demo maak je een ontwerp! Schetsen Opzet voor layout Flowchart, paper prototype ONTWERPEN VAN INTERACTIEVE PRODUCTEN

6 KIES EEN TOOL Axure Basis editor Adobe Dreamweaver Adobe Muse Adobe Flash HTML Browser, tablet, telefoon Andere tools (niet ondersteund): Balsamiq Mockups, Mockingbird, InVision, Justinmind, Solidify, SketchFlow ONTWERPEN VAN INTERACTIEVE PRODUCTEN

7 AXURE Flexibel, geschikt voor prototypen en bouwen apps en websites Kan complexe interacties aan axure.com Licentie beschikbaar op aanvraag via docent Trial licentie 30 dagen ONTWERPEN VAN INTERACTIEVE PRODUCTEN

8 AXURE Eenvoudig en snel te leren Uitvoer HTML: Geschikt voor plaatsen op website Verder uitwerken (buiten Axure om) mogelijk axure.com Licentie beschikbaar op aanvraag via docent axure.com/learn ONTWERPEN VAN INTERACTIEVE PRODUCTEN

9 AXURE ONTWERPEN VAN INTERACTIEVE PRODUCTEN

10 HTML Tools: Met de hand : editor + browser Grafisch : Adobe Muse Beide: Adobe Dreamweaver Voor/nadelen: Huidige standaard voor web en apps Leerdoel voor Website Design (2e kwartiel). Javascript+JQuery geeft goede animatiemogelijkheden. Mogelijkheid door ontwikkelen naar doel-applicatie Tijdintensief om interface op te zetten/aan te passen. Zelf code schrijven (of zoeken). Adobe CC bundle student-licentie bij Surfspot.nl 132 ONTWERPEN VAN INTERACTIEVE PRODUCTEN

11 HTML: EDITORS Notepad++: goede editor met syntax-highlighting, HTML preview (via plugin) Brackets.io: Editor van Adobe met ingebouwde live preview ONTWERPEN VAN INTERACTIEVE PRODUCTEN

12 FLASH Voor/nadelen Veel vrijheid in animaties Library met basis interactie en elementen Veel mogelijk met basis code Dynamisch bewerkbaar prototype Is verouderd product Tijdlijn gebaseerd: daar omheen werken is lastig Leercurve programmeren Action Script Animatie-focus sluit niet zo aan bij product applicaties Adobe Flash Professional CC Onderdeel Creative Cloud Bundle ONTWERPEN VAN INTERACTIEVE PRODUCTEN

13 HTML LAYOUT: DIV ELEMENTEN DENK IN BLOKKEN <div> <div><!-- boven --> </div> <div> </div> <div><! onder </div> --> </div> <div> </div> </div> <div><! onder --> </div> </div> ONTWERPEN VAN INTERACTIEVE PRODUCTEN

14 HTML LAYOUT: DIV ELEMENTEN DENK IN BLOKKEN Stijl: width: 300px; /* vaste breedte */ margin: 10px auto; /* centreren */ height: 300px; width: 100%; height: 300px; HTML: <div> <div><!-- boven --> </div> <div><! onder --> </div> </div> learnlayout.com ONTWERPEN VAN INTERACTIEVE PRODUCTEN

15 HTML: STATISCHE INTERFACE Na layout: blokken vullen met elementen Elementen positioneren Elementen afwerken (kleur, stijl) Stijl: button { border-radius: 5px; /* ronde hoeken */ background-color: grey; /* grijze kleur */ border: 2px solid grey; /* dunne grijze rand */ } HTML: <!-- 4 knoppen in een lijst --> <ul> <li><button>knop</button></li> <li><button>knop</button></li> <li><button>knop</button></li> <li><button>knop</button></li> </ul> ONTWERPEN VAN INTERACTIEVE PRODUCTEN

16 HTML: PROGRAMMEREN INTERACTIE JAVASCRIPT/JQUERY <div class="knoppen"> <button id="b1"></button> </div> Programma: event <div id="hoofdtekst">welkom bij IO bank,...</div> $('.knoppen button').click(function() { id=$(this).attr('id'); $('#hoofdtekst').html("je klikte op knop "+id); }); Selector ONTWERPEN VAN INTERACTIEVE PRODUCTEN

17 AAN DE SLAG Denk na over werkwijze en geschiktheid tool Wat moet er getest worden? Wat moet gedemonstreerd worden? Aan wie? Welke taken worden uitgevoerd Dynamische vs statische test Niveau van realisme Gewenste interactie & animatie Grafische presentatie Volg tutorial op vanslooten.com/ovip Bouw eigen prototype ONTWERPEN VAN INTERACTIEVE PRODUCTEN

18 DEMO S EN HANDLEIDINGEN: VANSLOOTEN.COM/OVIP

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Stappenplan: stap 4 HTML, Stylesheets vervolg slides @ vanslooten.com/websitedesign Website-design 1-12-2014

Nadere informatie

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com Welkom bij mijn website tutorial (Deel 3) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.

Nadere informatie

Interactief blok 2 code opdracht 6 - wireframe

Interactief blok 2 code opdracht 6 - wireframe Interactief blok 2 code opdracht 6 - wireframe 1. Klaarzetten bestanden Dit is een best practice voorbeeld. Maak een map aan voor je site. Hier komen alle bestanden in te staan (HTML, CSS en al je afbeeldingen).

Nadere informatie

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Afronding vak JQuery, mail(formulieren) en social media Testen Website-design 5-1-2015 2 AFRONDING VAK

Nadere informatie

De interface van de Audio Narration lijkt nu meer op de vormgeving zoals we die kennen van Storyline. Meerdere blokken zijn vanaf Studio 360 naar

De interface van de Audio Narration lijkt nu meer op de vormgeving zoals we die kennen van Storyline. Meerdere blokken zijn vanaf Studio 360 naar De interface van de Audio Narration lijkt nu meer op de vormgeving zoals we die kennen van Storyline. Meerdere blokken zijn vanaf Studio 360 naar wens los te trekken en te positioneren op het scherm. Daarnaast

Nadere informatie

Websitecursus deel 2 CSS

Websitecursus deel 2 CSS Websitecursus deel 2 CSS A Eskwadraat WebCie www@a-eskwadraat.nl 5 oktober 2015 Introductie Vorige week HTML Deze week CSS Volgende week Javascript CSS CSS (Cascading Style Sheets) bepalen hoe een website

Nadere informatie

USERINTERFACE DESIGN & SIMULATION. Fjodor van Slooten

USERINTERFACE DESIGN & SIMULATION. Fjodor van Slooten USERINTERFACE Fjodor van Slooten TODAY USERINTERFACE -Introduction -Interaction design -Prototyping Userinterfaces with Axure -Practice Workshop DESIGN & SIMULATION module8.io.utwente.nl/uidessim 2 SCHEDULE

Nadere informatie

Template maken voor Webshops van FreeWebShop

Template maken voor Webshops van FreeWebShop Template maken voor Webshops van FreeWebShop Versie 1 Peter Jan van Tuil Maart 2011 info@van-tuil.info De uitdaging. Een kennis die een site wil hebben, een webshop. Het grafisch ontwerp is er al. Voor

Nadere informatie

Stage. Presentatie. Alion in Delft 25 augustus 2014 29 januari 2015. Marleen Jansen Datum: 08-02-2015

Stage. Presentatie. Alion in Delft 25 augustus 2014 29 januari 2015. Marleen Jansen Datum: 08-02-2015 Stage Presentatie Alion in Delft 25 augustus 2014 29 januari 2015 Naam: Marleen Jansen Datum: 08-02-2015 Stagebedrijf: Alion in Delft Alion is een online campagnebureau. Ze maken (responsive) websites,

Nadere informatie

Bewerk uw eigen Digibordbij boek

Bewerk uw eigen Digibordbij boek Bewerk uw eigen Digibordbij boek Naast de presentatie van schoolboeken in het Digibordbij systeem is het voor leraren ook mogelijk aanpassingen te maken in de digitale boeken. De leraar kan via een aparte

Nadere informatie

Handleiding Adobe Creative Cloud

Handleiding Adobe Creative Cloud Handleiding Adobe Creative Cloud Deze stappen kun je alleen volgen nadat je een inwisselingscode ontvangen hebt voor Adobe Creative Cloud. Deze code ziet er als volgt uit: 34XH-RFN4-MI2Y-I7PO-6496-IE7N

Nadere informatie

Frontend ontwikkeling

Frontend ontwikkeling Frontend ontwikkeling Mark Jansen Edwin Vlieg PHPFreakz ledendag 10 november 2007 Frontend ontwikkeling De interface is je product richting de eindgebruiker Goede PHP code met een slechte interface geeft

Nadere informatie

Inleiding. 3.. Widget maken. 7... Widget publiceren. 8...Widget aanpassen. 9...Mini widget. 13...Banners

Inleiding. 3.. Widget maken. 7... Widget publiceren. 8...Widget aanpassen. 9...Mini widget. 13...Banners Handleiding Inleiding 3.. Widget maken 7... Widget publiceren 8...Widget aanpassen 9...Mini widget 13...Banners 2 2 Widget maken Als u ingelogd bent in uw account dan komt u terecht in een keuzemenu. Als

Nadere informatie

Voordelen: Nadelen: Benodigdheden: Programma s: Google Web Designer. Photoshop. Sublime (HTML-editor) Websites: Tinypng.com

Voordelen: Nadelen: Benodigdheden: Programma s: Google Web Designer. Photoshop. Sublime (HTML-editor) Websites: Tinypng.com Google Web Designer Voordelen: Sneller en makkelijker. Banners kunnen worden afgespeeld op telefoons (flash kan dit niet). Het vervangen van plaatjes kan zonder het programma op te starten. Meer FPS dan

Nadere informatie

Adobe Creative Cloud voor uw hele school. Software én Onderwijs. Goed Geregeld.

Adobe Creative Cloud voor uw hele school. Software én Onderwijs. Goed Geregeld. Adobe Creative Cloud voor uw hele school Software én Onderwijs. Goed Geregeld. Adobe Creative Cloud voor uw hele school Bent u ook op zoek naar een manier om zowel uw studenten als uw docenten te voorzien

Nadere informatie

Websitecursus deel 3 JavaScript

Websitecursus deel 3 JavaScript Websitecursus deel 3 JavaScript A Eskwadraat WebCie www@a-eskwadraat.nl 12 oktober 2015 Introductie Twee weken geleden HTML Vorige week CSS Deze week JavaScript Javascript JavaScript (ook wel JS) is een

Nadere informatie

Hoe maak je een nieuwbrief template met MailChimp? In dit document leg ik je stap voor stap uit hoe je met het drag and drop systeem van MailChimp jouw eigen layout bij elkaar sleept. Je geeft jouw template

Nadere informatie

Welkom bij Sitebuilder, een praktijksite maken in 5 stappen.

Welkom bij Sitebuilder, een praktijksite maken in 5 stappen. Welkom bij Sitebuilder, een praktijksite maken in 5 stappen. Wat is sitebuilder Site Builder is een uiterst gebruiksvriendelijk en zeer uitgebreid product waarmee u snel een eigen praktijkwebsite kunt

Nadere informatie

Aanpassingen naar Dreamweaver CC

Aanpassingen naar Dreamweaver CC 2014 2015 2013 Aanpassingen naar Dreamweaver CC Bij basiscursus webdesign Dreamweaver CS6 Danny Devriendt www.wwwsoft.be WWW-Soft GCV Kapellestraat 124 BE-8020 Oostkamp Inhoud Inhoud... 3 1 Een aantal

Nadere informatie

WordPress in het Kort

WordPress in het Kort WordPress in het Kort Een website maken met Wordpress. In minder dan één uur online! Inclusief installatie van een thema en plugins Alle rechten 2013, Rudy Brinkman, BrinkhostDotCom, http://www.brinkhost.nl

Nadere informatie

HTML Graphics. Hans Roeyen V 3.0

HTML Graphics. Hans Roeyen V 3.0 HTML Graphics Hans Roeyen V 3.0 19 maart 2015 Inhoud 1. HTML5 Canvas... 3 1.1. Het Canvas element... 3 2. SVG Element... 9 2.1. SVG vergeleken met Canvas... 9 2.2. Een cirkel tekenen met SVG... 10 2.2.1.

Nadere informatie

Grote Beer 123 3067 TR Rotterdam

Grote Beer 123 3067 TR Rotterdam Persoonlijke gegevens Geboortedatum Burgerlijke staat Nationaliteit Rijbewijs Robert de Pijper 01031982 Ongehuwd Nederlandse Ja Adres Postcode Woonplaats Grote Beer 123 3067 TR Rotterdam Telefoon Email

Nadere informatie

Interactive media Developer (IMD) In samenwerking met House of Media

Interactive media Developer (IMD) In samenwerking met House of Media Interactive media Developer (IMD) In samenwerking met House of Media Interactive Media Developer (IMD) DPS-producties maken (interactieve magazine app) epub s vervaardigen (e-book of e-magazine?) 3 dagen

Nadere informatie

Publishing & Printing Company B.V.

Publishing & Printing Company B.V. STAPPENPLAN WEBSITE Versie 1.3 Publishing & Printing Company B.V. Weth. Sangersstraat 38 (0)46-437 73 11 KVK 140.41959 6191 NA Beek web@pp-company.nl BTW NL 0085.52.861.B01 Algemene voorwaarden www.pp-company.nl

Nadere informatie

Scratch voor mobiel: AppInventor

Scratch voor mobiel: AppInventor Scratch voor mobiel: AppInventor Beginnen AppInventor is Scratch voor Android. Je maakt hiermee apps voor op je mobiele telefoon of tablet. Beginnen: Start chrome.exe en ga naar http://appinventor.mit.edu/explore

Nadere informatie

Toetsmatrijs Web Markup

Toetsmatrijs Web Markup Toetsmatrijs Web Markup Deze toetsmatrijs verstrekt de leerdoelen en toetscriteria voor het vak Web Markup competentienummers of C 1.1 Een eenvoudige webpagina bouwen, testen en publiceren op het web HTML,

Nadere informatie

Vergeleken met Storyline 2 is de indeling van het menu Insert flink aangepast. Screenrecording en nieuwe slides vallen tegenwoordig onder het menu

Vergeleken met Storyline 2 is de indeling van het menu Insert flink aangepast. Screenrecording en nieuwe slides vallen tegenwoordig onder het menu Vergeleken met Storyline 2 is de indeling van het menu Insert flink aangepast. Screenrecording en nieuwe slides vallen tegenwoordig onder het menu Slides en zijn niet meer te benaderen via het menu Insert.

Nadere informatie

Scalable Vector Graphics

Scalable Vector Graphics Scalable Vector Graphics Presentatie: Tijmen Stam Inhoud: Wat zijn Vector Graphics Ondersteuning Voor/Nadelen Voorbeelden Demonstratie Rastergraphics Opgebouwd uit een raster van beeldpunten (pixels) met

Nadere informatie

Hoofdstuk 22: Impact maken

Hoofdstuk 22: Impact maken Hoofdstuk 22: Impact maken 22.0 Inleiding In dit hoofdstuk bekijken we hoe je PowerPoint kunt gebruiken om promotie materiaal te creëren. Het legt uit hoe je PowerPoint presentaties kunt gebruiken op een

Nadere informatie

Een pagina toevoegen en/of bewerken.

Een pagina toevoegen en/of bewerken. Een pagina toevoegen en/of bewerken. Na het inloggen in het CMS zie u het volgende: 2 3. Een klik op dit menu geeft een overzicht van alle pagina s waar de website op dat moment uit bestaat: 2. Een klik

Nadere informatie

Het Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010

Het Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010 Het Wepsysteem Het Wepsysteem is een content management systeem, een systeem om zonder veel kennis van html of andere internettalen een website te onderhouden en uit te breiden. Met het Content Management

Nadere informatie

Programmeren in MyShop

Programmeren in MyShop Programmeren in MyShop Wat leer je in dit hoofdstuk: - Wat HTML en CSS is - (Een heel klein beetje) HTML - (Een heel klein beetje) CSS - Een aangepaste footer maken ( deurmat ) Eindresultaat Je gaat je

Nadere informatie

Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash

Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash INHOUDSOPGAVE Inleiding DEEL I: THEORIE Hoofdstuk 1: Richtlijnen Webstandaarden Voordelen Hoofdstuk 2: HTML De geschiedenis

Nadere informatie

Descendant selectors toepassen

Descendant selectors toepassen HTML EN CSS de basis Oefening 13.4 Descendant selectors toepassen Maak een lijst binnen een definitielijstlijst en geef de binnenste lijst een totaal andere vormgeving. 13.7 Verticaal navigatieblok Een

Nadere informatie

RESPONSIVE DRUPAL THEMING MET SASS, COMPASS, SUSY EN AURORA DRUPAL TECH TALK 25 APRIL 2013 MARC VAN GEND TRIQUANTA

RESPONSIVE DRUPAL THEMING MET SASS, COMPASS, SUSY EN AURORA DRUPAL TECH TALK 25 APRIL 2013 MARC VAN GEND TRIQUANTA RESPONSIVE DRUPAL THEMING MET SASS, COMPASS, SUSY EN AURORA DRUPAL TECH TALK 25 APRIL 2013 MARC VAN GEND TRIQUANTA AGENDA Het Doel #responsivemobilefirsthtml5buzzwordcompliant CSS preprocessing SASS Werken

Nadere informatie

De 9lives Webdesign informatie sticky

De 9lives Webdesign informatie sticky De 9lives Webdesign informatie sticky Hoe maak ik een eigen website? Een eigen site maken kan op verschillende manieren, de ene al wat beter dan de andere. Veel gebruikers beginnen met een WYSIWYG-editor,

Nadere informatie

Tutorial Axure voor Ontwerpen van Interactieve Producten

Tutorial Axure voor Ontwerpen van Interactieve Producten Deze handleiding is gebaseerd op Axure RP Pro 7.0. Een probeer-versie van Axure die 30 dagen werkt kan je downloaden via axure.com/download. Een permanente licentie is te verkrijgen via de docent. Axure

Nadere informatie

Uw TEKSTEDITOR - alle iconen op een rij

Uw TEKSTEDITOR - alle iconen op een rij Uw TEKSTEDITOR - alle iconen op een rij Hieronder ziet u alle functionaliteiten van uw teksteditor onder elkaar ( op alfabetische volgorde). Afbeelding (zie foto) Bestanden (zie link) Broncode Citaat Documenten

Nadere informatie

HTML-EDITOR GEBRUIKEN

HTML-EDITOR GEBRUIKEN HTML-EDITOR GEBRUIKEN Over TinyMCE TinyMCE is een kleine What-You-See-Is-What-You-Get (WYSIWYG) editor voor teksten. De bediening vindt plaats in de web browsers, zoals MSIE of Mozilla. Het werken met

Nadere informatie

JavaScript. 0 - Wat is JavaScript? JavaScript toevoegen

JavaScript. 0 - Wat is JavaScript? JavaScript toevoegen 0 - Wat is JavaScript? JavaScript is hele andere koek dan Scratch. Het wordt ook door professionele programmeurs gebruikt. Doordat er veel mensen gebruik maken van JavaScript is er veel informatie over

Nadere informatie

Inhoud. Introductie tot de cursus

Inhoud. Introductie tot de cursus Inhoud Introductie tot de cursus 1 De functie van de cursus 7 2 De inhoud van de cursus 7 2.1 Voorkennis 7 2.2 Leerdoelen van de cursus 8 2.3 Opbouw van de cursus 8 3 Leermiddelen en wijze van studeren

Nadere informatie

Onderzoeksvaardigheden 2

Onderzoeksvaardigheden 2 Performance van Phonegap Naam: Datum: april 2012 Studentnummer: 0235938 Opleiding: CMD Docenten: Pauline Krebbers Modulecode: MEDMO101DT Modulenaam: Onderzoeksvaardigheden 2 / Media & Onderzoek Inhoudsopgave

Nadere informatie

OPDRACHTKAART. Thema: Multimedia. Het multimedia productieproces 3. De uitvoering MM-02-06-01

OPDRACHTKAART. Thema: Multimedia. Het multimedia productieproces 3. De uitvoering MM-02-06-01 OPDRACHTKAART MM-02-06-01 De uitvoering Voorkennis: Je hebt multimedia-opdrachten 1 tot en met 5 (MM-02-01 t/m MM-02-05) afgerond. Je kunt met behulp van multimedia-software, zoals bijvoorbeeld Macromedia

Nadere informatie

MailPlus-template voor BrightEdit

MailPlus-template voor BrightEdit Handleiding: MailPlus-template voor BrightEdit Deze handleiding is bedoeld voor MailPlus Partners en in te zetten voor MailPlus Marcom Inhoudsopgave Introductie... 1 1 De Template Manager... 2 1.1 Template

Nadere informatie

Naam stagiair: Nick Swaerdens. Klas: 3IV2. Praktijkopleider: Jordy Pouw. Stagebegeleider: Ron Spitse. Stage periode tweede verslag:

Naam stagiair: Nick Swaerdens. Klas: 3IV2. Praktijkopleider: Jordy Pouw. Stagebegeleider: Ron Spitse. Stage periode tweede verslag: Nick Swaerdens 3IV2 10 / 06 / 2015 Naam stagiair: Nick Swaerdens Klas: 3IV2 Praktijkopleider: Jordy Pouw Stagebegeleider: Ron Spitse Stage periode tweede verslag: 2 april 2015 10 juni 2015 Inlever datum:

Nadere informatie

Internet Standaarden HC4

Internet Standaarden HC4 Internet Standaarden HC4 Hogeschool van Amsterdam - Instituut voor Interactieve Media 1 Invloed van Games Laatste ontwikkelingen Gebruik van Games 11 oktober 2007 Hogeschool van Amsterdam - Instituut voor

Nadere informatie

Inhoud. Introductie tot de cursus

Inhoud. Introductie tot de cursus Inhoud Introductie tot de cursus 1 De functie van de cursus 7 2 De inhoud van de cursus 7 2.1 Voorkennis 7 2.2 Leerdoelen van de cursus 8 2.3 Opbouw van de cursus 8 3 Leermiddelen en wijze van studeren

Nadere informatie

Joomla Template & Bootstrap 3.0. JUGA 19-11-2013 Henk Rijneveld (henk@henkrijneveld.nl)

Joomla Template & Bootstrap 3.0. JUGA 19-11-2013 Henk Rijneveld (henk@henkrijneveld.nl) Joomla Template & Bootstrap 3.0 JUGA 19-11-2013 Henk Rijneveld (henk@henkrijneveld.nl) De case Joomla 3.laatst Helemaal responsive Fixed kop- en voetgebied Specifieke chrome Zoveel mogelijk zelf Joomla

Nadere informatie

Werken met afbeeldingen in webpagina's

Werken met afbeeldingen in webpagina's Werken met afbeeldingen in webpagina's In webpagina's komen heel vaak afbeeldingen voor. Toch gaan webpagina's helemaal anders om met afbeeldingen dan bijvoorbeeld een PowerPoint-presentatie of een Word-document.

Nadere informatie

SESSIE CAMTASIA STUDIO 7.1 DEEL 2

SESSIE CAMTASIA STUDIO 7.1 DEEL 2 1 OOF project Didactische scenario s voor een goed gebruik van webcolleges 13 september 2011 sessie Camtasia 7.1 OOF PROJECT DIDACTISCHE SCENARIO S VOOR EEN GOED GEBRUIK VAN WEBCOLLEGES 13 SEPTEMBER 2011

Nadere informatie

App creation made simple!

App creation made simple! App creation made simple! VAN PRINT NAAR APPS Pieter van der Kruijf Accountmanager @ LayerGloss In m n functie als Accountmanager binnen LayerGloss spreek ik veel klanten, waaronder veel uitgevers, die

Nadere informatie

Interactieve formulieren met gedragingen en Spry

Interactieve formulieren met gedragingen en Spry 14 Interactieve formulieren met gedragingen en Spry De belangrijkste punten van hoofdstuk 14 Kennismaken met Gedragingen (Behaviors). Webeffecten leren aanmaken. De verschillende soorten Gedragingen gebruiken.

Nadere informatie

Je kiest bij Voeg een widget toe het widget waarvoor je een embed wilt instellen. Of je gaat naar een bestaande reeds ingestelde widget toe.

Je kiest bij Voeg een widget toe het widget waarvoor je een embed wilt instellen. Of je gaat naar een bestaande reeds ingestelde widget toe. Embeds Versie 2.0 Introductie Wil je één van de grafieken uit Finchline op een website tonen? Dit kan met behulp van de embed optie. Een embed is simpel gezegd een plaatje dat geïntegreerd kan worden.

Nadere informatie

HTML. Media. Hans Roeyen V 3.0

HTML. Media. Hans Roeyen V 3.0 Media Hans Roeyen V 3.0 12 maart 2015 Inhoud 1. (Multi)Media op websites... 3 2. Flash en Websites... 4 3. Video op je website... 4 3.1. YouTube insluiten op de pagina... 4 3.2. Video zonder YouTube...

Nadere informatie

Markup: CSS en HTML5. Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen

Markup: CSS en HTML5. Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen Markup: CSS en HTML5 Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen 1 CSS: Waarom ook alweer. HTML was bedoeld voor documentstructuur (text met verschillende levels in headings en body text)

Nadere informatie

SMART Notebook 11.2- software voor Windows - en Mac -computers

SMART Notebook 11.2- software voor Windows - en Mac -computers Opmerkingen bij publicatie SMART Notebook 11.2- software voor Windows - en Mac -computers Over deze opmerkingen bij publicatie In deze opmerkingen bij publicatie vindt u een overzicht van de functies van

Nadere informatie

Adobe Dreamweaver CS4 startersgids

Adobe Dreamweaver CS4 startersgids Adobe Dreamweaver CS4 startersgids Ontwerp van statische websites met XHTML en CSS Versie 1.0 - juni 2009 Adobe, Macromedia, Dreamweaver, Fireworks en Flash zijn handelsmerken of gedeponeerde handelsmerken

Nadere informatie

Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale.

Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale. Een HTML-sjabloon Denk goed na hoe je webpagina er moet uitzien. Wil je een webpagina met een horizontale vormgeving (zoals bij een schermpresentatie)? Wil je een webpagina met een verticale vormgeving

Nadere informatie

De clientkant van webapplicaties in het universitaire onderwijs

De clientkant van webapplicaties in het universitaire onderwijs De clientkant van webapplicaties in het universitaire onderwijs ir. S. Stuurman universitair docent bij de faculteit Informatica van de Open Universiteit, Sylvia.Stuurman@ou.nl ir. H. Koppelman universitair

Nadere informatie

Afbeeldingen - formaat aanpassen

Afbeeldingen - formaat aanpassen Wat leer je in dit hoofdstuk: - Twee nieuwe manieren om foto s in je webshop te plaatsen - Hoe je het formaat van afbeeldingen kunt aanpassen Eindresultaat Een foto met de juiste afmetingen met een goede

Nadere informatie

Eigen Widgets in CRM. Introductie. Limitering. Widgets beschikbaar stellen. Tips & Tricks Eigen Widgets in CRM

Eigen Widgets in CRM. Introductie. Limitering. Widgets beschikbaar stellen. Tips & Tricks Eigen Widgets in CRM Tips & Tricks Eigen Widgets in CRM Eigen Widgets in CRM Introductie De WebUI van CRM 7.0 maakt het mogelijk om je eigen widgets te maken en deze in je eigen view te gebruiken. Dat kan door gebruik te maken

Nadere informatie

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com Welkom bij mijn website tutorial (Deel 5) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.

Nadere informatie

Web Games en het mobiele web. Hoorcollege Webdesign 9 6 juni 2014 Christof van Nimwegen

Web Games en het mobiele web. Hoorcollege Webdesign 9 6 juni 2014 Christof van Nimwegen Web Games en het mobiele web Hoorcollege Webdesign 9 6 juni 2014 Christof van Nimwegen Webgames: scope dit college onderdeel Games staan nu centraal in deze faculteit. In een cursus over webdesign MOET

Nadere informatie

Animation. Info-animation Explanimation MARKETING & COMMUNICATIE - DIGITALE VORMGEVING JANUARI 2013

Animation. Info-animation Explanimation MARKETING & COMMUNICATIE - DIGITALE VORMGEVING JANUARI 2013 Animation Info-animation Explanimation 1 Promo Opdracht Animatie Promo In de vorige periode heb je voor Promo.nl 2 x een banner gemaakt. Verwerk de twee banners in een animatie in Photoshop. De animatie

Nadere informatie

Handleiding website. Inloggen Start uw internet browser en ga naar http://www.rbaoreven.nl/. Laatst bijgewerkt: 17 mei 2008

Handleiding website. Inloggen Start uw internet browser en ga naar http://www.rbaoreven.nl/. Laatst bijgewerkt: 17 mei 2008 Handleiding website Laatst bijgewerkt: 17 mei 2008 In deze handleiding staat alles wat u nodig heeft om een bericht op de website van de Reddingsbrigade Aoreven Heythuysen te plaatsen. Alles wordt in woord

Nadere informatie

formulieren met gedragingen en

formulieren met gedragingen en 14 Interactieve formulieren met gedragingen en SPRY De belangrijkste punten van hoofdstuk 14 Kennismaken met behaviors. Webeffecten leren aanmaken. De verschillende soorten behaviors gebruiken. Wat leert

Nadere informatie

Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen.

Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen. CSS Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen. In CSS maken we een onderscheid tussen 2 soorten elementen in een webpagina: 1. Sommige elementen

Nadere informatie

Een imagemap of klikkaart is een standaard afbeelding (jpg, gif of png) waarop bepaalde zones aanklikbaar worden gemaakt.

Een imagemap of klikkaart is een standaard afbeelding (jpg, gif of png) waarop bepaalde zones aanklikbaar worden gemaakt. Imagemaps Een image map bestaat uit een eenvoudige afbeelding (jpeg, gif...). Door bepaalde delen van de afbeelding aanklikbaar te maken, kan u bezoekers naar verschillende pagina's in de website doorsturen.

Nadere informatie

Scratch in drie uur. Hallo, mijn naam is Minti Mint! Ik ga je uitleggen hoe je je eigen computerspel kunt maken. We gaan een racespel maken!

Scratch in drie uur. Hallo, mijn naam is Minti Mint! Ik ga je uitleggen hoe je je eigen computerspel kunt maken. We gaan een racespel maken! Scratch in drie uur Hallo, mijn naam is Minti Mint! Ik ga je uitleggen hoe je je eigen computerspel kunt maken. We gaan een racespel maken! Bernd Gärtner Nederlandse vertaling en bewerking: Martine Segers

Nadere informatie

Er is nog heel wat voor nodig om van alle losse HTML-code

Er is nog heel wat voor nodig om van alle losse HTML-code Boxmodel, weergavemodel en positionering 9 Er is nog heel wat voor nodig om van alle losse HTML-code een toonbare pagina te maken, meer dan u misschien op het eerste gezicht denkt. Als de HTML-code is

Nadere informatie

1 De basis. Documenten om te bewaren. Extra leesvoer: Start Here Handleiding Gamemaker. 2 Geschiedenis van Games en Gamegenres

1 De basis. Documenten om te bewaren. Extra leesvoer: Start Here Handleiding Gamemaker. 2 Geschiedenis van Games en Gamegenres Hieronder staat de inhoudsopgave van de cursus gamedesign op www.gameskool.nl. (wijzigingen in het cursusprogramma onder voorbehoud). De lessen bestaan uit (instructie- )video s, video s met voorbeelden,

Nadere informatie

Philips E-motion. Protoyping/Interactieontwerp. Kwartaal 1 jaar 3. Inhoud Onderzoek Schetsen Mockups Wireframes Flowcharts

Philips E-motion. Protoyping/Interactieontwerp. Kwartaal 1 jaar 3. Inhoud Onderzoek Schetsen Mockups Wireframes Flowcharts Protoyping/Interactieontwerp Philips E-motion Kwartaal 1 jaar 3 Inhoud Onderzoek Schetsen Mockups Wireframes Flowcharts Maarten de Splenter COHORT0506 000119739 Onderzoek Bij het ontwikkelen van de E-motion

Nadere informatie

Overzicht cursussen Informatievaardigheid Universitaire Bibliotheken Leiden Collegejaar 2013-2014

Overzicht cursussen Informatievaardigheid Universitaire Bibliotheken Leiden Collegejaar 2013-2014 Overzicht cursussen Informatievaardigheid Universitaire Bibliotheken Leiden Collegejaar 2013-2014 Deze brochure geeft een overzicht van de cursussen op het gebied van informatievaardigheid die worden aangeboden

Nadere informatie

Web Presence Builder. Inhoud

Web Presence Builder. Inhoud Web Presence Builder Inhoud Inhoud... 1 Wat is Web Presence Builder?... 2 Het categoriescherm... 2 De eerste stappen naar een eigen website... 3 Onderwerp selecteren en website naam aanpassen... 3 Vooraf

Nadere informatie

Globale kennismaking

Globale kennismaking Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina

Nadere informatie

Opdracht: Interactive Content Creation.

Opdracht: Interactive Content Creation. Opdracht: Interactive Content Creation. Naam: Mick Bitter (469062) Docent: Ger de Vries Semester: CICA Course: ICC Eerste analyserapport en het eerste beoordelingsproduct voor ICC Inleiding Analyseopdracht

Nadere informatie

Tutorial HTML CSS met Adobe Dreamweaver CSx

Tutorial HTML CSS met Adobe Dreamweaver CSx Tutorial HTML CSS met Adobe Dreamweaver CSx Johan Smits, Saxion, Minor Internetmarketing, WCM1, week 4 Introductie Bij het werken met content op een website is het van groot belang om tekst en vormgeving

Nadere informatie

3 Website opbouwen: vervolg

3 Website opbouwen: vervolg 3 Website opbouwen: vervolg 3.1 Elementen 3.1.1 Bestand Op je website kan je een bestand plaatsen (doc, pdf, ) dat door je bezoekers gedownload kan worden 3.1.2 Links. Zowel bij het typen van tekst (2.1.1)

Nadere informatie

USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR

USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR WELKOM AGENDA Introductie Korte algemene inleiding Usability Usability voor mobiele apparaten Vragen - afsluiting INTRODUCTIE Peter Kassenaar;

Nadere informatie

ActiveBuilder Handleiding

ActiveBuilder Handleiding ActiveBuilder Handleiding Auteur: TalkActive I/S Datum: Juli 2004 Versie: R. 1.01 Taal: Nederlands Copyright 2004 - Talk Active alle rechten voorbehouden. Inhoud: 1. INTRODUCTIE...2 2. SNEL STARTEN...3

Nadere informatie

Hartelijk dank voor het aanvragen van een demo-account voor bettermarks wiskunde.

Hartelijk dank voor het aanvragen van een demo-account voor bettermarks wiskunde. Beste mevrouw/meneer, Hartelijk dank voor het aanvragen van een demo-account voor bettermarks wiskunde. In deze handleiding vindt u de belangrijkste informatie om meteen aan de slag te gaan. Mocht u vragen

Nadere informatie

Gebruikershandleiding websitebeheer m.b.v. Wordpress

Gebruikershandleiding websitebeheer m.b.v. Wordpress Gebruikershandleiding websitebeheer m.b.v. Wordpress Saft Websites Gebruikershandleiding Wordpress pag. 1 Inhoudsopgave Inhoudsopgave Inhoudsopgave Inleiding Inloggen in administratorgedeelte Informatie

Nadere informatie

Een ASP.NET applicatie opzetten. Beginsituatie:

Een ASP.NET applicatie opzetten. Beginsituatie: Hoofdstuk 1 Een ASP.NET applicatie opzetten Beginsituatie: Windows XP Pro, Windows Vista Pro of Windows 7 Pro Visual Studio.NET moet zijn geïnstalleerd. Let hierbij op dat de Express versie niet voldoet.

Nadere informatie

HTML richtlijnen e-mail marketing. part of the valley

HTML richtlijnen e-mail marketing. part of the valley e-mail marketing pagina 2/9 geschreven door Maarten van Benthem, front-end developer datum 1 oktober 2009 versie 1.0 Copyright Alle rechten voorbehouden. De inhoud van dit document blijft eigendom van

Nadere informatie

Aanpassen mailtemplates

Aanpassen mailtemplates Aanpassen mailtemplates figlo.com De mails die automatisch vanuit het systeem worden verstuurd bij het aanmaken of wijzigen van nieuwe accounts kunnen naar wens worden aangepast. Onderstaande geeft een

Nadere informatie

Concept Deze week hebben wij ervoor gekozen om de tiled display, die rechts van de ESC balie staat, te verbeteren door een interactieve applicatie eraan te verbinden. Op dit moment is het display, alhoewel

Nadere informatie

Pas op voor de besmettelijke PORTFOLIOSIS!

Pas op voor de besmettelijke PORTFOLIOSIS! Pas op voor de besmettelijke PORTFOLIOSIS! Nadenken Voorbereiding Maken Presenteren NADENKEN Nadenken Voorbereiding Maken Presenteren Soul-searching Persoonlijkheid Ervaring Doelen Waarden Sterktes en

Nadere informatie

Release notes Argo 7. Interactieve LMS interface. Nieuwe interface voor lesmodules

Release notes Argo 7. Interactieve LMS interface. Nieuwe interface voor lesmodules Release notes Argo 7 Argo 7 heeft een interactief web design. Het is optimaal afgestemd op de grote diversiteit aan computerbeeldschermen, van grootbeeld desktops en notebooks tot tablets en smart phones.

Nadere informatie

Technische specificaties

Technische specificaties Praktische info Bestelbon: aanduiding reservatie digitale krant advertentie + bevestiging aanlevering materiaal, te sturen naar: booking@trustmedia.be Materiaal digitale krant: tablet@trustmedia.be 2 werkdagen

Nadere informatie

Grafische automatisering vak van de toekomst

Grafische automatisering vak van de toekomst Grafische automatisering vak van de toekomst Presentatie relatienetwerkdag 2015 Twin Media Hallo! CLAUDIA VAN DER POL Meer dan 15 jaar ervaring als vormgever van Vakbladen/Tijdschriften/Boeken Daarnaast

Nadere informatie

CrossLab. een nieuwe afstudeerrichting

CrossLab. een nieuwe afstudeerrichting een nieuwe afstudeerrichting CrossLab ontwerpen van & voor & met digitale media in een labomgeving media technologie is er gewoon... media technologie is er gewoon... CrossLab waarbij de ontwerper de

Nadere informatie

Stap 1. Installeren van CloudSuggest app

Stap 1. Installeren van CloudSuggest app Welkom bij de installatie handleiding van CloudSuggest! Deze handleiding begeleid je door het proces van het installeren van CloudSuggest voor jouw SEOshop. Heb je vragen over deze installatie? Neem dan

Nadere informatie

Zonnepanelen Hoe krijg je de data op je website?

Zonnepanelen Hoe krijg je de data op je website? Zonnepanelen Hoe krijg je de data op je website? Beste website-bezoeker, Omdat ik al heel wat vragen kreeg over het gedeelte zonne-energie op mijn website, heb ik besloten om de werkwijze die ik gevolgd

Nadere informatie

Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum: 23-1-2011

Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum: 23-1-2011 Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum: 23-1-2011 1 Inhoudsopgave Wat gaan we doen?... 4 Eerst wat uitleg:... 4 Wat is HTML:... 4 Wat is CSS:... 4 Wat is het resultaat

Nadere informatie

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com Welkom bij mijn website tutorial (Deel 7) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.

Nadere informatie

Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme >

Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Basis-theme Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Naam invullen en de code van basis-theme kopiëren en erin plakken

Nadere informatie

Flash Website ActionScript handleiding Linda Pieke

Flash Website ActionScript handleiding Linda Pieke Flash Website ActionScript handleiding Linda Pieke Basis ActionScript Tutorial Inhoudsopgave Basis ActionScript Tutorial... 2 Werkwijzer volgorde:... 2 Actionscript tutorial... 3 De Buttons... 3 De Webpagina

Nadere informatie

Cluster 1 Realiseert. 4 Beschrijving van de beroepssituatie behorende bij deze leereenheid

Cluster 1 Realiseert. 4 Beschrijving van de beroepssituatie behorende bij deze leereenheid LEEREENHEID HTML/CSS Dit document bestaat uit twee onderdelen - Onderdeel Leereenheid - Onderdeel Onderwijsproduct 1 Naam leereenheid In deze tabel staat de naam en het type van de leereenheid Leereenheid

Nadere informatie

HTML en CSS gevorderd

HTML en CSS gevorderd HTML en CSS gevorderd Inhoudsopgave Inleiding! 3 Opbouw webpage en css! 4 DIVʼs of iframes?! 8 Eigen icoon in de adresbalk van de browser! 8 Web-editors! 8 Koppelen van css-bestanden! 9 Browser afhankelijke

Nadere informatie

CURSUSAGENDA T/M APRIL 2017

CURSUSAGENDA T/M APRIL 2017 Cursus Acrobat - Formulieren Cursus Acrobat - Grafisch Cursus Acrobat - Kantoor Cursus After Effects Cursus Illustrator Cursus InDesign Cursus Photoshop Cursus Premiere Pro Cursus RoboHelp Cursus SketchUp

Nadere informatie