Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB...
35
WEB DEVELOPMENT Fjodor van Slooten
Transcript of Web Development - Universiteit Twente · 6/6/2018 MOD8 Virtual Product Development - WEB...
WEB DEVELOPMENTFjodor van Slooten
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
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
- 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
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
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)
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
06/06/2018MOD8 Virtual Product Development - WEB
DEVELOPMENT8
HTML
• CTRL-U / View > Source
• Inspect
Learn from others… what? how?
<!-- comment in html -->
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/
• @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
<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
Typography
06/06/2018MOD8 Virtual Product Development - WEB
DEVELOPMENT12
w3schools: css_font, bootstrap text/typography
codepen.io/vanslooten/pen/zGKJeK
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
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 14
fonts.google.com
Include in HTML (in <head>):
Use:
Or include in stylesheet!
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…)
#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
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
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>
<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
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
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:
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
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
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.
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
• 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
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
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:
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…
<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
• 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
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
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:
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
QUESTIONS?
06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 35
