Bài giảng phát triển ứng dụng web – web programming chương 3 HTML + CSS plus

HTML + CSS plus

Luong Tran Hy Hien, FIT of HCMUP, VietNam

1


Contents
1. The plan for site Development
2. Advanced CSS

2


The Plan for Site Development

Course Project:

The “About Me” site

Throughout this course we will be building a personal site with the theme
“about me” as practice for future web projects. Each class we will learn
new techniques for improving and adding features to this site.


The Plan for Site Development

Three phases of building a website
Phase 1. Information Architecture

Phase 2. Design

Phase 3. Development


The Plan for Site Development

Phase 1. Information Architecture Project
• Discovery - High-level discovery meeting
between the web company and the client.
Define functional requirements.
• Site Map Generation - A useable sitemap is
created that contains a page by page index
of the content information structure in
flow-chart form.
• Aggregation - Gather together as much of
the core content as possible. This includes
media and text.


The Plan for Site Development

Phase 2: Design
• Creative Discovery - Discuss the site
audience, user needs and brand guidelines.
Quality Assurance - review and progress
report.
• Wireframing - List all design elements that
• are to be displayed on the home page.
• Generate Mockups – “Pictures” of the final
design (can be sketches or finished products).

• Production ready designs - Production ready
media is created and development beings.


The Plan for Site Development

Phase 3: Development
• Technical Discovery - validate the
technology requirements.
• Technical Collaboration / Client Review
Session - Client review and progress
report.
• SEO Plan - the URL's, page titles, meta
data, etc.
• Template Development -Based on the
production ready designs, we are ready
to develop html templates, styles, and
programming.


The Plan for Site Development

Phase 1. Information Architecture Project
• Discovery - High-level discovery meeting between
the web company and the client. Define functional
requirements.
You can think of Phase 1 as the
“Business Plan” for the website.
Let’s work in groups of two to fill out
the:

Information Architecture Project Plan


The Plan for Site Development

Phase 1. Information Architecture Project
• Site Map Generation - A useable sitemap is
created that contains a page by page index of the
content information structure in flow-chart form.


Site Map examples

Simple flow-chart style site map


Site Map examples

Traditional Flow-chart form


Cấu trúc website – phân cấp

Company Logo


Site Map examples

Contemporary Flow-chart form

Cấu trúc website – nối tiếp

Company Logo


Cấu trúc website – mạng nhện

Company Logo


Creating a digital version of your site map in Illustrator

Select object too (black arrow)
Type tool (“LETTER T”)
Draw shape tool
Draw line tool

Window Drop-down:
opens all menus checked

Stroke (outline) menu

Swatches (color) menu

Type (fonts) menu


The Plan for Site Development

Phase 1. Information Architecture Project
• Aggregation - Gather together as much of the core
content as possible. This includes media and text.


Gather and organize the Resources for your site
List of Links appearing on each page

List graphics for each page
•Logos
•Bullets and icons
(can use place-holders)

List of media for each page
• Animation
• Sound
• video


The Plan for Site Development

Phase 2: Design
• Creative Discovery - Discuss the site audience, user
needs and brand guidelines.
• Quality Assurance - review and progress report.

Branding the site:
• Logo creation and optimization
• Color scheme choices

• Determine who the expected users are
(Customers? Employers? Readers? Friends?)


Logo designs
• What are others in your industry doing?
• Can you use symbols?
Google images is a great tool to help you answer these
questions.


Color schemes
• What looks good?
• What are other companies doing
note: red/blue are common in IT, blue/purple/light blue are common in
healthcare, orange/brown is common in photography)

Note how color schemes for logos and website vary by industry.
Why do you think that might be?
How do certain colors make you feel?


Color schemes
Color associations and customer psychology

When colors are
applied in
unexpected ways,
they can change a
logos meaning!

Would you buy a
brown-green food?


Color schemes
How does changing the website color scheme affect the page?


Color schemes
Pick 3-5 colors for your page color scheme.
Define them in terms of web color.
Web colors are in hexadecimal, or 6-digit colors.


Color schemes
hexadecimal, or 6-digit colors, used in HTML and CSS code

You can click on the
foreground color in Adobe
Photoshop or Illustrator to see
the foreground color’s
hexadecimal number.