SI 539, Winter 2014 Complex Web Design Lecture: Wednesday 1:00-4:00pm Office Hours*: Tuesdays 12:00pm 2:00pm *Please check my Google Calendar for updates http://collemc.people.si.umich.edu/ Instructor: Dr. Colleen van Lent (collemc@umich.edu) Office: NQ 4365 (Never trust the UMSI directory) Contact Hours: In addition to the office hours above, I am available for individual appointments with prior notice. I will also check Piazza Monday Thursday evenings. GSI: Sidharth Chhabra (sidc@umich.edu) GSI Hours: Tuesday and Thursday 1:30pm 3:30 NQ4352 Course Email: I have established a class email via CTools: SI539- w14@ctools.umich.edu. Messages sent to this address will go to the entire class. Please use this email sparingly, and instead use Piazza for clarifying questions on assignments, study groups etc. Do not send answers, code, personal information, etc. Course Description In the first third of this course we will look deeply into the ideas and concepts behind web development; particularly recent changes to HTML and CSS standards, as well as the importance of responsive web design. In the second third we will look at how we can use PHP programming to move to a MVC approach to web design. The final third is flexible. Learning Objectives This course is aimed at students with no technical background. The purpose of this course is to provide students with all necessary skills for building and deploying web sites as well as utilize exiting software tools. The Learning Objectives for SI- 539 are to help students develop solid competency in: Understanding the importance of standards- based practices in web development Understanding the importance of separating structure and semantics from presentation, as well as how this is accomplished in professional web development Creating web pages using Hypertext Markup Language (HTML) Styling web pages using Cascading Style Sheets (CSS) Understanding the interactions between web browsers and web servers using Hypertext Transport Protocol (HTTP) Using other software tools to augment your site Using PHP in programming to control the view of large- scale projects After completing SI- 539, students will have a working personal portfolio website in production.
Required Materials 1. Textbook: Learning PHP, MySQL, JavaScript, and CSS: A Step- by- Step Guide to Creating Dynamic Websites (Second Edition) Author: Robin Nixon. ISBN- 10: 1449319262 ISBN- 13: 978-1449319267 http://oreilly.com/catalog/0636920023487 http://www.amazon.com/learning- MySQL- JavaScript- Step- - - Step/dp/1449319262 2. A laptop. You will need a laptop for this course, and you must bring it to class. Tablets are not sufficient as a programming environment. 3. Software. The software used for the course is 100% free. All necessary software will be available for both the PC and Macintosh. You must download the following software to your laptop. i. MAMP/WAMP/XAMP ii. A text Editor (I recommend Sublime or Notepad++) Using the Course Mailing List and CTools Much of the communication for the course will be handled through email and CTools. Students are expected to keep up with all email that comes to them from the course mailing list and check CTools on a regular (1x week minimum) basis. CTools is the preferred place to get help in the class and you must check CTools before emailing a question to the GSI or me. It is completely acceptable and encouraged for a student in the course to attempt to help other students in the forums. The instructional staff will read all posts and correct any incorrect advice that one student gives another. All students have permission to post to the mailing list and CTools. Accommodations If you think you need an accommodation for a disability, please let me know at your earliest convenience, but as soon as possible. Some aspects of this course, the assignments, the in- class activities, and the way I teach may be modified to facilitate your participation and progress. As soon as you make me aware of your needs, we can work with the Office of Services for Students with Disabilities (SSD) to help us determine appropriate accommodations. SSD (734-763- 3000; http://www.umich.edu/~sswd/) typically recommends accommodations through a Verified Individualized Services and Accommodations (VISA) form. I will treat any information you provide as private and confidential. Giving and Receiving Assistance Learning technical material can be challenging. We move quickly through a wide range of topics. Our goal is for you to succeed in the course, and we encourage you to get help from anyone you like, online repositories. You may get help even in completion of assignments. However, you are responsible for learning the material, and you should make sure that all of the assistance you are getting is focused on gaining knowledge, not just on getting through the assignments. If you receive assistance on an assignment, please indicate the nature and the amount of assistance you received. If the assignment is computer code, add a comment crediting sources (as in any academic paper) or indicating who helped you and how. If you are a more advanced student and are willing to help other students, please feel free to do so. Just remember that your goal is to help teach the material to the student receiving the help. It is always appropriate to ask for and provide help on assignments via CTools or during the open lab portions of class.
Plagiarism At the University of Michigan and in professional settings generally, plagiarism is an extremely serious matter. All individual written submissions must be your own, original work, written entirely in your own words. You may incorporate excerpts from publications by other authors, but they must be clearly marked as quotations and properly attributed. You may obtain assistance with copyediting, and you may discuss your ideas with others, but all substantive writing and ideas must be your own unless explicitly attributed to another, using a citation sufficiently detailed for someone else to easily locate your source. All cases of plagiarism will be officially reported and dealt with according to SI policies. There will be no warnings, no second chances, no opportunity to rewrite; all plagiarism cases will be immediately reported to SI's Dean of Academic Affairs. Consequences can range from failing the assignment (a grade of zero) or failing the course to expulsion from the University. For additional information about plagiarism, see the "Academic and Professional Integrity Policy Statement" in the SI Masters Student Handbook, the Rackham pamphlet on Academic Integrity, and the plagiarism document from the UM Libraries. If you have any doubts about whether you are using the words or ideas of others appropriately, please discuss them with the instructional staff of the course. Scoring Breakdown CodeAcademy Assignments 20% In- class Assignments 10% Written Exam 15% Final Project 20% Group Projects 25% Other Homeworks 15% CodeAcademy CodeAcademy badges are used to supplement the readings. You are expected to complete them before the lecture, so no late submissions are accepted. (The official deadline of midnight is not until after class though.) You must submit a link to your progress page so you can receive credit. In- class Assignments In almost every class period there will be a small question(s) at some point in the lecture. These assignments are pass/fail/negative and no late credit is given. If you answer the question correctly you receive 1 pt, if you answer incorrectly you receive 0 pts, if you don t answer at all, you receive - 1pt. (Note, CTools doesn t allow me to input negative points. In the gradebook it will show as 2-1- 0.) Group Projects There will be two opportunities to work in groups. Part of this work will be done in- class and it must be presented in- class. Exam There will be one exam in this course. The exam is closed book/closed note and based on the class readings, homework, and discussions. Study guides will be available. Final Project The final project is cumulative throughout the course of the year and requires a presentation during the last week of class. You will demonstrate the functionality, accessibility, and usability of your site. The final projects will be the only ranked assignment, where submissions are judged comparatively to others.
Other Assignments There will be one or two other assignments during the course of the semester. Each assignment will have at least one week to complete. If an assignment is up to 24 hours late, it will be given a 20% penalty. Beyond one day late, no points will be given. If CTools is completely down at 10pm when an assignment is due, I will extend the deadline until 10am the next morning. Getting an A+ You may earn an A+ by exceeding requirements throughout the semester. You must have receive at least 95% on the exam and have a 98% overall. You must contribute weekly to the Piazza message boards. In addition you must complete a small project for an outside group (either by creating a new site or improving an existing one). Project ideas must be submitted via email for approval by March 14th. Grading A 94% and above B- 80% and above A- 90% and above C+ 77% and above B+ 87% and above C 70% and above B 84% and above D 60% and above
***TENTATIVE****Course Outline (subject to change with prior notice) I will do my best to post any slides before class, and post notes afterward. The schedule is subject to change, but any changes will be posted immediately. Some topics (e.g. Responsive Design and Developer Tools) will reoccur throughout the semester though only the first reference is noted below. Date LECTURE TOPIC REQUIRED READING (before class) 1/8 Introduction/Setting up your editor and connecting to UM server Introduction to HTML Introduction to HTML 1/15 HTML W3 Validation Download VPN 1/22 CSS3 Developer Tools Responsive Web Design (Video) (Job Fair) 1/29 CSS 3 Intro to Bootstrap jquery HTML Structure: Using Lists HTML Structure: Tables, Divs, and Spans Introduction to CSS CSS Classes and IDs CSS Element Positioning Textbook: Chapter 18 & 19 Watch all 5 parts of video series on CTools http://diveintohtml5.info/forms.html 2/5 Catch- Up and Presentations Group Project: Validation Evaluate a site for validation 2/12 Forms/Request- Response Cycle Forms and Bootstrap Model/View Controller (Sidharth) jquery: Lessons 1 5 2/19 Intro to PHP Processing your Forms 2/26 Templates in php Google Analytics JavaScript Install WAMP/MAMP/XAMP) PHP Badges 1 5 Textbook: Chapters 1 4, 5 and 11 Textbook: Chapters 5 Javascript Badges TBD 3/5 NO CLASS SPRING BREAK 3/12 JavaScript Javascript Badges TBD 3/19 Written Exam 3/26 Catch- Up and Presentations Group Project: Forms Create/Demo an interactive form 4/9 CakePHP (Sidharth) 4/16 Present final project in class. STUDENT JUDGED!! Attendance is mandatory