1. CSDM 2N15 CHRIS K KIM WEEK 1 CONTINUING STUDIES OCAD UNIVERSITY Advanced Web Art and Design, CSS and JavaScript Frameworks

2. INTRODUCTION CSDM2N15 – Advanced Web Art and Design, CSS and JavaScript Frameworks Six-week course Upon the completion of this course, you will: Have developed a solid understanding of front-end web development Apply basic principles of design and current web design standards in future projects Possess a broader perspective on the issues of diversity, accessibility, and inclusiveness on Web Students are expected to have a basic understanding of HTML and CSS and be able to develop simple webpages using Dreamweaver and Photoshop Necessary materials and supplies Mac OS X or Windows computer Text editor (ex. Dreamweaver, TextMate, NotepadPlus) FTP client (ex. Filezilla, Cyberduck) Image editor (ex. Photoshop)

3. WEEK BY WEEK WEEK 1 (January 12)Review / Introduction to basic CSS and JS Review of basic HTML syntax and introduction to front-end website development WEEK 2 (January 19)Intermediate CSS and JS / jQuery New CSS3 rules and techniques and intermediate jQuery commands WEEK 3 (January 26)Intermediate CSS and JS / jQuery - part 2 Introduction to programming with JavaScript WEEK 4 (February 2)Advanced CSS, JS, API tricks Showcase and tutorials for advanced CSS and JavaScript tricks, including using public APIs WEEK 5 (February 9)Principles of Design / Web Design Standards Discussion of basic elements and principles of design and their application on Web WEEK 6 (February 16)Conceptualization to Development / Wrap-up Walkthrough of web design and development process and course wrap-up

4. IN-CLASS EXERCISES / ASSIGNMENTS WEEK 1 (January 12)Basic web page development via text editor and FTP WEEK 2 (January 19)Multi-page website with hyperlinks, images, CSS, and basic jQuery events WEEK 3 (January 26)Single page sandbox with intermediate JavaScript and jQuery commands WEEK 4 (February 2)Functional single-page website with advanced CSS and jQuery commands FINAL PROJECT (Feb. 16) Personal culminating project for feedback and suggestions from instructor

5. HTML REVIEW HTML page is simply a text file special declarations and tags My First Heading My first paragraph.

6. BASIC TAGS Commonly used HTML tags include: Block - Text: Heading and paragraph -,,, Hyperlink - Image - Lorem ipsum My first paragraph. My second paragraph.

7. ATTRIBUTES / FORMATTING TAGS Each HTML tag can contain various attributes / modifiers: ID - Class - Style - Hyperlink reference - Formatting tags apply different styles to text elements Bold - Emphasis - Subscript - Superscript -

8. TAG For embedding different stylesheets, inline CSS, metadata, and Javascript body {background-color:yellow} p {color:blue} …

9. TABLES For tabular data and list items row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Coffee Milk

10. FORMS Form tags are used to pass user input data to a server (optional, may be covered in the course) Male Female

11. CASCADING STYLE SHEETS Stylesheets define how each HTML element looks Can be applied via inline style, internal document, or external files A CSS rule includes a selector and one or more declarations: p {color:red;text-align:center;} Color all texts in tags red, and center align Three ways to select one or more elements for styling: Tag: p, img, body ID for a single element: #hello Class for a series of elements that share the same style:.title

12. COMMON DECLARATIONS Background background-attachment background-color background-image background-position background-repeat Text color letter-spacing line-height text-align text-decoration text-transform

13. COMMON DECLARATIONS Font font-size font-family font-style font-weight Blocks, etc. padding border margin width Height Web development tools offer autocomplete function for CSS declarations

14. INTRODUCTION TO JAVASCRIPT/JQUERY JavaScript is a common programming language for the web All current web browsers have the ability to interpret this language (with minor differences) Inserted on top of existing HTML codes to manipulate browsers and document objects Like CSS, can be inserted via inline scripts, internal document, or external files Powerful language, but discrepancies between web browsers – lack of cross-browser support Syntax is also complicated To facilitate JavaScript development process, many short-hand libraries were released jQuery: “write less, do more” Series of shorthand commands that make development for web easier One jQuery command works for all web browsers

15. COMPARISON: JS / JQUERY Select an element with ID “main” document.getElementById("main"); $(“#main”); Add a CSS class “wrap” to an element with ID “box” var container = document.querySelector('#box'); container.classList.add('wrap'); $('#box').addClass('wrap'); Add a CSS class “wrap” to an element with ID “box”

16. JQUERY SYNTAX Each jQuery command consists of three main components: Dollar sign ($) signifying jQuery-exclusive command Selector –#id,.class, tags enclosed in quotation marks Effect or event handler $(“#hello”).show(); $(“p”).css(“color”, “red”); $(“.class”).click(function(){ alert(“clicked!”); });

17. JQUERY SELECTORS Identical to CSS selectors: ID - $(“#item”) Tag - $(“p”) Class - $(“.class”) Advanced selectors #item h1 div:first-child input[type=’text’]

18. JQUERY EFFECTS Various jQuery effects that change style and content of each HTML element Show and hide - $(“#item”).show(); Slide down and up - $(“#item”).slideUp(); Fade in and out - $(“#item”).fadeOut(); HTML content - $(“#item”).html(“hello world”); CSS rules - $(“#item”).css(“margin-top”, “30px”); Multiple effects can be chained together $(“#item”).slideUp().fadeOut().css(“color”, “red”); Callback functions that get called upon the completion of each effect

19. JQUERY EVENTS Allow effects to be called when a certain event happens to the object Events include click, double click, hover, etc. $(“.class”).click(function(){ alert(“clicked!”); $(“.class’).hide(); }); $(“.class”).hover( function(){ $(“.class2”).fadeIn(); }, function(){ $(“.class2”).fadeOut(); } );

20. TIPS ON DEBUGGING Use Inspect Element on Chrome Delete, edit, or add HTML elements without saving and uploading Try out different CSS styles on-the-fly Execute various JavaScript functions

21. IN-CLASS EXERCISE Create a single-layout page using HTML, CSS, Javascript Header, body, and footer div elements Lorem ipsum texts – headers and paragraphs Random images as necessary Javascript / jQuery commands: show, hide, and simple clicks Use text editor and FTP to upload on-the-fly

22. CSDM 2N15 CHRIS K KIM WEEK 1 CONTINUING STUDIES OCAD UNIVERSITY Advanced Web Art and Design, CSS and JavaScript Frameworks