89 CHƯƠNG 2. KIẾN THỨC CƠ BẢN VỀ BỐ CỤC THIẾT KẾ WEB Thiết kế Web bao gồm rất nhiều các kỹ năng khác nhau từ khả năng lập trình thiết kế cho đến duy trì, bảo trì Website. Việc thiết kế Web bao gồm: thiết kế đồ họa Web; thiết kế giao diện; thiết kế trải nghiệm người dùng; tìm kiếm tối ưu hóa; ... các công việc này thường thì làm việc theo nhóm hoặc do các cá nhân riêng lẻ đảm nhiệm. Trong phạm vi chương trình môn học Thiết kế Web, sinh viên sẽ tìm hiểu và thực hành thiết kế đồ hoạ Web và thiết kế giao diện Web. Vì vậy chương này sẽ đề cập tới các vấn đề liên quan đến thiết kế giao diện Web bao gồm cấu trúc, bố cục trang Web và nội dung trang Web. Thiết kế Web cũng như thiết kế thời trang, phong cách thiết kế Web sẽ thay đổi theo từng thời kỳ khác nhau. Trong chương này, chúng ta sẽ tìm hiểu về xu hướng thiết kế Web trong những năm trở lại đây. Đồng thời, chúng ta cũng sẽ tìm hiểu các phong cách thiết kế Web phổ biến và cách sử dụng chữ - typography trong thiết kế. 2.1. Giới thiệu về Website Website là bộ tập hợp các trang web có liên quan với nhau. Bao gồm trang chủ và các trang con. Trang chủ: Trang chủ là trang được hiển thị khi ta truy cập vào một địa chỉ web. Mặc định trang chủ thường được đặt tên là index, default, home; đuôi file có thể là .html, .aspx, .php... tuỳ theo ngôn ngữ được sử dụng. Tuy vậy phổ biến nhất vẫn là index. Với cách đặt tên này, máy chủ web sẽ dễ dàng tìm thấy trang chủ mà không cần thêm bất kỳ cấu hình bổ sung nào để xác định trang chủ của website. Ví dụ: Trang chủ có tên là index.html. Khi ta gõ URL= http://www.myweb.com/ thì máy chủ web sẽ hiểu là hiển thị trang http://www.myweb.com/index.html. Trang con: là các trang web chứa thông tin sâu hơn về các nội dung được đưa ra trong trang chủ. Có 2 loại website: - Website tĩnh: Sử dụng các ngôn ngữ HTML, CSS, Javascript kết hợp âm thanh, hình ảnh, video để tạo ra trang web. - Website động: Sử dụng hệ thống cơ sở dữ liệu để cung cấp thông tin cho website. Cho phép người sử dụng có thể tương tác với dữ liệu trên trang web, cập nhật và quản lý thông tin trên các trang web dễ dàng thông qua các ngôn ngữ lập trình web. 2.1.1. Hypertext (Siêu văn bản) Là văn bản “có các nối kết”. Văn bản đặc biệt này chứa đựng địa chỉ của một máy tính khác như là một phần của WWW. Khi chúng ta nhấp chuột trên văn bản này, trình duyệt (cổng nối với Internet – a gateway to Internet) coi đó là một chỉ thị để lấy trang từ máy tính có địa chỉ tương ứng trong liên kết và hiển thị nó.
90 2.1.2. Link (Liên kết) Một liên kết là một kết nối từ một trang web này với một trang web khác sử dụng siêu văn bản (hypertext). Các trang web không nối kết với nhau kiểu vật lý mà chỉ chứa địa chỉ của trang cần hiển thị. 2.1.3. Địa chỉ IP (Internet Protocol) Mỗi máy tính trên Internet có một địa chỉ duy nhất của chính nó, dùng để phân biệt các máy tính trên Internet. Địa chỉ này được chứa trong bản thân siêu liên kết (hyperlink) của một tài liệu. Trình duyệt sử dụng địa chỉ IP để kết nối với máy chủ qua mạng. Địa chỉ IP là một số 32 bit (4byte) được chia thành 4 nhóm (dạng phân nhóm - dotted format), mỗi nhóm gồm 8 bits (gọi là một octet), các nhóm này phân cách nhau bởi dấu chấm. Tuy nhiên, để thuận tiện cho người sử dụng, các octet này được chuyển đổi sang giá trị thập phân, được miêu tả trong bảng sau: Bảng 2.1: Biểu diễn địa chỉ IP Dạng biểu diễn Giá trị Chuyển đổi từ biểu diễn thập phân Octect được biểu diễn ở dạng số thập phân 192.0.2.235 N/A Octet ở hệ cơ số 16 0xC0.0x00.0x02.0xEB Mỗi octet được chuyển đổi sang dạng cơ số 16 Octect ở hệ cơ số 8 0300.0000.0002.0353 Mỗi octet được chuyển đổi sang dạng cơ số 8 Hầu hết các định dạng trên được chấp nhận trong tất cả các trình duyệt. Tên miền (Domain name): Việc nhớ các địa chỉ IP là rất khó, do đó người ta tạo ra tên miền (domain), khi cần làm việc với các địa chỉ IP ta chỉ cần gõ vào tên miền tương ứng. Nhiệm vụ của tên miền là chuyển tên miền thành địa chỉ IP. Tên miền bao gồm nhiều thành phần cấu tạo nên cách nhau bởi dấu chấm (.). Ví dụ www.hou.edu.vn là tên miền máy chủ Web của trường Đại học Mở Hà Nội. Thành phần thứ nhất www là tên máy chủ World-Wide Web. Thành phần thứ hai"hou" là tên miền mức 3 (third domain name level) , thành phần thứ ba "edu" thường gọi là tên miền mức hai (second domain name level), thành phần cuối cùng "vn" là tên miền mức cao nhất (top level domain name). Như vậy tên miền mức con sẽ được viết bên trái tên miền mức cao hơn. Tên miền mức cao nhất (Top- level Domain "TLD") bao gồm các mã quốc gia của các nước tham gia Internet được quy định bằng hai chữ cái theo tiêu chuẩn ISO -3166 như Việt nam là VN, Anh quốc là UK v.v.. và một số lĩnh vực dùng chung (World Wide Generic Domains), trong đó có 5 lĩnh vực dùng chung phổ biến cho toàn cầu và 2 chỉ dùng ở Mỹ. Cụ thể: Các lĩnh vực dùng chung là: COM : Thương mại ( Commercial) EDU : Giáo dục ( education ) NET : Mạng lưới ( Network )
91 INT : Các tổ chức quốc tế ( International Organisations) ORG : Các tổ chức khác ( other orgnizations ) Một số lĩnh vực dùng chung khác: aero, .coop, .museum, .biz, .info, .name và .pro... Hai lĩnh vực dùng ở Mỹ: MIL : Quân sự ( Military ) GOV : Nhà nước ( Government Tên miền mức hai (Second Level): Đối với các quốc gia nói chung tên miền mức hai này do Tổ chức quản lý mạng của quốc gia đó định nghĩa. Thông thường các tổ chức này vẫn định nghĩa tương tự như 7 lĩnh vực dùng chung nêu trên. Tất cả tên miền được gắn liền với một hệ thống DNS (Domain Name Server), hệ thống này giúp phân giải tên miền thành địa chỉ IP. Nghĩa là khi bạn gõ tên miền, DNS sẽ tìm kiếm tên miền này trong bảng tham chiếu xem số IP tương ứng là gì. Nếu không tìm được, nó sẽ tìm ở một DNS khác. Mỗi địa chỉ IP là duy nhất trong cùng một cấp mạng, cùng một IP có thể có nhiều tên miền. Tuy nhiên tên miền là duy nhất và được cấp phát cho chủ thể nào đăng ký trước với nhà cung cấp dịch vụ Internet (ISP- Internet Service Provider). Tên miền cấp cao nhất là tên miền bạn đăng ký trực tiếp với các nhà cung cấp. Ví dụ: www.fithou.edu.vn, www.vnn.vn, ... Tên miền thứ cấp là tên miền phụ thuộc vào tên miền cấp cao nhất, muốn có được tên miền này phải liên hệ với người quản lý tên miền cấp cao nhất. Ví dụ: ctms.fithou.edu.vn, www.home.vnn.vn 2.1.4. Hyperlink (siêu liên kết) Siêu liên kết (Hyperlink) là những kết nối giữa các trang giúp bạn có thể đi tới và lui giữa các trang. Một hyperlink thường có thể được hiển thị dưới dạng text hay graphic. Khi ta click vào hyperlink, ta có thể di chuyển đến vị trí được kết nối. Các trang được kết nối có thể ở trong cùng một hay nhiều tài liệu (document) hoặc trong các tập tin (files) trên mạng hay bất kỳ đâu trên Internet. 2.1.5. Bookmark Trong trường hợp nội dung văn bản của trang web quá dài, ta có thể chia văn bản ra thành nhiều phần và đặt siêu liên kết đến từng phần trong văn bản. Kỹ thuật này được gọi là Bookmark. Một bookmark, cũng có thể xem như một mấu neo (anchor), là một vị trí hoặc một văn bản trên một trang được đánh dấu như là một đích đến cho một liên kết. Trong một URL (địa chỉ định vị tài nguyên thống nhất), bookmark được đánh dấu phía trước bằng dấu thăng (#). 2.1.6. Địa chỉ định vị tài nguyên thống nhất- URL (Uniform Resource Location) Địa chỉ dùng định vị tài nguyên thống nhất trên máy chủ. Về cơ bản, URL là con trỏ chỉ tới vị trí của một đối tượng tài nguyên như hình ảnh, tài liệu... URL là địa chỉ duy nhất có cấu trúc chia làm 3 phần:
92
: <địa chỉ máy> Ví dụ: http://www.fithou.edu.vn/index.html Khi gõ URL vào thanh địa chỉ, DNS sẽ tìm tên của tên miền, chuyển thành địa chỉ IP, và chuyển các yêu cầu của người dùng đến server tương ứng để xử lý. Khi server nhận được các yêu cầu trang web, server sẽ sử dụng hệ thống phân giải tên miền cục bộ để định tuyến (router) tới chính xác thư mục chứa tài liệu HTML trên server. Tên tập tin HTML được chỉ ra trong . Trong trường hợp ta gõ: http://www.fithou.edu.vn/, thì server sẽ tìm tập tin mặc định ở thư mục gốc chứa website. 2.1.7. Trình duyệt web(Web Browser) Trình duyệt web là một phần mềm ứng dụng để tích hợp các file HTML được đưa lên Web. Trình duyệt web sẽ giao tiếp với Web server thông qua mạng máy tính bằng cách sử dụng giao thức http (HyperText Transfer Protocol). Cụ thể quá trình giao tiếp với web server sẽ được diễn ra như sau : - Nối kết với web sever để yêu cầu tài liệu web hoặc dịch vụ (services) - Web server sẽ đáp ứng yêu cầu đó trả lại dữ liệu cần thiết dưới dạng trang. - Trình duyệt nhận trang - Đóng kết nối - Hiển thị trang được viết bằng HTML cho người dùng . Một số trình duyệt thông dụng là Internet Explorer, FireFox, Opera, Chrome, Safari... 2.1.8. Web Server (máy phục vụ web) Là máy tính mà trên đó cài đặt phần mềm phục vụ Web. Đôi khi người ta cũng gọi các phần mềm đó là Web Server. Tất cả các Web Server đều hiểu và chạy được các file *.htm và *.html, tuy nhiên mỗi Web Server lại phục vụ một số kiểu file chuyên biệt chẳng hạn như: IIS (Internet Information Services) của Microsoft dành cho *.asp, *.aspx...; Apache dành cho *.php...; Sun Java System Web Server của SUN dành cho *.jsp... 2.1.9. Client/Server Máy khách (Client): Máy tính yêu cầu dịch vụ nào đó (như yêu cầu một trang web) từ một máy tính khác được gọi là máy khách. Máy phục vụ -máy chủ (Server/Host): Máy phục vụ là một máy tính thực sự thực hiện các yêu cầu của các máy tính khác. Tên khác của nó đôi khi cũng được dùng là máy chủ (host). Máy chủ thường là máy tính mạnh với bộ nhớ lớn và ổ cứng chứa hàng ngàn các tài liệu. 2.1.10. Giao thức (Protocol) Giao thức là bộ quy tắc và quy định cách thức giao tiếp trên mạng máy tính. 
English