Tài liệu giữa kỳ môn Lập trình Windows | Trường Đại học Sư phạm Thành phố Hồ Chí Minh

lOMoAR cPSD| 22014077 HTML5 for print Design
HTML5 được thiết kế chủ yếu cho nội dung dựa trên web, nhưng nó cũng cung cấp một số
hỗ trợ cho phương tiện in ấn. HTML5 giới thiệu các tính năng mới nhằm cải thiện chất
lượng in và giảm chi phí in.
Một trong những tính năng chính của HTML5 để in là khả năng tùy chỉnh bố cục và thiết
kế trang. Bạn có thể xác định lề trang, hướng và kích thước trang bằng cách sử dụng môđun
CSS3 Print mới. Điều này cho phép bạn tạo các trang được tối ưu hóa để in và hiển thị chính xác khi in.
Một tính năng khác của HTML5 để in là khả năng tạo các phiên bản trang web thân thiện
với máy in bằng cách sử dụng thuộc tính phương tiện. Bằng cách chỉ định "in" làm loại
phương tiện, bạn có thể tạo một phiên bản của trang loại bỏ nội dung không cần thiết và
được tối ưu hóa để in.
Ngoài ra, HTML5 bao gồm hỗ trợ in tài liệu PDF bằng tính năng "nội dung nhúng". Điều
này cho phép bạn nhúng tài liệu PDF vào trang web của mình và cho phép người dùng in
tài liệu trực tiếp từ trình duyệt.
Nhìn chung, mặc dù HTML5 được thiết kế chủ yếu cho nội dung dựa trên web, nhưng nó
cũng cung cấp một số hỗ trợ cho phương tiện in ấn và có thể hữu ích để tạo các phiên bản
trang web thân thiện với máy in.
Nếu bạn đang xác định biểu định kiểu của mình trong một tệp riêng biệt, thì bạn cũng có
thể sử dụng thuộc tính phương tiện khi liên kết với biểu định kiểu bên ngoài. Ví dụ:
HTML5 có một số tính năng có thể được sử dụng cho mục đích in ấn. Một số trong số đó là:
1. Truy vấn phương tiện in: Tính năng này cho phép trang được tối ưu hóa để
inbằng cách xác định các kiểu in cụ thể. Có thể đạt được điều này bằng cách tạo
một tệp CSS riêng để in hoặc bằng cách sử dụng chức năng in @media trong tệp
CSS chính. “@media” - Quy tắc này cho phép bạn chỉ định kiểu khác nhau cho
các phương tiện khác nhau. Vì vậy, bạn có thể xác định các quy tắc khác nhau
cho màn hình và máy in. Có thể sử dụng quy tắc “@media print” trong biểu định
kiểu để xác định các kiểu sẽ chỉ áp dụng khi trang được in.
Ví dụ dưới đây chỉ định các họ phông chữ khác nhau cho màn hình và bản in.
CSS tiếp theo sử dụng cùng một cỡ chữ cho cả màn hình cũng như máy in. lOMoAR cPSD| 22014077
2. Thuộc tính "print": Thuộc tính này có thể được thêm vào liên kết hoặc nút
kíchhoạt chức năng in. Chức năng in sẽ tự động in nội dung của trang được liên kết.
3. Phương thức "window.print ()": Phương thức này kích hoạt chức năng in
khiđược gọi. Nó có thể được sử dụng để tạo nút in có thể được thêm vào trang web.
4. Có thể sử dụng quy tắc “@page” để xác định lề trang, kích thước và các thuộc
tính dành riêng cho bản in khác. Page Model trong CSS2 xác định cách một tài
liệu được định dạng bên trong một khu vực hình chữ nhật -- một Page Box -có
một độ rộng và chiều cao.
Page box này là một vùng hình chữ nhật bao gồm hai khu vực:
Page Area: bao gồm các box được bố trí trên page đó. Các cạnh của page area
đóng vai trò như là khối chứa ban đầu cho layout xuất hiện giữa các Page Break.
Margin Area: bao quanh Page area.
Bạn có thể xác định kích cỡ, chiều, lề, … của một page box bên trong qui tắc
rule. Kích cỡ của Page Box được thiết lập với thuộc tính size. Kích cỡ của Page
Area là kích cỡ của Page Box trừ đi Margin Area.
Ví dụ: qui tắc @page sau sẽ thiết lập kích cỡ Page Box là 8.5 x 11 inch và tạo
một lề là 2cm trên tất cả các cạnh giữa Page Box và Page Area. lOMoAR cPSD| 22014077
Bạn có thể sử dụng các thuộc tính margin, margin-top, margin-bottom,
marginleft và margin-right bên trong qui tắc @page để thiết lập lề cho trang của bạn.
Thiết lập kích cỡ trang (page size) trong CSS
Thuộc tính size xác định kích cỡ và hướng của một Page Box. Thuộc tính này
có thể nhận các giá trị:
auto: sử dụng giá trị này, kích cỡ và hướng của Page Box sẽ được thiết lập tự
động phục thuộc theo nội dung và context của phần tử. Tức là tùy theo Target
Sheet – chẳng hạn như bạn in trên khổ giấy A4 thì khổ giấy đó là Target Sheet.
landscape: Page Box sẽ có cùng kích cỡ với Target, và các cạnh dài hơn sẽ nằm ngang.
portrait: Page Box sẽ có cùng kích cỡ với Target, và các cạnh ngắn hơn sẽ nằm
ngang. length: sử dụng giá trị length cho thuộc tính size để tạo một Page Box
tuyệt đối. Tức là, nếu bất kỳ giá trị nào được xác định, nó sẽ thiết lập cho cả độ
rộng và chiều cao của Page Box. Giá trị % sẽ không được chấp nhận trong thuộc tính size. Ví dụ:
Quy tắc bên dưới chỉ định kích thước trang mặc định là 5,5 x 8,5 inch.
Ngoài việc chỉ định kích thước với các giá trị độ dài, bạn cũng có thể sử dụng
các từ khóa kích thước giấy, chẳng hạn như “A4” hoặc “legal”.
Bạn cũng có thể sử dụng từ khóa để chỉ định hướng của trang - “dọc” (portrait)
hoặc “ngang” (landscape). lOMoAR cPSD| 22014077
5. Ngắt trang và Thuộc tính CSS: HTML5 cho phép nhà phát triển xác định ngắt
trang trong nội dung được in bằng các thuộc tính CSS. Các thuộc tính có thể được sử dụng
để kiểm soát nơi nội dung sẽ được phân chia trên các trang. Phân trang trong CSS
Trừ khi bạn xác định, nếu không các ngắt trang (Page Break) sẽ chỉ xuất hiện
khi định dạng Page thay đổi hoặc khi nội dung đã hiển thị đầy trên Page Box
hiện tại. Để kiểm soát trình ngắt trang, bạn có thể sử dụng các thuộc tính
pagebreak-before, page-break-after và page-break-inside.
Hai thuộc tính page-break-before và page-break-after đều chấp nhận các giá trị
auto, always, avoid, left, và right.
Từ khóa auto là mặc định, tức là trình duyệt sẽ tạo các Page Break khi cần thiết.
Từ khóa always buộc trình duyệt phải tạo ngắt trang trước hoặc sau phần tử. Từ
khóa avoid buộc trình duyệt tạo ngắt trang ngay trước hoặc ngay sau phần tử.
Hai từ khóa left và right buộc trình duyệt tạo một hoặc hai ngắt trang, để mà
phần tử được hiển thị trên Left Page hoặc Right Page (trong Doublesided Document).
Để không phức tạp, bạn có thể sử dụng thuộc tính pagination trong CSS. Giả sử
tài liệu của bạn chỉ có các Header cấp độ 1 xuất hiện ở phần đầu mỗi chương
mới (tức là Đầu đề cho mỗi chương mới) và các Header cấp độ 2 để biểu thị các
khu vực (tức là Đầu đề cho các phần nội dung trong chương – Section Header).
Nếu bạn muốn xác định rằng: mỗi khi có chương mới thì chương mới này sẽ
xuất hiện trên Right Page và các Section Header sẽ không bị chia tách bởi một
Page Break, bạn có thể làm như sau: lOMoAR cPSD| 22014077
Chỉ sử dụng các giá trị auto và avoid với thuộc tính page-break-inside. Nếu bạn thích các
bảng của mình không bị tách bởi các Page Break, bạn viết qui tắc:
Đây chỉ là một vài trong số nhiều tính năng trong HTML5 có thể được sử dụng để in. Các
nhà phát triển có thể sử dụng các tính năng này để tạo các giải pháp in tùy chỉnh đáp ứng
các yêu cầu cụ thể của họ. JS & CSS framework CSS framework
CSS framework là một tập hợp các thư viện đã được chuẩn bị sẵn và sẵn sàng sử dụng cho
việc thiết kế web. Chúng cung cấp một cấu trúc cơ bản để mang đến các giải pháp nhất
quán, giúp giải quyết những vấn đề có tính lặp lại trong quá trình xây dựng giao diện cho
website. Các chức năng chung trong CSS framework có thể được sử dụng cho các tình
huống và ứng dụng cụ thể.
Áp dụng CSS framework sẽ tiết kiệm đáng kể thời gian xây mới ứng dụng và website cho
các lập trình viên frontend. Bạn hoàn toàn có thể tận dụng nền tảng cơ bản từ những ứng
dụng trước đó cho trang web và ứng dụng hiện tại.
Đối với một nhóm frontend developer, sẽ thật tuyệt nếu bạn có thể đọc code của các thành
viên khác thông qua lợi ích chuẩn hóa bố cục từ các framework. Điều này giúp hạn chế lỗi
phát sinh khi làm web và thuận tiện cho tất cả mọi người trong việc sửa chữa giao diện.
Dưới đây là một số CSS framework phổ biến:
1. Bootstrap - Một khung CSS phổ biến do Twitter phát triển để xây dựng các
trangweb đáp ứng và ưu tiên thiết bị di động. lOMoAR cPSD| 22014077
2. Foundation - Một khung CSS bao gồm hệ thống lưới đáp ứng, các thành phần
giaodiện người dùng và một loạt các phần bổ trợ.
3. Bulma- là một css framework, được viết bằng sass dựa vào flexbox, sử dụng cssgrid
for responsive và được thiết kế cho mobile first. Nó là một modular css fw, có nghĩa
bạn có thể sử dụng đơn lẻ các chức năng của nó như columns, button, form… 4.
5. Materialize - Khung CSS đáp ứng và ưu tiên thiết bị di động giúp dễ dàng xâydựng
các trang web đẹp, có giao diện hiện đại.
6. Semantic UI - Khung CSS tập trung vào việc tạo các thiết kế đơn giản, trực quan,dễ
hiểu và dễ điều hướng.
Ví dụ dưới đây sẽ cho chúng ta thấy cách sử dụng css framework, cụ thể là Bulma. Bạn
chỉ cần dán đoạn mã dưới đây vào thẻ head của file html của bạn thì có thể sử dụng
được. Ngoài ra thì bạn có thể tải về máy file của nó hoặc sử CDN như trên hình
Sau đó lên trang https://bulma.io/documentation/ để sử dụng các CSS library có sẵn
của nó. Ví dụ bạn muốn tạo 1 message thì có thể lấy sẵn code ở trên đó, nó sẽ cho bạn
thấy hình thức và code của nó ở bên cạnh
Còn rất nhiều các CSS library khác, bạn có thể sử dụng tùy theo ý của bạn. JS framework
JavaScript framework thực chất đó là các đoạn code được viết sẵn bằng ngôn ngữ lập trình
JavaScript, tạo nên một bộ khung có sẵn. Nó chứa các trình biên dịch, diễn dịch, các thư lOMoAR cPSD| 22014077
viện, Những dòng code được viết sẵn trong framework có thể được sử dụng cho các tính
năng hoặc các tác vụ lập trình thông thường.
Lợi ích của việc sử dụng JavaScript framework là tăng hiệu quả tổng thể. JavaScript
framework mang tới cho dự án của bạn một cấu trúc chi tiết hơn, sẵn sàng cung cấp các
giải pháp lập trình phổ biến.
Dưới đây là một số JS framework phổ biến: 1.
Backbone.js là một framework đơn giản, rất phù hợp với các ứng
dụng web nhỏ. Backbone.js là một JavaScript framework dễ sử dụng, được
nhiều nhà phát triển web tin dùng khi phát triển các ứng dụng trang đơn.
Muốn sử dụng hiệu quả Backbone, bạn cần dùng thêm các công cụ hỗ trợ
như: Chaplin, Marionette, Thorax, Handlebar hoặc Mustache. Công cụ này
là lựa chọn phổ biến của các lập trình front-end và cả back-end. 2.
jQuery - Một thư viện JS cung cấp một loạt các chức năng hữu ích để tương
tácvới các tài liệu HTML, chẳng hạn như thao tác với DOM. 3.
AngularJS - Một khung JS mạnh mẽ để xây dựng các ứng dụng web động.
Đâylà một JavaScript framework dùng để viết giao diện web. Công cụ này được
phát triển bởi Google. Nếu không có Angular thì các nhà phát triển web mất rất
nhiều thời gian để hoàn thiện một giao diện web. Ưu điểm của ứng dụng này là chạy
trên browser mà khi sử dụng không bắt buộc phải tại lại trang. Ngoài ra, Angular dễ đọc, dễ bảo trì. 4.
React - Một khung JS khác để xây dựng giao diện người dùng giàu tính
tươngtác. React như một thư viện JavaScript đình đám mà hầu hết các nhà phát triển
chuyên nghiệp đều biết tới. Nó được ra mắt như một công cụ JavaScript mã nguồn
mở vào năm 2013. React cũng được coi là một JavaScript framework đứng đầu
bảng xếp hạng trong nhiều năm. Mục đích của React là xây dựng giao diện người
dùng. Ưu điểm của React là tốc độ phản hồi nhanh. React sử dụng virtual DOM để
tối ưu hóa trang tốt hơn. Thành phần của công cụ này được phát triển bởi Facebook.
React cũng là một JavaScript framework dễ sử dụng và thân thiện với SEO. Bởi nó
cho phép bạn tạo giao diện người dùng có thể truy cập được trên nhiều nền tảng tìm kiếm khác nhau. 5.
Vue.js - Khung JS tiến bộ để xây dựng giao diện người dùng và ứng dụng
mộttrang. Đây là một JavaScript framework mới được phát hành năm 2014 nhưng
được sử dụng rất phổ biến. Năm 2017, xếp hạng sao của Vue (người dùng “thích”)
trên GitHub đạt 40.000 (tăng từ 26.000 vào năm 2016), vươn lên vị trí số một. Các lOMoAR cPSD| 22014077
tính năng nổi bật của Vue bao gồm: các biểu đồ học tập (giúp những lập trình viên
JavaScript mới có thể truy cập được), cú pháp dự trên ngôn ngữ HTML cho phép
người dùng viết ở định dạng HTML chuẩn (thay vì yêu cầu người dùng học một
ngôn ngữ riêng), cùng nhiều tính năng khác để ứng dụng vào dự án lập trình của bạn.
Ví dụ về JS framework Jquery:
Đê sử dụng dụng nó thì có nhiều cách, có thể tải trên web https://jquery.com/download/
Hoặc sử dụng Google CDN như hình bên dưới
Thư viện jQuery chứa các tính năng sau: 1. Thao tác HTML/DOM 2. Thao tác CSS
3. Phương thức sự kiện HTML
4. Hiệu ứng và hình ảnh động 5. AJAX
Cú pháp cơ bản là: $(selector). hành động ()
• Dấu $ để xác định/truy cập jQuery
• (selector) để "truy vấn (hoặc tìm)" các phần tử HTML
• Một hành động jQuery () sẽ được thực hiện trên (các) phần tử Ví dụ:
$(this). hide()- ẩn phần tử hiện tại.
$("p").hide()- ẩn tất cả các phần tử

.
$(".test").hide()- ẩn tất cả các phần tử với class="test".
$("#test").hide()- ẩn phần tử có id="test".
Các phần còn lại bạn có thể lên trang https://api.jquery.com/ để tìm hiểu và sử dụng.

lOMoAR cPSD| 22014077
Kết luận cho JS & CSS framework
Có rất nhiều khung JS và CSS khác có sẵn, vì vậy bạn nên khám phá một vài khung để tìm
ra khung hoạt động tốt nhất cho nhu cầu và phong cách viết mã của mình.
Các khung JavaScript (JS) và CSS là các công cụ được sử dụng để hợp lý hóa và đơn giản
hóa việc phát triển các ứng dụng web và trang web. Các khung này cung cấp các thành
phần và công cụ dựng sẵn giúp nhà phát triển tạo giao diện người dùng rõ ràng và nhất
quán, bố cục đáp ứng và trải nghiệm người dùng tổng thể tốt hơn.