Desde Linux lagarto 8 años ago

Cómo hacer presentaciones HTML con webslides

En un mundo donde mostrar nuestras ideas en la internet se ha hecho cada vez más necesario y donde la diversidad de herramientas nos ha llevado a crear presentaciones asombrosas,que en muchos casos, terminan siendo incompatibles con algunos medios, sin duda alguna, las presentaciones HTML seguirán siendo la alternativa universal en esta área.

Pero para nadie es un secreto, que crear presentaciones HTML que sean bonitas puede tomar mucho tiempo y requerir conocimientos algo avanzados en cuanto a HTML, CSS y en algunos casos JavaScript. De estas problemáticas, surge una herramienta excelente llamada webslides.

¿Qué es webslides?

Es por llamarlo de alguna manera un “framework” de código abierto, realizado por José Luis Antúnez, que nos permite crear presentaciones HTML de manera rápida y fácil. La herramienta cuenta con lo esencial para que usted realice sus propias presentanciones, de igual manera, puede tomar una de las presentaciones demo y personalizarla a su gusto en cuestión de minutos.

Las presentaciones HTML que realicé con está herramienta tendrá una estética impresionante. Vale la pena destacar, que esta herramienta requiere de conocimientos muy básicos de HTML y CSS, por lo que es ideal para todo tipo de usuarios, los cuales sólo deben enfocarse en el contenido y muy poco en cómo elabora la presentación

¿Cómo descargar webslides?

Para descargar webslides basta con realizar el siguiente comando desde tu directorio favorito:

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

También puedes clonar el repositorio oficial con

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

Dentro de la carpeta del proyecto conseguirás los js, css y demos necesarios para comenzar a crear tu propias presentaciones HTML fácilmente.

¿Cómo usar webslides?

La mayor ventaja de webslides es su fácil uso, esta herramienta realmente facilita crear presentaciones con diversos objetivos y su serie de demo acelera el proceso de creación de presentaciones en un % muy alto.

¿Qué obtenemos al descargar webslides?

Al descargar webslides accedemos a diversas carpetas, donde se incluye demostraciones e imágenes (dispositivos y logotipos).

La carpeta css guardará los estilos de nuestras presentaciones
En la carpeta js se almacenarán los javascripts necesarios, incluyendo el fundamental webslide.js que es donde se realiza la mayoía de la magía.
Las imágenes y los archivos html de los demos se guardarán en las carpetas images y demos respectivamente.

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

Creando presentaciones HTML con webslides

Existen 2 ventajas fundamentales a la hora de utilizar webslides, que mencionamos a continuación:

El código es limpio y escalable. Además incluye intuitivas markup con es uso de las nomenclaturas más populares. No hay necesidad de utilizar clases, o hacer uso excesivo de anidación.
Cada <section> en #webslides representa a una diapositivas. Por lo que la paginación es sumamente sencilla.

<article id="webslides">
    <section>
        <h1>Slide 1</h1>
    </section>
    <section class="bg-black aligncenter">
    <!-- .wrap = container 1200px -->
        <div class="wrap">
            <h1>Slide 2</h1>
        </div>
    </section>
</article>

De igual manera podemos hacer diapositivas verticales, añadiendo un estilo vertical

<article id="webslides" class="vertical">

Clases que conforman el CSS de websides

Tipografía: .text-landing, .text-data, .text-intro…
Colores de Fondo: .bg-primary, .bg-apple, .bg-blue…
Imágenes de Fondo: .background,.background-center-bottom…
Cards: .card-50, .card-40…
Bloques flexibles: .flexblock.clients, .flexblock.metrics…

Extendiendo a webslides

webslides permite que añadamos nuevos estilos y funcionalidades, para ello por ejemplo podemos añadir algunos de los siguientes recursos:

Demos de presentaciones HTML hechas con webslides

Puedes ver una serie de demos de presentaciones HTML hechas con webslides aquí. De igual manera, al descargar el framework puedes acceder a la codificación de cada uno de estos demos.

Demos presentanciones HTML

Demos Portfolios 2 Es esta una herramienta que nos permitirá crear presentaciones HTML de manera rápida y con acabado grandiosos, pero que también nos ayudará a centrarnos en el contenido y alcanzar resultados que antes no imaginábamos.