Вступление
За годы, которые я занимался серфингом и разработкой в Интернете, я узнал много мелких деталей, которые часто упускаются из виду веб-разработчиками. Этот сайт описывает некоторые из них.
Что такое HTML, а что нет
СОВЕТ: знайте природу и ограничения HTML, а также цели, для которых он был создан, и работайте с ними, а не пытайтесь их обойти . |
Я начну с нескольких слов о природе HTML. Язык разметки гипертекста – это именно то, что подразумевает его название: «язык разметки текста». Это не язык макета страницы. HTML предназначен для описания логической структуры текстового документа, который также может содержать некоторые вставленные графические элементы. HTML не предназначен для точного воспроизведения визуального эффекта, придуманного художником. Он, скорее, предназначен для структурирования информации таким образом, чтобы её можно было представить в понятной форме на всем, от широкоэкранной профессиональной рабочей станции дизайнера до терминала VT100 с текстовым режимом и средства чтения аудиотекста для слепых. Всегда помните об этом, если хотите создавать веб-страницы, которые хорошо работают в самых разных системах.
Те, кто стремится достичь идеального макета на веб-страницах, обычно прибегают ко всем видам запутанных, нестандартных уловок, которые искажают логическую структуру их документа и часто плохо работают в браузерах, которые не поддерживают все используемые функции или при просмотре в системах, которые каким-либо образом отличаются от системы разработчика. Например, широкое использование жёстко заданной ширины пикселей в таблицах приводит к тому, что страницы не изменяются для разной ширины экрана, поэтому пользователи с большими экранами имеют чрезмерное пустое пространство, а пользователи с меньшими экранами должны прокручивать влево и вправо.
Я не говорю, что вы никогда не должны использовать уловки для улучшения внешнего вида сайта, но не делайте этого за счёт базовой структуры. Начните с изучения основ HTML и создания хороших, чистых страниц, а затем аккуратно добавляйте навороты, обращая внимание на то, не вызовут ли они плохих побочных эффектов для некоторых пользователей. К сожалению, многие веб-разработчики используют “WYSIWYG“(Что вы видите, то и получаете) инструменты разработки, такие как Microsoft FrontPage и Netscape Composer (также известные как« Composter », хотя я слышал, что более новая версия в браузерах на основе Mozilla была намного лучше, чем её предшественники), и эти редакторы часто используют странные, нестандартные визуальные приёмы и скрывают от разработчика использование нелогичного кода, который часто не работает в браузерах, отличных от того, который имел в виду разработчик инструмента. Лично я все свои разработки использую текстовые редакторы, так что каждый бит кода видно именно так, как я хочу.
СОВЕТ: Знайте стандарты HTML, даже (особенно!), когда вы намерены нарушить их с определенной целью. |
Веб-война III
В группе новостей comp.infosystems.www.authoring.html идёт «священная война» между пуристами HTML и графическими дизайнерами. Я на стороне пуристов, но я не фундаменталист. Я готов использовать нестандартную функцию, даже если из-за неё мои страницы не проходят ” проверку “, если я использую её осторожно и знаю, какой эффект она оказывает как на браузеры, поддерживающие эту функцию, так и на те, которые не надо.
Врезка: два враждующих лагеря можно назвать структуралистами, с одной стороны, и презентационалистами с другой. Структуралисты, обычно имеющие опыт программирования или инженерии, в основном заинтересованы в логической структуре документов, желая, чтобы она была надёжной и разумно определённой, чтобы документы можно было использовать в широком диапазоне (графическом, текстовом, звуковом и т. Д.). ) браузеры и индексаторы поисковых систем, и не обращайте внимания на то, что фактический вид документа может сильно отличаться в разных системах. С другой стороны, презентационисты обычно имеют опыт работы с графикой или дизайном и рассматривают веб-страницу как в первую очередь визуальный опыт, который они хотели бы описать вплоть до пиксельного уровня, и расстраиваются из-за того, что у них нет такой возможности. большой контроль над средой пользователя по своему усмотрению; поскольку они мыслят визуально, а не логически, они не знают или не заботятся о том, как невизуальные пользовательские агенты, такие как индексаторы поисковых систем, будут обращаться со своими страницами.
Презентационалисты обвиняют структуралистов в том, что им нравятся скучные сайты с серым фоном и без графики. Структуралисты обвиняют презентационалистов в том, что они любят сайты без содержания, полные пустого блеска. В характеристиках обеих сторон есть как доля правды, так и некоторое преувеличение, но в основном обе стороны просто исходят из совершенно разных взглядов на то, для чего нужен веб-сайт и какие его аспекты являются наиболее важными, и они фактически говорят на разных языках. Это очень затрудняет общение, хотя для создания любого крупномасштабного веб-сайта, вероятно, нужны люди обоих типов. В последнее время появились некоторые признаки того, что два лагеря могут снова объединиться благодаря использованию таблиц стилей для определения презентационных деталей в отдельном документе от логической структуры документа, определённой с помощью кода HTML. При полном перечислении типов личности или мировоззрения веб-разработки также необходимо упомянуть некоторые другие группы, в том числе юзабилитистов , заинтересованных в первую очередь в эргономике пользовательского интерфейса (насколько легко использовать его для обычных людей, а не насколько логично его использовать) абстрактная структура или насколько она хороша), и контентисты , заинтересованные исключительно в размещении своего информационного содержания в Интернете, не особо заботясь о том, насколько он логичен, эстетичен или удобен. |
Структуралистский подход к веб-разработке пытается, насколько это возможно, разрабатывать сайты таким образом, чтобы отражать логическую структуру представляемой информации, используя как можно меньше элементов, вставленных просто для их визуального эффекта, но не несущих логической структуры. В идеале визуальное представление веб-страницы – это возникающее свойство, возникающее в спонтанном порядке в результате взаимодействия между логически размеченным контентом автора и конфигурацией браузера зрителя, а не «централизованно планируемым» артефактом, указанным до мельчайших подробностей дизайнером.
На страницах этого сайта я расскажу о некоторых тонкостях различных элементов веб-сайта, таких как структуры каталогов, графика, заголовки страниц и цвета. Вы узнаете некоторые детали, которые помогут вашему сайту оставаться читаемым во всех браузерах от Lynux до Safari, быть доступным для людей с ограниченными возможностями, хорошо индексироваться в поисковых системах и иметь запоминающиеся стабильные URL-адреса для различных подразделов сайта. Может быть, вы не согласитесь со мной по всем этим вопросам и решите делать некоторые вещи на своём сайте в противоположность тому, что я советую, но, по крайней мере, вы будете делать это, внимательно изучая все за и против. , а не просто по умолчанию, потому что вы не знали иначе!
Войны за доступность
Доступность Интернета для инвалидов в наши дни становится политической проблемой. Колонка в журнале Reason подвергает резкой критике попытки правительства санкционировать такую доступность. Возникает очевидный вопрос: поддерживаю ли я правительство, требующее, чтобы сайты были доступны?
Это очень просто. Ответ: « Черт, нет! » Я либертарианец , и поэтому выступаю против любых правительственных предписаний относительно того, как вы создаёте свои веб-сайты, или любой другой мирной деятельности, в которой взрослые могут захотеть участвовать. Кроме того, я достаточно не доверяю правительству и испытываю недостаток уверенности в том, что любые такие предписания не доходят до смехотворных крайностей, таких как принуждение сайтов к удалению аудиофайлов симфоний Бетховена и изображений шедевров Ван Гога, потому что нет значимого способа сделать их доступными для глухих и слепых соответственно, и, следовательно, в сознании какого-нибудь бюрократа следует отказать в них всем в равной степени.
Тем не менее, я также думаю, что толпа противников мандата (включая обозревателя Reason ) заходит слишком далеко, высмеивая саму концепцию веб-доступности и подразумевая, что обеспечение доступности сайтов наложит чрезмерное бремя. Это тоже неправда. Хотя некоторый контент (например, вышеупомянутые симфонии и картины) по своей сути недоступен для определённых групп людей, подавляющее большинство веб-контента может быть полностью доступно, если оно сделано логически структурированным, изящно деградирующим образом. Остальные мои веб-советы объяснят множество методов, которые вы можете использовать для этого. Веб-авторы, которые учатся быть осторожными и логичными в дизайне своих сайтов, решат больше проблем доступности, чем любой бюрократ.
(Между прочим, онлайн-версия столбца Reason отлично работает в текстовых браузерах, таких как Lynux, и аудио-браузерах, таких как pwWebSpeak; это пример доступного веб-документа, даже несмотря на то, что он критикует эту концепцию.)
зал позора
Сделайте свой сайт лучше, посмотрев на другие сайты, которые на своём примере показывают, чего нельзя делать !
ПРИМЕЧАНИЕ . Включение сайта в мои ссылки «Зала позора» не должно рассматриваться как какая-либо личная атака на создателя сайта, который может быть действительно великим человеком, или даже как атака на связанный веб-сайт в целом, который может быть источником действительно полезной информации и / или развлечений. Скорее, это просто выделение определённых функций (преднамеренных или случайных) связанных сайтов, которые вызывают проблемы, которых можно было бы избежать, улучшив дизайн. Если вы обнаружите, что здесь есть ссылка на один из ваших сайтов, не обижайтесь; улучшите свой сайт, чтобы мне пришлось удалить ссылку!
- Эта страница сообщает о невнимании к деталям доступности на веб-сайтах, при этом сама совершает ряд таких грубых ошибок. Проблемы на этой странице включают микроскопические шрифты и глупый текст ALT с изображением (например, «пустое изображение»; какой смысл для программы чтения речи или браузера в текстовом режиме?).
Ссылки
В статьях этого сайта у меня есть ссылки на другие сайты, которые относятся к обсуждаемым темам. Вот несколько общих ссылок, представляющих интерес для веб-разработчиков, и ссылок на сайты, обсуждающие общий стиль или философию HTML. Тот факт, что я ссылаюсь на сайт, не означает, что я одобряю или согласен с ним! Фактически, я стараюсь включать ссылки на все известные точки зрения на темы создания веб-сайтов, включая точки зрения, полностью противоположные моей.
Стандарты и спецификации
- Консорциум W3– последние стандарты и спецификации HTML можно найти здесь.
- HTML 5 Уровень жизни
- HTML 4.01 Спецификация
- RFC 2854– документ RFC, объясняющий тип носителя text / html .
- Wiki форматов файлов: Интернет
Подсказки, подсказки, ссылки и руководства
- HTML для начинающих
- Руководство по каскадным таблицам стилей
- WDG Web Authoring: часто задаваемые вопросы
- HTML.com: научитесь кодировать HTML и CSS
- Изучите основы HTML
- Советы Chami.Com
- WebSnob– комментарии и советы.
- Учебник по HTML для начинающих
- Что должен знать каждый Frontend-разработчик о рендеринге веб-страниц
- Guru99: различные уроки
- Как сделать сайт
- Как сделать сайт с нуля
- Шпаргалка по HTML 5
- Шпаргалка по HTML 5(еще одна)
- Шпаргалка по HTML(еще одна)
- HTML 5 Mega Cheat Sheet(еще один)
- Комбинированная шпаргалка по HTML, CSS и PHP (таких шпаргалок чертовски много!)
- Лучший конструктор сайтов(если вы не хотите писать сырой код вручную, как я!)
- Учебное пособие по HTML для начинающих
- HTML 5 периодическая таблица
- Руководства по настройке веб-сайта
- Видеоурок: Как создать сайт (на WordPress)
- Как создать сайт электронной коммерции
- Лучшие конструкторы сайтов
- Как создать веб-сайт: полное руководство для начинающих
- Дизайн и разработка: детское руководство по дизайну для Интернета
- Советы по дизайну веб-сайтов
- Компьютерный язык для начинающих: HTML
- Веб-хостинг и создание собственного веб-сайта с ограниченным бюджетом
- Что такое HTML 5?
- Руководство для начинающих по программированию
Проблемы доступности
- Рекомендации W3C по доступности контента
- Страница протеста графического браузера: предназначена для демонстрации пользователям графических браузеров того, что пользователи неграфических браузеров должны пройти при чтении плохо спроектированных сайтов. Эта страница заполнена изображениями, содержащими такие вещи, как «[INLINE]» и «[LINK]», в то время как их ALT-текст содержит фактический текст страницы. Таким образом, пользователи Lynx и говорящих браузеров получают хорошо оформленную страницу, но пользователи графических браузеров получают недостаток достоверной информации, что превращает таблицы в обычную ситуацию, когда страницы заполнены текстом как графикой без текста ALT.
Историческая справка
- История HTML
- Революция пропускной способности: Интернет и WorldWideWeb– статья из мартовского выпуска журнала Analog Science Fiction / Fact за 1994 год , в которой я впервые услышал о сети примерно за год до того, как я, наконец, сам получил к ней доступ.
На сайте comp.infosystems.www.authoring.html и его обитателях
Другие комментарии и информация
- Как убедить клиентов подумать о контенте, прежде чем они подумают о графике
- The Web Standards Project– стремится привести производителей браузеров в соответствие со стандартами.
- Гиперссылка на метафизику Интернета
- Сайт Юкки: много информации об авторинге в Интернете
- HTMLHELP’s ‘Rants Page’– со ссылками на различные мнения о HTML и веб-авторинге.
- AskTog: жалкое состояние веб-дизайна
- Топ-10 новых ошибок веб-дизайна (1999)
- Общество за окончательную отмену злоупотребления тегами
- Руководство постороннего по W3C
- Взять под контроль Интернет
- Манифест структурализма
- Веб-страницы не печатаются на бумаге
- Контент не король
- HTML в ретроспективе – чему мы можем научиться из большого успеха и большого провала?
- Штаны: веб-сайты, которые расстраивают и раздражают.
- Название этого сайта может заставить вас покраснеть, но в нем есть смысл в веб-дизайне.
Эта страница была впервые создана 17 июля 1997 г. и в последний раз изменена 6 сентября 2021 г.
Авторские права © 1997-2021, Даниэль Р. Тобиас. Все права защищены.