Popfly — cоздаем сайты в стиле Веб 2.0.

описание преимуществ и возможностей создания сайтов с использованием ресурса Popfly

Веб-решения — сайты, порталы — постепенно становятся привычной средой обитания огромного количества обычных людей, абсолютно далеких от компьютерных технологий. Вовлеченность пользователей позволяет многократно повысить эффективность сайта, привлечь внимание потенциальных клиентов. Для создания таких интерактивных сайтов требуется либо много времени работы квалифицированных программистов, либо использование «заготовок». Такие «кирпичики» — или mashup — предоставляет своим пользователям новый ресурс от Microsoft — Popfly. На самом деле Microsoft вывел в режим сервиса свою набирающую популярность технологию Silverlight. Popfly Mashups — это объекты Silverlight, которые реализуют простые функции в самых различных областях. Задав несколько параметров и соединив mashup стрелками, получаем простой, но очень мощный сервис, который можем встроить на свой сайт.

Рис. 2. Стартовая страница Popfly

Какие же «простые функции» реализованы в mashup. Ответ столь же прост — любые. Сервис постоянно развивается как со стороны Microsoft, так и сторонними разработчиками. На момент написания статьи на Popfly было представлено более 100 базовых блоков и бессчетное количество общедоступных машапов на их основе. Приведем перечень категорий, по которым сгруппированы блоки:

Display
Fun&Games
Images&Video
Local Information
Maps
News&RSS
Shops
Social Networks
Tools
Everything Else

На стартовой странице Popfly пользователь выбирает, что же он хочет создать: mashup, онлайн-игру или простую веб-страницу во встроенном редакторе (рис. 2). Здесь же можно посмотреть различные примеры, которые помогут очень быстро освоить создание собственных интерактивных компонентов.

Создание простого mashup

Рис. 3. Интерфейс создания машапа

Посмотрим, как предоставить посетителю вашего сайта возможности поиска на основе Live Search. Откроем группу Tools и выберем блок Live News. Для этого достаточно кликнуть по выбранному блоку или перетащить его на рабочее поле. Для задания параметров блока щелкаем по «гаечному ключу». В блоке Live Search устанавливаются такие параметры: тип операции (результат поиска или количество найденных страниц); поисковый запрос и количество отображаемых результатов. В принципе простейший поисковик уже готов. Однако гораздо полезнее дать пользователю возможность самому задавать условия поиска. Добавим блок User Input из этой же группы. Установим ему параметры: getText и зададим значение поля поиска по умолчанию. Теперь передадим пользовательскую строку поиска в блок Live Search. Это очень просто: протягиваем стрелку от выхода User Input на вход Live Search (рис. 3). Осталось указать блоку поиска, что строку надо считывать. Установим параметр query в значение user input. Проверим, как работает наш mashup, щелкнув по кнопке run. Наш инструмент поиска готов, осталось разместить его на страничке сайта. Сначала сохраняем mashup, даем ему имя и обязательно выполняем функцию Share. Для подключения на свой сайт осталось получить прямую ссылку на mashup в опции Link или код встраивания в опции Embed На рис. 4 показан результат создания нашего машапа: блок поиска на основе Live Search.

Рис. 4. Live Search mashup

Важно отметить, что в блок User Input можно передавать не только текст из поля ввода, но и данные, пересланные из другой страницы методом GET. ДЛя этого достаточно параметру Operations установить значение getQueryParameter.

Графика и мультимедиа

Создание динамичных страниц, насыщенных мультимедиа, становится совсем простым благодаря использованию Popfly mashups. Как правило, необходимо скомбинировать 2-3 готовых шаблона из разделов Images & Video и Display. Первые необходимы для поиска и выбора изображений или видео, а вторые — для формирования разнообразных, очень привлекательных способов отображения.

Начинать создание машапа для своего сайта надо с выбора элемента поиска. Например, воспользуемся Image Scraper. Во-первых, необходимо выбрать или создать страницу, на которой размещаются изображения. Затем указываем адрес этой страницы в атрибуте value параметра URL. Первый шаг выполнен. Теперь надо выбрать шаблон спецэффекта. Перечислим некоторые наиболее интересные:

Image Fader
MovingSlideshow
PhotoFlip
PhotoShow
PhotoSphere
PhotoTiles
Slideshow

Carrousel

imageUrl, title, description, linkUrl, category

Image Scraper

страничке автора

Элемент Carrousel — Карусель создает очень симпатичный эффект представления изображений. Загруженные изображения прокручиваются, как на настоящей карусели. Особенно эффектно карусель смотрится в полноэкранном режиме (рис. 4), для перехода в который надо щелкнуть по изображению монитора в правом нижнем углу машапа.

Возможности Popfly для разработчиков

Заслуживает упоминания группа разнородных машапов Tools. В основном в нее включены шаблоны, полезные для разработчиков. Например, RegExp — шаблон работы с регулярными выражениями. Combine позволяет объединять данные из различных источников. Text helper обеспечивает простые операции над текстовыми выражениями и строками. Его удобно использовать, в частности, при организации поисковых шаблонов. Для опытных разработчиков предусмотрено встраивание Popfly в виде пункта меню и окна Explorer в Visual Studio 2008 (рис. 5). Благодаря этому разработчик получает возможность непосредственно из окна своего проекта подгружать mashup свои и своих друзей, отслеживать обновления, получать консультации на форуме.

Рис. 5. Работа с Popfly в MS Visual Studio 2008

При создании интерактивных сайтов с использованием mashupв следует помнить, что пока еще Silverlight не получил такого распространения, как, например, Macromedia Flash. Поэтому не забудьте напомнить своим посетителям загрузить поддержку Silverlight с сайта Microsoft. Немаловажно, что как ресурсы самого popfly, так и созданные с использованием mashup сайты корректно функционируют не только в Internet Explorer, но и в Firefox, за исключением полноэкранных представлений. Safari mashup на данный момент не поддерживает.

Popfly — это мощный и одновременно очень простой инструмент создания интерактивных веб-ресурсов в духе Web 2.0. В результате, используя Popfly mashups, а при необходимости и простой встроенный визуальный редактор, можно быстро и эффективно построить современное интерактивное веб-решение.