· Brackets is an open source code editor for web designers and developers. It includes several powerful tools, including a JavaScript debugger. Projects and exercises in this course are based on code developed in Brackets (http://brackets.io/) and running on Chrome (https://www.google.com/intl/en/chrome/browser/).
Assorted Tutorials
· To help you learn the development tools used in this course, such as JavaScript and CSS, we have provided links to tutorials. Since web sites move frequently, some of these links may be broken. If so, we recommend you independently locate tutorials on the same skills.
COURSE GRADING
Project/Deliverables
Percent of Grade
Project 01: HTML Customer Website
15%
Project 02: CSS Customer Website
20%
Project 03: JavaScript Customer Website
25%
Project 04: Customer Research
· 1 Presentation
· 1 Research Paper
20%
Midterm Assessment
10%
Final Assessment
10%
Class Participation
±10%
Total
100%
There is no curve for this course.
An “A” grade requires at least a 90%.
A “B” grade requires at least an 80%.
A “C” grade requires at least a 70%
A “D” grade requires at least 60%.
For All Deliverables
· Submit via LMS
· Due at the time specified by the instructor.
· -10% of earned grade per day for late submissions
· Negotiate accommodation for unavoidable situations, such as illness and family emergency, with instructor
COURSE POLICIES AND EXPECTATIONS
ACADEMIC INTEGRITY
The professors believe in and support the Policy on Academic Integrity.
· The assignments in this class are designed to help you absorb and comprehend the covered topics. Doing the work is much more important than getting the right answer.
· Avoid even the appearance of cheating or inappropriate copying.
· If you use the work of others—whether cutting and pasting code from the Internet, quoting words from the textbook, or sharing insights from your fellow classmates, you mustgiveproper credit. Honor these people by properly acknowledging them and their work.
· You may only get help on graded assignments from designated people. If you are struggling with an assignment, by all means seek help from your instructors, staff tutors, or any faculty member. They may help you at the computer, on paper, or any way they believe will be effective. Do not share or get help from any other sources.
· You may get TAs to help with out-of-class assignments, but only your professor is allowed to help you debug your programs.
· You are encouraged to talk through concepts and ideas with your fellow students and to study with them, but do not give or receive direct help from your classmates on a graded assignment. Never show your work to your classmates or seek to see their work.
· We live in a time when a vast amount of information is available online. You can easily find example source code or answers to questions on assignments. Before you copy such information and turn it in, ask yourself if you are misrepresenting it as your own work. If it has your name on it, you are.This is cheating.
· On the other hand, reading a Wikipedia page that helps you understand an important concept is perfectly acceptable. There is a wide grey area between these examples. Ultimately, what counts is the instructors' judgment, so be cautious. If you're ever unsure about whether or not a resource is permissible, seek clarification before you use it. It is better to ask than to discover the hard way.
· The severity of sanctions imposed for an academic integrity violation will depend on the severity of the transgression and ascertained intent of the student. Penalties for a first offense may range from failing the assignment to failing the course and referral to an academic review board.
COURSE CALENDAR
Topics
Assigned Readings Due Next Class
Deliverables Due Next Class
Week 01
Class 01: Course Introduction
· Welcome to iCarnegie and Parallax
· Getting Started with SDP – Student
· Parallax Welcome
· iCarnegie Consulting Welcome Brochure
· Parallax Pemex Brochure
· Parallax Press Release
· Creating a Website: pages 19-35
· Read about the following tags at w3schools.com:
o <!DOCTYPE>
o <html>
o <head>
o <meta>
o The Meaning of All <meta> Tags
o <meta> charset
o <title>
o <body>
o <!—comment -->
o <h1> to <h6>
o <p>
· Bookmark the following page: HTML Tag Reference
Class 02: HTML: The Bones of a Website
· Creating a Website: pages 35-48
· Read about Brackets, the code editor you will install and use in the next class: http://brackets.io/?lang=en
· Watch these short videos about Brackets:
· https://www.youtube.com/watch?v=Nhvj1NYC3Uc&feature=youtu.be
· https://www.youtube.com/watch?v=rvo3Mv1Z4qU&feature=youtu.be
Even if you don’t understand much of the information in the above videos, they will give you a glimpse into the cool things you will be doing in the next few weeks.
Class 03: Adobe Brackets
· Creating a Website: pages 103-123, 128-130
· Read about the following tags at w3schools.com:
· <hr>
· <dl>
· <dt>
· <dd>
· <ol>
· <ul>
· <li>
· <sup>
· <sub>
· <small>
· <cite>
· <abbr>
· <br>
· <blockquote>
Week 02
Class 04: HTML Text
· Creating a Website: Pages 183-207
· Learn how to embed YouTube videos: https://support.google.com/youtube/answer/171780
· Read about the following subjects at w3schools.com:
· <img >
· HTML Style — CSS
· CSS Background Property
Class 05: Pictures and Videos
· Creating a Website: Pages 124-127
· Read about the following subjects at w3schools.com:
· HTML Forms and Input
· <fieldset >
· <legend>
· <form>
· <label>
· <input>
· <textarea>
· <label>
· <select>
· <optgroup>
· <option>
· <table>
· <tr>
· <th>
· <td>
Class 06: Tables and Forms
· Creating a Website: Pages 117 - 118
· Read about the following subjects at w3schools.com:
· <div>
· class
· id
· HTML5 Semantic Elements
· <header>
· <nav>
· <main>
· <footer>
Week 03
Class 07: Divs, Classes, ID’s, and Semantic HTML
· Creating a Website: Pages 213 - 225
· Read about the following subjects at w3schools.com:
· HTML Links
· <a>
· href Attribute
· Email Link
· HTML tabindex
Class 08: Links
· Project 01 due by 8 pm of the evening of Class 09
Class 09: Project 01 Review
· Visit http://www.csszengarden.com/ and view at least three designs. Notice how dramatically CSS can change the appearance of an HTML page. All of the CSS Zen Garden designs have identical HTML
· Understanding CSS Specificity
· CSS Specificity and Inheritance
· Answer the following questions in your Engineering Notebook:
o What worked best in Project 01 for you?
o What could be improved?
o What additional thoughts or comments do you have about Project 01?
Week 04
Class 10: The CSS Specificity Wars Card Game
· Creating a Website: Pages 135– 149
· CSS Style Sheets
· CSS Syntax
· CSS Selectors Reference
· CSS Property: Color
· CSS Shorthand for the Hexadecimal Color Value
· HTML Color Picker
Class 11: Intro To CSS: The Inheritance, The Cascade, and the Specificity Wars
· Creating a Website: Pages 149 – 167
· Font Family
· Font Size
· Font Weight
· Font Style
· Line Height
· Text Align
· Text Transform
· List Style
· CSS Pseudo-Classes
· Text Decoration
Class 12: CSS Properties Part 1
· Creating a Website: Pages 171 – 182
· Width
· Height
· Margin
· Padding
· Border
· Background
· Box Model
· CSS Positioning
· Class Position
· Top
· Right
· Bottom
· Left
· Display
· Float
· Clear
· Overflow
· Z Index
Week 05
Class 13: CSS Properties Part 2
· Google Fonts
o A Quick Example
o Overview
o Syntax
o Subsets
· Border Collapse
· Cursor
Class 14: Style the Style Guide
· Creating a Website: Pages 239 – 253
· Last Child Selector
Class 15: CSS Layout Part 1 - Header
· Creating a Website: Pages 254 – 265
Week 06
Class 16: CSS Layout Part 2 - Footer
· Transition
Class 17: CSS Layout Part 3 - Main
· Project 02 due by 8 pm of the evening of Class 18
Class 18: Project 02 Review
· Study for the Mid-Semester Assessment
Week 07
Class 19: Mid-Semester Assessment
· Creating a Website: Pages 423 – 430
· Read the following sections of the Chrome DevTools API (Link: https://developers.google.com/chrome-developer-tools/docs/console)
§ Using The Console
· Basic Operation
o Opening The Console
o Clearing The Console History
o Console Settings
§ Using The Console API
· Writing To The Console
· Errors And Warnings
· Creating a Website: Pages 439 – 448
· Popup Boxes Tutorial
· Objects and Object Literals Tutorial
· If-Else Statements Tutorial
· Arrays Tutorial
· For Loops Tutorial
Week 08
Class 22: If/Else, Arrays, and Loops
· Creating a Website: Pages 449 – 458
· HTML Option Tag Tutorial
Class 23: Interactive Forms
· Creating a Website: Pages 459 – 464
· jQuery Home Page
· How jQuery Works (Read until you get to the “Adding and Removing an HTML Class” section)
· Google Hosted Libraries – Developer’s Guide
· jQuery Link
Class 24: Introduction to jQuery
· jQuery API
· jQuery .scrollTop()
Week 09
Class 25: jQuery – Sticky Nav
· Lean Slider
· Lean Slider Download
Class 26: jQuery Slideshow Plugin
· Read the following sections of the Google Maps JavaScript API v3 Tutorial:
· Getting Started
· Audience
· Obtaining an API Key
· Hello, World
· Declaring Your Application as HTML5
· Loading the Google Maps API
· Map DOM Elements
· Map Options
· The Map Object
· Loading the Map
· Troubleshooting
· Video: Google Maps Garage: Where's My Map!
· Google Maps Simple Map Example
Class 27: Introduction to Google Maps
· Read the following sections of the Google Maps JavaScript API v3 Tutorial:
· Markers
· Introduction
· Add a marker
· Remove a marker
· Animate a marker
· Customize a marker image
· Simple icons
· View the Google Maps Simple Markers Example
· View the Marker Animations Example
· Learn how to convert latitude/longitude strings to numbers for the Google Maps API
Week 10
Class 28: Google Map Markers
· Read the following sections of the Google Maps Javascript API v3 Tutorial
· Markers
· Customize a marker image
· Complex icons
· Symbols, also called vector icons
· Make a marker draggable
· Google Maps Simple Icon Example
· Google Maps Complex Icon Example
Class 29: Markers and Icons
· Read the following sections of the Google Maps JavaScript API v3 Tutorial
· Info Windows
· Introduction
· Add an info window
· Open an info window
· Close an info window
· Move an info window
· Google Maps Info Windows Example
· IMPORTANT: Read tutorial on Creating Google Maps with Multiple Markers and InfoWindow. (The Google Maps API does not clearly explain how to do this.)
· Notice how the code in the above tutorial automatically centers the map
Class 30: Info Windows
· Google Maps JavaScript API v3 Shapes Tutorial:
· Polylines
· Add a polyline
· Google Maps JavaScrips API v3 Geometry TutorialOverview
· Spherical Geometry Concepts
§ Distance and Area Functions
§ Navigation Functions
Week 11
Class 31: Polylines and Measuring Distances with the Geometry Library
· How to Convert Latitude and Longitude Strings
Class 32: Combining Interactive Forms With Google Maps
· Project 03 due by 8 pm of the evening of Class 33
Class 33: Project 03 Review
· Analyzing, Interpreting and Reporting Basic Research Results
· Eight (No, Nine!) Problems With Big Data
· Delivering Big Data
Week 12
Class 34: Project 05 Introduction and Planning
· Prepare to discuss the question in class: How can the oil industry leverage big data?
Class 35: Conducting Research
· Initial list of resources for Project 05
Class 36: Organizing Findings
· Draft outline
Week 13
Class 37: Drafting and Revising
· Student-directed research
· Draft research report
Class 38: Work Session
· Student-directed research
· Revised research report
Class 39: Preparing Oral Presentations
· Student-directed research
· Draft oral presentation
Week 14
Class 40: Work Session and Final Q&A
· Student-directed research
· Project 05 deliverables due prior to next class
Class 41: Project 05 Customer Presentations
Class 42: Project 05 Customer Presentations
Week 15
Class 43: Project 05 Customer Presentations
· Bring any remaining questions about the course material
Class 44: Final Exam Review
· Be prepared to discuss Project 05 and the course in general:
o What did you learn?
o What went well?
o What could be improved?
o Looking at your effort log data, what conclusions can you draw about your work at iCarnegie Consulting?
Class 45: Project and Course Reflection; Course Evaluation
GRADING RUBRICS
This section outlines the manner in which deliverables will be scored in this course.
KEY CRITERIA
Your work on each assignment will be evaluated based on criteria, which are defined in the left column of the rubric, depending on the nature of the deliverable. For each of the above criteria, your work will be assigned one of the following levels of competence:
Sophisticated:
Exceeds basic requirements for mastery of the criterion.
Competent:
Meets basic requirements for mastery of the criterion.
Not Yet Competent:
Does not meet basic requirements for mastery of the criterion. Consider discussing these areas with your instructor, who may suggest extra practice, reading or tutoring to increase knowledge and performance.
APPENDIX A: RUBRICS
Table 1: Presentation Rubric
3-Sophisticated
2-Competent
1-Not Yet Competent
Deliverable Organization
The deliverable is clear, logical, and organized. Reader/listener can follow line of reasoning.
The deliverable is generally clear and well organized. A few minor points may be confusing.
Organization is haphazard; reader/listener can follow presentation only with effort. Arguments are not clear.
Written Delivery Style
The deliverable's level is consistently appropriate for the audience. Deliverable is paced for audience understanding.
Deliverable level is generally appropriate, but may be inconsistent or pacing is sometimes too fast or too slow.
Aspects of deliverable are too elementary or too sophisticated for audience. Pacing is inappropriate and/or random.
Grammar and Word Choice
Sentences are complete and grammatical. They flow together easily. Words are well chosen; they express the intended meaning precisely.
Sentences are complete and grammatical for the most part. They flow together easily. With some exceptions, words are well chosen and precise.
Listeners can follow presentation, but they are distracted by some grammatical errors and use of slang. Some sentences are halting, incomplete, or vocabulary is limited or inappropriate.
Freedom from Bias
(e.g., sexism, racism, heterosexism, ageism, etc.,)
Both oral language and body language are free from bias.
Oral language and body language are free from bias with one or two minor exceptions.
Oral language and/or body language includes some identifiable bias. Some listeners will be offended.
Presentation Delivery Style
Level of presentation is appropriate for the audience. Presentation is a planned conversation, paced for audience understanding. It is not a reading of a paper. Speaker is comfortable in front of the group and can be heard by all.
Level of presentation is generally appropriate. Pacing is sometimes too fast or too slow. Presenter seems slightly uncomfortable at times, and audience occasionally has trouble hearing him/her.
Aspects of presentation are too elementary or too sophisticated for audience. Presenter seems uncomfortable and can be heard only if listener is very attentive. Much of the information is read.
Responsiveness to Audience
Consistently clarifies, restates, and responds to questions. Summarizes when needed.
Generally responsive to audience questions and needs. Misses some opportunities for interaction.
Responds to questions inadequately.
Use of Communication Aids
Communication aids enhance presentation.
· The font on the visuals is readable.
· Information is represented and organized to maximize audience comprehension.
· Details are minimized so that main points stand out.
Communication aids contribute to the quality of the presentation.
· Font size is mostly readable.
· Appropriate information is included.
· Some material is not supported by visual aids.
Communication aids are poorly prepared or used inappropriately.
· Font size is too small to read.
· Too much information is included.
· Details or some unimportant information is highlighted, and may confuse the audience.
Body Language
Body language reflects comfort interacting with audience
Body language reflects some discomfort interacting with audience.
Body language reveals a reluctance to interact with audience.
Adapted from Huba, M.E., & Freed, J.E. (2000). Learner-centered assessment on college campuses: Shifting the focus from teaching to learning (pp. 156-157). Allyn & Bacon: Needham Heights, MA
Table 2: Research Paper Rubric
3-Sophisticated
2-Competent
1-Not Yet Competent
Content coverage
All relevant information is obtained and information sources are valid. Findings are well supported by the information.
Sufficient information is obtained and most sources are valid. Findings are mostly supported by the information.
Insufficient information is obtained and/or sources lack validity. Findings are not supported by information collected.
Content depth
Speaker provides accurate and complete explanations of key concepts.
For the most part, explanations of concepts are accurate and complete. Some helpful examples are included.
Explanations of concepts are inaccurate or incomplete. Little attempt is made to support claims. Listeners/readers gain little from the deliverable.
Constraints
All relevant constraints are identified and accurately analyzed.
Most constraints are identified; some are not adequately addressed or accurately analyzed.
Few or no constraints are identified or some constraints are identified but not accurately analyzed.
Content accuracy
Information (names, facts, etc.) included in the deliverable is consistently accurate.
No significant errors are made. Listeners recognize any errors to be the result of nervousness or oversight.
Enough errors are made to distract a knowledgeable listener. Some information is accurate but the deliverable is generally not reliable and/or trustworthy.
Generates valid conclusions/decisions
Recommended conclusion is based on stated criteria, analysis and constraints.
Conclusion is reasonable; further analysis of some of the alternatives or constraints may have led to different recommendation.
Only one conclusion is considered or other solutions were ignored or incompletely analyzed. Many constraints and criteria were ignored.
