Используем презентацию Google Docs на своем сайте

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

 

Подготовка

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

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

Теперь у вас есть прямая ссылка на опубликованную презентацию, готовую к встраиванию в документы на других сайтах.

 

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

Осталось только показать презентацию людям, которые посещают нашу страницу. Будем использовать скрипт лайтбокса. В демонстрации применяется 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 используется для вывода презентации, а на вашем сайте остается свободное пространство.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/jgWjE2xVbqo/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Используем презентацию Google Docs на своем сайте | | 2013-02-13 00:09:50 | | Статьи Web-мастеру | | Google Docs - онлайн инструмент, разработанный корпорацией добра, содержит редко используемый сервис - полноценное приложение для создания презентаций. Как и все разработанное Google, презентации | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: