Довольно предвзятая история HTML5

Оригинал: http://diveintohtml5.info/past.html

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

Недавно я наткнулся на цитату разработчиков Mozilla о напряженности, связанной с разработкой стандартов:

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

Держите эту цитату в глубине сознания и позвольте мне объяснить про становление HTML5.

Вёрстка веб-страниц

Вёрстка веб-страницО вёрстке веб-страниц вообще мало книг на русском языке, а уж последовательных, где подробно с самого начала рассказаны все основы, можно считать что нет. Так что эту нишу восполняет моя новая электронная книга «Вёрстка веб-страниц», которая будет полезна и новичкам и опытным пользователям.

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

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

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

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

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

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

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

Купить книгу

Улучшите ваши формы с помощью HTML5!

Оригинал: 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 или более поздней версии.

Новый раздел

Добавлен новый раздел, посвящённый HTML5, в котором собраны воедино материалы сайта об этой технологии.

Справочник CSS в формате CHM

В дополнение к формату PDF сделана локальная версия справочника CSS в формате CHM. Это популярный формат справки для операционной системы Windows, который позволяет в одном файле хранить веб-страницы, изображения и скрипты. Кроме того доступна удобная навигация, поиск и добавление отдельных страниц в Избранное.

Выглядит это все наглядно и красиво. Подсветка синтаксиса в примерах имеется.

Стоимость 35 рублей. Цена смешная, сам бы взял, но у меня уже есть.

Справочник CSS

По многочисленным просьбам добавил для приобретения обновленный справочник CSS в формате PDF.

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

Включены свойства CSS3, а также свойства характерные для браузеров Firefox, Opera, IE, Safari и Chrome.

Стоимость всего 35 рублей, оплатить можно разными способами, например, через WebMoney, Яндекс.Деньги, терминалы оплаты и др. Если вам нравятся материалы сайта, можете считать приобретение справочника формой поддержки. Заодно получаете и полезный материал, который всегда рядом.

Советы по написанию статей

Написание статей — мощный инструмент маркетинга, позволяющий раскрутить ваш ресурс.

Вебмастера и владельцы рассылок всегда ищут хороший контент для статей. Статьи — это лучшая бесплатная реклама для вашего сайта.

Вот 10 советов, как создать эффективную статью.

1. Перед тем, как приступить к написанию статьи, сядьте, и ответьте на вопрос: какую проблему вы поможете решить этой статьей?

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

3. Пишите для одного человека. Забудьте о том, сколько людей прочтет вашу статью. Вы должны писать только одному человеку, так, как сейчас я пишу вам.

4. Поддерживайте логическую цепь. Избегайте набора несвязанных между собой идей. Каждый следующий блок текста должен логически продолжать предыдущий.

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

6. Делайте ваши параграфы краткими. Идеальный объем текстового блока 4–6 строк. Они выглядят более читабельными.

7. Вдохновите на действие вашей статьей. Если ваша статья направлена на решение проблем, дайте читателю конкретный план действия.

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

9. Подведите итог. Изложите основные мысли в последних 1–2 параграфах. Обозначьте, какие действия читатель может предпринять, и чего он при этом достигнет.

10. Теперь не забудьте о самом главном: текст-блок информации о вас. Напишите ваши фамилию и имя, род вашей деятельности, контактный адрес. Затем укажите свой URL, если он у вас есть.

Практическое применение этих советов даст большой отклик от читателей.

Нестандартный вид текстовых полей

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

Форма с нестандартными элементами

Изящная деградация

Конечно, Internet Explorer содержит большое количество ошибок в разных версиях, но с помощью условных комментариев с ними можно бороться, добиваясь их устранения. Но вот чего нельзя ничем исправить, так это то, что IE безнадёжно устарел. Пока остальные браузеры включают всё больше свойств CSS3, поддерживают различные новомодные технологии, IE топчется на месте. Выход IE9 не решит проблему, предыдущие версии от этого в одночасье не испарятся. В такой ситуации наилучшим решением будет изящная деградация (graceful degradation) — принцип сохранения работоспособности при потере части функциональности.

Ошибка с блочными ссылками в IE6

В IE6 содержится некоторое количество ошибок, так или иначе связанных со свойством hasLayout. Непосредственно установить его нельзя, но можно сделать это косвенно. Так что большинство проблем связанных с этим свойством можно исправить его установкой, добавляя в стилях элементу zoom: 1 или height: 1%. Эти свойства кроме своих непосредственных характеристик устанавливают hasLayout.

Блочные ссылки это приём, который активно используется в различных меню, таким способом повышается полезная площадь ссылки. В IE6 если ссылка установлена блочной с помощью display: block она не занимает доступное пространство родителя и ссылкой является только текст. Эта ошибка проявляется в том случае, когда к родителю добавляется свойство float (пример 1).

Обзор HasLayout

Некоторые ошибки в Internet Explorer можно обойти, установив для элемента «лейаут». Большинство пользователей не подозревают о значениях «лейаута» применяемого к элементу. Данный документ объясняет, что происходит, когда элемент содержит «лейаут» и последствия этого.

Линия отреза

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

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

Горизонтальная линия

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

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

Самоучитель 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, мультимедиа, структуры и семантики.

Страницы