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 Contents The plan for site Development Advanced CSS 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 Information Architecture Phase Design Phase Development The Plan for Site Development Phase 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 Information Architecture Project • Discovery - High-level discovery meeting between the web company and the client Define functional requirements You can think of Phase 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 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 Mô hình logic Mô hình ứng dụng máy đơn cục Mô hình ứng dụng máy đơn mạng cục Mô hình ứng dụng mạng Internet Mô hình ứng dụng mạng Internet • Tăng cường phạm vi sử dụng • Giải toán giao tiếp • Vấn đề tốc độ: – Xét thời gian khối lượng thông tin • Vấn để bảo mật Mô hình ứng dụng Web Mô hình Logic Các mô hình triển khai Xử lý hệ khách • Ưu điểm – Giao diện đẹp – Khả tương tác cao – Giảm tải cho Server • Khuyết điểm – Khó phát triển – Đòi hỏi phần mềm phụ hỗ trợ – Có thể không tương thích trình duyệt Xử lý hệ phục vụ • Ưu điểm – Phát triển đơn giản – Dễ triển khai bảo trì – Chia liệu • Khuyết điểm – Giao diện người dùng thô sơ – Tính tương tác Xử lý hệ khách Ngôn ngữ Script • Ngôn ngữ thông dịch với trình duyệt web hệ thông dịch • Giúp trang web có tính tương tác – – – – Cho phép đưa hiệu ứng động vào trang HTML Tương tác với kiện trang HTML Thay đổi nội dung đối tượng HTML … Xử lý hệ phục vụ Q&A THE END [...]... use lower case file names and no spaces in web files in order to ensure that the files work properly on all web servers HTML vs CSS In modern web design, HTML is used ONLY for the framework of the site Cascading Style Sheets (CSS) is used for many of the attributes we have discussed in this lesson (font characteristics, layout, and more) Parts of a Website – “Website Anatomy” The URL The Root Directory... where we start working on real web versions of the site using HTML markup and Adobe Dreamweaver Adobe Dreamweaver Note Quick Note About File Names Spaces will be interpreted by the web server as “%20”: My First Page .html becomes My%20First%20Page .html On certain servers (i.e older Linux Servers) capital letters can be changed to lower case: MyFirstPage .html becomes myfirstpage .html Generally use lower case...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... 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 Color schemes... 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... “Pictures” of the final design (can be sketches or finished products) Hand-drawn mockup sketch Hand sketched website mockups vs digital mockups Usually the digital mockup is made based on the quick hand-sketch Use the mockup to present to clients or buyers, or just to plan for your own site! “Wireframe” type website mockup Printed Digital Mockup for investor http://www.spaceotechnologies.com/digital-mock-up/