Хабрахабр: Web-разработка / Блог / Захабренные Голосов: 1 Адрес блога: http://habrahabr.ru/blog/webdev/ Добавлен: 2008-06-12 19:52:21 блограйдером ZaiSL

Обзор возможностей Wireframesketcher на примере создания макета сайта

2015-04-23 06:35:40 (читать в оригинале)


Wireframesketcher — предназначен для прототипирования графических интерфейсов.
В нем можно создавать интерактивные прототипы веб-сайтов и приложений как для настольных компьютеров так и для смартфонов, а также других мобильных устройств.
Авторы позиционируют Wireframesketcher как инструмент для профессионалов и у них на это есть все основания. Приложение разработано на основе Eclipse IDE либо может быть установлено в качестве плагина к Eclipse, а это обеспечивает кроссплатформенность приложения (Linux/Mac/Windows) и дает возможность использовать большой арсенал разработанных для этой IDE инструментов, в том числе поддержку различных систем контроля версий и других плагинов. Что касается контроля версий, то его легко осуществлять, так как для хранения данных проекта используются текстовые XML файлы. Также для Wireframesketcher имеется достаточно обширная библиотека макетов, шаблонов, виджетов и иконок.

В этой статье я хочу показать пример создания прототипа простого веб-сайта в Wireframesketcher. В данном случае под прототипом будет пониматься совокупность нескольких слинкованных интерактивных т.н. проволочных макетов страниц веб-сайта (wireframes). В дальнейшем для простоты я буду использовать «оригинальное» название «wireframe» сокращенное до «фрейм» именно в этом контексте.
Далее будет много текста и картинок

---

Услуги на конвейере. Как устроена информационная инфраструктура WebCanape?

2015-04-22 07:44:39 (читать в оригинале)




Мы часто слышим фразу от клиента: «Вы не торопитесь, сделайте качественно». Почему все думают, что чем дольше делается проект, тем он качественнее? Да он просто не делается! Если быстро — значит качественно, если долго — результата не будет.

В этой статье я расскажу о системах, на которых строится конвейер разработки сайтов. Сегодня только технические подробности и никакой воды. Для тех, кто относится к конвейеру как к штамповке, сразу скажу, что к «штамповке», это не имеет никакого отношения. А вот к экономии сотен и сотен часов — да. Бонусом еще — повышение качества и скорости. Заходите под кат и примеряйте на себя.

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

---

[Перевод] Webiny Framework. Первый взгляд

2015-04-22 00:47:53 (читать в оригинале)


Есть шутка о типичной карьере разработчика:

1. Не использует фреймворки
2. Обнаруживает фреймворки
3. Пишет свои фреймворки
4. Не использует фреймворки

Пункт 4, конечно же, ссылается на новоприобретенные способности использовать Composer для построения собственных фреймворков, создавая их из различных компонентов третьих сторон.

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


Он называется Webiny, и, будучи упакованным до краев усовершенствованиями и изменениями, которые они считают необходимыми, фреймворк имеет некоторые действительно интересные компоненты, на которые стоит взглянуть. В этой вводной статье мы не будем обращать внимание на структуру в целом, но осветим самые основные ее компоненты — StdLib.
Читать дальше →

---

Интенс, индикатор прокрутки (или жизнь после скроллбара)

2015-04-21 23:37:59 (читать в оригинале)


Месяц назад кто-то нашёл у меня на гитхабе незаконченный проект и выложил ссылку на него на Designer News. Внезапно я увидел, что на сайте проекта постоянно сидит по 50 человек, и мне даже пришлось срочно сбежать с работы чтоб экстренно выпилить хотя бы самые адовые баги. Этим проектом был интенс, UX-компонент заменяющий полосу прокрутки (скроллбар) на специальный индикатор, который подсвечивает прокручиваемую область текстурой. Выглядит это примерно так:


_{на сайте проекта можно поскроллить самостоятельно}

Сообщества UX-экспертов и программистов отреагировали очень возбуждённо:

Не могу понять, почему мне это не нравится… _{— GrumpyUX Man @ layervault}

Святые какашки, эта штука бесит _{— Thecoss @ reddit}

Да я себе скорее установлю ПЕРДЯЩИЙ СКРОЛЛ http://theonion.github.io/fartscroll.js/ в качестве дефолтного, чем КОГДА-ЛИБО заменю мою полосу прокрутки на это. _{— Kyle Donmoyer @ layervault}

Спасибо, не надо. Никогда не мог понять это желание поменять стандартные элементы интерфейса. Полоса прокрутки — это одна из тех вещей, которая просто работает. Она не мешается и легко даёт понять, насколько много контента. _{— madk @ reddit}

Шта? _{— magenta_placenta @ reddit}

…
Я не очень понял, что за проблему оно решает _{— jineshshah36 @ reddit}

(кто-то даже создал сабреддит Real Bad UX чтоб разместить там ссылку на этот проект)

Вместе с UX-экспертами, возбудился и я. Бесполезные проекты обычно никому не интересны, у меня есть пара таких. Но сейчас было очень непохоже — этот получился очень спорным, и такой движухи я ещё не видел. В течение следующих недель я попытался учесть основные комментарии и либо исправить что-то в самой библиотеке, либо добавить пояснения на сайте проекта. И одновременно выкладывал его на остальных ресурсах — градус фидбэка вроде бы стал смягчаться.

Здесь я хочу рассказать, какие области применения у интенса, и попробую объяснить, как я себе представляю «жизнь после скроллбара». А также предлагаю читателям покритиковать этот проект, обсудить скроллинг вообще, UX вцелом, и целесообразность замены традиционных элементов в частности.
Читать дальше →

---

[Из песочницы] Пошаговая инструкция по реализации загрузки файлов на сервер без перезагрузки страницы на PHP + Javascript

2015-04-20 20:01:52 (читать в оригинале)

Проблема

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


Читать дальше →