Стандарты создания веб сайтов кратко

Обновлено: 03.07.2024

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

Соответствие действующим стандартам

Формированием стандартов сайтов занимается организация World Wide Web Consortium. Она не является официальной организацией по стандартизации. Ее деятельность стала результатом совместных действий различных экспертов в области веб-технологий. World Wide Web Consortium дает определенный набор рекомендаций по поводу удобных методов обработки документов и иной информации в электронных файлах и системах.

Значительная часть подобных мнений рекомендательного характера становится основой для установки стандартов веб-разработки. Сегодня разработка современного программного обеспечения происходит под влиянием больших требований по безопасности, совместимости и удобности. Качество создаваемых информационных продуктов должно быть на высоком уровне. Непрерывный рост к качественным характеристикам программного обеспечения стимулирует изобретение и внедрение все новых стандартов международного уровня и регламентированных технологий. Все они способны автоматизировать основные процессы жизненного цикла внедренных технологий.

Готовые работы на аналогичную тему

Спектр требований к качеству зависит от назначения и области использования программного обеспечения.

Все это приводит к тому, что необходимо разрабатывать и внедрять на практике определенные стандарты, в соответствии с которыми будут работать остальные разработчики веб-продуктов.

Организации, формирующие стандарты

В настоящий момент существует еще ряд организаций, которые осуществляют работу по стандартизации веб-ресурсов. Среди них выделяют:

International Organization for Standartization (ISO);
Internet Engineering Task Force (IETF);
Unicode Consortium;
American National Standarts Institute (ANSI);
Ecma International.

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

Рисунок 2. Международные организации по стандартизации. Автор24 — интернет-биржа студенческих работ

IETF представляет собой международное сообщество операторов, веб-дизайнеров, а также производителей и исследователей в Сети, которые своими усилиями развивают Интернет.

Управление стандартом Unicode для многоязычных наборов символов принадлежит организации Unicode Consortium.

ANSI придерживается политики развития Сети и обеспечивает работу различных стандартов.

Европейская ассоциация по стандартизации информационных и коммуникационных систем Ecma International также осуществляет обширную деятельность по стандартизации сайтов.

Под соответствием существующим стандартам понимают, что интернет-ресурсы обладают следующими общими признаками:

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

При установлении полного соответствия действующим стандартам обеспечивается:

Доступность веб-страницы. Можно просматривать содержание сайтов при помощи различных браузеров и мобильных устройств.
Совместимость. Она должна иметь линейное направление снизу-вверх. Стандарты, которые придут на смену современным, строятся на основе нынешних технологий. У пользователей не должны возникать проблемы с просмотром сайтов после обновления версии браузера или иной системы в Сети. Стандарты призваны в долгосрочной перспективе обеспечить полноценный доступ к хранящейся информации веб-ресурсе без потери качества и данных.
Быстрая загрузка и отображение файлов, хранящихся на сайте. Смысловая разметка уменьшает объем файла и сокращает время, требуемое на обработку браузерами, другими программами или устройствами. Подобный принцип применяют в поисковых системах, что дает гарантию получения необходимой информации пользователю в предельно сжатые сроки.

Кроссбраузерность

Кроссбраузерность – правильное отображение страниц сайта в разных браузерах.

Без процедур по стандартизации при правильном использовании стандартов разметки сохраняется полноценная способность просмотра сайта в различных режимах без потери качества. В настоящее время пользователи во всем мире используют множество популярных браузеров. Среди них Google Chrome, Mozilla Firefox, Internet Explorer, Opera и другие. При работе в этих браузерах пользователи сталкиваются с возникновением новых версий программ. Каждая версия имеет собственный режим отображения, что также сказывается на качестве работы.

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

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

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

Степень соответствия сайта описанным критериям является показателем качества его разработки.

В России сегодня отсутствует детальное законодательство, устанавливающее правила стандартизации сайтов, однако международные общепринятые стандарты ISO/IEC стали чрезвычайно важными и объёмными критериями качества.

Аннотация: Кратко обсуждаются преимущества использования стандартов Web, почему они не общеприняты, как должны были бы быть, и как курс намерен решить эти проблемы. Рассказывается, как структурирован курс, для кого он предназначен.

Введение

Уже в течение некоторого времени меня преследовала мечта. Моя работа за последние 8 или 9 лет, так или иначе, была тесно связана с образованием: занимался ли я выпуском и редактированием технических книг, чтобы помочь людям создавать с помощью имеющейся технологии превосходные продукты, обучал ли новых сотрудников в различных компаниях, в которых я работал, или редактировал и писал учебные статьи, чтобы помочь людям использовать программное обеспечение Opera. Я являюсь также страстным поклонником Web , и верным сторонником открытых стандартов Web . Я хочу внести свою лепту, чтобы помочь сделать сеть Web лучше, чем она есть, и считаю, что это будет способствовать образованию, будет ли это обучение людей сотрудничеству и взаимному уважению друг к другу, или обучение их тому, как заставить сайты Web работать с различными платформами и устройствами и быть доступными людям с ограниченными возможностями. Ключевым моментом в последнем случае являются стандарты Web , поэтому я решил попробовать приложить свое время и энергию для чего-то, что могло бы помочь улучшить принятие стандартов Web сегодня и в будущем. Это вертелось в моей голове в течение какого-то времени, но, в конце концов, осуществилось в компании Opera - большое спасибо моим замечательным работодателям за то, что они платят мне за это. Одно из моих желаний было, наконец, реализовано.

Таким образом, в этой лекции я представляю продукт большой серьезной работы за последние несколько месяцев (моей и многих других людей) - Учебный курс по стандартам Web ( Web Standards Curriculum ), который создан с целью предоставить каждому желающему надежный фундамент для проектирования/разработки Web , независимо от того, кем он является - совершенно бесплатный для использования, доступный, и не предполагающий никаких предварительных знаний. Я ориентирую его главным образом в университеты, так как считаю, что стандарты обучения стандартам Web являются тем, что отсутствует во многих университетах. Я слышал истории о студентах, которым снижали оценку за использование стандартов Web в курсовых работах, так как система оценок была устаревшей, и я слышал истории об отчаявшихся работодателях, которые во время собеседования с выпускниками университетов, претендовавшими на должности связанные с Web , обнаружили, что выпускники не имеют фактически представления о реальной разработке в Web . Если вы учитесь в передовом университете, в котором стандарты преподают разумным образом, то я рад приветствовать вас - давайте будем общаться!

В данной лекции рассматриваются следующие вопросы:

Зачем нужны стандарты Web? Кратко обсуждаются преимущества использования стандартов Web , почему они не общеприняты, как должны были бы быть, и как мой курс намерен решить эти проблемы.
Как структурирован курс. Заголовок полностью отражает содержание; этот раздел рассматривает также вопросы представления материала преподавателем для его эффективного использования в процессе обучения.
Для кого предназначен этот курс? Когда я говорю "кто угодно", что я, действительно, имею в виду?
Оглавление. Перейдите к этому разделу, если хотите пропустить общие разговоры и перейти прямо к изучению.

Зачем нужны стандарты Web?

Основные причины, почему принятие стандартов Web в работе по разработке/ дизайну Web будет полезно во многих ситуациях, подробно рассматриваются в "лекции 4" , но здесь они кратко перечисляются, чтобы определить общую картину. Использование стандартов Web предоставляет следующие выгоды:

Однако даже при наличии всех этих преимуществ большинство сайтов в Web все еще не придерживаются стандартов Web , и многие работающие сегодня разработчики Web по прежнему используют плохие, устаревшие методики. "Почему?" спросите Вы. Для этого существует множество причин - люди будут ссылаться на отсутствие образования, политику компании, отсутствие необходимости изучать стандарты , так как зарплату платят в любом случае, большие трудности изучения, поддержка стандартов в браузерах Web … давайте рассмотрим каждое из этих утверждений более подробно, а затем посмотрим на контраргументы, чтобы попробовать избавиться от любых оправданий неиспользования и незнания стандартов .

Отсутствие образования: Здесь имеется проблема, но это и является одной из основных причин создания данного курса. Многие университеты не преподают стандарты Web в посвященных Web курсах, а многие учебные курсы часто содержат устаревшие методики, и их трудно изменить в связи с бюрократией. Книги и специальные курсы обычно бывают дороги. Но подождите! Сейчас мы представили курс, который совершенно бесплатен, и распространяется в университетах и т.д., чтобы помочь им сделать эти изменения, поэтому в действительности теперь здесь нет никакого оправдания.
Политика компании: Несомненно существуют компании/учреждения, которые до сих пор имеют действительно старые, несовременные Web -сайты, и политики, которые заставляют сотрудников использовать устаревшие браузеры, но ситуация с этим становится лучше. А теперь, когда имеется доступный бесплатный курс, показывающий, как сделать такие изменения, это стало еще легче. Модернизация компанией своего Web -сайта в соответствии с современными стандартами стимулирует также к обновлению используемого браузера, так как сайты будут выглядеть не так привлекательно в устаревших браузерах, хотя и будут там работать. Компании должны также поощрять своих заказчиков на модернизацию. Существуют также сильные доводы для самого бизнеса — сайты, использующие стандарты Web , как показано, было выше, будут иметь лучшие результаты в поисковых системах и будут доступны людям с ограниченными возможностями и пользователям альтернативных устройств — могут ли компании позволить себе игнорировать эту аудиторию?
"Мне не нужно их изучать!": Я знаю, что некоторые разработчики скажут, "но я использую устаревшие методики и по прежнему получаю зарплату - зачем мне беспокоиться об этих новых материях?" Как сказано выше, они делают код значительно более эффективным, легче для написания, и проще для сопровождения. И это позволяет писать современный код, который доступен и может использоваться на альтернативных устройствах - разве это не увлекательно? Это сделает также ваши профессиональные навыки более соответствующими требованиям завтрашнего дня, и позволит заработать больше. Сегодня многим компаниям требуются специалисты, знающие стандарты Web .
"Это очень трудно для изучения!": Глупость. После усвоения части этого курса, вы поймете, как легко понять основы использования стандартов Web , будете ли вы новичком в разработке/проектировании Web , или опытным разработчиком Web , совершенствующим свои профессиональные навыки. Это примерно также трудно, как использование старых, несовременных плохих методов, что не так уж сложно, и они предоставляют так много преимуществ над старыми способами.
Поддержка стандартов в браузерах: Поддержка стандартов в используемых браузерах существенно различалась в прошлом, что делало создание Web -сайтов для работы с различными браузерами настоящим кошмаром. Но эти дни ушли - все современные браузеры имеют сходную поддержку стандартов Web . Поддержка все еще иногда требуется для старых браузеров, которые не имеют хорошей поддержки в браузере, но при использовании лучших современных методов, можно гарантировать, что пользователи этих браузеров будут все же иметь приемлемое взаимодействие.

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

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

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

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

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

Мы провели исследование Рунета с целью выявить стандарты разработки и дизайна сайтов. Было проанализировано 250 топовых сайтов согласно данным рейтинга LiveInternet. И вот что у нас получилось.

1. Шрифты

В ранние этапы развития Интернета вебмастера, в качестве шрифтов, как правило,использовали так называемые безопасные шрифты. “Безопасность” этих шрифтов обусловлена тем, поскольку они являются наиболее популярными в операционной системе Windows, то и браузеры будут поддерживать их корректно.

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

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

2. Логотипы

В одном проценте сайтов, дизайнеры решили разместить лого не в шапке. Но для 99% сайтов это не так. Однозначно можно утверждать, что место логотипа в дизайне — это шапка. Причем левый верхний угол используют 89% против 10%, где лого в центре шапки.

3. Главное меню

Следующим одним из устоявшихся стандартов в веб-дизайне является расположение главного навигационного меню. В 92% случаев главное меню находится в шапке, в то время как в остальных 8% случаев, меню отсутствует, либо находится вне области шапки сайта.

4. Блок социальных сетей

Еще каких-то пару пятилеток назад не существовало такого понятия, как социальные сети. Поэтому тогда на сайтах, естественно, нельзя было увидеть блока соцсетей. Сейчас такой блок является чуть-ли не стандартом. Большая часть владельцев сайтов, а именно 40% размещают блок соцсетей в так называемом “подвале” сайта. И только в 24% случаев указанный блок не используется вообще. Это обстоятельство только подтверждает существование тенденции к обязательному приходу бизнеса в социальные сети.

5. CSS Анимация

С момента появления CSS3 разработчики и дизайнеры получили почти безграничные возможности по улучшению дизайна и юзабилити сайта. Благодаря таким замечательным свойствам CSS, как transition и animation, в настоящее время анимацию на своем сайте применяют 84% владельцев сайтов.

5. Поиск на сайте.

Одним из важнейших принципов юзабилити является наличие на сайте возможности искать информацию. Строку поиска, тоже, по праву, можно уже считать одним из стандартных положений в разработке дизайна. Поиск реализован у 71% сайтов.

6. Слайдер

Слайдеры, безусловно, улучшают так называемый User eXperience. Сейчас трудно представить какую-нибудь галерею на сайте без слайдера. Поэтому этим инструментом пользуются половина владельцев сайтов.

9. Адаптация сайта под мобильные устройства.

В 2017 году количество пользователей мобильных устройств впервые превысило количество пользователей персональных компьютеров.

Это означает то, что сайты теперь в большей степени посещаются с помощью мобильных устройств.

Также важно отметить, что поисковые системы включили в список наиболее важных факторов ранжирования именно наличие адаптивной верстки или мобильной версии сайта.

Рынок, конечно же, на это реагирует и сейчас у половины сайтов реализован адаптивный дизайн и верстка.

Если рассматривать другую половину: тех, у кого нет адаптивной верстки, то из них у 64% имеется отдельная мобильная версия сайта. И только у 38% половины без адаптива, сайт под мобильные устройства не адаптирован никак.

10. Основной цвета сайта

Так получается, что на 88% сайтов используется светлый фон: 63% — белый, 25% — серый. Это, отчасти, можно связать с тем, что дизайн сайта был сформирован под влиянием стандартов дизайна печатной продукции, т.е. книг и журналов, где преобладает белый фон и темный текст.

11. Количество колонок

Совсем недавно дизайнеры делали сайты, как правило с тремя колонками. Сейчас, в 2018 году трехколочная структура сайта ушла в прошлое, и преобладающими являются сайты с одним или двумя колонками.

Заключение

В заключение приведем гистограмму стандартов веб-дизайна. Здесь нужно пояснить, что мы включили в список стандартных вещей, те показатели, которые превысили порог в 30%.

Если у вас возникли какие-либо вопросы, замечания или предложения по поводу нашего исследования, пожалуйста, пишите об этом в комментариях. Также мы будем признательны, если поделитесь этим материалом в своих соцсетях.

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

Как стандарты дизайна увеличивают популярность сайта?

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

Горизонтальные элементы навигации;

Логотип в шапке;

Панель поиска в правом сайдбаре;

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Изменение цвета посещенных ссылок;

Корзина с заказами в правом верхнем углу и т. д.

Типы стандартизации

Стандартов в веб-дизайне на самом деле очень много, многие дизайнеры исчисляют их сотнями. В крупных дизайнерских корпорациях существуют декларированные тома норм и правил, по которым обязаны работать все сотрудники. Знать их все наизусть невозможно, а может и не очень-то и нужно. Повторюсь, каждый стандарт — это индивидуальный выбор отдельно взятого интернет-сообщества в рамках отрасли, страны, корпорации…

Для начала разделим стандарты по самому общему признаку:

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

Общетехнические стандарты

Начнем с основного, с макета. Какие требования могут выдвигаться к макету? Формат в PSD. Создание макетов в иллюстраторах и других плоских программах — первый признак дилетантства. Даже если готовый макет экспортировать в Photoshop, не удастся избежать ошибок и проблем на пустом месте. Навсегда забудьте про рисунки в PNG, JPG.

Слои. В Photoshop уже давно все придумано, не изобретайте велосипед. Пользуйтесь группировкой слоев, как минимум надо выделить шапку, контент и подвал. Аккуратно относитесь к именам слоев, сразу привыкайте к международным (английским) названиям. Удаляйте все лишнее, верстальщик может группой активировать отключенные слои, и вам его реакция точно не понравится.

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Цветовое решение. Типичная ошибка многих новичков, особенно тех, кто на все свои деньги разорился и купил дорогущий монитор с мега матрицей, — думать, что любой гаджет и мобильный телефон поддерживает точно такую же матрицу. Будьте проще, переводите ширину макета и количество лишней подложки в мегабайты пользовательского трафика, сразу поймете лучшее — враг хорошего. Не переусердствуйте с оттенками и шумами.

Типографика. Не откладывайте изучение типографики в долгий ящик, это основа основ. Шрифты, размеры, отступы, читабельность текста, контентные блоки… Все это надо прорабатывать на стадии макета. Не важно, что такого контента еще не существует, и сайт наполнить нечем, подкладывайте пустой текст.

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

Соблюдена ли кроссбраузерность?

Четко ли на странице визуализирована иерархия элементов?

Легко ли отличить один уровень заголовков от другого?

Соблюдена ли одна схема навигации для всех страниц сайта?

Какое количество шрифтов использовано в макете? (или конкретное ограничение — не превышен ли лимит по количеству шрифтов в 1 макете?)

Есть у сайта карта? Легко ее найти?

Все ли страницы сайта имеют циклические ссылки на домашнюю страницу?

Меняют ли цвет посещенные ссылки?

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

Подводя итог

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

Уверен, мои статьи вам в этом помогут. Подписывайтесь на обновления, и вы не пропустите самое интересное и полезное. До новых встреч!

Читайте также: