HOLY ANGEL UNIVERSITY COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY WEB TECHNOLOGIES 1 COURSE SYLLABUS Course Code : 6WEBTECH1 Prerequisite : N/A Course Credit : 3 Units (2 hours LEC,3 hours LAB) Year Level: 2 nd year Degree Program: : BSIT with Area of Specialization in Web Development Course Description: This course is designed to provide a thorough working knowledge in defining content of web pages using Hypertext Markup Language 5 (HTML 5) integrated with creative layout using CSS3 (Cascading Style Sheet 3). Moreover, students will be able to learn to manage the behaviors of web pages through the use of JavaScript. Students will also learn to manipulate text and images using CSS transitions. The course will also focus in recommended practices in utilizing and creating elements or widgets considering accessibility feature in terms of target audience. Generally, the subject will develop the practical skills in developing static and dynamic web pages for a specific target. At the end of the course, students will be able to: Course Outcomes Graduate Outcomes Aligned to C1 Identify different recommended BSIT02: Understand best practices and standards and their applications practices in utilizing web elements or widgets and apply them in web pages C2 Propose a static website based from a locale s needs or target audience with BSIT04: Identify and analyze user needs and take them into account in the selection, creation, evaluation and administration of computer-based systems. proper documentation. C3 Develop a static website based on the approved proposal. BSIT05: Integrate IT-based solutions into the user environment effectively. Learning Evidences: As proof of achievement of the above-mentioned outcomes, students are required to submit/demonstrate the following: LE1: Proposed Website and Storyboard C1, C2 LE2: Layout and Design of Website C1 LE3: Uploaded Website Prototype C1, C3 Page 1 of 8
Measurement System: To assess the level of performance in the learning evidences, the following rubrics will be used: LE1: Proposed Website and Storyboard Concept 30% Originality - 20% Comprehensive 15% Initial Design 15% Website s Feasibility 20% Illustrates the proposed websites on what type of website it is, nature of the website, target audience and purpose of the website. Illustrates the proposed websites originality in terms of concept and purpose. The concept has been well-though and provides an innovative purpose. The proposed website clearly illustrates theme and the purpose that the website will serve. Shows clear transition and purpose of each web page. Illustrates user-friendliness. Illustrates a creative design. The design is appropriate and intuitive. The nature might not be fully developed in nature but clearly shows the elements that need to be used. The proposed website s purpose is achievable and time duration of its development stage is sufficient to the accomplished the website. LE2: Layout and Design of Website Creativity and Design 30% Completeness 20% Content 25% Graphics 25% The web site has an exceptionally attractive and usable design. It is easy to locate all important elements. White space, graphic elements and/or alignment are used effectively to organize material. All of the necessary components that should be included are present. The website has a well-stated clear purpose and theme that is carried out throughout the site. Graphics are related to the theme/purpose of the site, are thoughtfully cropped, are of high quality and enhance reader interest or understanding. Page 2 of 8
LE3: Website Prototype Aesthetics and Design 25% Content 25% Navigation 20% Web Elements 15% Consistency 15% Grammar and Spellings 10% The website demonstrates an excellent design principles and pleasing aesthetics. Every component of the website compliments each other. Proper combination is achieved with every colors used, background and styles of various objects. In every case, the websites clearly convey the message it want to present to the target audience. Information are all necessary and are logically related with each other. All web elements used provide an additional way to make the theme of the website to be more understandable. All pages are linked. Most links are integrated through graphics rather than text. Links are clear and their location is intuitive. All links are functional and appropriately used in navigating through the webpages. All necessary web elements are present on the website such as menus, images, containers, lists, colors and links. Elements are utilized in a distinctive way to enhance the features and design of the website. All webpages are unified through the formatting and layout used in terms of alignment, colors, font styles and placement of the other web elements. User-friendliness and learnability were achieved. Every page serves its dedicated purpose. No grammatical errors found in every part of the website. No incorrect spellings are presented. The website employs rational words, terms and statements in labeling the elements used. Other Requirements and Assessments Page 3 of 8
Aside from the final output, the student will be assessed at other times during the term by the following: Assessment Description Course Outcomes Activity PEXAM Prelim Exam (LEC AND LAB) C1 MEXAM Midterm Exam (LEC AND LAB) C1, C2 FEXAM Finals Exam (LEC AND LAB) C2, C3, C4 PQUIZ Prelim Quiz C1 MQUIZ Midterm Quiz C1, C2 FQUIZ Finals Quiz C2, C3, C4 Learning Plan: Intended Learning Outcome Unit Course Outcome C1 Apply the initial steps in 1 C2 creating a Website Illustrate the basic HTML contents using headings, paragraphs, comments and special characters. Construct webpages with integration of images Employ links in navigating pages in creating webpages Execute the proper utilization of list in a webpage 2 3 Topic ORIENTATION and BRIEFING Preparing to Create a Web Site Getting Started with HTML5 Integrating Images Using Hyperlinks to Connect Content Presenting Learning Activities Expository: Mediated and Lecture Discussion type Cooperative learning Exploratory: Guided Demonstration Independent Assignment and Lab Assessment Activity Quizzes Oral Recitation Hands-on Laboratory Student Output Proposed Website and Storyboard (LE1) Page 4 of 8
Illustrate contents using tables 4 Lists Activity Implement the use of web forms in HTML documents 5 Formatting Content with Tables Getting User Input with Forms Demonstrate the use of basic and advanced CSS in styling webpages contents 7-8 C1 C2 C3 Styling Content with Cascading Style Sheets Advanced Cascading Style Sheets Expository: Mediated and Lecture Discussion type Quizzes Oral Recitation Employ webpage divisions using HTML 5 and CSS3 Implement client-side processing using JavaScript Develop dynamic page contents using Document Object Model 9 10 11 Creating Page Divisions JavaScript Using Document Object Model Cooperative learning Exploratory: Guided Demonstration Independent Assignment and Lab Hands-on Laboratory Layout and Design of Website (LE2) Develop webpages with integration of video and audio in HTML documents 13 C1 C3 The Need for HTML 5 Integrating Audio and Video Expository: Mediated and Lecture Discussion Quizzes Oral Recitation Page 5 of 8
Employ document structure and semantics in webpages using HTML 5 Demonstrate the use of CSS Transformations and Rotations 14 15 16-17 HTML 5 Document Structure and Semantics CSS Transformation s and Rotations Performing CSS Transformation s and Rotations type Cooperative learning Exploratory: Guided Demonstration Independent Assignment and Lab Hands-on Laboratory Uploaded Website Prototype (LE2, LE3) Course References: A. Published Materials Introduction to Web Development using HTML5 Philippines Edition by Kris Jamsa Copyright 2014 HTML5 and CSS3 First Edition by Sasha Vodnik Copyright 2011 Blended HTML and CSS fundamentals : Introductory Third Edition by Henry Bojak Copyright 2012 HTML 5 and CSS : Introductory Seventh Edition by Gary Shelly Copyright 2012 B. Web References http://www.w3schools.com/html/default.asp http://www.w3schools.com/css/default.asp http://www.w3schools.com/js/default.asp http://www.tizag.com/beginnert/ http://www.tizag.com/htmlt/ http://www.tizag.com/csst/ http://www.tizag.com/javascriptt/ Page 6 of 8
Grading System The final grade in this course will be composed of the following items and their weights in the final grade computation: PRELIM GRADE = (LEC + LAB) / 2 LEC = (( PEXAM *.30) + (PQUIZ *.70) ) LAB = ((PEXAM_LAB *.40) + (LE1 *.60)) MIDTERM GRADE = (LEC + LAB) / 2 LEC = (( MEXAM *.30) + (MQUIZ *.70) ) LAB = ((MEXAM_LAB *.40) + (LE2 *.60)) FINAL GRADE = (LEC + LAB) / 2 LEC = (( FEXAM *.30) + (FQUIZ *.70) ) LAB = ((FEXAM_LAB *.40) + (LE3 *.60)) FINAL = (PRELIM GRADE + MIDTERM GRADE + FINAL GRADE)/2 Minimum Passing Percent Average: 50 Range of Computed Averages Range of Transmuted Values Grade General Classification 94.0000 100.0000 97 100 1.00 Outstanding 88.0000 93.9999 94 96 1.25 Excellent 82.0000 87.9999 91 93 1.50 Superior 76.0000 81.9999 88 90 1.75 Very Good 70.0000 75.9999 85 87 2.00 Good 64.0000 69.9999 82 84 2.25 Satisfactory Page 7 of 8
58.0000 63.9999 79 81 2.50 Fairly Satisfactory 52.0000 57.9999 76 78 2.75 Fair 50.0000 51.9999 75 3.00 Passed 5.00 Failed 6.00 Failure due to absences 8.00 Unauthorized withdrawal 9.00 Dropped with permission Page 8 of 8