Откажитесь от заезженных холстов: исследование потенциала шаблонов, анимированных в стиле off-canvas.

dragon-map-final

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

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

Читать далее

WordPress: как все началось и чего стоит ожидать в будущем.

Matt Mullenweg at The Summit in Dublin, October 2013

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

В этом году я также присутствовал на своем первом (и втором) WordCamp. Первым был проходивший в июле WordCamp UK, где я встретился с Майком Литтлом (Mike Little), одним из двух соучредителей WordPress. Спустя три месяца, мне выпала честь встретиться с другим соучредителем, Мэттом Мулленвегом (Matt Mullenweg). В течение трех недель нам довелось встретиться дважды: на WordCamp Europe в Лейдене и на Summit. Мне невероятно повезло и я смог взять интервью у Мэтта и Майка, которое и стало основой данной публикации. Наша беседа касалась WordPress, в том числе его истории, сообщества и будущего.
Читать далее

Как придать импульс развитию вашего проекта с помощью INIT и Grunt.

init-opt

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

Создание клиентской корзины для виртуальных покупок.

Хранение данных типа «cookie» для сайтов электронных покупок – это относительно новая функция, представленная в спецификации «Web Storage», созданной W3C консорциумом. Данная возможность поддерживается в Internet Explorer 8, Firefox, Chrome, Safari и Opera Desktop (для получения более подробного списка, пожалуйста, проанализируйте данные, представленные в статье «Могу ли я это использовать»). В этой серии статей мы подробно рассмотрим практическую реализацию сессии сохранения данных и попытаемся создать полноценную корзину, используемую на веб-сайте электронной коммерции с помощью объекта sessionStorage и jQuery.

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

Читать далее

Как создать CLI инструмент с помощью Node.js и PhantomJS.

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

Инструменты на основе командной строки можно создать с помощью множества языков, но в данном случае мы сосредоточимся на программной платформе Node.js.

Читать далее

Четыре способа построения мобильного приложения, часть 3: PhoneGap.

ios_android-550

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

Платформа PhoneGap от компании Adobe позволяет разработчику создать приложение, которое работает на различных мобильных устройствах. Разработчик решает эту задачу путем создания пользовательского интерфейса с применением таких веб-технологий, как HTML, CSS и JavaScript. Инструментальные средства разработки PhoneGap позволяют комплектно загружать HTML, CSS и JavaScript файлы в пакеты развертывания конкретных платформ. PhoneGap поддерживает широкий спектр платформ:

Читать далее

Smashing Book # 4: особенности оформления.

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

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

Читать далее

Использование преобразований в адаптивном веб-дизайне.

The data flow of a transform

Многие веб-разработчики по-прежнему скептически относятся к использованию преобразований в сфере адаптивного дизайна. Прошлым летом разработчики, ответственные за поддержку браузера Google Chrome, выдвинули предложение, которое осталось практически незамеченным технической прессой. В основе этого предложения лежит необходимость отказаться от поддержки, установленной для W3C (консорциум World-Wide Web) стандарта, который по-прежнему поддерживает каждый второй производитель браузеров. Что же это за стандарт, о котором пойдет речь? Расширяемый язык стилей служит для описания преобразований и также известен как XSLT (Extensible Stylesheet Language Transformations).

В ответ на эту новость, большинство веб-разработчиков, скорее всего, просто пожмет плечами и скажет: «Ну и что?» Это печально.

Читать далее

Представление живых расширений для улучшенного DOM: что это такое и как они работают.

live-extension-respo

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

Функции живых расширений.

Обработка событий является одним из ключевых принципов работы с DOM (объектная модель документов, стандарт консорциума WWW, определяющий способы манипулирования объектами и изображениями на одной веб-странице). События являются основным средством получения обратной связи от пользовательского взаимодействия.

Читать далее

Практические UX методы для создания более умных веб-сайтов.

iPad Wireframe

Что же подразумевают под процессом «проектирования опыта пользовательского взаимодействия» (User Experience Design)? Вы когда-нибудь использовали этот процесс в своей практике или хотя бы знаете его особенности? А что, если вам нужно использовать его в ближайшем проекте? Все ли дизайнеры имеют навыки проектирования опыта пользовательского взаимодействия, или это совершенно отдельная область?

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

Читать далее