18 декабря 2012 г.

DivShot: Interface Builder для создания пользовательских интерфейсов веб-приложений


Создание пользовательских интерфейсов веб-приложений всегда оставалось довольно рутинным  занятием, особенно если пишешь UI с нуля, не используя сторонних фреймворков. Горы HTML и CSS, адовая кодбаза на Javascript, часто связанный, вермишельный код для поддержки разных браузеров, разрешений, возможностей (и снова слава HTML5).

Даже с такими могучими фреймворками как Sencha или штуками полегче вроде jQuery Mobile остаётся огромное количество мелкой работы, связанной со стилизацией или разработкой кастомных компонент. Чем UI приложения насыщеннее, тем больших ресурсов на разработку, поддержку и тестирование он требует. Тем пронзительнее боль client side разработчиков.

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

DivShot

Последнюю задачу кажется решает с задором и лихвой новенький сервис DivShot, недавно вышедший в публичную бету. «Interface Builder для веб-приложений. Перетаскивайте компоненты и экспортируйте в отзывчивый HTML и CSS» — озаглавлена их прелестная landing page. Что же внутри?

А внутри нас ждет самый настоящий Interface Builder — все, как заявлено: натаскивай себе компоненты в лэйаут и экспортируй полученный HTML & CSS.


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

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


Экспортируемый код при этом содержит ссылки на css прямо на домене divshot.com, что позволяет скопировать его целиком в html страницу и посмотреть уже на своем сайте.

Также есть возможность редактировать CSS и добавлять свою HTML разметку, что по идее дает возможность делать свои компоненты, или проектировать UI с использованием заготовленных скетчей.
Enhanced by Zemanta
Отправить комментарий