9 ошибок начинающего веб-разработчика

Мелкие противные привычки.

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

 

Торжество оформления

Начинающие веб-разработчики приступают к ÑÐ¾Ð·Ð´Ð°Ð½Ð¸ÑŽ сайтов, едва освоив HTML. CSS пока плохо изучен, или его применение кажется избыточным, а Ð¼ÐµÐ¶Ð´Ñƒ тем код наполнен массой обезличенных тегов. В ÑÑ‚Ð¾Ð¼ нет ничего страшного, пока разработчик не Ð·Ð°Ð´ÑƒÐ¼Ð°ÐµÑ‚ся о ÑÑ‚иле. Copy-Paste по Ð²ÑÐµÐ¼ тегам и Ð°Ñ‚рибутам, потерянное впустую время, пара пропущенных строк â€” ни Ð½Ð°Ð¼ÐµÐºÐ° на Ð¿Ñ€Ð¾Ñ„ессионализм.

Если вы Ð¿Ñ€ÐµÐ´Ð¿Ð¾Ð»Ð°Ð³Ð°ÐµÑ‚е создавать массивную страницу с Ð²Ð¾Ð·Ð¼Ð¾Ð¶Ð½Ð¾ÑÑ‚ью менять стиль â€” CSS необходим.

Ручные таблицы

Верстать страницу тоже правильнее с Ð¸ÑÐ¿Ð¾Ð»ÑŒÐ·Ð¾Ð²Ð°Ð½Ð¸ÐµÐ¼ языка CSS. Причины те Ð¶Ðµ â€” обезличенные структуры, наложенные друг на Ð´Ñ€ÑƒÐ³Ð° в HTML-файле â€” плодотворная среда для появления ошибок. На Ð¸ÑÐ¿Ñ€Ð°Ð²Ð»ÐµÐ½Ð¸Ðµ уйдет много времени, но Ð²ÑÐµ равно качественным кодом такой результат не Ð½Ð°Ð·Ð¾Ð²ÐµÑˆÑŒ.

Быть в Ñ‚ренде

Знать досконально, какие изменения произошли в Ð½Ð¾Ð²Ñ‹Ñ… версиях языка â€” святая обязанность разработчика. HTML5 и CSS3 уже не Ð¿Ð¾Ð´Ð´ÐµÑ€Ð¶Ð¸Ð²Ð°ÑŽÑ‚ многие теги и Ð°Ñ‚рибуты, популярные функции реализуются проще с Ð¼ÐµÐ½ÑŒÑˆÐ¸Ð¼ объемом кода. Пока браузеры скрывают некомпетентность разработчика, но ÑÑ‚о не Ð¿Ñ€Ð¾Ð´Ð»Ð¸Ñ‚ся вечно. Вспомните Flash.

Сторонний скрипт

Все любят JavaScript. Он Ð¿ÐµÑ€ÐµÐ´Ð°ÐµÑ‚ печальным статичным страницам частичку души и Ð¿Ð¾Ð·Ð²Ð¾Ð»ÑÐµÑ‚ активнее Â«Ð¾Ð±Ñ‰Ð°Ñ‚ься» с Ð¿Ð¾Ð»ÑŒÐ·Ð¾Ð²Ð°Ñ‚елем. Но ÐµÑÐ»Ð¸ вы Ñ€ÐµÑˆÐ¸Ð»Ð¸ всерьёз обложить сайт скриптами, выделите для этого внешний исполняемый файл â€” так и ÐºÐ¾Ð´ станет чище, и Ð¾ÑˆÐ¸Ð±Ð¾Ðº будет допущено меньше.

Заголовки-паразиты

На ÑƒÑ€Ð¾ÐºÐ°Ñ… веб-разработки ученикам объясняют, что использовать заголовок можно только один раз. Но Ð¿Ð¾Ñ‚ом пытливые умы добираются до ÑÐ°Ð¼Ð¾ÑÑ‚оятельности и Ñ€ÐµÑˆÐ°ÑŽÑ‚, что можно вложить в ÐºÐ¾Ð´ хоть 10 таких заголовков. Однако поисковые системы распознают только первый, остальные игнорируют. Хотите повысить SEO-привлекательность â€” используйте теги с ÐºÐ»ÑŽÑ‡ÐµÐ²Ñ‹Ð¼Ð¸ словами. Их Ð¼Ð¾Ð¶Ð½Ð¾ использовать сколько угодно, главное â€” сохраняйте иерархию и Ð¾Ð±Ñ‰ÑƒÑŽ структуру.

Картинный альт

Не Ð¿Ñ€ÐµÐ½ÐµÐ±Ñ€ÐµÐ³Ð°Ð¹Ñ‚е атрибутом alt для изображений, это может быть действительно полезно для вас и Ð²Ð°ÑˆÐ¸Ñ… клиентов. Вот почему:

  • растет рейтинг вашего сайта в Ð¿Ð¾Ð¸ÑÐºÐ¾Ð²Ñ‹Ñ… системах. Разумеется, при наличии грамотного описания;
  • появляется возможность ориентироваться в Ð¸Ð·Ð¾Ð±Ñ€Ð°Ð¶ÐµÐ½Ð¸ÑÑ… у Ñ‚ех пользователей, кто отключает картинки из-за плохого интернета, удобства чтения или экономии трафика;
  • сайт адаптируется под использование экранного диктора. Пользователь слышит описание в Ñ‚еге alt и Ð¿ÐµÑ€ÐµÑ…одит в Ñ€ÐµÐ¶Ð¸Ð¼ просмотра при необходимости.

Незакрытый тег

Как известно, многие теги не Ð½ÑƒÐ¶Ð´Ð°ÑŽÑ‚ся в Ð·Ð°ÐºÑ€Ñ‹Ñ‚ии, ведь браузер и Ñ‚ак распознает, где начался новый абзац или элемент списка. Но Ð½Ð°ÑÑ‚оящие программисты самодостаточны и Ð½Ðµ Ð·Ð°Ð²Ð¸ÑÑÑ‚ от Ð¼Ð¾Ð³ÑƒÑ‰ÐµÑÑ‚ва браузера. Вы ÑÑÐºÐ¾Ð½Ð¾Ð¼Ð¸Ñ‚е уйму времени на Â«Ð¿Ñ€Ð°Ð²Ð¸Ð»ÑŒÐ½Ð¾ÐµÂ» оформление тегов, если будете использовать современные редакторы кода.

Декларация об Ð¸ÑÐ¿Ð¾Ð»ÑŒÐ·Ð¾Ð²Ð°Ð½Ð¸Ð¸

Еще одно необязательное действие â€” заполнение тега DOCTYPE, в ÐºÐ¾Ñ‚ором декларируется тип текущего документа (HTML 4.01, HTML 5, XHTML). Без этого объявления в Ð½Ð°Ñ‡Ð°Ð»Ðµ кода браузер (например, Firefox) интерпретирует вашу страницу как устаревшую, используя соответствующие ограничения стиля.

Схемы разметки

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

С Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ тегов и Ð°Ñ‚рибутов вы Ð´Ð¾Ð½Ð¾ÑÐ¸Ñ‚е до Ð¿Ð¾Ð»ÑŒÐ·Ð¾Ð²Ð°Ñ‚елей и Ð¿Ð¾Ð¸ÑÐºÐ¾Ð²Ñ‹Ñ… систем важную информацию, без неё â€” это просто программно неэффективный набор букв. Пренебрежение эффективностью из-за лени â€” тупик в Ð¶Ð¸Ð·Ð½Ð¸ сайта и ÐºÐ°Ñ€ÑŒÐµÑ€Ðµ разработчика.

Лучший способ начать писать правильный код еще во Ð²Ñ€ÐµÐ¼Ñ обучения â€” просматривать страницы ведущих разработчиков и Ð¸Ð·Ð²ÐµÑÑ‚ных компаний. Там вы Ð¸ Ð¿Ð¾Ð»ÐµÐ·Ð½Ñ‹Ðµ Â«Ñ„ичи» почерпнете, и Ñ‡ÑƒÐ¶Ð¸Ðµ ошибки отыщете. А Ð½Ð°Ð¹Ñ‚и ошибку в Ð¿Ñ€Ð¾Ñ„ессиональном коде иногда очень приятно.