GRA422 W14 Lecture 5

Asset optimization and JavaScript Introduction

Transcript

1. GRA422 Electronic Document Design II — Lecture #5 Asset & Site Optimization Winter 2014 Instructor: Ahmed Sagarwala
2. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Announcements Labs & Group Project Common Mistakes (Part A) Accessibility, Usability, Compatibility Check your STW access
3. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Optimization An Introduction “An act, process, or methodology of making something (as a design, system, or decision) as fully perfect, functional, or effective as possible; specifically: the mathematical procedures (as finding the maximum of a function) involved in this” ­ — Merriam-Webster Dictionary
4. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Optimization For Web Design Reducing data transferred and ordering of page elements to improve page load times Improves user-experience (aka. usability)
5. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Optimization Techniques Reduce media size Loading order Asynchronous loading Streaming data
6. http://hayageek.com/examples/ jquery/ajax-form-submit/index.php
7. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Optimization Techniques D.R.Y. coding Minifying Code (jQuery) Lazy Loading (appelsiini) Image Sprites
8. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Sprites Examples http://coding.smashingmagazine.com/2009/04/27/the-mystery- of-css-sprites-techniques-tools-and-tutorials/
9. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Optimization Server-Side Techniques GZip compression CDN Header expiry/caching DNS Lookups Redirects
10. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Optimization Measuring with YSlow
11. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Optimization Image Formats JPEG GIF PNG SVG
12. Optimization
13. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Optimization Video Containers Containers are wrappers for audio and video into one file This is like zipping 2 files together The codecs contained within are specified in the container’s header
14. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Optimization Codec Codec = Coder-decoder Defines how a file is read or written We can mix audio and video codecs in one container For example, a .M4A file can contain MPEG4 video codec and AAC audio codec
15. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Optimization Popular Video Containers MPEG 4 (mp4, m4v) Ogg Theora (ogg) Flash Video (flv) WebM (webm) ASF (asf) AVI (avi)
16. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Optimization Popular Video Codecs H.264 Theora VP8 Details: http://diveintohtml5.info/video.html
17. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Optimization Popular Audio Codecs MPEG-1 Audio Layer 3 (MP3) Advanced Audio Coding (AAC) Vorbis
18. JavaScript Interaction Content Design
19. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization JavaScript In a nutshell Dynamic programming language Commonly used in browsers Client-side, user interaction, browser control Asynchronous communication
20. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization JavaScript In a nutshell Dynamic programming language Commonly used in browsers Client-side, user interaction, browser control Asynchronous communication
21. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization JavaScript Example <script type='text/javascript'> // This JavaScript code create an alert box function help() { var the_text = 'This is an alert for help!'; alert(the_text); } </script> <a href='#' onClick='help()'>Click for help</a>
22. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization JavaScript Example
23. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization JavaScript Syntax var the_text = 'This is an alert for help!'; variable operator string terminator declaration
24. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization JavaScript Library Predefined functions you can reference Allow selecting/targeting of elements, classes, IDs, attributes, values AJAX & JSON support
25. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Syntax $('.closer').slideUp('slowly'); selector function option(s) terminator namespace
26. GRA422 Electronic Document Design II — Lecture #5 Asset Optimization Integration <script src="js/jquery.min.js"></script> Link to library using script element and src attribute http://learn.jquery.com | http://codecademy.com
27. http://www.youtube.com/watch?v=hqKafI7Amd8