Como fazer apresentações HTML com slides da web

Em um mundo onde mostre nossas ideias na internet tornou-se cada vez mais necessária e onde a diversidade de ferramentas nos tem levado a criar apresentações incríveis, que em muitos casos acabam sendo incompatíveis com alguns meios, sem dúvida, o Apresentações HTML eles continuarão a ser a alternativa universal nesta área.

Mas não é segredo para ninguém que criar belas apresentações em HTML pode levar muito tempo e requer um conhecimento um pouco avançado de HTML, CSS e, em alguns casos, JavaScript. Destes problemas, surge uma excelente ferramenta chamada slides da web.

O que é webslides?

É chamá-lo de alguma forma de um "framework" de código aberto, feito por Jose Luis Antunez, isso nos permite criar apresentações HTML rápida e facilmente. A ferramenta possui o essencial para você fazer suas próprias apresentações, da mesma forma, você pode pegar uma das apresentações de demonstração e personalizá-la ao seu gosto em questão de minutos.

As apresentações em HTML que fiz com esta ferramenta terão uma estética impressionante. É importante destacar que esta ferramenta requer conhecimentos muito básicos de HTML e CSS, por isso é ideal para todos os tipos de usuários, que devem focar apenas no conteúdo e muito pouco em como preparam a apresentação.

Como baixar slides da web?

Para baixar slides da web, basta executar o seguinte comando no seu diretório favorito:

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

Você também pode clonar o repositório oficial com

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

Dentro da pasta do projeto você obterá os js, css e demos necessários para começar a criar suas próprias apresentações HTML facilmente.

Como usar o webslides?

A maior vantagem do webslides é a facilidade de uso, esta ferramenta realmente facilita a criação de apresentações com vários objetivos e sua série de demos acelera o processo de criação de apresentações em um% elevado.

O que ganhamos quando baixamos slides?

Ao baixar slides da Web, acessamos várias pastas, que incluem demos e imagens (dispositivos e logotipos).

  • A pasta css irá armazenar os estilos de nossas apresentações
  • Os javascripts necessários serão armazenados na pasta js, incluindo o webslide.js fundamental que é onde a maior parte da mágica é feita.
  • As imagens e os arquivos html dos demos serão salvos nas pastas de imagens e demos, respectivamente.
webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Criação de apresentações HTML com slides da web

Existem 2 vantagens fundamentais ao usar slides da web, que mencionamos a seguir:

  • O código é limpo e escalonável. Também inclui marcação intuitiva com o uso das nomenclaturas mais populares. Não há necessidade de usar classes ou aninhamento de uso excessivo.
  • Cada <section> em #webslides representa um slide. Portanto, a paginação é extremamente simples.
Diapositivo 1  Slide 1

Da mesma forma, podemos fazer slides verticais, adicionando um estilo vertical


Classes que compõem o CSS dos websites

  • Tipografia: .text-landing, .text-data, .text-intro ...
  • Cores de fundo: .bg-primário, .bg-maçã, .bg-azul ...
  • Imagens de fundo: .background, .background-center-bottom ...
  • Cartões: .card-50, .card-40 ...
  • Blocos flexíveis: .flexblock.clients, .flexblock.metrics ...

Extensão para slides da web

webslides nos permite adicionar novos estilos e funcionalidades, por exemplo, podemos adicionar alguns dos seguintes recursos:

Demonstrações de apresentação em HTML feitas com slides da web

Você pode ver uma série de demonstrações de apresentações HTML feitas com slides da web clique aqui. Da mesma forma, ao baixar o framework, você pode acessar a codificação de cada uma dessas demos.

Apresentações HTML de demonstração

Portfólios de Demonstrações 2

Esta é uma ferramenta que nos permitirá criar apresentações HTML de forma rápida e com óptimos acabamentos, mas também nos ajudará a focar no conteúdo e a obter resultados que antes não imaginávamos.


3 comentários, deixe o seu

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios são marcados com *

*

*

  1. Responsável pelos dados: Miguel Ángel Gatón
  2. Finalidade dos dados: Controle de SPAM, gerenciamento de comentários.
  3. Legitimação: Seu consentimento
  4. Comunicação de dados: Os dados não serão comunicados a terceiros, exceto por obrigação legal.
  5. Armazenamento de dados: banco de dados hospedado pela Occentus Networks (UE)
  6. Direitos: A qualquer momento você pode limitar, recuperar e excluir suas informações.

  1.   Alan Fuentes dito

    Muito bom, acho a ferramenta bastante interessante embora para meu gosto o Revele.js seja bem mais fácil de usar por ser uma ferramenta baseada em tecnologias web como HTML, CSS e JS, com o conhecimento básico dessas tecnologias você pode fazer sua apresentação parecer muito mais interessante.

    Saudações.

    1.    Lagarto dito

      Esconder-se em um perfil anônimo é muito fácil de criticar e dizer o que quiser, mas infelizmente é compreensível que seu coeficiente não olhe além de onde seus olhos podem ver, este artigo foi escrito inteiramente por mim com base na documentação oficial e na revisão que fiz na ferramenta. Qual deles para você ter uma ideia, eu descobri graças ao fato de ser o aplicativo mais votado nos últimos dias no github https://github.com/jlantunez/webslides... No entanto, é muito importante para nós que você tenha procurado algum outro site onde eles também escrevam sobre o mesmo que nós, para que você possa se inscrever para a vaga de revisor, que eu acho que só continuaria sendo um candidato porque duvido que você tenha o critério para decidir algo adequado.