web development - universiteit twente · today - general introduction - introduction to: - html...

WEB DEVELOPMENTFjodor van Slooten

TODAY

- General introduction

- Introduction to:

- HTML & CSS

- Bootstrap

- WordPress

- Practice

Workshop “Present your product idea on the web”

06/06/2018 MOD8 Virtual Product Development - WEB DEVELOPMENT 2

vanslooten.com/webdev

WEB DEVELOPMENT

http://vanslooten.com/webdev/

http://codepen.io/vanslooten/public-list/


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



- 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


GOAL

The plan: building blocks


But no ‘complete’ examples

1. Go to your favorite website

2. Press CTRL+U (View Source)


HTML

<title>

<body>

Bootstrap



HTML structure


<!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>

</body>

Start

End

codepen.io/vanslooten/pen/XJwVBg

Learn HTML @

http://codepen.io/vanslooten/pen/XJwVBg

Common HTML elements


<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="http://www.w3schools.com/">w3schools site</a>

List elements

HTML Layouts: <div>

6/6/2018MOD8 Virtual Product Development - WEB

DEVELOPMENT9

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:

http://www.w3schools.com/html/html_layout.asp

http://www.w3schools.com/tags/tag_div.asp

http://www.w3schools.com/css/css_positioning.asp

http://www.w3schools.com/html/html_layout.asp

HTML Classes


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

http://www.w3schools.com/html/html_classes.asp

http://www.w3schools.com/tags/tag_div.asp

http://www.w3schools.com/css/css_positioning.asp

http://codepen.io/vanslooten/pen/RPRxoQ

Responsive Web Design


• 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

https://www.w3schools.com/html/html_responsive.asp

• CSS: Cascading StyleSheets

• Separate structure from presentation

• Presentation is defined by style-rules

• External stylesheet: 1 style for entire site


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


• 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, selectors, selector reference

selector { stylerule; ... }

http://codepen.io/vanslooten/pen/GJqwKo

http://www.w3schools.com/css/default.asp

http://www.w3schools.com/css/css_selectors.asp

http://www.w3schools.com/CSSref/css_selectors.asp

Style: menu & page layout


<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


http://codepen.io/vanslooten/pen/gpMQbM




Style: menu & page layout


<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/




http://codepen.io/vanslooten/full/gpMQbM/

Layout & style


codepen.io/vanslooten/full/xGOepg/

View code?

http://codepen.io/vanslooten/full/xGOepg/

• 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


WORDPRESS

Wordpress.com online hosted version = free with limitations or pay €▪ Templates, plugins are limited, or pay▪ Hosted on address

XXXXX.wordpress.com, or pay

portfolio.id.utwente.nl/help/wordpress

https://portfolio.id.utwente.nl/help/wordpress

https://wordpress.org/

https://wordpress.com/


WordPress themes


[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


http://home.ctw.utwente.nl/slootenvanf/2015/08/07/wordpress-theming-create-a-child-of-an-existing-theme/

http://www.wpzoom.com/tutorial/recommended-practices-for-customizing-a-wpzoom-theme/

https://thethemefoundry.com/wordpress-themes/make/


WordPress plugins


[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


vanslooten.com/2015/09/27/paintings-dutch-landscapes/

https://home.et.utwente.nl/slootenvanf/2015/09/07/wordpress-photo-gallery-work-around-customize-theme/


https://home.et.utwente.nl/slootenvanf/2015/09/27/paintings-dutch-landscapes/

• Responsive web framework

• Components, grid, plugins, templates

• Originally developed by Twitter


BOOTSTRAP

w3schools.com/bootstrap4

https://getbootstrap.com/docs/4.0/components/

https://getbootstrap.com/docs/4.0/layout/grid/

https://www.google.nl/search?q=free+bootstrap+4+templates

https://www.w3schools.com/bootstrap4/

Bootstrap: 12 column grid layout


DEVELOPMENT21

column classes:

.col-xs-* .col-sm-* .col-md-* .col-lg-*

To easy create complex grid layouts for a variety of

different devices

xs classes target mobile devices

sm targets tablets

md targets laptops and smaller desktop screens

lg targets large desktop screens

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/LVZvmj


http://codepen.io/vanslooten/pen/LVZvmj


Bootstrap: 12 column grid layout


DEVELOPMENT22

column classes:

.col-xs-* .col-sm-* .col-md-* .col-lg-*

To easy create complex grid layouts for a variety of

different devices

xs classes target mobile devices

sm targets tablets

md targets laptops and smaller desktop screens

lg targets large desktop screens

One row on all devices

(small and up)

4 columns on medium and up devices, on small

devices ‘degrade’ to 2 columns

codepen.io/vanslooten/pen/RPoYJZ


http://codepen.io/vanslooten/pen/RPoYJZ


W3.CSS


Responsive CSS framework with some nice templates

w3schools.com/w3css

Quick start

https://www.w3schools.com/w3css/


DEVELOPMENT24

codepen.io/vanslooten/pen/KpMLwV

Copy

Paste

Embed media: youtube

http://codepen.io/vanslooten/pen/KpMLwV?editors=100

Embed media: carousel


<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

https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp

https://www.w3schools.com/w3css/w3css_slideshow.asp

Image gallery


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

https://codepen.io/vanslooten/pen/rOjNoa

http://www.stripjs.com/

• Most common:• Text editor + Browser + FTP client• Or: Adobe Dreamweaver• Combined with: framework, eg. Bootstrap, W3.CSS

• Other:• Adobe Muse• Wordpress.org• Axure

• Graphic design:• Adobe Photoshop, Sketch, Paint.NET, ...


DEVELOPMENT28

TOOLS Pick your tools

Text editors:AtomBrackets.ioNotepad++SublimeTextTextWrangler (Mac)

FileZilla FTP client

https://atom.io/

http://brackets.io/

http://notepad-plus-plus.org/download/

http://www.sublimetext.com/

http://www.barebones.com/products/textwrangler/

https://filezilla-project.org/download.php?show_all=1


CTRL+S (Save) F5 (Refresh)

• Use portfolio site or other site

• Also possible: register a domain and link it with portfolio site


DEVELOPMENT30

PUBLISHGet started

portfolio.id.utwente.nl

https://portfolio.id.utwente.nl/

Workflow


DEVELOPMENT31

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


1. Editor: writing texts and sketching rough drafts (page-flow, how does navigation work)

2. Developer: HTML + CSS + ... Coding3. Stylist (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

https://guides.github.com/

Referring properly to shared files


<!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


• Tutorials and slides @ vanslooten.com/webdev

• w3schools.com (HTML, CSS, Javascript, JQuery & Bootstrap)

• getbootstrap.com


Tip: examples on can be downloaded:


http://www.w3schools.com/

http://getbootstrap.com/


https://codepen.io/vanslooten/pens/public/?grid_type=list

STEP 1

1. Pick your tool

2. Create a simple webpage (‘Hello world’) [slide 7]

3. Publish it on portfolio.id.utwente.nl, send URL to me at the site

BREAK – We will 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


DEVELOPMENT35

WORKSHOP #1

"Present your product idea* on the web"* goal: e.g. design impression, fundraising


1h

2h



QUESTIONS?


web development - universiteit twente · today - general introduction - introduction to: - html...

Documents