Kaan Uyar
  • Home
  • Biography
  • Research
  • Publications
  • Teaching
  • turkish language selection, turkce dil secimi

CSC224 Web Design and Programming


Course Description

History of the internet. Basic Color Theory. Web Graphics. Accessibility. HyperText Markup Language (HTML). HTML5. Cascading Style Sheets (CSS). CSS3. Javascript. Page Layout. Typography. Other Design Issues. Responsive Web Design.

Prerequisite: ISE201

Course Objectives
  • To understand the history of the www and internet
  • To provide students with a comprehensive mastery of HyperText Markup Language (HTML) coding practices.
  • To understanding and use of HTML, Cascading Style Sheets (CSS), Javascript, and Responsive Web Design.
  • To design and implement an entire website
Course Outcomes
  • Explain the differences, advantages, and disadvantages of the various types of Internet programs (ABET Criterion 3.a, 3.b, 3.f, 3.h, 3.i, 3.j)
  • Design and develop a web-based application using HTML, CSS and Javascript (ABET Criterion 3.a, 3.c, 3.d, 3.e, 3.f, 3.g, 3.h, 3.i, 3.k)
Grading

The tentative point distribution is as follows.

Homeworks 20%
Project 40%
Final Exam 40%
Policies
  • Late assignments will not be accepted unless an agreement is reached with the leturer.
  • I allow students to attend class at their own discretion. If you miss a class however, you are responsible for the materials covered.
  • The instructor reserves the right to make changes to the given syllabus as necessary. Students are responsible to be aware of changes announced in class and/or via the internet.
  • Cheating will not be tolerated.
  • The grades will be assigned using the Near East University's grading scale.
  • Attacks performed against University/Lecturer resources are expressly prohibited.
Textbooks and References
  1. Connolly R., Hoar, R. Fundamentals of Web Development, Pearson, 2014.
  2. Jennifer Niederst Robbins, "Learning Web Design, A Beginner's Guide to (X)HTML, StyleSheets, and Web Graphics, 4th Edition", O'Reilly, 2012
  3. Jon Duckett, "Beginning HTML, XHTML, CSS, and JavaScript", Wrox, 2010
  4. Ben Frain, Responsive Web Design with HTML5 and CSS3, Packt Publishing, 2012
  5. Tom Barker, High Performance Responsive Design Building Faster Sites Across Devices, O'Reilly Media, 2014
  6. Thoriq Firdaus, Responsive Web Design by Example : Beginner's Guide, 2nd Edition, O'Reilly Media, 2014
Schedule
Week Topic Readings and useful links
1
  1. Introduction [Slides]
Readings
  1. Robbins, Chapters: 1, 2, 3, 21, 22
  2. Connolly, Chapter: 1
Useful links
  • Web browsers
    • Mozilla Firefox
    • Chrome
    • Internet Explorer
    • Safari
    • Opera
    • WebbIE
  • Editors
    • Notepad++ (Windows only)
    • Vim (Window, MAC, Linux)
    • TextPad (Windows only)
    • Sublime Text (Window, MAC, Linux)
    • Coda by Panic (Macintosh only)
    • TextMate by MacroMates (Macintosh only)
    • BBEdit by Bare Bones Software (Macintosh only)
    • Dreamweaver
  • Image editing and drawing software
    • GIMP (Window, MAC, Linux)
    • Adobe Photoshop (Windows, MAC)
    • Adobe Fireworks (Windows, MAC)
    • Adobe Illustrator (Windows, MAC)
    • Pixelmator (Macintosh only)
    • Inkscape (Window, MAC, Linux)
    • Corel Paint Shop Pro Photo (Windows only)
  • File-transfer program (FTP)
    • Filezilla (Window, MAC, Linux)
    • WS_FTP (Windows only)
    • CuteFTP (Windows, MAC)
    • AceFTP (Windows only)
    • Transmit (Macintosh only)
    • Cyberduck (Windows, MAC)
    • Fetch (Macintosh only)
  • Accessibility
    • WAVE web evaluation tool
    • Colorblind Web Page Filter
    • Web Site Optimization
    • Basic Color Theory
    • Colors in Different Cultures
    • Desiging for the Color-Blind
    • Accessibility Color Wheel
    • How to Improve the Accessibility of Your Website
    •   Screen readers
    • BRLTTY
    • Emacspeak
    • NVDA
    • Orca
    • VoiceOver
  • Other useful links
    • w3schools
    • Responsinator
2
  1. HTML Overview [Handout]
  2. Marking Up Text [Handout], [Code]
  1. Robbins, Chapter 4
  2. Robbins, Chapter 5
3
  1. Adding Links [Handout], [Code]
  2. Adding Images [Handout], [Code]
  1. Robbins, Chapter 6
  2. Robbins, Chapter 7
4
  1. Table Markup [Handout]
  2. Forms [Handout]
  3. more HTML5 [Handout]
  1. Robbins, Chapter 8
  2. Robbins, Chapter 9
  3. Robbins, Chapter 10
5-6
  1. Cascading Style Sheets [Codes], [Slides]
  1. Duckett, Chapter 7
7
  1. CSS3 [Tutorial], [Example]
8 Midterm Exams Week  
9
  1. Page Layout [Codes], [Handout]
  1. Duckett, Chapter 9
10
  1. Design Issues [Codes], [Handout]
  2. JavaScript [Codes], [Handout]
  1. Duckett, Chapter 10
  2. Duckett, Chapter 11
11
  1. Introduction to Responsive Web Design
  2. Media Queries: Supporting Differing Viewports
  1. Frain, Chapter 1
  2. Frain, Chapter 2
12
  1. Embracing Fluid Layouts
  2. HTML5 for Responsive Designs
  3. CSS3: Selectors, Typography, and Color Modes
  1. Frain, Chapter 3
  2. Frain, Chapter 4
  3. Frain, Chapter 5
13
  1. Stunning Aesthetics with CSS3
  2. CSS3 Transitions, Transformations, and Animations
  3. Conquer Forms with HTML5 and CSS3
  4. Solving Cross-browser Responsive Challenges
  1. Frain, Chapter 6
  2. Frain, Chapter 7
  3. Frain, Chapter 8
  4. Frain, Chapter 9
14
  1. Primer on Performance of Web Applications
  2. Continuous Web Performance Testing
  3. Developing a Product Launch Site with Bootstrap
  1. Barker, Chapter 2
  2. Barker, Chapter 6
  3. Firdaus, Chapter 4
15 Project Presentation, Review  
16 Final Exam  
  • Apr. 6, 2017