Framework di base per presentazioni che utilizzano HTML5 + javascript


100

Conosci un framework per realizzare presentazioni utilizzando solo tecnologie HTML5 e javascript?
Non sto parlando di funzionalità di "esportazione" di vari software di presentazione (PowerPoint o presentazione OOo).

Alcuni requisiti per le presentazioni realizzate con questo "framework":

  • sfruttare le ultime funzionalità HTML5 (audio, video, canvas?)
  • lo stesso con CSS3 (supporto font, gradiente, ombre, transizioni e trasformazioni)

Se non esiste una cosa del genere, sarebbe apprezzato un esempio di buone presentazioni o suggerimenti sull'argomento.

Modifica: trovato un bell'esempio, HTML5: sviluppo web al livello successivo .


2
deck.js anche su GitHub: imakewebthings.github.com/deck.js
Tammo B.

13
38+ voti positivi, 26 segnalibri, ma chiusi? A rischio di ritorsioni da parte dei moderatori, devo dire che qui c'è qualcosa che non va nella moderazione. Ho visto una dozzina di domande interessanti chiuse senza un motivo valido.
Ben Lesh

4
Sembra più che questo sia indicativo di un problema con la moderazione sul sito, essendo fuori contatto con il pubblico del sito. Francamente, è anche un segno che stackoverflow.com potrebbe aver "saltato lo squalo".
Ben Lesh

3
@blesh Ottieni una descrizione abbastanza buona nel seguente motivo. Si noti che queste ragioni vicine esistono fin dall'inizio del sito, ed è chiaramente codificato nelle faq che questo tipo di domande non sono consentite, quindi non dovrebbe essere una sorpresa. Con il volume di traffico che SO riceve, ci sono tonnellate di questo tipo di domande che sfuggono al radar, ma ciò non giustifica la loro esistenza. È possibile portarla fino in meta, se si vuole, ma non credo che le persone non saranno d'accordo con il vicino ragione.
casper,

3
@IvoFlipse: la domanda non è se le risposte siano risposte "di qualità" secondo una metrica vaga e completamente soggettiva, ma se siano utili alle persone. A giudicare dai voti, la domanda e la risposta sono estremamente utili a molte persone.
static_rtti

Risposte:


65

Landslide è un'applicazione piuttosto carina che genera presentazioni:

Deck.js è un altro bel progetto; questa volta, le diapositive sono puro HTML / CSS / JS.

Ancora meglio, impress.js si affida a trasformazioni e transizioni CSS3.


Ho scaricato i file Landslide ma essendo il noob che sono, sono completamente confuso su come usarlo. Le istruzioni "read me" suonano in greco con tutte le istruzioni della riga di comando. Eventuali suggerimenti per iniziare sarebbero apprezzati. Grazie
Sbhambry

1
@Saurabh: supponendo che tu abbia clonato dal repository git, esegui python setup.py builde poi python setup.py installcon i privilegi di root. Ora avrai il landslidecomando disponibile, eseguilo nella samples/directory.
Ryan Li

@ Ryan, grazie per la risposta. Darei un colpo al più presto. Grazie!
Sbhambry

Puoi utilizzare strut.io come GUI per creare presentazioni Impress.js e Bespoke.js.
Matt Crinklaw-Vogt

8

Come strumento di presentazione utilizzo Reveal.js , è uno strumento di presentazione molto pulito e moderno.

È realizzato al 100% con HTML5 / CSS3 / JS, le caratteristiche che mi piacciono di più sono:

  • Transizioni 3D come CSS3 tra le diapositive
  • Puoi creare diapositive nidificate: diapositive verticali in diapositive orizzontali
  • Supporta font-face
  • crei collegamenti interni tra le diapositive
  • Il codice è carino, grazie a highlight.js
  • Panoramica e modalità a due schermate con Esce `s``

So che non lo vuoi davvero, ma puoi esportarlo in PDF e fare il fork su GitHub :)


2

Se desideri ottenere il supporto per websocket e la possibilità di controllare le presentazioni Deck.js tramite un'applicazione mobile Sencha 2.0 HTML5, puoi provare Robodeck .



0

A parte le risposte, potresti anche essere interessato a un controller nodejs per mantenere più visualizzatori remoti sincronizzati tra loro.

controldesk.js

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.