Obrir la presentaci贸

Generaci贸 de material educatiu amb mdBook i reveal.js

Introducci贸

  • mdBook 茅s una eina per crear llibres, manuals i apunts a partir de fitxers Markdown.
  • reveal.js 茅s una biblioteca JavaScript per crear presentacions interactives en HTML.
  • Ambdues eines permeten generar material educatiu eficient, visual i f脿cilment compartible.
  • Avantatges:
    • Format web interactiu i navegable.
    • Contingut en Markdown (senzill d'escriure).
    • Possibilitat d'integraci贸 amb GitHub Pages per publicar online.

mdBook

  • Creat inicialment per a la documentaci贸 de Rust.
  • Permet escriure un llibre amb Markdown i exportar-lo com a web navegable.
  • Caracter铆stiques:
    • Genera 铆ndex i navegaci贸 autom脿tica.
    • Suporta cerca integrada.
    • Suporta temes i estils personalitzats.
    • Es pot desplegar f脿cilment amb GitHub Pages.

Instal路laci贸

  1. Assegura't de tenir instal路lat Rust: Instal路laci贸.
  2. Executa la seg眉ent ordre per instal路lar mdBook:
cargo install mdbook

Estructura b脿sica

  • book.toml: configuraci贸 del llibre.
  • src/SUMMARY.md: 铆ndex de continguts.
  • src/*.md: cap铆tols en Markdown.

Generar i veure el llibre

mdbook build   # genera el llibre a /book
mdbook serve   # inicia un servidor local (http://localhost:3000)

reveal.js

  • Biblioteca de presentacions en HTML5.
  • Es poden crear diapositives amb Markdown o HTML.
  • Funcionalitats destacades:
    • Navegaci贸 amb teclat o gestos.
    • Fragments (mostrar elements pas a pas).
    • Temes i estils personalitzats.
    • Possibilitat d'afegir v铆deos, codis, gr脿fics...

Com executar

1. Instal路lar reveal.js

Pots obtenir reveal.js de dues maneres:

  • Clonar el repositori oficial:
git clone https://github.com/hakimel/reveal.js.git
cd reveal.js
  • Instal路lar amb npm (recomanat si ja tens Node.js):
npm install reveal.js

---v

2. Llan莽ar el servidor de desenvolupament

Dins la carpeta de reveal.js executa:

npm start

Aix貌 obrir脿 autom脿ticament la presentaci贸 al navegador: http://localhost:8000

---v

3. Crear la teva presentaci贸

  • Pots editar el fitxer index.html per afegir diapositives en HTML o Markdown.
  • Exemple senzill amb Markdown:
<section data-markdown>
<textarea data-template>
# Primera diapositiva

 ---

## Segona diapositiva

- Punt 1
- Punt 2
</textarea>
</section>

---v

4. Exportar o publicar

  • Les presentacions reveal.js s贸n fitxers HTML est脿tics, aix铆 que nom茅s cal copiar-los a un servidor web o a GitHub Pages.

Integraci贸 amb GitHub Pages

  • Tant mdBook com reveal.js poden publicar-se f脿cilment amb GitHub Pages:
    1. Crea un repositori GitHub.
    2. Afegeix els fitxers del llibre/presentaci贸.
    3. Activa Pages a les opcions del repositori.
    4. Tria la branca i carpeta on es generen els fitxers (/book, /docs, etc.).
  • Exemple:
    • https://usuari.github.io/projecte/

Bones pr脿ctiques

  • Mantenir els cap铆tols i diapositives en fitxers separats per facilitar la lectura.
  • Utilitzar imatges i gr脿fics per fer el contingut m茅s visual.
  • Afegir enlla莽os i recursos addicionals.
  • Si 茅s per a estudiants, combinar mdBook per apunts i reveal.js per presentacions.

馃敆 Enlla莽os