IT130 - Laurie Alfaro, MA, Ed.D.

advertisement
DEPAUL UNIVERSITY COLLEGE OF
COMPUTING & DIGITAL MEDIA
IT130 INTRO TO WEB COMPUTING
FALL 2013 / MON. & W EDS. 11:20AM -12:50PM, STDCT 364
I N S T R U C TO R C ON TA C T I N F O
Laurie Alfaro, M.A., Ed.D. (lalfaro4@depaul.edu)
Voice mail: (773) 325-4083
E-mail is the preferred method of contact, as I check my E-mail daily. If you do not receive a reply
within 24 hours, check to make sure the E-mail address is correct.
Office hours: Mondays & Wednesdays, 3:30pm-5:00pm, Student Center room 332
C OU R S E D E S C R I P T I O N
An introduction to the Internet, the World Wide Web, and web development for students with a
strong interest in technology. Students will create interactive web pages by writing HTML and CSS
and by programming in JavaScript. Topics include the origins of the web, the roles and operations of
web browsers and web servers, interacting with web applications through forms, and using style
sheets to separate document structure and document formatting.
Prerequisites: None.
C O U R S E C OM P E T E N C I E S
1. Be able to articulate orally and in writing the meaning of the following terms:
Displaying Web Pages: Server, browser, text editor, upload, download, HTML, start tag, end
tag, attribute.
CSS: Inline style, document-level style, external CSS page, selector (tag name), property, value.
Java Script and Programming: Algorithm, literal, variable, input, output, assignment,
operator, function, conditional (if-statement), event handler.
Data types: string, number (integer or floating point), Boolean
2. Know the importance of popular internet and web protocols such as HTTP, HTTPS, SFTP,
DNS, SSH, TCP/IP.
3. Know how to upload or download web pages and images using an SSH/SFTP client such as
Filezilla.
4. Know the request / response pattern that characterizes the interaction between a web browser
and a web server.
5. Know the difference between client-side and server-side processing.
6. Be able to use these terms to describe the size of a file: bit, byte, kilobyte, megabyte, kilobyte,
gigabyte.
7. Be able to write HTML code to do the following:
 Set the title of a document.
 Format text as paragraphs, lists and tables.
 Insert hyperlinks that use relative or absolute addresses.
 Display images.
 Specify an inline or document-level style.
 Link a document to an external style sheet.
 Implement user controls on a form including buttons, textboxes, text areas, checkboxes,
radio buttons, and dropdown menus.
8. Use inline, document-level, and external styles and understand the differences between them.
9. Be able to write basic CSS style specifications such as the following examples:
 Set the document font, weight, and style.
 Set the text color and background color for a document.
 Set the margins and indentation of a document.
 Set the color and text decoration for hyperlinks.
10. Know the basics of user centered design:
 Identify the goals of a web site and draw a prototype.
 Engage in an iterative process of user testing and design modification.
11. Given a JavaScript program, be able to do the following:
 Construct a variable trace of a JavaScript code fragment and predict the output.
 The JavaScript code might include a script with assignment statements, if..else statements,
user defined functions that are called elsewhere within the script.
 Execute a JavaScript program using a text editor and browser.
 Debug interactive pages using the following strategies: visual inspection, reading error
messages, and placing diagnostic output statements.
12. Be able to write interactive web pages using JavaScript that use the following constructs:
 If statements
 Functions as event handlers
 Built-in functions such as Math.floor, Math.random, Math.sqrt, parseFloat, window.alert
 Optional (while loops, arrays, string handling functions)
13. Be able to develop interactive JavaScript pages that use a variety of approaches for input (e.g.
prompt boxes, text boxes, radio buttons and menus) and output (alert boxes, text fields and
HTML elements).
R E QU I R E D S U P P L I E S




HTML5 & CSS3 Visual Quickstart Guide, 7th edition (Paperback), Elizabeth Castro
& Bruce Hyslop / Peachpit Press: ISBN: 978-0-321-71961-4.*
Simply JavaScript (Paperback), Kevin Yank & Cameron Adams / Sitepoint: ISBN:
978-0-9802858-2.*
Thumb drive/external hard drive. You have to back up your own work. Failure to
turn in a project will result in a zero grade for that project, so always keep backups
of your files.
A binder notebook with pockets for handouts and notes. This is very important.
* Both of these books are freely available online through the DePaul library (search
“DePaul Library Safari Books” through Google).
STUDENT FTP ACCOUNTS
As of Winter 2012, CDM has provided student accounts for all students enrolled in IT 130. Faculty
should already have accounts. Students have their account through the following quarter.
Students can activate/reset their accounts by going to
https://accountactivate.cdm.depaul.edu
Files can be transferred using Filezilla or similar software using ftp to the host
ectweb.cs.depaul.edu.
If files are placed in the home directory (no need for public_html folder), they are viewed as
ectweb.cs.depaul.edu/username/filename.html
L A T E P RO J E C T S
Under no circumstances do I accept papers or projects late! If you do not have your assignment turned in at the
beginning of class on the due date, you will receive a zero. No exceptions! If you are not present in
class, you are responsible for making sure that your project is in my hands by the deadline. Most
projects will be turned in via the Dropbox in our class Desire2Learn framework (d2l.depaul.edu).
Some assignments require that you upload your files to your student FTP account. Please read all
assignment instructions carefully.
Each student will be allowed one free pass on any 20-point assignment this term. This does not
include exams, or the final project. The first missed assignment will not count against the student’s
grade. However, subsequent missing assignments will result in zero grades for the term.
GRADING
Percent of grade
Assignments (7)
35%
Midterm Exam
20%
Final Exam
25%
Final Project
25%
*Percentages add up to 105% because students are allowed a free pass on one assignment.
Letter Grade
93-100%
A
90-92%
A-
87-89%
B+
83-86%
B
80-82%
B-
77-79%
C+
73-76%
C
70-72%
C-
67-69%
D+
60-66%
D
59% and below
F
EXAMS
There are absolutely no makeups on the midterm and final exams. Our midterm exam will be on
Monday, October 14, during our regularly scheduled class. Our final exam is scheduled for
Wednesday, November 20, from 11:45 AM to 2:00 PM. If you are not present for any reason on an
exam day, you will forfeit the points.
Students requiring special accommodations for the exam should contact the Center for Students with
Disabilities (see below) to make the necessary arrangements.
D I S A B I L I T Y S E RV I C E S
Students who feel they may need an accommodation based on the impact of a disability should
contact me privately to discuss their specific needs. All discussions will remain confidential. To
ensure that you receive the most appropriate reasonable accommodation based on your needs,
contact me as early as possible in the quarter (preferably within the first week or two of class), and
make sure that you have contacted the
Center for Students with Disabilities (CSD)
Lincoln Park Campus, Student Center 370, (773) 325-1677
Loop Campus, Lewis Center 1420, (312) 362-8002
csd@depaul.edu
C L A S S R O OM B E H AV I O R
Discussion is encouraged in this course, but disruptive behavior will not be tolerated. Students may
not use cell phones or other electronic devices that are unrelated to the class during the lectures.
Students may not work on unrelated homework or projects during class lectures. Students must try
their best to be alert and engaged throughout the class time. Students who are discovered doing
things unrelated to the class will be asked to leave & will be marked absent from the class.
A T T E N DA N C E
If you are absent or late for any reason, it is your responsibility to find out what you’ve missed. The
instructor will not contact you; you must take the initiative!
Student absences are not expected to exceed more than 10% (two classes) of the number of the
classes scheduled for the term. A third absence will result in the lowering of your final grade one full
letter. Any student missing 4 classes will be given a grade of “F” for the term. There is no such thing as
an excused absence.
Tardiness is defined as not in the classroom when attendance is called or departing before the class
has been formally dismissed by the instructor. Tardiness that exceeds thirty minutes will be counted
as an absence. TWO late arrivals or early departures, or a combination of both, are counted as one
absence. If you arrive late for class, it is your responsibility to make sure that you have been marked
tardy rather than absent.
Incomplete grades are only awarded in the most extraordinary of circumstances (e.g., a sudden,
unplanned hospitalization or a death in the immediate family). According to DePaul University
policies, “In order to receive an IN grade, the student must have a) a satisfactory record in the work
already completed for the course, b) encountered unusual or unforeseeable circumstances which
prevent him/her from completing the course requirements by the end of the term, and c) applied to
the instructor for permission to receive an IN.”
DEAN OF STUDENTS OFFICE (DOS)
The Dean of Students Office (DOS) helps students in navigating the university, particularly during
difficult situations, such as personal, financial, medical, and/or family crises. Absence Notifications
to faculty, Late Withdrawals, and Community Resource Referrals, support students both in and
outside of the classroom. Additionally we have resources and programs to support health and
wellness, violence prevention, substance abuse and drug prevention, and LGBTQ student services.
We are committed to your success as a DePaul student. Please feel free to contact us at
http://studentaffairs.depaul.edu/dos/.
O P E N C OM P U T E R L A B S
Students may use the following resource to locate open computer labs:
http://www.cdm.depaul.edu/cim/academics/Pages/CIMLabResources.aspx
Please note that you must use your DePaul student ID to access the classrooms.
I M P OR TA N T DA T E S
Wednesday
Tuesday
Tuesday
September 11
September 17
September 24
Tuesday
October 29
BEGIN AUTUMN QUARTER 2013 ALL CLASSES
Last day to add classes to AQ 2013 schedule
Last day to drop classes with no penalty
Last day to select pass/fail option
Last day to withdraw from AQ 2013 classes
CHEATING AND PLAGIARISM
The Student Handbook defines plagiarism as follows: “Plagiarism includes but is not limited to the
following: (a) The direct copying of any source, such as written and verbal material, computer files,
audio disks, video programs or musical scores, whether published or unpublished, in whole or in
part, without proper acknowledgement that it is someone else’s; (b) Copying of any source in whole
or in part with only minor changes in wording or syntax even with acknowledgement; (c) Submitting
as one’s own work a report, examination paper, computer file, lab report or other assignment which
has been prepared by someone else. This includes research papers purchased from any other person
or agency; (d) The paraphrasing of another’s work or ideas without proper acknowledgement.”
The goal of assignments is to practice the concepts taught in class. You are expected to do your own
assignments. However, some collaboration with other students is allowed and even encouraged. The
following types of collaboration are allowed:




Discussing strategies for solving a problem
Explaining why a Web page does not work
Reviewing and testing someone else’s Web pages
Using HTML and JavaScript code provided by the instructor and texts
The following types of collaboration are not allowed:


Copying someone else’s HTML or JavaScript code
Literally telling someone what code to write
Engaging in these last two types of collaboration will be considered a violation of the university’s
policy on academic integrity. Violators will receive a 0 for the corresponding assignment and will be
reported as required by the policy.
C OU R S E C A L E N DA R
Week WEDNESDAY, SEPTEMBER 11: Review syllabus. Discuss class policies and procedures.
1
Intro to the World Wide Web: a brief history. What’s the difference between the web & the
Internet?
Tonight’s reading assignment: HTML5 & CSS3 Visual Quickstart Guide, chapters 1 & 2 (“Web Page
Building Blocks” and “Working with Web Page Files”).
MONDAY, SEPTEMBER 16: A basic HTML page. Semantic HTML: markup with
meaning. Markup: elements, attributes, and values. A web page’s text content. Links, images,
and other non-text content. File names and URLs. Planning your site. Creating a new web
page. Saving your web page. Specifying a default index.html page. Organizing your files.
Tonight’s reading assignment: HTML5 & CSS3 Visual Quickstart Guide, chapters 3 & 4 (“Basic
HTML Structure” and “Text”).
Week WEDNESDAY, SEPTEMBER 18: Starting your web page. Creating a title. Understanding
2
HTML5’s document outline. Common page constructs. Creating a header. Marking
navigation. Creating an article. Defining a section. Specifying an aside. Creating a footer.
Creating generic containers.
Tonight’s reading assignment: HTML5 & CSS3 Visual Quickstart Guide, chapters 5, 6, & 15
(“Images,” “Links,” and “Lists”).
MONDAY, SEPTEMBER 23: Naming elements with a class or ID. Adding the title attribute
to elements. Adding comments for documentation. Structuring your content with paragraphs.
The six levels of headings. How to group headings. How to link things together. Adding
images to your page content. Creating ordered and unordered lists. Choosing your markers.
Choosing where to start list numbering. Using custom markers. Controlling where markers
hang. Setting all list-style properties at once. Styling nested lists. Cresting description lists.
Using lists to create horizontal navigation.
Assignment #1: Basic document structure in HTML5. Due Monday, Sep. 30th at the beginning of class.
(Please zip your file & upload to the Dropbox in D2L.)
Tonight’s reading assignment: HTML5 & CSS3 Visual Quickstart Guide, chapters 7, 8, & 9 (“CSS
Building Blocks,” “Working with Style Sheets,” and “Defining Selectors”).
Week WEDNESDAY, SEPTEMBER 25: Constructing a style rule. Adding comments to style
3
rules. The cascade: when rules collide. A property’s value. The three types of CSS: inline,
embedded (or internal), and external style sheets. Using media-specific style sheets. Offering
alternate style sheets. Constructing CSS selectors. Selecting elements by name, by class or ID,
or by context. Selecting part of an element. Selecting links based on their states. Selecting
elements based on attributes. Specifying groups of elements. Combining selectors.
Tonight’s reading assignment: HTML5 & CSS3 Visual Quickstart Guide, chapters 10 & 11
(“Formatting Text with Styles” and “Layout with Styles”).
MONDAY, SEPTEMBER 30: Choosing a font family. Specifying alternate fonts. Creating
italics. Applying bold formatting. Setting the font size & line height. Setting all font values at
once. Setting the color. Changing the text’s background. Controlling spacing. Adding indents.
Setting white space properties. Aligning text. Changing the text case. Using small caps.
Decorating text. Considerations when beginning a layout. Structuring your pages.
Considerations when beginning a layout. Structuring your pages. Styling HTML5 elements in
older browsers. Resetting or normalizing default styles: the reset style sheet. The box model.
Changing the background. Setting the height or width for an element. Setting the margins
around an element. Adding padding around an element.
Tonight’s reading assignment: HTML5 & CSS3 Visual Quickstart Guide, chapter 21 (“Publishing
Your Pages on the Web”).
Assignment #2: A basic HTML page with external CSS. Due Monday, Oct. 7th at the beginning of
class. (Please zip your files & upload to the Dropbox in D2L.)
Week WEDNESDAY, OCTOBER 2: Using FTP to transfer your files to the server. Making
4
elements float. Controlling where elements float. Setting the border. Offsetting elements in
the natural flow. Positioning elements absolutely. Positioning elements in 3D. Determining
how to treat overflow. Aligning elements vertically.
Tonight’s reading assignment: HTML5 & CSS3 Visual Quickstart Guide, chapter 20 (“Testing &
Debugging Web Pages”).
Assignment #3: Upload a photo of yourself to your web host & provide the URL for viewing the image. Due
Monday, Oct. 7th at the beginning of class. (Please upload only the URL—not the photo!—to the
Dropbox in D2L.)
MONDAY, OCTOBER 7: More lecture time for floats & positioning if needed. Trying some
debugging techniques. Checking the easy stuff: general, HTML & CSS. Validating your code.
Testing your page. When images don’t appear. What to do if you’re still stuck. Using FTP to
transfer your files to the server.
Assignment #4: Creating a layout using web fonts and floats/positioning. Due Monday, Oct. 14th at the
beginning of class. You must use your FTP account to upload these files. (Please upload only the URL—
not the HTML/CSS—to the Dropbox in D2L.)
Tonight’s reading assignment: HTML5 & CSS3 Visual Quickstart Guide, chapter 19 (“Working with
Scripts”); Simply JavaScript, chapters 1 & 2 (“The Three Layers of the Web” and “Programming with
JavaScript”).
Week WEDNESDAY, OCTOBER 9: The three layers of the web: HTML for Content, CSS for
5
Presentation, and JavaScript for Behavior. The right way. JavaScript libraries. Running a
JavaScript program. Statements: bite-sized chunks for your browser. Comments: bite-sized
chunks just for you. Variables: storing data for your program. Variable types: different types
for different data.
MONDAY, OCTOBER 14: Midterm exam. No makeup exams will be offered.
Tonight’s reading assignment: Simply JavaScript, chapter 4 (“Events”).
Week WEDNESDAY, OCTOBER 16: Conditions: making decisions. Loops. Functions: writing
6
code for later. Arguments: passing data to a function. Return statements. Scope: keeping your
variables separate. Accessing Events. Event handlers vs. event listeners: when to use each.
Tonight’s reading assignment: HTML5 & CSS3 Visual Quickstart Guide, Chapter 18 (“Tables”).
MONDAY, OCTOBER 21: Structuring tables of data. Spanning columns and rows.
Applying style to the table.
Tonight’s reading assignment: Simply JavaScript, chapter 3 (“Document Access”).
Assignment #5: Guess a number game. Due Monday, Oct. 28th at the beginning of class. (Please upload
only the URL—not the HTML/CSS—to the Dropbox in D2L.)
Week WEDNESDAY, OCTOBER 23: The Document Object Model. Text nodes vs. attribute
7
nodes. Accessing the nodes you want: finding an element by ID, by tag name, or by class
name. Navigating the DOM tree. Changing styles in the DOM. Introductory DOM scripting.
Using JavaScript to modify the styles of a table.
MONDAY, OCTOBER 28: More on the Document Object Model. JavaScript prompts.
Using the DOM to change content of an HTML page.
Tonight’s reading assignment: HTML5 & CSS3 Visual Quickstart Guide, chapter 16 (“Forms”).
Assignment #6: JavaScript Mad Libs game. Due Monday, Nov. 4th at the beginning of class. (Please
upload only the URL—not the HTML/CSS—to the Dropbox in D2L.)
Week WEDNESDAY, OCTOBER 30: Creating forms. Processing forms. Sending form data via
8
E-mail. Organizing the form elements. Creating text boxes, password boxes, E-mail,
telephone, and URL boxes. Labeling form parts. Creating radio buttons, select boxes,
checkboxes, and text areas. Allowing visitors to upload files. Creating hidden form fields.
Creating a submit button. Using an image to submit a form. Disabling form elements. New
HTML5 form features & browser support.
Assignment #7: Create a page that includes a form with textboxes for entering the principal (p) for a loan,
the yearly interest rate (r), and the length of the loan in years. When a button is clicked, use JavaScript to
compute the monthly payment (M) using the following formula and output it to a fourth textbox. Due
Wednesday, Nov. 6th at the beginning of class. (Please upload only the URL—not the HTML/CSS—
to the Dropbox in D2L.)
Final project will be assigned today. The project will be due Tuesday, Nov. 19th at exactly 11:59pm. No
late projects will be accepted for any reason. All files must be uploaded to your web host; no files will be
accepted on disc, via Dropbox, or as E-mail attachments.
MONDAY, NOVEMBER 4: More lecture time for forms if needed. Form processing: client
side vs. server side. JavaScript enhancements for your forms. Intro to final project.
Tonight’s reading assignment: Simply JavaScript, chapter 7 (“Errors and Debugging”).
Week WEDNESDAY, NOVEMBER 6: Syntax errors, runtime errors, and logic errors. Debugging
9
with Firebug. Introduction to final project.
Tonight’s reading assignment: HTML5 & CSS3 Visual Quickstart Guide, chapter 14 (“Enhancements
with CSS3”).
MONDAY, NOVEMBER 11: Understanding vendor prefixes. A quick look at browser
compatibility. Rounding corners, adding drop shadows, using gradient backgrounds.
Applying multiple backgrounds for a parallax effect. Setting the opacity of elements.
Week WEDNESDAY, NOVEMBER 13: Additional lecture time if needed. Lab time for working
10
on final project.
MONDAY, NOVEMBER 18: Lab time for working on final project (due at the end of class
today).
Your final project, completed and uploaded to your web host, is due tomorrow at 11:59pm.
No files will be accepted on disc, via Dropbox, or as E-mail attachments. The only thing you will be
submitting is your URL. Being able to upload your files to the web is an important part of the
web development process. If you are not able to do this by the end of Week 10, you have not
met the objectives of this course.
Final WEDNESDAY, NOVEMBER 20: Final exam (11:45 AM to 2:00 PM). No makeup exams
Exam will be offered.
*Instructor reserves the right to change this calendar at any time.
Download