Интернет-технологии для гражданских инициатив и некоммерческих организаций by Теплица социальных технологий

Интернет-технологии для гражданских инициатив и некоммерческих организаций

Теплица социальных технологий Москва, 2013

Интернет-технологии для гражданских инициатив и НКО – М., 2013. Агентство социальной информации

В этой книге собраны рекомендации по созданию сайтов и применению различных интернет-инструментов и сервисов для некоммерческих организаций и гражданских инициатив. Издание подготовлено в рамках проекта «Теплица социальных технологий». Материалы сборника составили статьи, опубликованные в 2012-2013 году на сайте Теплицы te-st.ru. В сборник вошел цикл статей веб-дизайнера Анны Ладошкиной, а также материалы редакции сайта. Редактор сайта – Дарья Алексеева. Теплица социальных технологий – общественный образовательный проект, созданный в 2012 году на базе Агентства социальной информации. Цель проекта – повышение квалификации представителей НКО и гражданских активистов в сфере использования интернет-технологий (ИТ) для социально ориентированной деятельности, а также вовлечение ИТ-специалистов в работу над социальными проектами. Тираж 999 экз. ISBN 5-901737-22-9

Оглавление Глава . Эффективный сайт некоммерческой организации.....................................................................5 1.1. Как донести идею.............................................................................................................................................. 6 1.2. Интерактивность..............................................................................................................................................16 1.3. Контактная форма своими руками................................................................................................................. 29 1.4. Контент-стратегия для веб: десктоп, мобильный, далее везде ................................................................. 39 1.5. Веб-шрифты .....................................................................................................................................................47

Глава 2. IT-инструменты для решения задач НКО .................................................................................. 58 2.1. Картирование .................................................................................................................................................. 58 2.2. Проведение опросов ..................................................................................................................................... 72 2.3. Редактирование фото-, видео-, аудиоматериалов...................................................................................... 78 2.4. Создание презентаций ................................................................................................................................... 89 2.5. Онлайн-менеджмент НКО ............................................................................................................................ 95 2.6. Почтовые рассылки ...................................................................................................................................... 106

Глава .

Эффективный сайт некоммерческой организации Анна Ладошкина

Часто стоящая перед нами проблема парализует нас своим масштабом, кажется настолько большой и всеобъемлющей, что не ясно, как к ней вообще подступиться. Одной из таких проблем иногда становится и создание сайта. Каким он должен быть? С чего начать? Как построить работу? Как не совершить ошибки? В своих статьях я ищу ответы на эти вопросы (хочется надеяться, что вместе с читателем). Мы локализуем проблему, дробим ее на отдельные задачи, выделяем критически важное и отбрасываем незначительное, изучаем чужой опыт (успешный и не очень), применительно к каждой задаче. И так постепенно, фрагмент за фрагментом, словно паззл, складывается эффективный сайт некоммерческой организации. Я очень хотела бы, чтобы таких сайтов становилось больше, чтобы владельцы их любили и заботились о них. Ключ к этому, на мой взгляд, в понимании. В основе создания сайта лежит не только фантазия дизайнера и умение

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

Анна Ладошкина

ЭФФЕКТИВНЫЙ САЙТ НЕКОММЕРЧЕСКОЙ ОРГАНИЗАЦИИ

1.1. Как донести идею Что делает некоторые сайты уникальными и запоминающимися? Цветовая гамма? Оригинальный шрифт? Красивые фотографии? Эти компоненты являются обязательными, но не первостепенными. Исходным началом всегда служит идея, именно она определяет миссию проекта, его стратегию и визуальную модель. Как от первоначальной мысли «нам нужен сайт» прийти к конечному результату, который будет не просто радовать глаз, но и распространять наши идеи?

Победа любит подготовку Путь к эффективному сайту начинается задолго до того, как мы вообще произнесём слово «дизайн» или проведём первую направляющую в Photoshop. Он начинается с формирования 6

Фрагмент сайта charity: water

чёткого представления о себе, проекте, его месте в окружающей действительности. Независимо от того, какими силами и средствами вы располагаете для создания сайта, есть единственный ингредиент, который решительно невозможно игнорировать – информация. Если на сайте нет информации, он бесполезен.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Если вы не знаете, какая информация должна быть на сайте, её не получится создать и представить, следовательно, сайт опять-таки будет бесполезен. Первые практические шаги должны быть направлены именно на создание информации о проекте – сначала для «внутреннего пользования», а потом и для публичного представления. Важ ное замечание: ничего не принимайте по умолчанию. Даже если какие-то вещи кажутся очевидными, фиксируйте их письменно. Не нужно создавать многостраничные стратегические планы или декларации, но вы удивитесь, насколько повысится эффективность работы всей команды, если ключевые идеи и цели будут изложены письменно по результатам совместного обсуждения. Итак, какая информация на самом раннем этапе проектирования нам необходима?

Миссия проекта или организации Перед тем как начать работу с аудиторией, необходимо осознание того, в чем конкретно вы хотите убедить пользователей. В процессе изложения миссии проекта (mission statement) такое понимание как раз и будет достигнуто. Несмотря на громкое название, миссия, по сути, представляет собой ответ на несколько «простых» вопросов: чего достичь? почему это важно? что мы делаем? Кажущаяся простота не отменяет фундаментального значения этих вопросов для всего проекта и сайта в частности. Сформулированные ответы на них – это тот критерий, которым мы будем руководствоваться в дальнейшем при выборе альтернативных решений и оценке результатов. Представление об аудитории Если сообщение безадресно, оно никогда не достигнет цели. Поэтому необходимо определить чётко, к кому мы обращаемся КАК ДОНЕСТИ ИДЕЮ

в первую очередь. Аудитория любого благотворительного проекта неоднородна по определению. Как минимум, можно выделить (с поправкой на специфику проекта) следующие основные группы: • те, кто нуждается в поддержке, которым будет оказана помощь в ходе реализации проекта; • кто оказывает поддержку проекту в той или иной форме; • волонтеры, принимающие непосредственное участие в работе проекта; • те, кто распространяет информацию о проекте в социальных медиа и СМИ; • представители государственных структур, общественных объединений, коллеги из других организаций. Необходимо составить описание каждой из перечисленных групп применительно к вашему проекту. Что из себя представляет типичный представитель каждой из групп? Какие у него 8

интересы? Как наш проект с этими интересами резонирует? Какая информация ему может потребоваться? В поиске ответов необязательно проводить дорогостоящие исследования, интервью или опросы. Достаточно систематизировать информацию, которой вы располагаете: ваш личный опыт и опыт коллег в общении, совместной работе, данные из социальных сетей. В конечном итоге выяснится, что вы уже знаете достаточно, чтобы составить «виртуальный» портрет пользователя. Как это делают другие? Любой благотворительный проект реализуется не в вакууме и его сайт – не единственный в своем роде. С одной стороны, проекту придется конкурировать за внимание посетителей с остальными ресурсами, с другой – придерживаться устоявшихся стандартов и стереотипов, чтобы быть интуитивно понятным и удобным.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Не нужно быть экспертом по пользовательским интерфейсам, чтобы посетить сайты других благотворительных организаций и проектов, сохраняя ссылки или скриншоты в списках«нравится» и «не нравится» (для этого можно использовать онлайн приложениями, такие как Gimmebar или Evernote). После того как количество ссылок в списках достигнет 20, будет сформировано общее представление о сайте: какие фрагменты интерфейса нужно использовать, а каких быть не должно. Источники информации и вдохновения можно искать на разнообразных сайтах-галереях и в иллюстрированных подборках, публикуемых в блогах и социальных сетях, например: • раздел сайтов некоммерческих организаций в галерее SiteInspire; • подборка сайтов некоммерческих организаций и проектов в блоге DesignM.ag; • подборка сайтов и полезных советов в онлайнжурнале Smashing Magazine.

Не стоит замыкаться на каком-то узком тематическом или региональном сегменте – изучайте работы дизайнеров и коллег из разных стран, даже если ваш проект не предполагает глобального масштаба.

Ключевые принципы изложения Последовательно, но без формализма проделав все вышеописанное, мы уже на данном этапе обладаем определенными представлениями о собственном проекте, его задачах и аудитории. Можно приступать к проектированию структуры сайта и разработке содержания для публикации. Это творческий процесс, который требует подробного рассмотрения на конкретных примерах. Можно выделить несколько ключевых аспектов, имеющих непосредственное отношение к задаче раскрытия идеи проекта. КАК ДОНЕСТИ ИДЕЮ

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

Язык изложения Для многих сайтов характерен излишний формализм, и, наоборот, излишняя фамильярность при обращении к своей аудитории. Руководствуясь информацией, полученной ранее, необходимо выбрать «верный тон» при создании всех текстовых материалов на сайте: от описания проекта до наименований пунктов меню, от заголовков последних новостей до призывов и обращений к посетителям. Язык сайта должен быть понятен аудитории и выражать при этом особенности проекта, его позицию в той области, где он реализуется.

Фрагмент сайта проекта Let’sbikeit

Фрагмент сайта фонда «Живой»

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

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

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

Фрагмент сайта charity: water

Фрагмент сайта Amnesty International КАК ДОНЕСТИ ИДЕЮ

воздействие оказывают изображения, кто-то воспринимает сообщения исключительно на слух и т.п. Отдельно хотелось бы остановиться на использовании фотоматериалов. Велик соблазн обратиться к фотосайтам в поиске «подходящих» изображений. Но не всякую найденную в Интернете фотографию можно опубликовать на собственном (пусть и некоммерческом) сайте. Большинство изображений защищено авторским правом, и если возможность их использования прямо не указывается (например, посредством публикации под лицензией Сreative Сommons), то такую фотографию «позаимствовать» нельзя. Кроме того, для репутации проекта будет куда лучше использовать собственные (оригинальные) фотографии, представляющие реальных людей, реальные объекты или события. Приглядитесь внимательно к своему окружению, в нем наверняка найдется как минимум один фотограф-любитель или даже профессионал, готовый организовать необходимые съемки. 12

Фрагмент сайта The Michael J. Fox Foundation

Практический инструментарий Какими же практическими инструментами изложения своей идеи мы располагаем, где на нашем сайте подходящее для этого место? Главная страница сайта Главная страница – центральный фокус всех материалов сайта, поэтому чрезвычайно важно, чтобы она была хорошо организована.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

•

Фрагмент сайта The Nature Conservancy

•

Правильная организация предполагает: наличие визуальной иерархии – на наиболее важных (с точки зрения миссии проекта, сформулированной в самом начале) элементах может быть сделан акцент за счет их размера и расположения;

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

Правильный подход к построению главной страницы помогает выражению нашей идеи, включая использование визуальных элементов, содержащих прямое указание на ценности и миссию проекта: логотип, призывы, девизы, изображения. Специальная страница Как правило, это страница типа «о нас», специально предназначенная для того, чтобы рассказать о себе, своём проекте, его участниках, КАК ДОНЕСТИ ИДЕЮ

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

Фрагмент «Ночлежки»

Фрагмент сайта РосКартель

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

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

• •

элементов, связанных с брендом проекта (логотип, девиз); виджетов (элементов интерфейса), содержащих информацию о проекте, внедряемых в структуру страницы; перекрестных ссылок в текстах; прямого упоминания в текстах, адресованных разным группам посетителей.

Фактор доверия Результативный показатель, который определяет эффективность ресурса – это доверие. В конечном итоге, все усилия по созданию и проектированию сайта благотворительного проекта или организации ставят приоритетной задачей вызвать доверие у аудитории и обеспечить постоянный контакт. В силу своей иррациональной природы доверие возникает (или не возникает) по причинам, не под-

дающимся формализации, и главная среди них – искренность. Нет измерителя искренности сайта, который бы показывался в отчетах Google Analytics, но все же можно выделить несколько косвенных критериев, которыми интуитивно руководствуется посетитель, оценивая тот или иной проект: • соответствие образа, создаваемого сайтом, сути и задачам проекта: сайт ночлежки для бездомных, выглядящий как гламурный журнал, не вызывает доверия; сайт «инновационного проекта», выглядящий так, как будто он сделан школьниками, не вызывает доверия. • раскрытие информации: сайт, на котором нет простой и понятной информации о направлениях деятельности, достигнутых результатах, открытых контактных данных, не вызывает доверия; • усилия, прикладываемые создателями сайта: сайт, который давно не обновлялся, содержит большое количество ошибок в содержании, верстке или программном обеспечении, не вызывает доверия. КАК ДОНЕСТИ ИДЕЮ

Особое внимание следует уделять мелочам, поскольку именно они определяют целое. Качественный сайт – это тот сайт, где царит гармония между всеми его элементами, заметная невооруженным взглядом. Именно такие ресурсы вдохновляют пользователей на общее дело.

1.2. Интерактивность Важнейший аспект, отличающий Интернет от всех других типов медиа, – интерактивность. Это понятие прочно утвердилось в нашей системе координат: небо – голубое, Земля – круглая, сайт – интерактивный. Но, как известно, от идеи до ее практического воплощения пролегает огромное расстояние, которое мы как раз и попытаемся сократить.

Фрагмент сайта Women’s Sport Foundation

Фрагмент сайта Samasource 16

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Что такое интерактивность Если рассматривать интерактивность в рамках работы сайта, ее сущность можно свести к ее главной функции – коммуникации. В процессе коммуникации сайт выступает посредником между своими создателями (компанией, организацией, сообществом, отдельным человеком) и посетителями. Соответственно, интерактивность сайта проявляется как реакция на какие-то действия пользователя в рамках предусмотренного сценария. Сайт поможет показывать или скрывать какую-то информацию в ответ на запрос пользователя, передавать авторам сайта сообщение от посетителя в той или иной форме, «принимать» и отображать комментарии или материал, добавленные пользователями. Интерактивность – неотъемлемое свойство любого веб-сайта, однако формы ее выражения варьируются от проекта к проекту. Большое значение имеет степень интерактивности сайта,

Фрагмент сайта Samasource

которая должна находиться в разумных пределах. Посетитель должен чувствовать возможность диалога и воспринимать материал позитивно, а в случае перезагруженности сайта велик риск создания негативного эффекта. Другим важным аспектом в деле использования интерактивных элементов является осознаваемая посетителем степень их «полезности». Когда интерактивный элемент является ИНТЕРАКТИВНОСТЬ

ответом на «тайное желание» пользователя (получить дополнительную информацию, выразить своей мнение, развлечься и т.д.), тогда он воспринимается как полезный, и удовлетворение от сайта в целом повышается. Когда же элемент не соответствует целям пользователя или, что еще хуже, мешает ему, тогда восприятие сайта в целом будет негативным. Например, главная страница сайта подростковой горячей линии Child Line не испытывает недостатка в интерактивных элементах. Однако отсутствие фокуса и четкой иерархии между ними создает путаницу и в целом оставляет пользователя в недоумении, какую же из предложенных альтернатив выбрать. Какие формы принимает интерактивность веб-сайта вообще и сайта некоммерческой организации в частности? Если не учитывать вебприложения, социальные сети, форумы, системы онлайн-коммерции и другие сложные формы интерактивности, можно выделить следующие, наиболее распространенные ее виды: 18

• Встроенное интерактивное содержание – это видео-, аудиоэлементы, флеш-игры, презентации, анимационные ролики и др., которые можно проигрывать прямо на сайте. Они «внедряются» в содержание веб-страницы, но самодостаточны по отношению к ней и содержат необходимые для управления элементы. • Интерактивные элементы интерфейса – это элементы, так или иначе «откликающиеся» на действия пользователя и в результате меняющие видимое содержание сайта. Простейший пример подобного рода элементов – это ссылка, изменяющая цвет при наведении на нее курсора. Но есть и более «сложные» элементы: вкладки, позволяющие переключаться между блоками содержания, слайд-шоу, модальные диалоги и др. • Получение информации от пользователей – это различные контактные формы, подписки, регистрации, опросы и т.п. При этой форме взаимодействия пользователь получает в ответ

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

уведомление о том, что его сообщение, адресованное организации или руководителям проекта, доставлено. • Прямая коммуникация и пользовательское содержание – это элементы, дающие возможность пользователям вступить в прямой диалог с представителями организации и/или авторами сайта или изменить содержание сайта, разместив на нем свою информацию. Наиболее типичные примеры: комментарии, системы вопрос-ответ, онлайн-чаты. Далее рассмотрим каждую форму подробно.

Встроенное интерактивное содержание Главным представителем этой категории является видео. Его преимущество заключается в том, что оно позволяет показать своим посетителям то, чего «не опишешь словами», а значит, еще больше увлечь, заинтересовать, донести идеи. Используя видео, можно создать более комфортные условия для той

части аудитории сайта, которая плохо воспринимает информацию посредством чтения (а таких среди интернет-пользователей все больше). Но есть и минусы. Во-первых, видео – это «тяжелый» материал, требующий для хранения и воспроизведения значительных ресурсов. Во-вторых, «встроенная» природа видео не позволяет быть уверенным, что устройство, на котором осуществляется просмотр сайта, способно к его воспроизведению. Практический выход из положения для сайтов с ограниченными ресурсами (а таковыми является большинство сайтов НКО) довольно прост. Можно использовать сторонние сервисы для публикации видео, позволяющие «встраивать» размещенные на них ролики в свои сайты. Самым популярным сервисом является YouTube, его использование в качестве стороннего видеохостинга позволяет решить большую часть проблем, связанных с демонстрацией видео на сайте. Подробные инструкции по использованию YouTube для публикации видеозаписей на своем сайте можно изучить в справочном центре ресурса. ИНТЕРАКТИВНОСТЬ

Можно привести массу примеров успешного использования видеоматериала для повышения интерактивности сайта: Girl Effect посредством видео позволяет подлинным историям девушек обрести «голос». В галерее MacArthur Foundation содержатся материалы по широкому кругу вопросов. Not For Sale использует видео, повествующее об истории организации, на странице «О нас». Видеогалерея сайта MacArthur Foundation

Видеогалерея на сайте Girl Effect 20

Not For Sale страница «О нас»

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Аналогичным образом (через сторонние сервисы) в страницы сайта могут быть встроены и другие типы интерактивного содержания: аудио – посредством Soundcloud, презентации – посредством Slideshare или Prezi, электронную брошюру – посредством Issuu.com.

Интерактивные элементы интерфейса

Главная страница The Nature Conservancy с интерактивными элементами

Приоритетная задача интерактивных элементов интерфейса заключается в том, чтобы сложное и многоуровневое содержание было представлено посетителю как небольшое количество альтернатив, из которых он мог бы выбрать необходимый ему вариант. The Nature Conservancy использует интерфейс вкладок для переключения между наиболее важными сообщениями (Top Stories), материалами для участников (For Members),

Интерактивная главная страница сайта «Ночлежка» ИНТЕРАКТИВНОСТЬ

Модальный диалог на сайте Here’s Life Africa

Интерактивная хроника Ford Foundation

интересными научными фактами (Cool Science). Тот же механизм вкладок используется для переключения между избранными материалами в заглавном информационном блоке. «Ночлежка» использует слайд-шоу с автоматической сменой слайдов для показа пяти топовых новостей с заставкой и заголовком. Here’s Life Africa использует модальные диалоговые окна для просмотра изображений в фотогалереях.

Ford Foundation превратил историю фонда в интерактивную хронику. Еще больше вдохновляющих практических примеров (не только с сайтов некоммерческих организаций) можно найти в галереях паттернов – устойчивых сочетаний элементов интерфейса: • PatternTap – большое собрание паттернов в дизайне интерфейсов веб-сайтов с возможностью выбора и сортировки по типам, стилям и пользовательским критериям.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

• UI-Patterns – сайт, целиком посвященный изучению и обсуждению интерактивных паттернов. • Yahoo! Design Pattern Library – собрание паттернов от Yahoo Использование подобных решений на сайте повышает степень его интерактивности и позволяет в то же время лучше и компактнее организовать содержание, делая сайт более удобным, а посетителя – удовлетворенным. Для практической реализации подобных интерфейсов необходимо хотя бы шапочное знакомство с HTML, CSS и JavaScript и хорошая библиотека «заготовок», например: • jQuery UI – собрание расширений для популярной JS-библиотеки jQuery, реализующее типичные интерактивные элементы современных веб-интерфейсов. • jQueryTools – собрание расширений для популярной JS-библиотеки jQuery, созданное разработчиками opensource медиаплеер Flowplayer.

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

Подписка на рассылку на сайте Girl Scout ИНТЕРАКТИВНОСТЬ

ция участников семинара или предоставление пользователям возможности подписаться на рассылку. Для подобных задач формы подходят лучше чем, например, сообщения по электронной почте, потому что при хорошем проектировании они не только обеспечивают пользователя информацией, но и позволяют собирать данные о посетителях. Симпатичная форма подписки на рассылку сайта Girl Scout позволяет получить необходимые данные и определить круг интересов подписчика.

Контактная форма на сайте UNECO

UNECO предоставляет посетителям возможность запросить дополнительную информацию о проекте посредством контактной формы, которая появляется во всплывающем модальном окне. Housing Works предлагает студентам, желающим принять участие в волонтерской деятельности, заполнить регистрационную форму. Amnesty International использует формы для сбора подписей под петициями и обращениями.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Форма сбора подписей на сайте Amnesty International

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

общения об ошибках, комментарии к полям ввода и т.п.). После этого генерируется специальный код, который необходимо разместитьна сайте в том месте, где должна располагаться форма. В качестве альтернативы на сайте можно указать специальную ссылку на страницу, представляющую форму (в том случае, если она слишком большая и сложная). Как правило, можно также настроить формат сообщения, которое отображается после отправки формы. Все данные, передаваемые через форму, накапливаются в системе и могут быть экспортированы в каком-либо общедоступном формате. Несколько примеров подобных сервисов: • Wufoo – онлайн-конструктор форм с большим объемом функций, темами оформления и встроенными аналитическими возможностями. Единственный его минус – отсутствие бесплатного тарифа для пользователей из России. ИНТЕРАКТИВНОСТЬ

• Формы GoogleDocs – конструктор форм в числе сервисов, дост упных пользователям GoogleDocs/Drive. Возможности оформления форм в этом случае несколько ограничены, но этот сервис полностью бесплатный. • 123 ContactForm – несмотря на название, этот симпатичный сервис обладает широким набором функций и позволяет конструировать формы для любых целей. На бесплатном тарифе можно разместить до пяти форм. Если сайт работает на WordPress, одной из самых распространенных в мире систем управления сайтом с открытым кодом, можно воспользоваться расширениями для создания форм на этой платформе. Два из перечисленных выше сервисов имеют собственные плагины для интеграции с WordPress (их использование предполагает регистрацию в системе): Wufoo Shortcode Plugin и 123 Contact Form for WordPress. 26

Существуют также и отдельные решения, созданные специально для этой системы. В частности, можно порекомендовать следующие (бесплатные) варианты: • ContactForm 7 • NinjaFormsLite • VisualFormBuilder

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

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

управления содержанием, в том числе и WordPress, уже имеют встроенную возможность комментирования), главные проблемы их использования носят вовсе не программный характер – это релевантность комментариев теме сообщения, под которым они расположены, их содержательная ценность и отсев спама. Если первые две проблемы находятся целиком и полностью в области «человеческого фактора», и успешность их решения определяется эффективностью усилий организации по построению своего сообщества (community building), то в борьбе со спамом могут помочь и программные решения, а именно, сторонние системы комментирования. Их преимущество состоит в более «умных» спам-фильтрах, которые постоянно обновляются командой разработчиков. В качестве дополнительных бонусов они также предлагают более широкие возможности авторизации пользователей для комментирования, возможности уведомления о комментариях и управления аватарами комментаторов.

• Disqus – одна из наиболее распространенных систем комментирования с широким набором функций и готовыми решениями для интеграции с популярными системами управления контентом (в том числе и с WordPress). • Livefyre – относительно молодой, но быстро растущий сервис с упором на более тесную интеграцию с социальными сетями (Twitter, Facebook и т.п.). Наличие комментариев уместно не на всех страницах сайта некоммерческой организации, и обычно НКО придерживаются традиционного подхода, вынося непосредственное общение в блоги (в которых комментарии как раз приветствуются) и социальные сети. Feeding America Blog работает на WordPress и использует встроенную систему комментариев. Kivi’s Nonprofit Communications Blog – блог, посвященный вопросам коммуникации ИНТЕРАКТИВНОСТЬ

Система комментирования Kivi’s Nonprofit Система комментирования Feeding America Blog

Communications Blog

и маркетинга для некоммерческих организаций, которые используют встроенную систему комментирования (Disqus). GirlScout’s Blog использует встроенную систему комментирования WordPress, визуальное оформление которой выполнено в собственном стиле сайта. В очередной раз следует сказать о важности изучения чужого опыта. Смотрите сайты, запоминайте лучшее и вдохновляйтесь.

Форма комментирования Girl Scout’s Blog

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

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

Ответ на этот вопрос вытекает из самой природы некоммерческой организации и, соответственно, сайта как такового. Любая НКО нуждается в контактах – нуждается в обращении тех, для кого она работает, в предложениях о партнерстве, в помощи волонтеров и т.п. Без этих контактов деятельность НКО вряд ли осуществима. В то же время сайт – это не просто способ информирования «общественности» о деятельности НКО, но также и средство поощрения к действию. После знакомства с сайтом у посетителя должно возникать желание действовать, и важная задача при построении сайта – предоставить ему такую возможность. Почему именно контактная форма? Мы ведь и так публикуем на сайте контактную информацию, телефон, e-mail, зачем нам еще какаято форма? Ответ на этот вопрос тоже довольно прост. У посетителя не всегда есть возможность немедленно воспользоваться другими контактными способами (неудобная ситуация, чужой компьютер, КОНТАКТНАЯ ФОРМА СВОИМИ РУКАМИ

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

Контактная форма на сайте Sprocket House

Не наносит ли контактная форма ущерба безопасности сайта? Вероятность того, что контактной формой воспользуются не по назначению, например, для рассылки спама, существует. И чем популярнее сайт, тем эта вероятность выше. Но разве это повод отказываться от таких нужных «добросовестных» контактов? А дело борьбы со спамом следует доверить спам-фильтрам. 30

Контактная форма на сайте Amazee Labs

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Контактная форма на сайте Alexander Wong

Контактная форма на сайте Foundry Collective

Достаточно привести несколько примеров, чтобы показать, насколько интересными в своем разнообразии могут быть контактные формы. Контактные формы на сайте могут иметь специальное назначение в тех случаях, когда они призваны обслуживать сбор информации по конкретной задаче, например, регистрация участников конференции или запись волонтёров для участия в акции. Но и в самом общем случае контактная форма позволяет, с одной стороны, посетителям сайта «проявить» свое желание в той или иной форме сотрудничать с организацией, а с другой – самой организации накапливать информацию о таких «заинтересованных» и обращаться к ней в случае необходимости. Однако простое наличие контактной формы еще не гарантирует того, что посетители действительно будут ею пользоваться. Чтобы добиться этого, необходимо обратить внимание на ее устройство и размещение. Какие факторы влияют на эффективность формы? КОНТАКТНАЯ ФОРМА СВОИМИ РУКАМИ

Состав требуемой информации В большинстве случаев простое решение оказывается самым лучшим. Не требуйте от посетителя слишком подробной информации – форма не должна содержать много обязательных полей. Опираясь на результаты исследования, проведенного маркетинговой компанией Hubspot, можно сделать вывод, что оптимальная контактная форма должна содержать три поля. Одно из них предназначено, собственно, для текста сообщения, содержание двух других может варьироваться, но призвано, так или иначе, идентифицировать отправителя сообщения. Большое значение имеет кнопка отправки формы. Удачным можно признать вариант, когда эта кнопка единственная (иногда в формы включают кнопку «очистить» или «отмена», но в данном случае они скорее запутывают посетителя) и содержит надпись, позволяющую легко определить ее назначение, например, «отправить сообщение». 32

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

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

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

Размещение и дизайн формы Наиболее логичное место для размещения формы – на странице с контактной информацией. Ее внешний вид должен соответствовать оформлению контактной страницы в целом. При этом необходимо следить за выполнением нескольких условий: • размер полей формы и размер шрифта текста в них должен быть достаточным, чтобы вмещать в себя необходимую информацию; • при попадании поля формы в фокус (например, когда в него ставится курсор) оно должно визуально «откликаться» на это действие, тем самым давая пользователю понять, что можно начинать ввод; • должно быть предусмотрено достаточно места для сообщения об отправке формы или ошибке. За иллюстрациями к сказанному можно обратиться к галереи Patterntap, которая содержит большое количество примеров визуального оформления контактных форм и контактных страниц. КОНТАКТНАЯ ФОРМА СВОИМИ РУКАМИ

Подтверждение отправки После отправки формы необходимо проинформировать посетителя о том, что его сообщение действительно передано. Наиболее простой способ – вывести на экран уведомление. Иногда осуществляется перенаправление посетителя на другую страницу с таким уведомлением, но подобные действия воспринимаются как неожиданные, и лучше использовать их в качестве «подстраховки», например, в случаях отключенного JavaScript. Приведем еще несколько примеров контактных форм: The Michael J. Fox Foundation представляет контактную форму вместе с остальной контактной информацией на отдельной странице, предлагая выбрать тему сообщения из выпадающего списка. Фонд «Предание» при отправке сообщения не требует от посетителя определять его тему, но с помощью указателей в верхней 34

Контактная форма на сайте The Michael J. Fox Foundation

Контактная форма на сайте фонда «Предание»

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Создание контактной формы для сайта на базе WordPress

Контактная форма на сайте The Michael J. Fox Foundation

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

Вооружившись всеми вышеизложенными полезными соображениями, попробуем самостоятельно создать форму для сайта, работающего на WordPress (популярной во всем мире системе управления контентом с открытым кодом). Для этого потребуется установить плагин, позволяющий создавать формы. В качестве простого и эффективного варианта выберем Contact Form 7. Этот плагин позволяет встраивать предварительно настроенные формы прямо в страницы (или записи) сайта. Информация, отправляемая посетителем через форму, пересылается на специально указанный e-mail. Установить плагин можно прямо из административной части WordPress. В разделе Плагины -> Добавить новый укажите в строке поиска название Contact Form 7 и затем в списке КОНТАКТНАЯ ФОРМА СВОИМИ РУКАМИ

Установка плагина Contact Form 7

предложенных вариантов выбрать опцию Установить для соответствующей позиции. После завершения установки активировать плагин, нажав на соответствующую ссылку. После установки плагина в административном меню появляется раздел Контакты (СF7). Редактировать формы в нем можно практически так же, как вы редактируете страницы или записи. Первая форма уже создана плагином по умолчанию, и вот ее-то мы и будем настраивать. 36

Экран редактирования формы содержит несколько областей. Подробнее об их назначении и доступных опциях можно прочесть в документации к плагину. Но общий принцип следующий: каждое поле формы представлено в виде специального кода (тэга), заключенного в квадратные скобки [ ]. Остальные элементы формы (подписи, подсказки и т.п.) форматируются с помощью стандартных тэгов HTML. Если вы совсем не знакомы с HTML, то, возможно, наступило время обратиться к нетленной серии «для чайников», а именно книге «HTML, XHTML и CSS для чайников», изданной на русском языке издательством «Диалектика», и прочесть хотя бы первые 140 страниц. Поверьте, и вы, и ваш сайт от этого только выиграете. Форма, создаваемая плагином по умолчанию, содержит четыре поля: имя, e-mail, тема, сообщение, кнопка «отправить». Каждое поле вместе с наименованием форматируется как отдельный блок с помощью HTML-тэга абзаца <p>...</p>.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Наименование поля отделяется от него HTMLтэгом перехода на новую строку <br />. Надо признать, это не самый лучший вариант разметки для формы (особенно с точки зрения доступности сайта), но он вполне дееспособен и может быть принят за основу. Исходя из того, что мы уже знаем, становится очевидным, что форма требует некоторой оптимизации. Поэтому убрать поле темы и изменим наименование кнопки на «Отправить сообщение». В нижней части

Разметка контактной формы – начальный вариант

формы мы также добавим небольшое сообщение, гарантирующее конфиденциальность передаваемой информации. Сохранив достигнутый результат с помощью кнопки «Сохранить», обратим внимание на раздел «Адресат». Он предназначен для настроек e-mailсообщения, которое будет отправляться с данными, собранными через форму. Указанные в нем параметры должны соответствовать параметрам формы, в противном случае часть информации может быть потеряна. Во-первых, необходимо проверить и изменить, если надо, адрес получателя e-mail. Имя отправителя формируется по шаблону в соответствии с полями формы. Так как из формы мы удалили поле темы, то в данном разделе в качестве темы необходимо указать какой-либо постоянный текст, чтобы иметь возможность идентифицировать сообщения, например, «Обращение через сайт». Аналогичные изменения необходимо произвести и в поле «Тело сообщения», позволяющем настраивать шаблон содержания отправляемого письма. КОНТАКТНАЯ ФОРМА СВОИМИ РУКАМИ

содержания страницы «Контакты». Вставленный код также можно сопроводить заголовком, например «Напишите нам».

Настройка шаблона e-mail-сообщения

Сохранив изменения, можно переходить к настройке уведомлений об отправке формы и возможных ошибках в разделе «Сообщения». Но для нашего случая и начальное их содержание можно признать вполне подходящим. Последний шаг, который нам необходимо предпринять для появления формы на сайте, – это копирование специального кода формы в верхней части экрана (выделен коричневым цветом) и вставка его в конец текстового 38

Вставка кода формы в текст контактной страницы

Полученный результат теперь можно увидеть, посетив страницу «Контакты» в основной части сайта. Для тестирования работы формы можем отправить пробное сообщение и убедиться, что оно благополучно добралось до назначения.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

1.4. Контент-стратегия для веб: десктоп, мобильный, далее везде При огромном многообразии возможностей общения со своей аудиторией современным некоммерческим организациям все труднее консолидировать и держать под контролем информацию, распространяемую по различным каналам и платформам. Как не потеряться в информационном море? Практическое решение заключается в разработке и внедрении эффективной контент-стратегии, о которой и пойдет речь. По данным исследования Google – Global Business Map – во многих странах мира по состоянию на начало 2012 года наблюдается 100%-е проникновение мобильной связи при значимой доле смартфонов в числе мобильных устройств. В России эта доля составляет порядка 25%, в США – порядка 44%. Кроме того, существенный процент мобильных устройств

(в том числе и смартфонов) используется для доступа в Интернет и веб-серфинга: в России – 28%, в США – 80%. Соответственно, рынок мобильных приложений в США переживает бум, приближаясь по своему объему к 5 млрд долларов. В России пока показатели существенно скромнее – наблюдается традиционный временной лаг в распространении передовых информационных тенденций и технологий. На фоне глобальной «мобилизации» населения проявили себя следующие любопытные тенденции: • Одновременность потребления различных видов медиа: результаты исследования компании Nielsen показывают, что порядка 80% владельцев смартфонов или планшетных компьютеров используют их во время просмотра телепрограмм, и порядка 20% таких пользователей делают это ежедневно. • Использование мобильных устройств для полноценного веб-серфинга: данные ресурса КОНТЕНТСТРАТЕГИЯ Д ЛЯ ВЕБ

•

mobiThinking о поведении пользователей мобильного Интернета в разных странах показывают, что последние весьма активно используют мобильные устройства для поиска самой разной информации: от спортивных новостей, до свежих скидок, от покупки горячих туров до финансовых и страховых услуг. Способ потребления веб-содержания: в отличие от серфинга на десктоп- устройствах, когда пользователи просто сканируют вебстраницы в поисках содержания, которое способно их «зацепить», на мобильных устройствах люди читают. С распространением электронных книг и таких сервисов, как Readability, Evernote, Pocket и др., сценарий «сохранить, чтобы почитать потом на мобильном» превратился практически в стандарт-де-факто. Мобильный Интернет = Интернет: постоянно растет число людей, использующих мобильный Интернет как основной способ веб-доступа. Процент таких пользователей

традиционно велик в странах Азии и Африки, но и в более консервативных Европе и Америке удобство подлинно «карманного» доступа постепенно формирует новые привычки интернет-аудитории. Более того, ширится и крепнет пласт пользователей, для которых мобильный Интернет является единственно известным и возможным, – у них нет (и возможно не будет) компьютера и/или их дом не оснащен (и возможно не будет оснащен) доступом к проводному Интернету. Мир вокруг нас меняется и меняется быстро. То, что сегодня кажется устойчивым и незыблемым, завтра превращается в хлам и становится никому не нужным. Есть сотни примеров компаний и организаций, которые были вынуждены прекратить свое казавшееся нерушимым существование только потому, что не смогли вовремя перестроиться и приспособиться к новым реалиям (к примеру, недавнее банкротство компании «Кодак»).

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Пользователи мобильного Интернета, не использующие другие виды соединений, по данным исследования Mobi Thinking

Мобильный Интернет – реальный проблеск будущего, ощутимый уже сегодня. Если вы отворачиваетесь от него, ваше место займут (если уже не заняли) более расторопные и предприимчивые охотники за пользовательским вниманием. И сколько бы мы потом не сетовали, что «молодежь не интересуется благотворительностью», изменить ситуацию будет трудно – трудно интересоваться тем, что отсутствует в твоем

информационном пространстве. И если между Angry Birds и домашним заданием по математике не окажется мобильного сайта вашей организации с интересным, полезным и удобным в использовании содержанием, то действительно ли в этом виновата «равнодушная молодежь»? Допустим, вы – убежденный сторонник мобильного Интернета и уже задумываетесь о создании мобильного сайта или приложения или даже предпринимаете какие-то практические шаги в этой области. А еще вы, наверное, задумываетесь о том, что нужно разослать пресс-релиз очередного события, подготовиться к участию в радиопередаче, куда вас пригласили в качестве гостя, разместить новости на сайте, «оживить» страничку на Facebook, закончить сценарий к новогодней видеопрезентации и не забыть про очередной выпуск ежемесячной рассылки. И где-то между всем этим временами маячит мысль: «Как все это можно успеть?» И еще одна мысль, которая, вероятно, посещает вас перед заседанием попечительского совета: «Какой в этом смысл?» КОНТЕНТСТРАТЕГИЯ Д ЛЯ ВЕБ

А теперь представим, что удивительный мир IT-технологии преподнесет нам очередной сюрприз в виде нового гаджета или нового медиаформата, в котором нужно будет присутствовать: наши материалы должны быть в часах у пользователя или в виртуальных очках, или мозговом импланте. И игнорировать все эти нововведения будет решительно невозможно, потому что ваша аудитория – там, ваши доноры и волонтеры – там, журналисты и государственные чиновники – там. И чтобы «достучаться» до них, необходимо присутствовать везде, искать эффективные и действенные пути коммуникации так, чтобы все эти разнообразные и разрозненные каналы распространения информации работали слаженно и эффективно, способствовали реализации миссии организации и достижению ее целей. Вам приходилось рубить дрова? Если целенаправленно и точно попадать топором в одно и то же место, постепенно углубляя разлом, то не уцелеет даже самое толстое полено. А если топор 42

все время попадает по разным местам, то все усилия пойдут впустую. То же самое происходит и в медиапространстве – если у вас нет единой и согласованной политики в этой области, все действия не дадут должного эффекта, несмотря на то, что вы очень стараетесь. Ответом на эти «вызовы современности» является набирающая обороты популярность такой дисциплины, как контент-стратегия, особенно в части ее применения к веб-проек-там. По определению Кристины Халворсон, которая и ввела этот термин, контент-стратегия – это «практика планирования создания контента, его подачи и управления». Логичным представляется вопрос о том, что такое содержание (контент) в принципе? Оставив в стороне философскую составляющую этого вопроса, сосредоточимся на прикладном аспекте: все, что сообщается от имени организации, вне зависимости от формы и размера, может быть классифицировано как содержание.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

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

•

• Цикл контент-стратегии, @foralien bureau

Аудит и анализ: перед тем как что-то менять и куда-то двигаться, необходимо понять, а где мы собственно находимся сейчас, что работает, а что нет, чего не хватает, а что излишне и т.п. Даже если организация только начинает свое информационное существование, этот этап нельзя сбрасывать со счетов – ей предстоит работать не в вакууме, а в сложившимся информационном пространстве, которое как раз и следует изучать. Планирование: на этом этапе и вырабатываются стратегические установки – каковы наши цели, как мы будем достигать их с помощью контента, какие ресурсы потребуются, как будем измерять результат. Тогда же разрабатываются и более оперативные (тактические) планы, связанные с практической реализацией принятых установок. Создание и публикация содержания: претворение в жизнь намеченного с постоянной координацией и корректировкой происходящего. КОНТЕНТСТРАТЕГИЯ Д ЛЯ ВЕБ

•

Управление: направлено на людей, занятых в деле создания и публикации содержания; включает также оптимизацию, проверку на актуальность, удаление устаревшего, исправление ошибок, оценку эффективности и т.п.

Реализация указанных этапов представляет собой итерационный, постоянно повторяющийся процесс. Однажды запустив его, мы будем находиться в постоянном движении, которое, как известно, – жизнь, и благодаря этому наши «содержательные» материалы будут меняться и развиваться в ногу со временем. При этом усилия организации, реализующей комплекс мер контентстратегии, концентрируются по следующим основным направлениям. Приведенная схема, предложенная агентством Bain Traffic, описывает структурные компоненты контент-стратегии. Что они означают? Корневая стратегия– стратегия, которая определяет, как посредством содержания организация будет 44

Квадрант контент-стратегии по методологии агентства Bain Traffic

реализовывать свои цели и отвечать запросам аудитории. Она задает направление для всех коммуникационных инициатив организации в долгосрочной

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

перспективе с тем, чтобы все они (как упомянутый выше топор) были согласованы друг с другом и вели организацию к единой намеченной цели.

Компоненты содержания: Состав – совокупность качественных характеристик содержания, темы публикаций, тон, содержащийся посыл, отстаиваемые ценности и т.п. Структура – определяет, как создаваемые материалыформатируются, организуются и отображаются (каналы публикации, форматы, метаданные, структуры ссылок и т.п.). Человеческие компоненты: Техпроцессы (workflow) – какова последовательность взаимодействия, какие инструменты используются для создания, управления и оптимизации содержания. Управление – каковы процедуры принятия решений, связанных с содержанием, возможности для появления новых инициатив, способы минимизации ошибок и рисков.

«Стоп-стоп, – думаете вы, – это все хорошо и интересно, но как это поможет мне сделать мобильный сайт?» Самым непосредственным и эффективным способом – ликвидировав содержательный хаос в своей организации, вы получите действенный механизм, который позволит создавать контент для любого канала, будь то мобильный сайт или страничка на Facebook, рекламная листовка или традиционная бумажная газета. Содержание – это львиная доля успеха. Даже лучший дизайнер в мире не сделает вам эффективного мобильного сайта, если у вас не налажен процесс создания содержания для него (более того, лучший дизайнер в мире именно об этом вас и спросит в первую очередь). Ну, и кроме того, вы будете хорошо подготовлены ко встрече с непредсказуемым будущим в лице мозговых имплантов и говорящих роботов. Обзор наработанных методик и инструментов контент-стратегии выходит за рамки настоящей статьи, однако некоторые практические шаги в этом направлении можно предпринимать прямо сейчас. КОНТЕНТСТРАТЕГИЯ Д ЛЯ ВЕБ

•

• 46

Когда дело касается работ, связанных с созданием и публикацией содержания, начните задавать вопросы – зачем мы это делаем? как это соотносится с нашими целями? как это резонирует с нашей целевой аудиторией? – и, конечно, искать на них ответы. При создании контента старайтесь максимально, насколько позволяют существующие средства, разделять форму и содержание. Ищите способы создания и хранения контента, которые позволят не зависеть от формата файлов, операционной системы, способа просмотра и т.п. Внедряйте эти способы в ежедневную практику работы и общения – перестаньте думать в формате документов Word, презентаций в PowerPoint и бюллетеней в PDF. Познакомьтесь с языком гипертекствой разметки HTML, особенно если до сих пор вы пользовались визуальным редактором для создания материалов для веб. Начните составлять план публикаций на месяц

вперед и придерживаться его, включайте в такой план все каналы (сайт, странички в социальных медиа, рассылки, пресс-релизы, выступления в прессе и т.п.), собирайте ответные даннын о том, как и какие материалы получили лучшие отклики, а какие остались незамеченными. • Проведите ревизию материалов, созданных «давно» – год, два, три года назад. Есть ли там что-то интересное и актуальное сейчас, подумайте, как можно было бы вдохнуть вторую жизнь в это содержание. Закончить беседу о контент-стратегии хотелось бы цитатой Данни Айни (Danny Iny), известного блогера, маркетолога и предпринимателя: «...необходимо осознавать, что задача заключается не просто в создании содержания, но в том, чтобы собрать свою аудиторию и контент – это всего лишь одна из частей этой работы, и вам также необходимо понять, кто является вашей

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

аудиторией, как найти ее участников и как доставить свое содержание до них – в противном случае, вы всего лишь рекламный щит в пустыне...»

1.5. Веб-шрифты Текст является главным способом передачи информации в Сети и, как следствие, одним из важнейших компонентов веб-сайта. Естественным и логичным при таком положении дел выглядит желание любого владельца сайта добиться того, чтобы его тексты были не только информативными и увлекательными, но еще и хорошо выглядели. Для этого современные технологии веб-дизайна и верстки предоставляют обширный арсенал инструментов. Сегодня мы поговорим о самом главном из них – шрифте. Шрифт – не просто декоративный элемент на сайте. Помимо утилитарной функции визуализации текста он играет эстетическую

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

Фрагмент сайта 826 Seattle

ВЕБШРИФТЫ

Фрагмент сайта Acumen Fund

Фрагмент сайта National Tank Truck Carriers

Теперь, когда положительный эффект, производимый красивыми шрифтами на веб-сайте, стал очевидным, возникает резонный вопрос «как использовать нестандартные шрифты на сайте?» Ключ к ответу на него лежит в понимании принципа работы компьютерных шрифтов. Компьютерный шрифт – это файл определенного формата, содержащий описание набора букв и знаков, который используется программой или операционной системой для отображения символов на экране. В этом определении содержатся несколько ключевых аспектов, которые потребуют внимания при работе со шрифтами на веб-сайте. 1. Файл определенного формата. Файл шрифта, чтобы его могла использовать программа, с которой мы работаем, должен быть определенного «известного этой программе» формата. Форматов компьютерных шрифтов существует несколько, что автоматически порождает проблему совместимости.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Все усилия по поиску и подбору шрифта сойдут на нет, если он не поддерживается программой, в которой просматривается текст. 2. Используется программой или ОС. Файл шрифта должен быть физически доступен системе, чтобы его можно было использовать для отображения текста. В условиях Интернета это – нетривиальная задача. Ведь сайт просматривается на множестве разных компьютеров, и мы не можем быть уверены, что на них есть необходимые шрифты. 3. Описание набора букв и знаков. Мы должны быть уверены, что шрифт содержит глифы, описывающие все символы в отображаемом тексте. Например, если пытаться отобразить русский текст с использованием шрифта, в котором отсутствуют кириллические глифы, то ничего не получится. 4. Применение для отображения символов. Необходимо иметь способ проинформировать программу, в которой осуществляется

просмотр текста, о том, какая именно его часть должна отображаться с использованием того или иного шрифта. Теперь, когда мы ясно видим перед собой проблемы, связанные с использованием шрифтов на веб-сайтах, давайте посмотрим, как современная веб-верстка справляется с их решением.

Поиск шрифта для веб-сайта Самая первая задача, которую необходимо решить, – найти, выбрать подходящий шрифт и убедиться, что: • он поддерживает нужный язык (в частности, русский); • лицензия шрифта допускает его использование на веб-сайте. В этом нам могут помочь различные онлайнбиблиотеки, содержащие как коммерческие, ВЕБШРИФТЫ

так и бесплатные шрифты, и предоставляющие средства их поиска, просмотра и тестирования. • MyFonts – крупнейшая онлайн-библиотека шрифтов, предоставляет удобную систему поиска с подробной информацией о каждом шрифтовом семействе и возможностью скачать или приобрести выбранные варианты. • Google Webfonts – библиотека свободно распространяемых шрифтов, созданная компанией Google. Все шрифты из данной коллекции могут быть свободно использованы на любых сайтах, при этом Google предоставляет простой интерфейс для их встраивания. • Adobe Edge Web Fonts – аналогичный сервис от Adobe, содержащий большой каталог свободно доступных шрифтов, средства поиска и тестирования, возможность встраивания в сайт. • free.type.org.ua – пополняемая коллекция свободно распространяемых шрифтов с поддержкой кириллицы. 50

Если в названии шрифта его кириллическая сущность не указана явно (например, Museo Sans Cyrillic), то, чтобы убедиться в поддержке русского языка, необходимо либо просмотреть таблицу содержащихся в нем символов, либо попробовать что-нибудь им написать. Некоторые онлайн-библиотеки предоставляют такую возможность, альтернативно можно использовать сервисы для тестирования шрифтов, например: • Typetester – тестирование и сравнение шрифтов путем просмотра тестового текста с настраиваемыми параметрами, такими как размер кегля, межстрочное расстояние и т.п. • Wordmark – простой сервис тестирования шрифтов, установленных на компьютере посредством отображения тестовой фразы, которую ввел посетитель. Шрифт можно использовать на сайте только в случае, если лицензионное соглашение (EULA), приобретенное у дизайнера или агентства, разрешает это.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Многие производители шрифтов (в том числе и кириллических, например, ParaType) предоставляют такую лицензию. В качестве альтернативы покупки веб-лицензии шрифта у отдельного агентства выступают сервисы встраиваемых шрифтов (Web Font Embedding Services). Они представляют собой удаленные библиотеки шрифтов, дающие своим клиентам возможность подгружать шрифты и встраивать их в свои сайты за некоторую абонентскую плату (обзор сервисов встраивания). Наиболее популярные среди них: • Typekit • Fontdeck.com • Fonts.com Однако все эти сервисы в силу своего происхождения ориентированы, в первую очередь, на зарубежный (использующий латиницу) рынок, и количество шрифтов, поддерживающих кириллицу, у них невелико. Цена же подписки на эти сервисы достаточно высока и может быть признана неоправ-

данной для отдельного некоммерческого проекта. Достойной альтернативой им служит использование свободно распространяемых шрифтов, например, уже упомянутых Google Webfonts или Adobe Edge Web Fonts, а также предоставляемых отдельными дизайнерами или агентствами.

Форматы шрифтов для веб Существуют несколько форматов десктопных и веб-шрифтов, по-разному проявляющих себя в отдельных системах и предназначенных для решения разных задач. Применительно к веб-сайтам нас будут интересовать следующие форматы: TTF – TrueType – формат компьютерных шрифтов, разработанный фирмой Apple в конце 1980-х годов, сейчас используется компаниями Apple и Microsoft в своих операционных системах. Файлы шрифтов имеют расширение .ttf. ВЕБШРИФТЫ

OTF – OpenType – формат файла шрифтов, разработанный совместно Microsoft и Adobe для применения в своих операционных системах. OpenType обладает большими по сравнению с TrueType возможностями допечатной подготовки и поддерживает больший набор символов при меньшем размере файла. Кроссплатформенность OpenType достигается за счет включения в один файл и Windows и Mac OS-версий данного шрифта. Файлы шрифтов имеют расширение .ttf или .otf. EOT – Embedded OpenType – компактный формат внедряемых в веб-страницы OpenType шрифтов, разработанный Microsoft. Файлы таких шрифтов обычно имеют расширение .eot. Формат Embedded OpenType проприетарный и поддерживается исключительно браузером Internet Explorer. WOFF – Web Open Font Format – формат сжатого шрифта OpenType или TrueType, представляет собой что-то вроде контейнера, который содержит оригинальные шрифты в формате OpenType или TrueType. При этом исходные 52

шрифты сжимаются для удобства передачи и сопровождаются рядом данных, которые может добавить разработчик шрифта. SVG – Scalable Vector Graphics – язык разметки масштабируемой векторной графики, с помощью которого можно описать и представление шрифта. Веб-сайты просматриваются посетителями с использованием различных браузеров, которые, в свою очередь, функционируют в различных операционных системах (Windows, Mac OS, Linux, Android, iOS и т.п.). Используя нестандартный шрифт, мы должны обеспечить его отображение в большинстве (в идеале во всех) случаях. Так как ни один из указанных вариантов не является полностью кросс-платформенным, придется использовать несколько форматов, чтобы решить эту задачу. Обычно рекомендуется иметь следующую комбинацию форматов для установки на сайт: TTF, WOFF, EOT, SVG. Имея шрифт TTF или OTF, можно конвертировать его, используя,

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

например, генератор Fontsquirrel – сервис позволяет загрузить шрифт и конвертировать его в необходимые форматы. Кроме этого, он генерирует код CSS, который можно использовать для последующей установки шрифтов на сайт. При использовании библиотеки Google или AdobeEdge можно не беспокоиться о форматах. Предоставляемый компаниями программный сервис определяет поддержку шрифта в большинстве случаев.

Встраивание шрифтов на сайт Сама возможность встраивания шрифтов для использования на сайте (подобно тому, как мы встраиваем изображения или видео) обеспечивается языком стилей CSS, который отвечает за оформление всех элементов на странице, в том числе и текста. Уже на ранних этапах развития этой технологии существовала возможность

указать, какой шрифт должен использоваться для отображения того или иного элемента. Однако при этом предполагалось, что указанный шрифт должен быть установлен на компьютере пользователя. Как вариант «страховки» на случай отсутствия конкретного шрифта существовала возможность задать несколько шрифтов в порядке «приоритетности» с тем, чтобы система последовательно выполнила поиск и использовала первый найденный вариант из списка. Такой подход породил концепцию безопасных для веб-шрифтов (websavefonts) – некоторого набора шрифтов, которые с большой долей вероятности установлены на компьютерах пользователей, так как входят в комплект поставки ОС или просто пользуются большой популярностью. Статистику «распространения» таких шрифтов можно увидеть с помощью сервиса cssfontstack. com, который также помогает сконструировать последовательность «страховочных» шрифтов для каждого из них. ВЕБШРИФТЫ

Соответственно, все возможности вебтипогра-фики того периода были сосредоточены в десятке шрифтов, которые входили в состав «безопасного» набора. Однако с развитием CSS появилась возможность «встраивать» шрифты в сайт, т.е. размещать файл шрифта вместе с другим содержимым сайта на сервере и ссылаться на него в коде шаблонов с тем, чтобы он загружался браузером при просмотре сайта и таким образом становился доступным для использования на компьютере пользователя. Это достигается с помощью директивы @fontface, она поддерживается большинством современных браузеров и все чаще используется на сайтах.Но и при ее использовании не следует забывать указывать «страховочные» варианты шрифтов, которые могут быть использованы в случаях, когда основной шрифт по какой-то причине оказался недоступным. Итак, встраиваем шрифт, расположенный на собственном сервере. 54

Рабочий экран генератора Fontsquirrel

1. Находим нужный шрифт в формате TTF или OTF, проверяем, поддерживает ли он нужный нам язык. 2. Используем генератор Fontsquirrel для конвертации шрифта в различные веб-форматы.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

3. Скачиваем создаваемый генератором @font-face-пакет, который включает в себя файлы шрифтов (их необходимо разместить на сервере, вместе с другими элементами шаблона) и заготовку @font-faceправила, которое необходимо разместить в самом начале файла стилей на своем сайте, убедившись, что пути к файлам шрифтов в нем указаны верно.

4. Указываем в стилях, к каким элементам должен быть применен встроенный шрифт с помощью регулярного CSS синтаксиса.

@font-face { font-familly: 'myfont' ; scr: url('myfont-webfont.eot'); scr: url('myfont-webfont.eot?#iefix') format('embedded opentype'), url('myfontwebfont.woff') format('woff'), url('myfontwebfont.ttf') format('truetype'), url('myfont-webfont.svg#myfont') format('svg'); font-weight: normal; fontstyle: normal; } Элементы к которым применен CSS стиль встроенного шрифта

СSS правило для применения шрифта к элементу текста

Наслаждаемся произведенным эффектом. Можем также несколько упростить себе задачу, используя сторонний сервис для загрузки шрифтов, например Google Webfonts. 5. Выбираем шрифт в библиотеке и проверяем, поддерживает ли он нужный язык. 6. В режиме «быстрого использования» выбираем необходимый нам вариант ВЕБШРИФТЫ

начертания и наборы символов, которые необходимо поддерживать. Чем больше вариантов мы захотим использовать, тем «тяжелее» файл шрифта и больше время его загрузки. Поэтому не выбирайте лишнего. 7. Копируем генерируемый системой код и вставляем его в код шаблона сайта между тэгами <head></head> перед другими ссылками на .css файлы. 8. Указываем в стилях, к каким элементам должен быть применен встроенный шрифт с помощью регулярного CSS синтаксиса так же, как и в предыдущем случае. Платой за возможность использования нестандартных шрифтов является падение производительности – сайт дольше загружается, ему требуется больше вычислительных ресурсов и т.д. Поэтому не рекомендуется использовать много нестандартных шрифтов на одной странице, а также применять их к основному тексту. 56

В завершении обзора практического использования веб-шрифтов на сайте – несколько подборок сайтов, отводящих веб-шрифтам ключевую роль: • 21 вдохновляющий пример веб-типографики (http://webdesignledger.com/inspiration/21examples-of-inspiring-typography-in-webdesign) • 55 примеров огромных шрифтов в вебдизайне (http://webdesignledger.com/inspiration/55examples-of-huge-typography-in-web-design) • 25 примеров сайтов, дизайн которых сфокусирован на типографике (http://designwoop.com/2012/08/25-examplesof-typographic-focused-web-design/) • 10 вдохновляющих примеров типографики в веб-дизайне (http://webdesign.tutsplus.com/articles/ typography-articles/10-examples-ofinspirational-typography-on-the-web/)

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Глава 2. IT-инструменты для решения задач НКО

2.1. Картирование Использование картографических проектов для обработки и распространения информации активно применяется в работе общественных организаций и НКО в тех случаях, когда необходимо наглядно и доступно представить какие-либо данные в привязке к их географическому расположению. Перечень таких ситуаций может быть очень широк: обозначение на картах зон экологического или стихийного бедствия, мест расположения источников воды и ареалов обитания редких животных, статистических данных о грамотности населения и т.д. Сегодня на выбор создателей проектов предоставляется множество картографических инструментов для реализации самых разных задач. Все они работают по схожим принципам, но отличаются по набору опций и методам редактирования данных. В данном разделе рассматриваются наиболее популяр58

ные и простые инструменты, с помощью которых можно без особого труда создать собственную карту и построить на ее основе проект.

Механизм работы картографических сервисов

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

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

те, где отмечаются дополнительные объекты, которые, в свою очередь, можно взять из базы данных. В качестве картографической основы выступают, как правило, Google Maps и OpenStreetsMap. В России также известен сервис Яндекс Карты, обладающий своими сравнительными преимуществами. Для эффективного использования картографических инструментов необходимо понимание различий между представленными сервисами. Google Maps Плюсы: • наиболее распространенная основа; • хорошо разработанныйAPI и множество плагинов; • простота в использовании; • хорошее покрытие по всему миру. Google Maps – это первый из созданных сервисов подобного типа, что предопределило во многом его огромную популярность. В числе его главных до-

стоинств можно отметить хорошо разработанный API, используемый для создания различных приложений, относительно хорошее покрытие и простота в использовании. Минусы: • проприетарная (несвободная) основа; • ограниченные возможности краудсорсинга. Потенциальной проблемой является отсутствие полных прав на созданную вами карту, если вы пользовались услугами Google Maps. В случае если Google начнет использовать рекламу на картах или установит ограниченный доступ, это прямым образом коснется пользователей сервиса. Существенным недостатком является отсутствие возможности использования краудсорсинга для нанесения данных на карту, что может стать решающим факторов при выборе сервиса для построения социального проекта. КАРТИРОВАНИЕ

OpenStreetMap Плюсы: • открытая и свободная основа; • большое сообщество, в том числе и в России; • наличие настраиваемых стилей оформления. OpenStreetMap – карта со свободной лицензией, построенная исключительно на краудсорсинге. Она открыта и принадлежит всем пользователям без исключения, что является главным ее преимуществом перед Google Maps. Минусы: • недостаточно документации; • проблемы, связанные с краудсорсингом (вандализм, недостаток информации, неполнота). Краудсорсинг выступает не только в качестве достоинства сервиса, но и является источником рисков: существует вероятность 60

нанесения на карту неактуальной информации, поскольку пользователя принимают участие в создании базы данных на добровольных началах и не несут никакой ответственности. Яндекс.карты Плюсы: • хорошо разработанный API; • хорошее покрытие в России; • простота в использовании; • наличие краудсорсинга («Народная карта»); • документация на русском языке. Яндекс.карты – это российский сервис, который по набору свих характеристик занимает серединное положение между Google Maps и OpenStreetMap. Наиболее он актуален в России, где значительна площадь покрытия, также в пользу его использования говорит относительная простота, наличие краудсорсинга и проработанный API.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Минусы: • проприетарная (не свободная) основа; • недостаточное покрытие по остальному миру. Как и Google Maps, Яндекс.карты не является свободной основой для построения собственного проекта, а площадь покрытия по остальному миру значительно уступает двум другим сервисам, хотя работа в данном направлении ведется.

Google Maps Engine Lite Google Maps Engine Lite – это бесплатный онлайновый сервис, который позволяет создавать свои собственные карты на основе cервиса Google Maps, загружать и редактировать различные данные, сохранять их и делиться с другими пользователями в сети Интернет. Для использования сервиса необходимо наличие учетной запись Google.

Большинство картографических инструментов, о которых пойдет речь, используют рассмотренные сервисы в качестве источников информации. Они бесплатны в использовании и подойдут даже неопытному пользователю. С помощью приведенных инструкций вы без труда разберетесь в механизме работы инструментов и сможете создать собственную карту. Механизм работы картографических сервисов

КАРТИРОВАНИЕ

1. После открытия главной страницы сервиса появляется окно с предложением создать новую карту или открыть уже существующую. Выбрав нужный вариант, вы увидите полотно карты, хорошо знакомое по онлайновому сервису Google Maps. Ее внешний вид можно выбрать из нескольких заранее установленных тем: вид со спутника, политическая карта, физическая и др. 2. Добавить свою информацию на карту можно с помощью специальной панели инструментов, расположенной поверх карты. Здесь есть выбор режима нанесения меток или линий, причем если начало нарисованной вами линии будет совпадать с ее концом, то получится полигональная область с однородной заливкой. Каждому объекту на карте можно дать название и соответствующее описание, а в настройках активировать отображение этих данных прямо на карте. Оформление нанесенных вами маркеров 62

Фрагменты интерфейса Google Maps Engine Lite

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

изменяется в самых широких пределах – от стандартного флажка с цифрой до информативных иконок разного цвета. 3. Обратите внимание, что при создании карты вы можете не только вручную отмечать нужные точки, линии и фигуры, но и загружать таблицы с геоданными для их последующей визуализации. Для удобной работы с большим количеством данных рекомендуется использовать несколько независимых слоев. После окончания размещения необходимой информации на карте необходимо дать ей имя и сохранить. Затем можно поделиться своей работой со всеми желающими, опубликовав ссылку на своем сайте или в социальных сетях. Google Maps Engine Lite – простой и доступный инструмент, с помощью которого пользователи практически любого уровня подготовки могут визуализировать важные данные

в привязке к картам и схемам местности. Сервис идеально подойдет для сбора, анализа и публикации информации в рамках гражданских акций и общественных инициатив. Map Box Картографический сервис Map Box отличается широтой своих опциональных возможностей, что делает его использование несколько сложнее. Приложение основано на базе свободного ресурса OpenStreetMap, составляемого пользователями по всему миру. 1. Для начала работы с сервисом необходимо пройти процесс регистрации. Затем заходим в свой профиль и щелчком по кнопке New Map запускаем редактор карт. В данном разделе необходимо указать название своей карты и заполнить ее описание, а также указать, какие инструменты управления будут отображаться (зуммирование (приближение и отдаление), подсказки, легенда). КАРТИРОВАНИЕ

Фрагмент интерфейса сервиса Map Box

2. Редактор карт имеет несколько вкладок, переключаясь между которыми можно получать доступ к опциям изменения внешнего вида карт. Их описание не займет слишком много места, да и разобраться с ними просто. Отметим лишь, что немного поэкспериментировав с настройками, вы сможете получить на выходе совершенно уникальную карту, наиболее полно отвечающую вашим требованиям.

3. После настройки дизайна вашей карты можно приступить к нанесению «точек интереса». Можно нанести неограниченное количество маркеров, выбираемых из обширной библиотеки сервиса, а также снабдить их названиями и описанием. Сервис Map Box отлично поддерживает кириллицу, так что все названия на карте и нанесенные маркеры будут понятны пользователям.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

4. По окончании редактирования и добавления своей информации на карту, нажмите кнопку Save для ее сохранения. Затем можно перейти по ссылке Embed и получить ссылки и код для встраивания своей карты в сайт или блог. Достаточно только скопировать небольшой фрагмент кода и вставить его в нужное место на своей странице. Есть так же возможность одним кликом опубликовать карту в Facebook и Twitter. Сервис Map Box подойдет как индивидуальным пользователям, так и общественным организациям, которые ищут функциональный инструмент для размещения в Интернете различной картографической информации. Бесплатная модель использования предусматривает наличие логотипа сервиса на вашей карте, ограничения по количеству просмотров и не предоставляет статистику использования.

Batch Geo Бесплатное онлайновое приложение Batch Geo может стать для вас настоящей находкой в том случае, если вы располагаете большим количеством табличных данных, которые необходимо отобразить в привязке к местности. Процесс ручного добавления каждой точки в Google Maps или Map Box довольно трудоемок и может занять продолжительное время, в то время как Batch Geo предоставляет все возможности для создания отличной интерактивной карты без кодирования и ручного перенесения данных. Для иллюстрации работы сервиса рассмотрим простой пример создания карты, отображающей расположение и основные сведения о городахмиллионерах России. 1. После того, как вы зашли на главную страницу сайта, откройте таблицу, в которой представлены имеющиеся данные. Сервис поддерживает экспорт данных из всех основных табличных редакторов, таких как Excel, КАРТИРОВАНИЕ

Фрагменты интерфейса сайта Batch Geo

Google Docs или Open Office Calc. Вы можете просто выделить нужные строки, скопировать их и вставить прямо на страницу сервиса. Более того, можно таким же образом вставить данные с любой веб-страницы. В нашем случае мы скопировали и вставили таблицу со страницы в Wikipedia. 2. Нажимаем кнопку «Подтвердить и установить опции». Здесь можно указать приложению на столбцы, содержащие нужные вам данные, если оно не смогло их распознать автоматически. Кроме этого, доступны некоторые дополнительные функции Batch Geo, например подсчет и отображение расстояний между точками на карте. 3. Нажимаем зеленую кнопку «Нанести на карту сейчас». После непродолжительной подготовки Batch Geo продемонстрирует вам готовый результат в виде карты с нанесенными на ней городами. При щелчке по каждому маркеру открывается подсказка, демонстрирующая дополнительные сведения.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

4. Для того чтобы сохранить результаты работы, нажмите на соответствующую кнопку внизу карты. В появившемся всплывающем окне вы можете настроить параметры публикации карты. 5. Если выбрать вариант «Публичный», то ваша карта получит свой собственный уникальный адрес в Сети, которым можно поделиться с друзьями и сотрудниками, отправить по электронной

Фрагмент интерфейса сайта Batch Geo, параметры публикации карты

почте или разместить в социальных сетях. Кроме этого, на указанный вами адрес электронной почты придет письмо, в котором вы найдете код для вставки в любой сайт или блог. Таким образом, с помощью Batch Geo всего за несколько минут и пару кликов мышкой можно создать интерактивную карту, содержащую всю информацию, имеющуюся в вашей таблице. Подготовка такой карты вручную заняла бы на порядок больше времени и усилий. CartoDB Одним из самых успешных и функциональных веб-приложений для работы с картами является разработка компании Vizzuality под названием CartoDB. Хотя проект запущен менее года назад, его возможности были по достоинству оценены и в настоящее время используются в работе Wall Street Journal, NASA и Программы ООН по защите окружающей среды. КАРТИРОВАНИЕ

Среди огромного количества разнообразных функций CartoDB можно выделить, прежде всего, следующие полезные свойства: Импорт данных в один клик

Можно загрузить свои данные, которые необходимо отобразить на карте, простым перетаскиванием файла на страницу сервиса CartoDB. Он распознает все наиболее распространенные форматы данных. Также можете указать веб-адрес, и сервис самостоятельно извлечет и обработает найденные там табличные данные. Представление информации в виде таблицы позволяет легко редактировать информацию и управлять отображением на карте. Настройка отображения ваших карт

Настроить внешний вид вашей карты можно во встроенном мощном редакторе, который позволяет использовать CartoCSS, специальные каскадные таблицы стилей для карт. CartoDB позволяет разместить данные 68

Фрагменты интерфейса сервиса CartoDB

в нескольких слоях на основе встроенной карты. Для этого используется Map Box, но можно выбрать и другого поставщика картографической информации, например Nokia или Google Maps.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

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

Возможности интеграции с базами SQL

CartoDB использует всю мощь PostgreSQL и PostGIS, что позволяет выполнять SQL-запросы данных. Это подразумевает поддержку всех основных и множества продвинутых пространственных операций, таких как создание и преобразование геометрии, перепроектирование, буферизация, обобщение, объединение и многое другое. Можно манипулировать своими данными так, как вам это необходимо. Это становится возможным благодаря SQL API.

Распространяйте ваши карты

Специальная библиотека CartoDB.js позволяет легко визуализировать ваши слои данных со всеми популярными картографическими фреймворками всего в несколько строк кода. CartoDB предоставляет встроенную поддержку для всех популярных платформ по умолчанию. Дополнительные опции публикации позволяют поделиться проектом в Twitter или Facebook, привлекая дополнительное внимание к вашей работе. КАРТИРОВАНИЕ

Мощная картографическая платформа CartoDB позволит вам легко создавать приложения и визуализации необходимых данных. Широкая функциональность, хорошо проработанный API-интерфейс для интеграции геопространственных данных в мобильные приложения, непревзойденная простота использования делают сервис CartoDB отличным выбором для применения в ваших проектах. Фрагмент интерфейса сайта Ushahidi

Ushahidi Ushahidi – универсальная платформа, которую можно использовать для создания самых разных краудсорсинговых проектов. Она проста в управлении и абсолютно бесплатна, благодаря чему стала незаменимым инструментом для организаций по всем миру, в том числе и в России. Ushahidi – открытый и бесплатный ресурс. Все, что вам потребуется для ее использования – это небольшое помещение, несколько компьютеров и группа из пяти-шести человек. Платформа 70

обеспечивает сбор больших объемов информации, поступающей из различных источников. Основной упор делается на SMS-сообщения, поскольку именно они изначально служили главным источником информации в стране, где малая площадь покрытия сети Интернет компенсируется феноменальной популярностью мобильных технологий. Помимо отчетов, в которых пользователи указывают статистические данные, приводят

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

различные факты, характеризующие то или иное событие, сервис собирает фото- и видеоматериал, который прикрепляется к соответствующей точке на карте. Ushahidi поддерживает различные опции, которые могут быть полезны для мониторинга ситуации. К ним, например, относится навигация по времени, благодаря которой можно анализировать только те события, которые произошли в указанный период. Главные достоинства Ushahidi, которые и объясняют ее мировой успех – это простота использования и универсальность, благодаря которым, ее с ловкостью можно подстроить под нужды конкретно вашего проекта. По словам создателей, установка Ushahidi покажется легкой прогулкой тем, кто уже использовал в своей работе такие программы, как WordPress и Drupal. Перед администратором стоят две главные задачи: приспособление сервиса под критерии конкретного проекта и проверка надежности

различных источников информации. Первая задача реализуется посредством выбора необходимых вам опций, которые подразделяются на три категории: характеристика домашней страницы, навигация и контактная информация. Руководителям проекта необходимо ввести название сайта, адрес, задать цветовые характеристики интерфейса, выбрать язык и т.д. Важным моментом является выбор типа карты,

Фрагмент интерфейса сайта Ushahidi

КАРТИРОВАНИЕ

которая будет положена в основу проекта. На выбор предоставляется четыре главных провайдера: Google Maps, Yahoo Maps, OpenStreetMap и VisualEarth. На этом этапе необходимо понимать главные отличия между этими ресурсами и сделать выбор в пользу наиболее подходящего для вас. Помимо этого, администратору необходимо определиться, как именно SMS-сообщения будут поступать непосредственно на саму платформу, какие категории отчетов будут отображаться на карте, выбрать тип формы для этих отчетов и многое другое. О том, как управлять платформой, подробно написано в специальной инструкции, которую можно скачать на официальном сайте. Там же можно загрузить и саму программу.

2.2. Проведение опросов Отличительной особенностью большинства гражданских инициатив и общественных организаций является то, что они в своей деятельности непосредственно связаны с различными категориями населения и своей основной целью ставят решение тех или иных запросов и потребностей общества. Важной задачей на пути реализации данной цели является сбор информации, который может осуществляться несколькими способами: социологические опросы, экзит-полы после выборов, обработка статистических данных и др. Современные технологии предоставляют массу возможностей для эффективного и быстрого выполнения подобных задач. Microsoft SkyDrive Microsoft SkyDrive – это простой и бесплатный сервис, с помощью которого любой пользователь без какой-либо подготовки сможет

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

быстро создать свой опросный лист. Для работы с приложением потребуется создать учетную запись в онлайн-службе Microsoft. Сделать это можно быстро и бесплатно. После этого можно зайти в свое облачное хранилище SkyDrive и приступать к созданию опроса. 1. Нажать на верхней панели инструментов кнопку Создать, а затем выбрать в меню пункт Опрос Excel. 2. Дать опросу название и нажать кнопку Создать. 3. Появится редактор содержания формы. Ввести тему опроса и его краткое описание. После этого приступить к формулированию требуемых опросов. 4. Можно создать анкету, содержащую любое количество пунктов. При этом рядом с каждым полем появляется всплывающее окно, в котором ввести текст вопроса, указать тип данных и настроить некоторые другие параметры. Также можно менять порядок следования элементов в опросном листе простым перетаскиванием.

Создание опроса в SkyDrive

ПРОВЕДЕНИЕ ОПРОСОВ

Создание опроса в SkyDrive

5. Для сохранения своей работы воспользуйтесь кнопкой Сохранить и Просмотреть в нижней части окна редактора. Если внешний вид и содержание опросного листа удовлетворяет, то остается опубликовать его нажатием на соответствующую кнопку. 6. Для публикации анкеты сервис генерирует специальную ссылку, перейдя по которой, любой желающий сможет заполнить анкету, при 74

этом вход в профиль SkyDrive не требуется. Можно разослать эту ссылку по электронной почте, опубликовать на сайте своей организации, распространить в социальных сетях или даже загрузить в мобильное устройство и проводить опрос на улице. 7. Где не заполнялась созданная вами анкета, все данные в режим реального времени будут передаваться и отображаться в виде обычной таблицы, которая сохраняется в вашем профиле SkyDrive. Можно открыть эту таблицу во встроенном веб-приложении Microsoft

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

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

Результаты опроса в виде таблицы Microsoft Excel Web App

Excel Web App или загрузить на свой компьютер для работы в обычном табличном редакторе. Отображение результатов опроса в форме таблицы позволяет с легкостью их обработать, проанализировать и представить в виде наглядных графиков и диаграмм, которые пригодятся вам при подготовке отчета о проведенном исследовании. В лице онлайн-сервиса Microsoft SkyDrive мы имеем простой, понятный и бесплатный способ буквально в считанные минуты подготовить

FormHub Создание опросного листа с помощью инструмента FormHub займет несколько больше времени, однако с его помощью получите возможность наделить анкету интерактивными вставками и использовать ее в работе мобильного приложения. 1. Для создания своего опроса с помощью системы FormHub необходимо сперва пройти процесс регистрации. После этого на указанный адрес электронной почты придет письмо для подтверждения. Затем предстоит заняться разработкой формы для проведения опроса. Сделать это можно в любом табличном редакторе. Для создания формы используется ПРОВЕДЕНИЕ ОПРОСОВ

Создание опросный формы с помощью FormHub

специальный язык XLSForms, с основами вы можете ознакомиться на официальном сайте приложения. 2. Когда сделан подходящий опросный лист, можно загрузить его в профиль на сайте. После этого он появляется в списке созданных опросов, его можно опубликовать в Сети в виде веб-страницы или сделать специальное мобильное приложение для смартфона. Обратите внимание, что опросный лист может содержать различные типы полей и даже интерактивные вставки – респондент может указать свое местоположение простым кликом 76

Создание опросный формы с помощью FormHub

по встроенной карте Google Maps. Особого внимания заслуживает способность опросника менять свою конфигурацию в зависимости от введенных человеком данных, позволяя, таким образом, создавать разветвленные анкеты сложной структуры. Для заполнения опросника не требуется постоянное подключение к Интернету – все введенные данные сохраняются на компьютере волонтера и после появления сети отправляются на центральный сервер.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

FormHub – это эволюционный шаг вперед от стандартных бумажных опросных листов. Благодаря этому инструменту исследование происходит гораздо быстрее и дает возможность собрать значительно больше разнообразных данных, анализ которых происходит практически в режиме реального времени по мере их поступления. Готовые итоговые таблицы могут быть легко обработаны и визуализированы в ваших отчетах и презентациях. Экспорт данных из FormHub

3. Собранные волонтерами данные можно легко экспортировать в одном из популярных табличных форматов или напрямую загрузить в Google Drive. Кроме этого, есть возможность просмотра и ана лиза результатов опроса в привязке к картографической информации о местах заполнения опросного листа с прикрепленными фотографиями.

ПРОВЕДЕНИЕ ОПРОСОВ

2.3. Редактирование фото-, видеои аудиоматериалов В главе «Эффективный сайт некоммерческой организации» была раскрыта тема медиаматериала и важности его использования в работе гражданских проектов. Сложно себе представить некоммерческий проект, который не использовал бы видеоролики или фотографии. Зачастую, это самый эффективный способ привлечь внимание аудитории и обеспечить информационное наполнение проекта. Полноценная работа общественных объединений и НКО невозможна без качественного программного и технического обеспечения, используемого для видеомонтажа, обработки аудиоматериалов, программ подготовки презентаций и т.д. Однако большинство профессионального ПО распространяется на платной основе и стоит недопустимо дорого для некоммерческой организации. В данном раз78

деле рассматриваются бесплатные приложения, с помощью которых вы сможете наполнить свой проект качественным и интересным медиасодержанием. OpenShot Video Editor OpenShot Video Editor – это свободный нелинейный видеоредактор с открытым исходным кодом для Linux, отлично сочетающий функциональность и простоту. С его помощью даже неопытный пользователь сможет отредактировать видеоряд, вставить эффекты и переходы, наложить субтитры и совершить другие операции, необходимые для получения качественного ролика. Несмотря на некоммерческий характер ПО, возможности программы впечатляют. Она включает в себя следующие функции: • поддержка большого числа видеоформатов; • интеграция с рабочей средой GNOME (поддержка drag and drop);

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

• • • • • • • • • • • •

поддержка мультитреков; все основные операции с видео – изменение размеров, обрезка, склейка и т.д.; предпросмотр в режиме реального времени; наложение видео, изображений, водяных знаков; наложение титров, в том числе и анимированных; наложение титров и субтитров с поддержкой SVG; монтажная лента с поддержкой перетаскивания; цифровое масштабирование; контроль скорости воспроизведения; наложение, микширование и редактирование звуковой дорожки; несколько десятков цифровых видеоэффектов; поддержка видео высокого разрешения (включая форматы HDV и AVCHD) и многое другое.

1. Установить программу можно из Центра приложений Ubuntu. Для этого просто введите название программы в строку поиска, а затем нажмите кнопку «Установить». После непродолжительного процесса загрузки и уста-

новки в гл а вном ме ню появитс я новый ярлык, с помощью которого запускается OpenShot. 2. Прежде всего, необходимо создать новый проект и добавить в него имеющиеся материалы, из которых будет создан ролик. Это могут быть видеофайлы, изображения, музыкальные треки и даже флеш-ролики. Сделать это можно как с помощью стандартного

Интерфейс программы OpenShot

РЕД АКТИРОВАНИЕ ФОТО-, ВИДЕО- И АУДИОМАТЕРИА ЛОВ

Интерфейс программы OpenShot

системного диалога открытия файлов, так и перетащив нужные элементы из окна файлового менеджера в окно OpenShot. При этом они появятся в левой панели программы на вкладке Файлы проекта. 3. После этого необходимо разместить картинки, ролики, звуковое сопровождение в нужном порядке на монтажной ленте. Она представляет собой область в нижней части окна программы. По умолчанию лента содержит две дорожки, но их количество можно легко увеличить для создания сложных проектов. Добавление нужных элементов на монтажную ленту и перемещение их между дорожками производится просто с помощью 80

Выбор переходов в программе OpenShot

перетаскивания мышкой. Чу ть выше монтажной ленты расположена небольшая панель инструментов, которая поможет разрезать клип на части, изменить длительность фрагментов и выполнить другие операции. Интерфейс программы организован очень логично, а самое главное – все внесенные изменения можно тут же увидеть в области предварительного просмотра. 4. После того как вы определились с основн о й с тру к т у р о й ф и л ьм а , р а з м е с ти л и и настроили д лите льность отде льных

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Выбор переходов в программе OpenShot

фрагментов, добавили звуковое сопровождение, можно приступить к оформлению визуального ряда. Для этого в программе существует множество переходов между фрагментами. Добавляются они перетаскиванием в нужное место на монтажной ленте. Кроме этого, в программе имеется набор фильтров. С их помощью можно добиться таких эффектов, как размытие, черно-белая пленка, мультфильм, инверсия, старое кино и др. Любой элемент на монтажной ленте легко отредактировать. Для этого

следует щелкнуть по нему правой кнопкой мыши и выбрать в контекстном меню строку Свойства. В окне появятся несколько вкладок, на которых можно изменить основные свойства данного фрагмента, в том числе его длительность, прозрачность, пропорции, звуковое сопровождение, а также добавленные визуальные эффекты. 5. Когда вы закончили работу над фильмом, просмотрели результат и получили удовлетворение от его качества, самое время поделиться плодами своего труда с широкой общественностью. Для этого в главном меню программы нужно найти пункт Файл – Экспортировать видео. Создатели программы позаботились об удобстве пользователя и сделали готовые шаблоны экспорта для самых распространенных вариантов применения. Можно экспортировать свой фильм в формат, адаптированный для

РЕД АКТИРОВАНИЕ ФОТО-, ВИДЕО- И АУДИОМАТЕРИА ЛОВ

пожалуй, не существует бесплатных аналогов, настолько удачно сочетающих в себе вполне профессиональные способности с легкостью их освоения и применения. Если необходимо в сжатые сроки подготовить ролик для презентации, интервью, отчет о проведенной акции или любой другой видеоматериал, то нужно воспользоваться возможностями этой программы – совсем скоро авторы обещают выпустить версии для Windows и Mac. Выбор настроек экспорта видео в программе OpenShot

Интернета, например, для загрузки в YouTube или для воспроизведения на различных бытовых устройствах, или для записи на DVD диск. Таким образом, нет нужды разбираться в многообразии форматов и кодеков, нужно только выбрать наиболее подходящий шаблон. Подводя итог, хочется отметить, что на сегодняшний день у видеоредактора OpenShot, 82

Popcorn Maker На смену обычным видеороликам постепенно приходит интерактивный видеоконтент, объединяющий видео, звук и веб-содержимое (ссылки, текст, карты, изображения и т.п.). Подобная интерактивная видеопрезентация может быть использована в качестве обучающего или демонстрационного ролика, мультимедийного отчёта и даже как объект нового цифрового искусства.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Попробовать себя в деле создания таких интерактивных видео можно с помощью специального онлайнового редактора Popcorn Maker. Это веб-приложение было разработано создателями популярного браузера Firefox в рамках инициативы Mozilla Webmaker, направленной на привлечение пользователей к созданию веб-контента. 1. Интерфейс онлайнового редактора покажется хорошо знакомым тем пользователям, которые когда-либо работали с программами для редактирования видео. Здесь точно также основное место по центру занимает область предпросмотра, внизу расположены дорожки видео, звука, текстовых надписей, эффектов и др. Обратите внимание на панель инструментов справа. Именно здесь сосредоточены основные возможности для добавления контента и настройки его отображения. Первым делом следует перейти на вкладку Media на панели инструментов и выбрать

Фрагмент интерфейса сервиса Popcorn Maker

видео, которое будете использовать в качестве основы проекта. Это могут быть ролики с Youtube, Vimeo, Soundcloud или любое HTML5 video. Достаточно просто указать ссылку. 2. Затем открыть вкладку +Events и добавить необходимые элементы в ролик. Выбор компонентов довольно велик: изображения, всплывающие окна, карта, текст, ссылки, статьи из Wikipedia и т.д. Достаточно выбрать необходимый компонент и перетащить его в нужное место на линии дорожек.

РЕД АКТИРОВАНИЕ ФОТО-, ВИДЕО- И АУДИОМАТЕРИА ЛОВ

Фрагмент интерфейса сервиса Popcorn Maker

3. В правой панели откроется окно свойств добавленного элемента, где настраиваются его основные характеристики и опции отображения. Таким образом, можно указать, в какой момент в видеоролике будут появляться добавленные изобра жения, ссылки или надписи, сколько они будут демонстрироваться, и что произойдет при щелчке по ним. Хотя Popcorn Maker и не является видеоредактором в чистом виде, у пользователей есть возможность некоторым образом 84

подправить процесс воспроизведения исходного ролика. Д ля этого существуют элементы Пауза, Перемотка и Циклическое воспроизведение. Расположив эти элементы в разных частях ленты, можно пропустить воспроизведение ненужных отрезков, заставить выбранный участок воспроизводиться повторно или поставить ролик на паузу. 4. После того как видеопрезентация будет готова, ее необходимо сохранить. После этого станут доступны опции распространения ролика в социальных сетях, код для встраивания в сайт или блог, прямая ссылка на страницу с работой, которую можно отос лать по электронной почте или опубликовать в Интернете. Popcorn Maker поможет вывести использование видеоматериалов в проектах на совершенно новый уровень. С ним можно добавить в ролик еще один информационный слой,

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

позволяющий более качественно и полно донести мысль до зрителей. Используйте новаторские функции этого сервиса для создания эффектных презентаций, интерактивных отчетов, мультимедийных иллюстраций к статьям. Free Audio Editor Free Audio Editor – это простой и функциона льный инструмент д ля записи, обработки и улучшения аудиофайлов. Программа является идеальным решением для редактирования аудио и мастеринга. Основное внимание при разработке программы было уделено наличию всех необходимых для работы со звуком функций, а также простоте и легкости использования. Для чего эта программа может быть использована гражданскими активистами, журналистами и независимыми репортерами? Вот лишь несколько возможных примеров: • запись, редактирование, обработка интервью; • подготовка аудиодорожек для презентаций,

Интерфейс программы Free Audio Editor

• •

видеороликов, мультимедийных отчетов; оцифровка культурного наследия, воспоминаний, архивных записей; создание рекламных и агитационных материалов.

При запуске программы нас встречает понятный интерфейс, выполненный в популярном сегодня «ленточном» стиле. Если вы работали с последними версиями MicrosoftOffice, то без труда разберетесь с главными органами управления и меню.

РЕД АКТИРОВАНИЕ ФОТО-, ВИДЕО- И АУДИОМАТЕРИА ЛОВ

Все рабочие инструменты расположены в логичном и удобном порядке. Слева находится панель быстрого доступа к самым востребованным операциям под названием Command Bar. При необходимости ее можно перенести на правую сторону или скрыть, чтобы увеличить область редактирования. Основное место в окне программы занимает область редактирования загруженного трека, представленного в виде волновой структуры, а сверху находятся панели инструментов. После знакомства с внешним видом и органами управления Free Audio Editor можно перейти к обзору основных функций программы. Одной из самых востребованных из них является оцифровка старых компакт-кассет, виниловых дисков или видео, так что после обработки они смогут быть записаны на компакт-диск или сохранены на жесткий диск компьютера в цифровом виде. 86

Панель эффектов Free Audio Editor

С помощью Free Audio Editor можно легко редактировать записи. Это программное обеспечение представляет собой полнофункциональный профессиональный звуковой редактор для Windows. Он позволяет создавать и редактировать музыку, голосовые и другие аудиозаписи. При редактировании аудиофайлов можно вырезать, копировать, вставлять части записи и добавлять эффекты, такие как эхо, усиление и снижение уровня шума. Огромный набор встроенных звуковых эффектов, разбитый по категориям, позволяет придать вашим трекам нужный оттенок и звучание. Из необычных возможностей можно отметить функцию преобразования текста в звук с последующим редактированием. В качестве источника используется голосовой движок MS Windows, но можно найти в сети, скачать

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

и подключить к программе другие голосовые модули, в том числе и русскоязычные. Большим достоинством аудиоредактора Free Audio Editor является дружелюбное отношение к пользователям программы. Понятный красочный интерфейс не вызывает сложностей даже у новичков в области работы со звуком, а отличное справочное пособие и видеоруководства помогут использовать весь потенциал этого программного обеспечения. Бесплатный аудиоредактор Free Audio Editor станет надежным помощником при подготовке необходимых аудиоматериалов для ваших проектов. К его неоспоримым достоинствам можно отнести отличную функциональность, простоту, стабильность и высокую скорость работы даже с объемными файлами. Недостатком можно считать отсутствие возможности сохранять работу в звуковых форматах, отличных от WAV, однако в Сети выложено достаточное количество инструментов для конвертации

аудиофайлов в любой нужный формат, поэтому больших трудностей у пользователей возникнуть не должно. Скачать программу Free Audio Editor можно на сайте разработчиков. Программа совместима с 32-разрядными и 64-разрядными версиями операционной системы Windows. Thumba Thumba – это онлайновое приложение, которое превращает ваш браузер в полноценный графический редактор. В отличие от большинства аналогичных инструментов, работающих с использованием технологии Flash, этот редактор построен на Microsoft’s Silverlight, что весьма положительно сказалось на его быстродействии. Практически все окно приложения занимает область редактирования, и только сверху расположено меню, содержащее доступные команды и инструменты. Начать работу можно

РЕД АКТИРОВАНИЕ ФОТО-, ВИДЕО- И АУДИОМАТЕРИА ЛОВ

Фрагмент интерфейса редактора Thumba

как с редактирования уже готового снимка, загруженного с компьютера, так и создав чистый лист нужного размера. С загруженным изображением можно произвести такие базовые операции, как изменение размера, кадрирование, поворот, зеркальное отображение и т.д. С помощью редактора можно изменять настройки контрастности, яркости, гаммы, цветового баланса, экспозиции и других характеристик снимка; действия производятся как в ручном, так и в автоматическом режиме. 88

Фрагменты интерфейса редактора Thumba

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Особый интерес у пользователей может вызвать меню Effects, где находятся эффекты и фильтры, которые можно применить к своему изображению – в общей сложности их насчитывается здесь около шестидесяти штук. Онлайновый редактор Thumba отлично подойдет пользователей, которым необходимо срочно подредактировать фотоматериалы перед публикацией, но никаких специальных профессиональных программ под рукой не имеется. Им понадобятся только компьютер с подключением к Интернету, и буквально через минуту этот инструмент готов к работе. Если надо использовать Thumba и в оффлайне, то можно установить его на свой компьютер или мобильный телефон (Windows Phone 7, iPhone) как обычное приложение.

2.4. Создание презентаций Активисты гражданских движений и сотрудники НКО довольно часто сталкиваются с необходимостью создания различных презентаций. При анонсировании нового проекта или будущих мероприятий, освещения своей деятельности или подведения ее результатов презентация является эффективным и популярным способом донесения информации до широкого круга пользователей в просто и понятной форме. Существует большое количество программ и сервисов, позволяющих быстро сделать информативную презентацию. Соответствующие инструменты присутствуют и в популярных офисных пакетах, таких как Microsoft Office и OpenOffice, однако их возможностей может оказаться недостаточно. Рассмотренные далее сервисы бесплатны в использовании и подойдут для реализации любых задач при создании презентации. СОЗД АНИЕ ПРЕЗЕНТАЦИЙ

SlideRocket SlideRocket представляет собой интернетплатформу, с помощью которой пользователи могут создавать, редактировать, совместно использовать и публиковать презентации. Созданные в SlideRocket проекты имеют целый ряд особенностей и преимуществ перед обычными традиционными презентациями. Так, в один клик вы сможете опубликовать свою работу в Интернете, отслеживать статистику просмотров в режиме реального времени и даже обеспечить интерактивный контакт с аудиторией. Для начала работы с веб-приложением SlideRocket необходимо создать учетную запись. Для этого можно воспользоваться обычной процедурой регистрации или войти с помощью своего аккаунта в Facebook или Google. Главное окно приложения разделено на несколько разделов, переключение между которыми производится с помощью ссылок на верхней панели инструментов. 90

Фрагмент интерфейса сайта SlideRocket

В разделе Presentations вы можете видеть все презентации, которые вы сделали самостоятельно или в создании которых вы принимали участие. Раздел Slides содержит слайды, сохраненные для применения в будущих проектах. На странице Media хранятся все медиафайлы, которые вы использовали для конструирования презентаций, в том числе иллюстрации, элементы оформления и аудиофайлы звукового сопровождения. Раздел Themes содержит темы оформления, которые вы можете использовать в своих проектах.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Фрагмент интерфейса сайта SlideRocket

Обратите также внимание на страницу Templates, содержащую блестящие примеры презентаций, созданных с помощью SlideRocket. Здесь можно не только поучиться, но и выбрать одну из представленных работ в качестве шаблона. Начать работу над презентацией можно несколькими способами. Во-первых, можно сделать новую презентацию с «чистого листа», для чего следует нажать кнопку New. Во-вторых, можно загрузить созданную в PowerPoint или Google Docs работу и приступить к ее редакти-

рованию. И третий, самый быстрый вариант – это выбрать один из предлагаемых сервисом шаблонов и наполнить его своим содержанием. Окно редактора SlideRocket состоит из области отображения текущего слайда и расположенных по краям инструментальных панелей. Слева расположена панель вставки текстовых блоков, рисунков, видео, диаграмм, таблиц и других материалов. Снизу – лента слайдов, на которой мы можем создавать, перемещать, дублировать, удалять и совершать другие операции со слайдами. Правая широкая панель инструментов служит для настройки и редактирования свойств выбранного в данный момент элемента. Также можно записать на диктофон комментарии к слайдам, и они будут звучать во время просмотра презентации. Процесс создания презентации в SlideRocket можно описать следующим несложным алгоритмом. Сначала вы добавляете слайд и задаете его внешний вид и эффекты перехода. СОЗД АНИЕ ПРЕЗЕНТАЦИЙ

Фрагмент интерфейса сайта SlideRocket

Затем на слайде размещаются нужные вам элементы и настраиваются опции их отображения в презентации. Затем переходим к следующему слайду и так далее до тех пор, пока не получится полноценная история. В любой момент можно просмотреть свою работу, запустив предпросмотр презентации. Если необходима помощь, то есть возможность пригласить своих коллег к совместной работе над проектом. Когда презентация примет законченный вид, не забудьте ее сохранить с помощью команды Save. 92

Теперь можно поделиться результатами своей работы со всеми желающими. Для этого следует опубликовать ссылку на специальную страницу с вашей презентацией или получить код для вставки в свой сайт или блог. Таким образом, за короткий отрезок времени вы можете сделать эффектную презентацию вашей гражданской инициативы или общественной организации. Благодаря использованию SlideRocket ваша презентация будет выглядеть современно, у вас всегда будет возможность дополнить данные, не загружая файл, а пользователи получат доступ к вашей работе при подключении к Сети. Reveal.js Презентация, созданная при помощи сервиса Reveal.js, не потребует никаких дополнительных программ или сервисов и может быть воспроизведена практически в любом браузере.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Reveal.js представляет собой JS-платформу, состоящую из небольшого javascript-файла и двух таблиц стилей. В первой из них описывается основное оформление, а вторая содержит разметку стандартного шаблона, который можно изменять по своему усмотрению в самых широких пределах. От этого шаблона зависит внешний вид таких элементов, как текст, изображения, ссылки, фон и др. Таким образом, можно задать содержание и вид любого слайда, входящего в состав вашей презентации. Разметка слайдов презентации реализована при помощи специальных HTML5-элементов типа SECTION. Выглядит это примерно следующим образом: <div class="reveal"> div><section><p>Folie 1</p></section><section><p>Folie 2</p> </section></div></div> Разметка слайдов презентации

Пример работы презентации Reveral.jst

Для управления воспроизведением презентации используются навигационные клавиши на клавиатуре. С помощью стрелок вправо-влево можно перемещаться между слайдами одного уровня, с помощью стрелок вверх-вниз - к слайдам второго уровня соответственно. Нажатие клавиши ESC позволяет просмотреть уменьшенные изображения всех слайдов, где можно одним щелчком мыши СОЗД АНИЕ ПРЕЗЕНТАЦИЙ

Пример использования сервиса создания презентаций rvl.io

переместиться к нужному месту презентации. Если вам не хватает практических знаний или просто не хочется писать вручную код, то всегда можно воспользоваться онлайновым редактором Rvl.io, который поможет создать презентацию на Reveal.js пользователям любого уровня подготовки. Благодаря этому сервису вы получаете возможность создания довольно сложных и эффектных презентаций, размещения их в Сети и просмотра в браузере, в том числе и на мобильных устройствах. 94

Окно настроек презентации в rvl.io

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

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Общие свойства презентации, в том числе темы оформления и эффекты переходов между слайдами, настраиваются во всплывающем окне, появляющемся после нажатия кнопки Settings. Когда презентация полностью готова, не забудьте сохранить ее нажатием на кнопку Save. После этого можно опубликовать работу в Сети или экспортировать в виде готового набора htmlстраниц для вставки в ваш сайт. Reveal.js – это отличная платформа для создания браузерных презентаций достойного качества. Её возможности уступают специализированным программным решениям, однако это компенсируется простотой, универсальностью, отличной скоростью, бесплатностью сервиса и отсутствием необходимости устанавливать на свой компьютер дополнительное программное обеспечение.

2.5. Онлайн-менеджмент НКО Не так давно для обеспечения работы интернет-проекта, общественной организации, НКО или информационного ресурса требовалось офисное помещение, оснащенное компьютерной техникой. Сегодня, благодаря переходу большей части рабочих процессов в онлайн-среду, многие проекты обслуживаются удаленными сотрудниками, в связи с чем возникает потребность в соответствующих инструментах для организации их работы. Рассмотренные далее сервисы бесплатны и могут использоваться для решения самых разных задач в области онлайнменеджмента. Google Drive Изначально появились несколько отдельных сервисов компании Google, которые позволяли редактировать текстовые документы и таблицы прямо в браузере. Затем к ним были добавлены ОНЛАЙН-МЕНЕДЖМЕНТ НКО

средства создания презентаций и работы с рисунками, после чего все сервисы были объединены в один онлайновый офисный пакет под названием Google Docs. В апреле 2013 года компания произвела глобальную модернизацию этого продукта, добавив к нему возможность облачного хранения и синхронизации своих данных между разными компьютерами. Новый сервис получил название Google Drive, под которым существует и по сей день. Создание и редактирование документов Документы Google – это онлайновый офисный пакет, предназначенный для создания и редактирования текстов, таблиц, презентаций, схем, диаграмм, рисунков и работы над ними вместе с другими пользователями в режиме реального времени через Интернет. Таким образом, можно получить доступ к своим документам и файлам с любого компьютера, если он подключен к Сети. 96

В сопроводительной документации обозначены следующие функции текстового редактора: • создание новых документов или загрузка уже существующих файлов во всех распространенных офисных форматах; • оформление и форматирование документов с применением таких возможностей как поля, стили, интервалы, шрифты и др.; • приглашение других пользователей для совместной работы над документом с предоставлением им прав на редактирование, добавление комментариев или просмотра; • совместная онлайн-работа в реальном времени с возможностью общения с соавторами в чате; • просмотр истории изменений документов и возврат к любой версии; • перевод документов на другой язык; • возможность распознавания текста из PDF и графических файлов; • отправка документов другим пользователям по e-mail в виде прикрепленных файлов.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

• •

Фрагмент интерфейса сервиса GoogleDrive

С помощью табличного редактора Google можно создавать и редактировать таблицы, предоставлять к ним совместный доступ. Вот список некоторых возможностей этого сервиса: • импорт и преобразование данных в форматах XLS, CSV, TXT и ODS; • экспорт файлов в форматах XLS, CSV, TXT, ODS, PDF и HTML; • форматирование и изменение формул для вычисления результатов и представления данных в нужном виде; • совместная работа и общение в чате с другими

пользователями, редактирующими таблицу; создание диаграмм и гаджетов; встраивание таблиц и отдельных листов в блог или на веб-сайт.

Работа любой организации или фонда немыслима без проведения различных докладов, лекций и презентаций. Для их подготовки существует специальный продукт Google. Ниже перечислены некоторые из его возможностей: • общий доступ к презентациям и их редактирование совместно с друзьями и коллегами; • импорт и преобразование презентаций в форматах PPT и PPS; • загрузка презентаций в виде файлов в форматах PDF, PPT и TXT; • вставка изображений и видео, форматирование слайдов; • публикация и встраивание презентаций в вебсайты для предоставления доступа к ним большому количеству пользователей. ОНЛАЙН-МЕНЕДЖМЕНТ НКО

Фрагменты интерфейса сервиса GoogleDrive

Хранение данных Для хранения всех созданных или загруженных данных компания Google совершенно бесплатно выделяет 5 Гб. Учитывая то, что офисные файлы имеют, как правило, небольшие размеры и то, что при этом файлы в форматах Документов Google вообще не учитываются при подсчете, получается вполне достаточное дисковое пространство даже для большого проекта. Таким образом, пользователь получает удобное файловое хранилище, все данные в котором могут быть доступны с любого устройства, имеющего выход в Интернет. Можно делиться своими файлами с коллегами и друзьями, предоставляя им различные уровни доступа – от просмотра до полноценного редактирования. Для удобной организации файлов в своем хранилище существует возможность создания папок. Фильтры и мощная система поиска пригодятся всем пользователям, обладающим большой коллекцией файлов.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Фрагмент интерфейса сервиса GoogleDrive

Совместная работа и публикация Благодаря функции совместного доступа можно работать с коллегами одновременно, причем сделанные изменения будут мгновенно отображаться на мониторе другого участника. Очень важно, что пользователь полностью контролирует, кто и как может использовать его файлы, папки и документы. Для соавторов существует три уровня доступа: читатель (только

Установив на свой компьютер специальную программу-клиент, вы получите возможность сохранения всех своих облачных данных на жестком диске, а также мгновенную синхронизацию между онлайн и локальным хранилищами. Изменения, внесенные при редактировании файла в Интернете, на компьютере или мобильном телефоне, синхронно отражаются на всех устройствах, на которых установлен Google Drive. Фрагмент интерфейса сервиса GoogleDrive

ОНЛАЙН-МЕНЕДЖМЕНТ НКО

просмотр), комментатор (можно читать и оставлять комментарии) и редактор (все возможности, кроме удаления файла). Для публикации каких-либо документов в Интернете пригодится возможность настройки параметров видимости файлов. Вы можете сделать свои документы общедоступными, при этом они могут быть включены в результаты поиска, и открыть их сможет любой пользователь, который найдет их адрес. Элемент с параметром видимости Пользователи, у которых есть ссылка, можно сравнить с телефонным номером, не внесенным в телефонную книгу. Просмотреть документ, файл или папку смогут только те пользователи, которые знают их точный URL. А параметр Личный говорит сам за себя – доступ к такому документу есть только у вас. Сервис GoogleDrive представляет собой практически идеальное средство для организации работы удаленных сотрудников в рамках некоммерческой или общественной организа100

ции, благотворительного фонда или гражданской инициативы. Надежность сервисов компании Google не нуждается в рекламе, а хранение всех своих данных в облаках добавляет еще один важный фактор в безопасность вашего проекта. Благодаря сервису GoogleDrive вы становитесь по-настоящему независимы и мобильны: все, что теперь нужно для начала работы – это доступ в Интернет и пароль к личной учетной записи. Oogwave Oogwave представляет собой веб-приложение для управления задачами и проектами, над которыми работает команда удаленных сотрудников или волонтеров. Приложение имеет современный простой интерфейс и весь набор функций, необходимый для сервисов подобного рода. Так, здесь имеется планировщик проектов, внутренний чат, личные инструменты в виде менеджера задач и блокнот для заметок. Кроме этого,

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Фрагмент интерфейса сайта Oogwave

для совместной работы можно использовать групповые обсуждения, комментарии, делегирование задач, функции оповещения и хранения рабочих файлов. После создания учетной записи вы попадаете в свой пользовательский профиль, где первым делом вас встретит страница, предназначенная для полного отчета обо всех последних действиях вашей команды. Снача ла необходимо

Фрагмент интерфейса сайта Oogwave

ОНЛАЙН-МЕНЕДЖМЕНТ НКО

101

Фрагмент интерфейса сайта Oogwave

пригласить к работе своих коллег, активистов или волонтеров. Впоследствии можно разбивать их на группы, ставить перед ними задачи и следить за их выполнением, устраивать групповые обсуждения и т.д. Общий принцип функционирования сервиса Oogwave напоминает работу социальных сетей, например Facebook. Точно так же здесь есть стена, на которой отображаются все последние сообщения, встроенный чат для личного общения, группы, уведомления и даже лента событий, отображающая все новости в какой-либо группе. Однако создатели пошли намного дальше и добавили в эту 102

схему целый ряд новых инструментов, которые предназначены именно для рабочего использования. К таким функциям можно отнести продвинутый менеджер задач и специальное место для хранения рабочих файлов. При этом вы получаете удобный файловый менеджер, который позволяет легко управлять вашими данными, в том числе переименовывать, удалять, перемещать в другие папки. Загруженные данные могут иметь статус личных или доступных членам указанной вами группы. Место для хранения и количество не ограничены, а вот максимальный размер одного файла не должен превышать 100 Мб, что вполне достаточно для большинства офисных форматов. 3. RealTimeBoard RealTimeBoard – это виртуальная белая доска, которая доступна для всех участников проекта и готова для совместного использования. Как инструмент для организации работы над проектом она может выполнять следующие функции:

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

• • • •

совместное планирование и управление проектами; обсуждение дизайна сайтов, макетов, архитектурных проектов и т.д.; создание интеллектуальных карт, хронологических лент, инфографики, презентаций; использование в образовательных проектах, интерактивных уроках и мультимедийных курсах.

1. Для начала использования сервиса RealTimeBoard необходимо пройти процесс регистрации. Сразу после входа вы попадаете в свою панель управления, где можете видеть созданные и просмотренные вами доски, перечень коллег, которые находятся в Сети, а также все последние обновления, произошедшие с момента последнего вашего посещения. 2. Чтобы создать новую доску, нажмите кнопку Createboard. В появившемся окне необходимо задать ее название, выбрать уровень

Фрагмент интерфейса сайта RealTimeBoard

приватности, а также указать адреса коллег, которых хотите пригласить к участию в работе над ней. На данном этапе можно также выбрать один из доступных шаблонов оформления. Для наполнения доски полезным содержанием (заданиями, дискуссиями и документами) следует, прежде всего, воспользоваться библиотекой элементов, кнопка вызова которой находится в левом верхнем углу. Здесь можно загрузить новые файлы или воспользоваться уже имеющимися в галерее ресурса. Достоинством платформы является ее ОНЛАЙН-МЕНЕДЖМЕНТ НКО

103

Фрагменты интерфейса сайта RealTimeBoard

интеграция с сервисом GoogleDrive, что дает возможность добавлять и работать с материалами этого облачного хранилища. 104

3. После того как вы добавили и разместили на доске нужные изображения, файлы, иконки, можно приступить к созданию связей между ними и оформлению. Для этого предназначена панель инструментов в нижней части окна сервиса. С помощью нее можно нанести пометки от руки, добавить стрелки, линии, прямоугольники, надписи, стикеры, комментарии и многое другое. Каждый инструмент имеет настройки цвета, толщины линий, шрифта, так что можно сделать доску не только информативной, но и красивой. Особое внимание создатели сервиса уделили процессу совместной работы. Для того чтобы пригласить коллег к работе над проектом, необходимо просто перетащить их иконки с панели Users на свою доску. Все сделанные изменения отображаются на досках участников проекта в режиме реального времени. Для непосредственного обсуждения предусмотрено всплывающее окошко чата.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

6. Для публикации вашей доски имеется несколько удобных способов, среди которых самым интересным является возможность создания на ее основе красивой презентации. Для этого вы должны сделать последовательность снимков разных частей вашей рабочей области, а RealTimeBoard на их основе склеит и продемонстрирует презентационный ролик. Если хотите опубликовать свою доску, то нажмите кнопку Share и выберите подходящий вариант. Так, здесь можно сохранить свою рабочую область в виде изображения, сконвертировать в формат PDF или получить специальный html-код для встраивания в любой сайт или блог. Подводя итог, можно сделать вывод, что онлайновый сервис RealTimeBoard является одним из самых удобных сервисов для работы над файлами, визуальными образами, задачами как одного человека, так и целой

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

ОНЛАЙН-МЕНЕДЖМЕНТ НКО

105

2.6. Почтовые рассылки Интернет предоставляет все возможные способы коммуникации, и не последнее место среди них занимает почтовая рассылка. С ее помощью НКО могут приглашать пользователей на мероприятия, привлекать волонтеров, сообщать им важные сведения и т.д. На примере первого сервиса рассмотрен механизм настройки почтовой рассылки, второй раздел раскрывает общие характеристики популярных почтовых сервисов. TinyLetter Для начала использования сервиса TinyLetter необходимо пройти процедуру регистрации, которая заключается в выборе логина, пароля и указании своего почтового адреса. После входа в свою учетную запись вы попадаете в пока еще пустой аккаунт, не содержащий никаких рассылок, ответов читателей и контактных адресов. 106

Фрагмент интерфейса сайта TinyLetter

Первым делом необходимо обратить внимание на раскрывающееся меню Settings, находящееся в правом верхнем углу. Оно предназначено для настройки внешнего вида и содержания страницы подписки. Здесь также задается сообщение о подтверждении почтового адреса, высылаемое всем новым подписчикам, и сообщение на случай отписки. После того как закончены необходимые технические процедуры, можно получить адрес страницы подписки и специальный html-код для размещения формы подписки на веб-странице.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

Настройка письма подтверждения подписки Создание письма в сервисе TinyLetter

После того как вы создали и разместили в Сети формы для подписки на вашу рассылку, самое время заняться созданием вашего первого письма. Для этого в TinyLetter есть удобный и простой встроенный редактор, который открывается после нажатия кнопки Compose. Создание сообщений мало чем отличается от написания писем в Gmail тем пользователям, которым требуются дополнительные функции, надо обратить внимание на возможность вставки html-кода, чтобы придать своим письмам практически любой вид.

После окончания компоновки сообщения можно просмотреть, как созданное вами письмо выглядит на практике. Для этого щелкните кнопку Send Preview и получите его на свой почтовый адрес. Если все в порядке, то вам ничего не остается, как отправить свою рассылку всем подписавшимся на нее. После нажатия кнопки Send Now письмо будет отправлено всем вашим адресатам. Обратите также внимание, что ваши подписчики имеют возможность реагировать на бюллетень, просто отвеПОЧТОВЫЕ РАССЫЛКИ

107

тив на это письмо. Вы увидите их сообщения в соответствующем разделе сервиса TinyLetter. Онлайновый сервис почтовых рассылок TinyLetter позволит вам буквально за пару часов создать красивую форму подписки, собрать адреса заинтересованных пользователей и выслать им бюллетень с обновлениями своего проекта. Таким образом, вы получаете еще один чрезвычайно эффективный и к тому же совершенно бесплатный канал коммуникации, который поможет вашей организации успешно выполнять поставленные цели.

Краткий обзор других сервисов MailChimp MailChimp – один из самых популярных в мире сервисов для почтовых рассылок: • Интерфейс на английском языке. • Текстовые подсказки и обучающее видео 108

встречаются практически на каждом шагу, при этом не отвлекают от работы с сервисом. • Готовые удобные решения по интеграции возможностей этого почтового сервиса в состав сторонних SaaS-платформ или популярных CMS: MailChimp можно подключить к движкам WordPress, Drupal, Facebook и т.д. Реализована интеграция с популярными инструментами третьих сторон, например, с Google Analytics, Google Docs, Zoho Docs. • Большое количество готовых шаблонов для рассылок. Работа редактора шаблонов разделена на три режима: код, совмещенный и визуальное редактирование. Дополнительно к редактору сервис предоставляет свой собственный встроенный хостинг изображений, у которого нет никаких ограничений по количеству, объему или сроку хранимых там фотоматериалов для платных клиентов компании. • Бесплатные отчеты о рассылке: различные режимы подтверждения получения или

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

• Бесплатная возможность испытать сервис на рассылке до 6000 писем в месяц на максимум 1000 контактов, при этом доступны практически все возможности сервиса.

Фрагмент интерфейса MailChimp

прочтения письма подписчиком, при этом дополнительно отслеживаются пересылки писем из рассылки, их цитирование и повторные прочтения. • MailChimp позволяет осуществлять рассылки для каждого отдельного региона или даже города, если это потребуется.

Mad Mimi Mad Mimi – еще один популярный англоязычный ресурс для почтовых рассылок: • Интерфейс на английском языке. • Понятный и доступный сервис, с которым может разобраться любой пользователь. • Если вы устали от старых HTML шаблонов, MadMimi подойдет. Создатели обещают утонченный интерфейс и изысканный дизайн. • Возможна интеграция со множеством платформ и сервисов, включая WordPress, Drupal, SurveyMonkey, Facebook, Google Analytics и др. Есть специальные формы для вставки форм подписок на сайт. ПОЧТОВЫЕ РАССЫЛКИ

109

Фрагмент интерфейса MadMini

• Диаграммы отчетов и возможность отслеживать статистику в реальном времени. • Есть возможность бесплатно вести рассылку. Ограничения такие: до 2500 подписчиков и 12500 писем в месяц. WebAsyst WebAsyst является комплексной системой ведения маркетинга, но позволяет также осуществлять массовые почтовые рассылки: 110

Фрагмент интерфейса WebAsyst

• Наличие русскоязычного интерфейса и технической поддержки на русском языке. • Почтовый интерфейс сервиса очень простой и выглядит как почтовый ящик с адресной книгой. • Не позволяет сохранять шаблоны рассылок – можно лишь отправить письмо, после чего оно сохранится в папке исходящих сообщений. Это исходящее сообщение в дальнейшем можно использовать

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО

как шаблон. С шаблоном можно работать как в режиме визуального редактирования, так и с исходным кодом. • Помимо собственного веб-интерфейса для работы с почтой, WebAsyst позволяет получать и отправлять письма с помощью различных почтовых программ, например OutlookExpress, TheBat! и др. Smartresponder Smartresponder – отечественный сервис, является одним из самых популярных решений в области автоматизации e-mail-маркетинга для малого и среднего бизнеса в Рунете: • Наличие русскоязычного интерфейса и технической поддержки на русском языке. • Простой и интуитивно понятный интерфейс. • Возможность создавать и сохранять шаблоны. • Возможность сегментировать подписчиков по их интересам и другим важным

Фрагмент интерфейса Smartresponder

данным, чтобы делать точечные рассылки. • Автоматический постинг в социальные сети и социальные кнопки, интегрированные в формы письма. • Статистика и онлайн-чат со службой поддержки. • Количество подписчиков в бесплатном пакете ограничено тысячей, а число отправляемых писем – 50000 в месяц. Однако есть и существенные ограничения: запрещены использование вложений и импорт существующего списка e-mail-контактов. ПОЧТОВЫЕ РАССЫЛКИ

111

UniSender • Наличие русскоязычного интерфейса и технической поддержки на русском языке. • Реклама в рассылке отсутствует полностью. • Возможность формирования почтовой рассылки на основе данных RSS-канала. В отличие от многих других сервисов, отправляющих информацию из RSS-ленты в почтовый ящик клиента, в UniSender можно настраивать внешний вид рассылки в соответствии с корпоративным стилем организации, создавать правила для рассылки единичных сообщений и дайджеста, а также импортировать список подписчиков. • Удобные возможности интеграции с популярными платформами, такими как WordPress, Drupal и Facebook. • Бесплатная статистика. • UniSender можно пользоваться совершенно бесплатно, если число подписчиков не превышает 100, а количество отправляемых 112

Фрагмент интерфейса UniSender

писем – 1500 в месяц. Если же число подписчиков от 100 до 500, а количество отправляемых писем – не более 7500 в месяц, возможностями сервиса все еще можно пользоваться бесплатно, но в каждое письмо придется включить логотип сервиса и уведомление о его использовании. Точно такую же информацию придется разместить и на своем сайте.

ИНТЕРНЕТ-ТЕХНОЛОГИИ ДЛЯ ГРА ЖД АНСКИХ ИНИЦИАТИВ И НКО