Навигация

Партнеры


Комментариев: 0
 (голосов: 1)

Css - дизайн. Часть 5.

Достоинства стандарт - фотоов Web

Говоря о стандарт - фотоах Web, следует представлять себе целиком всю карт - фотоину, включая как CSS, так и язык HTML, применяемый для структурной разметки.
Трудно перечислить достоинства одной технологии без упоминания другой. Выигрыш получается лишь тогда, когда обе они применяются совместно: содержание и структура документа описываются с помощью HTML, а дизайном управляют таблицы стилей.
Варианты дизайна, размещенные на сайте Zen Garden, доказательство того, что один и тот же HTML-файл можно визуализировать бесчисленным числом способов, если применить к нему разные таблицы стилей.
Технология CSS - это метод представления документа путем применения различных стилей к его структурным элементам. Хотя он и применяется к структуре, но работает независимо от нее, позволяя создавать различные визуальные образы документа.
К исходному документу предъявляется лишь одно тре-
бование: он должен быть правильным и достоверным.
Неправильно размеченные документы будут прорисовываться непредсказуемо, что вызовет массу проблем.
Поэтому при поиске причин ошибок в результате применения CSS первым делом проверьте, что разметка успешно проходит контроль на правильность.

Файлы меньшего размера загружаются быстрее

Когда средства представления выносятся из разметки в таблицы стилей, размер файла обычно уменьшается.
30 Кбит, уходивших ранее на разметку, вполне могут превратиться в 10 Кбит на HTML плюс 10 Кбит или меньше на CSS.
Помимо уменьшения размера самого файла, есть и еще один источник оптимизации - CSS кэшируется в памяти браузера. Судите сами: когда HTML-разметка занимала 30 Кбит, при каждой загрузке страницы необходимо было передать эти 30 Кбит плюс собственно
контент документа. При просмотре десяти страниц сайта приходится без нужды загружать целых 300 Кбит.
Если же вынести дизайн во внешний CSS-файл, то, во-первых, уменьшится размер загружаемой страницы, а во-вторых, таблицы стилей не придется грузить при
просмотре каждой страницы. Останется лишь 10 Кбит HTML-разметки на страницу, поскольку остальные 10 Кбит, приходящиеся на CSS, будут извлекаться из
кэша браузера. Таким образом, вместо вышеупомянутых 300 Кбит накладных расходов нужно будет загрузить всего ПО.
Такое уменьшение «веса» страницы за счет ее «разрезания» может положительно сказаться и на конечных пользователях, и на работе сервера. Если трафик велик, то сокращение числа передаваемых байтов может весьма заметно сэкономить полосу пропускания.
Веб-сайт спортивной сети ESPN перешел на CSS в начале 2003 года, и приводимые цифры звучат просто фантастически. В интервью, которое впервые было опубликовано на несуществующем ныне сайте DevEdge компании Netscape разработчики ESPN сообщают, что ежедневная экономия составила 2 терабайта. А это значит, что теперь сайт может обслуживать больше посетителей и делать это быстрее - только за счет изме-
нения технологии разметки. Неплохая отдача на единовременные затраты.

Большая переносимость


Вообще-то для прорисовки правильно структурированной страницы даже и таблица стилей не нужна.
Иногда это имеет прямой смысл - рассчитывая на большой монитор с разрешением 1024x768 пикселей, вы имеете в своем распоряжении достаточно места, чего не скажешь, когда речь идет о карманном компьютере с экраном 240x320 пикселей.
Без CSS «голый» контент вполне можно читать, ссылки работают, и все элементы формы функционируют как положено. Так что, ограничившись структурной разметкой и больше ничего не делая, вы автоматически получаете версию своего сайта для мобильных ус-
тройств.
Но CSS предлагает поддержку для разных типов устройств и позволяет точно указать стиль, применяемый для вывода на конкретное устройство. Компьютерному монитору, мобильному устройству (скажем, сотовому телефону) и принтеру соответствуют разные
типы устройств. На самом деле их даже больше, причем некоторые еще только разрабатываются.
Таблицы стилей для печатных устройств выносят смертный приговор ссылочке Print This Page (Распечатать страницу). Любую страницу сайта можно распечатать, и для этого нужна лишь простая таблица стилей, которая форматирует одни элементы, прячет
другие и строит макет с учетом особенностей принтера. Поскольку принтеры накладывают иные ограничения, нежели экран, то тонкий контроль, предлагаемый таблицами стилей, весьма желателен.
Теоретически когда-нибудь для каждого устройства вывода будет определен подходящий тип. На практике же сейчас найдется мало людей, пользующихся для
просмотра веб-страниц чем-нибудь, кроме экрана (не исключая авторов страниц и производителей оборудования). Реализуемые с помощью CSS средства управления отображением на экранах сотовых телефонов редко заходят дальше настройки шрифтов и цветов, а браузер для устройства типа aural (голосовое воспроизведение) еще не написан.
Это классическая проблема курицы и яйца: поддержка не улучшится, пока не появится контент, но никто не станет готовить контент для несуществующего устройства. Однако хотя и медленно, но изменения происходят, так что, возможно, мы еще увидим вариант
Zen Garden, стилизованный для сотового телефона или КПК.

Улучшенная доступность


Правильно структурированная HTML-разметка доступна уже на стадии проектирования; вы можете создать версию сайта, на 90 процентов удовлетворяющую рекомендациям W3C по доступности контента, просто за счет корректной разметки.
Попрощайтесь с текстовыми вариантами контента и несколькими версиями сайта, которые так трудно синхронизировать; им на смену приходит единственный вариант верстки. В большинстве случаев даже пользователи с ослабленным зрением, которым приходится пользоваться программами, воспроизводящими содержимое веб-страницы голосом, смогут
воспользоваться вашим сайтом - безо всяких усилий с вашей стороны.
Тут, конечно, есть и подводные камни, и мы немного поговорим о них в следующей главе, когда будем обсуждать, какие проблемы с точки зрения доступности может создать применение CSS.

Точный контроль


Будучи языком стилизации, CSS предлагает широкое разнообразие способов форматирования,которые в HTML были попросту невозможны: точное задание интерлиньяжа (расстояния между строками текста) с помощью свойства l i n e - h e i g h t , расстояния между элементами с помощью свойств margin и p a d d i n g , позиционирование элементов на странице с помощью a b s o l u t e и r e l a t i v e и
многое другое.
Если вам всегда не нравилась сеточная структура, диктуемая таблицами, то возрадуйтесь: CSS-позиционирование позволяет избавиться от нее и располагать
элементы в любом месте страницы. Если вам хотелось управлять фоном точнее, чем возможно с помощью одного лишь цвета и повторяющейся картинки, то
свойство background и примыкающие к нему станет для вас маленьким открытием.

Чему мы научились


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

Проверка доступности


Проверка составленной разметки с помощью программы Bobby показала, что большинству критериев доступности она удовлетворяет. Перед запуском сайта пришлось внести несколько мелких изменений, чтобы устранить замеченные Bobby недостатки. В хвостовик Zen Garden была добавлена метка «ААА» как свидетельство того, что о доступности позаботились.
А так ли это? Оказалось, что Bobby - еще не окончательный авторитет в вопросах доступности. Ознакомившись с «Рекомендациями по доступности веб-контента», опубликованными W3C (см. раздел «Улучшенная доступность» выше), вы поймете, что
кое-что Bobby проверить просто не в состоянии. Так, пункт 2.1 гласит, что вся информация, доносимая с помощью цвета, должна быть доступна и при просмотре на устройстве, не поддерживающем цвета.
Но программа типа Bobby не может этого подтвердить, особенно если цвет является частью графического изображения.
Вообще, если внимательно изучить сайт Bobby, то обнаружится следующий текст с отказом от ответственности: «Доступность - это в конечном итоге вопрос человеческих способностей. Она определяется тем, может ли группа людей с определенными ограниче-
ниями легко получить доступ к информации. Bobby-всего лишь попытка помочь разработчикам сделать веб-страницы более доступными, но полной доступности эта программа гарантировать не может».
Таким образом, сайт Zen Garden прошел все проверки доступности, относящиеся к HTML-разметке, но существуют аспекты, с HTML не связанные. Некоторые относятся и к CSS, и со временем стало ясно, что в некоторых вариантах дизайна они не приняты во вни-
мание. Когда в главе 4 мы будем обсуждать метод подстановки изображения Фарнера, то увидим, как легко с помощью CSS создать проблемы, которые никакой автоматический инструмент не обнаружит.
Урок таков: автоматические средства проверки типа Bobby могут служить в качестве отправной точки для создания доступных сайтов, но в «Рекомендациях» есть много не менее важных пунктов, которые с их помощью проверить нельзя.

Масштабируемость текста


Одна из проблем CSS, относящаяся к доступности, что делать при изменении размера текста. Очень хочется выбрать шрифт поменьше, чтобы на экране поместилось больше информации. Все мы знаем, как мало места на экране, так что основания для такого
решения имеются.
Проблема в том, что многие люди просто не могут читать текст, набранный слишком мелким шрифтом. Для некоторых нечитаемым является шрифт высотой 12 пикселей, а иногда даже 24 пикселей недостаточно.
Разумеется, учитывая невысокую разрешающую способность современных мониторов, никто не станет делать дизайн со шрифтом высотой 24 пикселя, поэтому нужен какой-то компромисс.
К счастью, во всех современных браузерах имеется механизм изменения размера шрифта. Не все пользователи знают, как до него добраться, но для знающих его ценность неоспорима. Неприятность возникает в том случае, когда размер шрифта выражен в единицах рх. Internet Explorer умеет масштабировать шрифты, если единица измерения em или %, но в случае рх он бессилен.
Поэтому пользователь, увы, не может рассчитывать на помощь со стороны браузера, и проблема остается.
Но ведь дизайнеру надо просто отказаться от единицы рх, и все будет в порядке, не правда ли? Возможно.
Однако в главе 5 обсуждается совсем другая проблема, которая может возникнуть в случае использования единиц em и %.
Но даже если текст успешно масштабируется во всех браузерах, это еще не все. Дизайн должен учитывать возможность масштабирования (рис. 15). На первый взгляд, ничего сложного, но если вы будете перемежать элементы фиксированного размера (скажем,
фоновую карт - фотоинку высотой 20 рх) с элементам переменного размера (например, текст, высоту которого браузер изменил с 14 до 24 пикселей), то быстро обнаружите, что макет начинает «плыть», когда размер шрифта отличается от того, что ожидал дизайнер.
Большинство вариантов дизайна Zen Garden протестировано с этой точки зрения и может масштабироваться на размер, несколько больший принятого по умолчанию.
Важно понимать, что какой бы размер шрифта вы ни выбрали для текста, всегда найдется некто, желающий его увеличить. Нужно помнить о том, с какими проблемами придется столкнуться, когда текст становится крупнее, и учитывать их при верстке страницы.

Добавить статью в:
0



Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.



Поиск

***

Онлайн
Всего на сайте: 51
Гостей: 21
Пользователи: GorGor, charlesad4
Роботы: robot Bot, Google Bot, Mail Ru, robot Bot, Mail Ru, robot Bot, Yandex Bot, robot Bot, Mail Ru, Mail Ru, robot Bot, robot Bot, robot Bot, robot Bot, Google Bot, robot Bot, Mail Ru, Mail Ru, Mail Ru, crawl Bot

20-ка посетителей: GorGor, charlesad4, czevvgfohxl, harriettqc11, SregoryPaurb, trofim.13.rt3Bep, essiete60, bettyuw4, Georgepaync, Patriotwvr, kellycm3, sharonvz16, theresahq16, yvonneky4, willajg3, AgnesAccony, grokholtsev.slavaBep, arnoldfr60, kevincr18, dibeendoria


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги