Deel I: CSS(3) Deel II: Usability - Navigatie. Hoorcollege IUW Thema Web 17 November 2015 Christof van Nimwegen
|
|
|
- Frieda Aalderink
- 7 jaren geleden
- Aantal bezoeken:
Transcriptie
1 Deel I: CSS(3) Deel II: Usability - Navigatie Hoorcollege IUW Thema Web 17 November 2015 Christof van Nimwegen 1
2 CSS: Waarom? HTML was bedoeld voor documentstructuur (text met verschillende levels in headings en body text) Plaatjes Tabellen (ook gebruikt voor positioneren). HTML 3.2 mogelijkheid om lettertypen, kleuren en vele andere visuale aspecten te definieren. De eigenlijke geboorte van web DESIGN (nu was de content niet meer het belangrijkste, ook de presentatie) 2
3 CSS: Waarom? CSS bevat de regels voor de presentatie van HTML + = HTML CSS Web Page Check:
4 Vandaar dat. = 4
5 Style sheets en style sheet talen De plaats van descriptive markup is helder Maar waar komt de code voor de presentatie dan terecht? Style sheets, geschreven in een style sheet taal Diverse style sheet talen DSSSL, voor SGML XSL, voor XML (XSL-FO, XSLT, XPath) CSS, voor HTML en XML
6 Voordelen CSS Minder data download, kortere laadtijd Schonere code is beter voor zoekmachines Hoeft maar 1x iets te veranderen, dus: Efficiëntie en tijdswinst in het ontwikkelproces Makkelijker onderhoud Meer vormgevingsmogelijkheden dan HTML Cooler design Responsivenses! 6
7 Stylen d.m.v. HTML 7
8 Stylen d.m.v. CSS 8
9 Cascading? Diverse plekken voor style specificatie Voorrangsregels bepalen welke style "wint" Prioriteit (in afnemende volgorde) Inline style (in een HTML element Embedded style (in the <head> tag) Extern style sheet Browser standaardwaarden (default)
10 Cascading? 10
11 1. Locatie style sheet: Inline index.html <html> <head> </head> <body style="font-size:16px; color:green;"> <p>iuw 2015</p> </body> </html>
12 2. Locatie style sheet: Intern index.html <html> <head> <style type="text/css> body {color:green} </style> </head> <body> <p>iuw 2015</p> </body> <html>
13 3. Locatie style sheet: Extern index.html <html> <head> <link rel="stylesheet" type="text/css href="iuw.css"> </head> <body> <p>iuw 2015</p> </body> <html> iuw.css body {style="font-size:16px; color:green;}
14 4. Locatie style sheet: browser default 14
15 CSS Selectors: WAT krijgt een style? Elementen p {color: black; } CLASS (kan vaker).rood {color: red;} ID (max één keer) #blauw {color: blue} Syntax: Resultaat: 15
16 CSS Property: welke eigenschap stylen? color font-style font-size text-align red, yellow, rgb(212,120,20) normal, italics, oblique 12pt, larger, 150%, 1.5em left, right, center, justify line-height normal, 1.2em, 120% display block, inline, list-item, none vaardigheid, oefening en opzoeken
17 Centraal in CSS: Box model algemeen model voor block elementen vier zones voor padding, border en margin 1 of 4 waarden tools als Firebug laten box-eigenschappen duidelijk zien boxen kun je positioneren 17
18 Bijvoorbeeld de instituutswebsite: <div style="position:absolute; top:3px;"> <img src="images/logo.png" alt="logo IUW" width="105" height="74"> </div> <div class="head"> <h1>informatieuitwisseling </h1> </div> <div class="menu"> <ul> <li><a href="index.html">nieuws</a></li> etc. </ul></div> <div class="body"> <h2>nieuws</h2> <p>oogt het nieuws oud, reload dan deze pagina.</p> etc </div> 18
19 Specificiteit in actie css span {color: red;} span span {color: blue;} span.foo {color: green;} span span.foo {color: turquoise;} span.bar {color: maroon;} html <span class="foo">hey!</span> <span>wow! <span>amazing!</span> <span class="foo">impressive!</span> <span class="bar">k00l!</span> <i>fantastic!</i> </span>
20 CSS 3 20
21 CSS 3 (sommigen waren er al in CSS2) Animations / transities Visuele effecten (border-radius, rgbacolor, boxshadow, text-shadow, gradient) Ronde hoeken Vrijheid fonts (ook Webfonts) Border images Media queries.en nog veel meer Overal zijn tools voor! 21
22 Web fonts (ook in opdracht deel 4/4) B.v. 22
23 Web Fonts: Google (ook in opdracht deel 4/4) 23
24 Web Fonts: b.v. Google 24
25 Icon Fonts (ook in opdracht deel 3/4) 25
26 Icon Fonts Waarom? Afbeeldingen zorgen (meestal) voor meer laadtijd) Afbeeldingen zijn niet altijd even scherp Fonts wel, ook bij inzoomen, of op een Retina scherm 26
27 Fonts als icons! Afbeelding-icon Font-icon Normaal Zoom Retina, HiDPI 27
28 CSS: Effecten. 28
29 En 29
30 Animaties (simpel) 30
31 Bijvoorbeeld: Animaties (iets fancier) 31
32 Maar we zijn er nog niet (vanaf). Browser specifieke prefixed properties -webkit voor Chrome, Safari -moz voor Firefox -o voor Opera -ms voor Internet Explorer). Worden gebruikt om nieuwe, of experimentele CSS te testen, voordat ze officieel geaccepteerd zijn door W3C. 32
33 Dus: background: -webkit-linear-gradient(#ff0000, #000000); background: -moz-linear-gradient(#ff0000, #000000); background: -ms-linear-gradient(#ff0000, #000000); background: -o-linear-gradient(#ff0000, #000000); background: linear-gradient(#ff0000, #000000); 33
34 Vele tools!
35 CSS: Responsive (ook in opdracht, deel 4) 35
36 Responsiveness Responsive webdesign: een einde aan de mobiele versies? Eigenlijk.conditioneel CSS Ontwikkeltools zoals Gridset, Bootstrap! Test tools zoals
37 Pauze 37
38 Deel II: Usability en navigatie Hoorcollege IUW Thema Web 17 november 2015 Christof van Nimwegen
39 Usability (uit: Playtime, 1976, Jacques Tati) 39
40 Usability ISO : Usability is de mate waarin een product door bepaalde gebruikers in een bepaalde gebruikersomgeving kan worden gebruikt om bepaalde doelen effectief, efficiënt en naar tevredenheid te bereiken. Effectief: bereikt de gebruiker het gewenste doel? Efficiënt: is de benodigde inspanning zo klein mogelijk? Satisfactie: vindt de gebruiker het product prettig in gebruik? 40
41 Usability Zeer kritieke factor! Te vaak achterwegen gelaten Geen tijd Geen geld Ik weet wel hoe het moet Usability is slechts smaak Ik krijg nooit klachten User Experience (UX = gebruikers ervaring)! 41
42 Usability: op het web Voorkom Lost in Hyperspace, de Mensch is ongeduldig, men zal afhaken Niet op usability letten kost bezoekers/geld Geldt uiteraard voor e-commerce Maar ook voor services (o.a. overheid) Voorwaarde voor goede user experience Geen developer pesten, gewoon een betere site Aardig zijn voor de gebruiker 42
43 Usability: Algemeen voorkom memory load George Miller ( ) The Magical Number Seven, +/-2 Er zijn limieten aan wat we kunnen vasthouden in korte termijn geheugen Gaat niet altijd op in Webdesign, maar is toch vaak als vuistregel, en in de praktijk niet slecht Don t make me think : laat me concentreren op wat ik wil doen kunnen 43
44 Usability: Algemeen - Mentale belasting 44
45 Usability: Algemeen - Gebruik Metaforen 45
46 Usability: Algemeen - Gebruik Metaforen 46
47 Usability: Algemeen - Affordance J.J. Gibson ( ) Slecht vertaalbaar hier: staat iets toe, faciliteert iets, biedt de mogelijkheid voor, etc: In kort voor Usability: the easy discoverability of possible actions 47
48 Usability: Affordance om ons heen 48
49 Usability: Affordance on the web 49
50 Usability: Affordance on the web? 50
51 Usability: Affordance op het web Maak duidelijk wat een interactief element is en wat niet 51
52 Usability: Pionier Jacob Nielsen Learnability Efficiency Memorability Errors (weinig fouten maken) Satisfaction 52
53 Usability: Nielsen s heuristieken 1. Visibility of system status 2. Match between system and real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, recover from errors 10. Help and documentation 53
54 1. Visibility of system status 54
55 2. Match between system and real world Spreek (duidelijke), normale wereld taal van de gebruiker Gebruik metaforen of conventies uit de echt wereld Geef informatie natuurlijk en logisch weer 55
56 3. User control and freedom Mensen maken fouten Nooduitgang: maak stoppen/cancelen mogelijk Niet user dwingen Undo, redo!! 56
57 4. Consistency and standards 57
58 5. Error prevention Beter voorkomen dan genezen Form checks, greyed out buttons Formats 58
59 6. Recognition rather than recall Computers zijn goed in onthouden, mensen wat minder Don t make me think, laat me me op wat ik wil doen kunnen concentreren 59
60 7. Flexibility and efficiency of use Flexibility Shortcuts (quick links, bookmarks, keyboard shortcuts) Dwing geen vastgelegd pad af, maar laat verschillende manieren toe) bv. EN sitemap EN search EN via links/menus) Efficiency Bv: search results krijgen goede beschrijving, naast de link zelf 60
61 8. Aesthetic and minimalist design Geen afleidende zaken, alleen relevante informatie in dialogen etc. 61
62 9. Help users recognize, diagnose & recover from errors 62
63 10. Help and Documentation De meeste mensen lezen NOOIT helpfiles Dus ALS ze dat doen, laat het goed zijn!! En maak ze goed vindbaar 63
64 Usability: Test methodes Check Usability engineering en user experience (UE)! Heuristic evaluation Kleine groep (3-5) evaluators onderzoeken examine UI aan de hand van usability heuristieken (vuistrregels) Bevindingen samengevoegd Expert review Laat expert, meestal uit bedrijfsleven, usability professional er naar kijken Lab testing, bv. A/B Testing Vergelijk versies (soms) Formeel, gecontroleerd 64
65 Usability: getest 65
66 Van Usability naar Accessibility: Toegankelijkheid Ontwerp ook voor mensen met een beperking en senioren WCAG 2.0 (Web Content Accessibility Guidelines) Maguire! Steeds meer verplicht bij digitale overheid 66
67 Usability: Toegankelijkheid Vriendelijke urls Alternatieve teksten Tabellen toegankelijk Kleurenblindheid-proof Multimedia: geef bijschriften en transcripties voor audio / video Gebruik link tekst die ook buiten zijn context zinvol is Gebruik kopjes, lijsten en consistente structuur, CSS voor layout en stijl Valideer! 67
68 Navigatie Navigeren door een netwerk van informatiebronnen door de hypertext en hypermedia op het WWW Is zeer groot en belangrijk onderdeel van Usability 68
69 Navigatie: Meestal Structureel Duidelijke hierarchie Boom structuur 69
70 Navigatie: Hiërarchische structuur 70
71 Navigatie: Diepte 71
72 Navigatie: onder / boven paginagrens 72
73 Navigatie: dimensies gecombineerd 73
74 Navigatie: breed EN diep minder goed 74
75 Navigatie: accent op verticale dimensie 75
76 Navigatie: accent op horizontale dimensie 76
77 Navigatie: meestal allebei 77
78 Navigatie: huidige trend 78
79 Navigatie: Voetnoot 79
80 Navigatie: Kruimelpad (Breadcrums) 80
81 Navigatie: Pagineren 81
82 Navigatie: zoekfunctie Niet altijd nodig Vaak het meest gebruikte navigatie element Ook bij goed georganiseerde websites (snel) Houd het simpel (behalve indien specifieke functies/queries gewenst zijn Niet te kleine box (afmeting), geen lengte restricties Zet niet te dicht bij andere elementen (wordt als irritant ervaren) Laat niet anders op een search box lijken Soms: maak duidelijk waar men naar kan zoeken 82
83 Navigatie: zoekfunctie positie? 83
84 Navigatie: zoekfunctie positie! 84
85 Grafisch ontwerp Usability: Affordance, knoppen, functionaliteit Navigatie: structuur, opbouw, wat is waar Grafisch Ontwerp: hoe geef ik het allemaal vorm, identity, rekening houdend met trends, esthaetica, rekening houdende met de eisen van Usability Navigatie 85
86 Grafisch ontwerp: Esthetiek? Esthetiek moet nooit interfereren met doel en functionaliteit 86
87 Grafisch ontwerp: Trends Simplicity Vlak design Eén site voor alle devices Tegels, Mega-Navigatie Menus App-stijl naar gewoon www Icon fonts, webfonts, SVG, CSS ipv. images Minder tekst, meer visual storytelling Video /bewegende achtergronden
88 Vragen? 88
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)
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
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
Expert review Reservatiesysteem
Expert review Reservatiesysteem Steven Houben March 26, 2010 1 Inleiding Deze expert review is gebaseerd op 10 heuristieken gedefinieerd door Jacob Nielsen. 2 Review Multi- touch systeem 2.1 Visibility
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
Heuristische analyse voor de website van team IJsselstein door het team met de site over de gemeente Arnhem (Nova Eeken, Lieke Prevaes, Ciel Eijssen)
Onderdeel 6 Heuristische analyse voor de website van team IJsselstein door het team met de site over de gemeente Arnhem (Nova Eeken, Lieke Prevaes, Ciel Eijssen) Evaluatie van Nova Eeken Nummer Heuristiek
Heuristic Evaluation Snowworld.nl. Door: Michael Nagelkerke & Katja Soulier 1228374 1232665 Klas: CMD1A Datum: 27-02-2013
Heuristic Evaluation Snowworld.nl Door: Michael Nagelkerke & Katja Soulier 1228374 1232665 Klas: CMD1A Datum: 27-02-2013 1 Inhoudsopgave 1.a Analyse toepassing heuristieken... 3 1. Visibility of system
Usability van een Webshop. Maartje de Vries & Ellen Schuurink UE 2016
Usability van een Webshop Maartje de Vries & Ellen Schuurink UE 2016 Gastsprekers: Ellen & Maartje TCP TCP Agenda - deel 1 Waarom een webshop Wat betekent Usability in de context van een webshop? Hoe bereik
Usability. Ontwerpen van Interactieve Systemen. Christof van Nimwegen, 18 februari 2016
Usability Ontwerpen van Interactieve Systemen Christof van Nimwegen, 18 februari 2016 1 2 Usability in het ontwerpproces Ontwerp van Interactieve systemen houdt zich bezig met: Het ontwikkelen van systemen,
Gebruiksvriendelijkheid. Introductie. Onderwerpen 23-11-2007. Student Informatiekunde Universiteit Utrecht. Webdesigner Piozum
Gebruiksvriendelijkheid Byte seminar, 23 november 2007 Door: Gwyneth Ouwehand Introductie Student Informatiekunde Universiteit Utrecht Mensen Organisaties Computers Communicatie Webdesigner Piozum Onderwerpen
Web Usability. Byte seminar, 23 november 2007. Door: Gwyneth Ouwehand
Web Usability Byte seminar, 23 november 2007 Door: Gwyneth Ouwehand Introductie Student Informatiekunde Universiteit Utrecht Mensen Organisaties Computers Communicatie Bezig met afstudeerproject over kenniselicitatie
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
Min-height en min-width
Oefening 15.5 Min-height en min-width Maak op van uw een webpagina s een div die u voorziet van een geschikte waarde voor min-height en min-width. Laat zien wat er gebeurt als u het lettertype verkleint
FFO Webdesign 1e jaar theorietoets NL niveau4... Totaal aantal vragen: 40
FFOUCHIER 01/11/2018 FFO Webdesign 1e jaar theorietoets NL niveau4... Totaal aantal vragen: 40 De meeste juiste antwoorden: #22 Minste Juiste antwoorden: #30 1. Selecteer de juiste HTML-code voor het maken
Usability. Ontwerpen van Interactieve Systemen. Christof van Nimwegen, 20 februari 2018
Usability Ontwerpen van Interactieve Systemen Christof van Nimwegen, 20 februari 2018 In dit hoorcollege komen aan bod: Uit vorige college nog: Hoofdstuk 3 Personas & scenarios Hoofdstuk 4: Usability Accessibility
APEX Templates. OGH APEX dag 30 maart. Art Melssen. 31 maart 2010
APEX Templates OGH APEX dag 30 maart Art Melssen Introductie Over de spreker 4 jaar APEX ervaring / 7 jaar Oracle 10 jaar web technologie ervaring APEX trajecten o.a. bij Centraal Boekhuis en eboekhuis
Voorbeeld: In een tekstverwerker staat: Dit is scheve tekst Om in HTML hetzelfde effect te krijgen moet er staan: <i>dit is scheve tekst</i>
Wat is HTML? HTML staat voor HyperText Markup Language. Een HTML tekst bestaat uit zogenaamde platte tekst (ook wel de eerste 128 tekens van ASCII genoemd). In tegenstelling tot bijvoorbeeld tekstverwerker
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
Uw website gebruiksvriendelijk, vindbaar en toegankelijk
Uw website gebruiksvriendelijk, vindbaar en toegankelijk! Training PGOsupport!! 14 april 2014! Jaap van de Putte Programma 10.00-12.30 Kennismaking Usability / Findability / Accessibility 13.15-16.30 Van
Cascading Style Sheets
Cascading Style Sheets Dit gedeelte wordt uitgebreid besproken in http://www.handleidinghtml.nl/css/index.html 1TIN Internettechnologie 2003-2004 les 07 1 Onderwerpen Cascading model Syntax Toevoegen van
6. Indexatie: Zijn de verschillende pagina s binnen de site geïndexeerd door Google?
PIMPTER WEBSHOP http://www.nailsprinter.com http://www.pimpter.com/ http://www.salonique.com/nail-printers.html http://www.nagelstudiocenc.nl/shop.php http://www.yournail.nl/webwinkel-category-1127889/nagelprinter.html
LES 8: CSS. Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting.
LES 8: CSS Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting Tijd: 5 minuten Doel: Aan het einde van deze les kun je CSS in de WordPress
WEBSITE USABILITY. white-paper
WEBSITE USABILITY white-paper Alle rechten voorbehouden Het is niet toegestaan deze white-paper aan derden te verstrekken of te verkopen. Het is niet toegestaan de inhoud van deze white-paper elders te
Een 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
XHTML en CSS. Deel 3. januari 2008 4-9-2008. Lyceum Sancta Maria. Ruud Koortens Frans Peeters
XHTML en CSS Deel 3 Ruud Koortens Frans Peeters januari 2008 4-9-2008 Lyceum Sancta Maria 1 2 Inhoudsopgave 1.1.1. Het opmaken van hyperlinks... 1 1.1.2. Kleur... 1 1.1.3. Het gebruik van kleuren bij het
CSS: clip-path, shapes, variabelen, multiple columns layout. Variabele webfonts en de nieuwe Firefox developertools
1 Presentatie Nieuwe CSS3-features en Firefox CSS-editors Presentatie thema-avond HCC Joomla! Heerenveen 4 december 2018 CSS: clip-path, shapes, variabelen, multiple columns layout. Variabele webfonts
Software 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.
Inhoudsopgave. Stappen 1 Ervaringen 2 Wireframes 3 PIOTR TEKIEN HKU GAME ART GAR-1B
Inhoudsopgave Stappen 1 Ervaringen 2 Wireframes 3 PIOTR TEKIEN HKU GAME ART GAR-1B PORTFOLIO 1 - STAPPEN Stappen INTRODUCTIE Voordat ik over mijn stappen vertel, wil ik kort toelichten dat ik eerder een
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
Font betekent lettertype, de vele font eigenschappen wijzigen dan ook de opmaak van je lettertype. Hiermee bepaal je het lettertype.
Stijlregels I Nu je de verschillende soorten CSS kent kan je deze ook gaan toepassen. Onthoudt dat alle opmaak in xhtml met CSS gemaakt moet worden. Tegenwoordig zijn er meer dan 200 CSS properties, deze
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
HTML5 & Webdesign. Ontwerp cover: Graficelly, Reeuwijk-Brug. N. van Aken M. den Besten A.C. Gijssen ISBN 978-90-460-0740-2
Ontwerp cover: Graficelly, Reeuwijk-Brug N. van Aken M. den Besten A.C. Gijssen ISBN 978-90-460-0740-2 Eerste druk 2016 Instruct, Postbus 38, 2410 AA Bodegraven Behoudens uitzondering door de wet gesteld
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
Hand-out Web Technologies, werkcollege 4 Alex Reuneker (a.reuneker@hhs.nl), 2012
Hand-out Web Technologies, werkcollege 4 Alex Reuneker (a.reuneker@hhs.nl), 2012 1. Id s en klassen (id- en class-attributen) id-attribuut: Elk HTML-element kan gespecificeerd worden door middel van een
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
open standaard hypertext markup language internetprotocol transmission control protocol internet relay chat office open xml
DOWNLOAD OR READ : OPEN STANDAARD HYPERTEXT MARKUP LANGUAGE INTERNETPROTOCOL TRANSMISSION CONTROL PROTOCOL INTERNET RELAY CHAT OFFICE OPEN XML PDF EBOOK EPUB MOBI Page 1 Page 2 relay chat office open xml
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.
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
Les W-01: HTML. Een website bouwen in HTML. 2006, David Lans
Les W-01: HTML 1.0 HTML Websites zijn opgebouwd uit afzonderlijke webpagina s. Deze webpagina s zijn geschreven in een aparte taal, HTML. De afkorting HTML staat voor Hyper Text Markup Language. Vrij vertaald
Hand-out Web Technologies, werkcollege 5 Alex Reuneker 2012
Hand-out Web Technologies, werkcollege 5 Alex Reuneker (a.reuneker@hhs.nl), 2012 1. Groeperen (div- en span-elementen) : Het HTML-element div is een block-level element (zie hand-out bij het
1. De basis 2. De basis uitbreiden
Wordpress Theme Hoe moet je deze reader gebruiken? Deze reader is digitaal, zodat je makkelijk stukjes code kunt kopieren en plakken. 1. De basis 2. De basis uitbreiden Hier aan de linkerkant vind je een
NVU work shop. Kees Moerman http://www.keesmoerman.nl November 2006. 1. Overzicht van een web site. Wat is een web site HTML files
NVU work shop Moerman http://www.keesmoerman.nl November 2006 1 1 Overzicht 1. Overzicht van een web site Wat is een web site HTML files 2. NVU: Een HTML editor Overzicht Een eerste pagina Configuratie
Documentatie WD32. Christine van Woensel M32
Documentatie WD32 Christine van Woensel M32 Ontwerpkeuzes per device resolutie Desktop (1025 1600px & 769 1024px): Tablet (481 768px): Smartphone (321 480px & tot 320px): Algemeen: Alle ontwerpen voor
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
Zelf 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
Website beoordeling larivieracasino.org
Website beoordeling larivieracasino.org Gegenereerd op Oktober 30 2018 02:00 AM De score is 37/100 SEO Content Title Riviera Casino : Casino La Riviera Online Lengte : 41 Perfect, uw title tag bevat tussen
Oriëntatieverslag, Deliverables 1+2. Research for design Hogeschool van Amsterdam
Oriëntatieverslag, Deliverables 1+2 Research for design Hogeschool van Amsterdam - Naam: Mike Wolffgramm, Ye jun Wu - Vak: Research for design - Docent: M.A. Riphagen - Opleiding: CMDA - Klas: V1CMD6 -
Y.S. Lubbers en W. Witvoet
WEBDESIGN Eigen Site Evaluatie door: Y.S. Lubbers en W. Witvoet 1 Summary Summary Prefix 1. Content en structuur gescheiden houden 2. Grammaticaal correcte en beschrijvende markup 3. Kopregels 4. Client-
Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase
Mobiel Datanose Op dit moment is mobiel datanose niet goed gedaan; je krijgt gewoon de site te zien zoals je het te zien krijgt op pc's of laptops. Maar vaak heb je het probleem dat je op je mobiel moet
De mogelijkheden van XML voor de langdurige bewaring van digitale documenten. DAVID studiedag 30 nov 2000
De mogelijkheden van XML voor de langdurige bewaring van digitale documenten DAVID studiedag 30 nov 2000 Prof. Jan Engelen, Steven Depuydt K.U.Leuven - ESAT Onderzoeksgroep Document Architecturen Waarom
Website analyse lichting98.nl
Website analyse lichting98.nl Gegenereerd op November 06 2016 00:56 AM Uw score is 53/100 Zoekmachine optimalisatie Titel Ontwerpburo Lichting98 - Ontwerpbureau van Nils Hilbers te Rotterdam Lengte : 69
Talk Nerdy To Me 16-05-2012 NHL. Responsive Webdesign. Maarten van de Voorde mr10.nl Jan-Wessel Hovingh waxle.com
Talk Nerdy To Me 16-05-2012 NHL Responsive Webdesign Maarten van de Voorde mr10.nl Jan-Wessel Hovingh waxle.com 1.1 Waarom is webdesign voor mobiel gebruik onvermijdelijk? in 2010 was er 600% groei in
Sushi MIJN EERSTE WEBSITE. DE STIJL VAN HET BOVENSTE MENU AANPASSEN Kaart 6 van 10 Ik ben HTML/CSS aan het leren. Naar daar.
MIJN EERSTE WEBSITE Sushi DE STIJL VAN HET BOVENSTE MENU AANPASSEN Kaart 6 van 10 Van hier Naar daar 1 2 3 Doe het stap voor stap om te zien hoe CSS werkt! Voeg een rand toe van 1 punt in de breedte om
Pro templates. Copyright Starteenwinkel.nl
Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Vormgever 5. Sliders aanpassen
Website beoordeling marking.seo-online.xyz
Website beoordeling marking.seo-online.xyz Gegenereerd op April 08 2019 21:11 PM De score is 59/100 SEO Content Title Social Bookmarking to get more Visitors Lengte : 39 Perfect, uw title tag bevat tussen
is front-end kennis relevant voor een UX designer
In hoeverre is front-end kennis relevant voor een UX designer tijdens een designproces? Door: Wessel Grift Onderzoeksvraag In hoeverre is het hebben van front-end development kennis relevant voor een
Onderzoek naar product en concurrentie. 10 Concurrenten van webshop Sportieve E-bike. Websites links:
Onderzoek naar product en concurrentie. 10 Concurrenten van webshop Sportieve Ebike Websites links: http://www.fatboy.com/nl/ http://www.dsignmeubels.nl/ http://allemachtigprachtig.nl/ http://www.gilianoriginals.nl/
Website beoordeling qiwork.pt
Website beoordeling qiwork.pt Gegenereerd op December 03 2015 16:54 PM De score is 55/100 SEO Content Title QIWORK. Creative Studio Lengte : 25 Perfect, uw title tag bevat tussen de 10 en 70 karakters.
Inhalen les 7 (versie B)
Inhalen les 7 (versie B) Stap 1: Open de startmap van les 6 De map heet Startmap Les 6. Als je de map hebt geöpend zie je verschillende bestanden en een map Website. Wij gebruiken nu alleen de map Website.
Website beoordeling proplantdesign.com
Website beoordeling proplantdesign.com Gegenereerd op Januari 31 2019 04:42 AM De score is 62/100 SEO Content Title Process Plant Design Proplant Design Lengte : 38 Perfect, uw title tag bevat tussen de
HTML 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
I'VE GOT EM FRONTEND DEVELOPMENT LES 3
I'VE GOT EM FRONTEND DEVELOPMENT LES 3 VORIGE WEEK CSS bling Selectors deel 1 Even heel kort samenvatten waar we het ook al weer over hebben gehad vorige week. Niet te lang bij stilstaan want er is heel
SEO plan. Bart Janssen Semester 4 Fontys ICT & Media Design
SEO plan Bart Janssen Semester 4 Fontys ICT & Media Design Inleiding Mijn adviesplan heb ik geschreven voor mijn persoonlijke leerportfolio. Het leerportfolio staat online op http://www.bartjanssen.eu.
Succesvol websites bouwen vanuit een concept
Succesvol websites bouwen vanuit een concept Docent: Ruben Olislagers 1 Internetstrategie Begin met een gedegen plan 2 User Centered Design Ontwerpen vanuit de wensen en behoeften van de doelgroep Wie
Website beoordeling therunclub.com
Website beoordeling therunclub.com Gegenereerd op Februari 03 2017 09:07 AM De score is 39/100 SEO Content Title Error: Domain mapping upgrade for this domain not found Lengte : 55 Perfect, uw title tag
Online SEO-CHECKLIST. Switch Reclamebureau bv I Rendementsweg 2-Q I Mijdrecht I I
SEO-CHECKLIST Strategie Concept Creatie SEO-checklist Met de SEO check van Switch kijken wij naar 51 specifieke onderdelen die ervoor zorgen dat uw website beter presteert. Hieronder vindt u een overzicht
Les 13. Voorbereiding
Les 13 Voorbereiding 1. Plaats DEZE TWEE PLUGINS op de server in de map libraries. Deze is nodig voor de werking van Masonry Views en Masonry API 2. Schakel de modules Masonry Views en Masonry API in.
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,
Website beoordeling zonetelechargement.com
Website beoordeling zonetelechargement.com Gegenereerd op Juli 23 2015 10:12 AM De score is 47/100 SEO Content Title zone-telechargement.com 520: Web server is returning an unknown error Lengte : 71 Let
Opdracht Dynamische Webapplicaties: HTML5
INLEIDING HTML5 is sinds kort de nieuwe standaard voor het maken van webpagina s. Deze nieuwe versie van de welgekende HTML (HyperText Markup Language) biedt voor het eerst de mogelijkheid om video en
Website beoordeling serdem.tn
Website beoordeling serdem.tn Gegenereerd op Maart 30 2017 15:51 PM De score is 65/100 SEO Content Title Lengte : 42 Perfect, uw title tag bevat tussen de 10 en 70 karakters. Description Mouelhi spécial
Meer Winst Met Je Website MEER WINST MET JE WEBSITE!
MEER WINST MET JE WEBSITE! Wat is het doel van jouw website? Wat wil je dat de bezoekers doen? En doen ze dat nu ook? Of kijken ze doelloos rond om daarna weer te verdwijnen. Vandaag gaan we kritisch naar
Website rapport zazoutotaal.nl
Website rapport zazoutotaal.nl ZazouTotaal Full Service Mediabureau Webdesign ZazouTotaal Full Service Mediabureau. De Webdesigner met 10 jaar ervaring. Voor betaalbare websites en webwinkels. Voor alle
Versie 2. Opdracht deel B 07-12-2014. Inhoud. Raoul Vos Hogeschool Leiden Studentnummer: 1088675
Versie 2 07-12-2014 Opdracht deel B Inhoud Raoul Vos Hogeschool Leiden Studentnummer: 1088675 Inhoudsopgave: Inleiding:... 3 Opdracht deel A Analyse... 3 Opdracht deel B Inhoud... 3 Opdracht deel C Website...
Website beoordeling fibreclick.co.uk
Website beoordeling fibreclick.co.uk Gegenereerd op December 21 2015 11:09 AM De score is 44/100 SEO Content Title Fibre Click Lengte : 11 Perfect, uw title tag bevat tussen de 10 en 70 karakters. Description
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
Klik&Steen Dashboard. Wat zijn nou interessante statistieken bij websites?
Klik&Steen Dashboard Wat zijn nou interessante statistieken bij websites? Inleiding Dit document dient als onderzoek naar de statistieken die interessant zijn om te laten zien in het dashboard van Klik&Steen.
Wat is Interaction Design?
Wat is Interaction Design? Wat is interaction design? Designing interactive products to support the way people communicate and interact in their everyday and working lives. Preece, Sharp and Rogers (2015)
Handleiding - Styling van OFB Web 4.0
Handleiding - Styling van OFB Web 4.0 Versie: 1.0 Inleiding OFB Web is opgebouwd uit controls. De plaatsing en positionering van de controls wordt vastgelegd in de page.aspx. Dit bestand kan gezien worden
Website beoordeling seo.sololaki.com
Website beoordeling seo.sololaki.com Gegenereerd op Februari 19 2016 17:13 PM De score is 66/100 SEO Content Title SEO Analyzer Lengte : 12 Perfect, uw title tag bevat tussen de 10 en 70 karakters. Description
ONTWERPEN 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:
Website beoordeling feedbackvote.com
Website beoordeling feedbackvote.com Gegenereerd op December 21 2018 11:22 AM De score is 51/100 SEO Content Title Feedbackvote - Best Community and Customer Feedback System and Votingsystem Lengte : 75
Websitecheck. Taak en Tekst voor websites die werken. www.jouwsite.nl
Taak en Tekst voor websites die werken www.jouwsite.nl Websitecheck Taak en Tekst, www.taakentekst.nl Buijs Ballotstraat 27A, 2563 ZH Den Haag 06-13935470 1 Websitecheck Website: Eigenaar: Datum: www.jouwsite.nl
Module IV - Cascading Style Sheets (CSS)
Module IV - Cascading Style Sheets (CSS) Cascading Style Sheets kunnen we het best vergelijken met opmaakprofielen binnen tekstverwerkers zoals Microsoft Word, Corel WordPerfect, OpenOffice Opmaakprofielen,
Informatietechnologie 1. Inleiding tot CSS. Richtlijnen voor opmaak. Kristof Michiels
Informatietechnologie 1 Inleiding tot CSS Richtlijnen voor opmaak Kristof Michiels In deze presentatie Voordelen en kracht van CSS Hoe schrijf je CSS stijlregels? Toevoegen aan HTML documenten Basisconcepten:
Website beoordeling pre-r.com
Website beoordeling pre-r.com Gegenereerd op Januari 08 2016 17:33 PM De score is 67/100 SEO Content Title Pre-R Mobile Urgent Care in San Luis Obispo, CA Lengte : 49 Perfect, uw title tag bevat tussen
Website beoordeling mgcaretaker.com
Website beoordeling mgcaretaker.com Gegenereerd op Juli 22 2019 05:30 AM De score is 58/100 SEO Content Title Quickbooks Support Number (+)-888-833-0109 -Mgcaretaker Lengte : 55 Perfect, uw title tag bevat
Websitecursus deel 1 HTML
Websitecursus deel 1 HTML WebCie A Eskwadraat www@a-eskwadraat.nl 8 april 2015 Inleiding Website cursus in drie delen: HTML CSS Javascript We gaan uit van geen voorkennis. Als je vragen hebt, stel ze!
Website beoordeling zap2login.net
Website beoordeling zap2login.net Gegenereerd op August 24 2019 05:36 AM De score is 51/100 SEO Content Title Zapper Lengte : 6 Let op, uw title tag zou tussen de 10 en 70 karakters (spaties inbegrepen)
WHITEPAPER. Wat is een. Responsive website? Voordelen van een. Responsive website? Hoe start je met een. Responsive website? RESPONSIVE WEBSITES
WHITEPAPER RESPONSIVE WEBSITES Wat is een Responsive website? Voordelen van een Responsive website? Hoe start je met een Responsive website? INTRODUCTIE Met het downloaden van deze whitepaper kunnen we
SEO & Retail Hoe maak je het verschil?
SEO & Retail Hoe maak je het verschil? Eduard Blacquière Senior SEO Consultant, OrangeValley 8 maart 2012 Zoekmachine optimalisatie (SEO) 1 2 3 Personalisatie Social search Social search 1,6 miljard zoekopdrachten
Website beoordeling zsdudova.sk
Website beoordeling zsdudova.sk Gegenereerd op Februari 02 2017 10:57 AM De score is 27/100 SEO Content Title Lengte : 0 Erg slecht. We hebben geen title tag gevonden in uw website. Description Lengte
Onderzoek naar producten en concurrentie Shop till you drop
Onderzoek naar producten en concurrentie Shop till you drop http://www.pimpter.com/nagelprinters/ Als je op de website komt is het meteen zichtbaar dat het over nagelprinters gaat. Buiten dat je allerlei
Website beoordeling google.com
Website beoordeling google.com Gegenereerd op Januari 14 2019 10:26 AM De score is 37/100 SEO Content Title Google Lengte : 6 Let op, uw title tag zou tussen de 10 en 70 karakters (spaties inbegrepen)
Monks DESIGN CHECKLIST
EMAIL DESIGN CHECKLIST Merk Optimalisatie Merknaam staat in de Van naam Het verstuur adres is herkenbaar Het Aan-veld is gepersonaliseerd met de naam van de ontvanger De onderwerpregel is informatief kort
Hand-out Web Technologies, werkcollege 6 Alex Reuneker (a.reuneker@hhs.nl), 2012
Hand-out Web Technologies, werkcollege 6 Alex Reuneker (a.reuneker@hhs.nl), 2012 1. Positie en flow Boxes, block-level en inline elements: Ieder HTML-element wordt, als het ware, als een omkaderd block-
XHTML. een website bouwen. Vergelijk met: een huis bouwen. Dadelijk de stenen metselen, of. Hoe begin je er aan? Wat is stap 1?
1010110101110001010 een website bouwen Vergelijk met: een huis bouwen. Dadelijk de stenen metselen, of eerst? Hoe begin je er aan? Wat is stap 1? 1010110101110001010 een website bouwen Ik heb een concept.
poldox web poldox web /24
poldoxweb poldoxweb 2012 1/24 poldox website 1. presentatie research -> breder dan onderwerp film 2. achtergrondinformatie film taakverdeling - de hele groep denkt na over de website - de hele groep schrijft
Stelt de voorgrondkleur van de tekst van een element in. Stelt in hoe de achtergrondfiguur moet worden herhaald, standaard: repeat.
OVERZICHT CSS - EIGENSCHAPPEN Eigenschap Beschrijving Mogelijke waarden KLEUR EN ACHTERGROND color Stelt de voorgrondkleur van de tekst van een element in. background-color Stelt de achtergrondkleur van
Templates maken voor Joomla! Hoe maak je zelf een template voor je Joomla! website
Templates maken voor Joomla! Hoe maak je zelf een template voor je Joomla! website Wat we gaan doen 1. Wie ben ik? 2. Voor- en nadelen bestaande templates en eigen templates 3. Eigen template op basis