Блог



Гештальт-психология и группирование элементов веб-страниц

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

Самоучитель HTML в PDF

Самоучитель HTML доступен теперь в формате PDF. В отличие от самоучителя CSS он не претерпел никаких изменений и является калькой материала с сайта.

Скачать в архиве (1,57 Мб)

Файл распространяется по лицензии Attribution-NonCommercial-NoDerivs 2.5 Generic (CC BY-NC-ND 2.5), так что вы можете свободно копировать, пересылать и публиковать этот материал у себя.

Предварительный обзор HTML5

Оригинал статьи на английском: http://www.alistapart.com/articles/previewofhtml5

Перевод: Влад Мержевич

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

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

Работа сайта

Сайт переехал на другой хостинг, так что проблем с доступом больше не будет. Спасибо Виктору Степанькову и Алексею Колосову за помощь с переносом.

Самоучитель CSS в PDF

Самоучитель CSS доступен теперь в формате PDF. Практически это тот же текст, что и на сайте, но слегка доработан и дополнен. Также добавлено две новые главы «Валидация CSS» и «Идентификаторы и классы», которые не представлены на сайте. Еще один довод скачать файл.

Скачать в архиве (2,13 Мб)

Файл распространяется по лицензии Attribution-NonCommercial-NoDerivs 2.5 Generic (CC BY-NC-ND 2.5), так что вы можете свободно копировать, пересылать и публиковать этот справочник у себя.

Сглаживание шрифтов в Safari

У разработчика сайта не так и много средств по изменению вида шрифта, в частности вообще нет способа управления сглаживанием текста. Кто не в курсе, это способ сделать буковки более гладкими за счет добавления пикселов разных цветов. Если увеличить текст в Windows, то это становится хорошо заметно (рис. 1).

Использование box-sizing

Ширина блока формируется из ширины контента и значений полей, границ и отступов. В браузере Internet Explorer в режиме совместимости (иными словами, когда не указан доктайп) алгоритм меняется автоматически и ширина всего блока устанавливается равной width. Остальные браузеры так просто не меняют алгоритм, к тому же вы знаете, что режим совместимости это зло. В CSS3 есть замечательное свойство box-sizing, которое нам и пригодится.

Почти стандартный режим

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

Для HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Для фреймов в HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Для XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

Для фреймов в XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN">

Стандартный режим

Продолжая тему режимов браузера, рассмотрим стандартный режим — режим поддержки стандартов (X)HTML и CSS. Для переключения браузера в этот режим используется один из следующих доктайпов.

Для HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html>

Для XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Режим совместимости

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

Также переход происходит, если доктайп вообще не указан или не может быть распознан.

Режимы браузеров

Во время противостояния браузеров Internet Explorer и Netscape каждый из разработчиков старался улучшить своё детище, чтобы усилить позиции программы на рынке и привлечь больше пользователей.  Netscape 4 и IE4 ужасно поддерживали веб-стандарты, поэтому следующая версия, IE5 должна была не только исправить ошибки IE4, но и показать улучшенную поддержку спецификации CSS. Это было необходимо еще и по политическим мотивам, поскольку компания Майкрософт вошла в группу W3C и начала оказывать сильное влияние на разработку HTML и CSS.

В процессе работы над браузером IE5 его разработчики столкнулись с неожиданной трудностью. Разница при отображении страницы в разных версиях браузера была настолько велика, что множество сайтов оказались бы неработоспособными при просмотре в IE5. Идея сделать кнопку для переключения в режим совместимости пришла только в версии 8.0, поэтому разработчики IE5 пошли другим путём. Все старые страницы отображались по старым правилам, а для включения режима поддержки стандартов в код страницы необходимо добавить элемент <!DOCTYPE> (доктайп).

Режимы Internet Explorer

Вокруг Internet Explorer сложилась ситуация, которая больше не прослеживается ни с одним другим браузером — разброс версий начинается с 6.0 и заканчивается 9.0. Причины использования устаревших версий могут быть совершенно разные.

  • Internet Explorer встроен в операционную систему Windows и неопытные пользователи даже не подозревают о наличии альтернативы.
  • Корпоративные пользователи с ограниченным доступом не могут самостоятельно обновить версию или сменить браузер.
  • Обновление IE до новой версии происходит через систему Windows Update, которая часто отключается по требованиям безопасности или для снижения интернет-трафика.
  • Некоторые приложения, например, банковские, могут быть «заточены» для работы только под конкретную версию IE.
  • В силу инерции мышления, когда пользователю нравится та программа, с которой он привык работать.

Библиотека minify

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

Данное противоречие решается наличием двух версий CSS-файла: один для редактирования, а второй для загрузки на сервер. Сам же процесс сокращения кода называется минимизацией и вполне автоматизирован с помощью специализированных программ или сетевых сервисов. Но если приходится часто вносить изменения в CSS-файл, то процесс минимизации становится неудобным. Сами посудите, вначале надо отредактировать файл, затем его минимизировать и полученный код сохранить в файл, который нужно залить на сервер. Слишком много действий приходится совершать ради одного изменения. Логичнее было бы возложить задачу минимизации на сайт. Загрузили файл на сервер, и вот он уже в компактном виде отдается посетителям. Одно из таких универсальных решений называется minify, это библиотека на PHP5. Она минимизирует, объединяет и кэширует CSS-файлы, а также JavaScript.

Форматирование кода CSS

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

Opera 11

Если посмотреть статистику использования браузеров в Рунете, то можно однозначно заявить, что IE постепенно сдает свои позиции, а на первое место выходят Firefox и Opera. Даже сложив между собой разные версии браузеров, получим, что лидер сменился и суммарное использование Opera и Opera Mini, выше, чем у всех остальных браузеров, включая Internet Explorer. Возможно, не очень корректно учитывать браузер для мобильных устройств, тем не менее, тенденция очевидна. В остальном мире влияние Оперы не столь впечатляюще, но в Рунете этот браузер любят и активно используют люди самых разных профессий. Очередная, одиннадцатая версия Оперы должна укрепить лидерство браузера и, возможно, переманить к себе сторонников Internet Explorer и Firefox.

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

Страницы

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.