SlideShare una empresa de Scribd logo
1 de 24
Descargar para leer sin conexión
REVEAL.JS
HTML PRESENTATIONS MADE EASY
HEADS UP
reveal.js is an easy to use, HTML based, presentation tool. You'll need a
modern browser with support for CSS 3D transforms to see it in its full
                                 glory.
                         - Hakim El Hattab / @hakimel
VERTICAL SLIDES
Slides can be nested inside of other slides, try pressing down .
BASEMENT LEVEL 1
Press down or up to navigate.
BASEMENT LEVEL 2
     Cornify
BASEMENT LEVEL 3
That's it, time to go back up.
HOLISTIC OVERVIEW
Press ESC to enter the slide overview!
WORKS IN MOBILE SAFARI
Try it out! You can swipe through the slides pinch your way to the
                            overview.
MARVELOUS UNORDERED LIST
       No order here
       Or here
       Or here
       Or here
FANTASTIC ORDERED LIST
  1. One is smaller than...
  2. Two is smaller than...
  3. Three!
MARKDOWN SUPPORT
For those of you who like that sort of thing. Instructions and a bit more
                          info available here .
   <eto dt-akon
    scin aamrdw>
     # Mrdw spot
      # akon upr

     Frtoeo yuwolk ta sr o tig
      o hs f o h  ie ht ot f hn.
     Isrcin adabtmr if aalbe[ee(tp:/ihbcmhkml
      ntutos n   i oe no vial  hr]hts/gtu.o/aie/
   rva.smrdw)
    eelj#akon.
   <scin
    /eto>
TRANSITION STYLES
You can select from different transitions, like:
                  Cube
                  Page
                  Concave
                  Linear
GLOBAL STATE
Set d t - t t = s m t i g on a slide and " o e h n " be
       aasae"oehn"                                 s m t i g will
added as a class to the document element when the slide is open. This
 let's you apply broader style changes, like switching the background.
"BLACKOUT"
"SOOTHE"
CUSTOM EVENTS
Additionally custom events can be triggered on a per slide basis by
                binding to the d t - t t name.
                                aasae
 Rva.dEetitnr 'utmvn' fnto( {
 eeladvnLsee( csoeet, ucin)
     cnoelg 'csoeet hsfrd )
     osl.o( "utmvn" a ie' ;
 });
CLEVER QUOTES
These guys come in two forms, inline: “ The nice thing about standards is
          that there are so many to choose from” and block:
           “ For years there has been a theory that millions of
          monkeys typing at random on millions of typewriters
           would reproduce the entire works of Shakespeare.
           The Internet has proven this theory to be untrue. ”
PRETTY CODE
fnto lniy slco ){
 ucin ikf( eetr
  i(spot3Tasom ){
   f uprsDrnfrs

        vrnds=dcmn.urSlcoAl slco )
         a oe  ouetqeyeetrl( eetr ;

        fr vri=0 ln=ndslnt;i<ln i+){
         o( a    , e  oe.egh  e; +
          vrnd =ndsi;
          a  oe  oe[]

          i(!oecasae)){
           f  nd.lsNm
            nd.lsNm + 'rl'
             oecasae = ol;
          }
        };
    }
}



                   Courtesy of highlight.js .
INTERGALACTIC INTERCONNECTIONS
You can link between slides internally, like this .
FRAGMENTED VIEWS
  Hit the next arrow...
  ... to step through ...
   1. a y t p
        n ye
   2. of view
   3. fragments
SPECTACULAR IMAGE!
STELLAR LINKS
Source code on github
Read more on my site
Follow me on Twitter
THE END
BY HAKIM EL HATTAB / HAKIM.SE
Reveal.js

Más contenido relacionado

Destacado

Organizational control OKRs visão geral
Organizational control   OKRs visão geralOrganizational control   OKRs visão geral
Organizational control OKRs visão geral
Martino Bagini
 

Destacado (19)

Kanban Vs Scrum日本語版
Kanban Vs Scrum日本語版Kanban Vs Scrum日本語版
Kanban Vs Scrum日本語版
 
Slides Scrum Gathering Rio 2016 (PT-BR)
Slides Scrum Gathering Rio 2016 (PT-BR)Slides Scrum Gathering Rio 2016 (PT-BR)
Slides Scrum Gathering Rio 2016 (PT-BR)
 
OKR - Objective and Key Results
OKR - Objective and Key ResultsOKR - Objective and Key Results
OKR - Objective and Key Results
 
OKRs para Alinhamento e Direcionamento com Foco em Resultados
OKRs para Alinhamento e Direcionamento com Foco em ResultadosOKRs para Alinhamento e Direcionamento com Foco em Resultados
OKRs para Alinhamento e Direcionamento com Foco em Resultados
 
[Webinar] Como a RockContent faz Marketing de Conteúdo
[Webinar] Como a RockContent faz Marketing de Conteúdo[Webinar] Como a RockContent faz Marketing de Conteúdo
[Webinar] Como a RockContent faz Marketing de Conteúdo
 
Building an Agile Culture with OKR
Building an Agile Culture with OKRBuilding an Agile Culture with OKR
Building an Agile Culture with OKR
 
Agile Brazil 2017 - Uma abordagem ágil aplicada em um PMO Corporativo
Agile Brazil 2017 - Uma abordagem ágil aplicada em um PMO CorporativoAgile Brazil 2017 - Uma abordagem ágil aplicada em um PMO Corporativo
Agile Brazil 2017 - Uma abordagem ágil aplicada em um PMO Corporativo
 
Organizational control OKRs visão geral
Organizational control   OKRs visão geralOrganizational control   OKRs visão geral
Organizational control OKRs visão geral
 
Gestao Por Objectivos 3.0 (OKR)
Gestao Por Objectivos  3.0 (OKR)Gestao Por Objectivos  3.0 (OKR)
Gestao Por Objectivos 3.0 (OKR)
 
Como desenvolver e atingir a missão da sua empresa utilizando a metodologia OKR?
Como desenvolver e atingir a missão da sua empresa utilizando a metodologia OKR?Como desenvolver e atingir a missão da sua empresa utilizando a metodologia OKR?
Como desenvolver e atingir a missão da sua empresa utilizando a metodologia OKR?
 
Building APIs using Go
Building APIs using GoBuilding APIs using Go
Building APIs using Go
 
OKR - Objetivos e Resultados Chave
OKR - Objetivos e Resultados ChaveOKR - Objetivos e Resultados Chave
OKR - Objetivos e Resultados Chave
 
OKR - Objectives and Key Results (Portuguese)
OKR - Objectives and Key Results (Portuguese)OKR - Objectives and Key Results (Portuguese)
OKR - Objectives and Key Results (Portuguese)
 
OKRs - Objective Key Results - Visão Geral
OKRs - Objective Key Results - Visão Geral OKRs - Objective Key Results - Visão Geral
OKRs - Objective Key Results - Visão Geral
 
Sobre OKR - Objectives and Key Results
Sobre OKR - Objectives and Key ResultsSobre OKR - Objectives and Key Results
Sobre OKR - Objectives and Key Results
 
O que é OKR (Objectives and Key Results)?
O que é OKR (Objectives and Key Results)?O que é OKR (Objectives and Key Results)?
O que é OKR (Objectives and Key Results)?
 
Introduction to Objectives and Key Results. The Basics & FAQ of OKRs.
Introduction to Objectives and Key Results. The Basics & FAQ of OKRs.Introduction to Objectives and Key Results. The Basics & FAQ of OKRs.
Introduction to Objectives and Key Results. The Basics & FAQ of OKRs.
 
Guide to OKR (Objectives & Key Results)
Guide to OKR (Objectives & Key Results)Guide to OKR (Objectives & Key Results)
Guide to OKR (Objectives & Key Results)
 
The Executioner's Tale
The Executioner's TaleThe Executioner's Tale
The Executioner's Tale
 

Similar a Reveal.js

20121023 mongodb schema-design
20121023 mongodb schema-design20121023 mongodb schema-design
20121023 mongodb schema-design
MongoDB
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
Pat Cito
 

Similar a Reveal.js (20)

Reveal
RevealReveal
Reveal
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
Ember js meetup treviso liquid-fire
Ember js meetup treviso liquid-fireEmber js meetup treviso liquid-fire
Ember js meetup treviso liquid-fire
 
JavaFX, because you're worth it
JavaFX, because you're worth itJavaFX, because you're worth it
JavaFX, because you're worth it
 
Revealjs sample
Revealjs sampleRevealjs sample
Revealjs sample
 
Cassandra Client Tutorial
Cassandra Client TutorialCassandra Client Tutorial
Cassandra Client Tutorial
 
Hazelcast - In-Memory DataGrid
Hazelcast - In-Memory DataGridHazelcast - In-Memory DataGrid
Hazelcast - In-Memory DataGrid
 
Juggling
JugglingJuggling
Juggling
 
Elixir - GDG - Nantes
Elixir - GDG - NantesElixir - GDG - Nantes
Elixir - GDG - Nantes
 
20121023 mongodb schema-design
20121023 mongodb schema-design20121023 mongodb schema-design
20121023 mongodb schema-design
 
Beginner workshop to angularjs presentation at Google
Beginner workshop to angularjs presentation at GoogleBeginner workshop to angularjs presentation at Google
Beginner workshop to angularjs presentation at Google
 
Lf 2021 rates_viii_a
Lf 2021 rates_viii_aLf 2021 rates_viii_a
Lf 2021 rates_viii_a
 
(De)serial Killers - BSides Las Vegas & AppSec IL 2018
(De)serial Killers - BSides Las Vegas & AppSec IL 2018(De)serial Killers - BSides Las Vegas & AppSec IL 2018
(De)serial Killers - BSides Las Vegas & AppSec IL 2018
 
(De)serial Killers - BSides Las Vegas & AppSec IL 2018
(De)serial Killers - BSides Las Vegas & AppSec IL 2018(De)serial Killers - BSides Las Vegas & AppSec IL 2018
(De)serial Killers - BSides Las Vegas & AppSec IL 2018
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Advanced QUnit - Front-End JavaScript Unit Testing
Advanced QUnit - Front-End JavaScript Unit TestingAdvanced QUnit - Front-End JavaScript Unit Testing
Advanced QUnit - Front-End JavaScript Unit Testing
 
Introduction to Compiler Development
Introduction to Compiler DevelopmentIntroduction to Compiler Development
Introduction to Compiler Development
 
As Triage Code Camp
As Triage Code CampAs Triage Code Camp
As Triage Code Camp
 
03 introduction to graph databases
03   introduction to graph databases03   introduction to graph databases
03 introduction to graph databases
 
Building modern web apps with html5, javascript, and java
Building modern web apps with html5, javascript, and javaBuilding modern web apps with html5, javascript, and java
Building modern web apps with html5, javascript, and java
 

Último

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Último (20)

The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 

Reveal.js

  • 2. HEADS UP reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with support for CSS 3D transforms to see it in its full glory. - Hakim El Hattab / @hakimel
  • 3. VERTICAL SLIDES Slides can be nested inside of other slides, try pressing down .
  • 4. BASEMENT LEVEL 1 Press down or up to navigate.
  • 6. BASEMENT LEVEL 3 That's it, time to go back up.
  • 7. HOLISTIC OVERVIEW Press ESC to enter the slide overview!
  • 8. WORKS IN MOBILE SAFARI Try it out! You can swipe through the slides pinch your way to the overview.
  • 9. MARVELOUS UNORDERED LIST No order here Or here Or here Or here
  • 10. FANTASTIC ORDERED LIST 1. One is smaller than... 2. Two is smaller than... 3. Three!
  • 11. MARKDOWN SUPPORT For those of you who like that sort of thing. Instructions and a bit more info available here . <eto dt-akon scin aamrdw> # Mrdw spot # akon upr Frtoeo yuwolk ta sr o tig o hs f o h ie ht ot f hn. Isrcin adabtmr if aalbe[ee(tp:/ihbcmhkml ntutos n i oe no vial hr]hts/gtu.o/aie/ rva.smrdw) eelj#akon. <scin /eto>
  • 12. TRANSITION STYLES You can select from different transitions, like: Cube Page Concave Linear
  • 13. GLOBAL STATE Set d t - t t = s m t i g on a slide and " o e h n " be aasae"oehn" s m t i g will added as a class to the document element when the slide is open. This let's you apply broader style changes, like switching the background.
  • 16. CUSTOM EVENTS Additionally custom events can be triggered on a per slide basis by binding to the d t - t t name. aasae Rva.dEetitnr 'utmvn' fnto( { eeladvnLsee( csoeet, ucin) cnoelg 'csoeet hsfrd ) osl.o( "utmvn" a ie' ; });
  • 17. CLEVER QUOTES These guys come in two forms, inline: “ The nice thing about standards is that there are so many to choose from” and block: “ For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue. ”
  • 18. PRETTY CODE fnto lniy slco ){ ucin ikf( eetr i(spot3Tasom ){ f uprsDrnfrs vrnds=dcmn.urSlcoAl slco ) a oe ouetqeyeetrl( eetr ; fr vri=0 ln=ndslnt;i<ln i+){ o( a , e oe.egh e; + vrnd =ndsi; a oe oe[] i(!oecasae)){ f nd.lsNm nd.lsNm + 'rl' oecasae = ol; } }; } } Courtesy of highlight.js .
  • 19. INTERGALACTIC INTERCONNECTIONS You can link between slides internally, like this .
  • 20. FRAGMENTED VIEWS Hit the next arrow... ... to step through ... 1. a y t p n ye 2. of view 3. fragments
  • 22. STELLAR LINKS Source code on github Read more on my site Follow me on Twitter
  • 23. THE END BY HAKIM EL HATTAB / HAKIM.SE