WEB DEVELOPMENTFjodor van Slooten

TODAY

- HTML: use & view images

- Use forms for feedback- Send a form by email

- Interactive forms- Input validation

- Store & send results

- Add forum, wiki, shop etc.

- Example product configurator

- Webservices with Firebase & WordPress

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 2

vanslooten.com/webdev

WEB DEVELOPMENT

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

- Build a multipage site; examples on codepen:

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 4

LAST WEEK

codepen.io/vanslooten

codepen.io/vanslooten/pens/forked

Bootstrap multi-page examples

under ‘forked’

Last week’s topics

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 5

- Browser: use inspect & test your site

- Style (CSS Effects)

- Wordpress: how to create your own theme

(child-theme)

• Scans, photos: JPEG

• Max. width 1000px

• Compression: Medium or High

Result < 200K

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 6

HTML: IMAGESPhotoshop: File > Export > Save for Web

Icons, images with

transparancy: PNG

Prepare images for use on website

1920x1080 =2.1 megapixel

Integrate: Photo viewer (Lightbox)

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 7

• Image viewer, often called LightBox

• Connect to online Photo services: Picasa, Flicker

• Show video (Youtube)

• Example: fancyBox, a Lightbox variant

codepen.io/vanslooten/pen/rOjNoa

Check out Codepen example,

it includes 3 easy steps to

add it to your page

Image maps

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 8

w3schools: tag_map

• Add links to hotspots on image

• Hotspots can be rect, circle, poly

• Tool: Dreamweaver, app, or online

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap"><area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"><area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"><area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">

</map>

image-map.net

• HTML forms are used to collect user input

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 9

HTML: FORMS <form>...</form>

w3schools.com/html/html_forms

<form action="action_page.php">First name:<br><input type="text" name="firstname" value="First name"><br>Last name:<br><input type="text" name="lastname" value="Last name"><br><br><input type="submit" value="Submit"></form>

codepen.io/vanslooten/pen/ZGKjOQ

Search form

6/19/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 10

• Style a search-form

• Example: Google search-form in upper right corner

• Search inside a page: Mark.JS

<p>Example of a search form, searches with Google in utwente.nl/io:</p><form id="searchform" name="searchform" method="get" action="http://www.google.com/search">

<input type="text" size=20 name="q" id="searchfield" /><input type="hidden" name="sitesearch" value="utwente.nl/io" />

</form>

vanslooten.com/webdev/examples/search

#searchform {position: fixed;top: 10px;right: 10px;

}

#searchfield {background-image: url('search.jpg');background-repeat: no-repeat;background-position: right center;color: #717171;text-transform: lowercase;border: 1px solid black;

}

Create forms with bootsnipp

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 11

• Interactive

bootstrap form

builder

• Copy-paste html

code

Bootsnipp/forms = product configurator ;-)

bootsnipp.com/forms

Form Builder and Generator for Bootstrap

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 12

FEEDBACK

<form action="send.php" method="post">

...

</form>

<input type="text" name="name" />

<textarea name="message" rows="4" cols="40"></textarea>

<input type="submit" value="Send" />

For this form to work, it needs the PHP-script send.php,

which should be online (on a website).

Download the zip-file email_form.zip here!

w3schools: forms, AJAX

vanslooten.com/webdev/examples/email_form

Send a form by email

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 13

FORM VALIDATION

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js'></script><script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.min.js'></script><script>$().ready(function () {

$('#commentForm').validate();});</script><form id="commentForm" method="get" action="">

<fieldset><legend>Please provide name, email address and a comment</legend>

<label for="cname">Name (required, at least 2 characters)</label><input id="cname" name="name" minlength="2" type="text" required>

...</form>

jqueryvalidation.org

codepen.io/vanslooten/pen/NqjedR

Bootstrap: use formvalidation.io & Codepen example

Product support: forum, wiki, shop etc.

19/06/2019MOD8 Virtual Product Development - WEB

DEVELOPMENT14

phpBBAn open source bulletin board system

phpbb.com

MediaWikiOpen source wiki package, base of

Wikipedia mediawiki.org

WooCommercee-commerce plugin for WordPresswoocommerce.com

... and offer manuals, guides etc.

Alternatives on WordPress: BuddyPress, bbPress

Alternatives on WordPress: Encyclopedia / Glossary / Wiki

Example product configurator

19/06/2019MOD8 Virtual Product Development - WEB

DEVELOPMENT15

An example by Lisa Boon (bachelor assignment)

Pasta creator:

Build using jQuery UI and custom jQuery programming

This is a prototype, for usability testing

jQuery UI tabs widget

On page 1-5 you choose

elements, which are added to

overview on page 6

Example product configuratorSmashing magazine: "Designing a Perfect Responsive Configurator"

Examples of last’ years sites

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 16

Check out the sites here:last’ years sites @vanslooten.com

Firebase: build a webservice

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 17

- A Javascript based cloud database -firebase.google.com

• Introduction & first steps under

“Get started for Web”

• Checkout examples

Documentation: firebase.google.com/docs

Example: access WordPress resources/data

from an APP

• Ecommerce/shop: plugins"Best Free WordPress Ecommerce Plugins"

Most popular: WooCommerce – basic use is free, but lots of add-ins are not

• Offer content of WordPress in other forms/format: eg. access WordPress resources via WSDL, SOAP, XML, JSON, XML, RSS/ATOM etc.; use a plugin

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 18

WORDPRESS Create a web service…

Child theme: change layout/html

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 19

• Style & layout: style.css

• HTML:• Anatomy of a WordPress theme

index.php, single.php, page.php...

A child-theme contains only a style.css file. All other files are dependent on parent!A child theme can be made with the Child Theme Configurator

To change a file, copy it from parentto child (theme folder)

Additional CSS

- Where to find what? -

WordPress: collaborate

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 20

Work together on a WordPress site• Add users• Assign roles

• Set roles in detail: use plugin like Capability Manager Enhanced

Tips on workflow and assigning tasks were also given in presentation 1, slide 34-36

More info on WordPress User Roles and Permissions

WordPress theme with Elementor

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 21

Tips:• How to create a page with full width elements

elementor.com

Elementor is a page builder• Install plugin “Elementor Page

Builder”• Or install a theme created with

Elementor• Basic edition is free (but you might need the

Pro-features quickly)

WordPress Page Builders Compared

Intro: How to Create Custom WordPress Layouts With Elementor

MORE INFO

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 22

• Tutorials and slides @ vanslooten.com/webdev

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

• WordPress.org, WpBeginner.com

• getbootstrap.com

• Firebase.com

vanslooten.com/webdev

• Write an essay – focus:• How did I use/integrate/translate the tool in the project• What did I use/integrate/translate of the tool in the project• Why did I use/integrate/translate specific parts of the tool in the project

• It’s personal

• Why…? OR Why not

• Why did you not use XXXX but choose YYYY• Explain why YYYY is better, more suitable, more applicable: make the teacher

learn something• Substantiation = everything => no substantiation means failure

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 23

PROJECT: ESSAY Deadline: 24-06-2019 9:00

Template for essay provided on Canvas

Include a link to your website/digital explanation

QUESTIONS?

19/06/2019 MOD8 Virtual Product Development - WEB DEVELOPMENT 24