ТУСК v.3

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

Под конец года в студии был закончен затяжной проект. Не сказать, что он сложный или объёмный. Нет, просто некоторые неблагоприятные обстоятельства сделали из него долгострой. Я говорю о новой версии сайта «Трест Уралстальконструкция — Тюмень» (tusc.ru). Кодовое имя: «Туск».


Часть первая: Дизайн

Я считаю, что хороший дизайн — это дизайн, к которому не нужно привыкать, то есть не нужно прилагать каких либо усилий для этого. А хороший сайт — это тот, который не заставляет думать о таких вещах, как поиск информации. На хороших сайтах информация находится именно там, где пользователь ожидает её увидеть, а действия, которые нужно совершить для достижения какой-либо цели (например выбор товаров, оформление заказа и прочее) тривиальны и интуитивно понятны.

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

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


Для страницы «вагон-дома» нарисовал несколько значков и иллюстраций. Страницу стало интересно рассматривать, она выглядит куда приятней, чем страница с кучей текста и парой фотографий.


Для страницы Металлоконструкции тоже потребовалось нарисовать иллюстрации к каждому виду продукции. Так как я не иллюстратор (и особой тяги к этому не имею), было проблемой нарисовать геометрически правильные здания с геометрически правильными тенями. После нескольких неудачных попыток изобразить объекты в векторном редакторе, я решил воспользоваться 3D-редактором. Поскольку мне нужен был только геометрически правильный каркас, то я решил попробовать Google SketchUp, а не лезть в дебри 3ДМакса. Программа мне понравилась. Она очень проста в освоении и при этом имеет много возможностей для трехмерного моделирования. Однако, полученные модели всё равно пришлось обрабатывать в Фотошопе из-за особенностей рендеринга СкетчАпа.


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


Скриншоты разных версий макетов можно посмотреть на сайте студии.


Часть вторая: Вёрстка

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

1. Давно хотел попробовать применить свойство box-sizing: border-box ко всем блочным элементам изначально. Эксперимент показал, что верстать с border-box комфортнее, чем с классическим content-box. Хоть это свойство появилось только в CSS3, его сегодня поддерживает большинство браузеров, включая ненавистный IE8, так что можно его использовать без опасения.

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

3. Микроформатирование для Яндекса. Тема не раскрыта, прям так скажем.


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

  • Знаки рубля — это всё ещё больная тема для вэб-технолога, но положение сегодня намного лучше, чем, скажем, два года назад. Я сделал знаки рубля векторными картинками в формате SVG.

    Это скриншот одного фрагмента сайта. Обратите внимание: подложка представляет собой текстуру из растрового тайла (1), поэтому при увеличении и просмотре сайта на ретине текстура размывается. Знак рубля полупрозрачен (2) и имеет псевдоблик (3) также как и цифры слева.

  • Курсор в виде лупы (например на странице Строительство) тоже сделан векторным, однако пока оценить это смогут только обладатели макбука с ретиной.

  • Кнопка закрытия панелек:

    <svg height="14px" width="14px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"><path d="M7,0C3.134,0,0,3.134,0,7c0,3.867,3.134,7,7,7c3.867,0,7-3.133,7-7C14,3.134,10.867,0,7,0z M10.5,9.5l-1,1L7,8l-2.5,2.5l-1-1L6,7L3.5,4.5l1-1L7,6l2.5-2.5l1,1L8,7L10.5,9.5z"/></svg>

    Основная вкусняшка в таком подходе — задание атрибутов через CSS, например цвета.

  • Подложка для калькулятора (открывается по нажатии на кнопку «составить заявку»). Хорошо, что в SVG можно делать паттерны и использовать единожды описанные объекты несколько раз, что заметно сокращает объём кода картинки.

  • И ещё я пытался сделать баннер из трёх сегментов на главной странице тоже с применением SVG чтобы фотографии вырезались по векторному контуру и чтобы баннер хорошо масштабирования, но не вышло. Однако приобретён ценный опыт.


P.S. О знаке рубля.

Рассмотрим преимущества и недостатки использования SVG-знака:

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

К сегодняшним недостаткам можно отнести отличие рендеринга SVG от рендеринга текста в браузерах. Например в Хроме SVG рендерится с бикубическим (?) сглаживанием, а текст — с субпиксельным, что очень режет глаз. Также, при условии, что картинка задаётся в CSS (то есть один раз, в идеале) невозможно контролировать атрибуты картинки, такие как цвет и прозрачность отдельных её участков.

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


Дизайнеру от верстальщика, верстальщику от дизайнера: Цвет

Начну с короткого поста.

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

Преимущество их использования лучше показать наглядно
(RGB — непрозрачный, RGBa — полупрозрачный):



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


Кстати говоря, я несколько лет назад отказался от описания цвета в шестнадцатеричном формате (#333, #55aa44). Я использую более цивилизованный и понятный вид: rgb(255, 0, 150), rgba(0, 0, 0, .3) или rgb(50%, 0, 0).


Смерть — изобретение эволюции

Естественная смерть — изобретение эволюции.
К такому выводу меня приводят следующие рассуждения.

Жизнь, по моему мнению, — это активная организованная материя с функцией репродукции и начало жизнь берёт в появлении сложных молекул, абсорбирующих из внешней среды те вещества, из которых сама состоит и/или те, которые способствуют и/или требуются для репликации молекулы. Было бы странно, если бы эти молекулы были смертными изначально, то есть их самоуничтожение было запрограммировано. Из этого (от противного) я делаю вывод, что первичные формы жизни были бессмертными, а точнее «несмертными». Имхо, не имеет значения для данного вопроса место и время зарождения жизни.

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

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

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

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

P. S. Не смотря на то, что естественная смерть предусмотрена эволюцией, человечество ищет пути к избавлению от этой способности. Дело в том, что эволюционный процесс слишком медлен, для того, чтобы удовлетворить потребности человечества. Обретение вечной жизни без естественного старения — вопрос ближайшего будущего.

P. P. S. В теле взрослого человека путём апоптоза умирает от 50 до 70 миллиардов клеток ежедневно (Apoptosis in Carcinogenesis and Chemotherapy: Apoptosis in Cancer).

NB: Возможные проблемы с оперативной памятью

Заметка о известных мне на сей момент проблемах с оперативной памятью (RAM, ОЗУ), чтобы не забыть и другим рассказать.
Рекомендуется для начала обесточить материнскую плату (а лучше блок питания), а для диагностики лучше минимизировать конфигурацию машины до необходимых компонентов (т. е. убрать всякую шушеру типа звуковой платы, накопителей, на которых не стоит операционка и т. п.).

Итак ситуации:
  1. Компьютер включается на доли секунды и сразу выключается.
    Вынуть память из слотов и вставить обратно до полной фиксации (на большинстве плат это сопровождается щелчком). Если не помогло, то вероятно проблема не в оперативке.
  2. Компьютер запускается, но монитор находится в режиме ожидания (мигает лампочка на мониторе, например) и ничего больше не происходит
    Попробовать вставлять одну планку памяти в каждый слот. Если симптом наблюдается далее, значит:
    • данная планка не исправна, либо
    • процессор не правильно подключен, нужно проверить контакты сокета и процессора на наличие инородных хреней типа волос или термопасты;
  3. Определяется память только в N слоте (слотах), а в остальных — нет
    Если в BIOS они тоже не определяются, то проблема в материнской плате, если материнская плата их видит, но не использует ( это всё видно в биосе, cpu z, everest), то вероятно дело в том, как качественно прикреплён процессор (см. предыдущий пункт). Также это может случиться, когда в паре планки разных производителей/характеристик, тогда уж сам Бог велел проследовать нахуй.
  4. Память определяется в биосе, но доступна не вся а, например, 7,5 ГБ из 8-ми
    Нужно отрубить в биосе встроенный графический процессор/чип, но при этом нужна нормальная видеокарта
  5. Память определяется вся (4+ гига), но операционная система (винда, линух, юнух или ещё какая-нибудь махнатая) распознаёт только 3 гига
    Операционка 32-битная, нужно ставить 64-битную или в будущем (128-битную). Если не хотите — сам Бог велел…

Проблема с SSD

Мой ССД (corsair f90) похоже сдох. Сдал его в понедельник в сервис-центр Арсенала+, до сих пор от них ни каких сигналов. Маловероятно, что он подлежит ремонту и  удастся восстановить данные. Ну и хер с ним! Никаких особо нужных данных там не находилось, ведь для хранения я использую ёмкие HDD, но всё равно жалко: снова всё устанавливать, настраивать. Хотя может виндовый бекап пригодится.

Я решил, что следующим SSD будет intel 320 серии на 120 гб. К HDD я не вернусь, после того как испытал скорость работы системы с SSD. У 320 серии по некоторым источникам есть некий дефект, но гарантией на 3 года не каждый может похвастать. В общем, единственное, что может напрячь при выходе SSD из строя — это потеря времени на переустановку и настройку системы.

Дополнение 2011-08-11:
Арсенал+ вернул деньги за SSD.
Винду пока поставил на HDD, пока не куплю новый SSD в конце августа — сентябре.
Пригодился виндовый бэкап, а то бы пришлось дня два на настройку потратить.

Куда движется интернет

Раньше я называл Web 3.0 то, в чём видел следующий этап развития интернета. Но как выяснилось у Web 3.0 есть разные объяснения и некоторые расходятся с моими, так что я решил отказаться от применения этого термина.

Здесь я выскажу свои предположения относительно того, как будет изменяться сегодняшний Веб в ближайшие 5 лет. Моя точка зрения сформирована под влиянием идей Тима Бернерса-Ли (Tim Berners-Lee). Для меня он несомненный авторитет в том, что касается интернета. Ну ещё бы, ведь это он изобрел вэб.


Сегодня
  • Сегодня сайты (такие как социальные сети, поисковики, видео- и аудио-хостинги) накапливают в себе гигантское количество информации и эта информация практически не используется, а просто хранится;
  • бóльшая часть информации хранится в неформатированном виде (в виде текста), что очень затрудняет сбор и анализ такой информации «со стороны»;
  • Сайты плохо взаимодействуют между собой. Конечно авторизация с помощью твиттера или фейсбука это своего рода прорыв, но дальше этого пока дело не двигается.

Завтра

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

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

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

Что нужно делать сейчас? Требуется популяризация API (интерфейса для получения данных в форматированном виде) как необходимого условия существования сайта в будущем. Я думаю это произойдёт естественным путём.


Приручение информационного хаоса

За повсеместным введением на сайтах хотя бы API последует революция в информационных технологиях. Поиск чего либо в интернете перейдёт на качественно новый уровень. Представьте, вы задаёте вопрос поисковику типа: «покажи как мне, гугл, график изменения цен на бензин в Сибири за 2018-й год» и он вам строит график. Уау, круто.

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


Что дальше?

Если вышеописанное осуществится, то могу предположить, что после этого наступит ещё одна эра: вэб станет своего рода языком программирования сверх высокого уровня. Щас попробую коротко объяснить. Должны появиться приложения (я не уточняю, сайты ли это) нового типа — веб-конфигураторы. К примеру я захотел посмотреть фильмы любимого режиссёра, снятые в 21 веке. Я задаю веб-конфигуратору задачку:

user = icw82.ya.ru
bestDir = statisticus.ru((user@films.ru xor user@movie.com), director, best)
movies = idbm_movies(bestDir, 2000, 2099)
return googleVideo(movies)

Итог: страница со всеми нужными доступными фильмами, готовыми для просмотра.



P. S.

Несколько замечаний. 1) Не все сайты станут такими, всё будет происходить параллельно. Конечно никуда не денутся сайты компаний и т. п. 2) Пример с кодом — чисто для иллюстрации принципа, не обязательно всё будет так. Всё будет куда гуманней, я думаю.

SSD

Этой весной я купил себе SSD, а конкретно Corsair CSSD-F90. Сейчас на нём расположена операционка и  программы, которыми я пользуюсь. Эффект просто потрясающий: загрузка винды происходит за несколько секунд, при том, что с ней загружается ещё куча сервисов, висящих в трее (IM, KIS, торрент, апач и всякие апдейтеры). Программы типа иллюстратора загружаются намного шустрей. Короче, я очень довонен покупкой.

Подневольный карательный труд на пользу обществу

Предлагаю наказывать принудительными работами тех, кто намеренно мусорит. За каждую выброшенную в неположенное место бутылку — неделя хоз работ. Хотя, я полагаю, что некоторые мусорящие индивиды будут работать даже хуже, чем современные бытовые роботы. Посему пусть они будут тупо вырабатывать энергию, которую, в свою очередь, будут потреблять более эффективные роботы. Бу-га-га.

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