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.

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.

Comparte para difundir

Si te ha gustado nuestro contenido ahora puedes ayudar a difundirlo en las redes sociales de manera sencilla usando los siguientes botones:

Envía
Pinea
Print


Lic. en Computación, Programador, Consultor ERP, Webmaster, Community Manager y apasionado por el Internet, tengo 8 años sumergido en el mundo del software libre, especializándome en el uso del software libre n las Empresas. La Libertad del Código es directamente proporcional al Crecimiento de una Organización

3 comentarios

  1.   Allan Fuentes dijo

    Muy bueno, me parece bastante interesante la herramienta aunque a mi gusto reveal.js es bastánte más fácil de utilizar al ser una herramienta basada en técnologías web como HTML, CSS y JS con tener conocimientos básicos de esta técnologías ya puedes hacer que tu presentación sea mucho más interesante.

    Saludos.

  2.   anonymus dijo

    Es grato celebrar tanto contenido original</modo ironic>
    https://www.genbeta.com/web/crea-bonitas-presentaciones-en-html-de-forma-rapida-y-sencilla-con-webslides

    1.    lagarto dijo

      Escondiéndose en un perfil anónimo es muy fácil criticas y decir lo que quieras, pero lamentablemente es entendible que tu coeficiente no de para mirar más allá de donde tus ojos alcanzan a ver, este artículo ha sido redactado enteramente por mi basado en la documentación oficial y en la revisión que he realizado sobre la herramienta. La cuál para que te vayas dando una idea, la conocí gracias a que es la aplicación más votada de los últimos días en github https://github.com/jlantunez/webslides… No obstante, es muy importante para nosotros que te hayas tomado el tiempo de buscar algún otro sitio donde también escriban de lo mismo que nosotros, así puedes aplicar a la vacante de revisor, que creo que sólo se quedaría en aplicante porque dudo tengas el criterio para decidir algo adecuado.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.