Embed Size (px)
Citation preview
WEB DEVELOPMENTFjodor van Slooten
TODAY
- General introduction
- Introduction to:
- HTML & CSS
- Bootstrap
- WordPress
- Practice
Workshop “Present your product idea on the web”
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 2
vanslooten.com/webdev
WEB DEVELOPMENT
5/21/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 3
SCHEDULE
>Date Subjects
1 May 15th Present your product idea on the web
2 May 22th Build a website for a product presentation
3 June 5th Build a website for product support/configuration
& intro to web services
4 June 19th No lecture, available for assistance
vanslooten.com/webdev
- Familiarize with web technology for product
presentation, web services and other forms of web
presence
- Get hands-on experience on implementing a website or
service based on a website design
- Understand the necessary underlying web technology
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 4
GOAL
The plan: building blocks
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 5
But no ‘complete’ examples
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 6
1. Go to your favorite website
2. Press CTRL+U (View Source)
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 7
HTML
<title>
<body>
Bootstrap
vanslooten.com/webdev
HTML structure
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 8
<!doctype html><html><head><meta charset="utf-8"><title>Hello world</title><style type="text/css">.italictekst {
font-style: italic;}</style></head>
<body>Hello <span class="italictekst">world</span>!</body></html>
Start HTML-document
Header
Body (content)
Title
Stylesheet
Document type
<body><!-- content -->
</body>
Start
End
codepen.io/vanslooten/pen/XJwVBg
Learn HTML @
Common HTML elements
5/21/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 9
<img src="face.jpg" width="198" height="254" alt="Face">
Image
Link (anchor)
Unordered list
<ul><li>This is the first item from the unordered list</li><li>Second item of the list</li><li>Third item of the list</li></ul>
Visit the<a href="https://www.w3schools.com/">w3schools site</a>
List elements
HTML Layouts: <div>
5/21/2019MOD8 Virtual Product Development - WEB
DEVELOPMENT10
w3schools: layout, div element, positioning
Tip: experiment/test?
Use different background-colors for div-
elements
• Section or part
• Container: group elements
• Base element to create layout
• Overlap?: use z-index
More semantic derivatives:
tutorial: learnlayout.com
HTML Classes
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 11
w3schools: html classes, div element, positioning
<body class="grey">
<div class="column"><header class="red">Title</header><section class="orange">
Content!</section><footer class="red">My page</footer>
</div>
</body>codepen.io/vanslooten/pen/RPRxoQ
• CSS: Cascading StyleSheets
• Separate structure from presentation
• Presentation is defined by style-rules
• External stylesheet: 1 style for entire site
5/21/2019MOD8 Virtual Product Development - WEB
DEVELOPMENT12
STYLE
<!doctype html><html><head><title>My first page with style</title><!-– external stylesheet --><link href="style.css" rel="stylesheet" type="text/css"></head><body>
</body></html>
External stylesheet in file style.css
Style example
5/21/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 13
• Internal stylesheet: style for current page
<!doctype html><html><head><title>My first page with style</title><!– internal stylesheet --><style>p {
font-family: "Trebuchet MS", Helvetica, sans-serif;font-size: 14px;
}</style></head><body><p>This text is part of a paragraph.</p></body></html>
px: absolute value in
pixels
Selector: apply style
to all paragraph
elements
codepen.io/vanslooten/pen/GJqwKo
w3schools: css, syntax, selectors, reference
selector { stylerule; ... }
Style: menu & page layout
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 14
<nav><ul>
<li><a href="#tab1">Home page</a><li><a href="#tab2">Thoughts</a><li><a href="#tab3">My city</a><li><a href="#tab4">Links</a>
</ul></nav>
nav ul li {background: black;color: white;text-align: right;
}nav li a {
text-decoration: none;}
nav li.current {width: 16em;text-align: left;
}nav li.current a {
margin-left: 9em;font-weight: bold;
}
codepen.io/vanslooten/pen/gpMQbM
selector li.current:
list elements with class
"current"
selector nav ul li:
list-elements (li)
inside ul, inside navelement
w3schools: css, syntax, selectors, reference
Style: menu & page layout
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 15
<nav>...</nav><div class="content">...</div>
div.content {float: left;margin-left: 9em;margin-top: 1.8em;
}
<div> has class "content"
content floats to something left of it (menu)
selector div.content:
div-elements with class
"content"
codepen.io/vanslooten/full/gpMQbM/
w3schools: css, syntax, selectors, reference
Layout & style
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 16codepen.io/vanslooten/full/xGOepg/
View code?
Box model
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 17
top
left Edge of element
border-right: 1em solid black
Width of right border of element is 1em and black
CSS Box Model, margins, padding, borders
codepen.io/vanslooten/pen/KxyPWr
• Blog, but very suitable to develop any type of site
• Recommended: install on your own site(download from wordpress.org, install, customize)
• Why on your own site? Maximum control over design and functionality
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 18
WORDPRESS
Wordpress.com online hosted version▪ Templates, plugins are limited and can
often not be modified▪ Hosted @ XXXXX.wordpress.com
Wix web-based website builder▪ Templates, plugins are limited and can
often not be modified▪ Hosted @ XXXXX.wix.com portfolio.id.utwente.nl/help/wordpress
Both are free with limitations or pay €
WordPress themes
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 19
[more next week]
Dashboard: Appearance > Themes > Add New
▪ Find a nice theme, customize it (by creating a child theme)
▪ Learn how to create a child theme or read this
▪ Or: Create your own theme with Make-Theme, a visual theme-builder
portfolio.id.utwente.nl/help/wordpress
WordPress plugins
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 20
[more next week]
Dashboard: Plugins > Add New
• Browse plugins, install
Beware that a lot of plugins are
commercial. They offer a free “Lite”
version, but if you want advanced
stuff, you’ll have to pay.
Or… hack a little
portfolio.id.utwente.nl/help/wordpress
vanslooten.com/2015/09/27/paintings-dutch-landscapes/
WordPress plugins: Forum/discussion board
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 21
• Responsive web framework
• Components, grid, plugins, templates
• Originally developed by Twitter
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 22
BOOTSTRAP
w3schools.com/bootstrap4
Get started:
Bootstrap: 12 column grid layout
21/05/2019MOD8 Virtual Product Development - WEB
DEVELOPMENT23
column classes:
.col-* .col-sm-* .col-md-* .col-lg-*
To easy create complex grid layouts for a variety
of different devices
.col- extra small devices
.col-sm- small devices
.col-md- medium devices
.col-lg- large devices
One row on all devices
(small and up)
4 columns on medium and up devices, only on
small devices columns will ‘degrade’ to stacked
codepen.io/vanslooten/pen/LVZvmjw3schools.com/bootstrap4
W3.CSS
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 24
Responsive CSS framework with some nice templates
w3schools.com/w3css
Quick start
Steps:1. Go to your YouTube movie
2. Click
3. Click
4. Click Copy
21/05/2019MOD8 Virtual Product Development - WEB
DEVELOPMENT25
codepen.io/vanslooten/pen/KpMLwV
Copy
Paste
Embed media: Youtube
Embed media: slideshow/carousel
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 26
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="item active"><img src="img/1.jpg" alt="..."><div class="carousel-caption">
<h3>Title text</h3><p>Description text</p>
</div></div>
</div>
w3schools.com/bootstrap4/bootstrap_carousel.asp
w3schools.com/w3css/w3css_slideshow.asp
Image gallery
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 27
With fancyBox
codepen.io/vanslooten/pen/rOjNoa
<ul><li><a href="FULLSIZE_IMAGE.PNG"><img src="THUMBNAIL_IMAGE.PNG"></a></li><li><a href="FULLSIZE_IMAGE.PNG"><img src="THUMBNAIL_IMAGE.PNG"></a></li><li><a href="FULLSIZE_IMAGE.PNG"><img src="THUMBNAIL_IMAGE.PNG"></a></li>...</ul>
1. Add links to jQuery and fancyBox to your webpage2. Create a set of linked images, for example in a list:
3. At the end of the page, add the script to start fancyBox
Alternative: Stripjs
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 28
Responsive Web Design
5/21/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 29
• Can deliver web pages that adapt to variable
screen sizes
• Important for tablets, mobile devices, …
• Design strategy: design for smaller screens first,
then scale up to larger screens
w3schools: responsive
• Most common:• Text editor + Browser + FTP client• Combined with: framework, eg. Bootstrap, W3.CSS
• Other:• Wordpress.org• Wix• Axure
• Graphic design:• Adobe Photoshop, XD, Sketch, Paint.NET, ...
21/05/2019MOD8 Virtual Product Development - WEB
DEVELOPMENT30
TOOLS Pick your tools
Text editors:AtomBrackets.ioNotepad++SublimeTextTextWrangler (Mac)
FileZilla FTP client
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 31
CTRL+S (Save) F5 (Refresh)
Atom: Live view/Preview: Ctrl+Shift+m or install browser-plus package and use Ctrl+Alt+o
Better Live preview in Atom
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 32
Atom: install "browser-plus"File > Settings, Install: search for "browser-plus", press "Install"
Use: Ctrl+Alt+o(or right-click > Open Browser-Plus)
atom.io/packages/browser-plus
(almost) live preview: press Ctrl+S to see
changes.
• Use portfolio site or other site
• Also possible: register a domain and link it with portfolio site
21/05/2019MOD8 Virtual Product Development - WEB
DEVELOPMENT33
PUBLISHGet started
portfolio.id.utwente.nl
Workflow
21/05/2019MOD8 Virtual Product Development - WEB
DEVELOPMENT34
1. Create webpage on your computerUse examples/info from previous slides
2. PreviewOpen page in your browser
3. Upload to your siteConnect&upload: see guide
4. TestOpen page on site:index.html:https://portfolio.id.utwente.nl/student/xxxxxxxxxx/
page.html:https://portfolio.id.utwente.nl/student/xxxxxxxxxx/page.html portfolio.id.utwente.nl
Filename(s):Use only lowercase characters, no spacesStart with: index.html, this will be your homepage!
Workflow - editorial process & collaboration
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 35
1. Editor: writing texts and sketching rough drafts (page-flow, how does navigation work)
2. Developer: HTML + CSS + ... Coding3. Stylist (graphic designer): Photoshopping: designing and creating
images, icons etc., determining colors: 'house style'
tasks & roles
Collaboration: work on a shared drive (Google drive, Dropbox etc). For each role, add a folder:
WordPress:- Editor & Stylist- Dashboard: add/edit pages/content- Theme developer
Originals, e.g. .psd files
Originals, e.g. .doc .txt files
Contents of website folder will go online
Web-version of images (shrinked png/jpg)
Alternative: use online platform like GitHub: guides.github.com
Referring properly to shared files
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 36
<!doctype html><html><head><title>Page 2</title><!-– shared stylesheet --><link href="css/style.css" rel="stylesheet" type="text/css"></head><body><img src="img/image1.png"></body></html>
Put all pages (.html files) in folder ‘website’
relative reference- Works online and local (on your
computer: local testing is possible)- Will break only if you move file (e.g.
page2.html) into a subfolder
page2.html
File and folder naming to avoid errors:- use only lowercase characters- do not use spaces or special characters
MORE INFO
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 37
• Tutorials and slides @ vanslooten.com/webdev
• w3schools.com (HTML, CSS, Javascript, JQuery & Bootstrap)
• getbootstrap.com
vanslooten.com/webdev
Tip: examples on can be downloaded:
STEP 1
1. Pick your tool
2. Create a simple webpage (‘Hello world’) [slide 7-9]
3. Publish it on portfolio.id.utwente.nl, send URL to me at the site
BREAK - discuss your pages
STEP 2
1. Create a page using Bootstrap or W3.CSS
2. Add header, navigation, layout
3. Add media (your product ideas!)
12h - discuss your pages
21/05/2019MOD8 Virtual Product Development - WEB
DEVELOPMENT38
WORKSHOP #1
"Present your product idea* on the web"* goal: e.g. design impression, fundraising, …
vanslooten.com/webdev
1h
2h
QUESTIONS?
21/05/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 39
![[BOOK] [Bootstrap] [Awesome] Bootstrap-Programming-Cookbook](https://img.pdfslide.us/doc/110x75/577ca6bf1a28abea748c023f/book-bootstrap-awesome-bootstrap-programming-cookbook.jpg)
