WEB TECHNOLOGY TUTORIAL SESSION #5 FOR WE CREATE IDENTITY Module 1 - - PowerPoint PPT Presentation
WEB TECHNOLOGY TUTORIAL SESSION #5 FOR WE CREATE IDENTITY Module 1 - We Create Identity WEB TECHNOLOGY CONTENT OF THIS LECTURE Usability More on jQuery Integrate: Social media, image viewer, slideshow No lecture next week:
TUTORIAL 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
WEB TECHNOLOGY
CONTENT OF THIS LECTURE
10/1/2019 WE 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/2019 WE CREATE IDENTITY 3
CONTENTS OF THIS COURSE
ACTIVITIES 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/2019 WE 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'
▪ 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/2019 WE CREATE IDENTITY 5
UPLOAD & TESTING
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/1/2019 WE CREATE IDENTITY 6
USABILITY: GRAPHICAL DESIGN
DESIGN 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/2019 WE CREATE IDENTITY 7
USABILITY
DON'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…
10/1/2019 WE CREATE IDENTITY 8
USABILITY
FACTS 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/2019 WE 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:
10/1/2019 WE CREATE IDENTITY 10
Site ID Search Sections/main navigation “You are here” indicators Local navigation ↓ Page name (title)
10/1/2019 WE CREATE IDENTITY 11
Important
▪ Scans, photos: JPEG ▪ Max. width 1000px ▪ Compression: Medium or High
10/1/2019 WE CREATE IDENTITY 12
PREPARE IMAGES FOR USE ON A WEBSITE
PHOTOSHOP: 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/2019 WE CREATE IDENTITY 13
TEST YOUR WEBSITE
mobile view
search.google.com/search-console/mobile-friendly GTmetrix, Screenfly
10/1/2019 WE CREATE IDENTITY 14
INTEGRATE: SOCIAL MEDIA
EMBEDDING 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/2019 WE CREATE IDENTITY 15
INTEGRATE: SOCIAL MEDIA
FACEBOOK 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
10/1/2019 WE CREATE IDENTITY 17
FANCYBOX, A LIGHTBOX VARIANT
INTEGRATE 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
10/1/2019 WE CREATE IDENTITY 18
FANCYBOX
SHOW 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/2019 WE CREATE IDENTITY 19
LIGHTBOX VARIANTS
Overview of widgets, plugins etc
▪ Sliders & Image carousels
10/1/2019 WE 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/2019 WE CREATE IDENTITY 21
JQUERY APPLIED
TURN STANDARD WORDPRESS GALLERY INTO ISOTOPE GALLERY detailed description
<!-- 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/2019 WE CREATE IDENTITY 22
CHILD THEME: CHANGE LAYOUT/HTML
WHERE TO FIND WHAT? index.php, single.php, page.php category.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.
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)
10/1/2019 WE CREATE IDENTITY 23
CHILD THEME: CHANGE LAYOUT/HTML
ADD FB LIKE BUTTON TO YOUR SITE 1) 2) 3)
1-10-2019 WE 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
▪ Use this webform (link will be available at Friday Oct.11th 9:00h)
▪ 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/2019 WE CREATE IDENTITY 25
ASSIGNMENT
PEER REVIEW Due date: Wednesday Oct. 16th
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