ỨNG DỤNG RESPONSIVE VÀO TRONG XÂY DỰNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN VỚI HTML5 VÀ CSS3 - Full 10 điểm

UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGHỆ THÔNG TIN -----  ----- TRẦN VĂN QUỐC Tên đề tài: ỨNG DỤNG RESPONSIVE VÀO TRONG XÂY DỰNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN VỚI HTML5 VÀ CSS3 KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC Qu ả ng Nam, tháng 04 n ă m 2016 UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGHỆ THÔNG TIN -----  ----- KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC Tên đề tài: ỨNG DỤNG RESPONSIVE VÀO TRONG XÂY DỰNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN VỚI HTML5 VÀ CSS3 Sinh viên thực hiện: TRẦN VĂN QUỐC MSSV: 2112011024 CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN KHÓA: 2012 – 2016 Cán bộ hướng dẫn: ThS DƯƠNG PHƯƠNG HÙNG MSCB: 21882 Qu ả ng Nam, tháng 4 n ă m 2016 LỜI CẢM ƠN Đầu tiên em xin chân thành cảm ơn đến tất cả các thầy cô trong khoa Công Nghệ Thông Tin trường Đại học Quảng Nam đã giảng dạy tận tình cho em những kiến thức bổ ích trong 4 năm qua để thực hiện khóa luận này Đặc biệt em xin gửi lời cảm ơn đến giảng viên Th S Dương Phương Hùng – người đã trực tiếp hướng dẫn em hoàn thành khóa luận này Bên cạnh đó là những ý kiến đóng góp của bạn bè, đã cho em nguồn động viên lớn để hoàn thành nhiệm vụ của khóa luận Qua đó, em đã đạt được nhiều tiến bộ về kiến thức cũng như những kĩ năng làm việc bổ ích Em chân thành gửi lời cảm ơn sâu sắc đến toàn thể thầy cô và các bạn! MỤC LỤC Phần 1 MỞ ĐẦU 1 1 1 Lý do chọn đề tài 1 1 2 Mục tiêu của đề tài 1 1 3 Đối tượng và phạm vi nghiên cứu 1 1 3 1 Đối tượng nghiên cứu 1 1 3 2 Phạm vi nghiên cứu 1 1 4 Phương pháp nghiên cứu 2 1 5 Lịch sử nghiên cứu 2 1 6 Đóng góp của đề tài 2 1 7 Cấu trúc đề tài 2 Phần 2 NỘI DUNG NGHIÊN CỨU 3 CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ RESPONSIVE, HTML5 VÀ CSS3 3 1 1 Công nghệ Responsive Web Design (RWD) 3 1 1 1 Lịch sử ra đời của RWD 3 1 1 2 Một số khái niệm 3 1 1 3 Những ưu thế của Responsive Web Design 4 1 1 4 Khả năng ứng dụng Responsive Web Design hiện nay 5 1 1 5 Cơ chế hiển thị đáp ứng thiết bị người dùng 5 1 1 6 Những kỹ thuật thiết kế Responsive Web Design 18 1 2 HTML5 và CSS3 20 1 2 1 HTML5 20 1 2 1 1 Khái niệm 20 1 2 1 2 Các thẻ mới của HTML5 20 1 2 1 3 Ứng dụng 21 1 2 2 CSS3 24 1 2 2 1 Khái niệm 24 1 2 2 2 Một số ưu điểm của CSS3 24 1 2 3 Sự kết hợp giữa HTML5 và CSS3 24 1 2 4 Những điểm khác và nổi bật của HTML5 và CSS3 25 CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN 28 2 1 Khảo sát hiện trạng 28 2 2 Phân tích yêu cầu 28 2 2 1 Đặt vấn đề 28 2 2 1 1 Định nghĩa bài toán 28 2 2 1 2 Hệ thống cũ 29 2 2 1 3 Mục đích của hệ thống mới 29 2 2 1 4 Yêu cầu chức năng 30 2 2 1 5 Yêu cầu phi chức năng 30 2 2 2 Tác nhân của hệ thống 31 2 2 3 Xác định các ca sử dụng(UC) của các tác nhân 31 2 2 4 Biểu đồ Ca sử dụng của hệ thống 33 2 2 4 1 Biểu đồ UC tổng quát 33 2 2 4 2 Biểu đồ UC đăng ký 33 2 2 4 3 Biểu đồ UC đăng nhập 34 2 2 4 4 Biểu đồ tìm kiếm sản phẩm 34 2 2 4 5 Biểu đồ UC mua hàng 35 2 2 4 6 Biểu đồ UC thanh toán 35 2 2 4 7 Biểu đồ UC nhập hàng 36 2 2 4 8 Biểu đồ UC xuất hàng 36 2 2 5 Đặc tả ca sử dụng 37 2 3 Thiết kế các tương tác của hệ thống 52 2 3 1 UC Đăng ký 52 2 3 2 UC đăng nhập 53 2 3 3 UC tìm kiếm sản phẩm 54 2 3 4 UC thanh toán 55 2 3 5 UC nhập hàng 56 2 3 6 UC xuất hàng 57 2 4 Thiết kế các lớp của hệ thống 58 2 4 1 Xác định các lớp biên 58 2 4 2 Xác định các lớp điều khiển 59 2 4 3 Xác định các lớp thực thể 59 2 4 4 xây dựng thẻ CRC của các lớp thực thể 62 2 4 5 Biểu đồ lớp của hệ thống 69 2 5 Thiết kế cơ sở dữ liệu của hệ thống 70 2 5 1 Biểu đồ mô hình quan hệ 70 2 5 2 Mô tả các bảng 70 2 6 Thiết kế giao diện 74 2 6 1 Biểu đồ định hướng giao diện người dùng cho chức năng đăng ký 74 2 6 2 Biểu đồ định hướng giao diện người dùng cho chức năng đăng nhập 75 2 6 3 Biểu đồ định hướng giao diện người dùng cho chức năng mua hàng 76 CHƯƠNG 3: XÂY DỰNG HỆ THỐNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN 77 3 1 Kiến trúc vật lý của hệ thống 77 3 1 1 Biểu đồ thành phần 77 3 1 2 Biểu đồ triển khai 77 3 2 Các chức năng của hệ thống được cài đặt trong chương trình Demo 78 3 3 Một số giao diện chính của hệ thống 79 3 3 1 Hình ảnh ở thiết bị màn hình lớn hơn 1200px 79 3 3 1 Hình ảnh ở thiết bị màn hình thiết bị từ 767px đến 979px 80 3 3 3 Hình ảnh ở thiết bị màn hình thiết bị nhỏ hơn 767px 82 Phần 3 KẾT LUẬN VÀ KIẾN NGHỊ 85 Phần 4 TÀI LIỆU THAM KHẢO 86 DANH MỤC CÁC TỪ VIẾT TẮT HTML HyperText Markup Language CSS Cascading Style Sheet RWD Responsive Web Design UC Use Case DANH MỤC CÁC HÌNH ẢNH Hình1 1 Hình Ảnh sản phẩm thu nhỏ 7 Hình 1 2 Hình ảnh tin công nghệ 8 Hình 1 3 Hình ảnh sản phẩm thu nhỏ 10 Hình 1 4 Hình ảnh tin công nghệ 3 hàng 11 Hình 1 5 Hình ảnh form đặt hàng 2 cột 12 Hình 1 6 Hình ảnh sản phẩm thu nhỏ 16 Hình 1 7 Hình ảnh tin công nghệ 1 cột 16 Hình 1 8 Hình ảnh form đặt hàng 1 cột 17 Hình 3 1 Hình ảnh sản phẩm thu nhỏ 79 Hình 3 2 Hình ảnh tin công nghệ 80 Hình 3 3 Hình ảnh sản phẩm thu nhỏ 80 Hình 3 4 Hình ảnh tin công nghệ 3 hàng 81 Hình 3 5 Hình ảnh form đặt hàng 2 cột 81 Hình 3 6 Hình ảnh sản phẩm thu nhỏ 1 cột 82 Hình 3 7 Hình ảnh tin công nghệ 1 cột 83 Hình 3 8 Hình ảnh form đặt hàng 1 cột 84 Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 1 Phần 1 MỞ ĐẦU 1 1 Lý do chọn đề tài Với sự phát triển mạnh mẽ của công nghệ thông tin và sự lớn mạnh của mạng máy tính toàn cầu Công nghệ thông tin đang được ứng dụng rộng rãi trên tất cả các lĩnh vực của cuộc sống, nó ngày càng được quan tâm và sử dụng hiệu quả về mọi mặt Như chúng ta cũng thấy trong thị trường hiện nay thì việc cạnh tranh về kinh doanh ngày càng trở nên quyết liệt và hầu hết những nhà kinh doanh, những công ty lớn đều rất chú tâm đến việc làm thoả mãn khách hàng một cách tốt nhất So với kinh doanh truyền thống thì việc kinh doanh trực tuyến sẽ tốn chi phí thấp hơn, hiệu quả sẽ đạt cao hơn, với lợi thế của công nghệ Internet việc truyền tải thông tin về sản phẩm nhanh chóng, thuận tiện Kết hợp với bộ phận giao hàng tận nơi, thông qua bưu điện và ngân hàng để thanh toán tiền, càng tăng thêm thuận lợi để loại hình này phát triển Cùng với sự phát triển mạnh mẽ của công nghệ thì các thiết bị điện tử cũng nhanh chóng phát triển theo, trong lĩnh vực thiết kế và phát triển web, chúng ta nhanh chóng nhận ra rằng không thể theo kịp với sự phát triển của các thiết bị mới với những độ phân giải màn hình khác nhau Đối với các doanh nghiệp, tạo ra từng phiên bản website phù hợp với mỗi thiết bị có độ phân giải mới là điều không thể, hoặc ít nhất là không thực tế Các trang web cần phải có công nghệ tự độn1g đáp ứng theo thiết bị của người dùng, điều này sẽ loại bỏ sự cần thiết cho nhiều thiết kế web khác nhau và giảm thiểu thời gian cũng như chi phí thiết kế web Từ nhu cầu thực tế đó em đã chọn đề tài “ Ứng dụng Responsive vào trong xây dựng website bán hàng điện tử trực tuyến với HTML5 và CSS3” 1 2 Mục tiêu của đề tài Nắm vững ngôn ngữ HTML5 và CSS3 Phân tích và thiết kế hệ thống hướng đối tượng để đưa ra một sản phẩm phần mềm có các chức năng cần thiết Xây dựng được một website bán hàng điện tử trực tuyến 1 3 Đối tượng và phạm vi nghiên cứu 1 3 1 Đối tượng nghiên cứu Đề tài chủ yếu nghiên cứu về công nghệ Responsive, ngôn ngữ HTML5 và CSS3 1 3 2 Phạm vi nghiên cứu Nghiên cứu kiến thức nền tảng về Responsive, HTML5, CSS3 Nghiên cứu triển khai ứng dụng trên cơ sở đáp ứng nhu cầu của website bán hàng điện tử trực tuyến Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 2 1 4 Phương pháp nghiên cứu Khảo sát các cửa hàng bán hàng điện tử Tìm hiểu thông tin trên sách báo, các thông tin từ Internet và các phương tiện truyền thông Tìm hiểu, học hỏi kiến thức từ giáo viên và bạn bè 1 5 Lịch sử nghiên cứu Responsive là công nghệ thiết kế website thế hệ mới đang được phát triển trong những năm gần đây, đến năm 2015, công nghệ này đã phát triển bùng nổ và trở thành một trào lưu trong cộng đồng những nhà phát triển web cũng như doanh nghiệp Những công ty chuyên thiết kế web Responsive: Công ty TNHH phần mềm Việt Nhân, công ty EC Việt Nam Một số website được ứng dụng công nghệ responsive: Trang web tin tức lớn nhất thế giới BBC, trang The Google Cultural Institute, công ty Sony Việt Nam 1 6 Đóng góp của đề tài Xây dựng được website bán hàng điện tử trực tuyến theo công nghệ Responsive 1 7 Cấu trúc đề tài Gồm có 3 chương như sau: Chương 1: Tổng quan về công nghệ Responsive, HTML5 và CSS3 Chương 2: Phân tích và thiết kế hệ thống website bán hàng điện tử trực tuyến Chương 3: Xây dựng hệ thống website bán hàng điện tử trực tuyến Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 3 Phần 2 NỘI DUNG NGHIÊN CỨU CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ RESPONSIVE, HTML5 VÀ CSS3 1 1 Công nghệ Responsive Web Design (RWD) 1 1 1 Lịch sử ra đời của RWD Responsive website được nhắc đến lần đầu tiên vào từ năm 2010 Tuy nhiên, phải tới đầu năm 2012 thı̀ khái niệm mới này mới được để mắt và tiếp cận Đó là những kỹ thuật mới được quan tâm, tạo ra một xu hướng và đã được rất nhiều website thực hiện thành công Responsive Web Design (thiết kế web đáp ứng linh hoạt) ta có thể hiểu là nó như là một dạng chuẩn, một xu hướng thiết kế mới Nguyên nhân xuất phát từ việc cùng với sự phát triển của khoa học công nghệ, các nhà sản xuất trên thế giới cũng không ngừng ra mắt các sản phẩm thiết bị di động, tablet với đa dạng về độ rộng của màn hình, độ phân giải…Và để đáp ứng việc thay vì không thể nào kịp với việc ứng với mỗi thiết bị di động có kích cỡ màn hình phân giải khác nhau lại xây dựng một phiên bản cho nó Điều không thể với khoảng cách lớn về sự phát triển là lý do mà Responsive Web Design xuất hiện Nó là sự kết hợp linh hoạt bởi các kỹ thuật flexible grid, responsive image và CSS media query…để từ đó chỉ với duy nhất một thiết kế website nhưng tương thích ở mọi chế độ màn hình khác nhau của các thiết bị di động, tablet nhờ sự tự thay đổi co giãn hiển thị với mọi chế độ Hiện nay, cách thức mà Responsive Web Design hoạt động là do những lập trình viên viết code mà ở đó thiết lập những giá trị quy định để trình duyệt hiểu rồi tự động thực thi để tương thích với những quy định đó tuy theo kích thước của trình duyệt Responsive Web Design đang được ngày càng nhiều hơn sự chú ý đối với cộng đồng phát triển website cũng như đối với doanh nghiệp 1 1 2 Một số khái niệm Responsive website có thể hiểu là khái niệm về một website "phản hồi", một website có khả năng "tự biến đổi" dựa trên môi trường hoạt động của chúng Cùng một website, nhưng giao diện và phương thức tương tác của website đó có thể biến đổi khi truy cập website đó từ các thiết bị khác nhau như điện thoại, ipad, tablet, laptop Responsive Web Design là kiểu mẫu phong cách thiết kế với giao diện, bố cục website thể hiện đẹp, mang tính thẩm mỹ với độ hiển thị nội dung co giãn phù hợp trên tất cả các màn hình thiết bị như desktop, laptop, tablet, smartphone và duy trì sự hiển thị nội dung nhất quán thẩm mỹ trên mọi chế độ phân giải, linh hoạt trong chuyển dữ liệu sang dạng ngang hoặc đứng một cách nhanh chóng và tiện lợi Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 4  Hiểu một cách đơn giản Web Responsive là phong cách thiết kế website làm sao cho phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình 1 1 3 Những ưu thế của Responsive Web Design  Thân thi ệ n v ớ i ng ườ i dùng Thiết kế đáp ứng rõ ràng sẽ khiến trang web trở nên thân thiện với người sử dụng bởi nó có thể “vừa vặn” với bất kỳ màn hình nào của hầu hết các thiết bị Ngày nay, công nghệ phát triển không ngừng, smartphone không hề xa lạ với con người Vì vậy nếu có một trang web áp dụng giải pháp này, mọi người sẽ luôn có khả năng kết nối với trang web một các hiệu quả nhất Với Responsive website sẽ được xử lý nhanh hơn khi người dung truy cập website những thiết bị di động Giao diện website được thiết kế tập trung hiển thị cho người dùng những nội dung quan trọng nhất, tất cả đều được thu gọn trong màn hình của thiết bị, giờ đây khách hàng truy cập website không phải mất thời gian để điều chỉnh kích thước, phóng to nội dung để có thể xem rõ hơn Có responsive website sẽ thật sự trở nên chuyên nghiệp và hiệu quả Đối với website một cột hay nhiều cột thì Responsive Web Design hiển thị vô cùng ấn tượng Và thiết kế hiện đại theo xu hướng 2014 và tương lai là flat và trải rộng full màn hình với các hiển thị theo từng dòng phẳng  Có l ợ i t ạ i phân khúc dành cho đ i ệ n tho ạ i di độ ng Nhờ có Responsive web design , có thể tính được toàn bộ số lượt người truy cập trong một trang web Có thể có được tất cả các thông tin cần thiết liên quan đến lượt người truy cập trang web bởi vì giờ đây người dùng trên di động cũng được tính lượt truy cập Do đó, lượng người truy cập được tính toán chính xác sẽ rất hiệu quả cho việc phân tích, đánh giá chất lượng của trang web hoặc nâng cấp nó  Nâng cao khả năng chia sẻ Responsive web design cũng cho người chủ trang web cơ hội để thu thập tất cả những chia sẻ của các mạng xã hội chỉ với một đường dẫn URL Nó sẽ cho phép chúng ta có những đóng góp hay hơn cho trang web, gần gũi hơn với người dùng + Không phải lo về đổi hướng người dùng Các lập trình viên sẽ không phải tạo những liên kết ngược hay đổi hướng cho người dùng điện thoại nữa Hẳn nhiên là trang web sẽ dễ dàng xuất hiện trên các công cụ tìm kiếm hơn + Ít phải bảo dưỡng hơn Phát triển một trang web riêng cho điện thoại di động là thì chúng ta phải bỏ công duy trì cả hai trang web Nhưng nếu chúng ta chọn Responsive web design, sự bảo hành cho Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 5 trang web sẽ rất nhỏ vì chỉ có duy nhất một bản thiết kế cho mọi thiết bị Điều này sẽ làm giảm khối lượng cho công việc 1 1 4 Khả năng ứng dụng Responsive Web Design hiện nay Vài năm trở lại đây, các ngôn ngữ lập trı̀nh phục vụ cho việc thiết kế website cũng có những bước tiến đáng ngạc nhiên Các ngôn ngữ lập trı̀nh cập nhật phiên bản mới cho phép khai thác nhiều tı́nh năng hơn, cung cấp nhiều công cụ hơn cho các lập trı̀nh viên HTML5, CSS3, PHP6 ngày càng được ứng dụng nhiều hơn trên các website Trước đây khoảng 2 năm, để thiết kế một website, lập trình viên thường lựa chọn màn hı̀nh tiêu chuẩn 1024x768 (độ phân giải màn hı̀nh phổ biến trước đây) cho máy tı́nh thông thường hay 320x240 cho các điện thoại di động Website cho máy tı́nh thông thường được thiết kế riêng, website cho điện thoại di động được thiết kế riêng vı̀ những giới hạn này Một số công ty chọn giải pháp là viết phần mềm cho các điện thoại di động chứ không thiết kế website bởi sự bất tiện khi lướt web trên điện thoai di động Nhưng hiện nay, màn hı̀nh máy tı́nh thường là màn rộng lớn, với độ phân giải phổ biến 1366x768, và độ phân giải này cũng đang có xu hướng nâng cao thêm Các điện thoại cũng có độ phân giải rất lớn so với trước đây, và khá phong phú: 720x1280, 480x800 Các thiết bị di động tablet mới cũng có độ phân giải không đồng đều: 1024x600, 1024x768,2048×1536 Điều này làm cho việc thiết kế giao diện website trở nên khó khăn hơn, do rất khó để tı̀m ra được một quy chuẩn chung Chı́nh điều này cũng thôi thúc sự phát triển của Responsive web design tạo một website có thể thı́ch ứng với tất cả các độ phân giải màn hı̀nh Công nghệ Responsive Web Design có thể nhận diện được thiết bị đang truy cập là máy tı́nh bảng Ipad hay điện thoại di động thông dụng và trả về giao diện tự động hợp lý và dễ sử dụng nhất Responsive Web Design còn có thể xác định được độ phân giải đưa ra giao diện và hı̀nh ảnh không bị méo mó hay vỡ giao diện Và có thể tự động loại bỏ những hı̀nh ảnh ,slide… được phép hiển thị hay không ? Để thiết bị có thể tải website nhanh nhất và dễ sử dụng nhất trên những thiết bị có màn hı̀nh hạn chế và tốc độ yếu 1 1 5 Cơ chế hiển thị đáp ứng thiết bị người dùng Khi nhận một yêu cầu vào website do người dùng gửi tới, máy chủ chứa website sẽ phân tích xem người dùng đang sử dụng loại thiết bị gì và trình duyệt web gì và dựa vào đó gửi xuống một file trình bày kiểu (style sheet) tương ứng File style sheet này sẽ quyết định việc hiển thị nội dung web theo cách phù hợp nhất với màn hình của thiết bị và khung nhìn khiến cho người dùng có được một trải nghiệm thân thiện nhất Ta có thể minh họa như sau: Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 6 Để nhận biết thiết bị nào đang truy cập vào trang web, người ta có rất nhiều cách Thứ nhất, mỗi trình duyệt đều có một chuỗi kí tự cụ thể để xác định tên, bộ nguồn dựng trang của chính nó Các website được phép đọc chuỗi này để biết được rằng người dùng đang dùng trình duyệt nào, thậm chí là thiết bị nào, tên gì để vào web Ví dụ, UserAgent của IE 10 0 là: Mozilla/5 0 (compatible; MSIE 10 0; Windows NT 6 1; WOW64; Trident/6 0), còn của Safari trên iPad là: Mozilla/5 0(iPad; CPU OS 6_0 like Mac OS X)AppleWebKit/536 26 (KHTML, like Gecko)Version/6 0 Mobile/10A5355d Safari/8536 25 Khi biết được máy nào đang truy cập website, người ta có thể dễ dàng xác định kích cỡ màn hình và nhiều thông tin khác liên quan đến thiết bị, từ đó dùng mã tinh chỉnh lại bố cục web ngay khi người dùng mới truy cập vào Khi bạn truy cập vào một số trang web nhất định, nó cũng dùng UserAgent để biết bạn đang dùng máy nào và đưa ra đề xuất tương ứng (ví dụ, vào https://www google com/intl/en/chrome/browser/ bằng máy Macbook thì nút download là dành cho Macbook, vào bằng máy Windows thì nút dowload lại cho phép tải file exe của Windows) Ngoài ra, việc nhận biết thiết bị còn có thể được tích hợp vào ngay trong file CSS và đây là cách mà người ta thường dùng Nhà thiết kế web có thể đặt ra các “luật”, ví dụ như nếu thiết bị truy cập vào web có độ phân giải chiều ngang thấp hơn 700px thì không tải thành phần A, sắp xếp lại thành phần B và C Còn nếu thiết bị có màn hình từ 700px trở lên, thành phần A sẽ xuất hiện, B và C giữ nguyên vị trí ban đầu Ở phần này chúng ta sẽ tìm hiểu về “Media Query” Media Query là cú pháp của CSS3 giúp ta có thể phân các đoạn CSS chúng ta ra nhiều phần khác nhau tương ứng với kích thước của các loại thiết bị Kích thước chúng ta đang cần phân chia chính là độ rộng của màn hình Cú pháp của Media Query như sau: - @media screen and (max-width: “kích thước lớn nhất mà chúng ta xét(px)”){ Kiểu CSS hiển thị } - @media screen and (max-width: “kích thước lớn nhất mà chúng ta xét(px)”){ Kiểu CSS hiển thị } Để hiểu rõ hơn về cơ chế hiển thị đáp ứng thiết bị người dùng chúng ta sẽ đi vào phần Demo trang web bán hàng điện tử như sau: + Đối với màn hình có giá trị cao nhất là 1200px: @media (max-width: 1200px) { span4 { Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 7 width: 300px; } } Thì trang web sẽ hiển thị: + Phần hình ảnh sản phẩm thu nhỏ với giá trị chiều rộng là 300px…vv: Hình1 1 Hình Ảnh sản phẩm thu nhỏ kích thước lớn Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 8 + Tin công nghệ sẽ hiển thị thành 3 cột hình lớn: Hình 1 2 Hình ảnh tin công nghệ 3 cột lớn + Đối với màn hình thiết bị từ 767px đến 979px @media (max-width: 979px) { body { padding-left:0; padding-right:0; } navbar-fixed-top, navbar-fixed-bottom { position: fixed; margin-left: 0px; margin-right: 0px; } navbar nav > li > a { line-height: 20px; vertical-align: middle; Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 9 } section { padding-left:20px; padding-right:20px; } nav-collapse nav { float: none; margin: 0 0 10px; } nav-collapse nav > li { float: none; } nav-collapse, nav-collapse collapse { width: 100%; display: inherit; clear: both; } thumbnail more { margin-left:-21px; width:40px; height:40px; border-radius:30px; line-height: 40px; } thumbnail:hover more { margin-top:-20px; } newsletter form { text-align:center; } project-infoinfo span { width: 154px; display: inline-block; margin-top: 12px; color: gold; font-size: 25px; Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 10 margin-left: 22%; } project-infoinfo div { margin-bottom: 3px; font-size: 14px; } popup-inner{ top:60%; } span4 { width: 228px; } } Thì các thành phần sẽ bị thay đổi như: + Phần nội dung( thẻ body), phần menu( navbar-fixed-top, navbar-fixed-bottom) và hình ảnh sản phẩm thu nhỏ khi đó sẽ có giá trị chiều rộng là 228px…vv Hình 1 3 Hình ảnh sản phẩm thu nhỏ Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 11 + Tin công nghệ sẽ hiển thị 3 cột giống màn hình lớn hơn 1200px nhưng kích thước nhỏ hơn: Hình 1 4 Hình ảnh tin công nghệ 3 cột Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 12 + Form đặt hàng sẽ hiển thị 2 cột: Hình 1 5 Hình ảnh form đặt hàng 2 cột + Đối với màn hình nhỏ hơn767px: @media (max-width: 767px) { body { padding-right: 20px; padding-left: 20px; } info-mail { width:90%; padding:15px 0px; } project-description { Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 13 padding-left:20px; } row-fluid { width: 100%; } row, thumbnails { margin-left: 0; } thumbnails > li { float: none; margin-left: 0; } [class*="span"], uneditable-input[class*="span"], row-fluid [class*="span"] { display: block; float: none; width: 100%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } span12, row-fluid span12 { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } row-fluid [class*="offset"]:first-child { margin-left: 0; } input-large, input-xlarge, Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 14 input-xxlarge, input[class*="span"], select[class*="span"], [class*="span"], uneditable-input { display: block; width: 100%; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input-prepend input, input-append input, input-prepend input[class*="span"], input-append input[class*="span"] { display: inline-block; width: auto; } controls-row [class*="span"] + [class*="span"] { margin-left: 0; } modal { position: fixed; top: 20px; right: 20px; left: 20px; width: auto; margin: 0; } popup-inner { max-width:780px; width:60%; padding:40px; position:absolute; top:96%; Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 15 left:50%; box-shadow:0px 2px 6px rgba(0,0,0,1); border-radius:3px; background:#fff; } Dh_td { margin-top: -52px; text-align: center; color: #0088cc; border-bottom: 1px solid #0088cc; width: 100%; margin-left: 2%; } form_infor margin-right-20 margin-left-10 { width: 100%; } } Thì nội dung sẽ hiển thị: + Hình ảnh sản phẩm có chiều ngang bằng với màn hình thiết bị ([class*="span"], uneditable-input[class*="span"], row-fluid [class*="span"] { display: block; float: none; width: 100%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }) Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 16 Hình 1 6 Hình ảnh sản phẩm thu nhỏ + Tin công nghệ sẽ hiển thị theo hàng: Hình 1 7 Hình ảnh tin công nghệ 1 cột Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 17 + Form đặt hàng sẽ hiển thị 1cột( popup-inner { max-width:780px; width:60%; padding:40px; position:absolute; top:96%; left:50%; box-shadow:0px 2px 6px rgba(0,0,0,1); border-radius:3px; background:#fff; }): Hình 1 8 Hình ảnh form đặt hàng 1 cột Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 18 1 1 6 Những kỹ thuật thiết kế Responsive Web Design  CSS3 Transitions & Media Queries CSS (Cascading Style Sheets) là file css có tác dụng tách phần định dạng style ra khỏi nội dung HTML giúp dễ dàng quản lý được nội dung trong HTML Ở đây cái tên CSS3 Transitions & Media Queries đã nói lên đặc tính của kỹ thuật này: CSS chuyển đổi với truy vấn, yêu cầu phương tiện truyền thông Trong đó thiết kế cần tới CSS Media Queries để giúp website tự động thay đổi bố cục theo màn hình ( CSS3 Media Queries được phát triển lên từ Media Type CSS2) Tuy nhiên nếu chỉ có CSS Media Queries thì khi có sự thay đổi về kích cỡ trình duyệt thì một chuyển đổi rõ ràng và đột ngột giữa hai kiểu màn hình Và sự kết hợp thêm CSS Transitions với các mã vô cùng đơn giản khiến sự chuyển đổi diễn ra mềm mại hơn rất nhiều, ví dụ như một đoạn sau: body { transition: all 3s linear; -0-transition:all 3s linear -moz-transition:all 3s linear -webkit-transition:all:all 3s linear } Thêm đoạn mã CSS Transition đơn giản này nhưng sự chuyển đổi sẽ diễn ra suôn sẻ hơn rất nhiều so với khi chỉ có CSS Media Queries  Responsive Data Tables Tự động linh hoạt co giãn thay đổi mọi hiển thị chỉ với một phiên bản web đáp ứng đòi hỏi của các thiết bị di động tablet có kết nối Internet Responsive Data Tables cho giải pháp tạo một định dạng linh hoạt với hình ảnh tự động điều chỉnh để không bị vỡ layout hay nói một cách khác chúng ta hiển thị dữ liệu thay thế cho dữ liệu chính bằng một bản mini-table với đầy đủ về nội dung như bản chính ( Layout: có thể hiểu là sự dàn trang định dạng bố cục của người thiết kế )  Responsive Navigation Menus Đây là kỹ thuật chuyển đổi Menu chứa các trang chính của website ở dạng thông thường thành một Drop Down Menu – một dạng trình đơn thả xuống danh sách các lựa chọn khi website truy cập với một định dạng trình duyệt bị thu nhỏ Drop Down Menu với khái niệm miêu tả “ Một danh sách các lựa chọn được xổ xuống từ thanh trình đơn khi được yêu cầu và vẫn mở mà không có thêm hành động cho các thiết lập của người dùng đóng nó hoặc chọn một mục trong các danh sách” có thể hiểu cơ bản là một danh sách (thực đơn) lựa chọn sẽ được sổ ra khi yêu cầu và mở ra như thế cho đến khi người sử dụng đóng nó lại hoặc chọn một mục của danh sách đó Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 19  CSS Media Queries and Using Available Space Kỹ thuật này có thể được hiểu là sử dụng CSS để thực hiện những yêu cầu thay đổi bố trí của người dùng trên cả website một cách tinh tế với không gian sẵn có Tuy nhiên đây là một vấn đề khá lớn và chuyên sâu Ví dụ cú pháp CSS Media Queries để truy vấn những yêu cầu thuộc tính của tất các thiêt bị đa phần là thuộc tính “screen” và “ print” trong một khai báo duy nhất dạng như sau: Sau khi khai báo thì ta đưa trực tiếp vào file CSS dạng như: @media screen { body { width: 75%; } } @media print { body { width: 100%; } } Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 20 1 2 HTML5 và CSS3 1 2 1 HTML5 1 2 1 1 Khái ni ệ m HTML5 là một chuẩn mới và là thế hệ tiếp theo của ngôn ngữ đánh dấu siêu văn bản – HyperText Markup Language explained (gọi tắt là HTML) HTML5 là một ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web và sẽ là công nghệ cốt lõi của Internet trong tương lai không xa, được đề xuất đầu tiên bởi Opera Software, đây là phiên bản thứ 5 của ngôn ngữ HTML - được tạo ra năm 1990 và chuẩn hóa như HTML4 năm 1997 - và xuất hiện vào tháng 12 năm 2012, là ngôn ngữ được giới thiệu bởi World Wide Web Consortium (W3C) Các phiên bản trước của HTML, như HTML 4 01 đã ra đời từ năm 1999 Cho đến nay các trang web đã có những thay đổi rất nhiều kể từ đó HTML5 vẫn còn trong giai đoạn phát triển và hoàn thiện Tuy nhiên, nhiều phiên bản trình duyệt mới hiện nay đã có các hỗ trợ cho những phần tử, thẻ mới có trong HTML5 và các APIs 1 2 1 2 Các th ẻ m ớ i c ủ a HTML5 HTML5 thêm một số thẻ mới đặc biệt để xác định những cấu trúc phổ biến như: - Thẻ : nó cũng giống như một phần hoặc một chương của một quyển sách, hay một đoạn trong một chương - Thẻ : phần đầu hiển thị trên trang, không giống như thẻ head - Thẻ : phần dưới chân trang giống như chữ ký trong một thông điệp email - Thẻ : một tập liên kết tới những trang khác - Thẻ : có thể xem như một bài viết cụ thể (chẳng hạn như một blog entry rất thích hợp để đặt trong một ) - Thẻ : thường đóng vai trò như một sidebar cung cấp các thông tin liên quan cho thẻ chứa nó - Thẻ : xác định nội dung âm thanh, chẳng hạn như âm nhạc hoặc luồng âm thanh khác bất kỳ - Thẻ : Tạo một danh sách gợi ý cho input - Thẻ : Định nghĩa một trường sinh cặp key (cho form) - Thẻ : Định nghĩa một kết quả tính toán - Thẻ : Dùng cho mục đích đồ họa, vẽ bằng JavaScript - Thẻ : Định nghĩa một nguồn multy media cho hoặc - Thẻ : Định nghĩa một khung chứa cho các chương trình bên ngoài (như là Flash) - Thẻ : Định nghĩa text tracks cho hoặc Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 21 …vv 1 2 1 3 Ứ ng d ụ ng  HTML5 làm gi ả m t ầ m quan tr ọ ng c ủ a các plug-ins Trước đây, câu chuyện về Web gắn với plug-in hay add-on của một trình duyệt bởi nó khuyến khích sự sáng tạo cũng như sự trải nghiệm Âm thanh, ảnh động hay những thủ thuật khác xuất hiện trên Website thông qua plug-ins, phát triển bởi Sun, Adobe, RealAudio, Microsoft và rất nhiều hãng khác Giao diện plug-ins mở đối với tất cả và mọi người có thể trải nghiệm bằng cách thêm những tính năng mới Cuộc chiến về Flash có thể là cuộc chiến nổi tiếng nhất, nhưng sức mạnh mới được từ HTML5 cũng đe dọa tới hệ mã lệnh JavaFX là lý tưởng, nhưng ai là người muốn học một loại cú pháp mới trong khi JavaScrip và Canvas đang làm rất tốt Ai cần hệ thống Real khi các video sẽ được chuyển thành audio và video?, Plug-in dường như sẽ bị lãng quên Plug-ins sẽ bị biến mất hoặc không được dùng, nó còn phụ thuộc vào việc làm của chúng ta Nếu chúng ta muốn vẽ hình ảnh, Canvas là thích hợp nhất Nhưng nếu muốn vẽ một thế giới 3-D đặc biệt, giống như trong các trò chơi Flash và Shockwave phức tạp, chúng ta sẽ phải dùng tới plug-in khi nó có thể kết nối trực tiếp tới video cũng như chạy thế giới game 3-D  HTML5 h ỗ tr ợ đồ h ọ a t ươ ng tác Website cũ tải hình ảnh bằng cách tải file GIF hay JPG Website mới có thể xây dựng hình ảnh trên Canvas Một loạt thư viện đồ họa đẹp được đưa ra, giúp cho đồ họa của Website trở nên tương tác hơn Hiện nay, JavaScript có thể tính toán cũng như vẽ hình ảnh bằng dữ liệu Mọi thứ trở nên sống động khi những lập trình viên có thời gian để đưa ra giải pháp Adobe mới đây đã bắt đầu phát triển đồ họa tinh xảo cho HTML5 Sự xuất hiện của những công cụ này sẽ mở đầu cho những khả năng mới cũng như đồ họa sẽ được tinh xảo hơn hiện nay  HTML5 cho phép các ứ ng d ụ ng k ế t n ố i t ớ i khu v ự c l ư u tr ữ file Những người lập trình Web thường lưu trữ một lượng lớn thông tin trong các cookies (300 cookies tương đương với 4096 byte) Bộ công cụ dùng plug-in Flash để trưng dụng lựa chọn từ ổ đĩa là phiên bản đầu của bộ công cụ Dojo Tuy nhiên, giờ đây chỉ cần sử dụng HTML5 là được Lập trình viên có thể lưu trữ bất cứ thứ gì họ muốn Điều này giúp việc cài đặt các ứng dụng dễ dàng hơn giống như các ứng dụng cũ Các ứng dụng chạy mã JavaScript từ ứng dụng lưu trữ HTML5 ngoại tuyến và hoạt động ngay cả khi kết nối Website đang hoạt động Phương pháp này không ảnh hưởng tới hoạt động phát triển nhóm “đám mây” bởi những dữ liệu có thể hoạt động như những lưu trữ thông minh Lập trình game có thể lưu Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 22 trữ theo vùng những phần mô tả và ảnh minh họa, giúp tiết kiệm thời gian tải thông tin nhiều lần Ngược lại, những dữ liệu này sẽ được lưu trữ trong các tệp tin hệ thống Thế nên việc lấy lại dữ liệu không phải là dễ dàng Người dùng muốn chuyển dữ liệu từ máy này sang máy khác sẽ gặp phải khó khăn  HTML5 s ẽ đơ n gi ả n hóa chia nh ỏ d ữ li ệ u v ớ i cyborg data Ai đã từng chia nhỏ dữ liệu từ các trang web đều biết rằng HTML không giúp được nhiều ngoại trừ giúp trình duyệt nơi đặt dữ liệu Microformats trong HTML5 cung cấp các phương pháp tinh xảo giúp việc phân tích dữ liệu dễ dàng hơn Không ai có thể dự đoán microformats có thể thay đổi Web tới mức nào nhưng rất dễ để thấy được nó đã giúp các lập trình viên có nhiều giải pháp hơn  HTML5 giúp h ợ p nh ấ t các đị a ch ỉ Đối với máy chủ Web, địa chỉ máy tính của chúng ta đơn thuần chỉ là những con số ẩn danh Chuẩn HTML5 cho phép các trình duyệt định vị vị trí của người dùng Tuy nhiên, nó sẽ không hoạt động với các máy bàn (hoạt động với GPS hoặc Wifi), nhưng nó lại hoạt động tốt với smartphone cầm tay  HTML5 làm video c ủ a Website đẹ p h ơ n Chuẩn HTML5 giúp các nhà lập trình tiếp hợp videp dễ dàng hơn với thông tin trên trang, cung cấp các ứng dụng tới lập trình viên jQuery và PHP ngoài Flash, Silverlight hay JavaFX Mọi người đều muốn cung cấp mã nguồn mở để mở những hình ảnh động và âm thanh tương ứng dẫn đến việc không thống nhất Chuẩn HTML5 sẽ là mã nguồn mở trung gian, có nghĩa là chúng ta thay đổi cách gọi từ plug-in thành codec Tuy nhiên, dù ta có chuẩn video nhưng trình duyệt lại rất khó để dịch dữ liệu Mặc dù vẫn còn sự cân nhắc cũng như thiếu sự nhất trí hoàn toàn, thẻ video mới này sẽ cho thấy sức mạnh của video, giúp cho HTML bớt đi kí tự văn bản và video sẽ được dùng nhiều hơn  HTML5 t ạ o ra widget chat Widget sử dụng trong iframes cho phép các trang web ghi nhớ lại thông tin từ các trang khác trong vòng nhiều năm Tuy nhiên chúng lại bị các rào cản an ninh giới hạn khi chỉ lưu trữ mỗi widget trong một sandbox riêng HTML5 cung cấp cơ chế chuẩn giúp các widget có thể trò chuyện với nhau Mặc dù chúng vẫn khống thể vượt qua được sandbox của widget khác nhưng các widget có thể gửi tin nhắn qua lại, kết nối công việc, thậm chí là chuyển đổi thông tin về người đang sử dụng máy tính Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 23 Các nhà quảng cáo có cơ hội để đăng quảng cáo với các ô hình chữ nhật khác nhau xuất hiện trên các trang web Trong khi đó, các nhà phát triển vẫn khẳng định sẽ tìm được những ứng dụng thức tế khác Tuy nhiên, sử dụng cơ chế này để gửi tin nhắn thì chỉ mới là bước đầu Vẫn cần tạo ra tiêu chuẩn cho những thông tin được chuyển đi do các widget là một cơ hội để trò chuyện giữa mọi người nên chúng cần phải có những ngôn từ chuẩn  HTML5 có th ể t ă ng kh ả n ă ng b ả o m ậ t Mỗi trình duyệt có một plug-in riêng do các nhóm lập trình khác nhau lập ra với những tiêu chuẩn khác nhau, được đưa ra vào thời điểm khác nhau và kiểu mẫu bảo mật cũng khác nhau Thông thường, một số phiên bản plug-in có tính bảo mật hơn so với loại khác Và khi số lượng plug-in gia tăng, chúng làm tăng độ phức tạp trong kiểm tra các lỗi an ninh Liệu plug-in hay trình duyệt đã có lỗ hổng lớn, liệu có phức tạp không khi chỉ cập nhât trình duyệt mà không nâng cấp plug-in hoặc ngược lại, ai có thể nhớ được? Thay thế nhiều loại plug-in với các đặc điểm được tích hợp với HTML 5 sẽ bỏ đi được những khuyết điểm có trong các plug-in trước đó Những khuyết điểm có thể bị lợi dụng để thiết lập mã độc Nếu như nhóm an ninh kiểm tra Firefox, Chorme hoặc IE cho phép cài đặt các plug-in này, sự nguy hiểm sẽ giảm bớt đi  HTML5 đơ n gi ả n hóa vi ệ c phát tri ể n web Bill Mill – chuyên viên thiết kế cho Lookingglass Cyber Solutions giải thích ngắn gọn về sự thay đổi này: “Tôi thực sự thích HTML5 vì nó cho phép tôi làm việc trong một môi trường thích hợp, trình duyệt kết hợp với Javascript, DOM mà không phải bật đi bật lại Flash và HTML5 Nó vừa là một ngôn ngữ lại vừa là một công cụ, không khác biệt lắm so với các plug-in khác” HTML5 cung cấp một ngôn ngữ lập trình JavaScript, một kiểu dữ liệu (XML hoặc DOM) và một phần nguyên tắc thiết lập (CSS) để kết nối văn bản, audio, video và Đồ họa Thách thức trong việc tạo ra cái gì đó tốt đẹp vẫn là mênh mông nhưng điều đó sẽ đơn giản hơn khi làm việc trong một tiêu chuẩn thống nhất  Bên cạnh những ứng dụng đó HTML5 vẫn còn nhiều thiếu sót, gây khó khăn cho người sử dụng chúng: - Có r ấ t ít các trình duy ệ t web h ỗ tr ợ HTML5: Việc HTML5 ra đời tạo nên một sự đổi mới cho công nghệ website, nhưng việc hỗ trợ công nghệ HTML5 để có thể hiển thị tốt cho người sử dụng thì vẫn còn rất ít, chỉ có các trình duyệt thông dụng như Google Chorme, Firefox và mới update nên có thể hỗ trợ tốt HTML5, các trình duyệt còn lại vẫn theo phương thức cũ nên việc ứng dụng toàn bộ công nghệ HTML5 vào quá trình thiết kế như thiết kế website asp là một điều mạo hiểm, có thể sẽ ứng dụng rộng rãi trong tương lai nhưng với thời điểm hiện tại vẫn còn nhiều khó khăn Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 24 - S ự m ớ i m ẻ trong câu l ệ nh: Do mới phát triển và ra đời không lâu nên vẫn còn rất nhiều người lập trình chưa thông thuộc các công lệnh mới nên việc chuyển đổi giữa công nghệ cũ sang công nghệ HTML5 mới sẽ mất khá nhiều thời gian và công sức 1 2 2 CSS3 1 2 2 1 Khái ni ệ m CSS3 là một chuẩn mới nhất của CSS, hay nói cách khác nó là một phiên bản mới của CSS Nó được chia ra làm nhiều module và mỗi module sẽ có những nhiệm vụ khác nhau, khi kết hợp chúng với nhau sẽ tạo nên những hiệu ứng tuyệt vời CSS3 được xây dựng dựa trên các nguồn gốc của các style, selectors và cascade dựa trên phiên bản cũ của CSS 2 0 trước đó Nó cho phép thực thi thêm một số tính năng mới, bao gồm cả mới selectors, pseudo-class và các properties Bằng cách sử dụng các tính năng mới này, việc thiết kế trình bày template sẽ trở nên dễ dàng hơn rất nhiều 1 2 2 2 M ộ t s ố ư u đ i ể m c ủ a CSS3  CSS làm t ă ng s ứ c m ạ nh cho HTML: CSS kết hợp với HTML tạo nên một trang web có kĩ thuật cao hơn và giao diện đẹp mắt hơn Ngoài ra, khi sử dụng CSS sẽ giúp sắp xếp các thành phần trong HTML như: div, header, footer , body… một cách khoa học hơn  CSS h ỗ tr ợ các công c ụ tìm ki ế m: CSS giúp loại bỏ những đoạn code thừa vì các thẻ này thường hay được sử dụng lặp lại như các thẻ , thẻ

hay các thuộc tính không quan trọng được sinh ra bởi các công cụ lập trình  CSS giúp các website có s ự đồ ng b ộ tuy ệ t đố i: Dù website có bao nhiêu trang đi nữa thì cũng chỉ phải định dạng một file CSS duy nhất Khi muốn phát triển giao diện của website chúng ta chỉ phải thay đổi một trang duy nhất, các trang khác sẽ tự động thay đổi theo  CSS t ươ ng thích v ớ i h ầ u h ế t các trình duy ệ t: Ngôn ngữ này được hỗ trợ bởi hầu hết các trình duyệt Trang web được hiển thị ở các trình duyệt khác nhau với nội dung khá nhất quán Tuy nhiên trong một số trường hợp, người thiết kế web cần phải xác định khách hàng thường hay sử dụng trình duyệt nào để có sự điều chỉnh phù hợp 1 2 3 Sự kết hợp giữa HTML5 và CSS3 HTML5 và CSS3 là các công cụ cần thiết cho việc tạo ra các trang web động, sự kết hợp giữa HTML5 và CSS3 sẽ làm cho các ứng dụng web và trang web trở lên hấp dẫn dựa trên các thuộc tính mà các thế hệ ngôn ngữ trước không có HTML5 và CSS3 sẽ giúp các nhà thiết kế Wedsite dễ dàng hơn trong việc tạo ra các hiệu ứng động và các trò chơi tương tác mà không cần dùng đến Flash Một số ví dụ về Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 25 những gì chúng ta có thể làm với HTML5, CSS3 và một ít hỗ trợ từ JavaScript đó là Akihabra Games và Star Wars AT-AT Walker Thiết kế Shack cũng có một số ví dụ hiệu ứng động CSS3 khác Mặc dù không thể thay thế hoàn toàn cho Flash nhưng HTML5 và CSS3 có nhiều hứa hẹn trong lĩnh vực này Một số trình duyệt hiện tại không chấp nhận tất cả các tính năng phức tạp của HTML5 và CSS3, nhưng các nhà phát triển đang làm việc để thực hiện các tính năng này trên tất cả các trình duyệt một cách nhanh chóng nhất có thể 1 2 4 Những điểm khác và nổi bật của HTML5 và CSS3 HTML5 và CSS3 là những công nghệ mới nhất cho ứng dụng việc thiết kế web  HTML5 Các tính năng video của HTML5 cho phép đơn giản hoá việc thêm một video vào trang Web đã được nhận được nhiều sự chú ý, không những thế HTML5 còn có nhiều tính năng làm nó trở nên tuyệt vời đối với người sử dụng cũng như các nhà phát triển web  HTML5 có m ộ t s ố tính n ă ng để phân bi ệ t nó v ớ i HTML: HTML 5 vẫn giữ cho mình những cấu trúc cơ bản như HTML nhưng bên cạnh đó bổ sung thêm các tập lệnh mới, kết hợp với CSS3, tạo ra phân khung cho trang Có những câu lệnh trong HTML sẽ không được dùng trong HTML5 Bên cạnh đó HTML5 còn có khả năng hỗ trợ người lập trình như lập trình API (Application Programming Interface) và DOM (Document Object Model – Trong HTML đã được ứng dụng) Một số trình duyệt có hỗ trợ HTML 5: Firefox, Chrome, Safari, Opera Microsoft cũng đã được công bố là sẽ đưa HTML 5 vào trong sản phẩm mới IE 9 của mình HTML 5 sẽ là ngôn ngữ nền tảng web trong tương lai gần…  HTML5 có nh ữ ng đ i ể m n ổ i b ậ t sau: - Khả năng tương thích: HTML5 vẫn giữ lại các cú pháp truyền thống trước đây, và nếu một vài tính năng mới nào đó của HTML5 chưa được trình duyệt hỗ trợ thì nó phải có một cơ chế fall back để render trong các trình duyệt cũ - Tính tiện dụng: đặt người dùng lên hàng đầu nên cú pháp của HTML5 khá thoải mái (dù chưa được chặt chẽ như XHTML), thiết kế hỗ trợ sẵn bảo mật, và sự tách biệt giữa phần nội dung và trình bày ngày càng thể hiện rõ: công việc định dạng hầu hết do CSS đảm nhiệm, HTML5 không còn hỗ trợ phần lớn các chức năng định dạng trong các phiên bản HTML trước đây - Khả năng hoạt động xuyên suốt giữa các trình duyệt: HTML5 cung cấp các khai báo đơn giản hơn và một API mạnh mẽ Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 26 - Khả năng truy xuất rộng rãi: HTML5 mang lại sự hỗ trợ tốt hơn cho cácngôn ngữ và cho người khuyết tật, đồng thời cũng có thể hoạt động trên các thiết bị và nền tảng khác nhau - Điểm đặc trưng đầu tiên của một ngôn ngữ đánh dấu (markup language) là các thẻ Và ở mặt này thì HTML5 được bổ sung rất nhiều cái mới, từ các thẻ tổ chức nội dung (article, aside, title…) đến các thẻ hỗ trợ tương tác và multimedia (video, audio…) Trong HTML5 cũng xuất hiện một khái niệm gọi là semantic markup, tức là các thẻ có mang ngữ nghĩa Các thẻ này ra đời từ việc khảo sát các trang web và nhận diện một số thói quen đặt tên phổ biến (một số phần của trang web thường luôn được đặt một cái tên như “header”, “footer”, “nav”) Ngoài sự rõ ràng, sử dụng các semantic markup còn có thể đem lại lợi thế khi các công cụ tìm kiếm trong tương lai tận dụng chúng để phân loại kết quả Bên cạnh đó, thẻ của HTML5 cũng được xem là một cải tiến lớn Giờ đây với Form 2 0 (một cách gọi form trong HTML5), tất cả những chức năng cần (định dạng, validate data…) đã được xây dựng trực tiếp vào trong HTML không còn cần đến Ajax, Flash hay các công nghệ hỗ trợ  CSS3  CSS3 có nh ữ ng đ i ể m n ổ i b ậ t sau: - Multiple background: CSS3 cho phép áp dụng nhiều hình nền lên một phần tử (element) Tương tự như việc áp dụng đổ bóng , ta có thể dùng tất cả các thuộc tính như: background-image, background-repeat, background-position và background-size Các khai báo hình nền cách nhau bởi dấu phẩy(,): body { background: url( /images/2 png) no-repeat left top, url( /images/1 png) no-repeat right top, url( /images/3 png) no-repeat left bottom, url( /images/4 png) no-repeat right bottom; background-color: #ffffff; } - Selectors: CSS3 selectors cho phép chọn các phần tử HTML dễ dàng hơn Cách chọn của CSS3 không những giúp tiết kiệm thời gian viết CSS, giảm dung lượng file mà còn giúp cho mã HTML dễ nhìn hơn Các pseudo-classes mới cho phép chọn một nhóm các phần tử hoặc phần tử tiêng biệt nào đó (trước đây phải dùng javascript để làm việc này) Dưới đây là một số pseudo-classes mới: first-of-type: Chọn phần tử đầu tiên của thẻ nào đó last-child: Chỉ chọn phần tử cuối cùng nth-child(n): Chọn phần tử thứ n Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 27 not(e): Chọn tất cả trừ phần tử e - Resize: Với CSS3 ta có thể thay đổi kích thước phần tử với thuộc tính resize Với đoạn mã sau, ta sẽ thấy dưới cùng bên phải của thẻ div#ntuts xuất hiện một hình tam giác nhỏ để thay đổi kích thước: div#ntuts { resize: both; } - Font: Nếu ở CSS2 bị hạn chế với các font như Arial, Verdana , Tahoma vì phần lớn các máy tính có các font này thì ở CSS3 có thể sử dụng bất kỳ font nào chúng ta muốn Font sẽ được lấy từ một địa chỉ nào đó trên internet @font-face { font-family: VNIThufap2; src: url(''''http://ntuts com/fonts/VNI-Thufap2 ttf''''); } h1 { font-family: VNIThufap2; font-size: 3 2em; letter-spacing: 1px; text-align: center; } Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 28 CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN 2 1 Khảo sát hiện trạng Giả định rằng có một công ty nào đó chưa có website bán hàng điện tử trực tuyến, hoặc công ty đã có website nhưng vẫn còn sơ sài và không tương thích ở mọi chế độ màn hình khác nhau của các thiết bị di động, chủ yếu vẫn là quản lý bằng thủ công, mua bán trực tiếp tại công ty Công ty đó có nhu cầu thống kê tình hình mua bán với những tiêu chí và hình thức khác nhau Vì vậy, cách thức quản lý của công ty chưa đáp ứng được yêu cầu của thời đại Nó biểu hiện ở những nhược điểm sau đây: + Cần nhiều nhân công + Tốc độ xử lý công việc chậm + Chu trình trao đổi hàng hóa tốn khá nhiều thời gian + Thường gặp khó khăn, mất thời gian khi kiểm tra Mặt khác, mục tiêu của công ty là cải thiện năng suất làm việc của nhân viên và giảm nhân công, tạo được một trang web mà người dùng có thể truy cập dễ dàng trên tất cả các lại màn hình thiết bị Với hệ thống quản lý trên thì công ty sẽ gặp rất nhiều khó khăn trong công việc Vì vậy việc xây dựng một website bán hàng điện tử trực tuyến theo xu hướng Responsive là rất hữu ích và cần thiết 2 2 Phân tích yêu cầu 2 2 1 Đặt vấn đề 2 2 1 1 Đị nh ngh ĩ a bài toán Khi một khách hàng truy cập vào website họ có khả năng xem và tìm kiếm những mặt hàng mà họ cần theo tên mặt hàng, danh mục, tên nhà cung cấp, giá sản phẩm Khi khách hàng xem một sản phẩm cụ thể website sẽ đưa ra thông tin chi tiết về sản phẩm, bao gồm mô tả của nhà cung cấp, hình ảnh sản phẩm và các đánh giá của những khách hàng khác Nếu muốn họ có thể đưa ra đánh giá của mình về sản phẩm hoặc đưa sản phẩm vào giỏ hàng thì website sẽ đưa ra yêu cầu đăng nhập tài khoản, nếu khách hàng chưa có tài khoản thì website sẽ đưa ra hướng dẫn tạo tài khoản mới Khi tạo tài khoản mới khách hàng sẽ phải cung cấp cho website các thông tin sau: Tên khách hàng, ngày sinh, số điện thoại, địa chỉ email, tên tài khoản, mật khẩu Khi một người dùng muốn sửa đổi thông tin cá nhân thì vào mục sửa đổi thông tin và được sửa những thông tin sau: mật khẩu, email, số ĐT, số tài khoản Người quản lý website có quyền xóa tài khoản khách hàng khi khách hàng vi phạm nội quy của website Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 29 Website sẽ giữ các thông tin về các nhà cung cấp và tình trạng các mặt hàng của các công ty Các công ty muốn đưa hàng lên website thì phải đăng kí tài khoản với nhà quản lý website, cung cấp các thông tin về công ty và các mặt hàng công ty sẽ cung cấp, số tài khoản của công ty,… Tài khoản của công ty sẽ được quyền thêm các mặt hàng mới nhưng phải có sự xác nhận của người quản lý website thì thông tin về sản phẩm mới được đưa lên cho khách hàng xem 2 2 1 2 H ệ th ố ng c ũ Hoạt động của hệ thống cũ như sau: Nhân viên bán hàng sẽ tính tiền số sản phẩm mà khách hàng đã mua và lập hóa đơn giao cho khách hàng thanh toán Thủ kho sẽ quản l