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

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

Основные понятия

Всем известно, что спектр состоит из семи цветов, названия которых глубоко запали в голову еще со школы благодаря мнемоническому заклинанию «Каждый Охотник Желает Знать, Где Сидит Фазан». На рис. 1 показана полоса, полученная путем разложения луча белого света на составляющие цвета с помощью стеклянной призмы.

Рис. 1. Спектральные цвета

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

Ниже описаны несколько принципов, которые рекомендуется применять при написании текстов заголовков, разделов или ссылок.

Добавлен тест для проверки знаний по XHTML 1.0 состоящий из 10 вопросов. Вопросы по сравнению с тестом по HTML получились сложнее, поэтому активно проходим тестирование и высказываем свои предложения и замечания.

Писать можно мне на ящик vlad@htmlbook.ru или на форуме сайта.

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

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

На сайте добавлена система тестирования знаний по HTML и CSS. Пока находится в режиме отладки, так что проходим тесты и высказываем предложения и замечания по работе системы.

Золотым сечением называется принцип деления отрезка на две части, при этом бóльшая часть отрезка относится к меньшей части так же, как длина всего отрезка к большей его части. Наглядно это показано на рис. 1.

Рис. 1. Пропорции золотого сечения

Сайт автора: finest.ru

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

Стоп! А разве графика, цвет, текст, заголовки и вся композиция не составляет информационное содержание страницы? Основной процент получаемой человеком информации приходится на зрение. По статистике 83% информации воспринимается зрительно. И 40% из неё запоминается человеком (против 20% от услышанного!). А изображение может нести в себе ничуть не меньше (а иногда и больше) информации, чем текст. Но как связать воедино изображение и текст? Как заставить дизайн нести тему страницы? Вот это уже вопрос психологии.

Оригинал: http://www.html5rocks.com/tutorials/appcache/beginner/

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

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

Использование интерфейса кэша даёт вашему приложению три преимущества:

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

Кэш приложения (или AppCache) позволяет разработчику указать, какие файлы браузер должен кэшировать и сделать доступными для оффлайновых пользователей. Ваше приложение будет работать корректно, даже если пользователь нажимает кнопку «Обновить», находясь в автономном режиме.

Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задаётся свойством width, а высота через height; вокруг контента идут поля (padding), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы (border) и завершают блок отступы (margin), невидимое пустое пространство от внешнего края границ. Ширина блока это комплексная величина и складывается из нескольких значений свойств:

В HTML5 к полям формы добавлен атрибут placeholder, который устанавливает замещающий текст. Такой текст отображается серым цветом и пропадает, когда поле получает фокус. Использование этого атрибута достаточно просто, следует только написать текст, всё остальное браузер берет на себя.

<input placeholder="Текст">

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

25 мая в Москве компания Adobe Systems проводит мероприятие «Эволюция творчества» посвященное выходу Creative Suite 5.5. Участники мероприятия смогут прослушать лекции по основным направлениям: видео и продакшн, дизайн для печати и Digital Publishing Suite, работа с цифровыми изображениями (графика и фото), создание кросс-платформенных приложений на Flash и веб-разработка с помощью HTML5 и CSS3. Мастер-классы ведут международные эксперты по продуктам Adobe — Джейсон Левин (Jason Levine), Терри Уайт (Terry White), Грег Рьюис (Greg Rewis) и Пол Трэни (Paul Trani), которые продемонстрируют новые фичи адобовских программ.

Программа мероприятия

Участие платное, но для посетителей сайта htmlbook.ru доступен специальный промо-код, дающий скидку на 80%: BEGURU80%HTML. Укажите его при регистрации.

Регистрация для участия

По многочисленным просьбам добавил для приобретения справочник по HTML в формате CHM. Фактически это тот же материал, что содержится на сайте, но оптимизированный для локального просмотра.

В справочник включены все теги HTML4 и HTML5 (как же без него), атрибуты тегов, а также значения атрибутов. Плюс добавлены события вроде onmouseover.

Стоимость 30 рублей.

Содержание книги

1. Основы CSS
2. Режимы браузеров
3. Принципы вёрстки слоями
4. Вёрстка с помощью таблиц
5. Браузер Internet Explorer
6. Макеты, применяемые на сайтах
7. Типовые элементы веб-страницы
8. Вёрстка сайта на практике
9. Использование HTML5
10. Тестирование и отладка готового кода

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

Формат PDF, 378 страниц, стоимость 50 руб.

Оригинал: http://dev.opera.com/articles/view/improve-your-forms-using-html5/

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

HTML  в действительности не обновлялся с версии 4 выпущенной ещё в 1998 году. Однако сообщество WHATWG работает над HTML с 2004 года, а затем передаёт материалы в W3C, где они становятся спецификацией HTML5. В этой статье показаны некоторые новые функциональные возможности форм HTML5 предлагаемые в главе Web Forms 2. Опера поддерживает Web Forms 2, начиная с версии 9.5 или более поздней версии.