Come realizzare presentazioni HTML con webslides

In un mondo dove mostrare le nostre idee su Internet è diventato sempre più necessario e dove la diversità degli strumenti ci ha portato a creare presentazioni sorprendenti, che in molti casi finiscono per essere incompatibili con alcuni media, senza dubbio, il Presentazioni HTML continueranno ad essere l'alternativa universale in questo settore.

Ma non è un segreto per nessuno che la creazione di bellissime presentazioni HTML possa richiedere molto tempo e una conoscenza piuttosto avanzata di HTML, CSS e in alcuni casi JavaScript. Da questi problemi emerge un ottimo strumento chiamato diapositive web.

Cos'è webslides?

È chiamarlo in qualche modo un "framework" open source, realizzato da Jose Luis Antunez, che ci permette creare presentazioni HTML rapidamente e facilmente. Lo strumento ha gli elementi essenziali per creare le tue presentazioni, allo stesso modo puoi prendere una delle presentazioni demo e personalizzarla a tuo piacimento in pochi minuti.

Le presentazioni HTML che ho realizzato con questo strumento avranno un'estetica impressionante. Vale la pena notare che questo strumento richiede una conoscenza di base di HTML e CSS, quindi è ideale per tutti i tipi di utenti, che dovrebbero concentrarsi solo sul contenuto e molto poco su come preparano la presentazione.

Come scaricare le diapositive web?

Per scaricare webslides, esegui il seguente comando dalla tua directory preferita:

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

Puoi anche clonare il repository ufficiale con

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

All'interno della cartella del progetto otterrai i js, css e demo necessari per iniziare a creare facilmente le tue presentazioni HTML.

Come utilizzare le diapositive web?

Il più grande vantaggio di webslides è la sua facilità d'uso, questo strumento rende davvero facile creare presentazioni con vari obiettivi e le sue serie demo accelera il processo di creazione della presentazione di una percentuale molto elevata.

Cosa otteniamo quando scarichiamo webslides?

Durante il download di diapositive web accediamo a varie cartelle, che includono demo e immagini (dispositivi e loghi).

  • La cartella css memorizzerà gli stili delle nostre presentazioni
  • I javascript necessari verranno archiviati nella cartella js, incluso il fondamentale webslide.js che è dove viene eseguita la maggior parte della magia.
  • Le immagini e i file html delle demo verranno salvate rispettivamente nelle cartelle delle immagini e delle demo.
webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Creazione di presentazioni HTML con diapositive web

Ci sono 2 vantaggi fondamentali nell'utilizzo di webslides, che citiamo di seguito:

  • Il codice è pulito e scalabile. Include anche un markup intuitivo con l'uso delle nomenclature più popolari. Non è necessario utilizzare classi o abusare della nidificazione.
  • ogni <section> in #webslides rappresenta una diapositiva. Quindi l'impaginazione è estremamente semplice.
Diapositiva 1  Diapositiva 1

Allo stesso modo possiamo creare diapositive verticali, aggiungendo uno stile verticale


Classi che compongono i CSS dei siti web

  • Tipografia: .text-landing, .text-data, .text-intro ...
  • Colori di sfondo: .bg-primary, .bg-apple, .bg-blue ...
  • Immagini di sfondo: .background, .background-center-bottom ...
  • Carte: .card-50, .card-40 ...
  • Blocchi flessibili: .flexblock.clients, .flexblock.metrics ...

Estendendosi alle diapositive web

webslides ci permette di aggiungere nuovi stili e funzionalità, per questo ad esempio possiamo aggiungere alcune delle seguenti risorse:

Demo di presentazione HTML realizzate con diapositive web

Puoi vedere una serie di demo di presentazioni HTML realizzate con webslides qui. Allo stesso modo, quando scarichi il framework puoi accedere alla codifica di ciascuna di queste demo.

Presentazioni HTML demo

Portafogli demo 2

Questo è uno strumento che ci permetterà di creare presentazioni HTML velocemente e con ottime finiture, ma ci aiuterà anche a concentrarci sul contenuto e ottenere risultati che prima non immaginavamo.


Lascia un tuo commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati con *

*

*

  1. Responsabile dei dati: Miguel Ángel Gatón
  2. Scopo dei dati: controllo SPAM, gestione commenti.
  3. Legittimazione: il tuo consenso
  4. Comunicazione dei dati: I dati non saranno oggetto di comunicazione a terzi se non per obbligo di legge.
  5. Archiviazione dati: database ospitato da Occentus Networks (UE)
  6. Diritti: in qualsiasi momento puoi limitare, recuperare ed eliminare le tue informazioni.

  1.   Alan Fuentes suddetto

    Molto buono, trovo lo strumento abbastanza interessante anche se a mio gusto reveal.js è abbastanza facile da usare in quanto è uno strumento basato su tecnologie web come HTML, CSS e JS con una conoscenza di base di queste tecnologie puoi già rendere la tua presentazione essere molto più interessante.

    Saluti.

    1.    lucertola suddetto

      Nascondersi in un profilo anonimo è molto facile criticare e dire quello che vuoi, ma purtroppo è comprensibile che il tuo coefficiente non guardi oltre dove i tuoi occhi possono vedere, questo articolo è stato scritto interamente da me sulla base della documentazione ufficiale e nella recensione che ho fatto sullo strumento. Quale per darti un'idea, ho avuto modo di conoscerla grazie al fatto che è l'applicazione più votata in questi giorni su github https://github.com/jlantunez/webslides... Tuttavia, è molto importante per noi che ti sei preso il tempo di cercare qualche altro sito in cui scrivono anche noi come noi, in modo che tu possa candidarti per il posto vacante di revisore, che penso rimarrebbe solo un candidato perché dubito che tu abbia criterio per decidere qualcosa di adatto.