Продолжим тему нормальных урлов. Некоторые ребята думают, что хороший урл получается, если бездумно заменить в адресе всю служебную хрень на прямые слеши. Эти идиотские урлы видны невооружённым глазом. Например, вместо site.ru/?article=4972304 делают site.ru/article/4972304/.

Такой «красивый» урл ничем не лучше исходного. Он даже хуже: он показывает нам древовидность там, где её нет. Кажется, будто текущая страница — дочерняя для страницы site.ru/article/, на которой 404 или вообще какая-нибудь ошибка ПХП отображается.

Вместо article должно быть написано articles, а по адресу site.ru/acticles/ должен быть список статей. А если он и так показывается на главной, то страница отдельной статьи должна быть дочерней по отношению к главной: site.ru/4972304/. Если уж очень хочется запихать слово article в адрес, то нужно писать: site.ru/article-4972304/.

Урлы с бессмысленным набором слов и чисел, разделённых слешами, являются следствием бездумной конвертации внутренней логики веб-приложения в формат, «похожий на урл». Есть какой-нибудь класс Article, или файл article.php, или функция article (), и в урл его название и попадает.

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

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

Задача: сделать такую же штуку в E2 (проверить пароль, не перезагружая страницу, не проблема; мы займёмся только анимацией).

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

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

Колебания естественно ассоциируются с синусом, но нам нужно, чтобы они постепенно затухали. Первое, что пришло мне в голову — домножить синусоиду на гиперболу: (1 / x) × sin x.

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

Предел sin x / x в нуле равен единице, что, конечно, лучше, чем бесконечность но всё-таки хочется, чтобы в точке 0 значение было нулевым, иначе в начале окно вдруг окажется на сто (например) пикселей правее, чем было до начала анимации. Нам нужно, чтобы гипербола в нуле получила конечное значение, тогда домножение на sin 0, равный нулю, даст ноль. Сдвинем гиперболу чуть левее, чтобы её точка разрыва уехала в неинтересующую нас отрицательную область: [1 / (x + 1)] × sin x.

Поскольку гипербола при увеличении x стремится к нулю, но никогда не достигает его, наши колебания, несмотря на затухание, будут продолжаться бесконечно. Можно, конечно, остановить их, когда они станут меньше пикселя, но намного проще чуть-чуть опустить гиперболу, чтобы она всё же достигла нуля через некоторое время: [1 / (x + 1) − 0,01] × sin x.

Чтобы было понятнее, взглянем на саму гиперболу, без синуса (1 / (x + 1) − 0,01):

Сдвиги на 1 левее и на 0,01 ниже взяты от балды; после того, как скрипт уже написан, можно заниматься повышением реалистичности путём изменения этих чисел и примешивания всяческих коэффициентов.

Итоговая формула, с учётом перерисовки каждую 0,01 с, у меня получилась вот такая: [1 / (x^1,25 / 20 + 0,5) − 0,05] × sin (x / 2) × 25.

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

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

Будет классно, если читатели поделятся своими примерами того, как знание того или иного предмета помогло им сделать лучший дизайн.

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

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

Дело в том, что на Маке у окон обычно нет «рамки»: сверху заголовок (возможно, с тулбаром), а под ним идёт от первого до последнего пикселя по горизонтали — внутренности окна. Если у окна нет строки состояния, то «контентная область» и снизу продолжается до конца.

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

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

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

Короче, дарю всем желающим ПСД-шаблон (68 КБ), в котором все значимые элементы браузера сделаны отдельными слоями, в т. ч. заголовок окна (с правильной рельефностью) и урл в виде текста. Ширина картинки — 1000 пикселей. В названиях слоёв используется нехитрая нотация: точкой заканчиваются слои, которые по любому должны быть, а вопросиком — те, которые можно включать/выключать по вкусу. Ещё можно вместо обычного заголовка выбрать 5 табов, чтобы реально оценивать влезабельность своего тайтла.

Добавлено в 14:32: Сергей Чикуёнок оставил полезнейший комментарий.

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

Кстати, повесил её на главную.