WEB TECHNOLOGY TUTORIAL SESSION #5 FOR “WE CREATE IDENTITY” Module 1 - We Create Identity
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
([email protected]) 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)
Student assistants:Benedetta Cervone & Stijn Wolters
Related Documents
