• Tidak ada hasil yang ditemukan

ĐỒ ÁN TỐT NGHIỆP

Protected

Academic year: 2023

Membagikan "ĐỒ ÁN TỐT NGHIỆP"

Copied!
73
0
0

Teks penuh

Tìm hiểu công nghệ Web-based, Web 2.0

Giới thiệu Web-based

Công nghệ dựa trên web hay công nghệ dựa trên web là thuật ngữ dùng để chỉ các ứng dụng hoặc phần mềm được sử dụng dựa trên nền tảng Internet. Tức là các ứng dụng hoặc phần mềm có thể được truy cập thông qua trình duyệt trên hệ thống mạng như Internet hoặc mạng nội bộ. Các ứng dụng web được xây dựng bằng các ngôn ngữ mà trình duyệt hỗ trợ như HTML và JavaScript.

Các ứng dụng trên nền web hay ứng dụng web ngày càng trở nên phổ biến do những ưu điểm vượt trội của chúng, đặc biệt là những ưu điểm tuyệt vời dành cho người dùng (hoặc cuối cùng là người dùng) trên máy trạm (client). Ưu điểm của phần máy trạm là có thể sử dụng các ứng dụng hoặc phần mềm (như gmail, điểm bán lẻ...) mà không cần phải cài đặt bất kỳ chương trình nào, chỉ cần chạy qua web. Ngoài những ưu điểm riêng của máy trạm, ứng dụng web còn có nhiều ưu điểm khác như: Tự động cập nhật chương trình thông qua cập nhật trên máy chủ, sử dụng trình duyệt để làm việc kết hợp với các ứng dụng website khác như mail, tìm kiếm.

Người dùng có thể chạy chương trình trên mọi hệ điều hành như Windows, Linux, Mac. Ngoài ra, máy tính của chúng tôi không yêu cầu quá nhiều cấu hình hoặc dung lượng ổ đĩa.

Giới thiệu Web 2.0

  • Khái niệm
  • Web 2.0
  • Kiến trúc cơ bản của Web

Màu chuyển màu có thể được sử dụng để tô màu các đối tượng hình chữ nhật, hình tròn, đường thẳng, văn bản, v.v. phương thức createLinearGradient() để vẽ một hình chữ nhật có màu chuyển sắc từ đỏ sang trắng. Tham số thứ hai trong phương thức getCurrentPosition() là showError, được sử dụng để xử lý lỗi.

XMLHttpRequest là một đối tượng được sử dụng để trao đổi dữ liệu với máy chủ ở hậu trường. Loại đầu vào: color- được sử dụng để cho phép người dùng chọn một màu và trả về giá trị hex của màu đó. Ví dụ: loại đầu vào: tìm kiếm Loại đầu vào: đếm – dùng để nhập số điện thoại.

Duyệt web ngoại tuyến – người dùng vẫn có thể sử dụng ứng dụng mà không cần kết nối internet. Giao diện ứng dụng Locate (Hình 3.3) sử dụng tính năng Định vị địa lý HTML5 và API Tập lệnh Google Maps để hiển thị vị trí của người dùng.

Hình 1.1.So sánh Web 1.0 và Web 2.0
Hình 1.1.So sánh Web 1.0 và Web 2.0

Tìm hiểu các công nghệ trong HTML 5.0

Sự phát triển của HTML

Mũ trên, mũ dưới, chú thích, lề, các yếu tố chèn và xóa văn bản. Trong phiên bản này, các thành phần sau đã được thêm vào: INPUT, SELECT, OPTION và TEXTAREA cùng với các thành phần BR để ngắt dòng. Nó cũng được thêm vào các phần tử META để mô tả tài liệu một cách chi tiết và sau đó thay đổi mô tả về vùng đầu và cơ thể.

Phiên bản hỗ trợ các bảng, phần tử FIG, thuộc tính ALIGN để căn chỉnh và các thuộc tính hình nền, tab, tiêu đề và biểu ngữ bổ sung. Trong phiên bản này, CSS trở thành khuyến nghị của W3C để sử dụng trong thiết kế web. Nó cũng cung cấp các yếu tố và tính năng mới để làm cho trang web của bạn trở nên sống động với hình ảnh động, màu sắc và âm thanh.

XHTML không được nhiều nhà phát triển sử dụng vì tính nghiêm ngặt này. HTML5 là tiêu chuẩn HTML mới được tất cả các nhà phát triển sử dụng.

Giới thiệu HTML 5.0

  • HTML5 là gì?
  • Những điểm mới trong HTML5

Hỗ trợ CSS3 để quản lý giao diện đồ họa người dùng (GUI) có nghĩa là HTML5 có thể được điều khiển theo nội dung. Đặc tả API định vị địa lý, sử dụng khả năng định vị của điện thoại thông minh để kết hợp các ứng dụng và dịch vụ đám mây di động. HTML5 và CSS3 có rất nhiều tiềm năng để trở thành một cặp đôi ăn ý, nhất là khi HTML5 chuyển sang hướng tách rời nội dung và giao diện.

HTML5 giới thiệu các phần tử đánh dấu mới, được nhóm thành bảy loại nội dung khác nhau, được hiển thị trong Bảng 2.1. Được nhúng Kiểu, nội dung được nhúng được nhập từ các nguồn khác trên trang web, ví dụ: âm thanh, video, canvas và iframe. Các phần tử chạy được sử dụng trong nội dung của trang web hoặc ứng dụng, ví dụ: biểu mẫu, h1 và chữ thường.

Nội dung tương tác mà người dùng tương tác, ví dụ: điều khiển âm thanh, điều khiển video, nút và vùng văn bản. Phần tử này cung cấp thông tin về trang web được sử dụng cho các bài thuyết trình sau này, ví dụ: kịch bản, phong cách và tiêu đề. Hầu hết các thành phần có thể được sử dụng trong CSS, nhưng những thành phần khác có thể được sử dụng thông qua các API được cung cấp, ví dụ: canvas, âm thanh, video.

Có rất nhiều thành phần bị loại bỏ trong HTML5 vì chúng đã lỗi thời trong việc sử dụng CSS, ví dụ: big, center, font, basefont. Một loại nội dung chứa nhiều phần tử HTML5 mới là loại phần. Ví dụ: nhiều người sử dụng thẻ DIV có ID=”footer” để làm nổi bật nội dung chân trang.

HTML5 cũng cung cấp các phần tử vùng nội dung như trong Bảng 2.2. HTML5 có cách trình bày và nội dung riêng biệt nên bạn có thể thoải mái sử dụng CSS để thiết kế trang web của mình bằng HTML5. JSON sử dụng cú pháp JavaScript để mô tả các đối tượng dữ liệu, nhưng JSON độc lập với ngôn ngữ và nền tảng.

Bảng 2.1. Những kiểu nội dung trong HTML5  Kiểu nội dung  Miêu tả
Bảng 2.1. Những kiểu nội dung trong HTML5 Kiểu nội dung Miêu tả

Những công nghệ mới trong HTML5

  • Canvas API
  • Scalable Vector Graphics
  • WebGL – 3D trên Web
  • Audio và Video
  • Geolocation API
  • Communication APIs
  • WebSocket API
  • Forms API
  • Drag-and-Drop
  • Web Workers API
  • Storage APIs
  • Tạo Offline Web Applications

SVG được sử dụng để vẽ các đối tượng vector dựa trên web. SVG định nghĩa đồ họa ở định dạng XML. C3DL – Thư viện JS do Mozzilla phát triển để sử dụng với các ứng dụng WebGL. Thẻ

Sử dụng phương thức postMessage() của API giao tiếp này, tin nhắn văn bản có thể được gửi từ miền này sang miền khác. Sử dụng thuộc tính Origin để kiểm tra xem tên miền của người gửi có khớp với tên miền đã đặt trước đó hay không. Tuy nhiên, nếu chúng ta có thể sử dụng CORS thì trình duyệt phải hỗ trợ nó và máy chủ phải đồng ý với yêu cầu cross-origin.

Kiểu đầu vào: email – dùng để nhập địa chỉ email, trình duyệt sẽ tự động kiểm tra xem dữ liệu đầu vào có phải là email hay không và sẽ nhận được thông báo. Xác định cách mã hóa dữ liệu biểu mẫu khi được gửi (chỉ được sử dụng với các biểu mẫu có phương thức =”post”). Giao diện trang tải lên (Hình 3.2) sử dụng tính năng kéo và thả, XMLHttpRequest cấp 2 và các tính năng biểu mẫu mới trong HTML5.

Ứng dụng biểu đồ 3D TeeChart (Hình 3.4) của Steema Software sử dụng thành phần và WebGL.

Hình 2.1. Mô tả phương thức arc()
Hình 2.1. Mô tả phương thức arc()

Xây dựng ứng dụng

Giới thiệu ứng dụng

Trang web chia sẻ video: Trang web cho phép người dùng tải lên video của mình và chia sẻ với người khác thông qua link video đã tải lên. Tính năng biểu mẫu mới, ứng dụng biểu mẫu để nhập thông tin video trong quá trình tải lên.

Yêu cầu phần cứng

Yêu cầu phần mềm

Một số giao diện chính

  • Website chia sẻ video và Xác định vị trí
  • Một số ứng dụng khác

HTML5 được đánh giá cao về khả năng hiển thị hình ảnh 2D và 3D trực tiếp trên trình duyệt. Dưới đây là một số ứng dụng khác mà tôi sưu tầm được từ nhiều nguồn khác nhau thể hiện rõ ràng khả năng này của HTML5. Rút ra được một số kinh nghiệm, bài học cơ bản về cách làm việc khoa học và cách chủ động nghiên cứu công nghệ mới. Có thể áp dụng kiến ​​thức đã học vào thực tế, đồng thời thu thập được nhiều kiến ​​thức khác trong quá trình tạo dự án.

Hãy áp dụng những kiến ​​thức đã học vào nghiên cứu và áp dụng một cách hiệu quả vào những vấn đề mới mà bạn gặp phải trong công việc. Kiểm thử ngôn ngữ PHP để tạo ứng dụng minh họa cho chủ đề. Còn HTML5 và những công nghệ mà nó mang lại tuy chưa hoàn thiện nhưng sẽ trở thành chuẩn mực mới cho thế giới web trong tương lai.

Giờ đây, một số công nghệ đó giúp chúng ta chỉ cần một trình duyệt hỗ trợ HTML5 là có thể thực hiện mọi thứ trên đó mà không cần bất kỳ plugin nào của bên thứ ba (như Flash, Silverlight, v.v.).

Hình 3.1. Giao diện trang xem video
Hình 3.1. Giao diện trang xem video

Gambar

Hình 1.1.So sánh Web 1.0 và Web 2.0
Bảng 1.1. Dấu hiệu phân biệt Web 1.0 và Web 2.0
Bảng 2.1. Những kiểu nội dung trong HTML5  Kiểu nội dung  Miêu tả
Hình 2.1. Mô tả phương thức arc()
+7

Referensi

Dokumen terkait

Câu 100: Trong quá trình giảm phân ở cơ thể có kiểu gen AaBb, có một số tế bào xảy ra sự không phân li của tất cả các cặp NST ở giảm phân I, giảm phân II diễn ra bình thường, tạo ra các