Bài giảng Phát triển ứng dụng web 1: Tổng quan về xây dựng ứng dụng web - ĐH Sài Gòn

Bài giảng Phát triển ứng dụng web 1: Tổng quan về xây dựng ứng dụng web cung cấp ch người học các kiến thức: Các bước thiết lập website, thiết kế website, xây dựng website dưới góc nhìn ngộ nghĩnh. Mời các bạn cùng tham khảo nội dung chi tiết.

Các b ướ c thi t l p web ế ậ

Xác đ nh yêu c u  ị ầ

§ M c tiêu, yêu c u c  b n c a websiteụ ầ ơ ả ủ

§ Đ i tố ượng website ph c vụ ụ

§ Ch  đ  websiteủ ề

 K t qu  thu đế ả ược s  là nh ng thông tin quan ẽ ữ

tr ng trong giai đo n xây d ng web ọ ạ ự

Đ i t ố ượ ng ph c v ụ ụ

• Xác đ nh lo i đ i tị ạ ố ượng ph c v  chínhụ ụ

• Tìm hi u đ i tể ố ượng ph c vụ ụ

− S  hi u bi t ự ể ế

− Trình đ   ộ

− S  thích ở

− Kinh nghi m duy t web  ệ ệ

§ Thi t k  t t s  thích h p cho nhi u d ng đ i ế ế ố ẽ ợ ề ạ ố

Ch  đ  website ủ ề

• Giúp đ nh hị ướng cho công vi c thi t kệ ế ế

− Gi i thi u công ty, t  ch c, hàng hoá, … ớ ệ ổ ứ

− Tu  thu c ngành ngh : giáo d c, gi i trí …  ỳ ộ ề ụ ả

− Di n đàn trao đ i th o lu n ễ ổ ả ậ

− Di n đàn trao đ i, mua bán, kinh doanh tr c tuy n ễ ổ ự ế

− Hay cung c p d ch v  và thu l i t  qu ng cáo, … ấ ị ụ ợ ừ ả

Mua tên mi n ề

Mua tên mi n ề

Tìm ki m tên mi n ế ề

Thuê hosting

Thuê hosting

Các trang chức năng thành viên

Thi t k  giao di n web ế ế ệ

Thi t k  giao di n: 2x2 layout ế ế ệ

Thi t k  giao di n: d ng 3 columns ế ế ệ ạ

Thi t k  giao di n: Mixed style ế ế ệ

Xác đ nh ki u ch , màu s c ị ể ữ ắ

• Font ch  ph  thu c vào ữ ụ ộ

§ Gam màu: th ng nh t trong toàn b  Website ố ấ ộ

§ Font  ti ng Vi t: VNI,  TCVN3,  Unicode… ế ệ

Xác đ nh kích th ị ướ c khung nhìn

§ Người  đ c  ph i  c m  nh n  đọ ả ả ậ ược  kích  thước 

c a trang thông tin, bi t h  đang   đâu, có th  ủ ế ọ ở ểlàm gì

§ H u  h t  các  trang  web  đ u  không  v a  kh p ầ ế ề ừ ớ

v i màn hình 14­15’’ ớ

Xác đ nh c u trúc website: Ô l ị ấ ướ i

§ Danh sách khoa h c, các bi n c  s  ki nọ ế ố ự ệ

§ M i thành viên ph i có cùng c u trúcỗ ả ấ

§ Khó hi u, khó xác đ nh m i liên quan gi  các ể ị ố ữ

lo i thông tinạ

§ Thích h p cho ngợ ườ ử ụi s  d ng có kinh nghi mệ

Xác đ nh c u trúc website: Ô l ị ấ ướ i

Xác đ nh c u trúc website: Ô l ị ấ ướ i

Xác đ nh c u trúc website: M ng nhên ị ấ ạ

§ Ít  h n ch  cho vi c s  d ng thông tinạ ế ệ ử ụ

§ C u trúc liên k t ph c t p, nh ng khai thác ấ ế ứ ạ ư

tri t đ   u đi m hiperlinkệ ể ư ể

§ C u trúc phi th c t  nh t, khó hi u, khó d  ấ ự ế ấ ể ự

đoán

§ Thích h p v i nh ng site nh , dành cho ngợ ớ ữ ỏ ười 

s  d ng có nhi u kinh nghi m.ử ụ ề ệ

Xác đ nh c u trúc website: m ng nh n ị ấ ạ ệ

Xác đ nh c u trúc website: m ng nh n ị ấ ạ ệ

Thi t k  h ế ế ướ ng ng ườ ử ụ i s  d ng

§ Yêu c u m c đ  hoàn h o c a giao di nầ ứ ộ ả ủ ệ

§ Cách t t nh t: th  nghi m và nh n ph n h i.ố ấ ử ệ ậ ả ồ

Các giúp đ  đ nh h ỡ ị ướ ng rõ ràng

Không có trang cu i (dead­end) ố

§ M i trang có ít nh t m t liên k t. Luôn có kh  ỗ ấ ộ ế ả

năng quay v  trang ch , các trang ch  ch t ề ủ ủ ốtrên trang

§ Trang dead­end: s  là trang không th  đi đ n ẽ ể ế

v i các trang thành viên trong website.ớ

§ Nên đ  liên k t v  trang ch  cho t t c  trang ể ế ề ủ ấ ả

thành viên

Băng thông và  nh h ả ưở ng

§ S  kiên nh n c a đ c gi  có gi i h nự ẫ ủ ộ ả ớ ạ

§ T c đ  đôi khi là y u t  quy t đ nh đ n vi c ố ộ ế ố ế ị ế ệ

l a ch n website.ự ọ

§ Phân bi t gi a các thi t k  intranet và internetệ ữ ế ế

Băng thông và  nh h ả ưở ng

Thi t k  trang web cho m ng Intranet ế ế ạ

§ M t s  site  thi t k  riêng cho các t  ch c, s  ộ ố ế ế ổ ứ ử

d ng m ng LANụ ạ

§ M c tiêu:  nâng cao th i gian truy c p,  d n d t ụ ờ ậ ẫ ắvào sâu trong c u trúc website ấ  đòi h i thông ỏtin ph i h p d n, có giá trả ấ ẫ ị

§ Đ ng  đ   ý    t i  băng  thông  và  t c  đ  ừ ể ớ ố ộ     chú 

tr ng đ n n i dung   có giá tr  và s  h p d n ọ ế ộ ị ự ấ ẫcho website

• Các m i liên k t luôn đ m b o có đích đ n  ố ế ả ả ế

• N i  dung  luôn  đ m  b o  thích  h p  và  ph i  c p  ộ ả ả ợ ả ậ

nh t cho phù h p v i ng  c nh t i th i đi m đ c  ậ ợ ớ ữ ả ạ ờ ể ọ

gi  duy t Web ả ệ

Ph n h i và đ i tho i ả ồ ố ạ

§ Chu n b  trẩ ị ước cho vi c tr  l i, đáp  ng các ệ ả ờ ứđòi  h i,  góp  ý  c a  ngỏ ủ ười  s   d ng  m t  cách ử ụ ộnhanh nh t có th ấ ể

§ Luôn  có  cung  c p  đ a  ch   liên  k t  v i ấ ị ỉ ế ớ

“Webmaster”

§ Lên k  ho ch nhân s  ph  trách lâu dài.  ế ạ ự ụ

T ươ ng thích trên các trình duy t khác nhau ệ

§ Không ph i m i trình duy t đ u hi n th  trang ả ọ ệ ề ể ịweb c a chúng ta gi ng nhauủ ố

§ L u  ý  khi  có  ngư ười  s   d ng  web  browser ử ụkhông  có  kh   năng  h   tr   đ   ho   (mobile, ả ỗ ợ ồ ạPDA,…)

§ S  d ng nhãn (tag) ALT trong HTML đ  thay ử ụ ể

th   ế

Thi t k  cho vi c qu n tr  và c p nh t n idung ế ế ệ ả ị ậ ậ ộ

Đ a vào ho t đ ng – th i gian qu n lý ư ạ ộ ờ ả

§ Website c n đầ ược c p nh t thông tin.ậ ậ

§ N u ph n nào đó đế ầ ươcj c p nh t ậ ậ  thêm ký 

hi u “New”ệ

§ Ghi th i gian c p nh t, s  ngờ ậ ậ ố ười truy c p,…ậ

§ N u  website  ph c  t p ế ứ ạ   thêm  m t  trang ộ

“What new ?”

Liên k t trang web, qu ng cáo ế ả

§ T o liên k t đ n các thông tin (đ i tác, khách ạ ế ế ốhàng,…)  tăng uy tín

§ Khi đã  n đ nh ổ ị   chuy n đ i hình th c kinh ể ổ ứdoanh, thu phí:

• Thuê đ t logo qu ng cáoặ ả

• Thu phí thành viên

Ph  l c, ngu n thông tin, các trang giúp đ  FAQ ụ ụ ồ ỡ

§ Thông  tin  báo  cáo  thường  cô  đ ng ọ   trên web có thêm các ph  l cụ ụ

§ FAQ (Frequently Answer Questions):

• Lý tưởng cho vi c thi t k  website h  tr ệ ế ế ỗ ợ

• Gi m thi u nhân s  và chi phí cho vi c h  ả ể ự ệ ỗ

tr , t  v n khách hàng.ợ ư ấ

Xây d ng website d ự ướ i góc nhìn ng  nghĩnh ộ

Ngu n t : ồ ừ

§ Tr n Th  Bích H nh (2007), Quá trình xây d ng 1  ầ ị ạ ự

website d ướ i góc nhìn ng  nghĩnh,  ộ

§ Bài  gi ng  môn:  L p  trình  và  thi t  k   web,  Khoa  ả ậ ế ế

CNTT, ĐH KHTN

§ http://pingmag.jp/2005/12/09/the­

websitedevelopment­process/

Chu n b  ch n ch  đ  đ  án ẩ ị ọ ủ ề ồ

•   H ướ ng d n các h ẫ ướ ng làm website

Yêu c u đ c sách ầ ọ

§Lisa Lopuck(2006), Web Design For Dummies (2nd Edition), Wiley Publishing ­ Chapter 17, 18

§GOOGLE, GOOGLE, GOOGLE , GOOGLE , 

GOOGLE

Thank you !