Tổng quan về giáo trình

Giáo trình môn học Thiết kế Web (Mã mô-đun: MĐ 26) được biên soạn bởi Thạc sỹ Phạm Anh Đức, phát hành năm 2019 tại Ninh Bình dưới sự quản lý của Trường Cao đẳng Cơ điện Xây dựng Việt Xô (thuộc Bộ Nông nghiệp và Phát triển Nông thôn). Tài liệu được xây dựng theo chương trình khung quốc gia của nghề Quản trị mạng máy tính, áp dụng đào tạo trực tiếp cho nghề Sửa chữa và lắp ráp máy tính ở trình độ Cao đẳng.

Về mặt vị trí trong chương trình đào tạo, mô-đun MĐ 26 được bố trí giảng dạy sau khi sinh viên đã hoàn thành các môn học chung và các môn cơ sở chuyên ngành. Khóa học có tổng thời lượng 90 giờ, được phân bổ thành 29 giờ lý thuyết, 58 giờ thực hành/thảo luận/bài tập và 3 giờ kiểm tra đánh giá định kỳ.

Mục tiêu học tập của giáo trình được xác định cụ thể theo ba nhóm chuẩn đầu ra:

  • Về kiến thức: Trình bày được cấu trúc hoàn chỉnh của một website; mô tả quy trình xây dựng, vận hành và phát triển hệ thống web; giải thích các nguyên lý an toàn và bảo mật thông tin trên môi trường mạng.
  • Về kỹ năng: Xây dựng và định dạng trang web bằng các ngôn ngữ cốt lõi bao gồm HTML, CSS, JavaScript, XML; triển khai và quản trị hệ thống quản trị nội dung mã nguồn mở WordPress; thực hiện các thao tác đăng ký tên miền, dịch vụ lưu trữ và xuất bản website lên máy chủ.
  • Về năng lực tự chủ và trách nhiệm: Hình thành phương pháp làm việc khoa học, bảo đảm tiến độ thực hiện dự án website; tuân thủ nghiêm ngặt các quy định an toàn lao động và kỹ thuật an toàn máy tính.

Cấu trúc giáo trình áp dụng mô hình đào tạo nghề tích hợp lý thuyết và thực hành, trong đó thời lượng rèn luyện kỹ năng thực tế chiếm trên 64% tổng thời lượng. Nội dung được phát triển dựa trên việc tham khảo các tài liệu chuyên ngành thiết kế, lập trình web trong và ngoài nước, kết hợp với các yêu cầu kỹ thuật trong thực tế sản xuất phần mềm.

Nội dung kiến thức cốt lõi

Các chương/chủ đề chính

Giáo trình được phân chia thành 5 bài học với tiến trình logic từ tổng quan hạ tầng mạng, thiết kế bố cục, lập trình giao diện tĩnh đến triển khai hệ quản trị nội dung động và phát hành trực tuyến.

  • Bài 1: Các định nghĩa và thuật ngữ (3 giờ lý thuyết): Cung cấp kiến thức cơ sở về Internet, kỹ thuật chuyển gói dữ liệu (packet switching), giao thức IP và các phương thức truy cập vật lý (quay số, băng rộng, không dây, vệ tinh, di động). Phân loại các dịch vụ mạng: World Wide Web, E-Mail, FTP (mô hình client-server), Gopher, Newsgroup/Usenet (NewsReader), Mailing List, Telnet, VoIP (các dịch vụ 178 của Viettel, 171 của VNPT), Video Conference, WAP. Khái quát lịch sử WWW từ ý tưởng siêu văn bản của Ted Nelson (1965) đến dự án của Tim Berners-Lee (1989), cùng 3 cơ chế nền tảng: URL, HTTP, HTML. Phân biệt Web page, Website tĩnh và Website động. Giới thiệu các trình duyệt (Chrome, Firefox, Safari, Opera, Lynx, Konqueror...) và thao tác điều hướng, phím tắt trên Google Chrome.
  • Bài 2: Giao diện Web (16 giờ: 4 lý thuyết, 12 thực hành): Phân tích đặc điểm giao diện của 7 nhóm website thương mại điển hình: quán cà phê/nước giải khát, mỹ phẩm/dụng cụ làm đẹp, quần áo thời trang, hàng công nghệ/điện tử, đồ trang sức/phụ kiện, thực phẩm/ăn uống, kinh doanh hoa tươi. Xác định 5 thành phần cấu trúc bố cục chuẩn gồm Header, Navigation, Content, Sidebar, Footer. Giới thiệu hệ thống thẻ ngữ nghĩa HTML5: <header>, <nav>, <section>, <article>, <aside>, <footer>, <details>, <summary>.
  • Bài 3: Ngôn ngữ HTML - CSS (41 giờ: 11 lý thuyết, 28 thực hành, 2 kiểm tra): Lập trình cấu trúc trang với thẻ <html>, <head>, <title>, <body>. Sử dụng thẻ tiêu đề <h1>-<h6> (chuẩn hóa cấu trúc phân cấp cho SEO), thẻ đoạn văn <p>, thẻ định dạng chữ (<strong>, <i>, <u>, <strike>), thẻ liên kết <a> (thuộc tính href, title, target, liên kết neo #id), thẻ hình ảnh <img src="..." alt="..." />, bảng biểu <table> (<tr>, <th>, <td>), biểu mẫu <form> (các kiểu <input>: text, password, checkbox, radio, select dropdown, file upload, button submit/reset, hidden field). Nhúng đa phương tiện bằng thẻ <video> HTML5 thay thế công nghệ Adobe Flash. Cấu trúc cú pháp CSS (Selector { property: value; }), đơn vị đo chiều dài (%, in, cm, mm, em, ex, pt, pc, px), hệ màu sắc (Color-name, RGB, Hexadecimal). 3 phương pháp nhúng CSS: nội tuyến (inline), nội bộ (<style>), liên kết tệp ngoài (<link>). Các thuộc tính nền background (color, image, repeat, attachment, position) và định dạng văn bản font (family, style, variant, weight, size) theo cú pháp tường minh và rút gọn.
  • Bài 4: Mã nguồn mở (23 giờ: 8 lý thuyết, 14 thực hành, 1 kiểm tra): Giới thiệu khái niệm mã nguồn mở, nguyên lý và thiết lập môi trường Web Server cục bộ. Quy trình cài đặt hệ quản trị nội dung WordPress. Thao tác trên giao diện quản trị AdminCP: quản lý danh mục (Category), bài viết (Post), trang tĩnh (Page), tập tin đa phương tiện (Media), tài khoản người dùng (User), Widget, Menu điều hướng. Phân tích cấu trúc mã nguồn WordPress; kỹ thuật tìm kiếm, cài đặt và tùy biến giao diện từ 21 nguồn theme miễn phí; cài đặt Plugin mở rộng chức năng và thiết lập cấu hình website chuẩn SEO.
  • Bài 5: Xuất bản và duy trì Website (7 giờ: 3 lý thuyết, 4 thực hành): Thủ tục đăng ký tên miền (Domain name) và dịch vụ lưu trữ (Web hosting). Quy trình cấu hình máy chủ, đưa mã nguồn lên server thông qua giao thức FTP và cPanel. Phương pháp kiểm thử, nghiệm thu nội dung, quy trình vận hành, phát triển nội dung số và các giải pháp phòng chống hiểm họa bảo mật website.

Kiến thức nền tảng được xây dựng

Giáo trình cung cấp hệ thống lý thuyết mạng và lập trình bao gồm:

  • Nguyên lý mạng và giao thức truyền tải: Cơ chế đóng gói dữ liệu IP, mô hình máy chủ - máy khách (Client - Server) trong các giao thức HTTP, FTP, Telnet, VoIP.
  • Tiêu chuẩn tài liệu web: Cấu trúc văn bản siêu liên kết tuân thủ chuẩn của tổ chức World Wide Web Consortium (W3C), nền tảng phát triển từ SGML, HTML 4, XHTML đến HTML5.
  • Mô hình kiến trúc phân tầng hiển thị: Tách biệt tuyệt đối giữa tầng cấu trúc dữ liệu (HTML) và tầng trình bày giao diện (CSS).
  • Nguyên lý hoạt động của hệ thống CMS động: Cơ chế kết nối giữa Web Server, cơ sở dữ liệu và mã nguồn PHP/MySQL trong kiến trúc WordPress.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Soạn thảo mã nguồn HTML/CSS chuẩn cú pháp; xây dựng biểu mẫu form thu thập dữ liệu; cài đặt và cấu hình hệ thống web server cục bộ; vận hành thành thạo hệ quản trị WordPress; sử dụng phần mềm truyền tệp FTP để tải dữ liệu lên máy chủ web hosting.
  • Kỹ năng phân tích (Analytical skills): Phân tích và thiết kế bố cục giao diện phù hợp với đặc thù sản phẩm thương mại; nhận diện cấu trúc phân cấp thẻ tiêu đề và thẻ ngữ nghĩa để tối ưu hóa công cụ tìm kiếm (SEO); đánh giá mức độ tương thích giao diện trên các trình duyệt khác nhau.
  • Năng lực ứng dụng thực tế (Practical competencies): Triển khai hoàn chỉnh quy trình 6 bước xây dựng website từ thu thập yêu cầu, thiết kế mã nguồn, thử nghiệm, sửa lỗi đến xuất bản trực tuyến; thiết lập các biện pháp an toàn dữ liệu và bảo mật cơ bản cho hệ thống website.

Phương pháp giảng dạy và học tập

Giáo trình áp dụng mô hình sư phạm tích hợp kỹ thuật nghề (Integrated Vocational Pedagogy), kết hợp chặt chẽ việc truyền đạt nguyên lý lý thuyết với các bài tập thực hành thao tác tại phòng máy tính. Tiến trình đào tạo được xây dựng theo định hướng tạo ra sản phẩm hoàn chỉnh sau mỗi bài học.

  • Tiếp cận bài tập và nghiên cứu tình huống (Case Studies): Phân tích trực tiếp các yêu cầu thiết kế giao diện từ 7 lĩnh vực kinh doanh thực tế (ẩm thực, mỹ phẩm, thời trang, công nghệ, trang sức, thực phẩm chế biến, hoa tươi). Sinh viên căn cứ vào đặc thù sản phẩm để tự xác định bảng màu, bố trí thanh điều hướng, khu vực nội dung và khối thông tin chân trang tương ứng.
  • Hệ thống bài tập thực hành kỹ thuật (Lab exercises):
    • Thực hiện các phím tắt và tiện ích trình duyệt trên Google Chrome: duyệt web ẩn danh (Ctrl + Shift + N), quản lý thẻ (Ctrl + T, Ctrl + W), quản lý dấu trang (Ctrl + Shift + B, Bookmark Manager).
    • Soạn thảo các trang tài liệu HTML tĩnh chứa đầy đủ các phần tử liên kết, hình ảnh, cấu trúc bảng dữ liệu <table> và các khối điều khiển biểu mẫu <form> (Text Input, Password, Textarea, Checkbox, Radio, Select Box, File Upload, Submit Button, Hidden Form).
    • Viết các đoạn mã CSS tùy biến màu sắc, nền (background), kiểu chữ (font), áp dụng đơn vị đo lường linh hoạt (px, em, %) và cấu hình mã viết rút gọn nhằm tối ưu dung lượng tệp.
    • Cài đặt WordPress trên máy chủ cục bộ, thiết lập cây thư mục danh mục, khởi tạo hệ thống menu, cấu hình tiện ích Widget, can thiệp chỉnh sửa giao diện Theme bằng CSS và cấu hình plugin SEO.
  • Phương pháp đánh giá kết quả (Assessment methods): Bao gồm 3 bài kiểm tra định kỳ được phân bổ tại Bài 3 (2 giờ) và Bài 4 (1 giờ), kết hợp đánh giá thường xuyên chất lượng mã nguồn, mức độ hoàn thiện sản phẩm website và năng lực xuất bản trang web lên môi trường máy chủ thực nghiệm.
  • Hướng dẫn tự học (Self-study guidelines): Sinh viên chủ động khai thác 21 địa chỉ website cung cấp theme miễn phí được định danh trong tài liệu; thực hành tự sửa đổi các thuộc tính CSS trên giao diện có sẵn; rèn luyện thói quen tra cứu tài liệu chuẩn và tự kiểm tra lỗi hiển thị trên nhiều trình duyệt.

Điểm nổi bật và cập nhật

Tài liệu thể hiện các nội dung công nghệ mang tính bản lề và gắn liền với môi trường ứng dụng thực tế:

  • Chuẩn hóa cấu trúc theo HTML5: Đưa các thẻ ngữ nghĩa mới vào giảng dạy bố cục trang (<header>, <nav>, <section>, <article>, <aside>, <footer>, <details>, <summary>), hỗ trợ công cụ tìm kiếm nhận diện chính xác dữ liệu trang web, đáp ứng yêu cầu xây dựng website chuẩn SEO.
  • Chuyển đổi công nghệ truyền tải đa phương tiện: Phân tích bước chuyển dịch từ việc cài đặt plugin phụ trợ của bên thứ ba (Adobe Flash Player) sang việc sử dụng trực tiếp phần tử <video> thuần túy của chuẩn HTML5, giúp giảm tải tài nguyên phần cứng và tối ưu hóa hiển thị trên các thiết bị di động.
  • Tích hợp giải pháp phát triển web với CMS mã nguồn mở: Thay vì chỉ dừng lại ở các trang web tĩnh, giáo trình hướng dẫn hoàn chỉnh quy trình triển khai hệ thống quản trị nội dung WordPress, cung cấp danh mục 21 website tải theme miễn phí, kết nối giữa kỹ năng lập trình mã nguồn thủ công với năng lực quản trị website thực tế.
  • Dữ liệu thực tiễn và liên kết ngành: Tích hợp dữ liệu về các dịch vụ viễn thông tại Việt Nam (dịch vụ VoIP 178 của Viettel, VoIP 171 của VNPT), giao thức vô tuyến WAP trên hệ thống thông tin di động toàn cầu (GSM), cùng các phân tích thực tế về bố cục website cho các phân khúc ngành nghề thương mại.

Đối tượng sử dụng giáo trình

  • Sinh viên chuyên ngành: Tài liệu phục vụ trực tiếp cho sinh viên trình độ Cao đẳng nghề Sửa chữa và lắp ráp máy tính, cũng như sinh viên theo học chương trình khung nghề Quản trị mạng máy tính tại các cơ sở giáo dục nghề nghiệp.
  • Yêu cầu kiến thức tiên quyết (Prerequisites): Người học cần hoàn thành các môn học văn hóa chung và các mô-đun cơ sở chuyên ngành; có hiểu biết căn bản về phần cứng máy tính, hệ điều hành và các khái niệm cơ bản về mạng máy tính.
  • Giảng viên và cơ sở đào tạo: Giảng viên sử dụng tài liệu làm khung đề cương chi tiết để tổ chức giảng dạy mô-đun MĐ 26 với thời lượng 90 giờ; phân bổ giáo án tích hợp giữa giảng đường lý thuyết và phòng thực hành máy tính có kết nối mạng Internet.
  • Tự học và tài liệu tham khảo: Kỹ thuật viên bảo trì phần cứng, quản trị viên mạng và người học kỹ thuật có thể sử dụng giáo trình làm tài liệu tra cứu các thẻ lệnh HTML, thuộc tính CSS, quy trình thiết lập CMS WordPress và thao tác xuất bản máy chủ web.

Câu hỏi thường gặp (FAQ)

1. Giáo trình này được biên soạn phục vụ đối tượng đào tạo nào?

Tài liệu được thiết kế chuyên biệt cho học sinh, sinh viên trình độ Cao đẳng thuộc nghề Sửa chữa và lắp ráp máy tính (áp dụng chương trình khung nghề Quản trị mạng máy tính) tại Trường Cao đẳng Cơ điện Xây dựng Việt Xô và các cơ sở đào tạo nghề tương đương.

2. Người học cần đáp ứng kiến thức nền tảng nào trước khi tiếp cận mô-đun này?

Sinh viên cần hoàn thành các môn học chung và các môn học cơ sở khối chuyên ngành CNTT, nắm vững kỹ năng sử dụng máy tính, quản lý tệp tin và các khái niệm cơ bản về mạng máy tính.

3. Giáo trình có điểm gì khác biệt so với các tài liệu lập trình web học thuật thuần túy?

Giáo trình phân bổ hơn 64% tổng thời lượng (58/90 giờ) cho hoạt động thực hành; không đi sâu vào lý thuyết hàn lâm mà tập trung vào kỹ năng ứng dụng thực tế: từ viết mã nguồn HTML/CSS, bố cục giao diện 7 nhóm ngành thương mại, đến cấu hình CMS WordPress và tải website lên hosting qua FTP.

4. Phương pháp tự học hiệu quả đối với mô-đun Thiết kế Web là gì?

Người học cần thực hiện tuần tự 5 bài học; viết lại toàn bộ mã nguồn ví dụ về form, bảng, CSS; cài đặt máy chủ web nội bộ trên máy cá nhân để thực hành cấu hình WordPress; tra cứu và tùy biến các mẫu giao diện từ danh sách 21 website theme miễn phí được cung cấp trong giáo trình.

5. Giáo trình có cung cấp các tài liệu bổ trợ hoặc nguồn tài nguyên bên ngoài không?

Giáo trình cung cấp hệ thống mẫu mã nguồn trực quan (HTML/CSS), bảng tổng hợp đơn vị đo/hệ màu sắc, đường dẫn danh mục 21 website tải giao diện miễn phí, cùng danh mục tài liệu tham khảo trong và ngoài nước về thiết kế và quản trị web.

Kết luận

Giáo trình môn học Thiết kế Web (Mã mô-đun: MĐ 26) cung cấp hệ thống kiến thức toàn diện và có cấu trúc chặt chẽ về kỹ thuật xây dựng trang web, đáp ứng đầy đủ chuẩn đầu ra kỹ thuật nghề cho trình độ Cao đẳng.

Lộ trình học tập được thiết kế mạch lạc qua 5 giai đoạn:

  1. Nắm vững hạ tầng Internet, dịch vụ mạng và quy trình 6 bước xây dựng website (Bài 1).
  2. Thiết kế bố cục giao diện chuẩn hóa theo thẻ ngữ nghĩa HTML5 (Bài 2).
  3. Lập trình thành thạo tài liệu HTML và định dạng nâng cao bằng CSS (Bài 3).
  4. Khởi tạo, tùy biến và tối ưu hóa hệ quản trị nội dung mã nguồn mở WordPress (Bài 4).
  5. Đăng ký domain/hosting, xuất bản website qua FTP và duy trì bảo mật hệ thống (Bài 5).

Để đạt hiệu quả tối ưu, người học cần kết hợp nghiên cứu lý thuyết trong giáo trình với việc thực hành liên tục trên các công cụ hỗ trợ và tham khảo các nguồn tài nguyên theme, tiêu chuẩn kỹ thuật được định dẫn trong tài liệu.