ermouth: (Default)
IMG_1269

Открыли бету мобильной версии, в общем-то, первую в нашей истории. По клику на картинку сразу она и откроется, хотя на десктопе довольно страшненькая.

При наличии десктопной версии (наш случай) мобильная версия не требует индексирования – индексируется основная. По этой причине мобильную версию не обязательно делать html-статикой, это может быть веб-приложение.

Так даже лучше, потому что нет оверхеда на передачу HTML-разметки, передаются только данные. Это для мобильного инета имеет значение.

Именно так тут и сделано. Приложение это – один манифест jQuery.my. Единственный браузер, в котором не заработало из тех, что мы дотянулись – первый iPhone 2007 года.

Я в самом деле очень этим горд, хотя оно такое всё довольно простенькое.

Дело в том, что это приложение – milestone ещё и с другой стороны. Оно полностью написано в специализированном IDE для манифестов, который теперь встроен в портальную CMS.

Изнутри редактор выглядит так:

Снимок экрана 2014-10-22 в 2.32.02

jQuery.my два года всего с небольшим. Оно вполне боевой стало технологией.

Ломаю голову, как мне это всё маркетить.

ermouth: (ang)

Снимок экрана 2014-09-24 в 0.01.07

Сделан целиком в редакторе из предыдущего поста. Редактор этот встроен в корпоративный интранет заказчика как веб-приложение.

В разделе “Прайс-листы” не только таблицы, но и интерактивные калькуляторы “с памятью”. Калькуляторы эти генерятся при выгрузке сайта на S3 – пользователь просто копипастит прайс из экселя, а парсер всё это в калькуляторы превращает.

Вообще, конечно, многообещающая технология. Скорость вёрстки прототипов или статических сайтов какая-то просто нереальная.

Интересно, что при сохранении документа с сайтом в CouchDB, сайт сразу, без выгрузки на S3, доступен в виде превью. Все файлы сайта хранятся как аттачи к документу базы, а они (аттачи) доступны в CouchDB по пермалинкам.

Также замечу, что статического хостинга дешевле чем  Amazon S3 просто не существует в природе. Счёт в доллар за месяц при 50К посещений – вполне себе реальность.

UPD. Спасибо [livejournal.com profile] service_picky за ценное замечание насчёт названия файла для скачивания. Pricelist.xls – это неудбно, надо писать в названии компанию, чтобы файлы не путались.

ermouth: (ang)

Переделали ещё один сайт СМИ – pravdasevera.ru. Стало так:

Снимок экрана 2014-08-22 в 21.26.00

А было до этого вот так:

Снимок экрана 2014-08-22 в 21.27.16

Ну, как водится всё javascript, в облаках и заточено под редакционный цикл новостного СМИ.

Из предыдущей самописной CMS было перезалито 30000+ материалов, сегодня редакция начала работу в новой системе.

Интересно, что платформа с первоначальной заливкой контента со стороны была развёрнута практически в том виде, что сейчас, менее чем за двое суток.

ermouth: (ang)

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

Называется это у нас “словари” и работает это примерно так.

Источники данных

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

В силу характера документооборота это практически всегда или экселевские файлы (иногда с имитацией иерархии), или SQL-выгрузки, или веб-сервисы. Так или иначе, это всегда таблицы. Чаще – эксель.

Типичные объёмы – от сотен до единиц тысяч строк в 5-15 колонок. Связность обеспечивается в момент приёма до уровня гиперссылочной целостности – куда надо подставляются пермалинки.

Хранение

Такие данные неразумно хранить в “разобранном” виде – проще их в момент поступления в систему конвертировать в жестко унифицированный формат и хранить единой записью. В силу того, что у нас вся система – javascript, эта запись, понятно дело, json. Вопрос, какой структуры.

Коль скоро мы собираемся искать на клиенте, нам эти данные надо туда передать. Также очевидно, что перед поиском их можно будет обработать. Стало быть, надо делать представление с минимальной избыточностью, хорошо пакуемое gzip-пером уровня выдачи на скоростных режимах (ритмичное, то-есть).

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

То-есть не [{name:"John", year:1980}, {name:"Ann", year:1990}],
а примерно {cols:["name","year"], data:[["John",1980],["Ann",1990]]}

Передача

Только в силу структуры экономия против по-объектного, и, тем более, против HTML-формата, получается многократная.

Раз оно получается короткое (100Кб словарь пакуется до 10-15Кб), хранится единым куском и не требует сборки, его можно и нужно инлайнить. И мы действительно до определённого порога инлайним эти данные прямо в страницы выдачи.

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

Рендер

Рендерятся данные после рендера всей содержательной статики. За выдачу данных с вкусным интерактивом отвечают jquerymy-манифесты.

Причём к одним и тем же данным могут быть привязаны разные манифесты, а к одному манифесту – разные данные. Например, в материале о расходах бюджета http://new.dvinaland.ru/budget/-e0ut55ow вверху бюджет диаграммой, а внизу – таблицей. Это одни и те же данные. Сама страница весит 450Кб, и эти данные занимают большую часть её объёма. При передаче это всё сжимается до 65Кб, размер небольшой картинки.

Там чуть менее 3000 строк данных в 5 уровнях иерархии.

Гибкость

С точки зрения редактора это выглядит как “поставить в этом вот место виджет Таблица с поиском и привязать к ней вот эти данные”. Это всё в админке интерактивное, драг-н-дроп, можно выбрать оформление, ширины колонок, фильтры и тп.

В силу того, что чётко разделены и стандартизированы попадание в систему, хранение, выдача и обработка, любое звено можно менять, не трогая остальные. Также любое звено легко форкается в целях тестирования.

С точки зрения юзера это выглядит как мгновенный отклик итерфейсов – все данные уже на клиенте и проиндексированы. Скажем, если на странице http://new.dvinaland.ru/gov внизу в справочнике наколотить gmail, можно увидеть, сколько ещё деятелей юзают вражью почту ггг.

За последние полгода эта цифра уменьшилась кратно, но остались ещё несознательные.

ermouth: (ang)

Открыли публичную бета-версию обновлённого портала областного правительства, в продолжение их пресс-центра (ровно год прошёл, да). Сначала скриншотики, кликабельны

2
1

Теперь чем оно всё круто.

0. Скорость

Вся система целиком, до последней строчки – javascript, и при этом практически любая страница после первого захода видна менее чем через секунду после клика (в России, в 120мс пинга до хостинга). Всё потому, что как и на пресс-центре применено блочное кэширование и в 99% случаев страницы отдаются целиком из кэша в RAM, даже без обращения к БД.

1. Облачная распределённая платформа

Оно плотно интегрировано с пресс-центром, это не просто одна CMS и стилистика, это единая платформа в облаках. Из соображений усиления периметра безопасности платформа состоит из нескольких компонентов, связанных только по https – скажем, головной сайт не хранит и не обрабатывает данные форм и авторизации, это делает специальный ресурс. Также на фронтэнде невозможно авторизоваться в админку – её там просто нет.

2. Импорт данных

Эта платформа импортирует данные из других систем – телефонные справочники приходят в SQL-формате, ежемесячные обновления бюджета – в CSV, афиши – в JSON и т.д. После импорта данные приводятся в унифицированный внутренний формат, а потом отображаются в виде табличек, диаграмм, списков ссылок и т.д.

Особенно полезны для вдумчивого читателя интерактивные диаграммы бюджета. На секторы можно кликать. Смею предположить, что такое представление бюджета для народа – лучшее по простоте навигации из всех, что я видел. Оно основано на одной заброшенной австралийской инициативе 5-летней давности по раскрытию open data. Мы из этого сделали технологию, в которой данные обновляются в один клик.

3. Контроль устаревания

Все материалы имеют “срок годности” – дату, после которой система начнёт напоминать о необходимости обновления. Такой фичи я просто вообще нигде в CMS не встречал, а для большого госпортала она абсолютно необходима. На предыдущей версии портала нереальные завалы неактуального старья – и про то, что информация протухла редактор портала мог узнать только случайно.

Мы сделали механику для исключения такого рода бардака.

4. Обращения и вообще формы

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

Использовать СНиЛС как на госуслугах – не вариант, это другой класс защиты персональных данных, мы бы не поместились в сроки и бюджет. Да и неудобный он до смерти, “интернет по паспорту”.

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

---

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

Началось всё вот с такой картинки:

image

Ну и да,  вся эта система управляется приложениями jquerymy. Внутри системы даже IDE есть простенький для горячей замены кода системы из браузера прямо, тоже на $.my.

Такие дела.

ermouth: (ang)
Расчехлю журнальчег похвастаться.

Выкатил jQuery.my 0.9.9. Обновил сайт jquerymy.com, теперь есть русская версия и офигительные демки с возможостью редактирования их исходного кода и запуска прямо на странице, в песочнице.


Контент написан в расширяемый редакторе наподобие того, что в Medium.

Вот демка этого редактора http://jquerymy.com/ru/meditor.html, всё интерактивное. То-есть это как OLE-объекты в Ворде примерно работaет. Есчо демка пишет в локалСторидж, так что а) перезагрузка страницы не убьёт правки, если вы редактируете, б) лучше не аттачить картинки больше мегабайта-двух.
ermouth: (Default)

Движок двинаньюса написан на не самом быстром языке и работает на не самой быстрой БД – тем не менее показывает прекрасную производительность. Это при том что каждая страница содержит динамические подборки, выбираемые по тегам и “радиусу” на оси времени.

Производительность достигается за счёт того, что страницы двинаньюса собраны из блоков и кэшируются не страницы целиком, а отдельные блоки. То-есть подавляющее большинство страниц при сборке даже если и требуют обращения к БД, то буквально единственного. Остальные блоки берутся из кэша.

Кэш – в оперативной памяти, полностью синхронный. Используется просто очень большой javascript-объект, hash table. Главные ключи формируются из параметра вызова шаблонизатора блока.

Получается, что каждый экземпляр приложения (при многопоточной реализации) имеет свой полный экземпляр кэша. Это неэкономно, на первый взгляд, с точки зрения использования RAM. Тем не менее, при моих прикидках у меня получалось, что мне никогда не нужно будет больше гигабайта памяти на ядро процессора – и Амазон EC2 прекрасно подошел.

Главная фича – как блоки инвалидировать, как кэшу узнать, что блок пора пересчитать при следующем запросе.

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

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

Теперь надо узнать, когда эти таблицы инвалидировать.

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

Физически объекты из памяти не удаляются – потому что они скорее всего будут вскоре заново сгенерированы и поверх переписаны, это раз. И потому, что удаление, скажем, 50К объектов (например, мы обновили какой-то часто используемый шаблонизатор) вызовет stall на время сборки мусора.

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

В однопроцессорной системе можно удалять по ttl, причём это вполне можно делать асинхронно. Но так как у нас система многопоточная (несколько одинаковых экземпляров js-процесса, по которым раскидываются запросы), гораздо проще по минимуму нагрузки эти потоки по очереди рестартовать – так и сделано.

С помощью этой же механики происходит рестарт потока при падении – оно очень живучее.

Со старта обслужено примерно 1.5М запросов к серверу, даже не чихнуло ничего.

ermouth: (ang)

За октябрь Амазон EC2 – это облачный сервис виртуальных машин – зачарджил меня на $658.

В сумме мы потратили 5000+ часов (всего в октябре 744 часа) нескольких VM, то-есть у нас там уже сеть – и это очень удобно.

Что интересно, чуть больше половины суммы – чисто вычисления, мы больше 100 часов полностью нагружали вычислениями 32-головый Xeon с 100 244 гигами оперативы, да всё это на дикой скорости SSD. Это охуеть каэш зверюга.

И я только что понял, что нам нужен CDN. Любопытно, что с момента продажи первого решения в облаке не прошло ещё даже года.

ermouth: (Default)

Открыли бета-версию – сайт пресс-центра правительства области. Оно не без косячков пока, но собственно для того и выкатили, чтобы уже в бою тестировать.

Снимок экрана 2013-07-09 в 0.10.56

Чтобы было понятно – до этого было так:

Снимок экрана 2013-07-09 в 0.13.57

Контент на них одинаковый, ога.

Read more... )
ermouth: (Default)

Блин, лёг спать в 3, хотел выспаться – я давно раньше 5 не ложился. Так нет, проснулся в 5 и спать не хочется. Поэтому вот запощу ещё один сайтег наш, Архангельская типография akcent29.ru:

Снимок-экрана-2013-01-31-в-5.18

Работает это всё на jQuery.my каэш ну и ещё два моих плагина используется в открытом доступе не опубликованных. Немного подёргивается интерфейс, это доведём ещё.

Сайт эксплуатирует схему как в предыдущем примере. Поверх простой CMS обитает несколько плагинов и манифестов к ним, они и оживляют статический html. И так же, как и предыдущий пример, этот сайт сделан почти без моего прямого участия – нарисовал всё @demi4ev, заимплементил @carpogoryanin, а провёл сделку супермонстр менеджер-машина-смерти drovnin@insta.

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

Попробуем в Акценте попечататься сами, если понравится, расскажу. Хозяйка оч понравилась – ответственная, не халявник у неё как обычно в типографиях. И на стене висят дипломы тех же дизконкурсов, что и меня есть )

ermouth: (Default)

Сайтег вот уже почти сделали красивенький. http://hauspizza.ru/

Снимок-экрана-2013-01-30-в-2.01

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

Фоткал мистер Ларин, макетег рисовал великий @demi4ev, а имплементил @carpogoryanin. А я так, руками водил и немного блин ещё недоводил – есть мелкие косячки.

Ну и этот сайт как раз эксплуатирует подход, о котором я писал. Предельно простая CMS, которая только данные хранит. Рендер внешнего вида страниц происходит в момент заливки данных и уже этот рендер (плюс сами данные) сохраняется в БД.

Это значит, что:

  • сайт индексируется нормально, поисковая система видит правильный html
  • пользователь видит всё меню сразу
  • сервер отдаёт по факту всю страницу в один запрос к БД
  • “оживляется” страница уже на клиенте – тем же самым скриптом, который генерил превью, генерится “живая” версия страницы (визуально идентичная, но с интерактивом)

Ну и залайканные пиццы помнятся в куки без всякой авторизации.

Под такой схемой CMS может быть вообще какой угодно, это не имеет ровным счётом никакого значения. Даже Битрикс сойдёт, без его модуля импорта естессно. Я как вспоминаю, как это сделано всё в Битриксе, липким холодным потом покрываюсь.

Помимо очевидного ограничения на длину меню – (сто-двести позиций ок, пятьсот – много, 1000 – тормоза) я не вижу у такой схемы других язъянов при исключительной простоте реализации.

М?

jQuery.my

Jun. 22nd, 2012 03:13 am
ermouth: (Default)

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

Так вот, я сделал под это всё сайт. Ну, то-есть делаю. Туториал с примерами уже просто чумовой. Ну и публичная бета для экспериментов.

Всё на кривом инглише, сорри ) Форма на заглавной тыкабельна и сделана как раз с помощью $.my.

Снимок экрана 2012-06-22 в 2.40.29

Оно реально очень крутое – там элементарный синтаксис, 7 слов надо запомнить, чтобы начать делать формы интерактивные.

Пример, что на jQuery.my рисуется при навыке за полтора вечера – на картинке вот, кликабельно:

Снимок экрана 2012-06-22 в 2.42.08

Тут форма с кучей взаимосвязей, ограничений, сложной формулой расчёта – всё один instance jQuery.my.

Веб-деятели, enjoy! Ну и RT plz )


ermouth: (Default)

После того, как в разделе Ноутбуки на formoza29.ru появилось больше 200 позиций – это просто новый магазин открылся – стало ясно, что алгоритмы фильтра надо переписывать.

Вот такой примерно выбор (клик на картинку – перейти на этот выбор) рендерился почти 5 секунд.

image

Я стал тестить – и получилось, что время жрут встроенные в SugarJS алгоритмы объединения и пересечения массивов. Я поискал другие реализации – и все небыстрые, потому что без индексирования.

Ровно в одно очень простое соображение у меня получилось их ускорить со сложности в O(n^2) до O(n log n). То-есть, по русски, для выборок в два массива по примерно 100 элементов – в 50 примерно раз выигрыш по скорости.

Чисто в интерфейсном плане это отсутствие лагов даже на медленных железяках. 50 крат скорости в одно соображение – это много. Оно стоит того, чтобы рассказать – на Javascript я такого ни в одной библиотеке не встречал.

Дальше будет интересно только околокомпьютерным монстрам.

Read more... )
ermouth: (Default)

Примерно с год назад меня один френд попросил порисовать макетеги для его проекта – и пропал. На письма не откликается, так что выложу я это тут – не пропадать же добру ) Клик на картинки – покрупнее.

3-реклама-свёрнута

Под катом ещё несколько.

Read more... )
ermouth: (Default)

Когда я взялся за новый сайт Архангельской Формозы, – это было в начале ноября, – мне нужно было решить, на чём сфокусировать свои дизайнерские и организационно-инженерные скиллы. Вводные были примерно такие:

  • до НГ надо сделать публичную бету с основным функционалом
  • это должен быть Битрикс – пожелание заказчика
  • есть база товаров, выгружаемая из 1С не последней версии, база актуальна – на ней работают офлайновые магазины
  • база – это очень неравновесное дерево (см первые два уровня на старом сайте и попробуйте чёнить понять) с кучей проблем:
    • некоторые маловажные группы товаров находятся на самом верхнем уровне
    • некоторые важные группы распределены по нескольким веткам
    • другие важные группы закопаны очень глубоко (2-3 уровень вложенности)
    • логика вложений групп по большому счёту для покупателя совершенно неочевидна
  • база не атрибутирована и не категоризирована – в каждой строке базы есть только описание и цена, никаких полей типа “призводитель” или там “объем памяти” или “диагональ”
  • в описаниях полный разнобой и каша
  • привести исходную базу к единообразным описаниям не получится – там в районе 9000 наименований, да и не ясно было, каким должно быть это единообразие
  • атрибутировать руками базу не получится: 1С-бухгалтерия – это чудовищное интерфейсное говно, на задание одного атрибута товара нужно сделать в районе 10 кликов и выборов из дропдаунов, а атрибутов может быть несколько (диагональ там, цвет, то-сё)

Чтобы было понятно, какие там описания товаров в базе – вот три строчки со старого сайта:

image

Это причём из одного раздела. Насколько различаются описания из разных разделов, лучше не знать.

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

Как я это решал (многабукф, неподготовленному читателю будет сложно :) …

Read more... )
ermouth: (Default)

formoza29.ru. Прошу любить и жаловать, пока в бета-версии.

image

Собсно, у Архангельской Формозы – второго (да ведь?) по объёмам компьютерного ритейлора на Северо-западе, наконец-то появился нормальный сайт, на котором можно не только скачать прайс, но и что-то найти. И даже заказать о_О

Сайт в стадии тестирования, где поругаться на глюки или что-то пожелать – написано в правой колонке прямо на сайте, или тут в комменты пишите.

Картинок по товарным позициям пока маловато – новый сайт работает на той-же базе, что и предыдущий – зато сделан нормальный интерфейс отбора товаров. Теперь, к примеру, можно выбрать себе розовый ноутбук, да )

image

Сделано всё поверх Битрикса. Должен вам сказать, что делать из Битрикса нормальный магазин – это всё равно что из шагающего экскаватора выпиливать реактивный самолёт. Тем не менее, мы справились за 5 недель.

Как генерятся тэги – а они генерятся на лету – расскажу в следующей серии.

Enjoy )

ermouth: (Default)

Тарам-тарам… Вашему вниманию предлагается 0.1β прототипа нового портала ЖКХ.
 

imageMyHome29.ru

 

Архангелогородцам и Северодвинцам – заходите, отмечайтесь, пишите полезные телефоны. Замечу, что написанные вами телефоны покажутся, скорее всего, и в соседних домах.

В Севске УК проставлены у примерно 75% жилфонда. В Архске – только 5%. Так что, дорогие Архангелогородцы, возьмите плиз квиточек, отметьте какая у вас УК.

Скоро будут лайки и жалобы. Карты сейчас иногда ничего не находят – это тоже скоро поправим.

Ругайте. Здесь в комментах или вКонтактеге.

ermouth: (Default)

Вчера, после месяца обсуждений, мы подписали контракт на перелицовку портала ЖКХ.

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

image

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

Ещё будет прикольная фича, что любой пользователь сможет к дому приписать аварийный телефон. Ну или просто полезный. Максимально упрощенная форма – типа “55-15-18, электрик Вася”.

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

Объявления по дому сейчас сделаны как лента комментариев вКонтакта к дому, и наверное такими и останутся пока.

Ну и самое для меня важное и знаковое.

У нас с заказчиком получилось договориться, что макеты и прототипы, после того, как их примет и использует у себя заказчик, становятся общественным достоянием.

У меня давнее убеждение, что финансируемые государством (читай – налогами) публичные проекты должны быть опенсорцными. И у меня впервые в жизни получилось сделать это вживую.

В общем, следите за новостями. Скоро можно будет тестировать альфа-версию.

ermouth: (Default)

Я вроде договорился с кем надо на некоторую перелицовку портала ЖКХ. Дел там полно – к примеру, там большой, но совершенно неюзабельный раздел базы знаний – к нему нужен человечий навигатор.

Структурировать его волевым решением и мозговым штурмом в узком кругу из 3-5 айтишников – занятие явно дурацкое. Тут это, воля народа надо )

В этой связи Френды из Архангельска и области, а поставьте плиз три галочки и допишите, про что я забыл, в опросе по ссылке:

docs.google.com/spreadsheet/viewform?formkey=dG1lRXBVQnlMeUdwTXQ4QlgzWlVXQXc6MQ

И да, КДПВ. Если всё пойдёт как задумывается, страница дома, нопремер, будет выглядеть примерно так (клик – крупнее):

house-with-info-1

ermouth: (Default)

Чуть меньше недели назад я тут написал грустный пост про правительственный дезигн. И пообещал в конце нарисовать, как должен на мой взгляд выглядеть портал ЖКХ (его современное состояние можно лицезреть по адресу gkh.dvinaland.ru).

Задача осложняется тем, что вряд-ли кто-то будет вносить серьёзные изменения в серверный код и надо использовать то, что уже есть. То-есть перелицовывать html и недостающий функционал добавлять по преимуществу уже в браузере.

Ну и конечно, смотрел я в первую очередь с точки зрения сценариев пользователя, а не инженера.

Всю неделю думал, порвал два баяна и вот что получилось в черновой итерации (тык на большие картинки – фуллскрин).

Так может выглядеть заглавная для неавторизованного пользователя:

image

То-есть было понятно, что основная дизайнерская задача – это максимально уменьшить количество кликов при выборе дома.

Вторая задача – стимулировать пользователей регистрироваться и писать самим в разделе дома полезную информацию – потому что очевидно, что УК этого делать никогда не будут, им просто пох всё.

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

Ну и редактура нужна – та имперско-канцелярская велеречивость, что сейчас, ужасна местами до оторопи (например вот премерчег, смотрим на заголовок и breadcrumbs бгг)

Но основное – это стимулирование регистрации и удобный выбор дома. И вот что мне придумалось…

Read more... )

Profile

ermouth: (Default)
ermouth

July 2017

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526 272829
3031     

Syndicate

RSS Atom

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Jul. 27th, 2017 04:32 am
Powered by Dreamwidth Studios