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.