So erstellen Sie HTML-Präsentationen mit Webslides

In einer Welt, in der Zeigen Sie unsere Ideen im Internet ist zunehmend notwendig geworden und hat uns aufgrund der Vielfalt der Tools zu erstaunlichen Präsentationen geführt, die in vielen Fällen ohne Zweifel mit einigen Medien unvereinbar sind HTML-Präsentationen Sie werden weiterhin die universelle Alternative in diesem Bereich sein.

Es ist jedoch für niemanden ein Geheimnis, dass das Erstellen schöner HTML-Präsentationen lange dauern kann und etwas fortgeschrittene Kenntnisse in HTML, CSS und in einigen Fällen in JavaScript erfordert. Aus diesen Problemen ergibt sich ein hervorragendes Werkzeug namens Webslides.

Was sind Webslides?

Es ist irgendwie ein Open Source "Framework" zu nennen, erstellt von Jose Luis Antunez, das erlaubt uns Erstellen Sie HTML-Präsentationen schnell und einfach. Das Tool verfügt über das Nötigste, um Ihre eigenen Präsentationen zu erstellen. Ebenso können Sie eine der Demo-Präsentationen in wenigen Minuten nach Ihren Wünschen anpassen.

Die HTML-Präsentationen, die ich mit diesem Tool erstellt habe, haben eine beeindruckende Ästhetik. Es ist erwähnenswert, dass dieses Tool sehr grundlegende Kenntnisse in HTML und CSS erfordert. Daher ist es ideal für alle Arten von Benutzern, die sich nur auf den Inhalt und nur sehr wenig auf die Vorbereitung der Präsentation konzentrieren sollten.

Wie lade ich Webslides herunter?

Führen Sie zum Herunterladen von Webslides einfach den folgenden Befehl aus Ihrem Lieblingsverzeichnis aus:

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

Sie können auch das offizielle Repository mit klonen

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

Im Projektordner erhalten Sie die erforderlichen JS, CSS und Demos, um auf einfache Weise Ihre eigenen HTML-Präsentationen erstellen zu können.

Wie benutzt man Webslides?

Der größte Vorteil von Webslides ist die einfache Bedienung. Dieses Tool erleichtert das Erstellen von Präsentationen mit verschiedenen Zielen und die Demo-Serie beschleunigt den Präsentationserstellungsprozess um einen sehr hohen Prozentsatz.

Was bekommen wir, wenn wir Webslides herunterladen?

Beim Herunterladen von Webslides greifen wir auf verschiedene Ordner zu, darunter Demos und Bilder (Geräte und Logos).

  • Im CSS-Ordner werden die Stile unserer Präsentationen gespeichert
  • Im js-Ordner werden die erforderlichen Javascripts gespeichert, einschließlich der grundlegenden webslide.js, in der der größte Teil der Magie ausgeführt wird.
  • Die Bilder und die HTML-Dateien der Demos werden in den Ordnern Bilder und Demos gespeichert.
webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Erstellen von HTML-Präsentationen mit Webslides

Es gibt zwei grundlegende Vorteile bei der Verwendung von Webslides, die wir unten erwähnen:

  • Der Code ist sauber und skalierbar. Es enthält auch ein intuitives Markup unter Verwendung der beliebtesten Nomenklaturen. Es ist nicht erforderlich, Klassen zu verwenden oder Verschachtelungen zu häufig zu verwenden.
  • Jeder <section> In #webslides steht es für eine Folie. Die Paginierung ist also extrem einfach.
Folie 1  Folie 1

Auf die gleiche Weise können wir vertikale Folien erstellen und einen vertikalen Stil hinzufügen


Klassen, aus denen das CSS der Webseiten besteht

  • Typografie: .text-landung, .text-daten, .text-intro ...
  • Hintergrundfarben: .bg-primär, .bg-Apfel, .bg-blau ...
  • Hintergrundbilder: .Hintergrund, .Hintergrund-Mitte-Boden…
  • Karten: .card-50, .card-40 ...
  • Flexible Blöcke: .flexblock.clients, .flexblock.metrics ...

Erweiterung auf Webslides

Mit Webslides können wir neue Stile und Funktionen hinzufügen. Beispielsweise können wir einige der folgenden Ressourcen hinzufügen:

HTML-Präsentationsdemos mit Webslides

Sie können eine Reihe von Demos von HTML-Präsentationen sehen, die mit Webslides erstellt wurden hier. Auf die gleiche Weise können Sie beim Herunterladen des Frameworks auf die Codierung jeder dieser Demos zugreifen.

Demo-HTML-Präsentationen

Demo-Portfolios 2

Dies ist ein Tool, mit dem wir HTML-Präsentationen schnell und mit hervorragenden Ergebnissen erstellen können. Es hilft uns jedoch auch, uns auf den Inhalt zu konzentrieren und Ergebnisse zu erzielen, die wir uns vorher nicht vorgestellt haben.


Hinterlasse einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert mit *

*

*

  1. Verantwortlich für die Daten: Miguel Ángel Gatón
  2. Zweck der Daten: Kontrolle von SPAM, Kommentarverwaltung.
  3. Legitimation: Ihre Zustimmung
  4. Übermittlung der Daten: Die Daten werden nur durch gesetzliche Verpflichtung an Dritte weitergegeben.
  5. Datenspeicherung: Von Occentus Networks (EU) gehostete Datenbank
  6. Rechte: Sie können Ihre Informationen jederzeit einschränken, wiederherstellen und löschen.

  1.   Alan Fuentes sagte

    Sehr gut, ich finde das Tool sehr interessant, obwohl es nach meinem Geschmack einfacher zu verwenden ist, da es ein Tool ist, das auf Webtechnologien wie HTML, CSS und JS basiert. Mit Grundkenntnissen dieser Technologien können Sie Ihre Präsentation erstellen sehen viel interessanter aus.

    Grüße.

    1.    Lagarto sagte

      Das Verstecken in einem anonymen Profil ist sehr leicht zu kritisieren und zu sagen, was Sie wollen, aber leider ist es verständlich, dass Ihr Koeffizient nicht über das hinausschaut, was Ihre Augen sehen können. Dieser Artikel wurde vollständig von mir basierend auf offiziellen Unterlagen und in der Rezension verfasst Ich habe auf dem Werkzeug getan. Welches, um Ihnen eine Idee zu geben, habe ich dank der Tatsache kennengelernt, dass es die am häufigsten gewählte Bewerbung in den letzten Tagen auf Github ist https://github.com/jlantunez/webslides... Für uns ist es jedoch sehr wichtig, dass Sie sich die Zeit genommen haben, nach einer anderen Website zu suchen, auf der auch über uns geschrieben wird, damit Sie sich für die Stelle als Gutachter bewerben können, von der ich denke, dass sie nur ein Bewerber bleibt weil ich bezweifle, dass Sie das Kriterium haben, um etwas Passendes zu entscheiden.