понедельник, 13 июня 2011 г.

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

image
Обратил внимание, что в настоящее время программисты 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>

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

1 комментарий:

Алег Шишканов комментирует...

Да согласен, недавно использовал шаблон сайта html5, так намного легче создавать не только презентации, а и настраивать навигации по сайту, и не только