Веб-разработка

Ну, коли уж пошли «вредные советы» веб-программистам и дизайнерам, не могу не бросить свои пять копеек.

Кнопку отправки формы никогда нельзя делать типа submit, а во всех полях нужно глушить событие onKeyPress, если keyCode==13. Табулятор тоже лучше заглушить. (Любители этого подхода делали, к примеру, сайт Почты России.)

Лучше всего, если пользователю после ввода данных нужно будет навести мышку на кнопочку, посмотреть циклическую анимацию и в нужный момент щёлкнуть мышкой. Верх мастерства — если в остальные моменты анимашка делает не form.submit(), а form.reset(). Это отсеет ботов. («Хомяки».)

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

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

При наведении мыши на элемент навигации все остальные элементы должны изменяться, на худой конец меняться местами. Пусть пользователь вспомнит игру «Лабиринт», придумывая безопасный путь мышки до нужной ссылки. (Сайты многих гигантов электроники.)

Размещать кнопки управления текстом рядом с полями ввода неинтересно — лучше расположить их поверх, так, чтобы часть вводимого текста была закрыта. (Последний редизайн Гугла.)

Системные требования сайта должны выглядеть очень круто: пусть пользователь сначала выбьет из бюджета своего НИИ деньги на последний топовый компьютер вместо печатной машинки с 256 мегабайтами памяти (мы одних скриптов вдвое больше подключим, не говоря уже о картинках), а уж потом зайдёт на три секунды на наш сайт, чтобы получить-таки ссылку на Рапидшару и скачать справочник по радиоэлектронике за 1974 год.

Пользовательское соглашение лучше всего поместить в <textarea> — а вдруг пользователь захочет переписать несколько абзацев? (Рамблер несколько лет тому назад.)

Вершина мастерства верстальщика — повесить ссылочку на валидатор. Ну а лёгким флиртом может показаться одна-единственная ошибка на странице: XHTML-тег <img> на HTML-странице, соответствующий баннеру «Valid HTML».

Несколько лет назад, по молодости и глупости возомнив себя крутым хакером, решил я получить доступ к админской панели сайта одного товарища. Способ добраться до своей цели нашёлся очень быстро — «угон» дампа базы данных.
Не буду рассказывать о том, какими ухищрениями мне удалось этого добиться, но в скором времени заветный файлик был у меня. Ага! Вот она, таблица users. Находим нужные поля, копируем их значения. Имя пользователя: «admin», пароль... Ах ты засранец! Ну и пароль у тебя!

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

Лишь через некоторое время, всерьёз взявшись за изучение веб-технологий, я узнал волшебные слова «хеш» и «MD5».

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

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

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

Обязательно используйте полупрозрачность, особенно в меню. Особенно если стоит требование совместимости макета с Internet Explorer 6. И вообще, полупрозрачности как можно больше: это впечатляет пользователей.

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

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

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

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

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

Меня в прямом смысле слова утомили те милые люди, которых называют кратким и ёмким словом «быдлокодер». Сайты, построенные такими людьми, целиком и полностью состоят из яваскриптов. В своём стремлении то ли поразить пользователя, то ли осознать собственную крутизну такие разработчики даже форму логина, состоящую из двух полей и кнопки ввода, пишут на JS. Регистрация на их сайте происходит в одном домене, логин идёт через другой, а сами ресурсы сайта находятся на третьем.

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

Я не против использования JS там, где это действительно необходимо. Но если скрипты пишутся даже для того, чтобы нарисовать на экране кнопку, — это, друзья мои, перебор. Не надо выпендриваться — никто не подвергнет вас остракизму, если вы (о ужас!) напишете окно для отправки личных сообщений на примитивном HTML.

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

Кликаю, заполняю форму регистрации. К полям «Имя» и «Отчество» прикрутили списки: вводишь начало имени, а сайт сам дополняет. Ввожу «Олег» — система выдаёт список из трёх пунктов:

— Олегович;
— Олеговна;
— Олеговно.

Неужели был прецедент?

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

Итак, день «Д», час «Ч», с хостинга удаляется всё, заливается новый движок, настроенный на локалхосте, с натянутым старым дизайном и восстановленными постами. Создаётся пост о баг-репорте... Что бы вы думали? Единственный отзыв: «Ух ты, наконец-то написал систему авторизации пользователей и добил категории!» Решил пока не раскрывать тайну.

Наша команда зарабатывает созданием бизнес-приложений с веб-мордой (проще говоря, сайтов) для нежадных дядь из-за бугра. Как-то раз обратилась к нам некая европейская контора, желающая продавать необычные гаджеты из Китая в интернет-магазине. Сам магазин был вполне типовым, и через пару месяцев в интернетах вовсю красовались бета-версии приложения для Англии, Франции, Норвегии и Финляндии. Что надо для счастья? Локализуй себе готовый продукт и получай денежку. Но нет, заказчики не дали нам скучать.

Следующей страной для открытия онлайн-магазина оказался Израиль. Я не говорю о рабочих моментах с поддержкой чтения справа налево и работой с очередной доморощенной платёжной системой. Веселуха началась, когда мы подняли бету и отправили ссылку заказчику. Через день приходит письмо: «Парни, всё отлично, но наш израильский инвестор требует, чтобы интернет-магазин был кошерен, так что будьте готовы». К чему, мы узнали уже через пару дней, когда специально нанятая комиссия начала исследовать наше приложение на предмет соответствия кашруту. Уж не буду рассказывать всю процедуру, но нам в числе прочего пришлось проходить специальное интервью с членами комиссии через cкайп. Выглядело это так: у всех членов команды в профиле были изменены фотографии (мне вставили фото какого-то деятеля в шляпе и с пейсами) и имена (кто бы подумал, что мне на старости лет придётся представляться Абрамом Мульсоном?) Во время интервью рядом сидел приглашённый раввин, который слушал вопросы и суфлировал ответы. В результате комиссия постановила, что одно из главных условий кошерности продукта — в процессе приготовления должны участвовать только евреи — нашей командой было выполнено на все сто.

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

Работаю менеджером сайтов. Отправили клиенту запрос на уточнение структуры сайта, в инструкции чёрным по белому написали: «Нужные разделы выделите синим; разделы, которые нужно удалить — жёлтым». Клиент умудрился при выделении использовать аж три цвета: синий, жёлтый и зелёный. Спрашиваем, что бы это значило? Оказывается, зелёным были выделены пункты, над которыми клиент ещё раздумывал.

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

У меня есть свой клан сеошников, которые в любой момент подскажут и помогут в решении непредвиденных вопросов.

У меня есть своя «бригада». Работаем мы командами, в каждую из которых входят два программиста, два дизайнера, один менеджер и один SEO-специалист — такой отряд выделяют на средний заказ.

Я знаю, чем займусь вечером. Сотрудники у нас достаточно молодые, поэтому системные администраторы с разрешения начальства подняли корпоративные игровые сервера, направленные на сплочение коллектива, доступ к которым открыт в обеденный перерыв с 13 до 14 и после работы с 18 до 22 часов.

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

* * *

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

Заказчиком у нашей команды тогда выступала новая юридическая контора, директор которой слепо верил, что когда ему сделают сайт и раскрутят в поисковиках, клиенты посыплются на него горой. Ну что ж, сайт готов, по требуемому запросу он первый, но... телефон не обрывается от звонков! Заказчик в панике: сверяет контактные данные, указанные на сайте, проверяет телефоны и в конце концов звонит мне: «У вас там что-то сломалось! Я не буду вам платить! Нам никто не звонит, а должны уже звонить! Почините, или я подам на вас в суд!» Попытки объяснить заказчику, что да как, ничем положительным не оборачиваются — он не хочет ничего слушать.

Пребывая в полном шоке от сложившейся ситуации, проклиная тот день, когда я решился уйти из фриланса, звоню соклановцу и описываю ситуацию со всеми подробностями, изливая всё, что накипело. Когда я иссяк, последовал чёткий, как часы, ответ, который и дал понять разницу между фрилансом и нормальной работой: «Вопрос решён: заявку на обзвон номера менеджерам кинул. А ты езжай по следующему заказу».

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

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