UI Prototype [AppStore]

UI Prototype – очень удобное приложение для создания прототипов интерфейсов на iPad. Представьте, Вы пришли к клиенту и вместе с ним набросали примерный вид будущей газеты или сайта. Или на собрании с дизайнерами Вы можете быстро набросать макет приложения, которое вам нужно, чтобы они потом его доработали.

Client’s debt

Приложение, написанное на HTML5. Позволяет вносить долг клиента в список, чтобы видеть, сколько он остался должен и сколько уже заплатил. Очень удобно организована структура клиентов: деление по цветам и иконкам (80 штук). Поддерживает несколько языков, в том числе и русский. Будет полезна фрилансерам.

http://mopic-app.com/2011/09/26/clients-debt/

0×100

С днем программиста вас, дорогие читатели.

My dear Pad – идейный блокнот на HTML5

My dear Pad – блокнот для записи идей и последующего поиска этих идей по тегам. Написан на чистом HTML5. Работает на iPad, iPhone и iPod touch.

Создание частиц на JavaScript с помощью Three.JS

Вступление

Всем нравятся частицы (думаю, Вам тоже). Возможно Вы этого не знает, но частицы можно легко создать с помощью Three.JS!

1. Создание системы частиц

На Three.js Вы можете создать систему частиц, как любой другой примитив, обладающий своей геометрией, позицией, размерами и углом поворота. Что делает библиотека? Создает геометрическую фигуру с вершинами, к которым привязаны частицы. Почему именно так? Существует несколько причин: вся система может быть нарисована за один раз, в отличие от перерисовки каждой отдельной частицы (что существенно уменьшает нагрузку на процессор при использовании WebGL), и свойства можно применить сразу ко всем частицам разом.

Но даже если частицы представлены, как один объект, мы все равно можем изменять их цвет отдельно для каждой частицы, потому что Three.js посылает цвет шейдеру при его прорисовке. Мы не будем этого делать в данной статье, но если вам это реально интересно, можете взглянуть на пример на GutHub’е, где использованы вертексные цвета.

Существует одна проблема, которую, возможно, вам придеться решать в будущем. После того, как Three.js зарезервировал данные по вершинам для системы частиц, вам будет сложно добавить или удалить частицу. Что Вы реально сможете сделать, так это применить alpha-канал к частице, чтобы сделать ее невидимой. Но вам нужно создать максимальное количество вершин, чтобы потом с ними работать.

Чтобы создать систему частиц, мы напишем следующий код:

“Копировать в буфер” плагин для jQuery – zClip

zClip -  jQuery-плагин для создания функции “Копировать в буфер” с помощью невидимого Flash-файла.

Плагин построен на базе популярной библиотеки Zero Clipboard + полностью совместим с Flash 10 и ниже.

Библиотека очень легковесна (~7Kb) и имеет поддержку CSS-событий “:hover” и “:active”.

zClip накрывает прозрачным Flash-элементом целевой элемент, чтобы перехватить события “click”, “mouseenter” и “mouseleave”.

Так же есть две callback-функции: “before copy” и “after copy”.

Начните свой HTML5-проект с Initializr

Наверняка Вы знаете о HTML5 Boilerplate, прекрасном базовом HTML/CSS/JS шаблоне, с помощью которого можно руками сделать свой проект на HTML5.

Initializr – генератор, основанный на HTML5 Boilerplate, и помогающий вам кастомизировать изначальный шаблон.

Он позволяет Вам опробовать функции:

• будет ли использоваться “рыьный” контент
• будут ли использоваться JavaScript и jQuery
• будет использоваться Modernizr или html5shiv
• будет ли использоваться .htaccess, web.config или nginx.conf

P.S. В шаблоне убрана некоторая функциональность Boilerplate, которая в основном не используется.

Бесплатный набор для User Interface дизайна

Webalys создал прекрасный бесплатный набор User Interface Design Framework для веб-дизайнеров, которым, кстати, я и сам успешно пользуюсь. В набор включены: GUI библиотека – сотни векторных элементов интерфейса, набор из 260 минималистических иконок для дизайна интерфейсов (за 47 долларов можно купить полный набор из 760 иконок), библиотека из 200 стилей для Adobe Illustrator.

Теперь можно быстро создавать сетки для шаблонов в Illustrator’e. Вы можете легко модифицировать любой из элементов, так как все они векторные.

Пример формы заказа на сайте гостиницы, сделанный за две минуты (включая запуск Illustrator’а):

LimeJS – игровой HTML5 фрэймворк для тачскрин-девайсов

LimeJS – JavaScript фрэймворк, позволяющий создавать игры на HTML5. Игры, созданные с помощью LimeJS, не требуют никаких плагинов, только современный браузер.

Сейчас LimeJS поддерживает практически все HTML5-браузеры: Chrome, Safari, Firefox и даже Opera. И, конечно, библиотека работает на двух современных мобильных платформах: iOS (iPad, iPhone и iPod Touch) и Android.

Modular Grid Pattern: сетки для Photoshop и других редакторов изображений

Modular Grid Pattern – сайт, позволяющий Вам сделать собственную сетку для дизайна сайта несколькими способами.

Первый – это бесплатное расширение для Adobe Photoshop (совместимо с CS5), которое позволяет создавать сетки прямо в приложении.

Второй – создание сетки онлайн, где Вы можете установить baseline, обтекание, ширину/высоту модуля, количество модулей и ширину всего контейнера страницы. На выбор создается три варианта сетки:

• PNG-паттерн (для GIMP)
• Photoshop-паттерн
• маска прозрачности (для Adobe Fireworks)