Типичные ошибки Веб-мастера

Каждый из нас сталкивался (и отнюдь не один раз) с ситуациями, когда страница сайта не открывается совсем, открывается очень медленно или "криво". И чаще всего мы с вами при этом просто уходили с такого сайта к его более работоспособному конкуренту. На что же стоит обратить внимание при создании своего сайта, чтобы его не постигла столь печальная участь?

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

Впрочем, одна из возможных причин может заключаться в том, что вебмастер готовил свои страницы, пользуясь каким-то одним браузером и одним разрешением экрана. Но как только сайт попадает в Сеть, он сталкивается практически со всеми возможными (и невозможными!) вариантами настроек компьютера пользователя! Ваш сайт могут смотреть из Internet Explorer'a или Мозиллы, из-под MacOS или UNIX, в разрешении 640х480 256 цветов или 2048х1536 True Color... О такой экзотике, как сотовый телефон или карманный компьютер, можно умолчать - таких пользователей не очень много и ходят они в основном по специализированным ресурсам.

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

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

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

В большинстве случаев картинки с плавными переходами цветов (фотографии, например) лучше сохранять в jpeg; картинки с резкими границами и большими одноцветными областями (например, скриншоты) - в gif. Обращайте внимание на размерность картинки - слишком большая иллюстрация может сильно сбить дизайн. Не забывайте в теге IMG указывать размерность картинки (параметры width и height) - при этом страница не будет "прыгать" во время загрузки, поскольку браузер сразу отведет для нее соответствующее место. Для большинства "смысловых иллюстраций" (графики, диаграмы и тому подобное) стоит прописывать название (параметр alt в теге IMG) - это название будет видно в том случае, если пользователь отключил в браузере загрузку графики.

Следующий момент, в котором часто ошибаются начинающие разработчики сайтов - это увлечение "продвинутыми" технологиями. Флеш-ролики и Java-апплеты - это, конечно, хорошо и красиво, но у части пользователей они отключены. И если у вас, например, навигация сделана в виде апплета, то такой пользователь просто никуда не сможет попасть. Предусмотрите вариант сайта без подобных "излишеств" - пусть он будет значительно менее красивым, но, как минимум, посетитель сможет добраться до информации. Кроме того, не стоит увлекаться возможностями, которые предоставляет JavaScript и прочие "хитрые" технологии: новичка очень легко распознать по бегущему тексту в статусной строке браузера (очень раздражает!), надписи "текущее время xxx часов" (у меня и так часы есть), "ваш IP-адрес такой-то" и прочим подобным вещам. Понятно, что, когда вы начинаете изучать веб-програмирование, у вас начинает кружиться голова от открывающихся возможностей, но стоит задуматься и о том, насколько все эти "навороты" нужны...

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

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

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

Вторая распространенная ошибка связана с регистром в именах файлов и адресах. Дело в том, что в Windows регистр значения не имеет, а вот в UNIX'е file.zip, File.zip и FILE.zip - это три разных файла, которые вполне могут находиться в одной директории. И если ваш сервер работает под управлением UNIX (что встречается чаще всего), то неправильное использование заглавных букв приведет к сообщению о том, что файл не найден (причем, тестируя эту же страницу на своем компьютере под Windows, вы никакой ошибки не увидите)...

Статьи по теме

Как быстро запустить Laravel на Windows

Все привет, меня зовут Павел Жуковский и сегодня я расскажу о том как быстро развернуть Laravel на Windows. Как развернуть чере...

2024-09-30

Next.js

На мой взгляд, Next.js - это лучший на сегодняшний день инструмент для разработки веб-приложений. Обратите внимание: руководство актуально �...

2024-09-25

OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения

OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения Либо ограничить доступ. OpenAI рассказа...

2024-09-05

WebSocket

Протокол WebSocket («веб-сокет»), описанный в спецификации RFC 6455, обеспечивает возможность обмена данными между браузером и сервером че...

2024-08-01

Ошибка 404: что это такое и как ее использовать для бизнеса

Для SEO 404 Error — возможность сохранить клиента и позиции в выдаче. Как это сделать, в статье. Окно «404 Not Found» вид...

2024-07-17

PostgreSQL 16. Изоляция транзакций. Часть 2

Введение Данная статья является продолжением первой части: "PostgreSQL 16. Организация данных. Часть 1". Как и первая часть, эта является объед�...

2024-05-27

Комментирование кода и генерация документации в PHP

Зачем нужны комментарии к программному коду? В каком виде их писать? Где они нужны, а где нет? Как правильно комментировать код? Как прид�...

2024-04-22

Что такое CSS-модули и зачем они нам?

В последнее время меня интригуют CSS-модули. Если вы о них не слышали — эта статья для вас. Мы рассмотрим, что это за проект, какие задачи о�...

2024-04-22

23 сервиса для эффективного экспресс-аудита любого сайта

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

2024-04-17

Яндекс переходит на новую версию Wordstat

Часть старой функциональности уже недоступна. Обновленный Яндекс Вордстат полностью перейдет на основной домен wordstat.ru 20 марта. С...

2024-04-08

Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть

Она умеет распознавать эмоции человека по голосу. Алгоритм-эмпат определяет характер речи пользователя: говорит он с явным негатив...

2024-04-08

Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI

Скорость обработки сложных научных статей составляет менее трех секунд. Новое поколение моделей ИИ от компании Antropic под названием Cl...

2024-04-08

Как пользоваться GPT 4 и Claude бесплатно и без VPN

Как бесплатно пользоваться GPT 4, его плагинами, а также новой нейросетью Claude 3? Это можно делать в рамках одного сайта, который называет�...

2024-04-08

Как использовать анимацию с помощью JavaScript-библиотеки GSAP

Узнайте, как использовать мощную JavaScript-библиотеку GSAP для создания захватывающих анимаций на веб-страницах, освоив основы и примеры. GSAP...

2024-03-13

Использование GSAP 3 для веб-анимации

Использование GSAP 3 для веб-анимации От автора: Greensock Animation Platform (GSAP) — это простая в использовании библиотека JavaScript для веб-анимации....

2024-03-13