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



 

Здравствуйте, гость (

| Вход | Регистрация )

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


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

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

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/


--------------------
Место для Вашей рекламы!!!


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


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


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


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


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


--------------------
Сдается, обращаться скайп avdesk-it-kmm
VPS от 5€
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AnnaDem
AnnaDem
сообщение 7.9.2015, 15:45; Ответить: AnnaDem
Сообщение #4



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



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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Продвижение молодого сайта
30 maxmer 6374 26.3.2024, 21:49
автор: c4p1t4l15t
Открытая тема (нет новых ответов) SEO-текст на главной странице сайта и в категориях
5 boltuk 1355 26.3.2024, 21:43
автор: c4p1t4l15t
Открытая тема (нет новых ответов) Какой % отказов нормален для сайта?
10 Aloof 2554 24.3.2024, 21:45
автор: Liudmila
Открытая тема (нет новых ответов) Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ.
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п
6 stu999 1553 21.3.2024, 20:45
автор: stu999
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыБыстрая индексация страниц сайта и обратных ссылок - 2Index
32 2Index 5846 18.3.2024, 16:33
автор: 2Index


 



RSS Текстовая версия Сейчас: 29.3.2024, 19:04
Дизайн