X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Самые распространенные ошибки при создании сайта
MissContent
MissContent
Topic Starter сообщение 4.9.2015, 9:25; Ответить: MissContent
Сообщение #1


Завсегдатай
*****

Группа: Active User
Сообщений: 881
Регистрация: 22.7.2013
Поблагодарили: 897 раз
Репутация:   93  


Несмотря на то, что вопросу создания сайтов посвящено множество мануалов, статей и тем на форумах, веб-разработчики не перестают совершать одни и те же ошибки.

Я хотел бы поделиться наиболее распространенными ошибками, которые делают веб-разработчики, и советами как их избежать.

1. Использование устаревшей версии HTML

Ошибка: на заре появления интернета существовало гораздо меньше способов разметки, чем сегодня. Тем не менее, старые привычки отмирают с трудом, и многие до сих пор используют HTML, как будто мы были все еще в 20-м веке. За примерами далеко ходить не надо. Это использование <table> для разметки, <span> or <div> вместо более подходящих элементов или использование тегов, которые не поддерживаются в текущем стандарте HTML, таких как <center> или <font> , а еще злоупотребление &nbsp;.

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

Как избежать: Прекратить использовать <table> для разметки контента и ограничить его использование в таблицах. Ознакомиться с современными способами разметки, например, на сайте whatwg.org Для отображения содержимого правильно, используйте CSS (http://www.w3.org/Style/CSS/).

2. В моем браузере все работает

Ошибка: разработчик может быть поклонником какого-либо конкретного браузера или наоборот, относиться к нему предвзято. О кроссплатформенности могут просто забыть

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

Как избежать: Не забывать тестировать сайт в каждой версии браузера во время разработки. Есть много бесплатных сервисов, которые эмулируют работу различных браузеров: free VMs, site scanners, Visual Studio . Такие сайты как http://browsershots.org/ или https://www.browserstack.com/ предоставят вам скрины того, как страница будет выглядеть в разных браузерах/версия/ платформах. При использовании CSS не забывайте о «переустановке» по умолчанию, как это показано на meyerweb.com.

Если на вашем сайте используются элементы CSS для конкретного браузера, будете внимательны с использование префиксов -webkit-, -moz- или -ms-. Чтобы быть в курсе последних тенденций в этой области, советую ознакомиться со следующими статьями:

Microsoft Edge Dev Blog: A break from the past, part 2: Saying goodbye to ActiveX, VBScript, attachEvent
QuirksMode.org: CSS vendor prefixes considered harmful
Bruce Lawson: On Internet Explorer supporting -webkit- vendor prefixes

3. Плохие формы

Ошибка: Требовать от пользователя информацию. Помните, что посетители приходят на сайт за информацией, а не наоборот.

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

Как избежать: Пользователю должно быть понятно, какие данные вам нужны. Например, просьба оставить адрес вызовет недоумение у пользователя. Что именно вам нужно: домашний адрес, рабочий или может быть адрес электронной почты? Чтобы быть более конкретным, воспользоваться методами проверки данных, доступных в последних версиях HTML, как показано в этой статье. Независимо от того, как данные проверяются на стороне браузера, убедитесь, что они подтверждены и на стороне сервера.

4. Перегруженные страницы

Ошибка: Страницы перегружёны графикой и картинками, HTML разметка тоже может быть излишне сложной и раздутой.

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

Как избежать: не стоит рассчитывать на то, что у пользователей будет высокоскоростной интернет. Вместо этого еще раз посмотрите на ваш сайт и подумайте, что может его тормозить. Чаще всего это картинки. Есть несколько способов минимизировать потери.

Действительно эти картинки так необходимы? Если нет, их можно удалить. Проверить сайт на наличие «тяжелых» картинок можно с помощью этого сервиса.

Уменьшите вес изображений с помощью сервисов Shrink O’Matic или RIOT.

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

Еще один способ — это сжать залинкованные CSS и JavaScript файлы с помощью сервисов вроде Minify CSS или Minify JS.

Еще один совет — использовать современную версию HTML (см. ошибку№1) и не переусердствовать с использованием тегов <style> или <script>

5. Создание кода, который должен работать

Ошибка: Код протестирован разработчиком и он подтвердил, что все будет работать и на сайте.

Последствия: Сайты без надлежащего тестирования могут выдавать самые разнообразные ошибки конечным пользователям. Это скажется не только в потере пользователей. Сообщение об ошибке может дать намек хакеру на наличие уязвимости на сайте.

Как избежать: Человеку свойственно ошибаться и здесь нужно сосредоточиться не только на способах предотвращения ошибок, но и на их своевременное выявление. В этой статье посвященной использованию JavaScript для разработки Windows Apps вы найдете много полезных советов.

6. Написание разветвленного кода

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

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

Как избежать: Реализовать в коде функцию распознавания в зависимости от браузер/версии.Эта функция не только сократит длину кода, но и облегчит его чтение и управление. Реализовать эту функцию поможет библиотека Modernizr.

7. Отсутствие отзывчивого дизайна.

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

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

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

Оригинал статьи на английском языке: http://www.sitepoint.com/10-common-mistake...evelopers-make/


--------------------
Реальный конверт с реальной Фарма ПП!
Skype: cristina.rx2, ICQ: 676017111, Jabber: cristina.rx@jabb3r.org


Поблагодарили: (5)
2
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
profican
profican
сообщение 4.9.2015, 14:57; Ответить: profican
Сообщение #2


Старожил
******

Группа: Active User
Сообщений: 1242
Регистрация: 30.6.2010
Поблагодарили: 294 раза
Репутация:   36  


Цитата
Последствия: Сайты без надлежащего тестирования могут выдавать самые разнообразные ошибки...


Золотые слова, Miss Content, золотые слова...


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mmkulikov
mmkulikov
сообщение 4.9.2015, 17:36; Ответить: mmkulikov
Сообщение #3


Старожил
******

Группа: Active User
Сообщений: 2023
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 587 раз
Репутация:   68  


Цитата(MissContent @ 4.9.2015, 7:25) *
<span> or <div> вместо более подходящих элементов или использование тегов

Это еще одно предложение заменить div на section ?
Или чем-же div устарел-то?

Цитата(MissContent @ 4.9.2015, 7:25) *
Прекратить использовать <table> для разметки контента и ограничить его использование в таблицах

Исключительно с Вами не согласен. Хорошим тоном является использовать table там, где уже пол часа стилизуете div`ы что-бы они работали как table

P.S.
Но в целом я с Вами согласен.

Сообщение отредактировал mmkulikov - 4.9.2015, 17:37


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AnnaDem
AnnaDem
сообщение 7.9.2015, 15:45; Ответить: AnnaDem
Сообщение #4


Частый гость
**

Группа: User
Сообщений: 66
Регистрация: 2.9.2015
Поблагодарили: 2 раза
Репутация:   0  



особенно на счет адаптивного дизайна! прям о наболевшем(



--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Увеличение посещаемости сайта (яндекс, гугл, соц сети) - реальные люди
10 SANR 487 Сегодня, 14:52
автор: anchous
Горячая тема (нет новых ответов) Качественный копирайт и наполнение Вашего сайта
Подходи, торопись, покупай живо...
306 DroBit 86106 Сегодня, 12:55
автор: DroBit
Открытая тема (нет новых ответов) Чем сжимать картинки для сайта без потери качества
1st-finstep.ru - Заработок в сети и методы продвижения сайта
7 komarik_vlad 800 Сегодня, 9:47
автор: Mikki
Открытая тема (нет новых ответов) Переносится ли вес и тИЦ от входящих ссылок при 301 редиректе
11 Bel_Ami 2873 Вчера, 20:50
автор: alexandrrr
Открытая тема (нет новых ответов) Бесплатные советы по улучшению юзабилити сайта
5-10 пунктов на человека, публично в теме
7 Caterpillar 767 Вчера, 16:58
автор: Caterpillar


 



RSS Текстовая версия Сейчас: 12.12.2017, 14:57
Дизайн