Информация о книге

978-5-496-00185-4

Главная  » Тематика определяется » HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств

Фрейн Б., HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств

Питер, 2014 г., 978-5-496-00185-4


Описание книги

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

Ключевые слова

Поделиться ссылкой на книгу



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

Краткое содержание
Об авторе
Благодарности
О рецензентах
Предисловие
Какие темы рассматриваются в этой книге
Что необходимо знать, прежде чем приступать к
чтению
Целевая аудитория книги
Соглашения
Отзывы читателей
Опечатки
Нарушение авторских прав
Вопросы
От издательства
Глава 1. Знакомство с HTML5, CSS3 и адаптивным
веб-дизайном
1.1. Почему важна поддержка смартфонов (а
устаревших версий Internet Explorer - нет)
1.2. Бывают ли ситуации, когда адаптивный
веб-дизайн
не станет правильным выбором?
1.3. Определение адаптивного веб-дизайна
1.4. Почему следует отдавать предпочтение
именно адаптивному веб-дизайну?
1.5. Примеры адаптивного веб-дизайна
Инструменты для тестирования веб-страниц
в разных областях просмотра
Онлайн-источники вдохновения
1.6.Преимущества HTML5
Экономия времени и кода благодаря HTML5
Новые семантически значимые элементы тегов
HTML5
1 7 CSS3 делает возможным адаптивный
веб-дизайн
и многое другое
Важный момент: применение CSS3 не приведет
к каким-либо нарушениям!
Как CSS3 позволяет решать повседневные задачи,
связанные с дизайном?
1.8. Смотри, мама, нет изображений!
1.9. Можно ли реализовать потенциал HTML5 и
CSS3
уже сегодня?
1.10. Адаптивный веб-дизайн - это не
чудодейственное средство
1.11. Как объяснить заказчикам, что сайты не
должны выглядеть одинаково во всех браузерах
1.12. Резюме
Глава 2. Медиазапросы: поддержка разных
областей просмотра
2.1. Медиазапросы можно использовать уже
сегодня
2.2. Почему адаптивным веб-дизайнам
необходимы медиазапросы?
Синтаксис медиазапросов
Что позволяют проверить медиазапросы?
Использование медиазапросов для изменения
дизайна
Наилучший способ загрузки медиазапросов
для адаптивных веб-дизайнов
2.3.Наш первый адаптивный веб-дизайн
Не пугайтесь, но наш дизайн имеет
фиксированную
ширину
Адаптивные веб-дизайны: делаем изображения
как можно более экономичными
Обрезка содержимого в меньших по размеру
областях
просмотра
2.4. Как сделать так, чтобы современные
мобильные браузеры не изменяли автоматически
размер нашей страницы
2.5. Подстраиваем дизайн под области просмотра
с разной шириной
2.6. В адаптивных веб-дизайнах первым всегда
должно идти содержимое
2.7. Медиазапросы - это лишь часть решения
2.8. Резюме
Глава 4. Использование "резиновых" макетов
3.1. Фиксированные макеты не ориентированы на
будущее
3.2. Почему для адаптивных веб-дизайнов
необходимы пропорциональные макеты
3.3.Преобразование дизайна на основе
фиксированного макета
в дизайн на основе пропорционального макета
Формула для запоминания
Задание контекста для пропорциональных
элементов
Всегда важно помнить о контексте
3.4. Использование единиц em вместо пикселов
для задания размеров верстки
3.5. "Резиновые" изображения
Как сделать так, чтобы изображения
масштабировались
относительно области просмотра
Приоритетные правила для конкретных
изображений
"Притормаживаем" "резиновые" изображения
Невероятно универсальное свойство max-width
3.6.Обеспечение разных по величине изображений
для разных по размеру экранов
Установка Adaptive Images
Размещение фоновых изображений в другом месте
3.7. Где "резиновые" сетки и медиазапросы
объединяются друг с другом
3.8. Сеточные системы CSS
3.9. Резюме
Глава 4. HTML5 для адаптивных веб-дизайнов
4.1.Какие части HTML5 можно использовать уже
сегодня?
Большинство сайтов может быть написано на
HTML5
Полизаполнения, прослойки и Modernizr
4.2.Как писать НТМ1_5-страницы
Эффект экономии от использования HTML5
Разумный подход к написанию НТМ1_5-разметки
Приветствуем великий тег <a>
Устаревшие HTML-функции
4.3.Новые семантические НТМ1_5-элементы
Элемент <section>
Элемент <nav>
Элемент <article>
Элемент <aside>
Элемент <hgroup>
Элемент <header>
Элемент <footer>
Элемент <address>
4.4.Практическое использование структурных
элементов HTML5
4 5 НТМ1_5-семантика уровня текста
Элемент <Ь>
Элемент <em>
Элемент <i>
Применение семантики уровня текста в нашей
разметке
4.6. Обеспечение большей доступности для
вашего сайта с помощью WAI-ARIA
4.7. Вложение мультимедиа
4.8. Добавление видео и аудио с использованием
HTML5
Обеспечение альтернативных файлов-источников
Резервные варианты для устаревших браузеров
Теги <audio> и <video> работают почти
одинаково
4.9.Адаптивное видео
4.10.Автономные веб-приложения
Вкратце об автономных веб-приложениях
Делаем веб-страницы доступными в автономном
режиме
Понятие файла манифеста
Автоматическое добавление страниц в кэш
О комментарии с указанием номера версии
Просмотр сайта в автономном режиме
Устранение неполадок с автономными
веб-приложениями
4.11.Резюме
Глава 5. CSS3: селекторы, типографика и
цветовые режимы
5.1.Что CSS3 предлагает разработчикам
клиентских
приложений
Поддержка CSS3 в Internet Explorer версии от б до
8
Использование CSS3 для дизайна и разработки
страниц в браузере
5.2. Анатомия CSS-правил
5.3. Префиксы поставщиков и их использование
5.4. Легко реализуемые и полезные СББЗ-трюки
Множественные колонки CSS3 для адаптивных
веб-дизайнов
Перенос слов
5.5.Новые СББЗ-селекторы и их использование
Селекторы атрибутов CSS3
Селекторы атрибутов CSS3 с совпадениями
по подстроке
Практический пример из реальной жизни
Структурные псевдоклассы CSS3
Селектор :last-child
Селектор :nth-child
Принцип работы :п№-правил
Селектор псевдокласса отрицания (:not)
Изменения в псевдоэлементах
5.6.Пользовательская веб-типографика
CSS-правило @font-face
Реализация веб-шрифтов с помощью @font-face
5.7. Помогите - мои заголовки с применением
СББЗ-правила @font-face выглядят неаккуратно
5.8. Новые цветовые форматы CSS3 и
альфа-прозрачность
RGB-цвет
HSL-цвет
Значения резервных цветов для Internet Explorer
версий б, 7 и 8
Альфа-каналы
5.9.Резюме
Глава 6. Великолепная эстетика с использованием
CSS3
6.1. Создание теней, отбрасываемых текстом, с
помощью CSS3
Допустимые шестнадцатеричные, HSL- и
RGB-значения
цветов
Пикселы, единицы em или rem
Предотвращение отбрасывания текстом тени
Создание эффекта рельефного текста
Множественные тени, отбрасываемые текстом
6.2.Создание теней, отбрасываемых блочными
элементами
Внутренняя тень
Множественные тени
6.3.Фоновые градиенты
Линейные фоновые градиенты
Радиальные фоновые градиенты
Повторяющиеся градиенты
6.4. Фоновые градиентные узоры
6.5. Кое-какие соображения насчет CSS3
6.6. Сводим воедино СЗБЗ-свойства
6.7. Множественные фоновые изображения
Размеры фоновых изображений
Позиционирование фоновых изображений
Сокращенный способ определения фона
6.8. Прочие СЗБЗ-свойства
6.9. Масштабируемые значки, идеально
подходящие
для адаптивных веб-дизайнов
6.10.Резюме
Глава 7. СББЗ-переходы, трансформации и
анимации
7.1. Что такое СББЗ-переходы и как мы можем их
использовать
Свойства, используемые для объявления
переходов
Собирательное свойство transition
Применение разных по длительности эффектов
перехода к различным свойствам
Понятие временных функций
Занятные переходы для адаптивных сайтов
72 20-трансформации CSS3
Что можно трансформировать?
scale
translate
rotate
skew
matrix
Свойство transform-origin
7.3.Вкратце об обеспечении ЗО-трансформаций
CSS3
Анализ ЗО-эффекта
ЗО-трансформации не готовы к повсеместному
внедрению
7.4. Анимация с помощью CSS3
7.5. Резюме
Глава 8. Покорение форм с помощью HTML5 и CSS3
81 НТМ1_5-формы
Понятие составных частей НТМ1_5-форм
placeholder
required
autofocus
autocomplete
list (и ассоциированный элемент <datalist>)
Типы полей ввода HTML5
email
number
url
tel
search
pattern
color
Типы полей ввода date и time
date
month
week
time
datetime и datetime-local
range
8.2.Добавление полизаполнений для браузеров,
не поддерживающих требуемые функции
8.3. Стилизация НТМ1_5-форм с помощью CSS3
8.4. Резюме
Глава 9. Решение кросс-браузерных проблем
с адаптивностью
9.1. Прогрессивное улучшение против плавного
сокращения возможностей
9.2. Следует ли вам заботиться о том, чтобы сайт
работал
в устаревших версиях Internet Explorer?
Статистика
Личный выбор
9.3.Modernizr - "швейцарский армейский нож"
разработчика
клиентских приложений
Устранение проблем со стилизацией
с помощью Modernizr
Modernizr добавляет поддержку
НТМ1_5-элементов в устаревшие версии браузера
Internet Explorer
Добавление поддержки медиазапросов min-width и
max-width в Internet Explorer версий б, 7 и 8
Условная загрузка с помощью Modernizr
9.4.Преобразование списка навигационных ссылок
в раскрывающееся меню (условно)
9.5. Устройства с экранами высокого разрешения
(будущее)
9.6. Резюме


Об авторе


Отзывы

Понравилось  [ 5 April 2014]
Сразу предупреждаю, что я не CSS-гуру, в основном использовал CSS2 и знаком с ним больше с точки зрения программиста, нежели как дизайнер. С учетом сказанного книга мне пока очень нравится. Теория изложена интересно, живо, но без лишней воды. Практики в книге довольно много. На протяжении большей части книги разбирается всего один пример сайта, но зато понятно и подробно. В книге много иллюстраций. Какого-то глубокого знания CSS для понимания книги, кстати, не требуется.
По соотношению цена:полезность ставлю высший балл.
Коллега, я от Вас офигеваю:)  [20 December 2013]
Нашел книгу в оффлайне, почитал, решил, что надо приобретать, цена была велика (591 р.!), решил поискать в инете.
Зашел, сюда, ради интереса еще отзывы глянул -- отзывы поразили! Коллега пишет про одну из глав "Поддержка CSS3 в Internet Explorer версии от 6 до 8" и тут же комментирует, что "книга устарела". Старина, Вы эту книгу вообще открывали?! В данной главе автор и пишет, что версии IE с 6 по 8 УЖЕ УСТАРЕЛИ! В книге наоборот предлагается "забить" на оптимизацию под раритетные версии браузеров, и акцентироваться на мобильных устройствах (кстати, речь там вообще идет о 4-м айфоне и ему подобных), разрешения которых уже возросли почти в два раза по сравнению с прежними версиями. И предлагает прибегать к адаптации сайтов под "6-8" лишь в тех случаях, если его, действительно, будут юзать только пользователи какой-нибудь "российской глубинки", где нет возможности обновить браузер IE до версии 10, 11 (да и вообще поставить уже, блин, нормальный браузер, а не IE))).
Теперь по существу: мне понравилась четкость изложения, отсутствие воды, достойное количество практических примеров и хороших скриншотов в столь небольшом объеме страниц. Понравилось также, что в 300 стр. уложилось ВСЁ то, что в других "рассасывают" на 450 страниц! Понравилось, что затронуто ближайшее будущее потребностей верстки (писал выше о высоком разрешении и др.). Также зацепило, что автор сам практикующий специалист, который занимается разработкой современных сайтов (!), а не теоретик, опирающийся на базовые справочные материалы, которые я и так могу найти в инете. Короче, рекомендую к приобретению. Хотя сам я уже сегодня попросил её у матери себе в подарок на НГ:).
Спасибо за внимание, строго не судите -- эмоции все-таки:)
Немного устарела, для продвинутых пользователей  [15 November 2013]
Сама книга написана в 2012 году и CSS3 для Internet Explorer версий от 6 до 8, хотя уже вышла 11-я и если Вам нужно с чего-то начать, начните с чего-нибудь другого - эта книга предназначена для продвинутых пользователей.

Последние поступления в рубрике "Тематика определяется"



Ритуальный оракул Магия зеркал, 53 карты + инструкция 

Представляем вам новую профессиональную колоду Любови Никифоровой (Отилы), являющуюся продолжением ранее изданной и уже популярной колоды «Ритуальный Оракул». В ней вы познакомитесь с азами работы с зеркалами, видами магических воздействий и способами их снятия....

Оракул Норн. Нити судьбы, 45 карт+инструкция 

Оракул Норн: нити судьбы - действительно уникальная колода. Предсказывать будущее или узнавать обстоятельства прошлого и настоящего помогают Боги, Богини и герои Древней Скандинавии. Они дают подробное описание грядущих событий, которое напрямую зависит не только от обстоятельств, но и от характера человека, который хочет узнать свое будущее....

Оракул Вселенской любви Ангелов, 72 карты + инструкция 

Оракул Вселенских Ангелов — это уникальная колода карт, созданная для тех, кто ищет направление и поддержку в области любви и добра от духовного мира Ангелов. Колода состоит из 72 карт, на каждой из которых изображен Ангел....

Если Вы задавались вопросами "где найти книгу в интернете?", "где купить книгу?" и "в каком книжном интернет-магазине нужная книга стоит дешевле?", то наш сайт именно для Вас. На сайте книжной поисковой системы Книгопоиск Вы можете узнать наличие книги Фрейн Б., HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств в интернет-магазинах. Также Вы можете перейти на страницу понравившегося интернет-магазина и купить книгу на сайте магазина. Учтите, что стоимость товара и его наличие в нашей поисковой системе и на сайте интернет-магазина книг может отличаться, в виду задержки обновления информации.