Эффективное web-программирование: Ajax и Dojo

Обсуждение тем, связанных с учебным процессом, и не только

Модератор: Преподаватели

Эффективное web-программирование: Ajax и Dojo

Сообщение Telnov » 01 окт 2011, 02:20

Чтобы создать высокопроизводительное 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
В.Тельнов
Аватар пользователя
Telnov
Преподаватель
 
Сообщений: 324
Изображения: 5
Зарегистрирован: 05 сен 2011, 00:19
Благодарил (а): 1 раз.
Поблагодарили: 10 раз.

Re: Эффективное web-программирование: Ajax и Dojo

Сообщение MadeInUSSR » 23 окт 2011, 14:56

Планируется ли использование также CSS3 и HTML5?
Было бы интересно поразбираться в dojo.
Аватар пользователя
MadeInUSSR
Студент
 
Сообщений: 4
Зарегистрирован: 06 сен 2011, 17:35
Благодарил (а): 1 раз.
Поблагодарили: 0 раз.

Re: Планируется ли использование также CSS3 и HTML5?

Сообщение Telnov » 23 окт 2011, 22:46

Пока без акцента на CSS 3 и HTML 5. Dojo сам по себе достаточно велик для изучения и освоения.
В.Тельнов
Аватар пользователя
Telnov
Преподаватель
 
Сообщений: 324
Изображения: 5
Зарегистрирован: 05 сен 2011, 00:19
Благодарил (а): 1 раз.
Поблагодарили: 10 раз.

Общий взгляд на Dojo Toolkit

Сообщение Telnov » 23 фев 2012, 19:40

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

Программирование, как область профессиональной деятельности, сейчас всё больше становится 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
В.Тельнов
Аватар пользователя
Telnov
Преподаватель
 
Сообщений: 324
Изображения: 5
Зарегистрирован: 05 сен 2011, 00:19
Благодарил (а): 1 раз.
Поблагодарили: 10 раз.

"Умный" футер для сайтов

Сообщение Telnov » 01 июн 2012, 00:35

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

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

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

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

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

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

Успехов вам!
Вложения
clever_footer.zip [166.34 KiB]
Скачиваний: 608
В.Тельнов
Аватар пользователя
Telnov
Преподаватель
 
Сообщений: 324
Изображения: 5
Зарегистрирован: 05 сен 2011, 00:19
Благодарил (а): 1 раз.
Поблагодарили: 10 раз.

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

Сообщение Telnov » 31 авг 2012, 05:16

Эта заметка написана в ходе подготовки нового курса "Специальные вопросы программирования" и может представлять интерес для студентов специализации. В курсе СВП, помимо прочего, изучаются технологии создания динамичных 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, имитируя всплывающие окна (которых на самом деле нет).
В.Тельнов
Аватар пользователя
Telnov
Преподаватель
 
Сообщений: 324
Изображения: 5
Зарегистрирован: 05 сен 2011, 00:19
Благодарил (а): 1 раз.
Поблагодарили: 10 раз.

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

Сообщение Telnov » 17 сен 2012, 02:22

При выполнении проектных заданий студентами магистратуры могут оказаться полезными виджеты типа "рыбий глаз". Например, с целью компактного представление графического и видео контента. Ниже приведен демонстрационный пример и дано краткое описание 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.
Пример работы виджетов в теле форума:


В.Тельнов
Аватар пользователя
Telnov
Преподаватель
 
Сообщений: 324
Изображения: 5
Зарегистрирован: 05 сен 2011, 00:19
Благодарил (а): 1 раз.
Поблагодарили: 10 раз.

Облачные технологии в высшем образовании

Сообщение Telnov » 13 окт 2013, 09:27

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

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

  • Самообслуживание по требованию, без явного взаимодействия с представителем поставщика услуг.
  • Универсальный доступ по сети, вне зависимости от используемого терминального устройства.
  • Объединение вычислительных ресурсов в единый пул. Поставщик услуг динамически распределяет ресурсы между потребителями в условиях постоянного изменения спроса.
  • Вычислительная эластичность. Услуги могут быть предоставлены, расширены, сужены в любой момент времени, без дополнительных издержек на взаимодействие с поставщиком услуг.
  • Автоматизированный учёт реального потребления услуг. Экономия на издержках, гибкость, масштабирование вычислительной системы.
Полностью читайте в блогах: Облачные технологии в высшем образовании. Аналитический обзор.
В.Тельнов
Аватар пользователя
Telnov
Преподаватель
 
Сообщений: 324
Изображения: 5
Зарегистрирован: 05 сен 2011, 00:19
Благодарил (а): 1 раз.
Поблагодарили: 10 раз.

Почему для вашего проекта может быть полезен Dojo Toolkit ?

Сообщение Telnov » 11 янв 2015, 10:39


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

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

В цепочке обсуждений проводятся сравнения с jQuery, ExtJS / Sencha Touch и YUI3.
В.Тельнов
Аватар пользователя
Telnov
Преподаватель
 
Сообщений: 324
Изображения: 5
Зарегистрирован: 05 сен 2011, 00:19
Благодарил (а): 1 раз.
Поблагодарили: 10 раз.


Вернуться в Вопросы программирования

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2