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: next and last session on Oct. 15/16 th I can not see your comments, messages etc. on Canvas. So please use e-mail (f.vanslooten@utwente.nl) to communicate! WE CREATE IDENTITY 10/1/2019 2
CONTENTS OF THIS COURSE each session 1 hour tutorial presentation 3 hours work on your site with help/do assignments ACTIVITIES OVERVIEW Two sessions a week: Tuesday and Wednesday mornings 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 WE CREATE IDENTITY 10/1/2019 3
DESCRIPTION OF PORTFOLIO ITEMS Assignment #4 ▪ 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 Have at least 2 changes, describe ▪ Changes in layout/positioning them (include code examples) in your ▪ Own/new font(s) Blog! ▪ Well defined (new) color-scheme/palette ▪ Individual/special styling of elements WE CREATE IDENTITY 10/1/2019 4
UPLOAD & TESTING 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) WE CREATE IDENTITY 10/1/2019 5
USABILITY: GRAPHICAL DESIGN DESIGN ELEMENTS ▪ Navigation Aids (links, icons) ▪ Structure (menu, sitemap) ▪ Simple, Consistent ▪ Entire site same look & feel ▪ Accessibility <img alt="Description..." ▪ Text, Graphics, Audio & Video ▪ Feedback Mechanisms ▪ Value your visitors: enable them to leave comments WE CREATE IDENTITY 10/1/2019 6
USABILITY DON'T MAKE ME THINK ▪ 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 WE CREATE IDENTITY 10/1/2019 7
USABILITY FACTS OF LIFE 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 “Design pages for scanning, not reading” WE CREATE IDENTITY 10/1/2019 8
30sec >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: ▪ 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? WE CREATE IDENTITY 10/1/2019 9
“You are here” Site ID Sections/main Search navigation indicators Page name (title) Local navigation ↓ WE CREATE IDENTITY 10/1/2019 10
Important WE CREATE IDENTITY 10/1/2019 11
PREPARE IMAGES FOR USE ON A WEBSITE PHOTOSHOP: FILE > EXPORT > SAVE FOR WEB ▪ Scans, photos: JPEG ▪ Max. width 1000px ▪ Compression: Medium or High Images with transparency? Use PNG Result < 200K Learn more WE CREATE IDENTITY 10/1/2019 12
TEST YOUR WEBSITE ▪ 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) search.google.com/search-console/mobile-friendly GTmetrix, Screenfly mobile view WE CREATE IDENTITY 10/1/2019 13
INTEGRATE: SOCIAL MEDIA EMBEDDING TWITTER FEED Show recent tweets from @fjodorvs ▪ Sign in, goto Settings > Widgets > Create New ▪ Choose type: eg. List and enter details: Enter your handle, eg. @fjodorvs Copy code into your page Twitter feeds in Wordpress?: dev.twitter.com WE CREATE IDENTITY 10/1/2019 14
INTEGRATE: SOCIAL MEDIA FACEBOOK ▪ Like button: developers.facebook.com/docs/plugins/like-button 1) Enter URL (address) of your site here developers.facebook.com 2) Follow instructions to copy WE CREATE IDENTITY 10/1/2019 15 code in your page
INTEGRATE: PHOTO VIEWER ▪ Image viewer, also called LightBox ▪ Connect to online services: Instagram, Picasa, Flicker ▪ Show video (Youtube) ▪ Example: fancyBox codepen.io/vanslooten/pen/rOjNoa WE CREATE IDENTITY 10/1/2019 16
FANCYBOX, A LIGHTBOX VARIANT INTEGRATE AN IMAGE GALLERY INTO YOUR SITE 1. Include jQuery and fancyBox scripts: <!-- 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> In this example, we use the CDN-versions of the scripts from cdnjs.com/libraries/fancybox codepen.io/vanslooten/pen/rOjNoa WE CREATE IDENTITY 10/1/2019 17
FANCYBOX SHOW THE GALLERY IN A WEBPAGE 2. Create a div containing a set of linked images: <div class="gallery"> <a href="images/Chrysanthemum.jpg"><img src="images/Chrysanthemum.jpg" alt="Chrysanthemum: nice flower"></a> ... </div> 3. Add script to start fancyBox : <script> $(document).ready(function() { $(".gallery a").fancybox(); }); codepen.io/vanslooten/pen/rOjNoa </script> WE CREATE IDENTITY 10/1/2019 18
LIGHTBOX VARIANTS Overview of widgets, plugins etc WE CREATE IDENTITY 10/1/2019 19
IMAGE CAROUSEL ▪ Sliders & Image carousels Overview of widgets, plugins etc W3.CSS Slideshow WE CREATE IDENTITY 10/1/2019 20
JQUERY APPLIED TURN STANDARD WORDPRESS GALLERY INTO ISOTOPE GALLERY <!-- load isotope: --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script> ▪ In Post or Page , <!-- activate isotope: --> <script> Create a Gallery jQuery(function($){ // remove some default classes from the blocks gallery (your classes might be different): ▪ Add HTML block: $('.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> Isotope detailed description WE CREATE IDENTITY 10/1/2019 21
CHILD THEME: CHANGE LAYOUT/HTML WHERE TO FIND WHAT? To change a file, copy it from ▪ Style & layout: style.css (change via Appearance, Customize, parent to child theme (theme Custom CSS) folder). How to make a child theme was ▪ Change HTML/content/PHP: introduced in session #3. ▪ Anatomy of a WordPress theme index.php, single.php, page.php category.php ... Eg. to remove "Category:" or "Category Archives:" at the top of a category page WE CREATE IDENTITY 10/1/2019 22
CHILD THEME: CHANGE LAYOUT/HTML ADD FB LIKE BUTTON TO YOUR SITE ▪ 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 3) 2) 1) WE CREATE IDENTITY 10/1/2019 23
Recommend
More recommend
