Статьи Новости Контакты

24.07.2008
Данил Динцис

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

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

Web 2.0. Интеграция сервисов
Рис. 1. Web 2.0. Интеграция сервисов

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

 Стартовая страница Popfly
Рис. 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
Создание 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.

Live Search mashup
Рис. 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
      Например, выберем шаблон PhotoPhlip. Задаем параметры: imageUrl, title, description, linkUrl, category. Укажем, что значения для первого атрибута поступают с выхода шаблона Image Scraper. Для остальных параметров можно указать как статичные значения, так и унаследованные от других машапов. Теперь можно встраивать на страницу своего сайта. Как это выглядит, можно посмотреть, например, на страничке автора.

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

      Возможности Popfly для разработчиков
      Также надо обязательно сказать о шаблонах, предназначенных для ведения бизнеса в Сети: поиск и размещение рекламы; поиск товаров и даже оформление онлайн-покупок. Правда, на данный момент практически все машапы такого рода ориентированы на eBay, Yahoo!, MSN.

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

      Popfly in Visual Studio 2008
      Рис. 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, а при необходимости и простой встроенный визуальный редактор, можно быстро и эффективно построить современное интерактивное веб-решение.




Скоро на сайте

  • Wordpress

    Серия статей о плагинах к движку WordPrress
  • AJAX

    Проекты и продукты, ориентированные на AJAX
  • Новые сервисы Google

    Обзор новых сервисов Google
 

Copyright © 2003—2018 Все права защищены

При использовании материалов сайта ссылка на hostinfo.ru обязательна

  • хостинг от .masterhost
  • Rambler's Top100