Презентация средствами 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>


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

    Similar posts

    Comments 40

      +14
      HTML5 в массы!
        –23
        И натуралу, и пидарасу!
          –3
          Наоборот хотя-бы сказал…
          0
          Потрясающий эффект… слов нет.
          На дворе 21 век, а я сижу и парюсь док в пдф сохраняю.
        • UFO just landed and posted this here
            +2
            Не уверен — тут все таки тег Article.
            www.w3schools.com/html5/tag_article.asp — The article tag is new in HTML5.
            • UFO just landed and posted this here
                +11
                А давайте все браузеры свои аналоги тегов введут?
                А что? Совсем нескучно будет тогда.
                • UFO just landed and posted this here
                    +2
                    А давайте все браузеры свои аналоги тегов введут?
                    А что? Совсем нескучно будет тогда.

                    Ничего плохого в этом нету. Если браузер поддерживает все стандарты, то проприетарные теги пускай вводит. Эти теги нужны для тестирования, анализа, что необходимо разработчикам и подачи заявки на внедрение в стандарт.
                    0
                    У Оперы свой тег — что за бред? Вы что имеете в виду?
                    • UFO just landed and posted this here
                        0
                        А что в этом коде специфично оперового?
                  +7
                  Важно, что бы это умели делать все браузеры, под общей спецификацией, а не конкретный через костыли.
                  +3
                  для рубистов есть вот такая штука
                  github.com/schacon/showoff
                    +6
                    А ещё есть проект Shower от pepelsbey. С примерами можно ознакомиться на его выступлениях или в его блоге.
                    +1
                    вот что получилось по вашй ссылке "еще пример":
                    1. IE9 — краш таба
                    2. В хроме довольно таки хилый фреймрейт/подергивания/неплавная анимация
                    3. В FF неверное положение картинок на слайде User-facing APIs (3-й)
                    Думаю, что-то тут пошло не так :)
                      +1
                      В этой презентации много фреймов с картами. Может из за этого?
                      0
                      1. IE
                      2. У меня всё отлично
                      3. А вот тут да, картинки «улетели» кто куда.
                        0
                        В хроме масштабирование создает непрорисованные участки.
                          0
                          4. Safari подлагивает на слайдах с картами…
                          +6
                          Я бы еще добавил ссылку на «эталонную» презентацию:
                          slides.html5rocks.com/
                            0
                            Спасибо, добавил
                            +6
                            Кстати, недавно на JEEConf я выступал с презентацией «CQRS+GAE+GWT», которую я сделал используя практически только CSS3 (транзишены, тени и т.д.) и буквально немного JS (для поддержки history и переключения «слайдов»).

                            Чуть позже планирую сделать пост об этой нехитрой «технике» :)

                            Сама презентация доступна на olostan.name/cqrs/
                              0
                              Я 90% своих заказчиков уже уговорил в сторону CSS3 (HTML5 не обсуждается даже) и техники graceful degradation. Бывают проекты, что эта техника применена местами (на мелких элементах), но даже в таком кол-ве она сильно экономит ресурсы и улучшает поддержку в дальнейшем.
                              0
                              Гениальная вещь.
                                0
                                Еще бы наши гении отвязали эту вещь от интернета — было бы вообще здорово.
                                А так в оффлайне не покажешь.
                                  0
                                  Если скачать на локальный компьютер JS код, то нормально все будет.
                                    0
                                    Не будет. Посмотрите в фаербаге сколько всего грузит эта презентация. В т.ч. не стандартные шрифты.
                                +1
                                На мой взгляд ничего удивительного.
                                Программирование презентации на JS, просто информацию сохраняем не в старом div, а в новом article.
                                Сложного в этом ничего нет. Поэтому не понимаю столь звонкого названия статьи с упоминанием HTML5.
                                  +3
                                  audio, video, localstorage, canvas, etc.
                                  0
                                  Расскажите кто-нибудь про смысл этого мероприятия.
                                    +1
                                    На GGD2010 все презентации были на html5. Интересно, а в браузерах типа ie7 какие костыли нужны для работы презентации?
                                      0
                                      Google Chrome Frame? :)
                                        0
                                        Зачем использовать IE7 для презентации, если можно выбрать нормальный браузер?

                                        Никого же не беспокоит вопрос, как будет работать презентация PowerPoint в Skype.
                                          0
                                          А если я хочу построить на прототипе презентации какой-нибудь промо-сайтик на 5-7 страниц? Ну вот, вдруг?
                                        +2
                                        Есть такая штука как s5, а ещё есть замечательный легковесный текстовый формат reStructuredText. С помощью docutils можно писать презентации как и другие документы в текстовом формате в любимом редакторе (например, vim), а потом с помощью утилиты rst2s5 получаем на выходе презентацию в формате HTML. Все очень просто — рекомендую!

                                        Only users with full accounts can post comments. Log in, please.