Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 3 - ThS. Lương Trần Hy Hiến

<span class='text_page_counter'>(1)</span><div class='page_container' data-page=1>

1

<b>HTML + CSS plus</b>

</div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=2>

<b>2</b>

<b>Contents</b>

</div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=3>

<b>The Plan for Site Development</b>

<b>Course Project:</b>

<b>The “About Me” site</b>

</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=4>

<b>The Plan for Site Development</b>

<b>Phase 1. Information Architecture</b>

<b>Phase 2. Design</b>

<b>Phase 3. Development</b>

</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=5>

<b>The Plan for Site Development</b>

<b>Phase 1. Information Architecture Project </b>

<b>• Discovery - High-level discovery meeting </b>
between the web company and the client.
Define functional requirements.

<b>• Site Map Generation - A useable sitemap is </b>
created that contains a page by page index

of the content information structure in

flow-chart form.

</div>
<span class='text_page_counter'>(6)</span><div class='page_container' data-page=6>

<b>The Plan for Site Development</b>

<b>Phase 2: Design</b>

<b>• Creative Discovery - Discuss the site </b>

audience, user needs and brand guidelines.

<b>Quality Assurance - review and progress </b>

report.

<b>• Wireframing - List all design elements that </b>
• are to be displayed on the home page.

<b>• Generate Mockups – “Pictures” of the final </b>
design (can be sketches or finished products).
<b>• Production ready designs - Production ready </b>

</div>
<span class='text_page_counter'>(7)</span><div class='page_container' data-page=7>

<b>The Plan for Site Development</b>

<b>Phase 3: Development </b>

<b>• Technical Discovery - validate the </b>
technology requirements.

<b>• Technical Collaboration / Client Review </b>

<b>Session - Client review and progress </b>

report.

<b>• SEO Plan - the URL's, page titles, meta </b>
data, etc.

</div>
<span class='text_page_counter'>(8)</span><div class='page_container' data-page=8>

<b>The Plan for Site Development</b>

<b>Phase 1. Information Architecture Project </b>

<b>• Discovery - High-level discovery meeting between </b>
the web company and the client. Define functional
requirements.

<b>You can think of Phase 1 as the </b>
<b>“Business Plan” for the website.</b>

<b>Let’s work in groups of two to fill out </b>
<b>the:</b>

</div>
<span class='text_page_counter'>(9)</span><div class='page_container' data-page=9>

<b>The Plan for Site Development</b>

<b>Phase 1. Information Architecture Project </b>

<b>• Site Map Generation - A useable sitemap is </b>

</div>
<span class='text_page_counter'>(10)</span><div class='page_container' data-page=10>

<b>Site Map examples</b>

</div>
<span class='text_page_counter'>(11)</span><div class='page_container' data-page=11>

<b>Site Map examples</b>

</div>
<span class='text_page_counter'>(12)</span><div class='page_container' data-page=12>

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

</div>
<span class='text_page_counter'>(13)</span><div class='page_container' data-page=13>

<b>Site Map examples</b>

</div>
<span class='text_page_counter'>(14)</span><div class='page_container' data-page=14>

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

</div>
<span class='text_page_counter'>(15)</span><div class='page_container' data-page=15>

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

</div>
<span class='text_page_counter'>(16)</span><div class='page_container' data-page=16>

<b>Creating a digital version of your site map in Illustrator</b>

<b>Window Drop-down: </b>

opens all menus checked

<b>Stroke (outline) menu</b>

<b>Swatches (color) menu</b>

<b>Type (fonts) menu</b>

Type tool (“LETTER T”)

Select object too (black arrow)
Draw shape tool

</div>
<span class='text_page_counter'>(17)</span><div class='page_container' data-page=17>

<b>The Plan for Site Development</b>

<b>Phase 1. Information Architecture Project </b>

</div>
<span class='text_page_counter'>(18)</span><div class='page_container' data-page=18>

<b>Gather and organize the Resources for your site</b>

<b>List of Links appearing on each page</b>

<b>List graphics for each page</b>

•Logos

•Bullets and icons

<i>(can use place-holders)</i>

<b>List of media for each page</b>

<b>• Animation</b>
<b>• Sound</b>

</div>
<span class='text_page_counter'>(19)</span><div class='page_container' data-page=19>

<b>The Plan for Site Development</b>

<b>Phase 2: Design</b>

<b>• Creative Discovery - Discuss the site audience, user </b>
needs and brand guidelines.

<b>• Quality Assurance - review and progress report. </b>

<b>Branding the site:</b>

<b>• Logo creation and optimization</b>

<b>• Color scheme choices</b>

</div>
<span class='text_page_counter'>(20)</span><div class='page_container' data-page=20>

<b>Logo designs</b>

• What are others in your industry doing?

• Can you use symbols?

</div>

<!--links-->