книги хакеры / журнал хакер / 183_Optimized

wiki/Additional-Widgets и dashing.challengepost.com собрано немало готовых виджетов.

Я с ходу смог собрать дэшборд для своего офиса. Что я хотел сделать? В нем должен идти обратный отсчет до релиза (либо до конца итерации, если используется Agile). Также необходимо мониторить количество посетителей, в данный момент находящихся на сайте (данные будем брать из Google Analytics). Вместе с этим хорошо бы отслеживать нагрузку на сервер, дабы вовремя понять, что и где нужно оптимизировать и какие меры принять, чтоб не дать сайту внезапно обрушиться под волной посетителей или DDoS-атакой. Ну и наконец, будем следить за тем, что о нас пишут в социальных сетях: выведем на экран последние сообщения из твиттера с названием нашего сервиса.

В итоге я собрал следующий набор виджетов:

1.Обратный отсчет — виджет Countdown (https://gist.github. com/ruleb/5353056).

2.Мониторинг посетителей — виджет Google Analytics (https:// gist.github.com/mtowers/5986576).

3.Нагрузка на сервер — виджет Load Averages (https://gist. github.com/gregology/5196609).

4.Статус проекта в виде светофора — виджет Github status

перепишем под свой проект (https://gist.github.com/ iainjmitchell/5840161).

5.Твиттер — виджет Twitter Search (https://gist.github.com/ jeroenbegyn/5419267).

Ну а дальше уже вопрос в выборе площадки для работы по-

лучившегося дэшборда. Я выбрал Heroku, о настройке читай во врезке .

КАКВЫВЕСТИНАТЕЛЕВИЗОР?

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

Мой вариант — использовать для вывода Raspberry Pi. Он идеально запитывается через USB-порт телевизора (онто сейчас есть почти везде) и подключается через HDMI. Единственной проблемой может стать подключение к сети: если не хочешь лишних проводов, то можно заюзать USB WiFi модуль (инструкции здесь — raspberrypi.stackexchange. com/a/1253/1494). К сожалению, Dashing на поверку оказался довольно прожорливым к ресурсам, поэтому пришлось даже установить специальную сборку Chromium — Hexxeh’s Chrome (hexxeh.net/?p=328117859) и ограничить частоту обновления изображения.

Резюмирую. Трудозатраты — один день. Программирование — почти не нужно. Необходимое железо — Raspberri Pi, одна штука. Результат — крутейший дэшборд в офисе, который теперь все хотят улучшать. Красота!

sDashboard https://github.com/ModelN/sDashboard

Написанный на JS фреймворк для создания дэшбордов. По сути, представляет собой плагин для jQuery, позволяющий визуализировать различные данные и события, в том числе в виде графиков (с помощью Flotr2) и таблиц (с помощью библиотеки (Datatables).

dashku https://github.com/Anephenix/dashku

Полноценный фреймворк для построения дэшбордов, написанный на Node.js азиатскими разработчиками. Для работы также понадобится

MongoDB и Redis.

ŘŧśŢťŤūśŦŤŠũ

Heroku — это идеальная площадка для того, чтобы бесплатно захостить Dashing и не заморачиваться настройкой стека.

Для этого на главной странице Heroku (heroku.com) жмем кнопку Sign Up, на появившейся странице вводим email, в полученном письме переходим по ссылке подтверждения, придумываем пароль и тыкаем Save.

Готово! Теперь у нас есть маленький, но гордый уголок в облаке, в котором можно быстро создавать элегантные веб-приложения.

Страничка, на которой мы оказались, предлагает установить Heroku Toolbelt — утилиту для работы с облаком. Не будем себе в этом отказывать. Если у тебя, как и у меня, Ubuntu или Debian, то смело пиши в консоль:

wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh

Если Windows или OS X, качаем с их сайта exe или pkg и устанавливаем. Во-вторых, нам понадобится система контроля версий, чтобы опера-

тивно вернуть все на свои места, если мы внезапно все испортим, и чтобы знать, кому надавать по шапке, если все испортит кто-то другой. Создатели Heroku рекомендуют для этих целей Git. Не будем отказываться — Git и вправду хорош. Установить его легко:

sudo apt-get install git

Для другой операционной системы Git так же легко качается с официального сайта (git-scm.com) и так же просто устанавливается. Теперь у нас есть все, чтобы начать.

УСТАНОВИМDASHING

Для начала авторизуемся в Heroku. Для этого открываем командную строку, пишем:

heroku login

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

mkdir dashing

cd dashing

Клонируем Git-репозиторий Dashing:

git clone https://github.com/Shopify/dashing.git

Теперь надо установить приложение, проинициализировать новый Gitрепозиторий и закоммитить в него все, что мы только что клонировали:

bundle install

git init

git add .

git commit -m "My beautiful dashboard"

Создаем приложение в Heroku:

heroku apps:create xakepdashboard

Теперь оно доступно по адресу xakepdashboard.herokuapp.com,

но в нем ничего нет. Но утилита Heroku создала отдельную ветку репозитория heroku. Скопируем туда наше приложение.

git push heroku master

Если консоль ругается на отсутствие файла Gemfile.lock несмотря на то, что он есть, открываем файл .gitignore

gedit .gitignore

и удаляем оттуда строку ./Gemfile.lock

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

balsamiq.com

Эта программа — самый известный инструмент для создания прототипов. Balsamiq доступен для всех операционных систем, и его можно интегрировать с различными системами совместной работы, включая Jira, Confluence и Google Drive.

Также есть онлайн-версия Balsamiq. Лицензия для одного ПК обойдется в 79 долларов, а доступ к веб-приложению — от 12 долларов в месяц (не более трех активных проектов).

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

полей должно быть подсвечено как выбранное по умолчанию

Шаблонов для мобильных платформ в Balsamiq очень мало — всего предусмотрено семь макетов и элементов для iPhone. Это макет самого iPhone и некоторые элементы, характерные для мобильной ОС: форма picker (используется в мобильных ОС для ввода времени и других параметров), экранная клавиатура, тумблер ON/ OFF и другие. Впрочем, все остальные элементы, необходимые для создания макета мобильного приложения, можно взять из других разделов библиотеки. К сожалению, шаблонов для других мобильных устройств не предусмотрено. Учиты-

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

Макеты можно сохранять в собственном формате программы для дальнейшего редактирования либо экспортировать в PNG или PDF.

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

DesignerVistamockuptool

designervista.com

DesignerVista заточен исключительно для проектирования интерфейсов десктопных приложений под Windows. Отсюда и особенности библиотеки: в ней есть, например, огромный набор шаблонов для построения ленточного интерфейса (ribbon). Даже простой шаблон окна представлен в двух вариантах: из Windows 7 и 8.

Помимо шаблонов элементов управления,

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

Интерфейс программы стилизован под последние версии Microsoft Office. Работать с ним удобно. Единственный недостаток — нет автоматического выравнивания элементов. Например,

вWireframeSketcher Studio шаблон при перета-

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

Вобщем, если нужно работать только с макетами десктопных Windows-приложений, то DesignerVista — идеальное решение, полученный прототип будет почти не отличаться от скриншота реальной программы. Цена лицензии — 169 долларов для одного пользователя.

PC ZONE

на нее внимание стоит, если ты хочешь быстро создавать аккуратные макеты, которые можно вставить не только в ТЗ разработчика, но и в презентацию.

Набор шаблонов Updated Sketch GUI Shapes for Visio

ŢŖŠśŨű ŠŖŠ ŧśŦŘŞŧ

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

друг друга. Поэтому я дам сжатое описание десяти веб-сервисов, которые первыми попались мне на глаза.

proto.io. Довольно дорогой сервис — 288 долларов в год

для одного пользователя. При этом число проектов ограничено пятью. Набор шаблонов в библиотеке базовый. Интерактивность реализована лишь в виде ссылок на другие макеты.

lumzy.com. Также базовый набор шаблонов, но зато тут есть широкие возможности для обеспечения интерактивности макета. Этот сервис примечателен моделью оплаты. Несколько лет он функционировал как бесплатный. Теперь для пользования сервисом придется приобретать жетоны. Цена одного жетона — 26 центов, а срок действия — 12 часов. По истечении срока действия жетона сервис продолжит работать без ограничений, но время от времени будет напоминать о необходимости оплаты всплывающими сообщениями.

gomockingbird.com. Этот сервис отличается способностью быстро поделиться готовым макетом. Набор шаблонов годится только для отрисовки веб-приложений. Цена использования — 9 долларов в месяц при двух активных проектах.

cacoo.com. Этот сервис предлагает набор готовых макетов, представляющих собой примитивные изображения некоторых типовых вариантов верстки сайта. Впоследствии предложенный макет можно доработать под свои нужды. Есть возможность совместного редактирования макета, а вот просто показать макет человеку, не зарегистрированному на сайте, не получится. Возможен экспорт в форматы PNG, SVG, PDF, PS, PPT. Цена — 49 долларов в год для одного пользователя. Также есть бесплатный план, несколько ограниченный в возможностях совместного редактирования.

moqups.com. Очень простой инструмент с понятным интерфейсом. Библиотека шаблонов не самая богатая, но включает в себя элементы интерфейса iOS. Минимальный тарифный план стоит 99 долларов в год. Он позволяет иметь десять активных проектов и дает гигабайт дискового пространства для хранения изображений.

ninjamock.com. Сервис интересен в основном возможностью создания макетов интерфейсов мобильных приложений. Поддерживаются все популярные ОС, не исключая Windows Phone и Windows RT. Набор шаблонов довольно богатый, хотя в него включены некоторые странные элементы. Такие, как, например, стандартное уведомление о встрече, запланированной в календаре. Пользоваться ninjamock.com можно бесплатно в некоммерческих целях и создавая не более трех проектов на аккаунт.

wireframes.org. Набор шаблонов и функциональность позволяют отрисовывать довольно примитивные макеты веб-интерфейсов. Присутствует возможность совместного редактирования макетов, а также экспорт в PNG, PDF и (внимание)… JSON. Последнее может быть полезно ввиду того, что у сервиса есть бра- тья-близнецы, очевидно работающие на том же ПО. Например, сайт mockuptiger.com. Пользоваться описанным приложением можно в онлайне за 0–500 долларов в год, в зависимости от необходимого числа проектов. А можно один раз купить лицензию за 97 долларов и установить его на свой сервер.

appmockuptools.com. На этом сайте можно купить блокнот для ручной отрисовки макетов интерфейсов для iPad и iPhone. Блокнот продается в виде PDF-файла, печатать который придется самостоятельно.

invisionapp.com. Этот сервис позволит превратить растровый макет сайта или приложения в интерактивный. Для этого нужно импортировать в облачное приложение растровые файлы, нанести на них разметку и задать действия, выполняемые при нажатии на тот или иной участок макета. Таким действием может быть переход к другой странице макета или другой области этой же страницы, а также переход по внешней ссылке. Минимальная цена использования — 15 долларов в месяц при трех активных проектах.

concept.ly. Близкий аналог invisionapp.com. Проект запустился недавно, поэтому в течение некоторого времени его использование бесплатно.

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

менеджерами, проживающими в линуксоидных краях.

ŧŨŖŦŨ

В OS X 10.9 Mavericks большинство менеджеров окон не смогут работать, если не дать им доступ к необходимым системным функциям. Чтобы сделать это, нужно зайти

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

DIVVY

https://mizage.com/divvy/

Создатели Divvy изобрели ориги-

нальный подход к расположению

окон. Значок приложения в меню-

баре или заданное в настройках

сочетание клавиш вызывают

окно с сеткой, на которой мышью

можно выбрать требуемый размер

активного окна. Изначально сетка

разделена на 36 квадратов (6 на 6),

но при желании это число можно

уменьшить или увеличить — вплоть

до сотни (то есть 10 на 10 прямо-

угольников).

Чтобы не выбирать размеры

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

иготово — теперь можно пользо-

ваться Divvy так же, как и Spectacle.

Разница лишь в том, что Divvy позволяет настроить нестандартные размеры.

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

Стоит программа 14 долларов

идоступна в App Store. Для желающих предварительно ознакомиться с продуктом на сайте разработчиков есть демоверсия.

Настройки Divvy

ЧТОВЫБРАТЬ

Бесплатный Spectacle прекрасно подойдет для начала — пусть в нем и нет никаких наворотов, он отлично делает свое дело.

Бывшим пользователям Windows, скучающим без клеящихся к краям экрана окон, поможет Cinch (впрочем, маководам тоже ничто не мешает оценить по достоинству открываемую им возможность). Из полновесных платных менеджеров окон наиболее приятное впечатление оставляют Moom и Divvy. У первого больше интересных вариантов использования, второй проще и понятнее. Что до SizeUp, то его разработчикам стоило бы задуматься о новой версии, которая вернет программе прежнюю славу.

Сцена