Образовательный портал «Кафедра онлайн»

Чтобы создать высокопроизводительное web-приложение, в принципе достаточно качественного программного кода на JavaScript. Однако, на практике, в разработке веб-приложений второго поколения существует множество тонкостей, о которых приходится думать постоянно: браузерная совместимость, работа с Document Object Model (DOM) и десяток своеобразных техник, которые похожи на хакерство.

Многие Ajax-профессионалы склонны полагать, что без инструментального набора Dojo Toolkit разработка Rich Internet Applications превратилась бы в сущий ад. На сегодняшний день Dojo Toolkit — пожалуй самая мощная и гибкая Ajax-библиотека из всех, что есть на рынке, она активно развивается и признана профессиональным сообществом. Представление о комплекте инструментальных средств Dojo Toolkit вы сможете получить, пройдя по следующим ссылкам:

Dojo - официальный сайт
Dojo - документация (англ.)
Dojo - документация (рус., устаревшая)

Ещё пара ссылок для новичков в web-программировании:
Программирование для детей на языке JavaScript с применением HTML и CSS
JavaScript - книги, статьи, справочник, форум, прочее




См. подборку справочных материалов, подготовленную студентом А.Бурыкиным.
Современный учебник JavaScript
Д.Фленаган. JavaScript. Подробное руководство
Справочник по тегам HTML

Планируется ли использование также CSS3 и HTML5?
Было бы интересно поразбираться в dojo.

Пока без акцента на CSS 3 и HTML 5. Dojo сам по себе достаточно велик для изучения и освоения.

!	Просим извинить за неработающие ссылки (мы переехали на новый хостинг). Постараемся исправить ссылки в скором времени.

Программирование, как область профессиональной деятельности, сейчас всё больше становится web-программированием. Потому, что современные пользователи без энтузиазма воспринимают программные продукты, которые не предоставляют им возможностей интернета.

Dojo Toolkit — это AJAX фреймворк, развиваемый группой Dojo Foundation, и нацеленный на нишу серьезных web-проектов. Dojo Foundation - некоммерческая организация, созданная для поддержки и продвижения Dojo. Её членами и спонсорами являются IBM, Sun Microsystems, Google, ряд других IT-корпораций мирового уровня.

Dojo обладает одним из самых компактных и мощных базовых наборов классов (27 Кб в сжатом варианте). Все остальные функциональности доступны опционально, поэтому не стоит пугаться дистрибутива размером больше десятка Мб. Начать использовать Dojo в своем проекте можно очень быстро, просто подключив один единственный файл, или даже не копируя ничего на сервер, поскольку Dojo доступен через публичные хостинги. В будущем, если вам понадобится новая функциональность, вы просто расширяете свое приложение шаг за шагом, используя динамическую загрузку модулей.

Официальный сайт Dojo достаточно информативен, но он ориентирован в основном на профессионалов. Поэтому, для первоначального знакомства с этим фреймворком, рекомендую прочитать эту неплохую статью. Далее, можно ознакомиться с Dojo Demos - разделом примеров на официальном сайте Dojo, и посетить Dojo Campus, где также имеется немало обучающих материалов.

Интересующихся студентов приглашаю попробовать инкубатор Project Zero - один из серьезных примеров использования Dojo в корпоративных Web 2.0 системах от IBM. Project Zero - это сообщество разработчиков WebSphere sMash, которое предлагает бесплатную платформу для быстрой и простой разработки интерактивных web-приложений с новейшими сборками, функциональными возможностями и поддержкой. Более подробно об этом можно посмотреть здесь.

Как и у каждого серьёзного продукта, у Dojo безусловно есть свои проблемы. Например, мне не удалось заставить браузер Opera корректно отображать некоторые виджеты из пакета Dijit. В частности, поэтому, сервис Учебные материалы, который сделан на Dojo, пока не доступен из Opera.

Тем не менее, "джентльменский набор" Dojo/Dijit/Dojox позволяет делать всё, что только возможно сделать с помощью Ajax и JavаScript, причем в объектно-ориентированном стиле. И поэтому он вполне заслуживает того, чтобы его изучали и применяли.
Ещё одна полезная ссылка: AJAX изнутри - XMLHTTPRequest

!	Просим извинить за неработающие ссылки (мы переехали на новый хостинг). Постараемся исправить ссылки в скором времени.

Место в "подвале" страниц сайтов (так называемый футер) принято использовать для размещения всяческих копирайтов, ссылок и другой второстепенной информации.
Футер можно сделать "умным", придав ему полезную функциональность. Например, футер может обеспечить навигацию по сайту и обратную связь с посетителями страниц.
Различные панели со средствами навигации и формами обратной связи "всплывают" из футера, когда вы наводите мышку на футер или щелкаете по различным частям экрана.
Если увести мышку, появившиеся панели "растворятся". Выглядит это примерно так:

Этот футер имеет собственный маленький "движок" на JavaScript. Движок делает анимацию и отправляет асинхронные post-запросы (Ajax), используя Dojo Toolkit. "Умный" футер можно взять из файла, прикрепленного к этому посту (там есть два футера: синий и зеленый), и использовать на любой странице вашего сайта (или на всех страницах).

Посмотреть вживую работу футера можно здесь: синий футер и зеленый футер.

Перед использованием футера, настройте цвета, ссылки, кнопки и формы по своему вкусу.
Затем просто вставьте его HTML-код в любое место вашей страницы, подключите файлы .css и .js. Футер "прилепится" к нижней кромке экрана и скроллится не будет. Если нужно "отлепить" футер от нижней кромки экрана и сделать его перемещаемым, следует в стиле "_footer_wrap" заменить "position:absolute;" на "position:relative;". Высота самого футера 40 пикселов. Полосу высотой ещё 5 пикселов над собой он закрывает прозрачной пленкой (делает не кликабельной). По ширине футер занимает все имеющееся пространство.

Перед использованием футера, замените адрес электронной почты "xxxxxx@yyyy.ru" на свой реальный адрес. Это в файле "footer_mail_to.php". Письма с отзывами будут приходить на указанный вами адрес. Собственный интерактивный "ползунок" для обратной связи с посетителями вашего сайта можно получить здесь.

Успехов вам!

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

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

Библиотека jQuery, при всех её достоинствах, пользуется популярностью ещё и из-за огромного количества плагинов, готовых тем и решений. Dojo Toolkit чуть более молодой и "элитарный" продукт, он хорошо структурирован и динамично развивается.
Так или иначе, в ходе глубокой практической апробации обоих этих платформ, у меня получился некий синтетический продукт, который внешне выглядит как "рыбий глаз", а на самом деле обеспечивает доступ к ресурсам, которые хранятся на облачных сервисах Google и Flickr. Щелкайте мышкой по картинкам ниже, многократно.





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

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

Пример работы рыбьего глаза с общедоступными альбомами Flickr и видео YouTube
Исходный код примера размещен в Облачном кабинете. В данном примере использованы два контейнера для размещения виджетов:
<div id="flickr_container"></div> - для размещения альбомов Flickr.
<div id="youtube_container"></div> - для размещения видеороликов Youtube.

Код: выделить все

<!DOCTYPE html>
<html>
<head>
<title>fisheye demo</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" href="http://vt.obninsk.ru/common/light_div_css/light_div.css" type="text/css" media="screen"/>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script src="http://vt.obninsk.ru/common/light_div_blue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="flickr_container"></div>
<div id="youtube_container"></div>
<script type="text/javascript">
   $('#flickr_container').light_flickr('150', 'rect', 'right', 'MEPhI');
   $('#youtube_container').light_youtube('155', 'circle', 'left', "hFdNlu-0PnM", "ZYOgI_UonAw", "GTf9LGA3sJQ");
</script>
</body>
</html>


Функция light_flickr('150', 'rect', 'right', 'album_word', 'user_id', 'api_key') размещает в контейнере серию альбомов Flickr. Её аргументы следующие:

• Первый аргумент - размер виджета в пикселах;
• Второй аргумент может принимать значения 'rect', 'oval' или 'circle' и определяет форму виджета (прямоугольную, овальную или круглую);
• Третий аргумент может принимать значения 'left', 'right' или 'center' и определяет позиционирование контейнера с виджетами (слева, справа, по центру);
• Четвертый аргумент - ключевое слово для поиска альбомов (будут выбраны альбомы, в названии которых имеется данное слово).
• Пятый аргумент (необязательный) - user_id пользователя Flickr;
• Шестой аргумент (необязательный) - api_key пользователя Flickr;

Последние два аргумента необходимо указывать, если вы желаете отображать свои собственные общедоступные (Public) альбомы. Вы получаете их как пользователь Flickr по бесплатной квоте (FREE).

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

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

Пример работы виджетов в теле форума:

Облачные технологии – распределенная удаленная обработка и хранение данных.

Облако в компьютерном значении (не как метафора) – обычно крупный дата-центр, сеть взаимосвязанных серверов. С точки зрения пользователя облако – это набор стандартизованных IT-услуг, которые обладают следующими свойствами:

• Самообслуживание по требованию, без явного взаимодействия с представителем поставщика услуг.
• Универсальный доступ по сети, вне зависимости от используемого терминального устройства.
• Объединение вычислительных ресурсов в единый пул. Поставщик услуг динамически распределяет ресурсы между потребителями в условиях постоянного изменения спроса.
• Вычислительная эластичность. Услуги могут быть предоставлены, расширены, сужены в любой момент времени, без дополнительных издержек на взаимодействие с поставщиком услуг.
• Автоматизированный учёт реального потребления услуг. Экономия на издержках, гибкость, масштабирование вычислительной системы.

Полностью читайте в блогах: Облачные технологии в высшем образовании. Аналитический обзор.

Dojo Toolkit - это одновременно самый мощный и наименее используемый в РФ JavaScript-фреймворк.
В то время, как почти каждый JavaScript-фреймворк или тулкит обещает сделать все на свете и даже больше, Dojo Toolkit реально предоставляет наиболее убедительные аргументы в доказательство своей функциональности.

В 2013 году на habrahabr.ru весьма полно прокомментированы некоторые важные компетенции Dojo Toolkit, а также рассказано, почему данный фреймворк будет полезен для ваших проектов.

В цепочке обсуждений проводятся сравнения с jQuery, ExtJS / Sencha Touch и YUI3.