Comment faire des présentations HTML avec des webslides

Dans un monde où montrer nos idées sur internet est devenue de plus en plus nécessaire et où la diversité des outils nous a conduit à créer des présentations étonnantes, qui dans de nombreux cas finissent par être incompatibles avec certains médias, sans aucun doute, le Présentations HTML ils continueront d'être l'alternative universelle dans ce domaine.

Mais ce n'est un secret pour personne que la création de belles présentations HTML peut prendre beaucoup de temps et nécessiter des connaissances assez avancées en HTML, CSS et dans certains cas JavaScript. De ces problèmes, un excellent outil émerge appelé Webslides.

Qu'est-ce que les webslides?

Il s'agit de l'appeler en quelque sorte un "framework" open source, fait par José Luis Antunez, cela nous permet créer des présentations HTML rapidement et facilement. L'outil a les éléments essentiels pour que vous puissiez faire vos propres présentations, de même, vous pouvez prendre l'une des présentations de démonstration et la personnaliser à votre guise en quelques minutes.

Les présentations HTML que j'ai faites avec cet outil auront une esthétique impressionnante. Il est à noter que cet outil nécessite des connaissances très basiques en HTML et CSS, il est donc idéal pour tous les types d'utilisateurs, qui ne devraient se concentrer que sur le contenu et très peu sur la façon dont ils préparent la présentation.

Comment télécharger des webslides?

Pour télécharger des webslides, exécutez simplement la commande suivante à partir de votre répertoire préféré:

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

Vous pouvez également cloner le référentiel officiel avec

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

Dans le dossier du projet, vous obtiendrez les fichiers js, css et démos nécessaires pour commencer à créer facilement vos propres présentations HTML.

Comment utiliser les webslides?

Le plus grand avantage des webslides est sa facilité d'utilisation, cet outil facilite vraiment la création de présentations avec des objectifs variés et sa série de démos accélère le processus de création de présentation d'un pourcentage très élevé.

Qu'obtient-on lorsque nous téléchargeons des webslides?

Lors du téléchargement de webslides, nous accédons à divers dossiers, qui incluent des démos et des images (appareils et logos).

• Le dossier css stockera les styles de nos présentations
• Dans le dossier js, les javascripts nécessaires seront stockés, y compris le webslide.js fondamental, où se fait l'essentiel de la magie.
• Les images et les fichiers html des démos seront enregistrés respectivement dans les dossiers images et demos.

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

Création de présentations HTML avec des webslides

Il existe 2 avantages fondamentaux lors de l'utilisation de webslides, que nous mentionnons ci-dessous:

• Le code est propre et évolutif. Il comprend également un balisage intuitif avec l'utilisation des nomenclatures les plus populaires. Il n'est pas nécessaire d'utiliser des classes ou de surutiliser l'imbrication.
• Chaque <section> dans #webslides, il représente une diapositive. La pagination est donc extrêmement simple.

Diapo 1  Diapo 1

De la même manière, nous pouvons faire des diapositives verticales, en ajoutant un style vertical

Classes qui composent le CSS Websides

• Typographie: .text-landing, .text-data, .text-intro ...
• Couleurs d'arrière-plan: .bg-primary, .bg-apple, .bg-blue ...
• Images d'arrière-plan: .background, .background-center-bottom…
• Cartes: .card-50, .card-40 ...
• Blocs flexibles: .flexblock.clients, .flexblock.metrics ...

Extension aux webslides

webslides nous permet d'ajouter de nouveaux styles et fonctionnalités, par exemple nous pouvons ajouter certaines des ressources suivantes:

• Unsplash
• animer.css
• particules.js
• pt

Démos de présentation HTML réalisées avec des webslides

Vous pouvez voir une série de démos de présentations HTML réalisées avec des webslides ici !. De la même manière, lorsque vous téléchargez le framework, vous pouvez accéder à l'encodage de chacune de ces démos.

C'est un outil qui nous permettra de créer des présentations HTML rapidement et avec de superbes finitions, mais il nous aidera également à nous concentrer sur le contenu et à obtenir des résultats que nous n'imaginions pas auparavant.