Department of Computing Science
Faculty of Science
COMP 2680 - 3
Web Site Design and Development (3,1,0)
Winter 2017
Instructor: Mahnhoon Lee Phone/Voice Mail: (250) 377-6022
Office: HL424 E-Mail:
Office Hours: 9:30 – 11:20 @ Mon, Tue, Wed
Course Description
Students are introduced to the overview of website development. Students learn major aspects of client-side components, including Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS), JavaScript programming, and Document Object Model (DOM), for interactive web applications. Students explore the server-side technologies for dynamic web applications.
Educational Objectives/Outcomes
· Understand the major areas and challenges of web programming.
· Distinguish web-related technologies.
· Use topics in HTML, CSS, JavaScript, and DOM
· Use event-driven programming
· Design and implement
o typical static web pages, and
o interactive web applications
· Identify and interpret structure and page content elements of an HTML5 document
· Develop a basic web site with HTML5 elements by creating hyperlinks and image maps
· Design and create web page layouts with CSS3 using selectors, text styles, lists, pseudo-items, background, floating objects, box model, and positioning elements
· Interpret structure and styles of web tables
· Identify various parts of web form elements
· Design a multimedia web site with audio, video, and applets
· Enhance a web site with advanced CSS with special effects, print media and for the mobile web
· Create a well-formed and valid document
· Develop interactive web pages with JavaScript
Prerequisites
· COMP 1130 Computer Programming 1
Corequisites
Texts/Materials
· Course web site – http://cs.tru.ca/~mlee/comp2680/
Other Available/Recommended Resources:
· www.w3schools.com
· www.stackoverflow.com
· P. Deitel, H. Deitel, A. Deitel, Internet & World Wide Web HOW TO PROGRAM, 5th ed, Pearson, 2012.
Student Evaluation
· Project and assignments 30%
· 2 midterm exams 30% (each 15%)
· Final exam 40%
Other Points to Note
· Attendance
Since this is a programming course, there is a lot of programming involved. Attendance in every class is expected and very important for success in this course. The material presented in class will highlight important concepts and your Labs and Assignments will build on those concepts to demonstrate practical applications of the material covered in class. Students who repeatedly miss lectures or labs will be required to withdraw from the course.
· Class Conduct
During lectures, the student is expected to act in a professional and respectful manner towards other students and instructors; students not conducting themselves in such a manner may be asked to leave. This courtesy is also expected during lab/seminar times, which are allotted only for course work. In particular, private conversations during lectures or labs are NOT allowed. Anyone doing so will be asked to leave the lecture or lab immediately.
· Late Homework Policy
Homework that is late shall receive a mark of zero (0).
· Missed work
All exams and quizzes must be written at the designated time. Missed exams, and assignments will count as zero unless medical reasons supported by a medical doctor’s note are provided.
· Academic Honesty Policy
All work submitted must be your own. TRU's academic honesty is followed in this course. Copied work will result in an automatic F for the course. The student is expected to be familiar with these policies--see the TRU Calendar.
Course Schedule
Lecture:
(Note: Not necessarily in this exact order and duration, but very close)
· Web applications environment 0.5 weeks
o HTTP, web browser, web server, and client-server model
o Static web applications, interactive web applications, dynamic web applications, and 3-tier architecture for web applications
o Web technologies
· Static web documents – How to display/structure HTML5 content 2-3 weeks
o HTML5 elements, including multimedia
o Box model
o Displaying
o Positioning
o Layout
· Static web documents – How to style HTML5 content with CSS3 2-3 weeks
o How to select HTML5 content to style
o CSS3 properties to be styled
· Static web documents – Some advanced topics 1 week
o Multiple columns
o Nested ordered lists
· Interactive web programming 5 weeks
o CSS3 pseudo classes
o Tabs, and vertical navigation bars
o Dropdown menus
o JavaScript scripting language to control HTML5 content
§ Scripting language
§ How to use JavaScript in web applications
o Event-driven programming
§ Events, event handlers, and 3 types of registration
§ Timer
o DOM
§ How to access/update/create/delete HTML5 objects
o Form
· Review and other miscellaneous topics 1 week
Seminar/Lab:
(Note: Not necessarily in these exact topics, but very close)
· Development of static web documents and interactive web applications while solving the following problems
o How to display web document components
§ Block elements
§ Inline elements
§ How to group elements
o How to style web document components
§ Dimension and box model
§ Coloring
§ Displaying
§ Positioning
§ Overlaying
o JavaScript basics
§ Basic control structures
§ Functions
§ Linear and associative arrays
o How to control web document components
§ Event-driven programming
§ Interaction with DOM
§ Timers
· Development of various home pages utilizing
o Tabs
o Pulldown menus
o Forms and user input
Use of Technology
· Windows, Ubuntu, XAMPP, Apache, Web browser – Chrome, Notepad++
· HTML5, CSS3, JavaScript
ACM / IEEE Knowledge Area Coverage
Knowledge Areas that contain topics and learning outcomes covered in the course
Knowledge Area (elective) / Total Hours of CoverageHCI-Human Computer Interaction / Total 1
HCI/Programming Interactive Systems / 1
PBD-Platform-Based Development / Total 12
PBD/Web Platforms / 12
Body of Knowledge coverage
KA / Knowledge Unit / Topics Covered / HoursHCI / Programming Interactive Systems (elective) / Software architecture patterns – Model-View Controller / 1
Data-driven applications (database-backed web pages)
PBD / Web Platforms (elective) / Web programming languages / 12
Web platform constraints
Software as a Service
Web standards
3(5)