Поисковикам читать

Уважаемые поисковики,

начните уже, пожалуйста, находить этот сайт, а то вы зае  заранее благодарен.

Ещё один редизайн

...просто до кучи. Набросок к фейслифтингу существующего сайта, по заказу рекламного агентства. Здесь одновременно светлый и тёмный варианты, для краткости (есть и раздельно прорисованные). Логотип вот... но его надо сохранить.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ну... вот.

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

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

Впервые одним из главных требований к сайту выдвинули 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.

Доводим до ума гуглофонт (woff)

Для одного (вот-вот запускаемого) проекта попросили использовать нестандартный шрифт. Хотел сперва объяснить про то, что, по-хорошему, шрифтовое разнообразие в вебе сводится к serif / sans-serif, но вспомнил про гуглосервис Web Fonts. Пошёл, нарыл шрифт (Comfortaa), встроил — почти хорошо, но не совсем хорошо. Очень корявый кернинг русской буквы B, не просто корявый — уродующий.

Но шрифт нужен именно этот.

С починкой отлично справился FontForge:

• взял URL шрифта из гугловского CSS
• wget'нул шрифтовой файл себе
• открыл фонтфорджем (ну и интерфейс, святых выноси! забавно посмотреть, как выглядел юниксовский ГУИ 10 лет назад)
• открыл букву В
• убедился, что из описанных к ней нескольких десятков кернинговых пар уродливы практически все
• грохнул их всех
• создал новый файл в формате woff
• закинул на сайт, подключил в CSS
• открыл сайт и констатировал профит.

FontForge, кстати, удивительно доскональная и профессиональная программа. К тому же нашла в шрифте десятка полтора косяков и исправила их — автоматишно.

Лего-трубное глюкало своими руками за день из jQuery и всякой фигни

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

Сам сайт, понятное дело, тоже о дымоходах.

Не имея понятия, как это реализовать (но понимая, что Flash исключается, во-первых, потому что он Зло, а во-вторых, по ряду причин — например, не знаю я его), сел и нарисовал детальки. Смешные.

Рисовал в Inkscape, не заморачиваясь масштабом, но так, чтобы детали стыковались хотя бы. Основных деталей порядка 30.

Дальше стал вникать в jQuery UI, конкретно — примочки draggable и droppable. Это заработало из бокса. Изобрести пришлось только клонирование детали, взятой с палитры. Примеры из интернета не годились.

Больше всего времени ушло на допиливание бульдозера до самолёта.

Преобразования (горизонтальный флип и поворот на несколько фиксированных углов) поначалу сделал чистым CSS. Но обнаружилось, что флип перестаёт происходить на повёрнутых картинках. Пришлось отрисовать флипованные картинки (благо не все: например, среди предыдущих деталей средняя — зонт — не флипуется) и дать им класс flippable, по которому цепляется обработчик src.

Проверил на четвёрке браузеров, в одном обнаружился косяк. Угадайте, в каком. Ага, хрен там. Опера. Детали частично не прорисовываются при перетаскивании, оставляют призраков. Убрал со страницы анимированный гиф (мало ли?), обновил Оперу до последней. Не-а. Надо ещё попробовать самую последнюю версию jQuery/jQueryUI, а если не стрельнет — считать это багом Оперы. Жалко. IE, и тот осилил задачу.

Поигрался немного, нарисовал схему дымохода на даче, какой он есть, потом — каким он будет, потом — каким я его хотел бы. Ну прикольно же!

Ну и продолжаем прибывать русский интернет

Сайт фитнес-центра F-City был открыт недели две назад, как-то просуетил этот момент. Проект рекламного агентства Brand-PR. Я ранее выкладывал (довольно стрёмные) наброски по этому сайту.

Для подшивки.

мой вклад в законы Мэрфи

Любая CMS стремится сделать разработку сайта настолько простой, чтобы легче, быстрее и эффективнее было бы создать сайт без неё.

О странных, но гордых хостингах - 2

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

О странных, но гордых хостингах.

Выясняя детали задачи по подтяжке очередного сайта, зашёл к хостерам (в том же помещении, наши родные *********онные системы) спросить, на что я могу рассчитывать.

― РНР есть? ―РНР нету, говорят.

― Про MySQL, наверное, спрашивать нет смысла? :-)

― Нету. Есть Java и Perl через CGI. Данные можно в текстовых файлах хранить.

Посмотрел в окно на бухту. Не увидел галер, чайных клипперов тоже. Ни одного, млять, угольного дредноута даже завалящего! Балкеры, танкера, скучный XXI век.

―Спасибо, ― говорю.

Посоветую клиенту сменить хостинг, когда надоест править тексты в исходниках через FTP.

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

Продолжаю прибывать русский Интернет: Окна Пластиковый Стандарт

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

http://okno-nakhodka.ru
http://окно-находка.рф

Продолжаю прибывать русский Интернет: Фишка Трейд

http://www.fishkatrade.ru

Сушеная рыба, твари подводные. Вкусно, кстати. Мне килограммовый мешок ставридки презентовали :-) во ознаменование спуска на воду. СтавридКа ― потому что её в килограмме штук 50 было :-D

...Шрифт Комик по всему сайту - это я не виноват... :-)

Продолжаем прибывать русский интернет

Месяц пропустил, но не выпадал.

Идут два больших проекта, тяжело, но идут.

Параллельно тусовка небольших проектов.

Только что со стапеля: expocar-dv.com ―продажа американских автомобилей в Находке.



Ничего особо революционного, разве что кастомное слайд-шоу пришлось сделать для заголовка: готовые плагины к jQuery как-то всё были не такие.

Разное новогоднее ― 4

Новогодние прибамбашки к сайту «Златы», особенно кролег и снегопад. Снегопадов мы, слава богу, богато видели на сайтах, но этот а) из настоящих снежинок (не слишком красивых, наверное, у пользователей ИЕ 6, которыми мы пренебрегаем); б) падает на оформление сайта в сугроб, и в) сделан с голой jQuery (если честно, использован микро-плагин random, но только потому что было лень расписывать Math.random)

Скромный гений РФ

...это не звание, это дополнительный URL моего оффсайта :-)

http://скромный-гений.рф

...а чо, скромно ведь :-)

Яndex.Карты: раздел выведен в люди

Сервис по отслеживанию позиции контейнеров подключен к сайту Bridge Logistics. Ещё не всё гладко и полно, но ― работает, ишь!



Пока что ввожу информацию сам и яростно бета-тестирую по ходу.

Яндекс-карты действительно гораздо удобнее того, что я помню о Гугле.

TODO: поиск станций через яндексовский сервис геокодирования.

Ах, да: посмотреть тут.

Осилил Яndex.Карты

Для небольшого, но симпатичного проекта потребовалось сделать отслеживание позиции контейнеров на карте нашей необъятной.

Слава богу, Google Maps были осилены уже больше года назад. API Яндекса мало чем отличается (более удобно, на мой взгляд; но Гугл тоже, кажется, ввёл новое API с тех пор). В общем, разобрался довольно быстро.



Это работающий прототип, ждёт одобрения и/или критики.

О пользе наблюдения за искусством мастеров

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

За это время успел поработать с профессиональными шаблонами, поэтому.

Теперь принципиально не делаю никакой разметки в HTML, кроме базовых структурных тэгов. Дошёл до того, что предал анафеме strong, i и иже с ними ― всё через span. Всё размещение и оформление только в CSS.

База отдыха «Анфас»: эскиз оформления сайта

Это в Волчанце, рядом с Маленькой Венецией.