GRA422 W14 Lecture 6

Bringing it all together: HTML, CSS and JavaScript

Transcript

1. GRA422 Electronic Document Design II — Lecture #6 HTML + CSS + JS Winter 2014 Instructor: Ahmed Sagarwala
2. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Announcements Midterm Exam Friday: March 7 Wednesday: March 12 Lectures 1 to 6 Labs 1 to 6 Analysis of code, all M.C.
3. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Recap Quiz #1 Which is not a valid colour in CSS3? #CCCC #FFF #000000 #F012AB
4. http://gra422.com/funbox/colours.php
5. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Recap Quiz #1 Which character separates a CSS property from its value? .class { background-color: rgb(255,255,255); }
6. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Recap Quiz #1 This is used to show visual enhancements in specific browsers? .class { -moz-column-count: 3; } media queries, vender prefix, css reset, progressive loading
7. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Recap Quiz #1 How many colours are possible using names (ie. Red) in CSS3? 16.8 million 256 4,096 140
8. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization What are the maximum number of colours a WMBP can support?
9. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Recap Quiz #1 Where would you place JavaScript that loads page content? Footer Header
10. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Recap Quiz #1 Which is a valid character to use in a filename? & (ampersand) “ (double-quote) * (asterisk) - (hyphen)
11. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Recap Quiz #1 Which is not a benefit of Dreamweaver CS6? autocomplete FTP code validation vendor prefixes
12. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Recap Quiz #1 What are benefits to using Google Webfonts? compatibility free premium code is provided
13. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Recap Quiz #1 Make an ID or class for ‘student’ selector # .
14. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Recap Quiz #1 Which tags are considered deprecated? <em> <abbr> <u> <b> <i> Googling this caused a problem for many...
15. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Recap Quiz #1 Best fallback font? Times, Helvetica, Arial, sans-serif Recall the ‘font stack’ and why we use it
16. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Recap Quiz #1 What is the easiest way to determine the version of HTML used on a webpage? Source code would reveal...
17. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Recap Quiz #1 What is used to have all browser styles similar when starting a design? Media Switch Vendor Prefix Pseudo Style CSS Reset
18. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Recap Quiz #1 Placing CSS in the footer of your file will cause what effect? Parallax Scrolling Slow Loading Times Nothing Progressive Loading
19. http://alistapart.com/article/progressiveenhancementwithcss
20. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Which side of the object has a 5px margin in the code margin:1px 3px 5px 3px?
21. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Which attribute provides more information when an element is hovered over? info hover alt title
22. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Using All Three HTML + CSS + JS Interaction Content Design Recall what each language is used for:
23. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Using All Three HTML + CSS + JS Recall how each is coded: Syntax Capabilities Relationships
24. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization <style type="text/css"> body { font-family: sans-serif; } li { float:left; list-style:none; background:aqua; color:black; } li a:hover { color:yellow; background: #4201ff; } .active { background: #55c; } </style> <ul id="sidemenu"> <li><a href="#">Home</a></li> <li class="active"><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <script src="http://code. jquery.com/jquery-1.11.0.min. js"></script> <script> $("a").click(function() { $(this).toggleClass("active"); }); </script> HTML CSS JS
25. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization http://gra422.com/funbox/lecture6.html
26. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Analysis JavaScript Code Linking to external JavaScript code <script src="... "></script> This code targets links and toggles the active class <script> $("a").click(function() { $(this).toggleClass("active"); }); </script>
27. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization $("a").click(function() { $(this).toggleClass("active"); }); Trigger Target Action
28. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Events jQuery Think of a chain reaction Pulling the trigger causes an action/event to occur Clicking on a link => function ( toggle a class )
29. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization $("nav").hover(function() { $(".reveal").slideDown("fast"); }); What does the code above do? What action triggers the event? What is the result of the trigger? What gets effected?
30. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization <ul id="sidemenu"> <li><a href="#">Home</a></li> <li class="active"><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> Clicking on element with active class, hide all links .active click() => a hide() Hovering on list item, add active class to the body li hover() => body addClass('active')
31. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization $("li").hover(function() { $("body").addClass("active"); }); $(".active").click(function() { $("a").hide(); });
32. May the code be with you!