HTML Graphics. Hans Roeyen V 3.0
|
|
- Augusta ten Wolde
- 8 jaren geleden
- Aantal bezoeken:
Transcriptie
1 HTML Graphics Hans Roeyen V maart 2015
2 Inhoud 1. HTML5 Canvas Het Canvas element SVG Element SVG vergeleken met Canvas Een cirkel tekenen met SVG Verschillende figuren Hans Roeyen HTML Graphics 2-12
3 1. HTML5 Canvas Het Canvas laat zich het best omschrijven als een "scriptable bitmap". Met andere woorden: je kunt met Javascript tekenen en animeren. Het feit dat het Canvas gebruikt kan worden zonder het installeren van plug-ins maakt het in de toekomst een erg belangrijk onderdeel van HTML5. De oorsprong van Canvas ligt bij Apple, waar het ontwikkeld werd voor Safari en het Dashboard. Later is het opgenomen in HTML5. Het is bedoeld om op bitmap niveau te tekenen. Je kunt er games, diagrammen, interactieve graphics en dergelijke mee maken. De combinatie met audio en video is eveneens mogelijk maar wordt afgeraden door W3C. Canvas ondersteunt 2D (en ook 3D ) context voor het tekenen en manipuleren van afbeeldingen. Ondersteuning voor 3D is nog experimenteel. Het Canvas heeft twee belangrijke eigenschappen. Ten eerste is het een Bitmap, dit in tegenstelling tot Flash en Silverlight. We werken dus met pixels en niet met vectoren. Ten tweede werkt het als "fire and forget". Wanneer er iets op het Canvas wordt getekend, dan wordt dat niet bij gehouden in een DOM. Het is dus niet mogelijk om een bepaald getekend object later weer aan te spreken. Dit lijkt erg onhandig, maar zorgt er wel voor dat het Canvas erg snel is. Er wordt namelijk geen collectie van objecten bijgehouden en daardoor kan er in een hoog tempo getekend worden Het Canvas element Het Canvas element zelf doet eigenlijk niet zo veel. Je kunt het element het beste zien als een leeg stuk papier. Als attributen geef je de breedte en hoogte op en in het element specificeer je de content die gebruikers te zien krijgen wanneer ze een browser gebruiken die het Canvas element niet ondersteunt. Dit kan een simpele melding of afbeelding zijn, maar ook een vervangende Flash- of Silverlight-applicatie. Het toevoegen van de <canvas> tag is niet anders dan je al hebt gezien in de lessen HTML. <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>canvas</title> </head> <canvas id="drawingcanvas" width="500" height="300"></canvas> De waarde van de attributen width en height bepalen de afmeting van het bruikbare gebied om te tekenen. Indien je geen waarden opgeeft, worden de default waarden 300 x 150 gebruikt. Het gebruik van een ID is niet verplicht maar dat maakt het gemakkelijker om te adresseren in het script. De canvas tag geeft je niet meer dan een rechthoek. Hans Roeyen HTML Graphics 3-12
4 Om te kunnen tekenen heb je dus nog iets nodig want alles wat je nu hebt gemaakt is een afbakening waarbinnen je iets kunt doen. Maar er is nog geen materiaal om op te tekenen, zeg maar dat er nog geen papier of doek is. De manier om dat toe te voegen is het toevoegen van de context. Daar komt een beetje JavaScript bij kijken: <script> var canvas = document.getelementbyid(drawingcanvas); var ctx = canvas.getcontext('2d'); </script> De eerste regel declareert een variabele var canvas om de waarden in op te slaan en gebruikt de method getelementbyid om het canvas te selecteren (in dit voorbeeld is dat drawingcanvas). De tweede regel declareert de variabele var ctx en gebruikt de method getcontext om de (2D) context te selecteren. De functie window.onload zorgt ervoor dat het tekenen niet start voor het volledige document geladen is in de browser. Een volledige voorbeeldcode ziet er als volgt uit: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>canvas Test 1</title> <style> canvas { border: 1px dashed black; } </style> <script> window.onload = function() { var canvas = document.getelementbyid("drawingcanvas"); var context = canvas.getcontext("2d"); // (Hier komt je tekening.) }; </script> </head> <canvas id="drawingcanvas" width="500" height="300"></canvas> Het resultaat van deze oefening is niets meer dan een rechthoek met stippellijntjes. Het Context object bevat alle tekenfunctionaliteit. Zo is het mogelijk om lijnen, bogen, vierkanten, vlakken en teksten te tekenen. Hans Roeyen HTML Graphics 4-12
5 Een andere oefening <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>canvas Test 2</title> <style> canvas { border: 1px dashed black; } </style> <script> window.onload = function() { var canvas = document.getelementbyid("drawingcanvas"); var context = canvas.getcontext("2d"); // stelt de lijndikte en de kleur in voor alle lijnen context.linewidth = 20; context.strokestyle = "rgb(205,40,40)"; // tekent de eerste lijn context.moveto(10,50); context.lineto(400,50); context.linecap = "butt"; context.stroke(); // tekent de tweede lijn met een rond einde context.beginpath(); context.moveto(10,120); context.lineto(400,120); context.linecap = "round"; context.stroke(); // tekent de derde lijn met een recht einde context.beginpath(); context.moveto(10,190); context.lineto(400,190); context.linecap = "square"; context.stroke(); }; </script> </head> <canvas id="drawingcanvas" width="500" height="300"></canvas> Hans Roeyen HTML Graphics 5-12
6 Het resultaat van deze oefening ziet er zo uit Hans Roeyen HTML Graphics 6-12
7 Oefening 3 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>canvas Test 3</title> <style> canvas { border: 1px dashed black; } </style> <script> window.onload = function() { var canvas = document.getelementbyid("drawingcanvas"); var context = canvas.getcontext("2d"); context.moveto(250,50); context.lineto(50,250); context.lineto(450,250); context.closepath(); // kleurt het figuur. context.fillstyle = "blue"; context.fill(); // tekent de rand rond het canvas. context.linewidth = 10; context.strokestyle = "red"; context.stroke(); }; </script> </head> <canvas id="drawingcanvas" width="500" height="300"></canvas> Hans Roeyen HTML Graphics 7-12
8 Het resultaat van deze oefening ziet er zo uit Meer informatie en oefeningen voor de canvas tag vind je op W3Schools Bij Mozilla Developer Network Hans Roeyen HTML Graphics 8-12
9 2. SVG Element De afkorting SVG staat voor Scalable Vector Graphics. Het zijn vector-based graphics in XML formaat. Het voordeel van vector-based afbeeldingen is dat ze geen kwaliteit verliezen als ze vergroot of aangepast worden. Elk element en attribuut van een SVG bestand kan geanimeerd worden. Om met SVG te kunnen werken is wel enige voorkennis van XML nodig. Je hebt natuurlijk ook kennis van HTML5 nodig maar zover ben je al. Omdat het in XML wordt geschreven kun je een SVG afbeelding met een tekstverwerker maken. Het is misschien belangrijk om te vermelden dat de grootste steun voor dit opensource formaat afkomstig is van Flash. Het grote voordeel dat SVG heeft tegenover Flash is dat het compatibel is met andere standaarden zoals het DOM. Flash heeft als grootste nadeel dat het afhankelijk is van proprietary technologie en dus niet open-source is. Er is een aparte tutorial op W3school voor dit onderwerp: SVG vergeleken met Canvas Met SVG schrijf (of beschrijf) je 2D afbeeldingen in XML. Canvas tekent ook 2D afbeeldingen maar in real-time met JavaScript. SVG is op XML gebaseerd wat maakt dat elk element beschikbaar is in het SVG DOM. Eenvoudig gezegd heeft dat tot gevolg dat je JavaScript event handlers kunt gebruiken voor elk element. Een ander verschil tussen beide is dat een afbeelding die je met SVG maakt, als object bewaard wordt in je browser. Als er attributen van een SVG object gewijzigd worden zal de browser automatisch de afbeelding tonen volgens de nieuwe waarden. Canvas wordt pixel voor pixel opgebouwd door de browser, maar eens de afbeelding klaar is wordt ze vergeten door de browser. Als er attributen zoals de positie of afmeting aangepast worden zal de browser de volledige afbeelding opnieuw moeten hertekenen. Canvas Is afhankelijk van de resolutie Geen ondersteuning voor event handlers Zwakke ondersteuning voor het renderen van tekst Het resultaat iste bewaren als png of jpg bestand Best geschikt voor grafische games SVG Is onafhankelijk van de resolutie Wel ondersteuning voor event handlers Best geschikt voor applicaties die grote bereiken renderen, zoals Google Maps Trage rendering voor complexe afbeeldingen als het DOM van toepassing is Niet geschikt voor games Hans Roeyen HTML Graphics 9-12
10 2.2. Een cirkel tekenen met SVG <!DOCTYPE html> <html> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="orange" /> Uw browser heeft geen ondersteuning voor inline SVG. </svg> Dit is het resultaat van deze oefening De <svg> tag heeft de attributen voor de breedte en de hoogte. Binnen de tag geef je aan welke figuur je wilt tekenen, in dit voorbeeld is dat een cirkel. Deze tag heeft als attributen de positie van de cirkel op de x- en y-as. De X-as bepaald de horizontale positie en de Y-as de verticale positie. Let wel op dat je de positie van de figuur binnen de ingestelde afmetingen van de <svg> tag plaatst. Anders wordt je figuur niet getoond. Zoals je waarschijnlijk vermoedde stel je met het R-attribuut de straal van de cirkel in. Let ook hier op de waarde die je kies voor dit attribuut, best maak je vooraf een schets om te weten wat je wilt bereiken. Hans Roeyen HTML Graphics 10-12
11 Verschillende figuren Er zijn veel verschillende figuren die je met SVG kunt tekenen. Een paar voorbeelden: Een rechthoek <!DOCTYPE html> <html> <svg width="600" height="200"> <rect width="600" height="200" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(255,0,128)" /> Uw browser heeft geen ondersteuning voor inline SVG. </svg> Het resultaat van deze oefening ziet er nogal fel uit. Hans Roeyen HTML Graphics 11-12
12 Een ellips <!DOCTYPE html> <html> <svg height="140" width="500"> <ellipse cx="150" cy="70" rx="120" ry="40" style="fill: purple;stroke:green;strokewidth:10" /> Uw browser heeft geen ondersteuning voor inline SVG. </svg> Deze oefening geeft je een resultaat dat er ongeveer zo kan uitzien De andere vormen die met SVG gemaakt kunnen worden zijn eigenlijk zo goed als oneindig. Door de tags zoals Polygon en Path heb je de mogelijkheid om je eigen vormen te maken, wat je maar wenst. De mogelijkheden zijn te uitgebreid om hier te documenteren, een vollediger overzicht vind je bijvoorbeeld op en De opmaak van de vormen doe je met het style element, wat een inline CSS opmaak mogelijk maakt. Hierdoor zijn alle mogelijkheden van CSS voor SVG te gebruiken. Een volledig overzicht van SVG Hans Roeyen HTML Graphics 12-12
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 informatieScalable 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 informatieVoordelen: 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 informatieRoc Zadkine. Javascript Car. Door: K.Bakker versie 1.0
Roc Zadkine Javascript Car Door: K.Bakker versie 1.0 mei 2016 distributielijst versie historie versie datum auteur Opmerkingen 1.0 2-2-2016 k.bakker inhoudsopgave 1. Project benodigdheden 3 2. Benodigdheden
Nadere informatieRoc Zadkine. Javascript SpaceGame. Door: K.Bakker versie 2.0
Roc Zadkine Javascript SpaceGame Door: K.Bakker versie 2.0 juni 2016 distributielijst versie historie versie datum auteur Opmerkingen 1.0 2-2-2016 k.bakker 1.0 2-2-2016 k.bakker inhoudsopgave 1. Game in
Nadere informatieGoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps
Google Maps INHOUDSOPGAVE Inleiding.. 3 Een Google Map maken.. 4 Een eigen adres opgeven 7 Inzoomen op je eigenkaart. 8 Satellietbeeld op je eigenkaart. 10 Markers plaatsen. 13 Tekstballon plaatsen.. 15
Nadere informatie8 Word Art Teksten. De documentatie van deze API is te lezen in Bijlage P: WordArt Documentatie.
8 Word Art Teksten De tbvectorfont library maakt gebruik van alle standaard functionaliteit die de browsers bieden. Naast deze standaard functionaliteit ziet Tingly Games graag ook uitgebreidere tekst
Nadere informatieZelf een eenvoudige website opzetten. Jorrit Groenevelt & Arjan Kraak Juni 2013
Zelf een eenvoudige website opzetten Jorrit Groenevelt & Arjan Kraak Juni 2013 1 Inleiding/Doel Een onmisbaar onderdeel van het starten van een bedrijf is het opzetten van een website. Een onderneming
Nadere informatieillustrator Alleen een hands- on.. LESBRIEVEN
illustrator LESBRIEVEN HANDS- ON: OPDRACHTEN: SITE MET ALLE OEFENINGEN VOORKENNIS: PLAATSEN WEBINHOUD GEBRUIK FLASH Adobe illustrator Hét pakket uit de Adobe- suite om vector- a?eeldingen mee te bewerken
Nadere informatieJarno Verhoogt 21 mei 2014 Stud. Nr. 500684953 Docent: Joost Faber. Deeltoets 2: Hoe maak je met javascript een eenvoudige slideshow?
Jarno Verhoogt 21 mei 2014 Stud. Nr. 500684953 Docent: Joost Faber Deeltoets 2: Hoe maak je met javascript een eenvoudige slideshow? Inleiding Dit is een eenvoudige handleiding om in javascript een simpele
Nadere informatieEigen 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 informatieDe Kleine WordPress Handleiding
Introductie Dit is geen uitgebreide handleiding om een WordPress website of blog mee te bouwen. Het is ook geen overzicht van alle aspecten die een WordPress website zo bijzonder maken en geen verhandeling
Nadere informatieWeb building gevorderden: CSS & JavaScript. Karel Nijs 2008/11
Web building gevorderden: CSS & JavaScript Karel Nijs 2008/11 Webbuilding gevorderden les 3 JavaScript intro JavaScript invoegen JavaScript statements JavaScript popup berichten JavaScript functies JavaScript
Nadere informatieVoor 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 informatieVector- en bitmapafbeeldingen: SVG GIF, JPG en PNG Anti-alias, dithering, browser veilig kleurenpalet, beeldbewerkingspakketten,
Overzicht Vector- en bitmapafbeeldingen: SVG GIF, JPG en PNG Anti-alias, dithering, browser veilig kleurenpalet, beeldbewerkingspakketten, scannen. Animaties: Animated GIF s en Flash-bestanden. 1TIN Internettechonologie
Nadere informatieWerken 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 informatieHandleiding Wordpress CMS 4-5-2015
Handleiding Wordpress CMS 4-5-2015 Inhoud 1. Het dashboard.... 3 2. Een pagina of bericht aanpassen.... 5 3. Een nieuw bericht toevoegen... 6 4. Een pagina maken... 7 5. Website met sitebuilder... 8 6.
Nadere informatieEen 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 informatieFactuur Lay-out / Factuur Template
Factuur Lay-out / Factuur Template In i-reserve is het mogelijk facturen te verzenden. De facturen worden als pdf bijlage per e-mail naar de klant verzonden. In deze tutorial wordt beschreven hoe u een
Nadere informatieLes 9: formulier controle met javascript.
Les 9: formulier controle met javascript. Javascript is erg veel gebruikt bij internet toepassingen. In tegenstelling tot PHP, wat een server side scripting is, is java client side scripting. Dwz, niet
Nadere informatieWorkshop XIMPEL TV Winoe Bhikharie Vrije Universiteit Amsterdam www.ximpel.net / info@ximpel.net
Workshop XIMPEL TV Winoe Bhikharie Vrije Universiteit Amsterdam www.ximpel.net / info@ximpel.net In deze workshop maak je kennis met XIMPEL TV en interactieve video. Bij interactieve video kun je de video
Nadere informatiemailgroep photoshop Copyright
http://psdtuts.com/tutorials/drawing/how-to-create-a-classic-guitar-from-scratch-in-photoshop/ Gitaar tekenen In deze les leer je een Klassieke Gitaar tekenen. Iedere vorm en effect wordt in Photoshop
Nadere informatie1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.
Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te
Nadere informatieVersie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman
Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.4 Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,
Nadere informatiehttp://photoshoptutorials.ws/photoshop-tutorials/text-effects/tron-grid/all-pages.html
http://photoshoptutorials.ws/photoshop-tutorials/text-effects/tron-grid/all-pages.html Rooster Deze foto werd gebruikt in de hoogste resolutie. En dit is het einderesultaat: Het is heel belangrijk van
Nadere informatie8. Een nieuwe dia/slider plaatsen op je homepage
8. Een nieuwe dia/slider plaatsen op je homepage Deze instructie is geschreven voor het plaatsen van een afbeelding in de diapresentatie op je homepage! De slider heeft een afmeting van 1000 x 417 pixels.
Nadere informatieEen webpagina maken. Een website bouwen met HTML en CSS practicum 1
Een webpagina maken De komende periode wordt in 8 practica een aantal technieken behandeld, die je nodig hebt om een (eenvoudige) website te kunnen bouwen. Nadat je deze 8 practica hebt doorgewerkt, moet
Nadere informatieEr 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 informatievan PSD naar JavaScript
2015 van PSD naar JavaScript F. Vonk versie 2 19-9-2015 inhoudsopgave 1. inleiding... - 2-2. ontwikkelomgeving... - 3-3. programmeerconcepten... - 4 - statement... - 4 - sequentie... - 4 - variabele en
Nadere informatieTechnische 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 informatie6. Een nieuw bericht in Nieuws & acties plaatsen
6. Een nieuw bericht in Nieuws & acties plaatsen Deze instructie is geschreven om een bericht te maken in de categorie Nieuws & acties. Het plaatsen van berichten op deze pagina gaat op een andere wijze
Nadere informatieX. Grafische elementen
X. Grafische elementen Om u te helpen bij grafische voorstellingen heeft java een aantal grafische afbeeldingen die u kunt gebruiken. Meestal worden zij in de methode paint(graphics g) geplaatst. Zij moeten
Nadere informatieEen 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 informatieTechnische specificaties
Praktische info Bestelbon: aanduiding reservatie Tablet-advertentie + bevestiging aanlevering materiaal, te sturen naar: booking@trustmedia.be Materiaal print: artwork@mediafin.be 2 werkdagen voor verschijning
Nadere informatieHandleiding Wordpress
Handleiding Wordpress Inhoudsopgave 1. Inloggen 2. Berichten en Pagina s 3. Afbeeldingen en video s 4. Weblinks 1. Inloggen 1.1 Inloggen bij Wordpress We starten met het inloggen op je WordPress gebaseerde
Nadere informatieHTML in Outlook 2007. Hoe zorgt u ervoor dat uw email goed in beeld komt?
HTML in Outlook 2007 Hoe zorgt u ervoor dat uw email goed in beeld komt? HTML in Outlook 2007 Inleiding Emark Mail biedt u de mogelijkheid om kant en klare HTML nieuwsbrieven in te laden en te versturen.
Nadere informatieTemplate 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 informatieSoftware Instructions for Real Kids - Felix Plesoianu (2009) en Kris Merckx (2013) - Creative Commons License
SIRK Software Instructions for Real Kiddies (versie 0.247) De programmeeromgeving, interpreter en compiler kan je online gebruiken op www.ardeco.be/sirk Variabele Functies Functienaam Parameters Voorbeeld
Nadere informatieONTWERPEN VAN INTERACTIEVE PRODUCTEN
ONTWERPEN VAN INTERACTIEVE PRODUCTEN WORKSHOP INTERACTIEF PROTOTYPE BOUWEN F. van Slooten WORKSHOP INTERACTIEF PROTOTYPE BOUWEN Ontwerp Keuze tool/techniek Maken layout 2 dagen: dinsdag 23 september Ochtend:
Nadere informatieGraphics. Small Basic graphics 1/6
Small Basic graphics 1/6 Graphics Naast het werken met tekst kan je in Small Basic ook werken met grafische elementen: lijnen, vormen en kleuren. Hierbij gebruik je het grafische venster met de witte achtergrond.
Nadere informatieWEBSITE-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 informatieFoto s verkleinen en Foto s in elkaar over laten lopen
Foto s verkleinen en Foto s in elkaar over laten lopen Een foto, ergens op uw computer Open een de map van bestanden voor de website, of maak deze eerst aan. Open de te gebruiken foto met het volgende
Nadere informatieVerkleinen- en uploaden van beelden
Verkleinen- en uploaden van beelden Deze handleiding is opgebouwd rond eenvoudig te gebruiken programma s die verkrijgbaar zijn in het Nederlands en te installeren zijn onder Windows XP, Vista en Windows
Nadere informatieINSTALLATIE IN PRINT INSTALLEREN. Aan de slag met Communicate In Print
AAN DE SLAG INSTALLATIE In deze handleiding worden de stappen besproken die doorlopen worden bij het installeren van de volledige versie Communicate In Print LET OP! WANNEER U EERDER EEN VERSIE VAN IN
Nadere informatieWebsites & Zoekmachines
Zoekmachines, Wat en Hoe... 2 Wat is een Zoekmachine?... 2 Hoe werkt het?... 2 Meldt Je Site Aan... 3 Meta-data... 3 Links naar je site... 3 De grote 3... 3 Hoe aanmelden?... 3 Wachttijd na aanmelding...
Nadere informatieHTML 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 informatieHandleiding website Pax Christi
Handleiding website Pax Christi deel II Inhoudstafel 1. Invoegen van afbeeldingen... 1 1.1 Wat is een digitale afbeelding?...1 1.2 Het invoegen van een digitale afbeelding in een bericht... 2 2. Posten
Nadere informatieFrontPage. Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie:
1 FrontPage Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie: Merk op dat de ene pagina die al aangemaakt is 'index.htm' heet. Dit is belangrijk De startpagina
Nadere informatieHandleiding wordpress
Handleiding wordpress Wordpress versie 3.0.4 Handleiding versie 1.1 Auteur Website Geert Hoekzema www.geerthoekzema.nl www.geerthoekzema.nl geert@geerthoekzema.nl 1 Inhoudsopgave Inleiding... 3 Beginnen
Nadere informatieProjectHeatmap. Onderzoeksrapport v0.5 11-03-11 Dennis Wagenaar
ProjectHeatmap Onderzoeksrapport v0.5 11-03-11 Dennis Wagenaar 1 Inhoudsopgave Inleiding...3 Gheat...4 Info...4 Voordelen...4 Nadelen...4 Google Fusion Tables...5 Info...5 Voordelen...5 Nadelen...5 OLHeatmap...6
Nadere informatieWhitepaper. E-mail design best practices
Whitepaper E-mail design best practices 14 tips voor het design van je e-mail Versterk de boodschap van je uiting Best practices voor je e-mail design Het design speelt een grote rol in de eerste indruk
Nadere informatieInteractief 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 informatieLeerlingdossier & handelingsplannen
FAQ Leerlingdossier & handelingsplannen Welke mogelijkheden biedt de online tekstverwerker in ESIS? De online tekstverwerker beschikt over veel mogelijkheden voor het bewerken van tekst. U vindt de online
Nadere informatieCursus Mobjects 4.0 freeware LES 12 external applications Imaging Application Ctrl enter titels Maskers
Cursus Mobjects 4.0 freeware LES 12 Ik heb u nog niet verteld dat u een beeld in Mobjects,direct kan openen bv.in Photoshop. Ga gewoon naar Instellingen in de bovenste balk. Je krijgt onderstaand venster:ga
Nadere informatieLeaflet Web Maps with qgis2leaf
Leaflet Web Maps with qgis2leaf QGIS Tutorials and Tips Author Ujaval Gandhi http://google.com/+ujavalgandhi Translations by Dick Groskamp This work is licensed under a Creative Commons Attribution 4.0
Nadere informatieDe frameset uit de afbeelding wordt op de volgende manier gedefinieerd:
FRAMES GEBRUIKEN Met frames kan het venster van een browser zo worden ingedeeld, dat er meerdere webpagina's tegelijk getoond kunnen worden. In de afbeelding hieronder staat een webpagina met frames. We
Nadere informatieHTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen.
Terminologie HTML en CSS HTML: Hyper Markup language Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. CSS: Cascading StyleSheet stylesheet for
Nadere informatieOnline banner ontwerp via UBA website www.banners.uba.be
Online banner ontwerp via UBA website www.banners.uba.be Banner Via www.banners.uba.be willen we de UBA secties de gelegenheid geven op een eenvoudige manier zelf een banner te ontwerpen en tegen een gunstige
Nadere informatieWebsite met Wordpress
Website met Wordpress 5. Tabellen Onderwerpen van deze les: Editor Tiny MCE toevoegen Tabellen maken met TinyMCE WP-Table reloaded installeren en gebruiken Excel importeren in WP-Table reloaded Content
Nadere informatieSummerschool Mobiele Apps 15-17 augustus 2012 Herman van Dompseler. HTML 5 App
Summerschool Mobiele Apps 15-17 augustus 2012 Herman van Dompseler HTML 5 App 1. Wat is HTML 5 2. HTML 5 Apps 3. Hybride App Architectuur 4. Een App maken Overzicht Deel 1: HTML5 HTML 5 gebruikt als verzamelnaam
Nadere informatieRapporten. Labels en Rapporten in Atlantis 1. Atlantis heeft twee manieren om output te genereren: 1. labels 2. rapporten (reports)
Labels en Rapporten in Atlantis 1 Atlantis heeft twee manieren om output te genereren: 1. labels 2. rapporten (reports) Rapporten Een rapport is eigenlijk altijd een tekst bestand, die vorm wordt gegeven
Nadere informatie7. Je bericht in Nieuws & acties aanpassen
7. Je bericht in Nieuws & acties aanpassen Deze instructie is geschreven om een bericht aan te passen in de categorie Nieuws & acties. Het plaatsen en wijzigen van berichten op deze pagina gaat op een
Nadere informatieEen 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 informatieHANDLEIDING CMS Versie 2.4 januari 2013
Het CMS dat bij deze site geleverd wordt heeft hoofdzakelijk tot doel om goed door Google gevonden te worden. De hiërarchie van het CMS geeft aan hoe google per pagina naar uw website kijkt. De mate van
Nadere informatieHTML-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 informatieCursus Mobjects freeware LES 3 Een zwaar lesje Photoshop
Cursus Mobjects freeware LES 3 Een zwaar lesje Photoshop Voordat we verder gaan met onze montage,moeten we een woordje zeggen over de afbeeldingen die we gaan gebruiken. Als we foto s maken met ons fototoestel,gaan
Nadere informatieHerhalingsoefeningen
Herhalingsoefeningen bij Websites maken met WEB! Pro ISBN 90 5905 193 9 2 Oefeningen hoofdstuk 2 2.1 Nieuwe website maken en opslaan Open een lege webpagina Open het venster Document Eigenschappen Typ
Nadere informatieLab Webdesign: Javascript 11 februari 2008
H2: BASISBEGRIPPEN In dit hoofdstuk zullen er enkele basisbegrippen worden behandelt PLAATSING VAN JAVASCRIPT-CODE DE SCRIPT-TAG De script-tag geeft aan dat er gebruik zal worden gemaakt van een scripttaal.
Nadere informatieIntroductie 2. Inloggen 3. Dashboard 4. Pagina aanmaken / bewerken 5. Bericht toevoegen / bewerken 6. Afbeelding toevoegen 7. De tekstbewerker 11
I n h o u d s o p g ave Introductie 2 Inloggen 3 Dashboard 4 Pagina aanmaken / bewerken 5 Bericht toevoegen / bewerken 6 Afbeelding toevoegen 7 De tekstbewerker 11 Menu toevoegen / aanpassen 12 I n t ro
Nadere informatieHandleiding NieuwsClipper
Handleiding NieuwsClipper Versie 3.0 www.howardshome.com Fultonbaan 30 Telefoon +31 (0)30 6083 540 KvK 20093764 Postbus 1092 Fax +31 (0)30 6083 549 ABN AMRO 54.85.62.202 3430 BB Nieuwegein E-mail info@howardshome.com
Nadere informatieTitel: flashvars.html
Data uitwisselen met Flash: the easiest way Kris Merckx www.ardeco.be Macromedia Flash-bestanden kunnen opgenomen worden in HTML. Een Flashfilm (*.swf) kan tekst, afbeeldingen, film, geluid en vectorbeelden
Nadere informatieSMARTSCHOOL VOOR OUDERS Leidraad
SMARTSCHOOL VOOR OUDERS Leidraad Inhoudstafel A. Aanmelden 2 B. Profiel en wachtwoord aanpassen 3 C. Smartschool via e-mail 4 D. Startpagina 5 E. Berichten lezen, opmaken, verzenden 6 F. Lessenrooster
Nadere informatieSeamless pattern maken in Inkscape
1 Seamless pattern maken in Inkscape Op Youtube kwam ik een interessant filmpje tegen om op een eenvoudige manier seamless patterns of naadloze patronen te maken in Inkscape: Chris Hildenbrand - https://www.youtube.com/watch?v=mofll7b-fow
Nadere informatieSelecties worden gebruikt om bewerkingen uit te voeren die alleen effect mogen hebben op het geselecteerde gedeelte van een afbeelding.
Selecties worden gebruikt om bewerkingen uit te voeren die alleen effect mogen hebben op het geselecteerde gedeelte van een afbeelding. De bewerkingen die je op en met een selectie uitvoert kunnen erg
Nadere informatieIMG IS EVERYTHING FRONTEND DEVELOPMENT LES 6
IMG IS EVERYTHING FRONTEND DEVELOPMENT LES 6 VORIGE WEEK De principes van het web Multiscreen Responsive webdesign Mediaqueries Mobile first Even heel kort samenvatten waar we het ook al weer over hebben
Nadere informatieUw 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 informatieLeerlingdossier & handelingsplannen. Welke mogelijkheden biedt de online tekstverwerker in ESIS? FAQ
FAQ Leerlingdossier & handelingsplannen Welke mogelijkheden biedt de online tekstverwerker in ESIS? De online tekstverwerker beschikt over veel mogelijkheden voor het bewerken van tekst. U vindt de online
Nadere informatieDe principes van unobtrusive JavaScript. Peter-Paul Koch (ppk) http://www.quirksmode.org PFCongrez, 12 april 2008
De principes van unobtrusive JavaScript Peter-Paul Koch (ppk) http://www.quirksmode.org PFCongrez, 12 april 2008 Unobtrusive JavaScript Bescheiden? Onopvallend? Unobtrusive JavaScript Volgens Wikipedia
Nadere informatieLes 18 Slimme Objecten.
deel 2 lesje E18 slimme objecten Les 18 Slimme Objecten. In deze les gaan we werken naar dit voorbeeld. Slimme objecten in elements is heel wat anders dan in de cs reeks waarvoor dit lesje geschreven is.
Nadere informatieToelichting op enkele knoppen: (als u de muis bij een knop houdt, verschijnt een tekst met een korte aanwijzing (tooltip) bij deze knop).
FAQ Leerlingdossier & handelingsplannen Welke mogelijkheden biedt de online tekstverwerker in ESIS? De online tekstverwerker beschikt over veel mogelijkheden voor het bewerken van tekst. U vindt de online
Nadere informatieA Inloggen. B - Wachtwoord Veranderen
A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen
Nadere informatieInformatica: C# WPO 4
Informatica: C# WPO 4 1. Inhoud For-loop, debuggen, inleiding tot graphics 2. Oefeningen Demo 1: Geometrische figuren Demo 2: Teken een 10 bij 10 rooster Demo 3: Debug oplossingen demo s 1 en 2 A: Flowerpower
Nadere informatiefotofabriek.nl Handleiding Adobe Photoshop templates
fotofabriek.nl BINNENWERK STAP 1: Opmaak Wanneer het photoshop bestand is geopend krijg je de volgende lagen te zien. De groen gemarkeerde lagen zijn de pagina s voor het fotoboek. De rood gemarkeerde
Nadere informatieLes 3: Het maken van pagina s, het menu en het schrijven van een blogpost Pagina s
Les 3: Het maken van pagina s, het menu en het schrijven van een blogpost Bij het maken van een blog is het belangrijk dat je er inhoud op plaatst. Dit noemen we content. Alles wat je openbaar op je blog
Nadere informatieHTML5 VIDEO. Een stand van zaken Jeroen Wijering, LongTail Video
HTML5 VIDEO Een stand van zaken Jeroen Wijering, LongTail Video WHOIS JW? Auteur van de JW Player (2005) Open-source Flash video speler voor embedden in websites. Gebruikt door YouTube in 1e jaar Helaas,
Nadere informatieHTML. Links. Hyperlinks. Hans Roeyen V 3.0
Links En Hyperlinks Hans Roeyen V 3.0 5 februari 2015 Inhoud 1. Werken met (Hyper)links... 3 1.1. De anchor tag... 3 1.1.1. Het ID attribuut... 3 1.1.2. Oefeningen op linken... 4 1.1.3. Absoluut en relatief
Nadere informatieMeer over het Windows browser-keuzescherm
Meer over het Windows browser-keuzescherm Binnen nu en een aantal weken krijgt het merendeel van u het Windows browser-keuzescherm voorgeschoteld. Het keuzescherm is in overleg met de Europese Commissie
Nadere informatieWe passen eerst ons bestaand inhoudstype Fotospecial een beetje aan:
Les 12 Paragraph + Bootstrap Met deze module kan je de inhoud van een node beter rangschikken op het scherm. Denk hier aan Display Suite en/of Panels. Ook die modules laten u toe om inhoud anders te schikken
Nadere informatieFoutoplossing FotoSpecial Blok
Les 9 Foutoplossing FotoSpecial Blok In een vorige les maakten we een blok op de front die de verschillende fotocategoriën weergeeft. Dat doet een beetje raar bij het hoveren. In onderstaande bijlage kan
Nadere informatieAdres boekje met Ringen
http://psdtuts.com/tutorials/designing-tutorials/create-a-custom-mac-osx-style-ring-binder-addressbook-icon/ Adres boekje met Ringen Stap 1 Nieuw Document : 1024 pixels op 1024 pixels. Ons boekje zal 512px
Nadere informatieSoftware 1. Basis HTML. bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1
Software 1 Basis HTML bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1 Alain Simons alain.simons@artesis.be Basis HTML 1. Introductie 2.
Nadere informatieOPDRACHTKAART. Thema: Prepress. InDesign 15. Pagina s PP-01-15-01. Voorkennis: De vorige praktijkopdrachten afgerond.
OPDRACHTKAART PP-01-15-01 Pagina s Voorkennis: De vorige praktijkopdrachten afgerond. Intro: In bijna alle boeken en tijdschriften die je opent, zie je dat de pagina s genummerd zijn. Het is natuurlijk
Nadere informatieInstructies Zitecraft Content Management System (CMS)
Instructies Zitecraft Content Management System (CMS) Inloggen Het CMS wordt geopend via http://zitecraft.com/login of er kan op het icoontje rechtsonder op de zite geklikt worden. Vervolgens dient het
Nadere informatieGlobale 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 informatieHANDLEIDING. WordPress LAATSTE VERSIE: 29-12-2011 RODER!CKVS WEBDESIGN & WEBHOSTING
HANDLEIDING WordPress LAATSTE VERSIE: 29-12-2011 RODER!CKVS WEBDESIGN & WEBHOSTING Inhoudsopgave Inloggen... 3 Een nieuw bericht plaatsen... 5 Aan een nieuw bericht beginnen... 5 Je bericht bewaren, een
Nadere informatieBewerk 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 informatieFilmpje van YouTube op uw blog plaatsen
Filmpje van YouTube op uw blog plaatsen Surf naar www.youtube.com. Onderstaand venster opent, zie Fig1. Fig 1 U moet nu opzoek naar het filmpje dat je wenst. Wij nemen hier als voorbeeld, gaan op zoek
Nadere informatieDocBook XML documenten bewerken
LinuxFocus article number 201 http://linuxfocus.org door Egon Willighagen DocBook XML documenten bewerken Over de auteur: Haalde zijn masters degree in de chemie aan de Universiteit
Nadere informatie