Google Docs - онлайн инструмент, разработанный "корпорацией добра", содержит редко используемый сервис - полноценное приложение для создания презентаций. Как и все разработанное Google, презентации основаны на HTML5 и могут встраиваться в любой веб сайт. Они также поддерживают переходы и эффекты, которые являются обычным явлением в Powerpoint, но все реализовано на CSS3. Такие характеристики превращают презентации Google Docs в отличный инструмент для представления продукта!

Подготовка

Вот что нужно сделать:

Создать презентацию в Google Docs, которая будет описывать ваш продукт. Можно выбирать дизайн из готовых шаблонов, загружать изображения, использовать шрифты из коллекции Google Web Fonts, определять анимации и даже встраивать видео с YouTube;
Опубликовать презентацию в интернете (меню Файл->Опубликовать в Интернете...);
В диалоге "Опубликовать в Интеренете" в поле "Встраивание кода" скопировать адрес URL из атрибута src. Другая ссылка на документ не будет работать на другом домене.
Теперь у вас есть прямая ссылка на опубликованную презентацию, готовую к встраиванию в документы на других сайтах.

Презентация Google Docs



Выводим презентацию

Осталось только показать презентацию людям, которые посещают нашу страницу. Будем использовать скрипт лайтбокса. В демонстрации применяется fancybox2.

После загрузки плагина, нужно включить файлы стилей и скрипта в HTML код. Затем добавляем ссылку, которая будет запускать лайтбокс:

<a id="tour" class="fancybox.iframe blueButton" href="https://docs.google.com/presentation/d/1B8ZH2zXAPrVtMB6p9cX7EQ6JfE2kfCee2WIox-Ifjgg/embed?start=false&loop=false&delayms=3000">Запустить тур</a>

Ссылка имеет id и два класса. Первый класс указывает плагину fancybox использовать iframe. Второй класс определяет стиль кнопки (стили можно посмотреть в файле assets/css/styles.css). Атрибут href указывает на URL, который мы скопировали ранее.

Инициализация плагина fancybox:

$(function(){
     
    $('#tour').fancybox({
        maxWidth    : 746,
        maxHeight   : 600,
        fitToView   : false,
        width       : '80%',
        height      : '80%',
        padding     : 0
    }).click(); // Открываем презентацию при загрузке страницы
     
});

Здесь передаются опции плагину fancybox и запускается событие click для вывода после загрузки. Готово! Мощность HTML5 используется для вывода презентации, а на вашем сайте остается свободное пространство.

Добавлено: 21 Сентября 2013 02:34:52 Добавил: Андрей Ковальчук Нравится 0

Добавить