1. Trang chủ
  2. » Công Nghệ Thông Tin

Tìm hiểu HTML5, CSS3 và ứng dụng xây dựng website cho công ty cổ phần du lịch bắc giang

117 337 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 117
Dung lượng 5,12 MB

Nội dung

LỜI CẢM ƠN Đầu tiên cho em gửi lời biết ơn sâu sắc đến Nguyễn Lan Oanh định hướng, cung cấp tài liệu tận tình giúp đỡ, động viên em trình thực đề tài dành nhiều thời gian tâm huyết theo sát, bảo em mặt chưa để em hoàn thành đề tài cách tốt Em xin chân thành cảm ơn cô! Em xin chân thành cảm ơn thầy (cô) trường Đại học Công nghệ thông tin Truyền thông dạy dỗ giúp em tảng kiến thức hỗ trợ cho việc làm đồ án tốt nghiệp lần Mặc dù, thân thực nỗ lực, cố gắng thực đồ án tốt nghiệp không tránh khỏi nhiều thiếu sót Do vậy, em mong nhận đóng góp quý báu toàn thể thày bạn! Thái Nguyên, tháng 06 năm 2012 Sinh viên thực Diêm Công Thảo LỜI CAM ĐOAN Em xin cam đoan nội dung đồ án tốt nghiệp với tên đề tài “ Tìm hiểu HTML5, CSS3 ứng dụng xây dựng website cho công ty cổ phần du lịch Bắc Giang” không chép nội dung từ đồ án khác, hay sản phẩm tương tự mà em làm Sản phẩm đồ án thân em nghiên cứu xây dựng nên Nếu sai em xin chịu hình thức kỉ luật Trường Đại học Công Nghệ Thông Tin Truyền Thông – Đại học Thái Nguyên Thái Nguyên, tháng 06 năm 2012 Sinh viên thực Diêm Công Thảo MỤC LỤC DANH MỤC HÌNH LỜI NÓI ĐẦU Với tăng trưởng ngày mạnh mẽ Internet, thuật ngữ Web 2.0 RIA (Rich Internet Application) diện khắp nơi Người sử dụng, trang bị phần cứng nhanh băng thông mạng tốt hơn, thường xuyên đặt yêu cầu phức tạp Web đại để sử dụng được, mà phải bắt mắt giàu khả tương tác Trước thực tế đó, rõ ràng HTML cần phải thay đổi, thay đổi trình dài Hơn 13 năm kể từ HTML4 xuất hiện, HTML5 tập tễnh bước Mặc vậy, HTML5 mang đủ sức hấp dẫn để gây nên ý đặc biệt Ngày nay, ứng dụng công nghệ thông tin việc tin học hóa xem yếu tố quan trọng hoạt động công ty Đối với công ty việc xây dựng website riêng ngày trở nên cấp thiết Thông qua website này, thông tin sản phẩm, dịch vụ công ty đến với người quan tâm, đến với khách hàng họ cách nhanh chóng kịp thời thông qua internet Hoạt động công ty quy mô lớn tăng cường mở rộng xây dựng website tốt Bắt nguồn từ công nghệ tương lai gần thực tế yêu cầu công ty cổ phần du lịch Bắc Giang với gợi ý Nguyễn Lan Oanh, em chọn đề tài “Tìm hiểu HTML5, CSS3 ứng dụng xây dựng website cho công ty cổ phần du lịch Bắc Giang” hoàn thành đồ án kế hoạch kết vậy, em xin gửi lời cảm ơn sâu sắc tới Nguyễn Lan Oanh người hướng dẫn em suốt trình thực đồ án tốt nghiệp Xin chân thành cảm ơn cô! PHẦN 1: TÌM HIỂU VỀ HTML5 & CSS3 CHƯƠNG 1: LỊCH SỬ PHÁT TRIỂN CỦA HTML5 1.1 Từ HTML đến HTML5 Năm 1989, Tim Berners-Lee nghiên cứu ngôn ngữ HTML giao thức truyền đạt thông tin giới khoa học với thành công ngày Tim Berners-Lee tạo 20 thẻ HTML, lấy ý tưởng từ ngôn ngữ SGML, điều kì diệu đáng kinh ngạc chỗ 13 số 20 thẻ hiển thị HTML4 HTML sử dụng tag để đánh dấu đoạn văn Một ví dụ đơn giản như: Mã:

This is a paragraph

Phiên HTML Tim Berners - Lee khác với sử dụng ngày nay, chẳng hạn thiếu hẳn chức định dạng văn Tuy nhiên nhờ đơn giản tag mà HTML chấp nhận rộng rãi, đưa lên thành chuẩn Trong vòng tám năm (1989 – 1997), HTML phát triển qua bốn cột mốc chính, với phiên gần HTML4 Phiên đánh dấu việc CSS1 công nhận chuẩn để định dạng trang web, DOM trở thành chuẩn cho phép ứng dụng JavaScript chạy thống trình duyệt 1.1.1 HTML1 HTML không cho phép truyền đạt cấu trúc trang phức tạp, vừa đủ phép tạo trang web đơn giản Vạn khởi đầu nan Phiên tung vào cuối năm 1990 gần năm sau, ngôn ngữ thực ứng dụng Năm 1993 chuẩn HTML trở thành tảng Mosaic - Trình duyệt Internet 1.1.2 HTML2 Nhiều công ty lớn đánh giá không sức mạnh ngôn ngữ siêu văn bản, cuối chuẩn HTML phổ biến rộng rãi Bởi tổ chức đứng hỗ trợ cho phát triển ngôn ngữ HTML, thứ bị ngừng trệ Vào tháng năm 1994, HTML2 phát hành HTML2 phiên cải tiến HTML Phiên lần tạo nỗ lực lớn người yêu thích HTML khắp giới Những người đảm nhận nỗ lực khổng lồ ý đến tất đóng góp từ khắp nơi giới cho phiên Trước tình hình này, năm 1994, Tập Đoàn Tài Chính World Wide Web thành lập với người đứng đầu Tim Berners-Lee Năm 1995, thẻ thẻ “bgcolor” (màu nền) hay thẻ “font”(font chữ) đưa vào ứng dụng 1.1.3 HTML3 Internet làm cho ngôn ngữ HTML phát triển ứng dụng phát triển HTML W3C chấp nhận phiên cải tiến HTML với thẻ chức Dave Ragget mua phiên thú vị với nhiều thẻ HTML hấp dẫn phiên cải tiến hay Nhưng làm chậm đường truyền trình duyệt nên phiên bị bỏ Phiên HTML 3.2 phiên mạnh sê-ri trước tung ra, duyệt W3C nhà cung cấp trình duyệt Netscape Microsoft 1.1.4 HTML4 Người ta dành năm 1997 để phát triển phiên HTML4, bước tiến triển quan trọng phiên cũ HTML4 công cụ giá trị mang lại thêm nhiều đất sáng tạo cho dân thiết kế web Ban đầu CSS không coi quan trọng đến người ta đánh giá quan trọng không thân HTML Một kiện quan trọng phát triển trình duyệt: Microsoft ứng dụng tất thẻ trình duyệt Internet Explorer người sử dụng yêu thích hơn, làm lu mờ Netscape Vào tháng năm 1998 HTML4 chứng nhận W3C tương lai trở nên sáng lạn HTML “đối thủ” gọi XHTML (Extensible HyperText Markup Language - tạm dịch: ngôn ngữ đánh dấu siêu văn mở rộng) từ năm 1998 đến diễn tranh chấp, cuối lợi người sử dụng Internet 1.1.5 HTML5 HTML5 đời dựa hợp tác World Wide Web Consortium (W3C) Web Hypertext Application Technology Working Group (WHATWG) Vào tháng năm 2008, W3C tung nháp HTML5 thượng phong nghiêng HTML (so với XHTML) Phần lớn biết khả HTML 4.01 - phiên gần nhất, tính phiên thứ gì? 1.2 Sự khác biệt HTML5 HTML5 làm thay đổi nhiều khía cạnh sống Web Nó không thay Flash hay Shockwave: dùng trò chơi Miniclip.com Điều cho thấy HTML5 ảnh hưởng đến Tuy nhiên, HTML5 thiết kế lại Web cho phép Websites nhiều tiện ích HTML5 tags thay plug-in việc đơn giản làm cho Web bảo mật hiệu Dưới tiện ích HTML5 ứng dụng chuẩn hóa Web: HTML5 làm giảm tầm quan trọng plug-ins Trước đây, câu chuyện Web gắn với plug-in hay add-on trình duyệt khuyến khích sáng tạo trải nghiệm Âm thanh, ảnh động hay thủ thuật khác xuất Web thông qua plug-ins, phát triển Sun, Adobe, RealAudio, Microsoft nhiều hãng khác Giao diện plug-ins mở tất người trải nghiệm cách thêm tính Cuộc chiến Flash chiến tiếng nhất, sức mạnh từ HTML5 đe dọa tới hệ mã lệnh JavaFX lý tưởng, người muốn học loại cú pháp JavaScrip Canvas làm tốt Ai cần hệ thống Real video chuyển thành audio video? Plug-in dường bị lãng quên Plug-ins bị biến không dùng? thể, phụ thuộc vào việc làm bạn Nếu bạn muốn vẽ hình ảnh, Canvas thích hợp Nhưng muốn vẽ giới 3-D đặc biệt, giống trò chơi Flash Shockwave phức tạp, bạn phải dùng tới plug-in kết nối trực tiếp tới video chạy giới game 3-D HTML5 hỗ trợ đồ họa tương tác Web cũ tải hình ảnh cách tải file GIF hay JPG Web xây dựng hình ảnh Canvas Một loạt thư viện đồ họa đẹp đưa ra, giúp cho đồ họa Website trở nên tương tác Hiện nay, JavaScript tính toán vẽ hình ảnh liệu Mọi thứ trở nên sống động lập trình viên thời gian để đưa giải pháp Adobe bắt đầu phát triển đồ họa tinh xảo cho HTML5 Sự xuất công cụ mở đầu cho khả đồ họa tinh xảo HTML5 cho phép ứ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ữ lượng lớn thông tin 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 phiên đầu công cụ Dojo Tuy nhiên, cần sử dụng HTML5 Lập trình viên lưu trữ thứ họ muốn Điều giúp việc cài đặt ứng dụng dễ dàng giống ứ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 hoạt động kết nối Web hoạt động Phương pháp không ảnh hưởng tới hoạt động phát triển nhóm “đám mây” liệu hoạt động lưu trữ thông minh Lập trình game lưu trữ theo vùng phần mô tả ả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, liệu lưu trữ tệp tin hệ thống Thế nên việc lấy lại liệu dễ dàng Người dùng muốn chuyển liệu từ máy sang máy khác gặp phải khó khăn HTML5 đơn giản hóa chia nhỏ liệu với cyborg data Ai chia nhỏ liệu từ trang web biết HTML không giúp nhiều ngoại trừ giúp trình duyệt nơi đặt liệu Microformats HTML5 cung cấp phương pháp tinh xảo giúp việc phân tích liệu dễ dàng Không dự đoán microformats thay đổi Web tới mức dễ để thấy giúp lập trình viên nhiều giải pháp HTML5 giúp hợp địa Đối với máy chủ Web, địa máy tính đơn số ẩn danh Chuẩn HTML5 cho phép trình duyệt định vị vị trí người dùng Tuy nhiên, không hoạt động với máy bàn (hoạt động với GPS Wifi), lại hoạt động tốt với smartphone cầm tay HTML5 làm video Web tự nhiên Chuẩn HTML5 giúp nhà lập trình tiếp hợp video dễ dàng với thông tin trang, cung cấp ứng dụng tới lập trình viên jQuery PHP Flash, Silverlight hay JavaFX Mọi người muốn cung cấp mã nguồn mở để mở hình ảnh động âm tương ứng dẫn đến việc không thống Chuẩn HTML5 mã nguồn mở trung gian, nghĩa thay đổi cách gọi từ plug-in thành codec Tuy nhiên, ta chuẩn video trình duyệt lại khó để dịch liệu Mặc cân nhắc thiếu trí hoàn toàn, thẻ video cho thấy sức mạnh video, giúp cho HTML bớt ký tự văn video dùng nhiều HTML5 tạo wiget chat Widget sử dụng iframes cho phép trang web ghi nhớ lại thông tin từ trang khác vòng nhiều năm Tuy nhiên chúng lại bị rào cản an ninh giới hạn lưu trữ wiget sandbox riêng HTML5 cung cấp chế chuẩn giúp widget trò chuyện với Mặc chúng khống thể vượt qua sandbox widget khác widget gửi tin nhắn qua lại, kết nối công việc, chí chuyển đổi thông tin người sử dụng máy tính Các nhà quảng cáo hội để đăng quảng cáo với ô hình chữ nhật khác xuất trang web Trong đó, nhà phát triển khẳng định tìm ứng dụng thức tế khác Tuy nhiên, sử dụng chế để gửi tin nhắn bước đầu Vẫn cần tạo tiêu chuẩn cho thông tin chuyển widget hội để trò chuyện người nên chúng cần phải ngôn từ chuẩn HTML5 tăng khả bảo mật Mỗi trình duyệt plug-in riêng nhóm lập trình khác lập với tiêu chuẩn khác nhau, đưa vào thời điểm khác kiểu mẫu bảo mật cung khác Thông thường, số phiên plug-in tính bảo mật so với loại khác số lượng plug-in gia tăng, chúng làm tăng độ phức tạp kiểm tra lỗi an ninh Liệu plug-in hay trình duyệt lỗ hổng lớn vào năm ngoái? Liệu phức tạp không cập nhât trình duyệt mà không nâng cấp plug-in ngược lại? Ai nhớ được? Thay nhiều loại plug-in với đặc điểm tích hợp với HTML bỏ khuyết điểm plug-in trước Những khuyết điểm bị lợi dụng để thiết lập mã độc Nếu nhóm an ninh kiểm tra Firefox, Chorme IE cho phép cài đặt plug-in này, nguy hiểm giảm bớt 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 thay đổi này: “Tôi thực thích HTML5 cho phép làm việc môi trường thích hợp, trình duyệt kết hợp với Javascript, DOM mà bật bật lại Flash HTML5 Nó vừa ngôn ngữ lại vừa công cụ, không khác biệt so với plug-in khác” HTML5 cung cấp ngôn ngữ lập trình JavaScript, kiểu liêu (XML DOM) phần nguyên tắc thiết lập (CSS) để kết nối văn bản, audio, video Đồ họa Thách thức việc tạo tốt đẹp mênh mông điều đơn giản làm việc tiêu chuẩn thống Hiện Adobe sử dụng HTML để tích hợp công cụ dành cho Flash Điểm mạnh - Điểm yếu HTML5 Flash Khi bàn Flash HTML5, nhà phát triển thường hay công kích lẫn Nhưng thật HTML5 Flash thời điểm điểm mạnh điểm yếu, tùy thuộc vào mục tiêu, định hướng mà chọn giải pháp 10 3.2 Biểu đồ lớp hệ thống - Dựa vào việc phân tích nghiệp vụ phân tích hệ thống, thiết kế hệ thống gồm lớp: - - Lớp biên: form hệ thống - - - Hình 3.: Biểu đồ lớp biên - - Lớp điều khiển: điều khiển hệ thống - - Hình 3.: Biểu đồ lớp điều khiển - - Lớp thực thể: lớp sở liệu hệ thống - - - Hình 3.: Biểu đồ lớp thực thể - Biểu đồ quan hệ lớp quản lý viết - - Hình 3.: Biểu đồ quan hệ lớp quản lý viết - - Biểu đồ quan hệ lớp quản lý nhân viên - Hình 3.: Biểu đồ quan hệ quản lý nhân viên - - - Biểu đồ quan hệ quản lý tour - - - Hình 3.: Biểu đồ quan hệ quản lý tour - CHƯƠNG 4: SẢN PHẨM WEBSITE - Sản phẩm: - - Hình 3.: Trang chủ - - - Hình 3.: Trang giới thiệu - Hình 3.: Trang giới thiệu địa danh du lịch - - - - Hình : Menu đăng ký tour khách sạn - - Hình 3.: Form đặt tour - - Hình 3.: Form đặt khách sạn - - - Hình 3.: Form liên hệ - PHẦN 3: KẾT QUẢ - Sau thời gian thực hiện, em hoàn thành đề tài đồ án “Tìm hiểu HTML5, CSS3 ứng dụng xây dựng website cho công ty cồ phần du lịch Bắc Giang” - Trong trình khảo sát tìm hiểu để phân tích đề tài em hiểu lý thuyết HTML5, CSS3 Những nét mà HTML5, CSS3 làm Trong trình khảo sát thiết kế em gặp nhiều số khó khăn em cố gắng để hoàn thành đồ án tiến độ Sau số chức website: - - Website giới thiệu thông tin du lịch Bắc Giang, dịch vụ công ty cổ phần du lịch Bắc Giang đến người dùng ghé thăm trang web - - Website khả cho phép người dùng đặt tour du lịch, đặt khách sạn trực tuyến thông qua website - - Được xây dựng tảng Wordpress tính ổn định, bảo mật cao - - Áp dụng công nghệ HTML3, CSS3 vào website - - Website upload thành công host - - số chức khác - Website đạt số chức để phục vụ cho nhu cầu công ty cổ phần du lịch Bắc Giang Trong trình thực đề tài chắn tránh khỏi thiếu sót Vì em mong thầy đóng góp ý kiến giúp em hoàn thiện đề tài - TÀI LIỆU THAM KHẢO - - [1] Bruce Lawson Remy Sharp, Introducing HTML5, New Riders - [2] Mark Pilgrim , HTML5 Up and Running, Google Press - [3] Peter Lubbers, Brian Albers and Frank Salim, Pro HTML5 Programming, Apress - [4] Jeremy Keith, HTML5 For Web Designers, Jeffrey Zeldman - [5] Một số website - http://www.w3schools.com/html5/default.asp - http://html5demos.com/ - NHẬN XÉT CỦA GIÁO VIÊN - …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………… - - ... thực tế yêu cầu công ty cổ phần du lịch Bắc Giang với gợi ý cô Nguyễn Lan Oanh, em chọn đề tài Tìm hiểu HTML5, CSS3 ứng dụng xây dựng website cho công ty cổ phần du lịch Bắc Giang hoàn thành... ĐOAN Em xin cam đoan nội dung đồ án tốt nghiệp với tên đề tài “ Tìm hiểu HTML5, CSS3 ứng dụng xây dựng website cho công ty cổ phần du lịch Bắc Giang không chép nội dung từ đồ án khác, hay sản... khỏi hệ thống website công ty cổ phần du lịch Bắc Giang - Nhân viên: Công ty cổ phần du lịch Bắc Giang thiết kế tour lên lịch trình cho tour cụ thể Sau đó, phận nhân viên hệ thống website có nhiệm

Ngày đăng: 19/04/2017, 22:36

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w