Web Programming and Design cource | Assoc.Prof. Abzetdin Adamov | Computer Engineering Department | Qafqaz University

COURSE SYLLABUS FOR: Web Programming and Design

COURSE ID: COMP 334
CREDITS: 4
CLASS TERM: Spring, 2016
INSTRUCTOR: Assoc.Prof. Abzetdin Adamov
CLASS SCHEDULE: see My Calendar
JOB TITLES: Web Analyst, Web Architect, Web Developer, Web Master, Web Designer, Content Manager

Course Description:

This course is about Client-side scripting in the form of introduction to Web Programming and Design. The HTML - CSS coding and JavaScript programming are key elements of the course. The course will focus on the design and development of dynamic, interactive and user-centered web-sites and web-based applications using a number of currently popular technologies and strategies. Topics to be examined include: HTTP, CSS, JavaScript, Table-based layout, Div-based layout, Rich Web Applications (Web2), scalability, security and other web technologies. Students will learn the basic techniques, tools and processes used to construct and manage a well-designed, effective, accessible, usable web site while keeping the site’s users in mind. Students will learn and demonstrate these concepts through exercises and a term project.

Course Objectives:

The main goal of this course is to develop a high degree of competence as a web developer by learning principles and techniques of client-side programming with HTML, CSS, and JavaScript. Students also should understand the basic history to the Internet and current Internet statistics those will show the real scale of the Web Environment. Understand the increasingly pervasive role of Web technologies to Society, Government, Business, and Communication between them.

Learning Outcomes and Competences:

At the end of this course student will:
  • Acquire fundamental skills in web development and design by creating practical static and dynamic web pages and applying HTML and CSS.
  • Be able to deal with existing web pages in order to update and re-design them.
  • Demonstrate intermediate level abilities in programming in scripting language such as JavaScript.
  • Show skills to apply practically the knowledge obtained during course in development of the medium-complexity web projects.
  • Gain the ability to learn new Internet and Web technologies and techniques by himself to stay abreast of current and developing trends in Web development and Information Technology.

Assessment Methods and Criteria:

Midterm Exam30%
Quiz and Compulsory Project20%
Final Exam (+ Project)50%
Extra project for succeeded students10 (points max)

Prerequisite:

There are no prerequisites.
Web page development knowledge is not required, however basic programming skills are recommended.

Software Installations:

In order to be able to run example codes, perform class tasks and exercises, homework assignments and final projects students must install following software...
Compulsory Software:
  • Simple Text Editor (like Notepad) or HTML (CSS and JavaScript) syntax highlighting Text Editor (like EmEditor). The Web Development IDEs like FrontPage, Dreamveawer, etc. are not recommended.
  • Any Web Browser (lke Google Chrome, Internet Explorer, Firefox, etc.)
Optional Software:
  • WebServer Software in order to simuate a real Client-Server HTTP interaction (WAMP Server is one of the best suitable)
  • Hex Color Chooser for Windows RGB to WebColor
  • CodePen - HTML + CSS + JavaScript all together in Web CodePen (Some examples have been creating with CSS animations)
  • Another Emulator HTML5 + CSS3 + JS JSFiddle

Text Books and References:

  • Introduction to WWW, Internet Today [ Slides - PDF ]
  • Introduction to HTML [ Slides - PDF ]
  • HTML Frames (Frame-based Layout) [ Slides - PDF ]
  • Introduction to Cascade Style Sheets (CSS) [ Slides - PDF ]
  • HTML with XHTML and CSS, Elizabeth Castro
  • HTML and CSS in 24 Hours, Dick Oliver
Students also are free to benefit from another books and reference guides of their own choosing for HTML, CSS, Javascript and other topics.

Lab Assignments and Homework Tasks:

Example:
Full CSS-based Layout and Design
Same website without CSS
Full CSS file

Self-Study Assignment: minimized CSS Declarations List you have to know and be able to use appropriately CSS Declarations List to Learn

ASSIGNMENT 1. Develop your personal website using CSS-layout. This website is going to be your online CV. It is recommended that your website include following links those refer to appropriate webpages: Home (general information), Education, Extracurricular Activities, Computer Skills, Internships, Hobbies and Interests, Gallery, etc. Submit assignment via email specifying a subject as "WDP - HTML-CSS Assignment" until April 17 18, 2016 - 24:00 .
Essential requirements for assignment CLICK TO SEE

 ANNOUNCEMENTS:  

  • Quiz/Exam date is May 27, 2016 - 14:40 / 16:30 (It is not allowed to postpone quizzes). Exam will be performed on computer for a limited time and aims to evaluate your understanding of the JavaScript and ability to develop client-side application.
  • Quiz/Exam date is April 29, 2016 - 14:40 / 16:30 (It is not allowed to postpone quizzes). Exam will be performed on the computer for a limited time and aims to evaluate your understanding of the CSS in general and CSS-based Layout (Design).
  • Self Study Topic - HTML Frames and Frame-based websites. This topic will not be covered in class, but you are expected to study yourself.
  • Quiz/Exam date is March 15, 2016 - 09:00 / 16:30 (It is not allowed to postpone quizzes). Exam will be performed on the computer for a limited time and aim to evaluate your understanding of the Web Development using Poor HTML.
  • The first Web Programming and Design class will be held in February 16, 2016 - 09:00 / 10:50 (Lab-A240).

Contents of the course (week topics):

Topic's Title Example Codes Documents
1 Internet history and evolution progress
  • Internet and Society
  • Internet Statistics
  • Web-application and Scale of Social Networks
 
2 The Web at a Glance
  • Internet Architecture and Components: Hosts and Servers, Protocols, DNS, Services’ overview.
  • Browser, WebServer and HTTP Dialog.
  • The client-server model
  • Variety of Browsers and Platforms and Consequences.
  • Client-side programming
  • Importance of having Serch Engine Optimization (SEO) in mind
 
3 HTML - Hyper Text MarkUp Language
  • HTML History in Brief
  • Dynamic and Static Webpages
  • Basics of web design
  • HTML, Tags, Properties and Values
  • Web Page Structure
  • Structural elements and text formatting
  • Color assignment and Hexidecimal code
HTML Basics
4 HTML Lists
  • UnOrdered Lists (UL)
  • Ordered Lists (OL)
  • Advanced properties of OL
  • Sub Lists
HTML Lists
5 Images as key media element
  • Including images in webpages (IMG)
  • Image types and their differences (JPG, GIF, PNG, BMP, Animation GIF)
  • Advanced Properties and Values of IMG
  • Mapping regions within images (MAP, AREA)
  • Image using and Web-page efficiency
  • Photoshop for image cropping and sizing
  • Improve SEO Ranking
Image
6 Hyper Links and Use
  • Link Tag Properties and Values (A)
  • External and Internal Links - four levels of linking
  • Linking to external files to modularize html
  • Email link
  • Image as link
  • Improve SEO Ranking
HTML Linking
7 META and BODY tags
  • META tag types and their role
  • Direct influence of META tags to SEO Ranking and important issues
  • BODY Tag and Properties
META Tags Using
BODY Tag
8 HTML Tables
  • Basics of tables
  • Table, heading, row, data elements and attributes
  • Using of ROWSPAN, COLSPAN
  • Advantages and disadvantages of table-based design/layout (webpage skeleton)
HTML Tables, Table-based Layout
9 Multipage Layout with Frames
  • What are Frames?
  • Frame and frameset properties
  • Relations between Frames (FRAME)
  • Frame-based layout
  • Efficiency and usability issues / advantages and disadvantages
  • Whether Frame is an alternative of Table?
  • Why Frames are not so popular anymore?
HTML Frames and Examples
10 Cascade Style Sheets - CSS
  • CSS as tool of design style or standardization
  • Bringing CSS to Web Pages: Inline, Embedded, and External styles
  • CSS as base of Dynamic HTML. Using CSS selectors: CLASSes and IDs
  • Advanced text formatting with CSS
CSS Basics
Text Formatting
+
11 CSS-based Layout
  • Inheritance and the cascading in CSS
  • The Box Model: Styling with content, padding, borders, and margins
  • CSS positioning and Floated elements
  • Converting an existing page styled and seeing advantages
  • Improve SEO Ranking
CSS Box Model
CSS-based Layout
12 Introduction to JavaScript
  • Variables and Commands (Key Words)
  • Data Types and Assignments
  • Flow Control operators and expressions
  • Hello World in JavaScript - Examples
Hello
Arrays
Strings
Math
Function
Flow Control
13 Advanced Client-side programming in JavaScript
  • Event Handlers
  • Objects in JavaScript: Standard Objects, Core and HTML DOM Objects, ...
  • JavaScript and HTML Forms Elements and their Properties and Relations
  • JavaScript for Simple Form Validation
  • Adding Interactivity to Web page by JavaScript
Events
JS Objects HTML Forms
Interactivity
Overflow-Display
JS Examples
+
14 Rich Media Content
  • Including Media Content in webpage (SWF, WAV, MP3, MPEG, AVI, M1V …)
  • Embedding media by RealAudio and Windows Media Player
  • Youtube, Twitter, RSS feeds, etc. on your Web page
  • Improve SEO Ranking
15 Increasing efficiency of webpages
  • Who is HSP (Hosting Service Provider)?
  • Choosing the right HSP
  • FTP Server and FTP Client software
  • Growing Web functionality and Where is the web going next?

Course Policies

General:

Respect due dates - No late projects, lab assignments, papers, or quizzes will be accepted unless you have made prior arrangements with the instructor. Quizzes will be announced at least one week before the actual date, will be no quizzes allowed after the established deadline.
Since this course is about computer programming, it is strongly recommended that you have a working computer at home connected to the Internet. Most of course matherials are located online and it's also good for your success to use recommended additional online tutorials.

Student contributions:

The Students are expected to follow to instructor's recommendations when preparing homeworks, tasks, laboratory reports, tests, theses, etc.
  • Communicate in a professional manner with instuctors and/or classmates (including online communication)
  • Participate actively in-class discussion topics
  • Complete all in-class and homework-tasks/projects in time
  • Most successful students are expected to make proposal for in-class seminar on a original topic that is not covered by course
  • Preview course materials for the topic is going to be covered that week, before class starts

Bonus Project:

Bonus is optional project and each student can offer his own unique topic within bounds of the course or request one from instructor. Each student who pretend for bonus points should prepare paper according to the announced standards and present it in class. Bonus points will be added to your final grades just in case of success for course without considering bonus points. Part of bonus points may come from participation points related with your attendance.

The Student Conduct Code:

Students are expected to follow to general rules of condact and behavior. Students have to be familiar with regulations described in the ADA University Student Handbook.
To avoid distractions late students are asked NOT to enter the class after the doors are closed. In particular, excessive and loud talking, leaving and reentering class without permision, cell phones using, or other means of disrupting the class will not be tolerated and students may be asked to leave the class. Students who constantly disrupt class may be asked to leave permanently and will fail the course. Be responsible for your own actions.
Important: All cell phones and other gadgets should be turned OFF, they may not be used in the classroom and students are NOT allowed to leave room to use their cell phones.

Attendance:

It is expected that students will attend and participate actively in all classes during semester. One of the the key factors in success in this course is to attend to all scheduled classes and be actively involved in learning process. Attendance is an indispensable element of the educational process. In compliance with Azerbaijani legislation, instructors are required to monitor attendance and inform the Registrar and the Dean of the respective School when students miss significant amounts of class time. Azerbaijani legislation mandates that students who fail to attend at least 75% of classes will fail the course.
ADA attendance policy excuses two (2) student absences, though these should reflect a serious need on the student’s part to be away from class. In case of involuntary and unpredictable serious disruption of normal life, students may appeal to a grievance procedure through Office of the Dean of the School of Education.
Student is responsible for all work missed during his absences.

Academic Dishonesty - Cheating:

All graded projects must be your own work. My strong recommendation - "If you are not able to do more, do less, but do them right and by yourself". An act of academic dishonesty or plagiarism may result in failure for a project or in a course. Plagiarism involves representing another person's ideas or outcomes, including material from the Internet, as your own. Cheating or acts of academic dishonesty also include fabricating data and results, copying, and offering or receiving unauthorized assistance or information from another person. Students involved in activities such as cheating and/or plagiarism will be subject to disciplinary action in accordence with ADA University Student Disciplinary Regulation.

Communication:

eMail is a Prefered Communication Tool. Be awared that only emails that sent from your ADA University @ADA.EDU.AZ account will be considered - CLICK to Sign In

Meeting Hours and Appointment:

  • For meeting follow to Office Hours (check my online Calendar or on-door calendar)
  • You can apply for meeting by appointment beyond the stated office hours via email
  • Only emails that has been sent from @ADA.EDU.AZ will be considered

Please let me know if you do not understand any topic, concepts or projects in bounds of this course. Feel free to clarify any questions you may have during class, or via email.