Сайт МЦК г. Находка: Яндекс, вау.

Сайт ещё не сдан в полном объёме, и вообще запущен в нераннем сентябре.

Думаю, дай гляну, что там уже по выдаче: он вообще наглагне, нет?

По поиску "находка фестиваль": вау, третья позиция, сразу после Находки.инфо, тягаться с которой жесть.

По поиску "находка гастроли": пепец, первые две позиции.

Отношу эти несколько шокирующие результаты на то, что не поленился разметить события на сайте по схеме schema.org/Event.

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

Манипуляции ротацией

Потратил день на прокачку конструктора дымоходов для Dymunet.ru

Началось с малого: там есть (скоро - были) типовые схемы дымоходов, выдранные из буклетов производителей. Естественно, они разношёрстные. Поступило пожелание привести их в единый вид.

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

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

Когда я открыл Хромом схему, сделанную в Фоксе, детали с вращением это вращение потеряли.

При написании конструктора вращение через назначение класса оказалось неудобным. Вместо этого используется плагин jquery.rotate.3. Он назначает повёрнутому элементу один из вариантов CSS transform: transform, -moz-transform, -o-..., -ms-... Естественно, transform: rotate() из схемы, сделанной Фоксом, не работает в Хроме: там нужен -webkit-transform: rotate().

Ну ё-моё.

Дурной путь состоял в том, чтобы в Яваскрипте находить transform регекспом, вытаскивать значение, удалять transform и применять его заново вызовом .rotate() - и я этот путь прошёл. Во-первых, оказалось, что transform:  rotate() в браузере немедленно превращается в matrix(.....), и восстанавливать угол поворота приходится хитрым исчислением со всякими синусами. Это ладно, это полбеды. Беда в том, что это свойство просто оказывается none, если браузер его сразу не понял. Круг замкнулся.

Не может быть всё так безысходно, подумал я, и это было правильно.

Всё решение заключалось в создании у вращаемого объекта одновременно с браузер-специфическим свойством CSS абстрактного атрибута data-rotate="n". При сохранении свойство в любом его варианте на стороне сервера вырезается регекспом:

 /\s(-.*)?transform:\srotate\(.*\);/

При загрузке/внедрении в DOM надо просто сделать:

$('.canvas_element[data-rotation]').each(function(){
      $(this).rotate(parseInt($(this).attr('data-rotation')));
});

Проверка:

1. Схема, сделанная в Фоксе, правильно открывается Хромом:  http://dymunet.ru/?constructor,load,id=11
   
2. Схема, сделанная в Хроме, правильно открывается Фоксом:  http://dymunet.ru/?constructor,load,id=14

Остальные браузеры: надо проверить.

Мелкий насмешил...

говорит, пап, я, когда вырасту, стану президентом.

 Говорю, ничо, нормально.

- А звать меня знаешь как будут?

- ?

-Президент Деревьев.

- ???

- Ну, президент Медведев же был. А мне медведи не нравятся.

- А, понимаю, тебе деревья нравятся.

- Ну да.

 Уже не стал грузить первоклашку забавным лингвистическим казусом, что словосочетания "президент Медведев" и "премьер-министр Медведев" переводятся на английский одинаково: nobody noname.

Walnote: dropped

День отказов прямо.

После 2 лет прекращаю пользоваться сервисом защищённых заметок Walnote: их редактор работает так, что на планшете невозможно скопировать пароль из заметки. Тот же функционал включен в LastPass, так что не станем плодить сущности.

elRTE: dropped

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

Файл-менеджером остаётся elFinder, он летом зарелизился весомо, грубо, зримо.

Что-то мне кажется, я подобное уже писал.

Прокачал свою типа-CMS: опросы и голосования

Потратил день, чтобы написать для сайта ДКМ комбинированный модуль опросов и голосований, который теперь можно втыкать, где понадобится.

Прототипами послужили опросы, сделанные когда-то для «Вирго», и процедура голосования, сделанная менее чем когда-то (но тоже давно) для «Златы».

Опросы: всё просто, один раз выбираешь вариант, потом видишь результаты.

Голосования: требуется e-mail, для подтверждения переход по ссылке в письме.

Блокируются одноразовые ящики (по опыту «Златы», это один из самых распространённых способов злоупотребить).

У «Златы» всё сделано на PHP. В новом варианте PHP выполняет только абсолютно необходимую серверную работу, многое переложено на Яваскрипт.

Времени ушёл почти день, вдвое больше, чем рассчитывал.

По-хорошему, надо ещё дописать сюда кэширование. Управляемый кэш входит в типа-CMS, то есть напо просто дописать несколько строк тут и там.

Через три недели юзанья андропланшета...

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

Намбаван. Рисовалка. Infinite Design. Поиграл три дня и купил полную версию. Чёркать, набрасывать - самое то. В полной версии экспорт в SVG, кидаешь в дропбокс и дорабатываешь на десктопе Инкскейпом.

Намбату. Конечно, поставил Firefox. К сожалению, Firebug для мобильной платформы нет.

3. К Фоксу потребовался LastPass, без него как без ног. Мобильный LastPass через две недели требует купить его. Купил.

4. Редактор. Очень, очень надо редактор с простейшими, как мне казалось, функциями:

• редактирование по FTP, потому что я в принципе работаю только на живых площадках;
• подсветка пунтаксиса
• автоматические парные кавычки и скобки всех типов с установкой курсора внутрь
•  моноширинный шрифт
• автоотступы

Увы, такого пока не нашёл. Первый пункт отсекает сразу почти всех :-) Из оставшихся - чудо-уродец Touchqode (кривое выделение-копирование, зато своя, программерская клавиатура - тоже, понятно, на диво уродливая); Codeanywhere - очень сильно усечённый по сравнению с тем, что предоставляется на десктопе; из плюсов только гладкий FTP, остальное полные минусы, особенно манера показывать файл, в который вернулся, с начала - а если там полторы тыщи строк кода??? Похерил; помыкался и купил Android HTML Editor. У него нет третьего и пятого пункта, остальное в порядке или приемлемо.

5. Image Shrink Lite. Всего лишь уменьшалка фоток, но нужна постоянно. Она показывается как источник фоток при выборе файла в браузере или почте. Это очень удобно. Уменьшаешь фотку прямо перед загрузкой, несколькими тычками. Ни одного постороннего телодфижения.

6. Mockups Lite. Набрасывать схемы веб-страниц в Infinite Design не слишком сподручно, а тут - самое оно.

7. Конечно же, приложения Яндекс.Денег и Альфа-банка.

Сегодня шутки ради подключил usb-клавиатуру и мышь, а они тупо взяли и заработали. Попробую ещё подключить HDMI-дисплей, когда попадётся.

Студия Е. К. - первый набросок

Кактатак. В четырёх пустых углах должна происходить некая движуха, плавный фотки. Не знаю пока. Сволочной Блоггер замыливает рисунок.

960.gs: давай, до свиданья

960 Grid System

Foundation Framework

После двух лет использования 960.gs пришёл к выводу, что она устарела. Широкие мониторы стали общим явлением. Мобильные платформы стали общим явлением. Всё это не очень хорошо (или очень плохо) ложится в логику грида фиксированной ширины.

Незакрытые на сегодня три веб-проекта доделываются с 960.gs. Проекты, стартующие на этой неделе - сайт танцевальной студии и сайт по заказу авто - будут построены по текучей схеме и самоадаптироваться под клиентскую платформу.

Заодно брошу использование jQuery-UI, потому что аналогичный тулкит от Foundation гораздо более секси.

Саун***: открыт после редизайна

(звёздочками запикано, чтобы не влазить в поисковую выдачу).

С сайта только что снята заглушка, он открыт для посещения, хотя на следующие три дня ещё целое расписание доработок.

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

Владелец хотел переделать его в необычно исполненное портфолио с минимумом сопутствующей информации.

Было решено представить две сферы деятельности в виде двух симметричных раздвижных панелей, и так, чтобы смены страницы не происходило: контент меняется за закрытыми панелями.

Это решение, которое я сам (несмотря на авторство) назвал бы спорным, всё-таки выполняет свою задачу: по обустройству сайта люди должны понять, что и профильные, так сказать, объекты исполняются не самым банальным образом.

Технически это потребовало небольшого  количества кода на яваскрипте и ещё меньше на PHP, чтобы перехватывать ссылки на сайте и заменять их загрузкой контента через AJAX, сохранив при этом возможность открыть любую страницу по её прямому адресу. Если мобильная платформа детектед, эти навороты отключаются, и сайт становится простеньким и быстреньким (мобильное представление как раз входит в список доработок, там много неправильного). Это ещё не responsive design - на самом деле, благодаря этому сайту я узнал о таком веянии; надо освоить в будущих делах.

Ну... вот.

Логотипируем... часть 3

Кажется, это всё:

Продолжаем логотипировать студию

Первая часть была недавно.

Этот вариант (предсказуемо) отклонён, просто потому что он действительно проходной.

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

Нарисовал вечером на даче пальцем в Infinite Design (великая вещь, сегодня купил полную версию из-за экспорта SVG) и отправил заказчице как есть, то есть буквально скриншотом:

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

Пришли к выводу, что слишком много мельницы и слишком мало чувака. Стал демонтировать мельницу частями, пока не выпилил вовсе. Остался чувак, прыгающий за звездой (это сухой остаток после over 10,000 чуваков, выдудленных пальцем в Infinite Design в разнообразных антуражах).

Заодно пришлось переделать надпись и, увы, отказаться от росчерка EK, он никак не клеился.

Зато надпись прямо живьём с обложки собрника фантастики 70-х годов :-)

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

Затем решили попробовать фигуру, которая всё-таки танцует. Не знаю. Даже если её перерисовать удачнее, движения в ней меньше. Зато ближе к теме, да. Особенно если вспомнить мельницу :-)

В общем, конец где-то близок.

**аный Альфа-Клик

Оплата счёта: функционал временно недоступен, повторите через несколько минут.

Подключение андроидного приложения: функционал временно недоступен.

Вывод на карту Яндекса:  функционал временно недоступен.

Оплата мобильного: произошла неизвестная ошибка.

Периодически вообще логинить перестаёт.

Что за трэш, это банк или сапожная мастерская?

Бл*дь, ну опять банк менять, что ли?

Будущее не ждали...

...а оно припёрлось.

Впервые одним из главных требований к сайту выдвинули 100% адекватную работу на мобильных платформах: гугловской и эппловской.

Как на грех, именно этот сайт визуально сильно наворочен, анимирован, аяксирован, поэтому пришлось детектить мобильную платформу и выдавать модифицированные под неё яваскрипты, шалоны, стили (сразу: гуглить Mobile_Detect.php).

Дальше съездил втарил Iconia Tab.

Дальше стал изучать матчасть.

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

Второе и главное: до сих пор пиксел был пикселом. Больше этого нет. Аминь.

Пояснение: пиксел графики, пиксел в CSS соответствовал одному пикселу экрана. У мобильных устройств это (довольно) частный случай. Разрешение экрана, как правило, выше, чем у настольных дисплеев. Происходит пересчёт по коэффициенту, который у большинства устройств колеблется от полутора до двух. То есть примерно то, что делают телевизионные панели с аналоговым эфирным сигналом (и там результат таков, что я до сих пор смотрю кинескоп).

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

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

Варианты костылей:

1. Делать все картинку двухкратными, и масштабировать средствами CSS с учётом коэффициента конкретного устройства. Это увеличенный траффик и восторг фотодрочеров, вылизывающих кадр до выставочного состояния, чтобы потом какой-нибудь браузер его тупо уменьшил на N% по своему алгоритму.
   
2. Делать графику под дисплей пиксел-на пиксел отдельно, под два-на-пиксел отдельно... под полтора-на-пиксел отдельно... Создавать превьюшки скриптами во всех этих вариантах для загружаемых изображений... ахтунг...
   
3. Частичное решение проблемы - применение SVG, причём частичное в квадрате, потому что и поддержка SVG разнится у разных браузеров, разных версий, итэпэ.

 
Дальше, мобильные браузеры обычно масштабируют шрифты, причём это пользовательская настройка. Оно и раньше так было, но теперь это по умолчанию. Теперь смотрим: если текст как-то соотносится с фоновой картинкой, при этом текст растризуется с коэффициентом полтора плюс ещё 15%, а фон увеличивается на 50%, то, короче говоря, избегайте соотносить текст с фоном: всё равно не стрельнет.

И это только первое, с чем столкнулся. Подозреваю, далеко не последнее.

Как сказал один еврей, I've seen the future, brother: it is murder.