web development - universiteit twente · 6/6/2018 mod8 virtual product development - web...
TRANSCRIPT
![Page 1: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/1.jpg)
WEB DEVELOPMENTFjodor van Slooten
![Page 2: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/2.jpg)
TODAY
- HTML & CSS advanced topics
- JavaScript, JQuery
- WordPress
- Bootstrap, Analytics
- PracticeWorkshop “Build a website for a product presentation”
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 2
WEB DEVELOPMENT
vanslooten.com/webdev
![Page 3: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/3.jpg)
6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3
SCHEDULE
>
Date Subjects
1 May 16th Present your product idea on the web
2 May 23th Build a website for a product presentation
3 June 6th Build a website for product support/configuration
& intro to web services
4 June 20th No lecture, but assistance
vanslooten.com/webdev
![Page 4: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/4.jpg)
- Do not use spaces in filenames
- Filenames and html-syntax are case sensitive
- Homepage must have name index.html
- Live view/Preview:
- Atom: Ctrl+Shift+m
- Brackets: sometimes does not work > Save (CTRL+S)
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 4
LAST WEEKRecap of Workshop
![Page 5: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/5.jpg)
Better Live preview in Atom
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 5
Atom: install "browser-plus"File > Settings, Install: type "browser", press "Install“
Use: Alt+Ctrl+O (or right-click > Open Browser-Plus)
atom.io/packages/browser-plus
(almost) live preview: press Ctrl+S to see
changes.
cmd:
apm install browser-plus --verbose
![Page 6: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/6.jpg)
Tip: do not change files from framework or plugins
06/06/2018MOD8 Virtual Product Development - WEB
DEVELOPMENT6
<head>
<title>My site</title>
<link rel="stylesheet" href="bootstrap/3.3.7/css/bootstrap.min.css"><link rel="stylesheet" href="bootstrap/3.3.7/css/bootstrap-theme.min.css"><!-- style of My site, over-rules bootstrap theme: --><link href="css/style.css" rel="stylesheet">
</head>
h3 {text-transform: uppercase;font-family: 'Helvetica Neue LT Std 45 Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
style.cssYour version of style for h3 over-rules the style of the
Bootstrap-theme:
Bootstrap style
Your style
Order of evaluation
(cascading)
![Page 7: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/7.jpg)
Last week’s topics
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 7
- Intro to HTML&CSS
- Bootstrap, WordPress
- Workflow:1. Create2. Preview3. Upload4. Test
local
site
![Page 8: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/8.jpg)
06/06/2018MOD8 Virtual Product Development - WEB
DEVELOPMENT8
HTML
• CTRL-U / View > Source
• Inspect
Learn from others… what? how?
<!-- comment in html -->
![Page 9: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/9.jpg)
HTML Layouts
6/6/2018MOD8 Virtual Product Development - WEB
DEVELOPMENT9
w3schools: layout, div element, positioning
• Design (sketch!)
• Create layout with <div>’s in HTML+CSS or use a framework (Bootstrap, W3.CSS, …)
• While building: background-color: yellow;
• Examples: see Fjodor’s Pens @ Codepen.io
• More: learnlayout.com, w3schools
learnlayout.com
Read more: vanslooten.com/2018/05/22/design-guidelines-web-dev/
![Page 10: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/10.jpg)
• @media rules
6/6/2018MOD8 Virtual Product Development - WEB
DEVELOPMENT10
STYLE
w3schools: media queries
css-tricks.com/css-media-queries
selector { stylerule; ... }
/* What if the viewport width >= 768px?: */@media (min-width: 768px) {
div.content {padding-left: 1em;margin-top: 12em;
}#menu ul {top: 0.5em;
}}
Comments in stylesheet: Java style
Separate piece of style for larger screens
(mobile first)
Viewport size != device resolution Check viewport @ mydevice.io
![Page 11: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/11.jpg)
<link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/bootstrap-theme.min.css"><!-- my style, this over-rules bootstrap's style --><link href="css/style.css" rel="stylesheet">
Cascading styles
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 11
• External, internal, inline…
• Bootstrap style first, then
yours
• Unsure where style comes
from? Use Inspect!
<!-– external stylesheet: --><link href="style.css" rel="stylesheet" type="text/css"><!-– internal stylesheet: --><style>p { background-color:grey; color:blue; }</style></head>
<body><p style="color:green; text-decoration:underline;">This paragraph has inline style. And, oh, wait, it has more...</p>
w3schools: CSS How to
Watch the order style is applied! (cascading)
Result: combined style
Inline style
![Page 12: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/12.jpg)
Typography
06/06/2018MOD8 Virtual Product Development - WEB
DEVELOPMENT12
w3schools: css_font, bootstrap text/typography
codepen.io/vanslooten/pen/zGKJeK
![Page 13: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/13.jpg)
True type fonts
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 13
• Font definition
@font_face
• Online fonts
@font-face {font-family: Sansation_Bold;src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot') format("opentype"); /* IE */font-weight: bold;
}
/* selector: select all paragraph elements with the word 'Demo' in the title */p[title*="Demo"] {font-family: Sansation_Bold;color: blue;
}
w3schools: css3_fonts google: fonts.google.comcodepen.io/vanslooten/pen/eNzoaB
codepen.io/vanslooten/pen/JYRYJE
![Page 14: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/14.jpg)
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 14
fonts.google.com
Include in HTML (in <head>):
Use:
Or include in stylesheet!
![Page 15: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/15.jpg)
Choosing colors
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 15
• Colors: see color tutorial, use palette of matching sets of colors
Tools: W3 ColorPicker, ColorZilla (color picker, gradient generator…)
![Page 16: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/16.jpg)
#content {background: #ed9017; /* default */background: linear-gradient(to bottom, #ed9017 0%, #f6e6b4 100%);
}
CSS Effects
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 16
Gradients: easy to create with online editor:
colorzilla.com/gradient-editor
.rounded_border {border: 8px outset red;border-radius: 5px;
}
w3schools: gradients, border-styles,
2d transforms, transitions, animations codepen.io/vanslooten/pen/JYRYJE
![Page 17: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/17.jpg)
Highlight on hover
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 17
.hovereffect {cursor: pointer;background-color: #1c1e1e;background: linear-gradient(#262828,#1c1e1e);
}
.hovereffect:hover {opacity: 0.80;
}
w3schools: pseudo-class,
cursor, gradients, opacity
0: completely transparent
1: completely opaque
pseudo-class :hover represents a state
of the element
codepen.io/vanslooten/pen/JYRYJE
![Page 18: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/18.jpg)
Embed: <iframe>
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 18
• Video (shown last week)
• Prototype (Axure, InVision, …)
• (Part of other) site
• etc.
Bootstrap: responsive embed
CodePen: How to embed an Axure Protoype
<iframe class="embed-responsive-item" src="https://home.et.utwente.nl/slootenvanf/uidessim/axure/demo/home.html"></iframe>
![Page 19: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/19.jpg)
<script>
6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 19
JAVASCRIPT
w3schools: Javascript Tutorial<button onclick="changeBackground('green')">Green</button>
<script>var count = 0;function changeBackground(newColor) {document.bgColor = newColor;count++;document.getElementById("demo").innerHTML="We changed the color "+count+" times!";
}</script>
<button> if clicked on, execute function changeBackground
Declare a variable Change background color of documentDefine a function
Access an element and change its content (innerHTML)
codepen.io/vanslooten/pen/qdqjqL
![Page 20: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/20.jpg)
Javascript: drawing on a canvas
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 20
• Canvas as a ‘sheet’ to draw on
• Drawing commands in Javascript
• Example: strokeRect(left,top,width,height)
<canvas id="drawing" width="360" height="240"></canvas><script>var canvas = document.getElementById('drawing');var context = canvas.getContext('2d');
context.strokeStyle = '#990000';context.strokeRect(20,30,100,50);</script>
w3schools: canvascodepen.io/vanslooten/pen/JYRYJE
![Page 21: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/21.jpg)
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 21
JQUERY
“A JavaScript library designed to simplify the client-side scripting of HTML”
w3schools: jQuery
<button>Click me</button><div id="panel">Hello World!</div>
<script>$(document).ready(function(){
$("#panel").hide();$("button").click(function(){
$("#panel").slideToggle();});
});</script>
codepen.io/vanslooten/pen/XbNgyo
CSS selector
jQuery.com
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
First, include library:
Then, use:
![Page 22: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/22.jpg)
JQuery: dynamic menu & pages
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 22
<nav><ul>
<li><a href="#page1">Home page</a><li><a href="#page2">Thoughts</a><li><a href="#page3">My city</a><li><a href="#page4">Links</a>
</ul></nav>
<div class="content">
<div id="page1"><!– Home page content -->
</div><div id="page2">
<!– Second page content --></div>
Only one of the pages will be visible
codepen.io/vanslooten/pen/gpMQbM
![Page 23: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/23.jpg)
JQuery: dynamic menu & pages
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 23
$("#menu li").click(function() {$("#menu li").removeClass("current"); // Remove any active class$(this).addClass("current"); // Add "current" class to selected tab$(".tab_content").hide(); // Hide all content
// Find the href attribute value to identify the active tab + content:var activeTab = $(this).find("a").attr("href");$(activeTab).fadeIn(); // Fade in the active ID content
}); // end click method codepen.io/vanslooten/pen/gpMQbM
Click function on list-elements in menuCSS selector
![Page 24: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/24.jpg)
How to create … ?
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 24
w3schools.com/howto
…or google!
• Slideshow
• Parallax (scrolling background)
• Google Maps
• etc.
![Page 25: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/25.jpg)
JQuery plugins
6/6/2018MOD8 Virtual Product Development - WEB
DEVELOPMENT25
accordion lightbox carousel
Find more plugins: unheap, jque.re
Overview of common plugins: vanslooten.com/webdev/plugins
![Page 26: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/26.jpg)
• Automatic install via Dashboard:Appearance > Themes > Add New
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 26
WORDPRESS Install a Theme or Plugin
Install manually:
• Download and extract zip-file
• Upload it to correct folder (with FileZilla):
Theme: wp-content/themes
Plugin: wp-content/plugins
wordpress.org/themes
vanslooten.com/webdev
![Page 27: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/27.jpg)
6/6/2018MOD8 Virtual Product Development - WEB
DEVELOPMENT27
Customize existing themeBY CREATING A CHILD THEME
Why use a child-theme?• Child themes will not be overwritten by updates.• Separate the original from your changes.
Tutorial: how-to-create-a-wordpress-child-theme
1. Create a Child theme
Use “Child Theme Configurator” pluginto create the child theme
2. Activate the child-theme
3. Edit the style, from WordPress dashboard, or download/edit/upload
![Page 28: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/28.jpg)
6/6/2018MOD8 Virtual Product Development - WEB
DEVELOPMENT28
Customize existing themeBY CREATING A CHILD THEME
What if I would like to use a Webfont in a theme?View result in browser
Or: Build new theme from scratch
Start here:
codex.wordpress.org/Theme_Development
To save a little work, you could generate a
starter-theme (a complete set of all necessary
files with minimal styling)
Examples: underscores.me
Test changes to stylesheet:
![Page 29: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/29.jpg)
1.While editing a Page (or Post) press
2.Select Create Gallery,
3.Select/upload images, then press
4.Adjust gallery settings, then
6/6/2018MOD8 Virtual Product Development - WEB
DEVELOPMENT 29
Page + image galleryWORDPRESS HAS BASIC GALLERY SUPPORT
codex.wordpress.org/The_WordPress_Gallery
Disadvantage: not much options in
styling, no popup-viewer (Lightbox)
Learn how to re-style the default gallery into a real fancy one
... So find a plugin with a nice gallery? Or… wait…
![Page 30: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/30.jpg)
<ul class="nav navbar-nav"><li><a href="#one">Blue</a></li><li><a href="#two">Red</a></li><li><a href="#three">Green</a></li>
</ul>
<div class="page" id="one">Hello World #1</div><div class="page" id="two">Hello World #2</div><div class="page" id="three">Hello World #3</div>
• Multiple pages
• Navigation
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 30
BOOTSTRAP
codepen.io/vanslooten/pen/gpLxmG
vanslooten.com/webdev
![Page 31: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/31.jpg)
• Know your visitor
• Google Analytics• Register, input tracking
code in html
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 31
ANALYTICS
google.com/analytics
Analytics WordPress plugin: MonsterInsights
![Page 32: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/32.jpg)
Test your website
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 32
• Use multiple browsers and have someone elsereview it
• validator.w3.org
• Errors about ALT-tags are less important
• You can ignore most of the warnings
• Browser:
• Right-click, Inspect Element
• Developer tools (all browsers, access via menu, or F12) search.google.com/search-console/mobile-friendly
mobile view
quirktools.com/screenfly
![Page 33: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/33.jpg)
MORE INFO
6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 33
• Tutorials and slides @ vanslooten.com/webdev
• w3schools.com (learn + reference for HTML, CSS, JavaScript, JQuery & Bootstrap)
• getbootstrap.com
• Read: “Design guidelines for Web Development”
vanslooten.com/webdev
Tip: examples on can be downloaded:
![Page 34: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/34.jpg)
Improve the 'quick-and-dirty' work of last week and create a nice presentation on the Web.
Do you need Bootstrap?
Are you able to present media?
What is your navigation going to look like?
What (main) pages will the site consist of?
06/06/2018MOD8 Virtual Product Development - WEB
DEVELOPMENT34
WORKSHOP #2
"Build a website for a product presentation"
OR: work on website for the project
vanslooten.com/webdev
![Page 35: Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 3 SCHEDULE > Date Subjects 1 May 16th Present your product idea on the web 2 May](https://reader030.vdocuments.net/reader030/viewer/2022040703/5d67787388c993f41f8b9ea2/html5/thumbnails/35.jpg)
QUESTIONS?
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 35