Bagaimana membuat presentasi HTML dengan webslides

Di dunia dimana tunjukkan ide kami di internet Ini menjadi semakin diperlukan dan di mana keragaman alat telah membawa kami untuk membuat presentasi yang luar biasa, yang dalam banyak kasus akhirnya tidak sesuai dengan beberapa media, tanpa diragukan lagi, Presentasi HTML mereka akan terus menjadi alternatif universal di bidang ini.

Tetapi bukan rahasia lagi bagi siapa pun bahwa membuat presentasi HTML yang indah dapat memakan waktu lama dan membutuhkan pengetahuan HTML, CSS, dan dalam beberapa kasus JavaScript. Dari permasalahan tersebut, muncul alat yang sangat baik yang disebut webslide.

Apa itu webslides?

Ini adalah untuk menyebutnya entah bagaimana "kerangka" open source, dibuat oleh Jose Luis Antunez, yang memungkinkan kami membuat presentasi HTML dengan cepat dan mudah. Alat ini memiliki hal-hal penting bagi Anda untuk membuat presentasi sendiri, selain itu, Anda dapat mengambil salah satu presentasi demo dan menyesuaikannya dengan keinginan Anda dalam hitungan menit.

Presentasi HTML yang saya buat dengan alat ini akan memiliki estetika yang mengesankan. Perlu dicatat bahwa alat ini membutuhkan pengetahuan yang sangat dasar tentang HTML dan CSS, sehingga sangat ideal untuk semua jenis pengguna, yang hanya fokus pada konten dan sangat sedikit tentang bagaimana mereka mempersiapkan presentasi.

Bagaimana cara mengunduh webslides?

Untuk mengunduh webslides, cukup lakukan perintah berikut dari direktori favorit Anda:

wget https://github.com/jlantunez/webslides/archive/master.zip

Anda juga dapat mengkloning repositori resmi dengan

git clone https://github.com/jlantunez/webslides.git

Di dalam folder proyek Anda akan mendapatkan js, css dan demo yang diperlukan untuk mulai membuat presentasi HTML Anda sendiri dengan mudah.

Bagaimana cara menggunakan webslides?

Keuntungan terbesar dari webslides adalah kemudahan penggunaannya, alat ini benar-benar memudahkan untuk membuat presentasi dengan berbagai tujuan dan seri demonya mempercepat proses pembuatan presentasi dengan% yang sangat tinggi.

Apa yang kita dapatkan saat mendownload webslides?

Saat mengunduh webslides, kami mengakses berbagai folder, yang mencakup demo dan gambar (perangkat dan logo).

• Folder css akan menyimpan gaya presentasi kita
• Javascript yang diperlukan akan disimpan di folder js, termasuk webslide.js fundamental yang merupakan tempat sebagian besar keajaiban dilakukan.
• File gambar dan html dari demo akan disimpan di folder gambar dan demo masing-masing.

webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Membuat presentasi HTML dengan webslides

Ada 2 keuntungan mendasar saat menggunakan webslides, yang kami sebutkan di bawah ini:

• Kode ini bersih dan dapat diskalakan. Ini juga mencakup markup intuitif dengan penggunaan nomenklatur paling populer. Tidak perlu menggunakan kelas, atau penggunaan bersarang secara berlebihan.
• Masing-masing <section> di #webslides ini merepresentasikan sebuah slide. Jadi penomoran halamannya sangat sederhana.

Slide 1  Slide 1

Dengan cara yang sama kita bisa membuat slide vertikal, menambahkan gaya vertikal

Kelas yang menyusun CSS di sisi web

• Tipografi: .text-landing, .text-data, .text-intro ...
• Warna Latar Belakang: .bg-primary, .bg-apple, .bg-blue ...
• Gambar Latar Belakang: .background, .background-center-bottom ...
• Kartu: .card-50, .card-40 ...
• Blok fleksibel: .flexblock.clients, .flexblock.metrics ...

Memperluas ke webslides

webslides memungkinkan kita menambahkan gaya dan fungsi baru, misalnya kita dapat menambahkan beberapa sumber daya berikut:

• Unsplash
• menghidupkan.css
• partikel.js
• pt

Demo presentasi HTML dibuat dengan webslides

Anda dapat melihat serangkaian demo presentasi HTML yang dibuat dengan webslides di sini. Demikian pula, saat Anda mengunduh kerangka kerja, Anda dapat mengakses pengkodean masing-masing demo ini.

Ini adalah alat yang memungkinkan kita membuat presentasi HTML dengan cepat dan hasil akhir yang bagus, tetapi juga akan membantu kita untuk fokus pada konten dan mencapai hasil yang tidak kita bayangkan sebelumnya.