1 / 22

CSDM 2N15 CHRIS K KIM WEEK 1 CONTINUING STUDIES OCAD UNIVERSITY

Advanced Web Art and Design, CSS and JavaScript Frameworks. CSDM 2N15 CHRIS K KIM WEEK 1 CONTINUING STUDIES OCAD UNIVERSITY. CSDM2N15 – Advanced Web Art and Design, CSS and JavaScript Frameworks Six-week course Upon the completion of this course, you will:

daryl
Download Presentation

CSDM 2N15 CHRIS K KIM WEEK 1 CONTINUING STUDIES OCAD UNIVERSITY

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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) INTRODUCTION

  3. 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 WEEK BY WEEK

  4. 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 IN-CLASS EXERCISES / ASSIGNMENTS

  5. HTML page is simply a text file special declarations and tags • <!DOCTYPE html><html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html> HTML review

  6. Commonly used HTML tags include: • Block - <div> • Text: Heading and paragraph - <h1>, <h2>, <h3>, <p> • Hyperlink - <a> • Image - <img> • <!DOCTYPE html><html> <body> • <div> • <img src=“image.jpg” /> • <h1>Lorem ipsum</h1> • <p>My first paragraph.</p> • <p>My <a href=“http://google.com”>second paragraph.</p> • </div> • </body></html> BASIC TAGS

  7. Each HTML tag can contain various attributes / modifiers: • ID - <h1 id=“main”> • Class - <p class=“article”> • Style - <img style=“margin-top:50px”> • Hyperlink reference - <a href=“#”> • Formatting tags apply different styles to text elements • Bold - <strong> • Emphasis - <em> • Subscript - <sub> • Superscript - <sup> ATTRIBUTES / FORMATTING TAGS

  8. For embedding different stylesheets, inline CSS, metadata, and Javascript • <!DOCTYPE html><html> • <head> • <style type="text/css"> • body {background-color:yellow} • p {color:blue} • </style> • <link rel="stylesheet" type="text/css" href="mystyle.css"> • <meta name="description" content="Free Web tutorials on HTML and CSS"> • <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> • </script> • </head> • … <HEAD> TAG

  9. For tabular data and list items • <table border="1"> • <tr> • <td>row 1, cell 1</td> • <td>row 1, cell 2</td> • </tr> • <tr> • <td>row 2, cell 1</td> • <td>row 2, cell 2</td> • </tr> • </table> • <ul> • <li>Coffee</li> • <li>Milk</li> • </ul> TABLES

  10. Form tags are used to pass user input data to a server (optional, may be covered in the course) • <form> • <input type="radio" name="sex" value="male">Male<br> • <input type="radio" name="sex" value="female">Female<input type="submit" value="Submit“> • </form> FORMS

  11. 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 <p> 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 CASCADING STYLE SHEETS

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

  13. 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 COMMON DECLARATIONS

  14. 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 Introduction TO JAVASCRIPT/jQUERY

  15. 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” Comparison: JS / JQUERY

  16. 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!”); • }); JQUERY SYNTAX

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

  18. 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 JQUERY EFFECTS

  19. 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(); • } • ); JQUERY EVENTS

  20. 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 TIPS on DEBUGGING

  21. 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 IN-CLASS EXERCISE

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

More Related