Kerangka dasar untuk presentasi menggunakan HTML5 + javascript

100

Apakah Anda mengetahui kerangka kerja untuk membuat presentasi hanya dengan menggunakan teknologi HTML5 dan javascript?
Saya tidak berbicara tentang fitur "ekspor" dari berbagai perangkat lunak presentasi (presentasi powerpoint atau OOo).

Beberapa persyaratan untuk presentasi yang dibuat dengan "kerangka" ini:

  • memanfaatkan fitur HTML5 terbaru (audio, video, kanvas?)
  • sama dengan CSS3 (dukungan font, gradien, bayangan, transisi dan transformasi)

Jika tidak ada, contoh presentasi atau petunjuk yang baik tentang subjek akan dihargai.

Edit: Menemukan contoh yang bagus, HTML5 - pengembangan web ke tingkat berikutnya .

javascript html presentation Brian Clozel
sumber
2
deck.js juga di GitHub: imakewebthings.github.com/deck.js
Tammo B.
13
38+ suara positif, 26 bookmark, tetapi ditutup? Risiko pembalasan moderator, saya harus mengatakan bahwa ada yang salah dengan moderasi di sini. Saya telah melihat selusin pertanyaan menarik ditutup tanpa alasan yang sah.
Ben Lesh
4
Sepertinya ini lebih merupakan indikasi masalah moderasi di situs, karena tidak berhubungan dengan penonton situs. Terus terang, ini juga merupakan tanda bahwa stackoverflow.com mungkin telah "melompati hiu".
Ben Lesh
3
@blesh Anda mendapatkan penjelasan yang cukup bagus dalam alasan tutup di bawah ini. Perhatikan bahwa alasan dekat ini telah ada sejak awal situs, dan jelas dikodekan di faq bahwa jenis pertanyaan ini tidak diizinkan, jadi seharusnya tidak mengejutkan. Dengan volume lalu lintas yang didapat SO, ada banyak pertanyaan seperti ini yang luput dari perhatian, tetapi itu tidak membenarkan keberadaan mereka. Anda dapat membawanya pada meta, jika Anda ingin, tapi saya tidak berpikir bahwa orang akan setuju dengan dekat alasan.
casperOne
3
@IvoFlipse: pertanyaannya bukanlah apakah jawabannya adalah jawaban "berkualitas" menurut metrik yang samar dan sepenuhnya subjektif, tetapi apakah jawaban tersebut berguna bagi orang-orang. Dilihat dari votingnya, pertanyaan dan jawabannya sangat berguna bagi banyak orang.
static_rtti

Jawaban:

65

Tanah longsor adalah aplikasi yang cukup rapi yang menghasilkan tayangan slide:

Deck.js adalah proyek bagus lainnya; kali ini, slide adalah HTML / CSS / JS murni.

Bahkan lebih baik, impression.js mengandalkan transformasi dan transisi CSS3.

Brian Clozel
sumber
Saya telah mengunduh file Landslide tetapi sebagai noob saya, saya benar-benar bingung bagaimana cara menggunakannya. Instruksi read me terdengar greek bagi saya dengan semua instruksi command line. Setiap petunjuk untuk memulai akan dihargai. Terima kasih
Sbhambry
1
@Saurabh: dengan asumsi Anda telah mengkloning dari repositori git, jalankan python setup.py build, dan kemudian python setup.py installdengan hak akses root. Anda sekarang akan memiliki landslideperintah yang tersedia, jalankan di bawah samples/direktori.
Ryan Li
@Ryan terima kasih atas jawabannya. Akan mencobanya secepatnya. Terima kasih!
Sbhambry
Anda dapat menggunakan strut.io sebagai GUI untuk membuat presentasi Impress.js dan Bespoke.js.
Matt Crinklaw-Vogt
8

Sebagai alat presentasi, saya menggunakan Reveal.js , ini adalah alat presentasi yang sangat bersih dan modern.

Itu dibuat 100% dengan HTML5 / CSS3 / JS, fitur yang paling saya suka adalah:

  • 3D seperti transisi CSS3 antar slide
  • Anda dapat membuat slide bersarang - slide vertikal menjadi slide horizontal
  • Mendukung font-face
  • Anda membuat tautan internal antar slide
  • Kodenya cantik, berkat highlight.js
  • Ikhtisar & mode dua layar dengan Escdan `` s ''

Saya tahu Anda tidak benar-benar menginginkannya tetapi Anda dapat mengekspor ke PDF, dan membuatnya di github :)

Xavier
sumber
2

Jika Anda ingin mendapatkan dukungan websocket dan kemampuan untuk mengontrol presentasi Deck.js melalui aplikasi seluler Sencha 2.0 HTML5, Anda dapat mencoba Robodeck .

jdcravens.dll
sumber
1

Perpustakaan ini untuk membuat presentasi, cerita dan iklan.

BoardJS

Porizm
sumber
0

Selain jawaban, Anda mungkin juga tertarik dengan pengontrol nodejs untuk menjaga beberapa pemirsa jarak jauh tetap sinkron satu sama lain.

controldesk.js

Neil
sumber