How to make a presentation using web technologies?
Everyone knows office monsters PowerPoint and Keynote, but for some reason very few people are happy to work in them. And really, what to do if you are not an accountant at all, but a developer or just a geek and you feel much more comfortable in the code than in the office packages? I have good news for you: presentations have been done for a long time right in the browser, and you can write using such simple and familiar things as HTML, CSS or even Markdaun.
A moment comes to each of us when we need to convey our thoughts to others. Do not just tell an anecdote to a colleague, do not murmur a rhyme about the storm-mist, but communicate something fundamentally important, explain a complex idea, share experience. And if the most talented of us are enough to go on stage and just be themselves, as TED members do, then most will need to rely on slides. I forgot my first time at the blackboard with markers, I only remember that I had misinterpreted the key idea of ​​the report about the CSS block model.
')
The development of web technologies has long led us away from document websites, where the only entertainment was to follow the blue links. Today, using HTML, CSS and JavaScript, you can not only make an application, but even write an interface for a full-fledged operating system, as is the case with Firefox OS.
How to apply it to presentations? You simply write the presentation in HTML, Marckdown or even in YAML format, launch the result in the browser, exit to full-screen mode and start your story. Such presentations perfectly listen to the remotes, allow you to animate transitions, insert pictures and videos, in addition to the usual text and lists.
Opera Show is the first format for creating presentations right in the browser. You can try the presentation generator Hokon Wyum Lee. Documentation in OSF 1.0 format is also available.
The earliest attempt to make presentations right in the browser was the Opera Show system, which was released in 2000. The system was based on the fact that Opera 4.0 browser switches the screen media type to projection when switching to full-screen mode. Thanks to this, it was very easy to add new styles to the article that break it down into slides, and switch between slides and buttons.
The projection.css file connects only in full screen mode. Moreover, Opera Show format worked without a single line of JavaScript to switch styles or slides, demonstrating the full power of CSS and a bit of browser magic. And this is no accident: the chief ideologist of the format was the technical director of Opera Software and CSS inventor Haakon Wium Li.
S5 is a cross-browser development of Opera Show ideas from Eric Meier, an example of a presentation. "S5" because the full name of the whole five letters S: Simple Standards-Based Slide Show System.
A few years later, another patriarch of CSS, Eric Meyer, expanded the capabilities of Opera Show and published in 2004 the first version of the presentation engine called. The idea of ​​switching the browser to the presentation mode in full-screen mode, proposed by Opera, did not find support in other browsers, so in the S5 system Meyer used JavaScript to switch the presentation styles.
The S5 system incrementally scaled the fonts on the slide depending on the window size (using CSS media expressions), allowed moving around lists and other elements inside one slide, offered a system for connecting themes for presentations.
Subsequently, the S5 system was rewritten in jQuery and named S6 , and then it was completely written a slides generator from wiki markup in Ruby language called S9 . But these and other projects based on the S5 did not receive development and popularity.
After the advent of the S5 system, there was a lull in the history of browsing presentations. Either everyone moved to office suites, or the browser capabilities were not enough for something truly impressive.
And only when CSS3 started its triumphal march across the planet with HTML5, a real Cambrian explosion took place: presentation engines in the browser began to appear one after another - from the simplest copyright to corporate ones.
CSSS is a Lee Verow slideshow system that leverages the power of CSS. The full name of the CSS-based SlideShow System, as in S5, also contains many letters S.
In 2010, Leah Verow began climbing to Olympus web development with a presentation at the Front-Trends conference, for which she specifically wrote the CSSS engine. The presentation was so popular with the audience that Leah suddenly became the most popular speaker at technical conferences, and the CSSS engine was published on GitHub.
CSSS inherits the idea of ​​S5 about maximizing the use of CSS capabilities for a presentation, but the JavaScript component of the Leah engine rises to a new level. JavaScript plugins were written to the engine: one for highlighting the code and several for editing the code right on the slides. The second group of plugins allowed Leah to break the standing ovation by editing the code for the examples from the slide right on the slide. Now it was not just pictures on the screen, but a live interface for experiments.
Like other engines for the presentations of this wave, CSSS was compatible only with the latest browsers, for the first time the Lee engine worked fine only in the nightly builds of its favorite Firefox browser. But, as Leah writes, the technical environment at conferences always involves either connecting your own computer, or a modern version of one of the browsers.
Reveal.js is the Hakim El-Khattab presentation engine, which is attractive for its simplicity, 3D effects and a special online service for creating presentations rvl.io.
It was in 2011, the Swedish developer Hakim El-Khattab prepared a report on SVG for a local conference and so played with the 3D capabilities in CSS that he built a simple presentation engine on them. He called it too simply: CSS 3D Slideshow. Three-dimensional effects and two-level navigation are so loved by the public that the engine was developed under the new name Reveal.js. The project acquired not only a new name, but other serious things, such as documentation, community support and a repository on GitHub, but did not lose its original simplicity: a dark field with a highlight in the middle, white letters in the center and impressive 3D spans. But Hakim did not calm down on this and made a whole service that allows you to create presentations on the Reveal.js engine and store them on the site.
One of the interesting features of this engine is the ability to write the contents of slides in the Markdown format. Converting this text to HTML on the fly deals with a special script.
Impress.js is a Bartek Shopka presentation engine with 3D spans, which develops the Prezi “surface with ideas” approach using open technologies right in the browser.
The presentation of the impress.js engine of Bartek Sopka begins provocatively: you are shown boring white slides and asked the question “Are you tired of the same presentation?” - one slide, second, third ... and then, when you switch to the fourth, everything changes. You find yourself on a large surface, where all the ideas that make up the presentation are scattered around in a tricky way, and the transition to the next is accompanied by an intricate span, which is breathtaking.
Appeared in 2011, the impress.js engine develops the “surface with ideas” approach to the Prezi presentation creation and combines it with new browser-based technologies, using animation and 3D CSS capabilities like Reveal.js. And if Prezi is a commercial service on a closed Flash platform, then impress.js is an open library that runs directly in the browser without plug-ins and data plans.
The Google I / O template is a corporate presentation engine from Google, with carefully crafted styles, a separate window for speaker notes. It is perfect for technical reports. The previous version of this template looks less corporate.
If it still seems to you that presentations in the browser are a lot of single technologists who compete with each other in enthusiasm and love for new technologies, then you are mistaken. One of the world's largest corporations, Google, which brought to our browsers a full-fledged office in the form of Google Docs, has long experimented with presentation engines. And if for the mass user it turned out to be an opportunity to create and show a presentation from Google Docs directly in the browser, then Google technologists used several versions of their own engines for speaking at the Google Developer Day and Google I / O conferences.
The latest version of the “corporate” Google presentation engine was a template that was prepared for speeches at the key conference of Google I / O 2012. This template allows you to use all conceivable types of content: from plain text and code snippets to complex tables and pay charts. You can even bring a separate browser window to a second monitor and get slides on it and an overview of the current and next slides, just like in adult desktop systems.
Here comes the time to share personal experience. Your obedient servant read his first report in 2007 at the RIT conference, and made it in Adobe Illustrator: it was a huge 1600 document by 7800 pixels, which opened for several minutes, mercilessly slowed down and eventually printed in PDF. Illustrator was, I must admit, the most inconvenient tool for creating presentations that I have ever used. Here you need to take a sad pause.
Then there was an attempt to take advantage of the PowerPoint templates, from which the teeth were twitching, a brief affair with Keynote (Apple can't do badly, can it?). And in the end I came to a simple thought: if I am a technologist and talk about technologies, about their immense power and potential, then it’s no use for me to use tools that contradict my own ideas.
Shower is my presentation engine with a slide view, with themes separated from the engine and with a wide cross-browser. The name is a play on words: the logo depicts a shower, but “shower” is also “the one who shows”.
In 2011, the premiere of my report “Layout with Meaning” sounded at the same RIT and for the first time a new presentation engine, Shower, was demonstrated to the public. The main feature of the engine was two modes: one with a list of slides, the second - presentation. Shower fundamentally separates the engine and themes for the slides, so with the help of the theme you can change the presentation beyond recognition.
Included with the Shower are two Ribbon and Bright themes, which, although they work less effectively than the spans of Impress.js, but create conditions in which making a bad presentation becomes more difficult: the text on the slide does not fit very much, it is large and contrasting, pictures fit comfortably into the full size of the slide. Cross-browser is at a height here, unlike many other engines: the themes simply do not use features that are not supported by the latest stable versions of popular browsers.
Shower has already been seen at the Fronteers conference, in the presentations of the Yandex developers, classmates, Evil Martians and many others. But the real recognition for me as the author was the presentation of HĂĄkon Wyum Lee, the author of the Opera Show, at the SXSW 2012 conference: HĂĄkon used the Shower for his report.
The growing popularity of conferences over the years, not only large, but also small non-commercial ones, has enriched the speaker’s tools with new opportunities. Monstrous office packages do not give up their positions, but it is clearly visible that the popularity of browser-based presentations is growing, especially for technical reports.
Modern technologies, ease of customization of such engines for their needs, platform independence and fundamentally new approaches to the demonstration make browser presentations the center of fresh ideas that may find their place in traditional programs.
And if you aren’t completely replacing and you have an interest in understanding web technologies, experimenting and trying something new, then do not miss the opportunity to try browser presentations. And better write your own engine - the envy of the whole world.
First published in Hacker magazine dated 05/2013.
Author: Vadim Makeev, evangelist for Opera, pepelsbey
Publication on ISSUU.com
Subscribe to "Hacker"
PS Can you share knowledge and interesting ideas by writing for] [? Let me know :). We pay fees, but this should not be the main motivation.
A moment comes to each of us when we need to convey our thoughts to others. Do not just tell an anecdote to a colleague, do not murmur a rhyme about the storm-mist, but communicate something fundamentally important, explain a complex idea, share experience. And if the most talented of us are enough to go on stage and just be themselves, as TED members do, then most will need to rely on slides. I forgot my first time at the blackboard with markers, I only remember that I had misinterpreted the key idea of ​​the report about the CSS block model.
')
How it works
The development of web technologies has long led us away from document websites, where the only entertainment was to follow the blue links. Today, using HTML, CSS and JavaScript, you can not only make an application, but even write an interface for a full-fledged operating system, as is the case with Firefox OS.
How to apply it to presentations? You simply write the presentation in HTML, Marckdown or even in YAML format, launch the result in the browser, exit to full-screen mode and start your story. Such presentations perfectly listen to the remotes, allow you to animate transitions, insert pictures and videos, in addition to the usual text and lists.
Opera Show
Opera Show is the first format for creating presentations right in the browser. You can try the presentation generator Hokon Wyum Lee. Documentation in OSF 1.0 format is also available.
The earliest attempt to make presentations right in the browser was the Opera Show system, which was released in 2000. The system was based on the fact that Opera 4.0 browser switches the screen media type to projection when switching to full-screen mode. Thanks to this, it was very easy to add new styles to the article that break it down into slides, and switch between slides and buttons.
<link rel="stylesheet" href="screen.css" media="screen"> <link rel="stylesheet" href="projection.css" media="projection"> The projection.css file connects only in full screen mode. Moreover, Opera Show format worked without a single line of JavaScript to switch styles or slides, demonstrating the full power of CSS and a bit of browser magic. And this is no accident: the chief ideologist of the format was the technical director of Opera Software and CSS inventor Haakon Wium Li.
S5
S5 is a cross-browser development of Opera Show ideas from Eric Meier, an example of a presentation. "S5" because the full name of the whole five letters S: Simple Standards-Based Slide Show System.
A few years later, another patriarch of CSS, Eric Meyer, expanded the capabilities of Opera Show and published in 2004 the first version of the presentation engine called. The idea of ​​switching the browser to the presentation mode in full-screen mode, proposed by Opera, did not find support in other browsers, so in the S5 system Meyer used JavaScript to switch the presentation styles.
The S5 system incrementally scaled the fonts on the slide depending on the window size (using CSS media expressions), allowed moving around lists and other elements inside one slide, offered a system for connecting themes for presentations.
Subsequently, the S5 system was rewritten in jQuery and named S6 , and then it was completely written a slides generator from wiki markup in Ruby language called S9 . But these and other projects based on the S5 did not receive development and popularity.
Calm and explosion
After the advent of the S5 system, there was a lull in the history of browsing presentations. Either everyone moved to office suites, or the browser capabilities were not enough for something truly impressive.
And only when CSS3 started its triumphal march across the planet with HTML5, a real Cambrian explosion took place: presentation engines in the browser began to appear one after another - from the simplest copyright to corporate ones.
CSSS
CSSS is a Lee Verow slideshow system that leverages the power of CSS. The full name of the CSS-based SlideShow System, as in S5, also contains many letters S.
In 2010, Leah Verow began climbing to Olympus web development with a presentation at the Front-Trends conference, for which she specifically wrote the CSSS engine. The presentation was so popular with the audience that Leah suddenly became the most popular speaker at technical conferences, and the CSSS engine was published on GitHub.
CSSS inherits the idea of ​​S5 about maximizing the use of CSS capabilities for a presentation, but the JavaScript component of the Leah engine rises to a new level. JavaScript plugins were written to the engine: one for highlighting the code and several for editing the code right on the slides. The second group of plugins allowed Leah to break the standing ovation by editing the code for the examples from the slide right on the slide. Now it was not just pictures on the screen, but a live interface for experiments.
Like other engines for the presentations of this wave, CSSS was compatible only with the latest browsers, for the first time the Lee engine worked fine only in the nightly builds of its favorite Firefox browser. But, as Leah writes, the technical environment at conferences always involves either connecting your own computer, or a modern version of one of the browsers.
Reveal.js
Reveal.js is the Hakim El-Khattab presentation engine, which is attractive for its simplicity, 3D effects and a special online service for creating presentations rvl.io.
It was in 2011, the Swedish developer Hakim El-Khattab prepared a report on SVG for a local conference and so played with the 3D capabilities in CSS that he built a simple presentation engine on them. He called it too simply: CSS 3D Slideshow. Three-dimensional effects and two-level navigation are so loved by the public that the engine was developed under the new name Reveal.js. The project acquired not only a new name, but other serious things, such as documentation, community support and a repository on GitHub, but did not lose its original simplicity: a dark field with a highlight in the middle, white letters in the center and impressive 3D spans. But Hakim did not calm down on this and made a whole service that allows you to create presentations on the Reveal.js engine and store them on the site.
One of the interesting features of this engine is the ability to write the contents of slides in the Markdown format. Converting this text to HTML on the fly deals with a special script.
Impress.js
Impress.js is a Bartek Shopka presentation engine with 3D spans, which develops the Prezi “surface with ideas” approach using open technologies right in the browser.
The presentation of the impress.js engine of Bartek Sopka begins provocatively: you are shown boring white slides and asked the question “Are you tired of the same presentation?” - one slide, second, third ... and then, when you switch to the fourth, everything changes. You find yourself on a large surface, where all the ideas that make up the presentation are scattered around in a tricky way, and the transition to the next is accompanied by an intricate span, which is breathtaking.
Appeared in 2011, the impress.js engine develops the “surface with ideas” approach to the Prezi presentation creation and combines it with new browser-based technologies, using animation and 3D CSS capabilities like Reveal.js. And if Prezi is a commercial service on a closed Flash platform, then impress.js is an open library that runs directly in the browser without plug-ins and data plans.
Google templates
The Google I / O template is a corporate presentation engine from Google, with carefully crafted styles, a separate window for speaker notes. It is perfect for technical reports. The previous version of this template looks less corporate.
If it still seems to you that presentations in the browser are a lot of single technologists who compete with each other in enthusiasm and love for new technologies, then you are mistaken. One of the world's largest corporations, Google, which brought to our browsers a full-fledged office in the form of Google Docs, has long experimented with presentation engines. And if for the mass user it turned out to be an opportunity to create and show a presentation from Google Docs directly in the browser, then Google technologists used several versions of their own engines for speaking at the Google Developer Day and Google I / O conferences.
The latest version of the “corporate” Google presentation engine was a template that was prepared for speeches at the key conference of Google I / O 2012. This template allows you to use all conceivable types of content: from plain text and code snippets to complex tables and pay charts. You can even bring a separate browser window to a second monitor and get slides on it and an overview of the current and next slides, just like in adult desktop systems.
Lyrical digression
Here comes the time to share personal experience. Your obedient servant read his first report in 2007 at the RIT conference, and made it in Adobe Illustrator: it was a huge 1600 document by 7800 pixels, which opened for several minutes, mercilessly slowed down and eventually printed in PDF. Illustrator was, I must admit, the most inconvenient tool for creating presentations that I have ever used. Here you need to take a sad pause.
Then there was an attempt to take advantage of the PowerPoint templates, from which the teeth were twitching, a brief affair with Keynote (Apple can't do badly, can it?). And in the end I came to a simple thought: if I am a technologist and talk about technologies, about their immense power and potential, then it’s no use for me to use tools that contradict my own ideas.
INFO
Web Standards Days is a free conference on frontend technologies, which has been held since 2009 by the Web Standards community in Minsk, Kiev, St. Petersburg, Moscow and other cities.
In 2009, the Web Standards community held the first Web Standards Days conference in Minsk, where I gave a presentation on web fonts, and it worked directly from the browser. The attempt turned out successful, although this presentation on the Opera Show system worked, of course, only in the Opera browser. Two years passed before this engine developed into something so interesting that it wanted to share with others.
Shower
Shower is my presentation engine with a slide view, with themes separated from the engine and with a wide cross-browser. The name is a play on words: the logo depicts a shower, but “shower” is also “the one who shows”.
In 2011, the premiere of my report “Layout with Meaning” sounded at the same RIT and for the first time a new presentation engine, Shower, was demonstrated to the public. The main feature of the engine was two modes: one with a list of slides, the second - presentation. Shower fundamentally separates the engine and themes for the slides, so with the help of the theme you can change the presentation beyond recognition.
Included with the Shower are two Ribbon and Bright themes, which, although they work less effectively than the spans of Impress.js, but create conditions in which making a bad presentation becomes more difficult: the text on the slide does not fit very much, it is large and contrasting, pictures fit comfortably into the full size of the slide. Cross-browser is at a height here, unlike many other engines: the themes simply do not use features that are not supported by the latest stable versions of popular browsers.
Shower has already been seen at the Fronteers conference, in the presentations of the Yandex developers, classmates, Evil Martians and many others. But the real recognition for me as the author was the presentation of HĂĄkon Wyum Lee, the author of the Opera Show, at the SXSW 2012 conference: HĂĄkon used the Shower for his report.
Conclusion
The growing popularity of conferences over the years, not only large, but also small non-commercial ones, has enriched the speaker’s tools with new opportunities. Monstrous office packages do not give up their positions, but it is clearly visible that the popularity of browser-based presentations is growing, especially for technical reports.
Modern technologies, ease of customization of such engines for their needs, platform independence and fundamentally new approaches to the demonstration make browser presentations the center of fresh ideas that may find their place in traditional programs.
And if you aren’t completely replacing and you have an interest in understanding web technologies, experimenting and trying something new, then do not miss the opportunity to try browser presentations. And better write your own engine - the envy of the whole world.
Www
Wikipedia has an entire Web-based slideshow article with an overview of all the presentation systems running in the browser. The article by Louis Lazaris and an overview of the five best systems HTML presentations on SitePoint deserves special attention.
First published in Hacker magazine dated 05/2013.
Author: Vadim Makeev, evangelist for Opera, pepelsbey
Publication on ISSUU.com
Subscribe to "Hacker"
- 1 999 . for 12 numbers of paper version
- 1249r. for an annual subscription to iOS / iPad (Android'a release soon!)
- "Hacker" on Android
PS Can you share knowledge and interesting ideas by writing for] [? Let me know :). We pay fees, but this should not be the main motivation.
Source: https://habr.com/ru/post/185490/
All Articles