Web Technology lecure slides - home.et.utwente.nl...Integrate: Social media, image viewer, slideshow No lecture next week: next and last session on Oct. 15/16th WEB TECHNOLOGY CONTENT

WEB TECHNOLOGYTUTORIAL SESSION #5 FOR “WE CREATE IDENTITY”

Module 1 - We Create Identity

▪ Usability

▪ More on jQuery

▪ Integrate: Social media, image viewer,

slideshow

▪ No lecture next week: next and last session

on Oct. 15/16th

WEB TECHNOLOGYCONTENT OF THIS LECTURE

10/1/2019WE CREATE IDENTITY 2

I can not see your comments,

messages etc. on Canvas.

So please use e-mail

(f.vanslooten@utwente.nl) to

communicate!

10/1/2019WE CREATE IDENTITY 3

CONTENTS OF THIS COURSEACTIVITIES OVERVIEW

Date Subjects

1 3/4 Sep. Intro, editorial process, create first webpage

2 10/11 Sep. Basics of HTML and CSS, editorial process, Blog, introduction to

WordPress

3 17/18 Sep. HTML and CSS, design guidelines, using and customizing

WordPress themes

4 24/25 Sep. Introduction to JavaScript & jQuery, advanced

WordPress topics

5 1/2 Oct. Advanced techniques, jQuery plugins, social media integration

6 15/16 Oct. Test & evaluation, peer review

1 hour tutorial presentation

3 hours work on your site with help/do assignments

each session

Two sessions a week: Tuesday and Wednesday mornings

▪ Portfolio content (texts): no management/selling ‘bla bla’, but show (for

instance) how you contributed to the project, or what skills where involved to create it:

you are not selling the product, but have to sell yourself

▪ What could be your 'personal touch' of the design in a template/theme/stylesheet?

One or more from:

▪ Own header/main image/icon/logo

▪ Changes in layout/positioning

▪ Own/new font(s)

▪ Well defined (new) color-scheme/palette

▪ Individual/special styling of elements

10/1/2019WE CREATE IDENTITY 4

DESCRIPTION OF PORTFOLIO ITEMS

Have at least 2

changes, describe

them (include code

examples) in your

Blog!

Assignment #4

▪ Test after upload!

▪ Do an upload during lecture: so we can help you

▪ Hard Reload of webpage

▪ After an upload to the site, it might be necessary to do a 'hard reload'

of the page before you see any changes:

▪ Open Developer tools of browser (right click, choose Inspect...).

Then right click the refresh-icon and select Hard Reload (or

CTRL+SHIFT+R in Chrome)

10/1/2019WE CREATE IDENTITY 5

UPLOAD & TESTINGAssignment #4

▪ Navigation Aids (links, icons)

▪ Structure (menu, sitemap)

▪ Simple, Consistent▪ Entire site same look & feel

▪ Accessibility▪ Text, Graphics, Audio & Video

▪ Feedback Mechanisms▪ Value your visitors: enable them to leave comments

10/1/2019WE CREATE IDENTITY 6

USABILITY: GRAPHICAL DESIGNDESIGN ELEMENTS

<img alt="Description..."

▪ Titles, headlines: accurate description

▪ Organize content in a neat, logical order. Make pages

clear and orderly. Be brief, if possible.

▪ Buttons, menu items

▪ Make their intended use obvious. Don’t use button titles that

are long. If it’s a search button, call it “Search”. If the button is

used to send e-mail, call it “Send”.

▪ Search Features

▪ Keep it simple

▪ Hide advanced features

10/1/2019WE CREATE IDENTITY 7

USABILITYDON'T MAKE ME THINK

Your visitors…

▪ Don’t Really Read Pages

▪ Trial & Error, visit in a hurry… no time… scan pages

▪ Don’t Make Optimal Choices

▪ Guessing, click around…. <back button

▪ Muddle Through

▪ No time to read instructions… Click till they find…

or: frustration sets in, leave site

10/1/2019WE CREATE IDENTITY 8

USABILITYFACTS OF LIFE

“Design pages for scanning, not reading”

▪ What site is this (Site ID)

▪ What page am I on (Page name/title)

▪ What are the major sections of this site (Sections)

▪ What are my options at this level (Local Navigation)

▪ Where am I in the scheme of things? (“You are here” indicators)

▪ How can I search?

10/1/2019WE CREATE IDENTITY 9

>TRUNK TEST<

Image that you’ve been blindfolded and locked in the trunk of a car,

then driven around for a while and dumped on a page somewhere

deep in the bowels of a Website. If the page is well designed, when

your vision clears you should be able to answer these questions

without hesitation after 30 seconds:

30sec

10/1/2019WE CREATE IDENTITY 10

Site ID SearchSections/main

navigation

“You are here”

indicators

Local navigation

↓

Page name (title)

10/1/2019WE CREATE IDENTITY 11

Important

▪ Scans, photos: JPEG

▪ Max. width 1000px

▪ Compression: Medium or

High

10/1/2019WE CREATE IDENTITY 12

PREPARE IMAGES FOR USE ON A WEBSITEPHOTOSHOP: FILE > EXPORT > SAVE FOR WEB

Images with

transparency?

Use PNG

Learn more Result < 200K

▪ Use multiple browsers and have someone else review 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(in browser access via menu, or F12)

10/1/2019WE CREATE IDENTITY 13

TEST YOUR WEBSITE

mobile view

search.google.com/search-console/mobile-friendly

GTmetrix, Screenfly

10/1/2019WE CREATE IDENTITY 14

INTEGRATE: SOCIAL MEDIAEMBEDDING TWITTER FEED

dev.twitter.com

▪ Sign in, goto Settings > Widgets > Create New

▪ Choose type: eg. List and enter details:

Show recent tweets from @fjodorvs

Twitter feeds in

Wordpress?:

Enter your handle, eg. @fjodorvs

Copy code into your page

▪ Like button:

developers.facebook.com/docs/plugins/like-button

10/1/2019WE CREATE IDENTITY 15

INTEGRATE: SOCIAL MEDIAFACEBOOK

developers.facebook.com

1)

2)

Follow instructions to copy

code in your page

Enter URL (address) of

your site here

WE CREATE IDENTITY

▪ Image viewer, also called LightBox

▪ Connect to online services:

Instagram, Picasa, Flicker

▪ Show video (Youtube)

▪ Example: fancyBox

10/1/2019 16

INTEGRATE: PHOTO VIEWER

codepen.io/vanslooten/pen/rOjNoa

1. Include jQuery and fancyBox scripts:

10/1/2019WE CREATE IDENTITY 17

FANCYBOX, A LIGHTBOX VARIANTINTEGRATE AN IMAGE GALLERY INTO YOUR SITE

<!-- Add jQuery library --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Add fancyBox --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" type="text/css" media="screen" /><script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

codepen.io/vanslooten/pen/rOjNoa

In this example, we use the CDN-versions of the scripts

from cdnjs.com/libraries/fancybox

2. Create a div containing a set of linked images:

3. Add script to start fancyBox:

10/1/2019WE CREATE IDENTITY 18

FANCYBOXSHOW THE GALLERY IN A WEBPAGE

<div class="gallery"><a href="images/Chrysanthemum.jpg"><img src="images/Chrysanthemum.jpg" alt="Chrysanthemum: nice flower"></a>...

</div>

<script>$(document).ready(function() {

$(".gallery a").fancybox();});

</script> codepen.io/vanslooten/pen/rOjNoa

10/1/2019WE CREATE IDENTITY 19

LIGHTBOX VARIANTS

Overview of widgets, plugins etc

▪ Sliders & Image carousels

10/1/2019WE CREATE IDENTITY 20

IMAGE CAROUSEL

Overview of widgets, plugins etc

W3.CSS Slideshow

▪ In Post or Page,

Create a Gallery

▪ Add HTML block:

10/1/2019WE CREATE IDENTITY 21

JQUERY APPLIEDTURN STANDARD WORDPRESS GALLERY INTO ISOTOPE GALLERY

detailed description

Isotope

<!-- load isotope: --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script><!-- activate isotope: --><script>jQuery(function($){

// remove some default classes from the blocks gallery (your classes might be different):$('.wp-block-gallery').removeClass("columns-3");// set style for layout of the items:$('.blocks-gallery-item').css({"width":"20%", "margin":0, "padding":0});// activate isotope:$('.wp-block-gallery').isotope({

itemSelector: '.blocks-gallery-item', layoutMode: 'masonry'});

});</script>

▪ Style & layout: style.css (change via Appearance, Customize,

Custom CSS)

▪ Change HTML/content/PHP:

▪ Anatomy of a WordPress theme

10/1/2019WE CREATE IDENTITY 22

CHILD THEME: CHANGE LAYOUT/HTMLWHERE TO FIND WHAT?

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

To change a file, copy it from

parent to child theme (theme

folder). How to make a child theme was

introduced in session #3.

Eg. to remove "Category:" or "Category

Archives:" at the top of a category page

▪ If you did not do this yet: create a child theme

▪ Get the code (see slide 15)

1. Find footer.php in parent theme, download it to your website folder

2. Edit footer.php, insert the code, save

3. Upload footer.php to child theme folder

10/1/2019WE CREATE IDENTITY 23

CHILD THEME: CHANGE LAYOUT/HTMLADD FB LIKE BUTTON TO YOUR SITE

1)

2)

3)

1. Include processing script

2. Add a canvas and link its id with data-processing-target

3. Write the script

1-10-2019WE CREATE IDENTITY 24

PROCESSING

codepen.io/vanslooten/pen/pjRorq

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js"></script><script type="application/processing" data-processing-target="pjs">

void setup() {size(200, 200);background(100);stroke(255);ellipse(50, 50, 25, 25);println('hello web!');

}</script><canvas id="pjs"></canvas>

1)

2)

3)

how to include a .pde file

1. Write a Peer-review on the site of one other student

▪ Use this webform (link will be available at Friday Oct.11th 9:00h)

2. Write on your Blog: a summary of your review, including:

▪ A link to the Showcase Portfolio you reviewed

▪ Reflection (what did you learn from reviewing?)

▪ Analyze one of the pages of the site you reviewed: explain how the page

was made (provide technical details)

The summary on your Blog will be public: so be polite and remove sensitive details that

might be in the review.

Be aware that there are some sites which are not publicly accessible: you must visit them

from the university network or use a VPN connection.

10/1/2019WE CREATE IDENTITY 25

ASSIGNMENTPEER REVIEW

Due date: Wednesday Oct. 16th

#5

You must do the review between Friday Oct 11th and Wednesday Oct. 16th.

NEXT WEEK

NO LECTURE (NEXT & LAST LECTURE: OCT 15/16TH)

FINALIZE SITE, ADD PROJECT RESULTS TO SHOWCASE PORTFOLIO

Examples & slides @ vanslooten.com/create

Fjodor van Slooten

Horstring W241 (Horst building)

f.vanslooten@utwente.nl

Student assistants:Benedetta Cervone & Stijn Wolters