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



 

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

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


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

Группа: Active User
Сообщений: 946
Регистрация: 22.7.2013
Поблагодарили: 911 раз
Репутация:   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
Сообщений: 2114
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 609 раз
Репутация:   70  


Цитата(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  



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



Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Опрос (нет новых голосов) Опрос: Lottery Partner в поиске новых партнеров! Самые высокие ставки на рынке!
9 lotterypartner 1881 Сегодня, 14:50
автор: lotterypartner
Открытая тема (нет новых ответов) 90 статейных ссылок. Хорошие доноры для вашего сайта.
9 blogprogon 358 18.5.2018, 16:48
автор: 26rus
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыОценка сайта по абразивным материалам
Производственное предприятие
12 Antoncheg87 2700 18.5.2018, 13:38
автор: nikolay_web
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВопросы по Региональности сайта
регион, региональность, местоположение
2 Alexey_kzn 703 18.5.2018, 11:37
автор: Alexey_kzn
Открытая тема (нет новых ответов) Увеличение посещаемости сайта (яндекс, гугл, соц сети) - реальные люди
26 SANR 9361 17.5.2018, 19:31
автор: avega


 



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