Образовательный портал «Кафедра онлайн» НИЯУ «МИФИ», Обнинск"

Про «рыбий глаз» и облачные сервисы

В.П. Тельнов, канд. техн. наук, доцент ИАТЭ НИЯУ «МИФИ», Обнинск

Эта заметка написана в ходе подготовки нового курса «Специальные вопросы программирования» и может представлять интерес для студентов специализации. В курсе СВП, помимо прочего, изучаются технологии создания динамичных web-приложений с развитым интерфейсом клиентской части (так называемый web 2).

В ходе подготовки к занятиям пришлось перебрать, опробовать и сравнить между собой множество платформ, технологий и инструментов. В частности, стоял такой вопрос: какую из двух платформ, jQuery или Dojo, выбрать в качестве базовой для преподавания. Они очень похожи друг на друга, примерно равны по мощности, и каждая из них покрывает до 90% потребностей web-разработчика.

Про Dojo Toolkit достаточно подробно написано на форуме КССТ, в теме Вопросы программирования. Относительно jQuery имеются ещё более исчерпывающие web-ресурсы: официальный сайт, учебники, демонстраторы, темы оформления и т.д.

Библиотека jQuery, при всех её достоинствах, пользуется популярностью ещё и из-за огромного количества плагинов, готовых тем и решений. Dojo Toolkit чуть более молодой и «элитарный» продукт, он хорошо структурирован и динамично развивается.

Так или иначе, в ходе глубокой практической апробации обоих этих платформ, получился некий синтетический продукт, который внешне выглядит как «рыбий глаз», а на самом деле обеспечивает доступ к ресурсам, которые хранятся на облачных сервисах Googla. Щелкайте мышкой по картинкам, многократно.

Чем интересна эта веселая поделка? Здесь для анимации и для кросс-доменных http-запросов (Ajax) используется Dojo Toolkit, а для манипуляций с DOM и для динамической генерации контента — jQuery. Рыбий глаз асинхронно работает с фидами (feeds) Youtubа и Picasы и подает их медийный контент в стиле LightBox, имитируя всплывающие окна (которых на самом деле нет).

Другая особенность связана с работой рыбьего глаза на персональных компьютерах невысокой производительности. Чтобы всё выглядело реалистично, к каждому анимируемому объекту «подвешен» свой индивидуальный объект-аниматор, который только его и обслуживает. Это паттерн программирования Command. Подобные вопросы детально, с разбором примеров, изучаются в курсе СВП. Лекции по курсу СВП имеют место быть в осеннем семестре еженедельно и доступны для всех желающих. Интересующиеся студенты приглашаются к сотрудничеству и профессиональным дискуссиям.

API для виджетов типа «рыбий глаз»

При выполнении проектных заданий по курсу СВП могут оказаться полезными виджеты типа «рыбий глаз». Например, с целью компактного представление графического и видео контента. Ниже приведен демонстрационный пример и дано краткое описание API этих инструментов.

<!DOCTYPE html>
<html>
<head>
<title>LightDiv</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="http://vt.obninsk.ru/common/light_div_css/light_div.css"/>
    <script type="text/javascript" src="http://vt.obninsk.ru/common/dojo.js"></script>
    <script type="text/javascript" src="http://vt.obninsk.ru/common/jquery_lite.js"></script>
    <script type="text/javascript" src="http://vt.obninsk.ru/common/light_div_blue.js"></script>
    <script type="text/javascript" src="http://vt.obninsk.ru/common/swfobject.js"></script>
</head>
<body>
    <div id="picasa_container"></div>
    <div id="youtube_container"></div>
    <h3>Здесь может располагаться произвольный текст или другой контент ...</h3>
    <script type="text/javascript">
        $('#picasa_container').light_picasa('144', 'rect', 'right', 'google_id', 'album_word');
        $('#youtube_container').light_youtube('160', 'circle', 'left', "youtube_id");
    </script>
</body>
</html>
 

В данном примере использованы два контейнера для размещения виджетов:

    <div id=’picasa_container’></div> — для размещения альбомов Picasa.
    <div id=’youtube_container’></div> — для размещения видеороликов Youtube.

Функция light_picasa(‘144’, ‘rect’, ‘right’, ‘google_id’, ‘album_word’) размещает в контейнере серию альбомов Picasa. Её аргументы следующие:

  • Первый аргумент — размер виджета в пикселах;
  • Второй аргумент может принимать значения ‘rect’, ‘oval’ или ‘circle’ и определяет форму виджета (прямоугольную, овальную или круглую);
  • Третий аргумент может принимать значения ‘left’, ‘right’ или ‘center’ и определяет позиционирование контейнера с виджетами (слева, справа, по центру);
  • Четвертый аргумент — короткий id аккаунта Google владельца альбомов. Аккаунт в сервисах Google имеет вид xxxxxx@gmail.com. Здесь нужно указать только xxxxxx;
  • Пятый аргумент — ключевое слово для поиска альбомов (будут выбраны альбомы, в названии которых имеется данное слово).

Функция light_youtube(‘160’, ‘circle’, ‘left’, «youtube_id») размещает в контейнере серию видеороликов Youtube. Её аргументы следующие:

  • Первые три аргумента — аналогичны аргументам функции light_picasa;
  • Четвертый и последующие аргументы — короткие адреса видео на Youtube. Полные адреса имеют вид http://youtu.be/xxxxxxxxxxx. Здесь нужно указать только xxxxxxxxxxx.

Не забудьте подключить файлы css и js, как показано в демонстрационном примере. Если что-то не получается, задавайте вопросы. Вот пример использования данного API, когда виджеты находятся в потоке произвольного контента.

И последнее. Чтобы компактно вставить в текст вашей публикации фото и/или видео контент в стиле «рыбий глаз«, как сделано в этой заметке, используйте Shortcodes  light_picasa  и/или  light_youtube. Если текст вашей публикации велик, приведите в блоге только аннотацию или вводную часть, а полный текст разместите на облаке (в удаленном хранилище). Стилизованную ссылку на облако вставьте шорткодом cloud_link.

В скором времени для авторов блогов ожидается появление толкового мануала, где подобные вопросы будут разъяснены более детально.

Комментариев нет

Похожие публикации
 
 

Комментариев нет

Вы можете быть первым, кто оставит комментарий.

 
 

Вы можете оставить комментарий

 





 
 

Выполните простое задание (антиспам). Картинки можно сибирать приблизительно, без точной подгонки фрагментов.


 
 
 

Наверх