Estrutura básica para apresentações usando HTML5 + javascript

100

Você conhece uma estrutura para fazer apresentações usando apenas HTML5 e tecnologias javascript?
Não estou falando sobre recursos de "exportação" de vários softwares de apresentação (PowerPoint ou apresentação OOo).

Alguns requisitos para as apresentações feitas com este "framework":

aproveitar os recursos HTML5 mais recentes (áudio, vídeo, tela?)
mesmo com CSS3 (suporte de fonte, gradiente, sombras, transições e transformações)

Se não houver tal coisa, agradecemos ~~exemplos de boas apresentações ou~~ sugestões sobre o assunto.

Edit: Encontrou um bom exemplo, HTML5 - desenvolvimento web para o próximo nível .

javascript html presentation

— Brian Clozel
fonte

2

deck.js também no GitHub: imakewebthings.github.com/deck.js

— Tammo B.

13

38+ votos positivos, 26 favoritos, mas encerrados? Correndo o risco de retaliação do moderador, devo dizer que há algo de errado com a moderação aqui. Já vi uma dúzia de perguntas interessantes fechadas sem um motivo válido.

— Ben Lesh

4

Parece mais que isso é indicativo de um problema de moderação no site, estar fora de contato com o público do site. Francamente, também é um sinal de que stackoverflow.com pode ter "pulado o tubarão".

— Ben Lesh

3

@blesh Você consegue uma descrição muito boa no motivo abaixo. Observe que esses motivos próximos existem desde o início do site, e está claramente codificado no faq que esse tipo de pergunta não é permitido, então não deve ser uma surpresa. Com o volume de tráfego que o SO obtém, há toneladas desse tipo de perguntas que escapam ao radar, mas isso não justifica sua existência. Você pode falar sobre meta, se quiser, mas não acho que as pessoas irão discordar do motivo próximo .

— casperOne

3

@IvoFlipse: a questão não é se as respostas são respostas de "qualidade" por alguma métrica vaga e completamente subjetiva, mas se elas são úteis para as pessoas. A julgar pelos votos, a pergunta e a resposta são eminentemente úteis para muitas pessoas.

— static_rtti

65

Landslide é um aplicativo bem legal que gera apresentações de slides:

usando o modelo de apresentação html5
Texto Reestruturado, sintaxe Markdown

Deck.js é outro bom projeto; desta vez, os slides são puramente HTML / CSS / JS.

Ainda melhor, impress.js depende de transformações e transições CSS3.

— Brian Clozel
fonte

Baixei os arquivos do Landslide, mas sendo o novato que sou, estou totalmente confuso sobre como usá-lo. As instruções read me soam gregas para mim com todas as instruções de linha de comando. Quaisquer dicas para começar serão apreciadas. Obrigado

— Sbhambry

1

@Saurabh: supondo que você tenha clonado do repositório git, execute python setup.py builde, em seguida, python setup.py installcom privilégios de root. Agora você terá o landslidecomando disponível, execute-o no samples/diretório.

— Ryan Li

@Ryan obrigado pela resposta. Daria uma chance o mais rápido possível. Obrigado!

— Sbhambry

Você pode usar strut.io como uma GUI para criar apresentações Impress.js e Bespoke.js.

— Matt Crinklaw-Vogt

8

Como uma ferramenta de apresentação eu uso o Reveal.js , é uma ferramenta de apresentação muito limpa e moderna.

Feito 100% com HTML5 / CSS3 / JS, os recursos que mais gosto são:

3D como transições CSS3 entre slides
Você pode criar slides aninhados - slides verticais em horizontais
Suporte para fonte
você faz links internos entre slides
O código é bonito, graças ao destaque.js
Visão geral e modo de duas telas com Esce `s``

Eu sei que você realmente não quer, mas você pode exportar para PDF e bifurcar no github :)

— Xavier
fonte

2

Se você deseja obter suporte para websocket e a capacidade de controlar as apresentações Deck.js por meio de um aplicativo móvel Sencha 2.0 HTML5, experimente o Robodeck .

— jdcravens
fonte

1

Esta biblioteca é para fazer apresentações, histórias e anúncios.

BoardJS

— Porizm
fonte

0

Como um aparte nas respostas, você também pode estar interessado em um controlador nodejs para manter vários visualizadores remotos em sincronia uns com os outros.

controldesk.js

— Neil
fonte