Tổng quan về giáo trình (250-300 từ)

Giáo trình Thiết kế Web do Nhà xuất bản Đại học Kinh tế Quốc dân ấn hành, được biên soạn bởi tập thể giảng viên Viện Công nghệ thông tin và Kinh tế số thuộc Trường Đại học Kinh tế Quốc dân, gồm: TS. Phạm Xuân Lâm (Chủ biên), ThS. Phạm Đức Trung, ThS. Cao Thị Thu Hương và ThS. Chu Văn Huy.

Tác phẩm được xây dựng bám sát chương trình khung của đề cương chi tiết học phần Thiết kế Web, phục vụ trực tiếp cho sinh viên hệ đại học chính quy thuộc hai ngành: Công nghệ thông tin và Hệ thống thông tin quản lý. Về vị trí trong chương trình đào tạo, học phần cung cấp khối kiến thức kỹ thuật cơ sở và chuyên ngành về phát triển giao diện người dùng (Front-end Development). Mục tiêu học tập chuẩn đầu ra (learning outcomes) bao gồm: nắm vững cơ chế vận hành mạng của hệ thống website; thành thạo cú pháp ngôn ngữ đánh dấu siêu văn bản (HTML5); áp dụng các đặc tính định dạng trang (CSS3) để thiết kế giao diện đáp ứng (Responsive Web Design); lập trình kịch bản xử lý tương tác phía máy khách với JavaScript; thao tác trên Mô hình đối tượng tài liệu (DOM); sử dụng các công cụ hỗ trợ hiện đại và thực hiện hoàn chỉnh quy trình triển khai website lên môi trường Internet.

Giáo trình có kết cấu gồm 8 chương nội dung và 3 phần phụ lục tra cứu kỹ thuật. Điểm đặc thù trong cách tiếp cận của giáo trình là gắn kết toàn bộ nội dung lý thuyết vào một dự án thực hành xuyên suốt: thiết kế và triển khai website cá nhân "MinhBlogs" (chứa các bài viết công nghệ thông tin và biểu mẫu đăng ký khóa học). Quá trình biên soạn dẫn dắt người học qua đầy đủ các giai đoạn công việc từ phác thảo sơ đồ, viết mã nguồn cục bộ, tương tác cơ sở dữ liệu đám mây đến xuất bản trực tuyến.

Nội dung kiến thức cốt lõi (500-600 từ)

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

Cấu trúc giáo trình phân bổ tuần tự theo 8 chương trọng tâm, phản ánh logic tiến trình phát triển phần mềm Front-end:

  • Chương 1: Giới thiệu về thiết kế Website: Trình bày nguyên lý hoạt động mạng máy khách - máy chủ (Client - Server), phân loại web tĩnh và web động, cấu trúc đường dẫn URL (Scheme, Authority, Path, Parameters, Anchor), quy trình 7 bước phát triển website, 5 tiêu chí thiết kế (khả năng sử dụng, tính tương thích, khả năng tiếp cận, SEO, RWD) và tổng quan các công cụ thiết kế (Figma, Adobe) cùng môi trường lập trình (Visual Studio Code, Sublime Text, CodePen, DevTools).
  • Chương 2: Ngôn ngữ đánh dấu siêu văn bản HTML: Cấu trúc tài liệu HTML5 (<!DOCTYPE html>, phần tử <head>, <body>), các quy ước viết mã và kiểm tra chuẩn cú pháp (Validator), phân loại phần tử khối (block) và nội tuyến (inline), hệ thống thẻ ngữ nghĩa (semantic elements), bảng dữ liệu (colspan, rowspan), biểu mẫu (form controls) và định dạng đa phương tiện (bitmap, vector SVG, âm thanh, video).
  • Chương 3: Các thuộc tính định dạng cơ bản của CSS: Cú pháp quy tắc CSS, ba phương thức chèn CSS, các bộ chọn (bộ chọn đơn giản, thuộc tính, tổ hợp, lớp giả, phần tử giả), thuộc tính màu sắc, định dạng nền, đường viền, văn bản, liên kết và kỹ thuật sử dụng biến CSS.
  • Chương 4: Thiết kế bố cục: Mô hình hộp (Box Model: margin, padding, border, content), định vị phần tử (position: static, relative, absolute, fixed, z-index), thuộc tính tràn (overflow), trôi (float), hệ thống dàn trang Hộp linh hoạt (Flexbox), bố cục lưới (CSS Grid), kỹ thuật thiết kế Web đáp ứng (Responsive Web Design) và phương pháp tiếp cận "Mobile First".
  • Chương 5: Lập trình JavaScript căn bản: Cú pháp cơ sở, phạm vi biến, kiểu dữ liệu, hệ thống toán tử, hàm, mảng, cấu trúc rẽ nhánh (if-else, switch-case), vòng lặp (while, do-while, for) và lập trình hướng đối tượng (class, phương thức, kế thừa, getter/setter).
  • Chương 6: JavaScript trong thiết kế Website: Tương tác với đối tượng trình duyệt (window, location, cookie) và đối tượng tài liệu (document), mô hình DOM, xử lý sự kiện và lan truyền sự kiện, xác thực biểu mẫu, thao tác kéo thả (Drag and Drop), định dạng dữ liệu JSON/XML, trao đổi dữ liệu bất đồng bộ qua AJAX và kết nối cơ sở dữ liệu Firebase.
  • Chương 7: Các công cụ hỗ trợ: Tiện ích viết mã Emmet, hệ thống quản lý phiên bản Git và GitHub Desktop, tiền xử lý CSS Sass (biến, lồng quy tắc, mixins), framework giao diện Bootstrap và thư viện JavaScript jQuery.
  • Chương 8: Triển khai Website: Đăng ký tên miền (Domain, TLD, DNS), lựa chọn dịch vụ lưu trữ (Web hosting, VPS), truyền tệp mã nguồn qua giao thức FTP, triển khai ứng dụng lên Firebase, kiểm thử vận hành, cấu hình sơ đồ trang web và khai báo chỉ mục tới các máy tìm kiếm (Google, Bing, Yahoo).

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

Giáo trình thiết lập các khối lý thuyết và nguyên lý cốt lõi:

  • Mô hình truyền thông Web: Cơ chế xử lý yêu cầu/phản hồi (HTTP Request/Response) giữa máy khách (trình duyệt) và các loại máy chủ (Web Server, Application Server, Database Server).
  • Nguyên tắc phân tách quan tâm (Separation of Concerns): Tách biệt rõ ràng ba lớp cấu thành trang web: tầng cấu trúc nội dung (HTML), tầng biểu diễn thẩm mỹ (CSS) và tầng hành vi logic tương tác (JavaScript).
  • Tiêu chuẩn công nghiệp: Tuân thủ các quy định cú pháp theo khuyến nghị của W3C và WHATWG; chuẩn HTML5; đặc tả CSS3; kiến trúc phân cấp nút trong Document Object Model.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Viết mã nguồn HTML/CSS/JavaScript đúng chuẩn cú pháp; xây dựng layout co giãn bằng Flexbox và Grid; điều khiển DOM và bắt sự kiện người dùng; gọi API thông qua đối tượng AJAX; sử dụng Git/GitHub để quản lý mã nguồn.
  • Kỹ năng phân tích (Analytical skills): Phân tích sơ đồ cấu trúc trang (sitemap); chuyển đổi bản vẽ giao diện đồ họa (wireframe/UI từ Figma hoặc Moqups) sang tài liệu siêu văn bản; phân tích lỗi mã nguồn thông qua cửa sổ Console và Network trên Chrome DevTools.
  • Kỹ năng thực hành vận hành (Practical competencies): Đóng gói mã nguồn; kết nối dữ liệu Firebase; thiết lập máy chủ lưu trữ (hosting/VPS); cấu hình phân giải tên miền (DNS); kiểm thử chức năng, tính tương thích và khả năng đáp ứng trên các kích thước màn hình.

Phương pháp giảng dạy và học tập (300-350 từ)

Giáo trình triển khai phương pháp sư phạm kết hợp giữa thuyết giảng giải thích nguyên lý và học tập dựa trên dự án thực tiễn (Project-based Learning). Tiến trình bài giảng được thiết kế theo trình tự diễn dịch: trình bày khái niệm kỹ thuật, phân tích cấu trúc cú pháp, dẫn chứng bằng các đoạn mã nguồn ngắn gọn kèm hình ảnh kết quả kết xuất (render) từ trình duyệt, sau đó tích hợp vào bài toán lớn.

Hệ thống học liệu thực hành được cấu trúc đồng bộ ở cuối mỗi chương:

  • Hệ thống câu hỏi ôn tập lý thuyết: Được thiết kế dưới dạng câu hỏi trắc nghiệm khách quan (từ 5 đến 10 câu mỗi chương), tập trung kiểm tra các định nghĩa cốt lõi (từ viết tắt, ý nghĩa thẻ tag, tên thuộc tính, phạm vi biến, từ khóa dành riêng).
  • Hệ thống bài tập tự thực hành: Giao nhiệm vụ thực thi mã nguồn cụ thể, tăng dần độ phức tạp. Ví dụ: Chương 1 yêu cầu phân tích mã nguồn trang web mẫu https://minh-blogs.app để xác định số lượng tệp CSS và JS; Chương 2 yêu cầu dựng giao diện có chứa định dạng đồ họa vector SVG; Chương 3 yêu cầu định dạng form đăng nhập; Chương 4 yêu cầu thiết kế layout đáp ứng 3 kích thước màn hình; Chương 6 yêu cầu tích hợp biểu mẫu và lưu trữ dữ liệu lên Firebase.
  • Phương pháp đánh giá (Assessment methods): Kết hợp đánh giá mức độ ghi nhớ lý thuyết qua bài trắc nghiệm và đánh giá năng lực lập trình dựa trên sản phẩm thực hành. Các tiêu chí nghiệm thu sản phẩm bám sát vào: mức độ hợp lệ của mã nguồn (qua công cụ W3C Validator), tính chính xác của bố cục trên nhiều thiết bị và tính khả dụng của các chức năng xử lý tương tác.
  • Hướng dẫn tự học (Self-study guidelines): Người học được hướng dẫn cài đặt và thiết lập môi trường lập trình Visual Studio Code với tiện ích mở rộng Live Preview; sử dụng các công cụ trực tuyến như CodePen, CodeSandbox hoặc jsFiddle để kiểm tra nhanh các đoạn mã thử nghiệm; và khai thác bộ công cụ Developer Tools của trình duyệt (thanh Elements, Console, Network) để quan sát luồng dữ liệu cũng như gỡ rối mã lệnh.

Điểm nổi bật và cập nhật (250-300 từ)

Giáo trình ghi nhận những nội dung cập nhật kỹ thuật phù hợp với chuẩn mực phát triển web hiện đại:

  • Cập nhật tiêu chuẩn công nghệ mới: Thay thế các phương pháp dựng bố cục truyền thống (dùng bảng <table> hoặc lạm dụng thuộc tính float) bằng hai cơ chế dàn trang chuẩn mực của CSS3 là Hộp linh hoạt (Flexbox) và Bố cục lưới (CSS Grid Layout). Đồng thời, tài liệu cung cấp danh mục thẻ ngữ nghĩa HTML5 đầy đủ cùng các trường nhập liệu nâng cao của biểu mẫu (date, time, file, range).
  • Tích hợp xu hướng ngành thực tế: Giáo trình nhấn mạnh triết lý "Mobile First" và thiết kế web đáp ứng (Responsive Web Design). Nội dung này được xây dựng trên cơ sở số liệu thực tế về lưu lượng truy cập: thiết bị di động chiếm hơn 60% tổng lượng truy cập mạng và hơn một nửa dân số thế giới sở hữu điện thoại thông minh.
  • Hệ thống công cụ thực hành mang tính ứng dụng cao: Bên cạnh các phần mềm đồ họa vector như Figma và bộ công cụ Adobe (Photoshop, Illustrator), giáo trình đưa vào các công nghệ lập trình bổ trợ đang được các doanh nghiệp sử dụng rộng rãi: công cụ quản lý phiên bản Git/GitHub, tiền xử lý Sass, framework Bootstrap, thư viện jQuery và cú pháp viết tắt Emmet.
  • Mở rộng kiến thức về hạ tầng và dữ liệu: Giáo trình không giới hạn ở việc viết mã trên máy tính cục bộ mà hướng dẫn kết nối API, làm việc với dữ liệu JSON qua công cụ Postman, lưu trữ cơ sở dữ liệu trên đám mây Firebase, và trang bị các kỹ năng thiết yếu khi phát hành website như mua tên miền, thuê web host, bảo trì hệ thống và tối ưu hóa công cụ tìm kiếm (SEO).

Đối tượng sử dụng giáo trình (200-250 từ)

  • Sinh viên đại học chính quy: Tài liệu được biên soạn phục vụ trực tiếp cho sinh viên thuộc ngành Công nghệ thông tin và ngành Hệ thống thông tin quản lý của Trường Đại học Kinh tế Quốc dân cũng như các trường khối ngành kỹ thuật, kinh tế có đào tạo chuyên ngành Công nghệ thông tin, Thương mại điện tử và Kinh tế số. Giáo trình thích hợp sử dụng trong các kỳ học thuộc khối kiến thức cơ sở ngành hoặc chuyên ngành Front-end.
  • Điều kiện tiên quyết (Prerequisites): Người học cần có kiến thức cơ bản về tin học đại cương và kỹ năng sử dụng máy tính căn bản. Giáo trình không đòi hỏi người học phải có kiến thức lập trình chuyên sâu từ trước, do đã xây dựng kiến thức tuần tự từ khái niệm mạng máy tính, giao thức HTTP đến cấu trúc từng thẻ HTML.
  • Giảng viên: Cung cấp một khung chương trình chuẩn hóa gồm 8 chương học, tích hợp mục tiêu học tập, hệ thống slide minh họa trực quan, câu hỏi trắc nghiệm lý thuyết và bài tập thực hành theo tiến độ đào tạo tín chỉ.
  • Cá nhân tự học và tài liệu tham khảo: Phù hợp với lập trình viên mới bắt đầu, chuyên viên phân tích nghiệp vụ (BA), nhân viên thiết kế giao diện (UI/UX), hoặc chuyên viên tối ưu hóa công cụ tìm kiếm (SEO) cần một tài liệu tra cứu hệ thống về cú pháp chuẩn W3C, thuộc tính CSS và đối tượng DOM.

Câu hỏi thường gặp (250-300 từ)

1. Giáo trình này phù hợp với ai?

Giáo trình được biên soạn cho sinh viên đại học ngành Công nghệ thông tin, Hệ thống thông tin quản lý, các chuyên ngành kinh tế số liên quan, cùng những cá nhân muốn nắm vững kiến thức lập trình giao diện người dùng (Front-end Development) một cách bài bản từ cơ sở lý thuyết đến triển khai thực tế.

2. Cần kiến thức nền nào để học?

Người học chỉ cần kỹ năng vận hành máy tính và sử dụng trình duyệt web thông thường. Giáo trình đã trang bị đầy đủ các khái niệm nền tảng về mạng máy tính (LAN, WAN, Internet), cơ chế giao thức HTTP và cấu trúc URL ngay trong Chương 1 trước khi bước vào phần viết mã.

3. Điểm khác biệt với giáo trình khác?

Khác với các tài liệu chỉ tập trung vào cú pháp HTML/CSS rời rạc, giáo trình này bao quát toàn bộ vòng đời phát triển giao diện: từ phác thảo Wireframe/UI trên Figma, lập trình giao diện đáp ứng (RWD), xử lý sự kiện JavaScript/AJAX, đến tích hợp cơ sở dữ liệu thời gian thực Firebase và triển khai thực tế lên Web Hosting qua giao thức FTP. Toàn bộ tiến trình gắn liền với case study website "MinhBlogs".

4. Làm sao để tự học hiệu quả?

Người học cần đọc tuần tự từng chương, cài đặt Visual Studio Code với tiện ích Live Preview để thực hành viết mã ngay sau phần lý thuyết. Đồng thời, cần tận dụng Chrome DevTools để theo dõi cấu trúc cây DOM, kiểm tra thông báo tại cửa sổ Console và hoàn thành các bài tập tự thực hành ở cuối mỗi chương.

5. Có tài liệu bổ trợ nào kèm theo?

Cuối sách tích hợp 3 phụ lục tra cứu nhanh: Bảng các phần tử HTML (Phụ lục 1), Bảng tra cứu thuộc tính CSS (Phụ lục 2), Bảng danh mục từ dành riêng trong JavaScript (Phụ lục 3), cùng danh mục tài liệu tham khảo quốc tế chuẩn mực như giáo trình của Murach và O'Reilly Media.

Kết luận (150 từ)

Giáo trình Thiết kế Web của tập thể tác giả Viện Công nghệ thông tin và Kinh tế số - Trường Đại học Kinh tế Quốc dân là tài liệu giảng dạy học thuật cung cấp hệ thống kiến thức toàn diện về phát triển giao diện web (Front-end). Giá trị cốt lõi của cuốn sách thể hiện ở tính chuẩn hóa cú pháp theo tiêu chuẩn W3C/WHATWG, gắn kết chặt chẽ giữa lý thuyết mạng - cấu trúc dữ liệu với kỹ năng lập trình thực tế.

Lộ trình học tập do giáo trình vạch ra gồm 6 giai đoạn logic:

  1. Tiếp cận tổng quan mạng và quy trình phát triển website.
  2. Dựng cấu trúc nội dung với HTML5.
  3. Tạo kiểu và định dạng bố cục đáp ứng bằng CSS3 (Flexbox/Grid).
  4. Lập trình hành vi logic và xử lý dữ liệu với JavaScript (DOM/AJAX).
  5. Tận dụng công cụ tự động hóa và thư viện hỗ trợ (Git, Sass, Bootstrap).
  6. Triển khai, kiểm thử và vận hành website trên môi trường Internet.

Để mở rộng và hoàn thiện kiến thức, người học có thể đối chiếu nội dung với 3 phần phụ lục kỹ thuật ở cuối tài liệu và nghiên cứu thêm hai giáo trình tham khảo quốc tế được trích dẫn: Murach’s HTML5 and CSS3 (Anne Boehm, Zak Ruvalcaba, 2018) và Learning Web Design (Jennifer Robbins, O'Reilly Media, 2018).