.  270 f16  . 
    ☆ Coming Attractions! ☆
⇒ VALIDATION due F, 5/05 10pm d2l
⇒ PORTFOLIO due F, 5/05: 10pm d2l
⇒ FINAL EXAM: W, 05/10 8am 8am 8am
0. CODEPEN       1.SIMPLE       2.SIMPLEPLUS       3.FIBFIZZ       4.CANVAS       5.SKI       6.VALIDATION       7.PORTFOLIO 2
readable code       web code       html/css reference       javascript reference       firebug & the console
my codepen       * your codepen    * your cisprod.
w3 schools       tryIt editor       google web fundamentals       codeacademy.com      mozilla
42 class calendar
week 1 2 3 4 5 6 7 8 9 10 11 12 13 14
23 25 27 | 30 01 03 | 06 08 10 | 13 15 17 | 20 22 24 | 27 01 03 | 06 08 10 | * | 20 22 24 | 27 29 31 | 03 05 07 | 10 12 14 | 17 19 21 | 24 26 28 | 01 03 05
class 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
syllabus (pdf) / addendum (pdf) / student rights (pdf)   -   2gb: see me
Part I
01. Course Intro: Expectations & Topics
about 270 (syllabus, grades, code)
syllabus(pdf)/addendum(pdf), faq: grades, honesty, readable code, submit assignments, CAP, visual studio, labs on campus, macs
- Analyzing and solving problems -- Significant effort! - Need to READ the BOOK(s)! - Individual conversations distract & annoy! - If you miss class, it's YOUR responsibility to get notes. - I will take attendance - seating chart next class. YOU'LL be doing CODE like this: Hello Page: html, css, js Day One Quiz (C#) JS Tutors
02. How the Web works: Browsers, HTML, CSS & Javascript (Duckett-HC Intro)
03. HTML Structure & Text & SEO (Duckett-HC Ch. 1 & 2)
STRUCTURE (ch 1): local code - online code :: ppt - pdf TEXT (ch 2): local code - online code :: ppt - pdf SEO: SEO youtube video jcp black hats (nyt) google SEO guide
TAGS: note: * indicates empty element with no content html head meta*, script, link*, title, body div, p h1, h2, h3, h4, h5, h6 b, i br*, hr* sup, sub W3 Schoole HTML Tag Reference html describes structure html element: opening and closing tag (some are self-closing) elements are commands to the BROWSER attributes tell more about elements href="http://jbwyatt.com" src="boy.jpg" class="bigBoy" id="top" W3 Schools HTML 5 Tutor (with Tryit) Template for html pages HTML Examples create pages & publish notepad++ ftp
04. HTML Lists, Links & Images (Duckett-HC Ch. 3, 4 & 5)
LISTS (ch 3): local code - online code :: ppt - pdf LINKS (ch 4): local code - online code :: ppt - pdf IMAGES (ch 5): local code - online code :: ppt - pdf
TAGS: ol, ul, li dl, dt, dd TAGS: a (most important element ) ATTRIBUTES: href="" - http://, mailto:, x.html, ../x.html, XYZ, x.html target="_blank" use relative addressing to navigate directory structure href="../../xyz.html" use id and href # links to different part of the same page id="abc" + href="#abc" TAGS: img, figure, figcaption ATTRIBUTES: src, alt height & width attributes allows faster page load but you MUST preserve aspect ratio do NOT use align attribute, use CSS jpg for pictures gif and png for logos (few colors) W3 Schoole HTML Tag Reference W3 Schools HTML 5 Tutor (with Tryit) SEMANTIC TAGS: name describes its meaning header nav section article section aside article footer
05. CSS Intro (Duckett-HC Ch. 10) Imagine an invisible box around every HTML element.
Imagine an invisible box around every HTML element. CSS Intro: local code - online code :: ppt - pdf
W3 Schools CSS Tutor (with Tryit) Future Value - Monthly/Yearly - jbw CSS stylesheet example 1 - example 2 microclasses or OOCSS SASS - syntactically awesome style sheets
Rule = selector + declaration Declaration = property: value; Location: In-Line Internal External Cascade: later rule takes precedence, more specific Some properties inherited, some not (use inherit value to force -- padding:inherit;) Priority of Rules -If more than one rule applies to an element, use the rule with the highest specificity. -If specificity is equal, use the last rule. -- id most important -- class, attribute selector, pseudo-class less specific -- element selector is least
06. CSS Color and Text Styling (Duckett-HC Ch. 11, 12)
CSS Color: local code - online code :: ppt - pdf web colors | names | hex values color calculator what the hex? - a guessing game... W3 Schools CSS Tutor (with Tryit) Example Code from Text 2^n, byte, hex 6 digit / 3digit hex decimal and rgb and rgba color names
CSS Text: local code - online code :: ppt - pdf Example Code from Text W3 Schools CSS Tutor (with Tryit) fonts: installed serif : print non-serif - computer : Verdana, Arial, Helvetica font-family, font-size, font-weight, font-style,ttext-decoration text-align link styling pseudo classes a:link, visited, hover
07. CSS Boxes(mbpc) & Layout (Duckett-HC Ch. 13, 15)
My CSS: responsive css and the other page My Grid: responsive & fixed using CSS float and box-sizing CSS Boxes: local code - online code :: ppt - pdf W3 Schools CSS Tutor (with Tryit) Example Code from Text MBPC centering -- text -- container (margin:auto and width) height width overflow: auto box-sizing: border-box;
CSS Layout: local code - online code :: ppt - pdf CSS Layout: float, center, divs in divs and counting pixels Parents of Floated Elements: Solution and Centered Creating Multi-Column Layouts With Floats: Two Columns Creating Multi-Column Layouts With Floats: Three Columns W3 Schools CSS: float Example Code from Text JS/CSS: navigation control the layout float elements and clear floats use float to create a grid or columns
08. JavaScript Programming (Duckett-JJ Intro & Ch. 1a, 1b, 1c)
My CSS: responsive css and the other page JAVASCRIPT INTRO (intro): ppt - pdf HTML element provides structure open tag + content + close tag (<div>Hello</div>) attributes tell more about the tag (<div class="abc">Hello</div>) CSS rules = selector + declaration block .abc { color:red; font-size:large; } declaration = property:value; JavaScript - separates web programmers from document creators - BEHAVIOR of web page - reacts to events
ABC'S of PROGRAMMING (ch 1): local code - online code SCRIPTS (1a): ppt - pdf OBJECTS & DOM (1b): ppt - pdf ABC'S of PROGRAMMING: JS + HTML (1c): ppt - pdf
a. JavaScript is a "script" series of instructions start with goal, develop tasks, C O D E! b. Objects model the world properties events methods (functions attached to an object) browser creates model of web page 1. Window Object - window where browser displays page each tab has a window object location property of window = URL of the page 2. Document Object - the html page ( DOM ! ) DOM has properties, events and methods JS can access and change content JS can govern how user interacts Get and display a page (see p. 41) 1. browser gets html page & associated files 2. create a model (DOM) in memory nodes: elements, text, attributes 3. render page uses DOM and associated CSS (default or your css) c. JavaScript + HTML runs within browser each browser has a "JavaScript Engine" provides page with behavior & makes pages interactive
Hello Page   html, css, js & notes Sales Tax Calculator (html) (css) (js) W3 Schools Javascript Tutor (with Tryit)
09. Basic JavaScript Instructions & FireBug (Duckett-JJ Ch. 2)
BASIC JS INSTRUCTIONS (ch 2): local code - online code :: ppt - pdf Firebug and the Console
Statements and Comments Variables var varName; Types numeric, string, boolean (true false) arrays, objects, undefined, null Arithnmetic Operators String Operators Output via the DOM - (example code from text) // Get the element with an id of cost. var el = document.getElementById('cost'); el.textContent = '$' + total; Arrays: code example (rendered code) index, list .length property var myArray = []; // empty array myArray[0]=75; var otherArray = new Array(100); //100 elements(0-99 index) Objects: properties, methods, events typeof gives type of object
Firebug and the Error Console
☆   Test1 - Mid Term Exam: M() & W()
TEST 1 Review multiple choice day 1 code read/write day 2 Create a CAP

HTML tags you should KNOW

<!--> <!DOCTYPE> <a> <b> <body> <br /> <div> <em> <head> <h1>-<h6> <meta /> <hr /> <html> <i> <img /> <li> <link /> <ol> <p> <pre> <script> <span> <strong> <style> <sub> <sup> <title> <ul>

Quoted Attributes

class, id, src, charset href, type, title, style, alt, rel

Validation Rules

lower case tags proper nesting quote attributes always use end tag if available self close empty tags: <br /> (hr br img meta link)
Part II
0A. Decisions & Loops (Duckett-JJ Ch. 4)
DECISIONS & LOOPS (ch 4): local code - online code :: ppt - pdf
prompt, output, loop, if  
0B. Functions, Methods & Objects (Duckett-JJ Ch. 3)
FUNCTIONS, METHODS & OBJECTS (ch 3): local code - online code :: ppt - pdf
JS Grammar (var, document.write(), arithmetic) html js css Types and conversions -- ( html with internal css and js) JS: order of code execution & document.write()
Functions & Methods logical grouping reuse executed when called named functions anonymous functions can construct so called when declared Objects Built-In Objects
0C. Document Object Model (Duckett-JJ Ch. 5)
DOCUMENT OBJECT MODEL (DOM) (ch.5): local code - online code :: ppt - pdf
JS: getElementById(), innerHTML, function, array DOM: innerHTML · DOM: Hide/Display jbwyatt navigation - js file footer simple: bottomNavigation() header slightly more complex: topNavigation() - create a string of html var output = '<li><a href="page.html... - insert string into an empty div set the id of the div <div id="topnav"> - get id and insert using js and html var o = documentgetElementById("topnav"); o.innerHTML = ...
0D. Events (Duckett-JJ Ch. 6)
EVENTS (ch 6): local code - online code :: ppt - pdf listener in html element attribute onclick in js onclick addEventListener Murach Code, Ch. 3
Z-order Image Manipulation   js   css
0E. Canvas: Using JavaScript to Create Graphics
Diving Into HTML5: canvas text Mozilla canvas tutor W3 Schools: canvas tutor Arc Rectangle JS: canvas, graphics and Math lib(random, round, floor) JS: Snow
Canvas rectangles and ellipses // x,y,w,h ctx.fillRect(Math.floor(Math.random()*400), Math.floor(Math.random()*250), Math.floor(Math.random()*140), Math.floor(Math.random()*100)); .... // x, y, radius, startAngle, endAngle, anticlockwise ctx.arc( Math.floor(Math.random()*450), Math.floor(Math.random()*250), Math.floor(Math.random()*40), 0.0, (Math.PI * 2), true); ctx.fill();// actually draws here EXAMPLES: DemoStudio, Mozilla Chrome Experiments Timeless Name & Ski Game BreakOut Game Tutorial uses rectangles and ellipses
0F. HTML Forms (Duckett-HC Ch. 7)
HTML Forms: local code - online code :: ppt - pdf Wyatt: Sales Tax Calculator Forms from Dive Into HTML5
W3 Schools HTML 5: Forms Form Validation Validation Project Notes -------------------------- - pattern= [a-z] [A-Z] [-] [.] [0-9] \d {3} {0,7} {2,4} ( stuff )? - optional - <input type = email - takes place of pattern type = text + pattern type = submit - Check if fields are valid before calculating (submitting) if( $("idOfForm").checkValidity() { ... calculation code } - output into textarea <textarea id="rules" rows="22" cols="34" access textarea thru id and output to value property // myMessage is just a variable with data $("rules").value = myMessage; - Setting up event procedures window.onload = function () { // the two main actions $("calculate").addEventListener("click", CalculateClick); $("clear").addEventListener("click", ClearClick); // when we lose the focus on a name $("name").addEventListener("blur", CapFirst); } CSS valid and invalid pseudocode #id:valid{ property:value } #id:invalid{ }
10. Error Handling & Debugging (Duckett-JJ Ch. 10)
JS Error Handling & Debugging: local code - online code :: ppt - pdf Finding errors: Firebug and the Error Console finding errors: web developer: syntax firebug: run-time, logic Bad HTML & CSS Validate? Validation Web Developer JS Syntax? Web Developer Logic? FireBug Array filled correctly? Array displayed correctly? Good
11. jQuery (Duckett-JJ Ch. 7)
jQuery: local code - online code ppt - pdf Library <script src="JS/jquery-2.0.2.min.js"></script> Tested Browser neutral 'ready' $(document).ready(function() { your code to execute on startup } ); // end ready load pages dynamically $('#id').load('file.html'); buggy validation issues $() gets elements needs # with id $('#id').load('file.html'); html() takes place of innerHTML var output = "html code"; $('#topNav').html(output);
click here to demonstrate hiding/showing
// begin by hiding all divs of class 'notes' $('.notes').hide(); // when heading is clicked, show the first child object // using id of 'notes' just hides it at first $(".notesHead").click(function () { var obj = $(this); var nextObj = obj.next(); nextObj.slideToggle(500); });
Navigation Example with JQuery: jbwyatt navigation - create a string of html var output = '<li><a href="page.html... - insert string into an empty div set the id of the div <div id="topnav"> - get id and insert using js and html var o = documentgetElementById("topnav"); o.innerHTML = ... - get id and insert using jQuery <script src="JS/jquery-2.0.2.min.js"></script> $('#topNav').html(output); same idea, different syntax
12. Form Enhancement & Validation [jQuery] (Duckett-JJ Ch. 13)
☆   Test 2 - Final Exam
Student is responsible for notes, readings and classroom discussions.   Notes may be changed, emphasized, re-ordered or skipped over.

    1. Notepad ++
        => hints and tips

    2. Firefox Developer and add-ons
            firebug replacement: dev tools (built into firefox developer)
            web developer extension
            html validator
            colorzilla identifies color
            ruler measures object size
            screenshot captures screen as an image

    3. Image editors:   paint.net     gimp image editor

    1. HTML & CSS: Design & Build Websites, Duckett, 2011
        [REQUIRED] ISBN: 978-1-118-00818-8
        (Amazon)     (Bookstore)  
        Text Web Site   -   Code from Text (view or download) (local)

    2. JavaScript & JQuery: Interactive Front-End Web Development, Duckett, 2014
        [REQUIRED] ISBN: 978-1-118-53164-8
        (Amazon)     (Bookstore)  
        Text Web Site   -   Code from Text (view or download) (local)

    3. Dive Into HTML 5 by Mark Pilgrim (web) -- (pdf)
        [OPTIONAL]   (free web book)