WEB TECHNOLOGY TUTORIAL SESSION #5 FOR WE CREATE IDENTITY. Module 1 - We Create Identity

Transcription

1 WEB TECHNOLOGY TUTORIAL SESSION #5 FOR WE CREATE IDENTITY Module 1 - We Create Identity

2 WEB TECHNOLOGY CONTENT OF THIS LECTURE Usability More on jquery Integrate: Social media, image viewer, slideshow Next and last session on Oct. 16/17 th Examples & vanslooten.com/create WE CREATE IDENTITY 10/3/2018 2

3 CONTENTS OF THIS COURSE ACTIVITIES OVERVIEW each session 1 hour tutorial presentation 3 hours work on your site, assignments Date Subjects 1 4/5 Sep. Intro, editorial process, create first webpage 2 11/12 Sep. Basics of HTML and CSS, editorial process, Blog (WordPress) 3 18/19 Sep. HTML & CSS, WordPress themes 4 25/26 Sep. Introduction to JavaScript & jquery, more about WordPress 5 2/3 Oct. Advanced techniques, jquery plugins, social media 6 16/17 Oct. Test & evaluation, peer review WE CREATE IDENTITY 10/3/2018 3

4 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 Changes in layout/positioning Own/new font(s) Well defined (new) color-scheme/palette Individual/special styling of elements Have at least 2 changes, describe them in your Blog! WE CREATE IDENTITY 10/3/2018 4

5 USABILITY: GRAPHICAL DESIGN DESIGN ELEMENTS 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 <img alt="description..." WE CREATE IDENTITY 10/3/2018 5

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/3/2018 6

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/3/2018 7

8 >TRUNK TEST< 30sec 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/3/2018 8

9 Site ID Sections/main navigation You are here indicators Search Page name (title) Local navigation WE CREATE IDENTITY 10/3/2018 9

10 Important WE CREATE IDENTITY 10/3/

11 PREPARE IMAGES FOR USE ON A WEBSITE PHOTOSHOP: FILE > EXPORT > SAVE FOR WEB Scans, photos: JPEG Max. width 1000px Compression: Medium or High Result < 200K Images with transparency? Use PNG Learn more WE CREATE IDENTITY 10/3/

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 Webdeveloper tools (all browsers, access via menu, or F12) > Tools > Developer tools (CTRL+Shift+I) WE CREATE IDENTITY 10/3/

13 INTEGRATE: SOCIAL MEDIA EMBEDDING TWITTER FEED Show recent tweets Sign in, goto Settings > Widgets > Create New Choose type: eg. List and enter details: Enter your handle, Twitter feeds in Wordpress?: Copy code into your page dev.twitter.com WE CREATE IDENTITY 10/3/

14 INTEGRATE: SOCIAL MEDIA FACEBOOK Like button: developers.facebook.com/docs/plugins/like-button 1) Enter URL (address) of your site here 2) Follow instructions to copy code in your page developers.facebook.com WE CREATE IDENTITY 10/3/

15 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/3/

16 FANCYBOX, A LIGHTBOX VARIANT INTEGRATE AN IMAGE GALLERY INTO YOUR SITE 1. Include jquery and fancybox scripts in header <!-- Add jquery library --> <script src=" <!-- Add fancybox --> <link rel="stylesheet" href=" type="text/css" media="screen" /> <script src=" 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/3/

17 FANCYBOX SHOW THE GALLERY IN A WEBPAGE 2. Create a page including a list of linked images <ul><li> <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> Add script to start fancybox <script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); }); </script> Name of your gallery codepen.io/vanslooten/pen/rojnoa WE CREATE IDENTITY 10/3/

18 LIGHTBOX VARIANTS Overview of widgets, plugins etc WE CREATE IDENTITY 10/3/

19 IMAGE CAROUSEL Sliders & Image carousels Overview of widgets, plugins etc W3.CSS Slideshow WE CREATE IDENTITY 10/3/

20 JQUERY APPLIED TURN STANDARD WORDPRESS GALLERY INTO ISOTOPE GALLERY In Post or Page, Create a Gallery (, Create Gallery ) Add code in text-mode*: 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. <!-- load isotope: --> <script src=" <!-- 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> detailed description Isotope WE CREATE IDENTITY 10/3/

21 JQUERY APPLIED ADD A LIGHTBOX stripjs.com api.jquery.com/html <!-- load the strip-lightbox: --> <script src=" <link rel="stylesheet" type="text/css" href=" // jquery code for Strip-Lightbox: $('.gallery-item a').addclass("strip"); $('.gallery-item a').attr("data-strip-group","gallery-group"); demo WE CREATE IDENTITY 10/3/

22 CHILD THEME: CHANGE LAYOUT/HTML WHERE TO FIND WHAT? Style & layout: style.css HTML: Anatomy of a WordPress theme To change a file, copy it from parent to child (theme folder) index.php, single.php, page.php... WE CREATE IDENTITY 10/3/

23 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 14) 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 2) 3) 1) WE CREATE IDENTITY 10/3/

24 PROCESSING 1. Include processing script 2. Add a canvas and link it s id with data-processing-target 3. Write the script 1) 2) <script src=" <script type="application/processing" data-processing-target="pjs"> void setup() { size(200, 200); 3) background(100); stroke(255); ellipse(50, 50, 25, 25); println('hello web!'); } </script> <canvas id="pjs"></canvas> how to include a.pde file codepen.io/vanslooten/pen/pjrorq WE CREATE IDENTITY

25 ASSIGNMENT PEER REVIEW #5 1. Write a Peer-review on the site of one other student Use this webform (link will be available at Friday Oct.12 th 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 have to visit them from the university network or use a VPN connection. You have to do the review between Friday Oct 12th and Wednesday Oct. 17th. Due date: Wednesday Oct. 17th WE CREATE IDENTITY 10/3/

26 NEXT WEEK NO LECTURE (NEXT & LAST LECTURE: OCT 16/17 TH ) FINALIZE SITE, ADD PROJECT RESULTS TO SHOWCASE PORTFOLIO Need help? Fjodor's office: Horst Building, W241 f.vanslooten@utwente.nl Examples & vanslooten.com/create