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

1. Appmakr
appmakr.com
Платформы: iOS
Стоимость: free-$999, FREE- if you submit yourself to your own app store
Дополнительные услуги: Бесплатный доступ к ресурсам сайта.
Описание: Appmakr.com — веб-приложение, которое поможет вам создать приложения для айфона быстро и просто.
Замечания: Если вы не знаете как создать приложение для айфона, вы можете запросить помощь по телефону.
Владельцы могут размещать рекламу в своих приложениях и зарабатывать на ней.

Всем известно, что сайты нужно делать для людей. Все уже проводят юзабилити-тестирование, добавляют целевые страницы в Я.Метрику и GAnalytics. Вобщем, что-то считают и по результатам решают, как нужно изменить сайт.

Расскажу еще об одной относительной величине, которую можно измерить — лояльность ваших посетителей. А точнее — динамику ее изменения.

Последнее время все чаще можно встретить сайты с необычным дизайном и функциональностью, увидев которые, можно залипнуть на некоторое время. Увидев такие, у меня рука непроизвольно тянется к f12, чтобы открыть firebug и посмотреть, как же реализован тот или иной компонент. Таким образом можно открыть для себя интересные техники и в будущем реализовать их на своих проектах. Некоторые из них стали доступны с приходом новых технологий, например таких, как CSS 3 — то, что раньше было реализовано на флеше, теперь можно воплотить с помощью строк кода в таблице стилей. Дизайнеры тоже не теряют времени, создавая новые тренды и все плотнее взаимодействуя с верстальщиками. В этой статье я хотел бы показать 15 сайтов, которые так или иначе удивили и порадовали меня. Возможно, кого-то они вдохновят на собственный шедевр

Update: Часть сведений в данной статье устарели. Рекомендую свежие материалы на css-live.ru.

Введение

Модуль CSS3 Grid Layout — это один из самых интересных, на мой взгляд, модулей в семействе CSS3. Официальная история модуля в виде черновика спецификации насчитывает сегодня чуть менее года. О предварительном анонсе еще с названием CSS Grid Alignment на TPAC 2010 Владимир Юнев писал еще в декабре 2010. Надо также отметить, что с чуть другим названием и несколько отличным синтаксисом, но с той же сутью, он был заявлен в качестве WD еще в 2007г. Сегодня работы по доводке модуля идут полным ходом, предварительная реализация уже есть в Internet Explorer 10 и есть надежда, что поддержка новых возможностей также появится в будущих версиях других популярных браузеров.

Зачем нужен Grid Layout?

Задача, которую решает модель CSS3 Grid Layout, очень проста и понятна любому веб-верстальщику (да и не только ему): предоставить удобный механизм расположения контента по виртуальной сетке.

В отличие от старых табличных подходов, основанных на использовании table, здесь не замусоривается семантика документа и представление четко отделено от содержания. В отличие от различных вариаций блочной верстки со становящимися при сколь-нибудь сложной структуре безумными и многоэтажными float'ами в сочетании с вручную просчитанными отступами, здесь описание стилей становится тривиально простым и прозрачным. В отличии от абсолютного позиционирования с привязкой к координатам, здесь сохраняется гибкость. В отличие от популярных сегодня css/js-библиотек для разметки по сетке путем указания соответствующих классов (взять хоть те же bootstrap или yui css grids), здесь не замусоривается привязка классов.

Сплошное удовольствие! Осталось только дождаться широкой поддержки :) Впрочем, если вы планируете делать приложения в стиле Metro для Windows 8 на html/js, ключевые возможности, описываемые в модуле CSS3 Grid Layout, уже работают — и можно двигаться вперед, используя удобные и практичные механизмы.

Чтобы помочь разработчикам под iPad портировать приложения на планшеты Windows 8, компания Microsoft опубликовала на портале Windows Dev Center кейс с демонстрацией, как дизайн Metro-приложения отличается от дизайна iPad. Для примера взяли некое вымышленное приложение, онлайновый календарь фотографий и видео с комментариями. Показано, как информация подаётся на iPad, и как то же самое должно выглядеть в Metro.

Аннотация

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

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



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

Не один раз в комментариях замечал что народ негодует по поводу того, что веб-разработчики стали злоупотреблять использованием Bootstrap от Twitter. Признаюсь, я и сам успел закончить несколько небольших веб-приложений с использованием этого набора скриптов и стилей. Я не против использования Bootstrap от Twitter, я против злоупотребления этим когда есть столько хороших альтернатив. Я почти каждый день натыкаюсь на интерфейсы, построенные на Twitter Bootstrap, и это начинает напрягать. Последней каплей для поиска альтернативы стало изменение интерфейса биллинг панели моего хостера на шаблон Bootstrap. В этой записи я хотел бы немного рассказать про одну из альтернатив — HTML KickStart.

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

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

Вы наконец-то можете сделать кое-что со своим старым LCD монитором, который завалялся у Вас в гараже. Превратите его в шпионский монитор! Для всех вокруг он будет выглядеть просто белым экраном, но не для Вас, потому что у Вас будут специальные «волшебные» очки.

Всё что Вам нужно – это пара старых очков, нож для бумаги и растворитель для краски.

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

Итак, грехи:

1. Медлительность
2. Блокирующее взаимодействие
3. Неуместные ограничения
4. Ненастроенность
5. Несамостоятельность
6. Забывчивость
7. Гордыня

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

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



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

Представляю вашему вниманию перевод статьи под названием "Fundamental Guidelines Of E-Commerce Checkout Design" от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

Грустная статистика систем электронной коммерции — согласно последним исследованиям, по крайней мере 59,8% потенциальных покупателей покидают сайт на этапе оформления заказа и его оплаты (у разных исследований разные показатели — от 59,8% у MarketingSherpa до 83% у SeeWhy).

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

Представляю вашему вниманию перевод статьи "Redesigning the ExpressionEngine Site" от Jesse Bennett-Chamberlain. Перевели в компании UXDepot. Специально для пользователей Хабрахабра с одобрением издания Digital Web Magazine.

Офицер-пограничник на границе между США и Канадой: «Вы направляетесь по делам или же отдыхать, сэр?»
Я: По делам.
Офицер: Уточните причину, пожалуйста.
Я: Я веб-разработчик и еду на встречу со своим клиентом в штате Орегон для обсуждения проекта.
Пограничник: Как называется компания вашего клиента?
Я: «pMachine».
Пограничник: Вы везете какие-либо сайты с собой?
Я: *недоумевающий взгляд*
Пограничник: В вашей машине есть какие-либо сайты, сэр?
Я: Хмммммм… нет, сайты сейчас на серверах. В машине я ничего не везу.
Пограничник: Тогда как вы хотите показать их вашему клиенту?
Я: Хмм… вообще-то я просто еду на встречу с клиентом для обсуждения сайта, пока я ему ничего не везу.
Пограничник: Хорошо, тогда наслаждайтесь поездкой, сэр.

(30 секунд молчания)

Хизер: В следующий раз скажи, что мы едем на отдых.

Всем привет!

Мы, Денис Бесков (beskov) и Илья Поляк (ilyap1) начинаем публикацию цикла статей, посвящённых процессу проектирования веб-сервисов. Цикл построен вокруг 3-хуровневого процесса, в котором явным образом выделяются уровни анализа и проектирования:

1. Бизнеса
2. Продукта
3. Технологий

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

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

1. Какими способами можно описывать требования к ПО?
2. Какие из требований к системе обязательно необходимо включать в ТЗ, а без каких можно обойтись?
3. Какие могут быть варианты при выборе форматов описания требований?
4. Как зависит выбор вида описания требований от параметров (продолжительности, рисков и др.) проекта?
5. Какого рода решения помогают принять соответствующие виды требований?

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

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

III. Описание процесса в графической форме

В виде диаграмм бизнес-процесс можно описывать с помощью различных нотаций: ARIS — VAD и EPC, IDEF0, BPMN и др. Нотаций много, у каждой есть свои достоинства и недостатки, в рамках этой статьи эта тема не затрагивается.

Основной плюс использования диаграмм — наглядность. Основные минусы — сложно изображать все возможные варианты ветвлений и долго вносить изменения.

Посещение кинотеатра без предварительного бронирования билетов (в нотации VAD)

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

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

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

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

Для работы с расширениями вам понадобится переключить канал обновлений на Dev или Beta.

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

Соответственно, форма — уязвимое место приема таких обращений, которое может сократить их число из-за своей неэффективности.

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