29
WEB TECHNOLOGY TUTORIAL SESSION #5 FOR “WE CREATE IDENTITY” 2016-201600066-1A: We Create Identity (2016-1A)
WEB TECHNOLOGYTUTORIAL SESSION #5 FOR “WE CREATE IDENTITY”
2016-201600066-1A: We Create Identity (2016-1A)
Usability
More on jQuery
Integrate: Social media, image viewer,
slideshow
Next and last session on Oct. 19th
WEB TECHNOLOGYCONTENT OF THIS LECTURE
10/4/2016WE CREATE IDENTITY 2
Examples @ vanslooten.com/create
Date Subjects
1 7 Sep. 2016 Intro, editorial process, create first webpage
2 14 Sep. 2016 Basics of HTML and CSS, editorial process, Blog
(WordPress)
3 21 Sep. 2016 HTML and CSS, develop a WordPress theme
4 28 Sep. 2016 HTML&CSS, introduction to JavaScript & jQuery,
WordPress plugins
5 5 Oct. 2016 Advanced techniques, jQuery plugins, social media
6 19 Oct. 2016 Test & evaluation, peer review
10/4/2016WE CREATE IDENTITY 3
CONTENTS OF THIS COURSE
ACTIVITIES OVERVIEW
AS
SIG
NM
EN
T #
3, #4
Do not forget to post weekly updates
on your progress to your Blog. This
may cover: work for all courses, project,
design of your site etc..
Quite a lot of you forgot one or both Blog-
posts
If you fail, you get 2 days to fix it
Please include a date with each post
Present the posts in a logical,
chronological order: latest posts first
10/4/2016WE CREATE IDENTITY 5
ASSIGNMENT #3
If you do not fix it, you have to do an extra
assignment on top of the regular one
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 is your 'personal touch' of the design in the
template/theme/stylesheet? One or more from:
Own header/main image/icon/logo
Layout/positioning changes
Own/new font(s)
Well defined color-scheme/palette
Individual/special styling of elements
10/4/2016WE CREATE IDENTITY 6
ASSIGNMENT #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/4/2016WE CREATE IDENTITY 7
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/4/2016WE CREATE IDENTITY 8
USABILITYDON'T MAKE ME THINK
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/4/2016WE CREATE IDENTITY 9
USABILITYFACTS OF LIFE
“Design pages for scanning, not reading”
Your visitors…
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/4/2016WE CREATE IDENTITY 10
>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/4/2016WE CREATE IDENTITY 11
Site ID SearchSections/main
navigation
“You are here”
indicators
Local navigation
↓
Page name (title)
10/4/2016WE CREATE IDENTITY 12
Important
Set viewport:
Consider Bootstrap or other responsive framework
W3Schools:
Introduction to Responsive Web Design
Bootstrap tutorial
W3.CSS
4-10-2016WE CREATE IDENTITY 13
MOBILE-FRIENDLY PAGE TEMPLATE(NO ZOOMING ISSUES)
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My Homepage</title>
Using WordPress? A lot of
themes are already responsive!
Scans, photos: JPEG
Max. width 1000px
Compression: Medium or
High
Result < 200K
10/4/2016WE CREATE IDENTITY 14
PREPARE IMAGES FOR USE ON A WEBSITEPHOTOSHOP: FILE > SAVE FOR WEB
Icons, images with
transparancy:
PNG
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
Webdeveloper tools (all browsers, access via
menu, or F12)
10/4/2016WE CREATE IDENTITY 15
TEST YOUR WEBSITE
> Tools > Developer tools (CTRL+Shift+I)
10/4/2016WE CREATE IDENTITY 16
INTEGRATE: SOCIAL MEDIATWITTER
dev.twitter.com
Sign in, goto Settings > Widgets > Create New
Choose type: eg. List and enter details:
Show recent posts from @fjodorvs
Want Twitter
feeds in
Wordpress?:
Enter your handle, eg. @fjodorvs
Copy code into your page
Like button:
developers.facebook.com/docs/plugins/like-button
10/4/2016WE CREATE IDENTITY 17
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/4/2016 18
INTEGRATE: PHOTO VIEWER
1. Include jQuery and fancyBox scripts in header
10/4/2016WE CREATE IDENTITY 19
FANCYBOX, A LIGHTBOX VARIANTINTEGRATE AN IMAGE GALLERY INTO YOUR SITE
<!-- Add jQuery library --><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Add fancyBox --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" type="text/css" media="screen" /><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/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 page including a list of linked images <ul><li>…
3. Add script to start fancyBox
10/4/2016WE CREATE IDENTITY 20
FANCYBOXSHOW THE GALLERY IN A WEBPAGE
<ul class="images">
<li class="image"><a class="fancybox" rel="mygallery" href="images/Chrysanthemum.jpg"
title="Chrysanthemum: mooie bloem"><img src="images/Chrysanthemum.jpg" height="75" width="75">
</a></li>
...
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
Name of your gallery
codepen.io/vanslooten/pen/rOjNoa
10/4/2016WE CREATE IDENTITY 21
LIGHTBOX VARIANTS
Overview of widgets, plugins etc
Sliders & Image carousels
10/4/2016WE CREATE IDENTITY 22
IMAGE CAROUSEL
Overview of widgets, plugins etc
In Post or Page, Create a Gallery ( ,
“Create Gallery”)
Add code in text-mode*:
10/4/2016WE CREATE IDENTITY 23
JQUERY APPLIEDTURN STANDARD WORDPRESS GALLERY INTO ISOTOPE GALLERY
detailed description
<!-- load isotope: --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script><!-- activate isotope: --><script>jQuery(function($){
// remove some default classes from the standard-Wordpress gallery:$('.gallery').removeClass("gallery-columns-3");// set style for layout of the items:$('.gallery-item').css({"width":"20%", "margin":0, "padding":0});// activate isotope:$('.gallery').isotope({itemSelector: '.gallery-item', layoutMode: 'masonry'});
});</script>
Isotope
Take care: if you switch from Text to Visual
mode, WordPress will mess up your code
(so stay in Text-mode). Also, do not add
blanc lines.
10/4/2016WE CREATE IDENTITY 24
JQUERY APPLIEDADD A LIGHTBOX
api.jquery.com/html
stripjs.com
<!-- load the strip-lightbox: --><script src="http://home.ctw.utwente.nl/slootenvanf/div/strip/dist/js/strip.pkgd.min.js"></script><link rel="stylesheet" type="text/css" href="http://home.ctw.utwente.nl/slootenvanf/div/strip/dist/css/strip.css"/>
// jQuery code for Strip-Lightbox:$('.gallery-item a').addClass("strip");$('.gallery-item a').attr("data-strip-group","gallery-group");
demo
Style & layout: style.css
HTML:
Anatomy of a WordPress theme
10/4/2016WE CREATE IDENTITY 25
CHILD THEME: CHANGE LAYOUT/HTMLWHERE TO FIND WHAT?
index.php, single.php, page.php...
To change a file, copy it from
parent to child (theme folder)
If you did not do this yet: create a child theme
Get the code (see slide 16)
1. Find footer.php in parent theme, download it to temporal folder (eg. your Desktop)
2. Edit footer.php, insert the code, save
3. Upload footer.php to child theme folder
10/4/2016WE CREATE IDENTITY 26
CHILD THEME: CHANGE LAYOUT/HTMLADD FB LIKE BUTTON TO YOUR SITE
1)
2)
3)
1. Include processing script
2. Add a canvas and link it’s id with data-processing-target
3. Write the script
4-10-2016WE CREATE IDENTITY 27
PROCESSING
codepen.io/vanslooten/pen/pjRorq
<script src="https://home.ctw.utwente.nl/slootenvanf/div/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 Monday Oct.17th 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.
10/4/2016WE CREATE IDENTITY 28
ASSIGNMENTPEER REVIEW
Due date: Wednesday Oct. 19, 2016
#5
You have 3 days to do the review: Monday Oct 17th - Wednesday Oct. 19th.
NEXT WEEK
NO LECTURE (NEXT & LAST LECTURE: OCT 19TH)
FINALIZE SITE,
ADD PROJECT RESULTS TO YOUR SHOWCASE PORTFOLIO
Slides @ vanslooten.com/create
Need more help?
Fjodor's office: Horst Building, N208
email: [email protected]
