Web... Просто Web...

Новости

Сегодня в выпуске:

1. Новости сайта и форума рассылки.
2. Заключительная часть статьи «Введение в оформление текстов для веб».

Последние статьи на ComputerLibrary.info:

• Оформление текстов для веб. Введение [ Веб-мастеру > Юзабилити ]
• Absolute StartUp manager 2.1 оптимизирует автозагрузку и вашу компьютерную жизнь [ Софт > Система ]
• Пиринговые сети [ Софт > Интернет ]
• iMesh — путеводитель по поиску файлов в сети [ Софт > Интернет ]
• США vs Ирак, vs интернет [ Интернет > Обзоры ]
• Программы для работы с help-файлами [ Софт > Текст ]
• Outlook Express вашей мечты [ Софт > Интернет ]
• E-mail в дорогу [ Софт > Интернет ]
• Программа графоману [ Софт > Текст ]
• Quintessential Player или не Winamp-ом единым… [ Софт > Мультимедиа ]

Последние темы форума Forum.ComputerLibrary.info:

• Червь "Mintal" распространяется через The Bat! [ Компьютеры > Разное ]
• Дельфи [ Компьютеры > Программирование ]
• Страничка в виде нортона (волкова)? [ Web-строительство > Web-программирование ]
• Аутглюк глючит. [ Компьютеры > Software ]
• ASP магазин бесплатно [ Web-строительство > Web-программирование ]
• Цифровая фотокамера RoverShot RS2100 [ Компьютеры > Hardware ]
• Приколы [ Общее > Флейм ]
• Кое-что из компьютерного фольклора :-) [ Общее > Флейм ]
• Посмейтесь [ Общее > Флейм ]
• Не включается нормально копм [ Компьютеры > Hardware ]

Компьютерная литература

«Дизайн web-страниц. Анализ удобства и простоты использования 50 узлов»
Один из авторов книги — гуру usability Якоб Нильсен!
Книга состоит из двух частей. Первая часть содержит общие принципы эргономики начальных страниц и анализ соответствующей статистики, а во второй части рассмотрены 50 конкретных примеров начальных страниц с разбором ошибок, связанных с нарушением их эргономики. Принципы эргономики начальных страниц, приведенные в первой части книги, взяты авторами из собственного многолетнего опыта.

«Освой самостоятельно PHP4 за 24 часа»
Немало внимания в книге уделено вопросам программирования вообще, но основной упор сделан именно на создание динамических Web-страниц и Web-приложений. Книга окажется полезной как знатоку программирования, решившему освоить технологию PHP, так и новичку, делающему свои первые шаги.

«Основы web-технологий»
Курс лекций посвящен основам Web-технологий. В его рамках рассматриваются язык гипертекстовой разметки HTML, язык программирования динамического контента JavaScript, спецификация разработки прикладного программного обеспечения CGI и спецификация описания стилей представления информации CSS.

«Освой самостоятельно XML за 21 день. Издание 2…»
Из настоящей книги вы узнаете, что такое языки разметки вообще, что такое правильные и действительные документы XML, а также что такое схемы, используемые для их проверки. Кроме того, в книге рассмотрены такие темы, как пространства имен XML, языки XPath, XLink, XPointer и XSL, применение DOM и SAX для обработки документов XML, а также использование таблиц стилей. В отдельную часть вынесены различные вопросы, связанные с практическим использованием XML, например, в электронной коммерции.

Введение в оформление текстов для веб (продолжение)

Автор: Jim Byrne
www.mcu.org.uk
Оригинал статьи

Перевод: YuraZzz
www.computerlibrary.info

Заключительная часть. Полностью статью (включая предыдущие главы) можно просмотреть здесь: Оформление текстов для веб. Введение.

Шрифты на практике

Нельзя быть уверенным, что у посетителя вашего сайта обязательно будет установлен выбранный вами шрифт; не все путешествуют по сети с помощью Internet Explorer или используют другие продукты Microsoft. Однако есть пути решения этой проблемы; CSS и тег FONT позволяют указывать список предпочтительных для веб-страницы шрифтов и общий тип шрифта на крайний случай.

Вот пример таблицы стилей:

Body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Я выбрал Verdana, т. к. он читабелен даже при маленьких размерах символов. Но это шрифт Microsoft — он присутствует на компьютерах с Windows 95 и старше. Также он, скорее всего, есть и на компьютерах Mac, хотя и не входит в базовый набор шрифтов этой платформы. К тому же этот относительно новый шрифт может и не присутствовать на компьютерах с более ранней версией Windows.

Поэтому я указал вторым Arial для тех, у кого нет Verdana и Helvetica (эквивалент Arial на платформе Mac) для пользователей Macintosh, у которых нет Verdana или Arial. В конце концов я указал, что если не будет найдено этих шрифтов, то браузер отобразит текст рубленным шрифтом по умолчанию.

Использование тега FONT

Для тех, кто все еще оформляет текст, использую FONT, предыдущий пример должен выглядеть так:

<FONT FACE="Verdana, Arial, Helvetica">Some text</FONT>

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

• Стоит избегать использования параметров тега FONT «color» и «face», т. к. посетители не смогут изменить ваши настройки визуального представления текста своими. Это также может вызвать проблемы у людей, страдающих дальтонизмом.
• Если вы используете FONT для задания размера шрифта, пишите FONT size= +1 или FONT size= -1, но не size = 1. Установка такого размера сделает шрифт слишком мелким для чтения посетителями сайта (хотя если они разбираются в настройках браузера, то смогут изменить этот параметр).
• Многие дизайнеры используют FONT для задания заголовков, вместо предназначенных для этого тегов заголовков. Это делает страницу менее доступной для использующих текстовые или речевые браузеры, т. к. нарушается логическая разметка страницы. (Тоже самое происходит и при замене стандартных элементов HTML CSS стилями)

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

Использование тега FONT для задания визуального представления текста: его размера, цвета, не повлияет на текстовые браузеры, т. к. все форматирование просто будет проигнорировано.

(Дизайнерам, использующим font или basefont для задания размера шрифта на странице. Эти теги позволяют задавать размер шрифта в относительных величинах от 1 до 7; 1 — наименьший размер, 7 — наибольший, 3 — нормальное значение (размер шрифта в браузерах по умолчанию). Каждый следующий размер на 20% больше предыдущего.)

Почему бы не использовать изображения?

Чтобы обойти указанные выше преграды, некоторые владельцы сайтов используют для заголовков графику вместо текста (мне доводилось видеть страницы, где весь текст представлен изображениями). Такой подход позволяет полностью контролировать внешний вид текста, а также, к сожалению, создает несколько проблем.

Самое главное в том, что подобные страницы рассчитаны не на всех пользователей:

• Рисунки нельзя легко увеличить, их размер остается неизменным, независимо от настроек браузера.
• Невозможно изменить цвет или контраст для улучшения читабельности.
• Если к рисунку не добавлен атрибут 'ALT', то пользователь браузера с выключенным отображением графики не заметит его.
• Использование графики вместо текста уменьшает количество полезной информации в структуре страницы. Заголовок верстается с помошью тега <hn>, заголовок-рисунок — нет. Использование тега <hn> в коде страницы играет важное значение для пользователей речевых браузеров, т. к. на основе этого тега делается анализ страницы и самой важной информации на ней.

Использование графики вместо текста также имеет и другие недостатки:

• Техническое обслуживание: внешний вид текста, представленного в виде рисунков, не может быть оперативно изменен. Использование таблиц стилей для контроля представления текста в данном случае более предпочтительно.
• Придется добавлять описание в атрибут 'ALT' к каждому графическому элементу.
• Использование графики увеличивает размер страницы и время ее загрузки.
• Текст, представленный в виде рисунков, не индексируется поисковыми системами.

Возможно некоторые из проблем будут решены с внедрением формата масштабируемой векторной графики (SVG — scalable vector graphics), но на данный момент использование изображений с текстом вместо собственно самого текста — не очень хороший выбор. (см. www.w3.org/Graphics/SVG/Overview.htm8)

Использование embedded (внедренных) шрифтов

Другим возможным решением проблемы отсутствия определенных шрифтов на компьютере посетителя является «внедрение» шрифтов в веб-страницу. Такая возможность появилась с выходом Netscape 4.01 и Internet Explorer 4. Теперь вы можете, по крайней мере теоретически, точно установить желаемый шрифт; он будет загружен вместе с соответствующей веб-страницей.

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

• Internet Explorer и Netscape используют две разные, несовместимые технологии. Internet Explorer применяет Embedded OpenType, а Netscape — TrueDoc.
• Embedded шрифты не работают в старых версиях браузеров (до Internet Explorer 4 или Netscape 4.0).
• Внедренные в страницу шрифты увеличивают время ее загрузки.
• Проблемы безопасности — пользователи могут украсть встроенный в страницу шрифт.
• До сих пор существуют нерешенные проблемы, связанные с авторским правом и лицензированием шрифтов.

Поддержка этой технологии уже не совершенствуется в новых версиях браузеров, Netscape 6 не поддерживает embedded шрифты, видимо компания Netscape решила отказаться от использования этой технологии. Подробную информацию о внедрении шрифтов в веб-страницы можно найти по адресу: builder.cnet.com/webbuilding/pages/Authoring/Typography/ss01.html

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

Лучший шрифт для верстки сайтов

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

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

При посещении удобного веб-сайта у пользователя должна быть возможность:

• Отключить вашу таблицу стилей, чтобы браузер отобразил страницу, используя собственные настройки (это еще одна причина не использовать тег <font>, т. к. оформление сохранится даже при отключенной таблице стилей).
• Использовать собственную таблицу стилей, если есть такая возможность.
• Заменить все ваши настройки внешнего вида текста, включая шрифт, его размер и цвет. Одной из важнейших проблем в данном случае является выбор единиц для установки размера шрифта: абсолютных или относительных (эта проблема будет подробно рассмотрена во второй части «Оформления текстов для веб»).

Выводы

Получается, что не так уж и сложно выбрать шрифты, удобные для чтения с монитора, если вам известны связанные с этим подвохи и способы обойти их. Просто ограничившись указанием в таблице стилей шрифтов: Verdana, Arial, (рубленные шрифты), Georgia или Times New Roman (шрифты с засечками), вы не поступите так уж плохо. Тем не менее, полезно знать, почему именно эти шрифты хороши для верстки сайтов и что еще можно сделать для повышения доступности сайта, удобства посетителей и читабельности текстов. Пора подытожить все, что вы узнали:

• Удостоверьтесь, что вы не делаете ничего, что может помешать посетителям установить свой шрифт (другими словами не используйте тег <FONT>).
• Используйте таблицы стилей вместо тега <FONT> для установки свойств шрифта.
• Выбирайте шрифт, доступный пользователям большинства операционных систем, или обеспечьте альтернативы, указав в таблице стилей также и общий тип шрифта.
• Шрифт должен соответствовать смысловой нагрузке сайта.
• Используйте гарнитуры, оптимизированные для вывода на экран.
• Уделите внимание удобству восприятия и читабельности ваших текстов, используя, как уже говорилось, подходящий шрифт. Для большинства ваших посетителей, которые не будут менять настройки браузеров по умолчанию, также обратите внимание на: длину строк, межстрочный интервал (высоту строк), размер шрифта, шрифт по умолчанию, соотношение текста и свободного пространства на странице — все это повлияет на читабельность текста. Важность повышения читабельности текста увеличивается и из-за двух связанных между собой факторов: объема внимания и скорости прочтения и осмысления информации (для веб-страниц эти показатели на 10–20% меньше, чем для печатных документов). Эти вопросы будут рассмотрены в третьей части «Оформления текстов для веб».

Рекомендуемые ссылки:

• Understanding web typography - an introduction by Jim Byrne (оригинал на английском) www.mcu.org.uk/articles/accessibletext.html
• Typography By Tomas Caspers www.wpdfd.com/wpdtypo5.htm
• Fonts for the Macintosh have gone full circle writes ANDY BENEDEK; www.dotprint.com/graphics/graphi26.htm
• The World of Fonts by Dmitry Kirsanov www.webreference.com/dlab/9802/
• W3C access checkpoint 7: Text instead of images: www.w3.org/TR/WCAG10-CSS-TECHS/#text-not-images
• Webmonkey embedded font tutorial: hotwired.lycos.com/webmonkey/99/45/index1a.html?tw=design
• Tijs Teulings on embedded fonts: www.tijs.org/embed/
• Microsoft Typography: www.microsoft.com/typography/default.asp

Полностью статью (включая предыдущие главы) можно прочитать здесь: http://computerlibrary.info/view/article37/.
Жду ваших комментариев к статье по этому адресу: http://computerlibrary.info/view/article37/comment/
Версия статьи для печати доступна по адресу: http://computerlibrary.info/view/article37/print/

Постскриптум

Уважаемые подписчики,

• если у вас есть какие-то вопросы, предложения, пожелания касательно рассылки, пишите на мой e-mail: yura@computerlibrary.info
• если вам нравится рассылка, присылайте интересные статьи о веб-строительстве на мой e-mail. Все, достойное внимания, будет опубликовано!
• предложите своим друзьям и знакомым подписаться на рассылку, ведь чем больше читателей, тем больше я буду стараться!
• подписаться на другие мои рассылки можно с этой страницы
• по поводу рекламы в рассылке пишите сюда же.

Удачного веб-строительства,
С уважением, Юрий