Презентация средствами HTML5

Обратил внимание, что в настоящее время программисты Google начали использовать новую форму представления своих презентаций.

Типичный пример, еще пример — мы видим фреймы, эффекты, изображения, общий стиль.

Несложный поиск привел к удобному шаблону, который при своей простоте позволяет создавать неплохие презентации с легко внедряемыми элементами

Пример использования и его исходный код показывают возможности этого на мой взгляд удачного инструмента.

Copy Source | Copy HTML

1. <article>
2.         <h3>
3.           Slide with bullet points that builds
4.         </h3>
5.         <ul class="build">
6.           <li>
7.             This is an example of a list
8.           </li>
9.           <li>
10.             The list items fade in
11.           </li>
12.           <li>
13.             Last one!
14.           </li>
15.         </ul>
16.  
17.         <div class="build">
18.           <p>Any element with child nodes can build.</p>
19.           <p>It doesn't have to be a list.</p>
20.         </div>
21.       </article>

Как видим, слайды разделяются тегом article. Поскольку у нас полный html, то нет проблем внедрить код и фреймы для примера, что бывает важно для демонстрации возможностей API.

Copy Source | Copy HTML

1. <article class="nobackground">
2.           <h3>Style in Code - new!</h3>
3.   <iframe src="http://code.google.com/apis/maps/documentation/javascript/examples/layer-fusiontables-styling.html"></iframe>
4.   </article>
5.                 <article class="nobackground">
6.                     <pre>
7. ... var australia = new google.maps.LatLng(-25, 133);
8.       map = ...
9.       layer = new google.maps.FusionTablesLayer({
10.         query: {
11.           select: 'geometry',
12.           from: '815230'
13.         },
14.         styles: [{
15.           polygonOptions: {
16.             fillColor: "#00FF00",
17.             fillOpacity: 0.3
18.           }
19.         }, {
20.           where: "birds > 300",
21.           polygonOptions: {
22.             fillColor: "#0000FF"
23.           }
24.         }, {
25.           where: "population > 5",
26.           ...});
27.       layer.setMap(map);</pre>
28.     </article>

Все исходники доступны, на их основе можно создавать свои шаблоны презентаций.
Пример эталонной презентации.