• Creare presentazioni in HTML

    HTML è il linguaggio di marcatura che permette di dare un volto alla Grande Rete. Oltre a questo, l’HTML, grazie a HTML Slidy, un sistema sviluppato dal W3C, può essere utilizzato anche per creare presentazioni in diapositive.

    HTML Slidy permette di memorizzare in un unico file HTML una presentazione a diapositive stile OpenOffice Impress. A dispetto di quello che si potrebbe pensare, non è l’ennesimo tentativo di proporre agli utenti uno strumento per creare presentazioni in un mercato già saturo di questi strumenti, ma un modo alternativo per utilizzare e sfruttare le capacità dell’HTML.

    Uno dei vantaggi di HTML Slidy è quello di inglobare in un sito o in una pagina Web una presentazione in maniera perfettamente compatibile (essendo composto di codice HTML). Inoltre permette una completa personalizzazione delle diapositive anche attraverso l’incorporamento di codice CSS, Javascript, ASP o altro.

    Per poter creare e aprire una presentazione scritta mediante HTML Slidy non c’è bisogno di editor e programmi costosi in termini monetari e/o di risorse di sistema. Essendo una pagina HTML basterà un editor di testo (blocco note o Notepad++ vanno benissimo), un Web browser (per la lettura della presentazione) e una connessione ad Internet (non necessaria se si sceglie di lavorare offline).

    Per poter creare una presentazione secondo HTML Slidy dobbiamo aggiungere nell’head i riferimenti a show.css, slidy.js e print.css (quest’ultimo facoltativo) per poter correttamente interpretare gli argomenti dei tag e le azioni per il controllo delle slide.

    Per far ciò scriviamo nel nostro head:

    <link rel="stylesheet" type="text/css" media="screen, projection" href="http://www.w3.org/Talks/Tools/Slidy/show.css" />
    <script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" media="print" href="http://www.w3.org/Talks/Tools/Slidy/print.css" />

    Nel <body> ogni slide viene descritta tramite il tag div con la classe “slide”:
    <div class="slide">...</div>

    Mentre per inserire una slide principale (prima pagina):
    <div class="slide cover">...</div>

    Con HTML Slidy è possibile anche far entrare gli elementi in maniera seguenziale al click del mouse. Per far ciò bisogna utilizzare la classe “incremental” come mostrato nell’esempio:

    <ul class="incremental">
    <li>Questo elemento compare per primo</li>
    <li>E questo è il secondo a comparire, dopo un click del mouse</li>
    </ul>

    Per impostare lo sfondo delle slide:

    <div class="background">...</div>

    Tags:

    Se vuoi aggiornamenti su Creare presentazioni in HTML inserisci la tua e-mail nel box qui sotto:


    Ho letto e acconsento l'informativa sulla privacy

    Si No

    Acconsento al trattamento dei dati personali di cui al punto 3 dell'informativa sulla privacy

    Si No

    Commenti

    1. (matTE0) dice:

      Opera è da anni che permette di farlo:
      http://www.opera.com/browser/tutorials/operashow/
      (provate a mettere questa pagina a tutto schermo in Opera ed usate PgDn and PgUp per cambiare pagina)

      Qui altre pagine di esempio da mettere a tutto schermo:
      http://www.philburns.com/examples/Operashow.html
      http://www.philburns.com/examples/Artscope_Workshops.html
      http://www.philburns.com/examples/nonsense.html
      http://www.esatclear.ie/~phiznlil/trolls.html

    2. Giulio Vito de Musso dice:

      Salve matTEO

      Intanto grazie mille per la segnalazione, davvero molto utile ed interessante.
      Una sola precisazione in merito. Opera Show è utilizzabile solo tramite il browser Opera. Per me non ci sono problemi, dato che sono un utente di Opera, ma purtroppo siamo in pochi ad utilizzare questo browser.

      Opera Show a mio avviso è l’ennesima trovata geniale della software house norvegese. L’unico problema è che non è supportato da altri browser.

      Invece HTML Slidy, sfruttando solo i tag dell’HTML, e non funzionalità esclusive del browser che lo andrà ad interpretare, potrà essere interpretato da tutti quelli che posseggono un browser.

      Ti ringrazio comunque della precisazione (non ne ero a conoscenza e lo trovo molto interessante).

      Grazie
      Giulio

    3. (matTE0) dice:

      Ciao Giulio,
      anche Opera Show funziona semplicemente con html e css utilizzando i media types del w3c.

      Tanto è vero che sia S5 (altro modo per fre presentazioni):
      http://en.wikipedia.org/wiki/S5_(file_format)
      http://meyerweb.com/eric/tools/s5/s5-intro.html
      che HTML Slidy si ispirano ad esso ;-)

      ciao

    4. Giulio Vito de Musso dice:

      Salve matTEO,

      Quello che intendo è che ho provato ad utilizzare Opera Show con altri browser (Explorer e Firefox) ma, premendo F11, ottengo solo il classico ingrandimento della pagina a tutto schermo (in particolare ho provato questa pagina: http://www.esatclear.ie/~phiznlil/trolls.html).

      Da ciò ho dedotto che Opera Show richiama librerie del browser Opera per poter funzionare (e quindi non funzionerà con altri browswer).

      Ciò non toglie che Opera Show, come tutte le grandi innovazioni del browser norvegese, avrà ispirato il W3C :D

      Grazie
      Giulio

    5. Giulio Vito de Musso dice:

      Per chi è interessato, ho trovato questo link che permette di semplificare l’utilizzo di Opera Show: http://www.philburns.com/quickshow.html

      Grazie
      Giulio

    6. (matTE0) dice:

      Beh, parlando di standard W3C per la creazione di slide esistono anche …
      B5 (implementato solo in Opera):
      http://www.w3.org/Talks/B5example/
      Slidemaker:
      http://www.w3.org/Talks/YYMMsub/
      Slideme:
      http://www.w3.org/Talks/Slideme/

      ciao

    7. Giulio Vito de Musso dice:

      Ciao (matTE0)

      Grazie della collaborazione e dei link.
      Penso saranno molto utili a chi vuole approfondire l’argomento.

      Ciao
      Giulio

    Commenta

    Your email address will not be published. Required fields are marked *