csdm 2n15 chris k kim week 1 continuing studies ocad university advanced web art and design, css and...
TRANSCRIPT
CSDM 2N15CHRIS K KIMWEEK 1
CONTINUING STUDIESOCAD UNIVERSITY
Advanced Web Art and Design, CSS and JavaScript Frameworks
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)
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
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
HTML REVIEW
• 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>
BASIC TAGS
• 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>
ATTRIBUTES / FORMATTING TAGS
• 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>
<HEAD> TAG
• 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>
…
TABLES
• 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>
FORMS
• 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>
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 <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
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
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
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
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”
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!”);
});
JQUERY SELECTORS
• Identical to CSS selectors:
• ID - $(“#item”)
• Tag - $(“p”)
• Class - $(“.class”)
• Advanced selectors
• #item h1
• div:first-child
• input[type=’text’]
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
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();
}
);
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
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
CSDM 2N15CHRIS K KIMWEEK 1
CONTINUING STUDIESOCAD UNIVERSITY
Advanced Web Art and Design, CSS and JavaScript Frameworks