Tài liệu Phong cách trình bày trang web

TS. HÓ S ĩ M Ậ U TH Ú C & N H Ó M T Á C G IẢ E L IC O M TRÌNH BÀY TRANG WEB NHÀ XUẤT BẢN THỐNG KÊ 6X7 6Ü ' 3 66 - 552 - 2000 1X2000 LỜI GIỚI THIỆU Đ i đâu để tìm kiếm các thiết bị máy tính, lưu trừ trực tuyến, các đại lý bán h à n g ,...? Đó là n hc..-q câu hỏi chung thường được đặt ra bởi người dùng Internet, và trách nhiệm của người thiết kế v ỉc b ia sao giải đảp những câu hỏi như vậy. Đánh giá m>c độ thành công trong thiết k ế Website thường phải dựa trên bốn tiêu chuẩn: dẻ sử dụng, nội dung pi.ong phú, hữu dụng và cuối cùng là yếu tố hấp dẫn. V ớ i mục đích hỏ trợ người thiết k ế tạo được một vVebsite hoàn hảo, nhóm tác giả Elicom , gồm những chuyên gia tin học đầy tâm huyết, nhlắu kinh nqr.ỉộm trong công tác xuất bản, đã dày công nghiên cứu và thu thập tài liệu để cho ra đời cuốn sách P h o n g c á c h t r ìn h b à y t r a n g W eb ". V ớ i cách trình bày ngắn gọn, dễ hiểu, có ví dụ và hình ảnh m inh họa kèm theo, chắc hẳn cuốn sách sẻ trở thành cuốn cẩm nang ihiết k ế Web hữu ỉch cho bất cứ ai quan tâm tới thiết kế W ebsite. B ớ i lẻ ờ đây bạn sẻ được hướng dẫn cụ thể từ lập k ế hoạch, tổ chức thiết k ế site cho đến m ố i ch i tiết trong từng thiết k ế trang đơn lẻ ... Cuốn sách ra đời chắc chắn còn có những thiếu sot, chúng tôi rất mong nhận được sự góp ý ch ân thành của bạn đọc gần x a đề những cuốn sách tiếp theo được hoàn chỉnh hơn. NHÓM TÁC GIẢ ELICOM MỤC LỤC C hư ơ ng 1 Q U Y TRĨNH C O BẢN C Ủ A Dự Á N X Â Y DỰ N G TRA N G WEB Phần chuẩn b ị.......................................................................................................................................................................... 9 Mục tiêu cúa bạn là g ì? ...................................................................................................................................... 9 H iểu rỏ độc giả của W eb site...................................................................................................................... 10 Nhóm phồ bình thiết k ế ................................................................................................................................ 11 T ó m tắt nội d u n g ............................................................................................................................................... 11 Q uy trinh phát triển W e b site ..................................................................................................................................... 11 1. L ậ p k ế hoạch và định nghĩa s it e ...................................................................................................... 12 2. Cấu trúc thông t in ...................................................................................................................................... 14 3 . T h iế t k ế s it e ......................................................................................................................................................14 4 . C ấu trúc s it e ......................................................................................................................................................15 5 . Quảng cáo và tiếp thị sản phẩm trên W ebsite......................................................................... 15 6 . T h e o dõi, kiểm tra và bảo t r ì ................................................................................................................ 16 C hư ơ ng 2 THIẾT K Ế G IA O DIỆN Th iết k ế Website và tàí liệu thõng thư ờng ..........................................................................................18 T ạ o trang W eb độc lậ p ....................................................................................................................................18 T h iế t k ế giao diện cơ b ả n ............................................................................................................................................. 20 T h iế t k ế tập trung vào người sử d ụ n g ...................................................................................................20 Đ iều hướng.............................................................................................................................................................................. 24 C hư ơ ng 3 THIẾT K É SITE T ổ ch ứ t thông tin ..................................................................................................................................... ........................ 28 "Phân đoạn" thông t in ............................................ ................................. ...................................................29 T ó m tắ t...................................................................................................................................................................... 31 C ấ u trúc s ite ...........................................................................................................................................................................31 Nhữtig cấu trúc thông tin c ơ b ả n ..............................................................................................................32 Để tà i thiết k ế s ite ............................................................................................................................................................. 34 Ph ần tử s it e ................................................................................... ....................................................................................... 38 T ra n g c h ủ ........................................................... .................................................................................................... 38 Menu và các site c o n .................................................................................................................. .....................45 Danh sách tài nguyên, trang "những site liên quan k h á c ".......................................................45 Bảng mục lục, danh m ục site và sơ đồ s it e ....................................................................................... 46 Trang "W hat is N e w "........................................................................................................................................46 C á c tính năng tìm k iế m .................................................................................................................................. 47 Thông tin liên lạc và phản hồicủa người sử d ụ n g ..........................................................................47 T h ư mục và phụ lụ c............................................................................................................................................ 4 8 Trang F A Q .......................................................................................................................................................... 48 Nhửng trang lỗi của máy chủ tùy biếr.................................................................................................... 4 8 Internet - thiết k ế In tra n e t............................................................................................................................................ 4 9 T iê u chuẩn thiết k ế ............................................................................................................................................ 5 0 C hư ơ ng 4 THIẾT K Ế TRAN G Hệ thống phân cấp trực q u a n .................................................................................................................................... 51 Tính nhất q u á n .....................................................................................................................................................................53 Kích thước tra n g ..................................................................................................................................................................54 Vùng an toàn đồ h ọ a .........................................................................................................................................5 4 Độ dài tra n g ........................................................................................................................................................................... 55 Nói dung và độ dài trang .............................................................................................................................. 57 Lưới thiết k ế trang W e b ...............................................................................................................................................58 Đầu trang và chân tra n g ............................................................................................................................................. 61 Đ ắu trang: Đồng nhất s it c .......................................................................................................................... 62 C h â n trang: Nguồn g ố c .................................................................................................................................. 6 2 B ố trí trang ...............................................................................................................................................................................6 3 Bảng biểu bố trí trang ........................................................................................................................................63 Thuộc tính ô và kích thước b àn g ............................................................................................................... 66 Bảng biếu cao c ấ p ...............................................................................................................................................................66 C a n h c h in h .............................................................................................................................................................. 6 6 Là m việc với ả n h ................................................................................................................................................... 67 Khung .......................................................................................................................................................................................... 68 T ín h linh h o ạt..........................................................................................................................................................69 C hức n ă n g ................................................................................................................................................................ 69 H oạt động tương t á c ......................................................................................................................................... 70 Mỹ h ọ c ........................................................................................................................................................................ 70 Những điểu cản lưu ý trong thiết k ế .............................................................. ........................................................ 70 C ác vấn để về hệ điều h à n h ............................................................................. .......................................................... 71 T rìn h d u y ệ t............................................................................................................................................................... 71 Những thay đổi khoảng chênh đồ h ọ a ....................................................................................................72 C hư ơ ng 5 K Ỹ THUẬT TẠO C H Ữ Đặc điểm của con chữ trên trang W e b ................................................................................................................. 73 C ấu trúc nội dung và logic trựcq u a n ....................................................................................................... 74 B ản mẳu xế p tầng................................................................................................................................................ 74 B â y giờ chúng ta cần làm g ì ......................................................................................................................... 75 T ín h dễ đ ọ c ............................................................................................................................................................................ 7 5 C a n h lể ....................................................................................................................................................................... 76 Đ ồ dài dòng vãn b à n .......................................................................................................................................7 S C h ữ viết hoa và chữ viết thường................................................................................. ..............................78 Khoảng trắ n g ..........................................................................................................................................................79 Kiểu c h ữ ..................................................................................................................................................................... 8 0 Là m nổi b ật...................................................................................................... ........................................................82 T ín h nhất q u á n ....................................................................................................................................................................8 4 Vấn đề hệ điều h à n h ...................................................................................................................................................... 84 K ích cờ phông chữ tương đối....................................................................................................................... 84 K iể u phông c h ữ .....................................................................................................................................................8 5 Cascading Style S h e e t .....................................................................................................................................................8 5 L ợ i thế của Cascading Style S h e e t .......................................................................................................... 9 ể B ản mẫu hoạt động như thế n à o ..............................................................................................................S ê Đ ôi tượng nào nên sử dụng css và khi nào nên sử dụng........................................................... 8 7 Đ ồ họa kiểu chữ ................................................................................................................................................................... 8 7 K iể u khử răng c ư a ................................................................................................................................................87 C hư ơ ng 6 PH O N G C Ả C H HIỆU CH ỈN H Phong cách viết đối với tài liệu trực tu y ế n .................................................................................................. 90 Phong cách văn xuôi cho W eb.................................................................................................................... 91 Tiéu để và tiốu để co n ...................................................................................................................................................... 9 2 Phong cách văn b ả n ...................................................................................................................................... . . 9 2 T iê u đề tra n g ...........................................................................................................................................................9 2 Định dạng vần bản cho tài liệu W e b ..................................................................................................................... 9 2 Lien k ế t ..................................................................................................................................................................................... 9 3 D uy trì ngừ c ả n h ...................................................................................................................................................9 3 B ố trí liên k ế t ......................................................................................................................................................9 4 C hư ơ ng 7 Đ Ó H Ọ A WEB Đặc điểm đổ họa W e b .................................................................................................................................................... 9 5 H iển thị m à u ....................................................................................................................... ...................................9 5 Màu ”an toàn trinh d u yệ t"............................................................................................................................. 9 8 H òa s ắ c ...................................................................................................................................................................... 9 9 Độ phân giải m àn h ìn h ............................................................................................................................... 101 G a m m a ................................................................................................................................................................... 102 Đ ó họa dai thông m ạ n g ............................................ .............................................................................. 103 Đ ịnh dạng file đồ h ọ a ....................... ........................................................................................................................... 103 File G I F ..................................................................................................................................................................... 103 ĐỒ họa J P E G ...................................................................................................................................................... 107 Đ ồ họa P N G .....................................................................................................................................................109 C h iến lược tạo ả n h ........................................................................................................................................110 T ó m tắt các định dạng file ......................................................................................................................... 112 Ả n h trên m àn h ìn h ...................................................................................................................................................... 113 Màn hình và ảnh màu in r a .................................................................................................................... 113 Ả n h hoặc minh họa phứt tạ p ............................................................................................................... 114 Biểu đồ cho m àn hình máy tín h .......................................................................................................... 115 H T M L và đồ họa........................................................................................................................................................... 117 S ơ đồ ả n h ........................................................................................................................................................... 119 C hương 8 Đ A PHƯ O N G TIỆN ư ng dụng đa phương t iệ n ...................................................................................................................................... 122 Thiết k ế và phần tử đa phương tiệ n .................................................................................................................124 Chiến lược đa phương tiện W eb .........................................................................................................................125 Â m thanh.............................................................................................................................................................125 C hiếu s lid e ..........................................................................................................................................................125 V id eo ...................................................................................................................................................................... 125 Hoạt c ả n h ........................................................................................................................................................... 127 X ử lý đa phương t iệ n ................................................................................................................................................. 127 X ử lý âm th a n h ................................................................................................................................................127 X ử lý v id e o ......................................................................................................................................................... 128 Công nghệ n é n ..................................................................................................................................................................128 Phân phối đa phương tiệ n .........................................................................................................................................130 Truyền su ố t............................................................................................................................................... . 130 T ả i xuố ng ................................................................................................................................................................ 131 Khuyến n g h ị........................................................................................................................................................................ 132 Codec v id e o ........................................................................................................................................................................ 132 S o re n s o n ................................................................................................................................................................ 132 C in e p a k ....................................................................................................................................................................132 J P E G ..........................................................................................................................................................................133 M P E G ........................................................................................................................................................................ 133 B í quyết của đa phương t iệ n .................................................................................................................................... 134 Â m thanh............................................................................................................................................ ...................134 C hiếu s lid e .............................................................................................................................................................134 V id eo ..........................................................................................................................................................................134 Chương 1 QUY TRÌNH C ơ BẢN CỦA Dự ÁN XÂY DỰNG TRANG WEB K h i xâ y dựng bất kỳ W ebsite nào, bước đầu tiên là xác định rỏ mục đích của mình. Không có một mục đích và nhiệm vụ rỏ ràng, các dự định sẽ khó có thề đạt được kết quả như mong muốn. Lậ p kế hoạch cẩn thận kết hợp với việc để ra mục tiêu rõ ràng là chìa khoá để xâ y dựng W ebsite thành công, đặc biệt khi bạn đang tham gia một nhỏm thiết kế. PHẨN CHUẨN BỊ Nhìn chung, W ebsite được xâ y dựng bởi một nhóm gồm các chuyên gia phụ trách vể nội dung, chuyên gia kỹ thuật, chuyên gia lập trình, nhà sản xuất hoặc một ủy ban chịu trách nhiệm xem xét và quyết định sự ra đời của W ebsite. Dưới đây là một số câu hỏi dành cho những người bắt đầu triển khai x â y dựng một Website phức tạp. • T ổ ch út của bạn phải thụt hiện những nhiệm vụ gì? • X â y dựng một W ebsite hỗ trợ những nhiệm vụ này như th ế nào? • Mục tiêu trước mắt của W ebsite là gì? • Mục tiốu lâu dài của W ebsite là gì? • NhCfrig k ế hoạch liên quan tới Website bạn sẻ sử dụng để đại đuợc những mục tiẻu để ra? • Bằng cách nào có thể kiểm nghiệm được sự thành công của Website? Đ ây là những vấn đề lớn, những vấn để mang tính khái quát thường bị bỏ qua khi triển khai “công việc thực sự” trong thiết k ế và tạo dựng Website. T u y nhiốn, nếu không đủ khả năng trả lời một cách chắc chắn những câu hỏi này, không có gì đảm bảo rằng bạn sẽ thu được kết quả khả quan trong thiết k ế cũng như việc ch o ra đời một Website. M Ụ C T IÊ U C Ủ A BẠN L À G Ì? T rìn h bày ngắn gọn» x á c định rỏ mục tiéu sẽ là nổn móng cho quá trình thiết k ế một W ebsite. Nội dung trình bày bao gồm những k ế hoạch cụ thể liên quan tới W ebsite: Website được thiết kế, xâ y dựng và kiểm nghiệm trong bao lâu? K h ố i lượng công việc cụ thể và nhữĩig tièu chuẩn chất lượng nào được dùng để đánh giá sự thành công? Quá trình xây dựng Website là một quá trình lâu dài, chứ không phải là những dự định mang tính chất một sớm một chiểu với những nội dung đơn điệu. V ấ n đé quản lý thu thập và xuất bản cùng với vấn để bảo trì kỹ thuật phải nằm trong phạm v i ngân sách và k ế hoạch đầu tư Website. Nếu không có những nhìn nhận sâu x a như vậy thì chắc chắn dự án sẻ không tồn tại được lâu dài. 9 PHONG CÁCH TRÌNH BÀY TRANG WEB H IỂ U RỎ ĐỘC G IÁ C Ủ A W E B S IT E Bước tiếp theo là phải xá c định được những độc giả tương lai của W ebsite. Đ iểu n ày giúp ta xây dựng cấu trúc của Website sao cho có thể đáp ứhg được nhu cầu và sự mong đợi của độc giả. T ầm hiểu bièt, trình độ kiên thức, mối quan tâm và nhu cầu rất khác nhau đối với m ỏi tầng lớp độc giả, từ những người nhập môn cần có cấu trúc mở đầu rõ ràng, tỉ m ì đến các chuyên gia. những người có thể bực tức ngay với những gì dường như làm chậm quá trình truy cập thông tin V í dụ, nếu mục tiêu đặt ra cho Website là phân phối thông tin cộng tác nội bộ, tài liệu và hồ sơ cá nhân, hoặc những thông tin khác trong xuất bản phẩm độc giả sẽ là những người thường xuyẻn viếng thăm Website và những người truy cập chỉ vì tò mò. Web su rfers Trang chủ dành cho trình duyệt (browser) nên có cấu trúc tương tự như bìa tạp chí. Mục đích nhằm thu hút trình duyệt nhờ kết hợp hoàn hảo giữa đồ họa với cách trình bày rỏ ràng vé nội dung. T ấ t cả các kết nối trẻn trang chủ phải hướng về phía trong, vé phía các trang bôn trong Website. Nên đưa ra trình bày ngắn gọn về những lĩnh vực có thể thu hút được độc giả trong Website. Những người nhập m ôn uà những người không s ử d ụ n g thường xu yên Đ ộc giả loại này mong đợi một cấu trúc rõ ràng và dễ truy cập để có thể xem xét một cách tổng quát nhừng minh họa cho việc sắp xếp thông tin trên Web site. Những người chưa có kinh nghiệm thường thấy ngản ngại trước những văn bản hay menu phức tạp. H ọ cũng có thể thăm dò sâu bổn trong Website nếu như trang chủ kém hấp dẳn và cách trình bày không sáng sủa. H iếm khi người sử dụng có thể thỏa mã n nhờ việc xem xét các yêu tố có tác dụng gợi nhớ vị trí lưu trữ thông tin cần thiết tren Website như các sơ đồ phân cấp, thiết kế đồ họa, hay biểu tượng. Một bản chú giải VC thuật ngữ kỹ thuật, chữ viết tắt và một bản trả lời câu hỏi thường gặp sẽ giúp ích cho những người mới sử dụng. Nhóm độc giả này luôn là mối quan tâm của các nhà thiết kế , nhưng số lượng đối tượng này ngày càng giảm do W eb đã và đang trờ thành một công cụ ảnh hưởng lớn tới quá trình giao dịch thương mại. Chuyên gia uà nhỉTng ngưòi sử dụng thường xưựên Đ ộc giả loại này mong muốn thu được thông tin nhanh chóng và chính x á c nhất. C á c chuyên gia nhìn chung không có đủ kiên nhản trước các menu đồ họa có mật độ thông tin thấp (Low-density graphic menu), mỗi lần ch ỉ đưa ra rất ít lựa chọn. Những người có khả năng thì khao khát tách rời và nạp nhanh được các m enu văn bản (Text menu). Đồ họa ch ỉ làm cho công việc của họ thêm rắc rối. Nói chung các chuyên gia và những người có kỹ năng sử dụng luôn có sẵn ý định trong đầu và họ sẽ đánh giá cao nhửng menu văn bản chi tiết, phác họa cấu trúc site, chỉ mục dễ hiểu, và một thiết k ế có khả năng cung cấ p các chức nãng cho phép tìm kiếm nhanh chóng. Phần lớn những người sử dụng hiên nay nẳm trong nhóm này. T h ậm chí ngay cả khi công ty ch ỉ sử dụng Website để trao đổi thông tin nội bộ thì vần sẽ có rất nhiều người bên ngoài trờ thành độc giả cực kỳ quen thuộc. Người s ứ dụ ng qu ốc t ế H ã y nhớ rằng ta đang tiến hành xâ y dựng một W orld W ide Web. C ó nghĩa là độc giả của Website có thể ờ bất cứ đâu, ở Australia hay ở B a L a n . Đ ể có được số độc giả nước ngoài lớn nhất, bạn cần cung cấp cho họ những bản dịch, ít nhất là các trang m enu mấu chốt, ơ trang mờ đầu và trang trình bày nội dung, nẻn tránh sử dụng thuật ngữ chuyên ngành quá đặc biệt hoặc nhửng chữ viết tắt tối nghĩa. Cũng không nên cho rằng tất cả các độc giả đéu sẽ tuân theo quy ước đặt ngày tháng của bạn. V í dụ, không được viết tắt ngày tháng trên Website. 10 Chương 1: Quy trin h cơ bản của d ự án xảy dựng tra n g WEB Nếu như viết tắt “ 3 / 4 / 9 9 ” thì độc giả à M ỹ sỗ hiểu là “ tháng 3 ngày 4 năm 1 9 9 9 ” nhưng độc giả ờ nhiếu nơi khác sẽ hiểu là “ ngày 3 tháng 4 năm 1 9 9 9 ” . NHÓM P H Ê B ÌN H T H IÊ T K Ế Mỏi thành viên trong nhóm phát triển Website có những kỹ năng, mục tiẻu và những sở thicl. khác nhau đối với mỏi dự án. K h i cả nhóm đã hoàn toàn thống nhất vể nhiệm vụ và mục tiêu của dự án, thì cũng phải nhất trí với nhau vể :oàn bộ các quá trinh cẳn thực hiện để tạo lập trang Website. Mục tiêu trong giai đoạn này là phải xác định rõ mô hinh thành công tiềm nầng cùa các Website khác và bắt đầu xem xét bài toán thiết k ế trẽn cơ sờ các quan điểm của người sử dụng. Đáng tiếc là đội ngũ sản xuất rất ít khi có các thành viên đóng vai trò làm người xem xét và phẽ bình. Do đó khó khăn thường xuyên xả y ra với các thành viên chưa có kinh nghiêm trong thiết k ế khi họ phải m ô tả các sở thích riêng của mình trong quá trình tiến hành công việc, ngoại trừ lúc xem xét các W ebsite tạo sẵn. Th àn h lập nhóm phẽ bình là cách tuyệt vời để tìm hiểu các yếu tố mang lại sự thành công ch o W ebsite, vì mỗi người trong nhóm có những quan điềm khác nhau khi xem xét moi W ebsite. Mổí thành viên của nhóm phê bình sỗ chọn lựa một vãi mầu thiết kế, đổng thời kèm theo lời bình các yếu tố mà họ ch o là thành công của mồi mảu thiết kế. Bằng cách này, mỗi thành viên có thể hiểu rõ hơn về cảm giác thiết k ế của những người xung quanh từ đó đi đến nhất trí trên c ơ sờ những điều mà nhóm đã trình bày và bàn bạc. TÓM T Ắ T N Ộ I D U N G Khi đã có ý tưởng về nội dung và cấu trúc tổng thể của Website, bạn có thể tiến hành đánh giá nội dung đổ hoàn thành k ế hoạch. V iệc xâ y dựng bản tóm tắt hoặc c ơ sờ dữ liệu (C S D L) của nội dung hiện tại và cần thiết phải có cái nhìn nghiêm khắc vé tài nguyên sẵn cỏ và phải nêu rõ Luc nhu cáu cần thiết. Một khi biết đang bị thiêu hụt ớ đâu thì ta có thể tập trung ngay nhửng nguồn tài nguyên sẳn có để bù đắp mà không mất nhiều thời gian. H iểu rỏ nhu cầu cũng giúp ta lập được k ế hoạch có tính khả thi và ngân sách cho dự án. X â y dựng nội dung là quá trình năng nhọ c, tiêu tốn thời gian nhất trong bất c ứ dự án phát triển Website nào. V ì vậy bắt đầu với một kế hoạch kỹ càng sẽ đảm bảo không gặp bất kỳ cản trở nào trong quá trĩnh thực hiện dự án. Tất n h iên , ta sẽ không bao giờ bị rơi vào tinh trạng Website có cấu trúc ưa nhìn nhưng không có nội dung. QUY T R ÌN H PH Á T T R IE N W EBSITE Mỏi dự án x â y dựng W ebsite quan trọng đểu đưa ra những thách thức riêng nhưng nói chung quy trình phát triển W ebsite phức tạp phải trải qua sáu giai đoạn chính: • L ậ p k ế hoạch và định nghĩa site • Cấu trúc thông tin • T h iế t k ế site • X â y dựng site • Marketing site • T h e o dôi, đánh giá và duy trì 11 PHONG CÁCH TRỈNH BÁY TRANG WEB Phát triển một Website lớn là một tiến trinh có ảnh hường lâu dài đến ngân sách, nhân sự, và các mối quan hệ chung của một tổ chức. Nhiều Website ra đời nhờ những nỏ lực đặc biệt của các nhóm nhỏ say mẽ công việc, tuy nhiên quá trình xả y ra độc lập với hoạt động của tổ chức. Do đó, những mục tiẽu đé ra cho Website không nằm trong phạm vi chiến lược chung của tổ chức. Kết quả là nhữnỵ W ebsite này trờ thành “ mồ cô i” , không được sự đầu tư và quan tâm của tổ chức. Đ ó cùng là hậu quả cua một quá trình xâ y dựng vội vàng và không tỉ mỉ. K h i xem xét tiến trình phát triển Website được phác họa dưới đây, lưu ý rằng cá c trany cấu thành nên Website chiếm vị trí rất quan trọng trong một dự án thiết k ế hợp lý . C ầ n cả n nhắc trước khi hành động, và chắc chắn có một tổ chức, một ngân sách, và nguồn nhân Iực dồi dào làm hậu thuẫn để tnực hiện thành công dự án. 1. I Ậ P K Ế H O ẠCH V À Đ ỊN H N G H ĨA S IT E G iai đoạn đầu là giai đoạn xác định mục tiêu và phương hướng cho W eb site, \i lúc bắt đầu thu thập và phân tích thông tin cần thiết để x â y dựng k ế hoạch chi tiết ch o ngàn ¿ách và tài nguyên cần thiết. Đ ây cũng là lúc xác định phạm vi nội dung W ebsite, hồ trợ cóng nghệ và tính năng tương tác cần thiết, và khối lượng thông tin cần đưa vào W ebsite để đáp ứng mong đợi của độc giả. Nếu cắn giao việc thiết k ế cho một công ty khác, cần nhanh chóng cùng họ thảo luận và lập k ế hoạch. CÁC Y Ế U TỐ L IÊ N Q UAN Đ ẾN Q UÁ T R ÌN H P H Á T T R IE N w e b s it e Sởn phẩm • Mục tiẽu và dự đính cho Website? • Độc giả là ai? Nhu cầu của họ là gì? • Đội ngũ sản xuất chỉ trong phạm vi nội bộ hay cả những người bồn ngoài? • A i sẽ quản lý m ỏi tiến trình dự án? • A i là người phụ trách phần nội dung? • A i là người chịu trách nhiệm giao dịch với các đơn vi bên ngoài? • A i chịu trách nhiệm đối với toàn bộ dự án? C ô n g nghệ • W eb site nẽn hố trợ trình duyệt và hệ điều hành nào ? W indows, M acintosh, U n ix Nescape Navigator, Internet Exp lo rer; phiồn bản hỏ trợ tối thiểu. • Độ rộng đường truyổn mạng cho lượng người trung bình truy cập W ebsite. Độc giả nội bộ hay bẽn ngoài? E T H E R N E T hay kết nối tốc độ cao Modem tốc độ cao, mạng dịch vụ tích hợp số (Intergrated Services D igital Network) hay kết nối D S L C á c kết nối modem điển hình • Ngôn ngữ đánh dấu siêu văn bản động (H T M L động) và các tính nàng cao cấp 12 Chương 1 : Quy trìn h cơ bản của d ự án xây dựng tra n g WEB Ja va scrip t hoặc V B S c rip t (Visual B asic Scripting Edition) cẳn thiết C á c Ja v a applet cẳn thiết C á c trang m ẫu cắn thiết T rìn h duyệt thuộc nhóm thứ ba được gắn thêm Đ ặc điểm riẻng của Nescape hoặc Microsoft C á c đặc tính bảo mật cẳn thiết • Làm th ế nào để người đọc có thể đóng góp ý kiến cho nhóm ? T h ư điện tử T rò ch u yện , hội thảo trẽn mạng • H ỗ trợ cơ sở dữ liệu? Người dùng đòi hỏi truy cập vào bất cứ vùng nào trên site? B ả n câu hồi cần thiết? Nhu cầu tim kiếm và khôi phục từ C S D L ? • Nội dung nghe nhìn C á c trình bày về âm thanh và hình ảnh? H ỗ t r ợ W eb se rv e r • W eb server nội bộ hay của các nhà cung cấp dịch vụ Internet? T ẻ n vùng duy nhất có sẵn Không gian đ ĩa, giới hạn truyền site hoặc các chi phí bổ sung K h ả năng thích hợp để đáp ứng yêu cầu truyền tải? T h ờ i gian bảo tri? Thống kê về người sử dụng và quá trình truyền tải? P hân tích đăng ký server: nội bộ hoặc bẽn ngoài? T im kiếm công cụ cho phù hợp với nội dung? C G I, lập trìn h và hỗ trợ C S D L có sẵn? H ồ trợ C S D L hoặc phối hợp thành viên trong nhóm? Ngân sách • Lương và lợi nhuận • P hần cứng, phần mểm cần thiết cho thành viên trong nhóm mình • Đ ào tạo n hân viên trong việc sử dụng W eb, cơ sớ dữ liệu, m arketing, và thiết k ế Web • C h i phí phụ T h iế t k ế và phát triển site C ố vấn k ỹ thuật P hát triển C S D L M arketing site • Người hỗ trợ lâu dài cho Website Người tạo W ebsite 13 PHONG CÁCH TRÌNH BÀY TRANG WEB • H ỗ trợ vé kỹ thuật và server lâu dài • Hỗ trợ và bảo trì C S D L • C ập nhật và phát triển nội dung mới 2. CẤU T R Ú C TH Ô N G T IN ớ bước này cẳn trình bày tỉ mỉ nội dung và cách tổ chức W ebsite, c ả nhóm nẽn tóm tắt nội dung đã có, miẽu tả nội dung mới cần thiết và định nghĩa cấu trúc W ebsite. K h i cấu trúc nội dung đã đuợc phác họa, nồn bắt tay vào một số mẫu đẩu tiẽn nhằm kiểm tra những vấn để không ổn trong quá trình thiếi kc c 'íC mẫu site hữu ch bởi hai lý do. T h ứ nhất đây là cách tốt nhất để kiểm tra quá trinh phct triển và điểu chỉnh giao diện người sử dụng. T h ứ hai, việc tạo m ẫu cho phép nhà thiết kế đồ họa phát ttìẻn mối liên hệ g ìta hình thức của Website với cách thiết k ế các menu điéu huứng ho trợ thông tin. Muốn có mẫu tốt, cần linh hoạt trong khâu tạo mẫu. Không nhắt thiết phái làm T ìộ t mẫu quá tỉ m í, chau truốt, điều này chỉ gây lã ng phí thời gian. Kèi' quả 4'ặc trưng ở cuối giai đoạn này ró thể bao gồm: • Đặc t¿i thiết k ế site chi tiết • Miêu tà nội dung site chi tiết S ơ đổ site, hình ảnh, đường bao, n ục lụ c... • C ác đặc tả chi tiết vế hỗ trợ kỹ thuật Công nghệ duyệt đưọc hỗ trợ T ố c độ kết nối được hỗ trợ W eb server và tài nguyồn của server • Đề xuất lập trình hoặc công nghệ hỗ trợ các tính năng đặc biệt của Website • Lậ p kết hoạch thiết k ế và xâ y dựng Website • Một hoặc nhiều mẫu site có nhiều trang • Nhiều phác thảo thiết k ế đồ họa và giao diện 3. T H IẾ T K Ế S IT E Ở giai đoạn này, dự án đã được hình thành rỏ ràng, như lưới trang, thiết k ế trang và các chuẩn thiết k ế đồ họa đã được tạo dựng và thông qua. G iờ đây cần íạo các m inh họa, hinh ảnh, và nội dung nghe nhìn hoặc đổ họa khác. T ìm kiếm , viết, tổ chức và hiệu chỉnh nội dung văn bản cũng phải thụt hiện trong giai đoạn này. Ngoài ra còn phải lập trình, thiết k ế C S D L , nhập dử liệu và tìm công cụ thiết kế. Mục đích là x â y dựng tất cả các thành phần nội dung, các chức nàng cần thiết để sẵn sàng bước sang giai đoạn cuối, giai đoạn x â y dựttg hoàn chính trang Website thực. Sản phẩm đặc trưng ớ cuối giai đoạn này gồm: C ác thành phổn nội du ng , cấu trúc, cách liên kết cụ th ể • Nội dung văn bản đã soạn thảo, đọc và sửa chữa • C ác đặc tả thiết k ế đổ họa cho tất cả các kiểu trang Đồ họa giao diện hoàn chính cho các mẳu trang Đ ồ họa cho đằu trang và chân trang, logo, nút, và nền 14 Chương 1: Q uy trìn h cơ bản của dự án xảy dựng tra n g WEB • Trang tổng hợp cụ thể hoặc ví dự hoàn chính về các trang chính Hướng dấn vổ chuẩn đổ họa cho các site lớn và phức tạp • T h iế t kê* giao diện và các mầu lưới trang chủ được hoàn chính. C á c trang mầu H T M L hoàn chỉnh • Minh họa • H ìn h ảnh chọn lọc Th àn h ph ấn logic và ch ứ c nâng • C á c script của Javascript và các Ja va applet được thiết kế • L ậ p trình và bưng C S D L , các m ẵu tương tác hoàn chỉnh. • C ô n y cụ tìm kiếm được thiết k ế và kiểm nghiệm 4. C Ấ U T R Ú C S I T E C hỉ ở giai đoạn này các trang W eb tiong site mới được xâ y dựng và hoàn chỉnh về nội dong. Bằng cách đợi tới khi có một cấu trúc trung cụ chế, nội dung được chọn lọc, và một thiết k ế trang hoàn ch ỉnh, ta sẽ giảm thiểu những nội dung rườm rà, lã ng phí còng sức, kết quả tất yếu cua việc tạo dựng trang quá vội vàng. T ấ t nhiên, bạn sỗ có được nhiều kiến thức mởi mẻ xung q ujn h quá trình thiết k ế khi các m ẫu đầu tiên được đưa vào hoàn thiện trong Website phát triển.H ĩi y chuẩr bị để sửa chừa các thiỗt k ế khi xem xét sự phát triển của Website cũng như khám phá cả những điểm yếu lẳn cơ hội để cải thiện nội dung. Một khi W ebsite đd xâ y dựng xong, với tất cả các trang hoàn chính và tất cả các thành phần lập trình và C S D L được kết nối, hã y chuyển sang giai đoạn kiếm tra beta. Quá trình kiểm tra được tiến hành bời độc giải không thuộc nhóm phát triển site, những người sẵn sàng đưa ra lời nhận xét tinh tế vổ lối lập trình, lỗi in, các nhận xét về thiết k ế tổng thể và tính hiệu quả của site. Những người mới sử dụng lại chỉ cho chúng ta thấy những lỗi khó phát hiện. V à nên nhớ rằng chỉ sau khi Website đã được kiểm tra kỹ lưỡng, thì mới nẻn đưa công khai địa chỉ lên mạng. C á c sản phẩm đặc trưng ở cuối giai đoạri này gồm: • H T M L hoàn thiện ch o tất cả các trang với nội dung thích hợp • C ấ u trúc kết nố i, điếu hướng hoàn chỉnh • T o àn bộ chương trình thích hợp và được kết nối với trang, sẵn sàng cho kiểm tra beta • C á c thànn phần C S D L thích hợp và được kết nối với các trang của Website • C á c thiết k ế đồ hoạ, minh họa, hình ảnh thích hợp • H iệ u chính cuối cùng toàn bộ nội dung site • K iế m tra cụ thể C S D L và tính năng của chương trình • K iể m tra và thẩm tra tính năng thông báo C S D L • K iế m tra thủ tục hỏ trợ người đọc, trả lời em ail, v .v ... • Lư u trữ tất cả các thành phần nội dung, mã H T M L , mã chương trình, và các tài liệu khác vể phát triển site 5. Q UẢN G CÁO V À T I Ế P T H Ị SẢN PH AM t r ê n w e b s it e Website là một phần khõng thể thiếu trong các chiến dịch marketing và chương trình truyền thông cộng tác. Đ ịa c h ỉ U R L cua site nên thông báo trên tất cả chương^rình quảng cáo và trao đổi thư lừ của tố chức. 15 PHONG CÁCH TRÌNH BÀY TRANG WEB Nếu Website chủ yếu nhắm vào độc giả nội bộ thì cũng nên theo cách sắp xế p các trang thành phần trên trang chủ của mình như Y ah o o , Iníoseek, thòng báo địa ch ỉ U R L ờ những nơi độc giả dỗ gặp nhất (như bảng thông báo, thư việ n ...). B ạn cũng có thể tìm thấy cơ hội thúc đẩy sự phát triển mạnh mẽ cho W ebsite bằng sự hố trợ của các chi nhánh thương m ại, các tố chức chuyên nghiệp, phương tiện truyền thông đại chúng, hã ng thông tin ờ địa phương, công ty xâ y dựng và bất động sản, nhà cung cấp dịch vụ Internet và các trung tâm thương nghiệp địa phương. G iá để đưa Website lẻn mạng không đắt lắm và việc thông tin rộng rã i các tính năng cao cấp của trang W eb chủ trong site sẻ lẻn nhanh chóng đưa nó đến với độc giả. Nhưng phương tiện chính để đưa W ebsite đến với độc giả vẳn là trên các phương tiện thông tin đại chúng của địa phương. Đ ịa chỉ trang chủ nên xuất hiện trong: • T ờ rơi quảng cáo • Chương trình quảng cáo trồn ti vi và • Báo chí • C ác chiến dịch gửi Ihư trực tiếp • Danh thiếp • Văn phòng phẩm • C ác bản kẽ, hóa đơn • Catalog hướng dẳn, bao bì sản phẩm • C ác tài liệu khuyến m ại, ấn phẩm • radio Áp phích, biển quảng cáo 6. T H E O D Ỏ I, K IỂ M T R A VÀ BẢO T R Ì C á c thông tin đa dạng vé người truy cập Website được ghi lại nhờ phần m ểm W eb server. Ngay cả những chương trình đơn giản nhất cũng có thể theo dõi được có bao nhiẻu người đã xem Website, bao nhiêu trang được yêu cầu và nhiều thông số khác. Bằng cách phân tích thông số này, ta có thể tăng cường hoặc giảm bớt nội dung các Website nhằm đáp ứng tốt nhất nhu cầu của độc giả. Thông tin trên server cũng cho ta biết các trang thường xuyên được truy c ậ p , các trình duyệt mà người dùng hay sử dụng, thậm ch í cả vị trí địa lý của độc giả. T u y nhiên, muốn nhận được các thông tin này, trước tiên cần phải đề nghị với nhà quản lý server. B ản ghi đầy đủ là c ơ s ờ đánh giá mức độ thành công của W ebsite. Nhà quản lý Web nên lưu trữ tất cả các bản ghi này để phục vụ cho phân tích lâu dài, và cần chuẩn bị sẵn cá c phương án bổ sung hoăc sửa chữa thòng tin trẽn Website khi cần thiết. T a có thể tìm thấy nhiều vấn để còn tồn tại khi phân tích các bản ghi đó. V í dụ, nếu số lần gọi file H T M L trên trang chủ nhiều hơn số lần gọi file đồ họa, thì chứng tỏ độc giả không muốn tải các trang nhiều đồ họa. C ó thể là do Website chứa quá nhiểu đồ họa, hoặc cỏ thể nhiều độc giả sử dụng kết nối modem tốc độ thấp khi truy cặp. Nếu tốc độ truy cập trẽn m àn hình menu trong site lớn hơn tốc độ truy cập tới các trang liên kết ở menu, điều đó chứng tỏ m enu kém hấp dản hoặc không hiệu quả. Phát triển dữ liệu trên Website dựa vào thông tin vể cách sử dung của độc giả cũng giúp ta có thậ cả i tiến W ebsite bằng cách loại bớt ờ những mục độc gíả ít tới hoặc đưa thẻm thông tin vào các mục thu hút độc giả. 16 Chương 1 : Quy trìn h cơ bản của d ự án xây dựng tra n g WEB R ả o trì site Không nên bỏ m ặc site khi nó đã được mọi người biết đến Những ván đề vé thám mỹ và chức nũng kỹ thuật của Website lớn đòi hỏi có sự quan tâm chú ý lâu dài vù liên tục, đặc biệt với các thành viên có trách nhiệm cập nhật nội dung. Một số người trong nhóm cũng cần cỏ trách nhiệm phối h ợ p x ử lý các ván để phát sinh, bảo trì các chuẩn đồ hoa. và đảm bảo các chương trinh và môi liên kết giửa các trang được giừ nguyên vẹn sau mỗi lản truy cập. C á c kết nối trên W ebsite dề hỏng do đó cần phải kiểm tra theo định kỳ, đảm bảo các kết nối với các W ebsite bên ngoài luôn trong trạng thái bình thường. Không nôn dể Website nhạt nhèo, kém hấp dẫn vì không được cập nhật thông tin. Nên chú ý tới độc giả nhiều hơn đe họ không thấy nhàm chán. 17 Chương 2 THIẾT KÊ GIAO DIỆN ■ •Người sử dụng tài liệu Website không ch ỉ xem thông tin mà họ cỏn tương tác với nó theo nhửng cách mới lạ chưa từng có. G iao diện người sử dụng đồ họa (GUI) của hệ thống máy tính bao gồm những mô phỏng cách thức tương tác, ảnh, và khái niệm dùng đế truyền tải vai trò và ý nghĩa trẽn màn hình máy tính. Ngoài ra còn bao gồm những đặc điểm hiến thị chi tiết của từng thành phần trong giao diện đồ họa và chuồi tương tác chức năng qua thời gian, tạo ra diện mạo Website cũng như những quan hệ kết nối hypertext (siêu vần bản). Người ta sử dụng thiết k ế đồ họa và những đồ họa "ký hiệu” hiển thị đế Website sinh động hơn, đồ họa rất cản thiết cho hoạt động cua người sử dụng trong site của bạn. Đối với tài liệu tương tác. thiết k ế đồ họa không thể tách biội với thiết k ế giao diện. T H IẾ T K Ế W E B S IT E V À T À I L I Ệ U TH Ô N G THƯỜ N G Ngày nay, khái niệm về cấu trúc thông tin phẳn lớn xuất phát từ việc tố chức sách, các ấn phẩm xuất bản định kỳ, hệ thống lập danh mục và tạo chỉ mục thư viện. "Chuẩn giciO diện ' đcỉ phần được xây dựng tốt và được chấp nhận rộng rã i. Từng đặc điểm của sách, từ trang nội dung đến phụ lục được cải tiến qua hàng thế kỉ, và độc giả của cuốn sách trước đây cũng gặp phải những vấn đổ vổ tổ chức mà ngày nay người sử dụng tài liệu hypermedia đang phải đương đầu. Tuy nhiồn, sau thời kỳ ngành xuất bản phát triển mạnh mẽ, tiếp đến là Gutenberg phát minh ra ngành in ấn với kiểu in dề chuyển đổi, thì phải hơn một thế ki sau, việc đánh số trang, phụ lục và mục lục, thậm chí cả trang tiêu đồ mới trở thành những việc cán thiết khi xuất bản một cuốn sách. Những tài liệu trên Web cũng trải qua quá trình phát triển và chuẩn hỏa tương tự. N hững tiền lệ thiết k ế trong in ấn Mặc dù tài liệu hypermedia (siêu môi trường) tương tác trẽn mạng gây ra những khó khăn mới đối với người thiết k ế thông tin, nhưng hấu hết chỉ dẫn cần thiết để thiết kế, tạo, lắp ráp , biên tập và tổ chức đa phương tiện vể căn bản không khác mấy so vứi phương tiện in thông thường. H áu hết các tài liệu Website cỏ thể được thiết k ế phù hợp với quy ước của Chicago M anual o f Síy/e về tổ chức văn bản và kiểu biên tập. Những vấn để các tố chức cần biết để tiêu chuẩn xuất bản nội bộ rõ ràng, dễ hiểu và nhất quán đều có sẵn trong những cuốn sách hướng dấn xuất bản. Không nên quá bối rối với tính năng mới của Website đến nỗi bỏ qua những chuẩn mực cơ bản vể thiết k ế đổ họa và trình biên tập. TẠO TR A N G W E B ĐỘC L Ậ P Nhừng trang World Wide W eb (www) khác với sách và tài liệu à một phương diện quan trọng, đó là những kết nối hypertext (siéu v/ăn bản) cho phép người sử dụng truy cập vào một Website đơn lè mà khóny cần lợi m ở đầu. V ì lý do này, W ebsite cần được độc lập hơn LứL Heilig trong m ot.cuốn sách. V í dụ, phần đáu và phần cuối ờ một Website cần cung cấp nhiều thỏng tin 18 C hương 2 : T h iế t k ế g iao diện và trau chuốt hơn ở những trang in. T h ậ t ngớ ngár. nếu nhắc lại tác giả, thỏng till bản quyền và ngày tháng xuất bản ờ cuối mòi trang sách, nhưng có những người sử dụng ch! muốn xcm một rrưng Web vì đó có thể ch ỉ là phần duy nhất của site. V ẩn đổ thiết k ế những tài liệu độc lập không :A ìi\ o duy nhất đối với những trang Web. H ầu hết báo, tạp chí đéu nhắc lại ngày tháng, số tập, ‘X plidt hành ờ đấu hoặc cuối mổi trang sách vi họ biết người đọc thường xé những bài bcío hoặc nhừng trang photocopy và sẽ sử dụng những thòng tin đó để tim nguồn tài liệu. Do những khó khân trong việc tạo Website vừa dễ sử dụng vừa đa dạng vẽ nội dung, chiên lược thiết k ế tốt nhất là áp dụng một vài nguyên tắc thiết k ế tài liệu cơ bản, nhất quán trong mỏi trang W eb bạn thiết kế. Những yếu tố cơ bản của một tài liệu thường không phức tạp và chang liên quan gi đến còng nghệ Internet. Nó tựa như các nguyên tắc viết báo được dạy ờ trường trung học cĩi. cái gì, khi nào, ớ đâu. /V A i đong nói? Câu hỏi này thật cơ bản, và thông tin vi vậy được thừa nhặn rang tác giả thường bó qua đoạn thông tin cơ bán nhất mà một người đọc cần đế đánh giá nguổn gốc tài liệu trúng W eb. C h o dù trang đó của cá nhân hay tố chức thì vẩn phải cho người đọc biết ai tạo ra nó. T in h trạng tràn ngập Website đã dẫn đến thông tin sai lệch hoặc nhảm lấn. C ái gi Mọi tài liệu đều phải có một tiêu để rỏ ràng đé thu hút sự chú ý của người đọc nhưng do một vài lý do đặc biệt với trang W eb, yếu tố hiệu chính c ơ bản này lại đặc biệt quan trọng. K h i trang xuất hiện, trình (iuyệt Website chú ý đầu tiên đến tiêu đề tài liệu. Trong nhừng trang có nhiều đổ hoạ, tiêu để có thể lả thứ duy nhất người sử dụng tròng thấy trong vài giày khi đồ họđ tải trang xuống. Th êm vào đỏ, tiêu để của trang sẽ trở thành đoạn văn bản của một trình duyệt "đánh dấu" nếu người sử dụng chọn trang của bạn đc thêm vào danh sách U R L của họ. Một lieu đề nhầm lẫn hay tối nghĩa hoặc một tiêu đề gồm nhiều cáu sai ngữ pháp bỏ không giúp người sứ dụng nhớ được tại sao họ lại đánh dấu trang của bạn. Khi nào T ín h hợp thời là một yếu tố quan trọng để đánh giá giá trị của một tài liệu. Bao, tạp c h í, và hầu như tất cả thư từ văn phòng đều được ghi ngày. G hi ngày từng Website và đối lại ngày mỗi khi tà i liệu được cập nhật. Đ iều này đặc biệt quan trọng trong những trdng tài liệu trực tuyến dải và phức tạp được cập nhật thường xuyên nhưng có thế khòng khác nhiều vé nội dung đối với những người đọc không thường xuyên. Việc phân phối thông tin về công ty, nhàn sự, thông tin về sản phẩm và những tài liệu kỹ thuật khác như trang Website cần có số phiên ban hoặc ngày cập nhật. Phải nhớ rằng nhiều người đọc thích in nhừng vấn bản dài từ W eb site. Neu bạn không ghi ngày cập nhật thỏng tin , họ sẻ không thể đánh giá được liệu phiên bản đó có hiện hành hav không. Ó (Jâu Website là một ‘ nơi” lạ kỳ với khói lượng thông tin khổng lổ nhưng rất ít khi gicii thích rô ràng vổ nguồn gốc cúa tài liệu. Nhấn vào một kết nối W eb, bạn có thế dược kêt nổi với một Web server ở S Y D N E Y , Australia, Chicago, Rome hoặc bốt kỳ đâu nhơ hòa mạng Internet Nếu bạn không thành thạo trong việc phân tích U R L thì khó mà nói trang bắt nguồn tìíđ â u S ạ ' cho cùng, đây là mạng toàn cầu và câu hỏi tài liệu (lốn từ đâu đôi khi không tách rơi với câu hòi 'i là người tạo tài liệu. H ả y luôn cho người đọc biết bạn từ đáu tới, kèm theo thông tin về chi nh.i hoặc còng ty của bạn (nếu thích hợp). Lie n kết U R L “ch ủ ’’ ít nhất với những trang chính của site là một cách dơn giản đc ta. kết nối với nơi bắt nguồn một trang nào đó. K h i người đọc !ưu trữ trang như một file vãn bản : 19