COAP:COAP-2100: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 25: | Line 25: | ||
{{:COAP-2100/week1}} | {{:COAP-2100/week1}} | ||
{{:COAP-2100/week2}} | |||
{{:COAP-2100/week3}} | |||
{{:COAP-2100/week4}} | |||
{{:COAP-2100/week5}} | |||
{{:COAP-2100/week6}} | |||
{{:COAP-2100/week7}} | |||
{{:COAP-2100/week8}} | |||
[[Category:Courses and workshops]] | [[Category:Courses and workshops]] | ||
Revision as of 19:38, 23 August 2009
<pageby nominor="false" comments="false"/>
This article or section is currently under construction
In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")
Introduction
This is a program for an introductory web technologies course. It is based on my COAP 2100 course at Webster University, Geneva. This is not the official syllabus nor the official program. See the (closed) Worldclassroom (Blackboard).
This course is a survey course that will focus on the core technologies students need to know in order to start designing professional Web pages. The course will cover basic web principles and act as an introduction to the technology and tools required in web design and coding, including XHTML, XML, CSS, JavaScript, HTTP, and others.
- Course level learning outcomes (roughly)
At the completion of this course this student will be able to:
- Design a web page
- Code and validate HTML, XHTML
- Evaluate and use web page styles
- Edit and code simple JavaScript programs
- Create and validate an XML file
- Access a web server, code, test and run a server-side program
- Learn Web protocols
- Determine whether he/she has a greater interest in Web design or Web programming
- Teaching Materials and reference books
- There will be no required textbook (the instructor will use on-line materials and handouts, including photocopies from selected reference book sections). See the weekly program...
- Optional Textbook: INTERNET & WORLD WIDE WEB, HOW TO PROGRAM, Fourth Edition, by Deitel, ISBN-13: 978-0131752429, Published by Prentice Hall Publishing
Program
Week 3
Topics Covered
- HTML
- Introduction to HTML5. How is it different from XHTML 1.x and HTML 4.x ?
- Valid HTML. Why is valid code important and what needs to be validated ?
- Styling with CSS
- Introduction to CSS
- CSS validation
- Webdesign
- Basic Webdesign principles
Software
We suggest using the following HTML Editors
- NoteTab light. A simple programming editor with little HTML support. (Windows(
- Kompozer for HTML4 (grab the latest development version !)
- BlueGriffon Wysiwyg editor for HTML5. (Win/Mac/Linux)
- TextWrangler (Mac)
Browser extensions (if installable):
- HTML Validator. You can get it directly from Source Forge
- Codeburner for Firefox (HTML and CSS reference)
- Fireshot (Screen capturing extension for Firefox)
- web-developer
The tidy program (optional: without Internet connection, you need a local validator that also works with NoteTab light)
- Go to HTML Tidy for Windows
- Download the EXE version. You will get a *.zip file called tidy.zip
- Extract the single tidy.exe to some directory, e.g. c:\bin\
HTML/CSS Teaching materials
- HTML5 (Short overview)
- Dive Into HTML5 (free online book about HTML5, not for absolute beginners)
- HTML and XHTML elements and attributes (lecture notes)
- HTML and XHTML validation and repair
- Online HTML reference manual (at sitepoint, but you are free to choose others ...)
- CSS tutorial
- Online CSS reference manual
- Alternatives
- See HTML links
Classroom activities
Monday
(1) Introduction to some major HTML5 tags Online documentation about HTML:
- We will use HTML and XHTML elements and attributes (lecture notes)
- We also will demonstrate the Codeburner Firefox extensions and the related Sitepoint web site.
- See HTML links (Manuals and short references) for other HTML documentation or search the web .....
(2) A introduction to W3C Quality Assurance Tool set. It includes several tools
- http://validator.w3.org/ (Markup Validation Service)
- You can enter a URL, upload file or directly copy/paste code
- Supported formats (Sept 2009): HTML, XHTML, SMIL, MathML
- http://validator.w3.org/checklink (W3C Links Checker)
- http://jigsaw.w3.org/css-validator/ (on line CSS validation service)
- URL validation: You can enter either an HTML/XHTML URL or just a CSS
- Alternatively you can upload a CSS file (and pick the CSS profile).
- Other tools, e.g. a Feed validator are available from the Quality page ...
(3) Using web browser development tools
- Use of HTML Validator. Once installed, you can View-Source (CTRL-U) and look at the errors.
(4) Using Tidy inside NoteTab light
- This may not work (since Tidy must be installed on your computer)
(5) Q/A Homework 2 (if needed)
- Pay attention to copyright (i.e. lock the web site or kill it if you reuse copyrighted materials)
(6) Start of Homework 3 / Objectives and requirements for a term project
- Discussion of the term project
(6) Using the tidy program (if time left)
- You can get various flavors from SourceForge. More precisely:
- Get the Windows binary version from http://www.paehl.com/open_source/?HTML_Tidy_for_Windows
- Unzip it somewhere on the harddisk (I stronly suggest the C: drive, we will discuss this with the Lab assistants, so wait)
- Then configure NoteTab light, i.e. hit CTRL-F7 and tell the editor where to find tidy.exe
- Alternatively (v.s. using a default repair configuration through NoteTab ), you also can install GuiTidy: http://www.paehl.de/tidy/ (scroll all the way down). It will give you more options. Advanced users will have to use the command line.
Wednesday
(1) Feedback for homework 1
- Good work
- Please hide problematic sites, e.g. those that advertise services that do not exist.
(2) CSS
We recall some CSS principles, in particular:
- Associating a styles and stylesheets with HTML
- Inline Styles
- Embedded Style Sheets
- Linking External Style Sheets
- CSS Validation ( http://jigsaw.w3.org/css-validator/ )
- CSS Selectors
- Text styling (e.g. fonts, size, aligns)
- HTML div and span tags
- Backgrounds
- CSS “boxes” , positioning elements and text flow
(3) Web design
Some introductory texts:
- 9 Essential Principles for Good Web Design
- The 5 second rule
- The Ten Most Violated Homepage Design Guidelines
- Top 10 Mistakes in Web Design (Jakob Nielsen's Alertbox)
- 10 Principles Of Effective Web Design
- Usability 101
Homework 3
Task: Create a little HTML page that spells out a proposition for the term project: creating a little website using either an online service (see homework 1/2) or your own HTML5 coding.
- Think about objectives and requirements for your term project
- Create an HTML5 page and write down a draft proposal
- Create an external CSS style sheet that is linked to the HTML page
Constraints:
- HTML must include at least 3 titles plus paragraphs and lists (of your choice)
- Define a global default CSS rule or a rule for the body element
- Define an extra rule for titles, paragraphs and list elements
- You should make a serious attempt to define a project (i.e. explicitly define some objectives and requirements)
Evaluation:
- I only will evaluate whether you comply with the constraints, e.g. technical and design quality of the CSS, validity of the HTML
- Details of the term project proposal will not be evaluated and it is not yet binding. However, I require that you you define certain key elements:
- Objectives: What is the purpose of the web site ?
- Audience: What is your main target audience ? Can others consult it/find it useful ?
- Functions: What kind of information / applications should the site provide
- Styling: Any ideas about its look and feel ?
- Other information: ???
Submission:
- Upload both the HTML and the CSS file to the World classroom before start of week 4 Wednesday lesson.
Week 8
Monday
Final exam (part I):
- Each student shortly presents her/his term project (5 min. total). No presentation materials are required, but make it a good & structured presentation! You can use presentation materials if you want to.
- Minimal contents of the presentation: Present shortly its purpose, audience, requirements. Then present the site or web page and discuss interesting points (e.g. style, difficulties).
- After each presentation, there will be some discussion.
Wednesday
Final exam (part II):
(1) Screencasts will be presented and discussed for each term project.
(2) We will discuss the technology used for each web site, i.e. you must be able to tell the class and the instructor how you did it.