Font size
WorksheetsThiết kế Web bài 1
Total questions: 29
Worksheet time: 1hrs 1mins
Thành phần nào sau đây là một phần của cấu trúc cây DOM?
Tên miền (Domain)
Web Hosting
Giao thức HTTP
Element Nodes
Trong quy trình hiển thị trang HTML, bước nào sau đây được thực hiện ngay sau khi phân tích cú pháp HTML?
Painting (Vẽ)
Tải tài nguyên như hình ảnh và font
Phân tích CSS để tạo CSSOM
Tính toán vị trí (Layout)
Công cụ nào sau đây được sử dụng để kiểm tra và chỉnh sửa cấu trúc DOM của một trang web?
Visual Studio Code
GitHub
Figma
Developer Tools (Inspect) của trình duyệt
Vai trò nào sau đây của trang web được đề cập trong bài học? (Chọn 2 đáp án)
Tạo mã nguồn tự động
Quảng bá thương hiệu
Cung cấp thông tin
Lưu trữ cơ sở dữ liệu
Kéo thả để ghép đúng các bước trong quy trình hiển thị trang HTML của trình duyệt web với mô tả tương ứng: (Chỉ điền một số vào câu trả lời VD:1)
Tải tài nguyên
Phân tích cú pháp HTML
Kết hợp DOM và CSSOM
Painting
Trình duyệt gửi yêu cầu HTTP để tải HTML, CSS, JavaScript:
(a)
Xây dựng DOM Tree từ tài liệu HTML:
(a)
Tạo Render Tree chứa các phần tử sẽ hiển thị trên màn hình:
(a)
Vẽ các phần tử lên màn hình với màu sắc, văn bản, bóng... :
(a)
Giai đoạn nào trong quy trình xây dựng website xác định mục tiêu, đối tượng người dùng và các chức năng cần thiết?
Triển khai
Kiểm thử
Thiết kế
Lập kế hoạch
Trong giai đoạn thiết kế website, yếu tố nào được ưu tiên để đảm bảo trải nghiệm người dùng tốt?
Tạo giao diện trực quan và dể sử dụng (UI/UX)
Viết mã nguồn back-end
Kiểm tra hiệu suất tải trang
Tối ưu hóa cơ sở dữ liệu
Trong giai đoạn xây dựng website, phần front-end chủ yếu liên quan đến việc gi?
Tich hợp hệ thống kiểm soát phiên bản
Xây dựng giao diện người dùng với HTML, CSS, JavaScript
Kiểm tra bảo mật của website
Quản lý cơ sở dữ liệu và server
Mục đích chính của giai đoạn kiếm thử trong quy trình xây dựng website là gì?
Cập nhật nội dung website
Ra mắt website trên môi trường thực tế
Thiết kế giao diện người dùng
Phát hiện lỗi và đảm bảo các tính năng hoạt động đúng trên mọi thiết bị
Những hoạt động nào sau đây thuộc về giai đoạn lập kế hoạch trong quy trình xây dụng website? (Chọn 2 đáp án)
Phân tích đối tượng người dùng
Xác định mục tiêu của website
Viết mã nguồn back-end
Kiếm tra khả năng tương thích trên các trình duyệt
Khi sử dụng Figma để thiết kế giao diện mẫu ,bạn muốn tạo một nút bấm có thể tái sử dụng trên nhiều trang.Tính năng nào của Figma bạn nên sử dụng?
Auto Layout
Grid
Inspect Panel
Components
Bạn cần chia sẻ thiết kế giao diện mẫu với nhóm lập trình viên để họ bắt đầu viết mã. Hành động nào sau đây là phù hợp nhất trong Figma?
Sử dụng Auto Layout để điều chỉnh bố cục
Thêm hiệu ứng hoạt hình bằng plugin Figmotion
Sử dụng Inspect Panel để cung cấp thông số kĩ thuật
Tạo một Frame mới với kích thước khác
Khi thiết kế giao diện mẫu,bạn muốn đảm bảo bố cục tự động điều chỉnh khi nội dung thay đổi.Tính năng nào của Figma nên được sử dụng?
Prototype
Layers
Auto Layout
Assets
Bạn đang thiết kế phần Header của một trang web trong Figma.Yếu tố nào sau đây nên được đặt ở góc trên bên trái để thu hút sự chú ý của người dung?
Thông tin liên hệ
Menu điều hướng
Logo thương hiệu
Nút kêu gọi hành động (CTA)
Hãy xác định các phát biểu sau là Đúng hay Sai về hành động nên thực hiện khi xuất và chia sẻ thiết kế giao diện mẫu từ Figma cho lập trình viên:
1) Tạo Frame mới cho thiết bị khác là việc bắt buộc để chia sẻ thiết kế với lập trình viên.
Đúng
Sai
2) Tạo hoạt hình bằng Figmotion là bước cần thiết trước khi bàn giao thiết kế cho lập trình viên.
Đúng
Sai
3) Xuất hình ảnh dưới định dạng SVG hoặc PNG giúp lập trình viên dễ dàng sử dụng trong quá trình phát triển giao diện.
Sai
Đúng
4) Sử dụng Inspect Panel trong Figma để cung cấp thông số kỹ thuật như màu sắc, kích thước, font chữ,... cho lập trình viên.
Đúng
Sai
Vai trò chính của trình duyệt web trong việc hiển thị trang web là gì?
Thiết kế giao diện người dùng (UI) cho trang web
Lưu trữ mã nguồn HTML và các tài nguyên của website
Quản lý tên miền và địa chỉ IP của website
Gửi yêu cầu đến máy chủ web, nhận và xử lý các tệp HTML, CSS, JavaScript để hiển thị nội dung
Kéo thả để ghép đúng các giai đoạn trong quy trình xây dựng website với công cụ hoặc công nghệ thường được sử dụng: (Chỉ điền một số vào câu trả lời VD:1)
Thiết kế
Xây dựng
Bảo trì
Kiểm thử
Sử dụng Figma để tạo giao diện mẫu:
(a)
Sử dụng HTML, CSS, JavaScript và các framework như React:
(a)
Cập nhật nội dung và xử lý lỗi phát sinh:
(a)
Sử dụng công cụ Developer Tools để tìm và sửa lỗi:
(a)
Khi thiết kế giao diện màu bằng Figma, những hành động nào sau đây giúp đảm bảo tính nhất quán trong thiết kế? (Chọn 2 đáp án)
Tạo Style Guide để định nghĩa màu sắc và kiểu chữ
Sử dụng Components để tái sử dụng các thành phần như nút bấm
Sử dụng plugin Figmotion để tạo hoạt hình
Xuất file dưới định dạng PDF
Hãy xác định các phát biểu sau là Đúng hay Sai về các hoạt động thuộc giai đoạn bảo trì website:
1) Xử lý lỗi phát sinh trong quá trình sử dụng là một phần quan trọng của bảo trì website.
Đúng
Sai
2) Cập nhật tính năng theo nhu cầu người dùng là một trong những nhiệm vụ của giai đoạn bảo trì website.
Sai
Đúng
3) Thiết kế lại giao diện người dùng từ đầu là nhiệm vụ chính của giai đoạn bảo trì.
Đúng
Sai
4) Xác định mục tiêu của website là hoạt động điển hình trong giai đoạn bảo trì.
Sai
Đúng
Kéo thả để ghép đúng các tính năng của Figma với mục đích sử dụng trong thiết kế giao diện mẫu: (Chỉ điền một số vào câu trả lời VD:1)
Components
Auto Layout
Style Guide
Inspect Panel
Tạo thành phần tái sử dụng như nút bấm:
(a)
Tạo bố cục tự động điều chỉnh khi nội dung thay đổi:
(a)
Định nghĩa màu sắc và kiểu chữ để đảm bảo tính nhất quán:
(a)
Cung cấp thông số kỹ thuật cho lập trình viên:
(a)
Document Object Model (DOM) là gì?
Một công cụ thiết kế giao diện web
Một hệ thống quản lý cơ sở dữ liệu cho website
Một giao thức truyền tải dữ liệu giữa máy chủ và trình duyệt
Một giao diện lập trình ứng dụng (API) biểu diễn cấu trúc HTML dưới dạng cây phân cấp các nút
Kéo thả để ghép đúng các loại nút trong cấu trúc cây DOM với định nghĩa của chúng: (Chỉ điền một số vào câu trả lời VD:1)
Attribute Nodes
Element Nodes
Text Nodes
Đại diện cho các thuộc tính của thẻ HTML (như id, class, href):
(a)
Đại diện cho các thẻ HTML (như div, span):
(a)
Đại diện cho nội dung văn bản trong các thẻ HTML:
(a)
Bạn đang thiết kế giao diện màu cho một trang web thương mại điện tử bằng Figma. Để đảm bảo tính nhất quán trong thiết kế, bước nào sau đây bạn nên thực hiện đầu tiên?
Thiết lập Prototype để kiểm tra tương tác
Tạo Style Guide với màu sắc và kiểu chữ
Sử dụng plugin Unsplash để thêm hình ảnh sản phẩm
Xuất tài nguyên dưới định dạng PNG
Hãy xác định các phát biểu sau là Đúng hay Sai về các thành phần nên có trong Hero section khi thiết kế giao diện mẫu trong Figma:
Hình ảnh lớn nổi bật là một thành phần quan trọng trong Hero section để thu hút sự chú ý người dùng.
Sai
Đúng
Logo thương hiệu luôn phải được đặt trong Hero section của trang web.
Sai
Đúng
Thông điệp chính của trang web nên được thể hiện rõ ràng trong Hero section.
Sai
Đúng
Thông tin liên hệ thường được đặt trong Hero section để người dùng dễ thấy nhất.
Đúng
Sai
Giai đoạn triển khai website bao gồm hoạt động nào sau đây?
Thiết kế giao diện bằng Figma
Phân tích hành vi người dùng để xác định mục tiêu
Đưa website lên máy chủ và kiểm tra lần cuối trước khi công khai
Sửa lỗi mã nguồn JavaScript
Kéo thả để ghép đúng các giai đoạn trong quy trình xây dựng website với mô tả tương ứng:
Xây dựng
Lập kế hoạch
Thiết kế
Kiểm thử
Sử dụng HTML, CSS, JavaScript để biến thiết kế thành sản phẩm thực tế:
(a)
Xác định mục tiêu, đối tượng người dùng và chức năng cần thiết:
(a)
Tạo giao diện người dùng (UI) và trải nghiệm người dùng (UX):
(a)
Đảm bảo các tính năng hoạt động đúng và website tương thích trên nhiều thiết bị:
(a)
Hãy xác định các phát biểu sau là Đúng hay Sai về các yếu tố được tập trung trong giai đoạn thiết kế website để cải thiện trải nghiệm người dùng:
Thiết kế trải nghiệm người dùng (UX) là yếu tố cốt lõi được chú trọng để nâng cao mức độ hài lòng của người dùng.
Đúng
Sai
Thiết kế giao diện người dùng (UI) là một phần quan trọng nhằm cải thiện trải nghiệm người dùng.
Đúng
Sai
Kiểm thử bảo mật là một bước quan trọng để tăng cường UX trong giai đoạn thiết kế.
Đúng
Sai
Tối ưu hóa tốc độ tải trang là yếu tố chính được ưu tiên trong giai đoạn thiết kế trải nghiệm người dùng.
Sai
Đúng
Trang web là gì?
Một giao diện thiết kế đồ họa cho ứng dụng di động
Một máy chủ lưu trữ dữ liệu của website
Một văn bản được viết bằng HTML, hoặc XHTML, hiển thị trên World Wide Web thông qua trình duyệt
Một chương trình phần mềm chạy trên trình duyệt web
Kéo thả để ghép đúng các bước thiết kế giao diện mẫu trong Figma với mô tả tương ứng:
Thiết lập kích thước khung làm việc
Tạo tài khoản và làm quen giao diện
Sử dụng Auto Layout và Prototype
Thêm và quản lý thành phần thiết kế
Sử dụng Frame để xác định kích thước và bố cục cho thiết bị:
(a)
Đăng ký tài khoản tại figma.com và khám phá giao diện
(a)
Tạo bố cục linh hoạt và mô phỏng tương tác người dùng
(a)
Tạo các nút bấm, văn bản, hình ảnh và sử dụng Components
(a)
![Tin [Chuyên] - 11 - CKI](https://cf.quizizz.com/image/image-loader.svg)
