Ну вот, незаметно подкралась пятница. Но сегодня – кина/музЫки с ютюба не будет. И тем не менее, без пятничных забав – не останемся 🙂 Как-никак, конец недели, можно и слегка расслабиться.

А рассматривать мы сегодня будем несколько смешных страниц 404. Причем, рассмотрим не абы какие, а чтобы были забавные и интерактивные. Но сначала – немного общих слов.

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

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

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

Вот у меня, например – судя по яндекс-метрике – куча народа переходила по ссылке с сайта TopHotels, на запись, в которой была описана наша поездка в Египет. Но ссылка у них на сайте была в таком кривом виде, что естественно – вела куда угодно (в смысле – на 404-ую), только не на требовавшийся людям пост. И когда количество таких переходов стало зашкаливать за определенный предел – мне пришлось переделать свою 404 страницу, чтобы там было специальное сообщение для них, с правильной ссылкой. И вот как она стала выглядеть:

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

Выглядит это все не слишком забавно, но зато – функционально.

Но иногда вебмастера – те у кого с дизайном получше, чем у меня – размещают на ней какую-нибудь смешную картинку, или дополняют ее забавным текстом. Варианты таких страниц были рассмотрены уже тысячу раз – что на Хабре, что на Адме. Иногда –  функционал даже приносится в жертву дизайну и приколу, как например, вот здесь:

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

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

Пятое место – это страница на сайте Orangecoat:

К сожалению, ее интерактивность – это штука весьма условная: несмотря на отличную идею – авторы не потрудились сделать ее полностью интерактивной, чтобы каждый последующий ромбик открывался при нажатии на “Yes” или “No” над стрелочками. Более того – в конечных точках и предложениях что-либо сделать – нет даже ссылок, например – на поиск, или главную страницу.

За все это – как раз, лишь пятое место. Но тем не менее, пока не пройдешь по всей блок-схеме – уходить с этой страницы не хочется 🙂

Четвертое место: Сервер, который общается с Вами!

В принципе, эта страница – уже лет десять, как известный баян, первый раз я увидел ее еще году так в 2004-ом. Существует она в различных вариантах, с разными фразами и картинками. Вот здесь, например – еще один вариант, гораздо более красочно оформленный:

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

Третье место: 404 страница на сайте «Липецкого государственного театра кукол»:

Всего лишь поющий ежик – но как душевно поет и лабает на балалайке! Жаль, что песня только одна, и больше ничего другого не умеет. Но в остальном – очень неплохо. Да и вообще – сайт сделан очень здорово. Скажу честно, мне даже захотелось съездить в Липецк, и сводить детей в этот театр. 400 км… не близко, но посмотрим – может и заскочим.

Второе место – занимает страница 404, на которой можно не только попеть, но и потанцевать!

Более того – здесь уже не одна песня, а целый набор, между которыми можно переключаться! Ну и музычка, конечно, повеселее, чем в прошлом случае (впрочем, думаю, странно было бы видеть танцующих гастрбайтеров на сайте театра 🙂 ) Отзывы, конечно, великолепные – от:

Третий час танцую… Не могу прекратить((( 2 раза терял сознание… Как очнусь-продолжаю(((( 😀

и до:

Сделал стартовой! Танцуют все!

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

Ну, и наконец – первое место!

Это – 404-ая страница с одной из известнейших и величайшей игр всех времен и народов. Да-да – Pac-man снова с нами! В лабиринте, представляющем собой стилизированную цифру 404 – можно управлять Пакмэном, убегающим от привидений, и поедающим точки и фрукты. Вот, как она выглядит:

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

Блинки — красное привидение, в режиме преследования использует в качестве цели точку, в которой находится Пакман.

Пинки — розовое привидение, в качестве цели использует точку, на 4 клетки находящуюся впереди Пакмена (кроме случая движения вверх, когда в качестве цели используется клетка 4 вверх-4 влево от Пакмена. Предполагается, что вместе с Blinky такое поведение будет блокировать Пакменa (так как Blinky преследует сзади, а Pinky стремится оказаться перед Пакманом)).

Инки — голубое привидение, использует самый сложный алгоритм преследования: в качестве цели для движения точка, координатами которой является один из концов отрезка, другим концом которого является Blinky, а центром — точка на 2 клетки перед Пакменом. Получившуюся точку очень тяжело предсказать, так что Inky считается самым опасным привидением.

Клайд — оранжевое привидение, если Clyde находится дальше 9 клеток от Пакменa, то он использует в качестве цели Пакменa (как Blinky), если же Пакмен ближе 9 клеток, то Clyde меняет цель на точку «ниже» правого нижнего угла.

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

А если знаете еще какие-нибудь интерактивные страницы (не просто – с забавными смешными картинками, которых в яндексе при вводе 404 и поиску по картинкам вылазит 100500 штук, и о которых все уже десять тысяч раз писали, а именно – интерактивные, с мультимедиа) – пишите в комментах.