Có nhiều cách khác nhau để tạo trang trình bày cho bản trình bày trên Linux. Bạn có thể sử dụng OpenOffice, LibreOffice hoặc thậm chí Microsoft Office (thông qua Wine). Bản trình bày hoàn chỉnh của bạn sẽ là tệp .odp (định dạng OpenDocument) hoặc .ppt (định dạng Powerpoint), mà bạn sử dụng qua các bộ đã đề cập ở trên (hoặc ứng dụng trình xem) để cung cấp bản trình bày của bạn. Nếu không cài đặt đúng phần mềm, không thể xem bản trình bày. Nó sẽ không tuyệt vời nếu bạn có thể tạo một bản trình bày chạy trong trình duyệt web, một bản trình bày được xây dựng bằng HTML, Javascript và CSS? Nhờ impress.js, bạn có thể!

impress.js là một khung trình bày CSS và Javascript mạnh mẽ. Nó cung cấp tất cả các thư viện và các tệp CSS cần thiết để tạo các bản trình bày phức tạp và trực quan bằng cách sử dụng HTML. Nhưng một lời cảnh báo trước khi chúng tôi tiếp tục, sử dụng Impress.js ở dạng thô của nó là tất cả về cách tạo tệp bằng cách sử dụng trình chỉnh sửa văn bản và viết HTML theo cách thủ công. Không có GUI lạ mắt nào ở đây, không có WYSIWYG.

Lưu ý : Trong khi hướng dẫn được hiển thị ở đây được thực hiện trên nền tảng Linux, các bước là như nhau bất kể nền tảng hệ điều hành bạn đang sử dụng. Impress.js là một tập lệnh dựa trên web và tương thích với nền tảng chéo.

Để bắt đầu, hãy tải xuống impress.js từ github. Cách đơn giản nhất là chạy lệnh sau từ dòng lệnh:

 wget https://github.com/bartaz/impress.js/archive/master.zip

Và giải nén nó:

 giải nén master.zip

Bên trong thư mục “impress.js-master”, có hai thư mục con - CSS và JS, chứa các tệp Javascript và Javascript impress.js tương ứng. Bạn thực sự không cần phải đi sâu vào thư mục Javascript, tuy nhiên thư mục CSS chứa tệp CSS demo mà bạn có thể muốn sửa đổi cho bản trình bày của riêng bạn. Bạn cũng sẽ tìm thấy bản trình bày Impress.js ví dụ trong tệp index.html. Sử dụng Nautilus, mở thư mục “impress.js-master” và nhấp đúp vào index.html. Thao tác này sẽ mở trình duyệt web mặc định của bạn (hy vọng là Firefox hoặc Chrome) và bắt đầu bản trình bày.

Đây là cách xây dựng một bản trình bày đơn giản dựa trên tệp CSS ví dụ (“css / impress-demo.css”) được cung cấp với tệp impress.js. Tạo một tệp HTML bằng cách sử dụng trình soạn thảo văn bản. Bạn có thể muốn sử dụng một trình soạn thảo văn bản như gEdit, hoặc bạn có thể tạo nó bằng cách sử dụng nano trên dòng lệnh như sau:

 nano demo1.html

Chèn đoạn mã sau vào tệp, sau đó lưu và thoát (CTRL-X).

 Tất cả về impress.js Tất cả về impress.js impress.js là một khung trình bày CSS và Javascript mạnh mẽ. Tất cả về impress.js Nó cung cấp tất cả các thư viện và các tệp CSS cần thiết để tạo các bài thuyết trình phức tạp và trực quan bằng cách sử dụng HTML Tất cả về impress.js Tìm hiểu thêm tại http://bartaz.github.io/impress.js impress (). Init ();

Tất cả các tệp HTML được chia thành các phần bắt đầu bằng thẻ mở (ví dụ) và đóng cùng một thẻ nhưng với dấu gạch chéo được thêm vào (ví dụ). Trong phần “”, thẻ “” định nghĩa tệp CSS nào sẽ được sử dụng (ví dụ: css / impress-demo.css). Khi bạn nhận được nâng cao hơn với impress.js, bạn sẽ cần tạo tệp CSS của riêng mình.

Trong phần này, có một phần có id là “gây ấn tượng”. Đây là nơi Impress.js hy vọng sẽ tìm thấy các trang trình bày. Mỗi trang trình bày được gọi là "bước" và phải sử dụng "bước" trong lớp. Trong ví dụ trên, có ba trang trình bày, mỗi trang trình bày được đánh dấu bằng một lớp “trang trình bày từng bước”.

Mỗi trang trình bày có thuộc tính data-x và data-y xác định vị trí trang trình bày. Giá trị y vẫn giữ nguyên cho ba trang trình bày, nhưng giá trị x thay đổi. Nó bắt đầu với -1000 và sau đó di chuyển đến 0 và cuối cùng là 1000. Kết quả là các trang trình bày sẽ di chuyển từ trái sang phải khi bản trình bày diễn ra. Bằng cách thay đổi giá trị x và y, bạn có thể làm cho các trang trình bày chuyển đổi theo bất kỳ hướng nào bạn thích.

Ở cuối tệp HTML là hai dòng tải kịch bản lệnh impress.js và sau đó khởi tạo thư viện impress.js (ví dụ: impress (). Init).

Để kiểm tra tệp, bấm đúp vào demo1.html từ bên trong Nautilus.

Quá trình chuyển đổi impress.js cũng có thể bao gồm xoay vòng. Thêm trang trình bày này vào bản trình bày của bạn:

 Tất cả về rotation.js Rotation!

Thuộc tính xoay dữ liệu cho Impress.js xoay khung nhìn 90 độ trong suốt quá trình chuyển đổi. Giá trị là tuyệt đối, do đó, một trang chiếu khác có giá trị là 90 sẽ không xoay nếu trang trình bày trước đó có xoay vòng dữ liệu 90. Thử nghiệm bản trình bày mới trong trình duyệt web của bạn.

Một thuộc tính thú vị khác là quy mô dữ liệu (tức là thu phóng). Điều này có thể cung cấp cho bản trình bày của bạn một phong cách 3D bằng cách phóng to và thu nhỏ canvas khi bản trình bày diễn ra.

Để xem hiệu ứng thu phóng, hãy thêm trang trình bày sau vào bản trình bày của bạn:

 Thu phóng, cộng với điều này không giống như trang trình bày

Có một vài điều đáng chú ý về slide cuối cùng này. Đầu tiên nó bỏ qua lớp “slide”. Điều này có nghĩa là slide sẽ được trình bày không có nền trắng như được định nghĩa trong tệp CSS mẫu. Thứ hai, lưu ý các giá trị của dữ liệu xoay và quy mô dữ liệu. Thuộc tính xoay dữ liệu sẽ đưa canvas trở lại 0 độ (từ xoay 90 độ trong trang trước). Thuộc tính scale data làm cho impress.js thực hiện zoom trong quá trình chuyển đổi. Để xem nó trông như thế nào, hãy kiểm tra bản trình bày trong trình duyệt của bạn.

Bây giờ bạn đã nắm vững một vài trang trình bày đơn giản, hãy thử đọc qua index.html và “css / impress-demo.css” để xem bản demo được xây dựng như thế nào. Tệp index.html có các nhận xét phong phú để hướng dẫn bạn qua các phần tử và các lớp khác nhau.

Nếu bạn có bất kỳ câu hỏi nào về các ví dụ được nêu ở trên, vui lòng sử dụng phần bình luận bên dưới và chúng tôi sẽ xem chúng tôi có thể trợ giúp không.