VA333 / Web design
Instructor Ekmel Ertan / Assistant AhmetTürkoglu>
download syllabus

WK01 / WEB
*HOW WEB SITES WORK?
*TERMINOLOGY
*ISP, SERVER, CLIENT, BROWSER, ISS, DNS, FTP
----------------------------------------------------------------------------------------------------------------
Web pages are formatted in a computer language called HTML (Hypertext Mark Up Language).You must use a software application which is able to "decode" HTML.

Week 01 // Example // Download Sample Files.

Hypertext most often refers to text on a computer that will lead the user to other, related information on demand.

Internet service provider (ISP, also called Internet access provider or IAP) is a company which primarily offers their customers access to the Internet using dial-up or other means of data telecommunication.

A server is a computer dedicated to providing one or more services over a computer network, typically through a request-response routine.

A client is an application or system that accesses a remote service on another computer system, known as a server, by way of a network.

A web browser is a software application which enables a user to display and interact with text, images, videos, music and other information typically located on a Web page at a website on the World Wide Web or a local area network. Text and images on a Web page can contain hyperlinks to other Web pages at the same or different website. Web browsers allow a user to quickly and easily access information provided on many Web pages at many websites by traversing these links. Web browsers format HTML information for display, so the appearance of a Web page may differ between browsers.

The Domain Name System (DNS) is a hierarchical naming system for computers, services, or any resource participating in the Internet. It associates various information with domain names assigned to such participants. Most importantly, it translates humanly meaningful domain names to the numerical (binary) identifiers associated with networking equipment for the purpose of locating and addressing these devices world-wide.

File Transfer Protocol (FTP) is a network protocol used to transfer data from one computer to another through a network such as the Internet.

WK02 / WEB SITE
*A SIMPLE WEB PAGE: HTML AND EMBEDED CSS (Use a text/html editor only)
*CLASS WORK: Design a one-page web site to promote a newly published book. Download the example here.
*IMAGE BASICS: Raster and Vector image, Image for the web.
----------------------------------------------------------------------------------------------------------------
Files and links for Week2:

* Div Positioning files
* Adobe Kuler
* Edit Plus / Text editor for Windows
* TextWrangler / Text editor for Mac
* Logo Maker program
----------------------------------------------------------------------------------------------------------------
Homework for next week:

* With using text editor such as NotePad or another editor (not Dreamweaver) create one page web site for your restaurant menu.

WK03
*PHOTOSHOP BASICS
*PHOTOSHOP AS A DESIGN TOOL.
*IMPLEMENTATION: FROM PHOTOSHOP TO DREAMWEAVER.
*DREAMWEAVER BASICS.
----------------------------------------------------------------------------------------------------------------
THE NATURE OF WEB DESIGN / USEFUL LINKS:

1) Browser versions:

* Example of CSS browser support
* Graded Browser Support by Yahoo
* Float bug in IE when container has width specified
* 167 Bugs in Internet Explorer 7 for Windows
* The global structure of an HTML document
* BROWSERCAM - Cross Browser Compatibility Testing Tools

2) Alternative Browsing Environments

* Accessibility and Availability by Derek Featherstone
* Openwave Phone Simulator
* Introduction to Web Accessibility from W3C
* The Section 508 Standards
* Understanding Web accessibility by Joe Clark

3) User Preferences

* An example of user control

4) Different Platforms

* TypeTester, Comparing screen type

5) Connection Speed

* OECD statistics
* OECD Broadband Statistics

6) Browser Window Size and Monitor Resolution

* Screen Resolution and Page Layout by Jakob Nielsen
* Jakob Nielsen's Website(an example of different resolution sizes)
* Browser screen resolution checker
* An example of the site needs how much space
* Utilizing the Cut-off Look to Encourage Users To Scroll by Jared Spool
* Unfolding the Fold
* An examples of a liquid layout
* Elastic Design by Patrick Griffiths

7) Monitor Color

* Cross Platform Problems
----------------------------------------------------------------------------------------------------------------
Files and links for Week3:

* Web Design Library
* Top Ten Mistakes in Web Design
* Web Design Articles
* Favorite Website Awards and Articles

WK04
*LAYOUT DESIGN RULES
*TYPOGRAPHY

WK05
*REVIEWS OF THE ASSIGNMENT 1.
----------------------------------------------------------------------------------------------------------------
Homework for next week:

* Students will be asked to select a topic from the given pool and develop the idea as a web site.

WK06
*REVIEWS OF THE TOPICS.
*BRAIN STORMING
----------------------------------------------------------------------------------------------------------------
Files and links for Week6:

* Favorite Website Awards and Articles
* SEOmoz's Web 2.0 Awards
* What is Web 2.0? Ideas, technologies and implications for education
* WIRED Magazine / technology blog, articles

WK07
*HOW PREPARE A PROPOSAL FOR A WEB SITE.
----------------------------------------------------------------------------------------------------------------
The proposal should include:

* DEFINITION: Short definition, very brief. Just tell what you are doing.
* CLIENT'S EXPECTATIONS, END USER'S EXPECTATIONS: Goals and objectives of your site.
* TARGET AUDIENCE
* DESCRIPTION: Technical issues also mentioned here.
* CONTENT: List the key words, groups similar and create a content map which covers all topics (list of the content).
----------------------------------------------------------------------------------------------------------------
Homework for next week:

* Students are expected to come with a proposal in the following week.
* Create the visual idea of your site.
----------------------------------------------------------------------------------------------------------------
Useful links for Week 7:

* SXC: Stock photo web site
* Blue Vertigo: Web design resources links

WK08
*CRITICIZING PROPOSALS.
----------------------------------------------------------------------------------------------------------------
Homework for next week:

* Revising and correcting the proposals according to the comments.
* Create the first page design of your site.
----------------------------------------------------------------------------------------------------------------
Downloads for next lesson:

* Download Easy PHP
* Download Adobe Flash (firstly create an Adobe account if you have not)

WK09
*ASP, PHP, DATABASE.
Download the class example here.
----------------------------------------------------------------------------------------------------------------
Homework for next week:

* Finish your first page design of your site.
----------------------------------------------------------------------------------------------------------------
Useful links for Week9:

* What is PHP?
* What is PHP, and why do I need it?
* PHP tutorial
* w3 schools PHP tutorial

WK10
*HOLIDAY.

WK11
*TALKING ABOUT THE DESIGNS OF YOUR SITE.
*INTRODUCTION TO WEB 2.0.
----------------------------------------------------------------------------------------------------------------
Note:

* Finish your previous homework, website with content, working html in 2 weeks. Deadline is December 31th 2008.
----------------------------------------------------------------------------------------------------------------
Homework for next week:

* Come with examples of Web 2.0 sites, talk with design features.
* Come with ideas for your Web 2.0 project.
----------------------------------------------------------------------------------------------------------------
Useful links for Week9:

* Web design from scratch
* Web 2.0 sites directory
* Web 2.0 definition from wikipedia
* Web Crawler definition from wikipedia
* The machine us/ing us video
* What is Web 2.0 anyway?
* What is Web 2.0? by Tim O'Reilly
* Web 2.0 design styles and principles
* 2.0 culture
* Analysis of Web 2.0 design and layout trends
* 99 resources for Web 2.0 design
* 13 online generators for Web 2.0 design
* Web 2.0 design generators
* SEOmoz's Web 2.0 Awards