Помоги проекту - поделись книгой:
Б. Фрэйн
HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.
2016
Переводчик
Технический редактор
Литературный редактор
Художники
Корректоры
Верстка
Б. Фрэйн
HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.. — СПб.: Питер, 2016.
ISBN 978-5-496-02271-2
© ООО Издательство "Питер", 2016
Об авторе
Бен Фрэйн (Ben Frain) занимается веб-дизайном и разработкой веб-приложений с 1996 года. В настоящее время он работает ведущим разработчиком пользовательского интерфейса в компании Bet365.
До того как заняться веб-технологиями, работал скромным, не получившим должного признания актером на телевидении и техническим писателем. Окончил Салфордский университет, получив высшее образование в области театрального искусства.
Написал четыре так и не оцененных по достоинству (по его мнению) киносценария и до сих пор вынашивает, правда уже с угасающим энтузиазмом, планы продать хотя бы один из них. Вне работы предается весьма простым увлечениям. Играет в мини-футбол, пока его физическое состояние и жена не препятствуют этому занятию, и занимается воспитанием двух сыновей.
В настоящее время доступна еще одна книга, вышедшая из-под его пера, —
Хочу поблагодарить технических рецензентов книги за то, что они потратили свое свободное время на внесение ценного вклада в этот труд. Спасибо им за повышение качества результата.
Хочу также поблагодарить веб-сообщество в целом за постоянный обмен информацией. Без всех вас я не смог бы состояться как веб-разработчик.
А главное, хочу выразить признательность своей семье. Могу привести множество примеров жертв, приносимых ими ради предоставления мне возможности работать над книгой, включая приглушенный звук телевизора (от жены), чашку чая (от родителей) и прекращение пиратских боев на мечах (от сыновей).
О рецензентах
Эстебан С. Эбэйт (Esteban S. Abait) — разработчик архитектуры программных продуктов и бывший аспирант. Имеет опыт разработки архитектуры сложных программных продуктов и планирования работы по их созданию. Был штатным и внештатным работником в компаниях Cisco, Intuit и Southwest. Работал с различными технологиями, в частности Java, PHP, Ruby и Node.js. В последние годы проявлял особый интерес к разработке веб-приложений, приложений для мобильных устройств и к REST API-интерфейсам. Разработал несколько довольно объемных веб-приложений с использованием JavaScript. Кроме того, он создавал методические рекомендации по REST-технологиям на основе оценок клиентов. Разрабатывал сайты с высоким объемом трафика, в которых использовал такие ключевые для масштабирования технологии, как репликация, сегментирование и распределенное кэширование данных.
В настоящее время Эстебан работает главным инженером компании Globant. В этой должности он добивается сдачи проектов в срок с обеспечением наивысшего качества конечного продукта. Он также занимается разработкой обучающих курсов по созданию программных продуктов и проводит совещания с разработчиками программных средств. Кроме того, Эстебан работает выездным консультантом по вопросам веб-технологий.
Компания Globant (http://www.globant.com/) относится к новому поколению поставщиков технологических услуг, нацеленных на выработку инновационных программных решений с использованием новых технологий и тенденций. Globant сочетает в своей деятельности жесткость в вопросах проектирования и технических решений, характерную для поставщиков сервисов информационных технологий, с творческим и культурным подходом, присущим агентствам по внедрению цифровых технологий. В компании Globant выдерживаются четкие пропорции инженерных наработок, дизайна и инноваций.
Кристофер Скотт Эрнандес (Christopher Scott Hernandez), будучи по профессии дизайнером, стал разработчиком веб-технологий, начав с того, что в 1996 году создал для своего отца первый в Интернете сайт по обивке катеров. После этого он стал передавать свой опыт мелким и крупным компаниям, поработав над наиболее посещаемыми в мире сайтами, включая eBay, LinkedIn и Apple.
Был техническим редактором книги
Мовис Ледфорд (Mauvis Ledford) занимается комплексным созданием и техническим руководством компаний, специализирующихся в области веб-технологий, мобильных веб-технологий и создания приложений, масштабируемых в облачных сервисах.
Работал в компаниях Disney Mobile, Skype, Netflix, и многих других молодых компаниях в Сан-Франциско, Нью-Йорке и их окрестностях. В настоящее время он является техническим директором в недавно созданной компании Pathbrite, занимающейся разработкой образовательных технологий и специализирующейся на создании бесплатных адаптивных мультимедийных электронных портфолио и цифровых резюме для всех желающих. Вы также можете воспользоваться ее услугами, если зайдете на сайт http://www.pathbrite.com.
Мовис также был техническим редактором первого издания книги
Софи Уильямс (Sophie Williams) — весьма взыскательный человек, увлекающийся дизайном. Имеет ученую степень в области графического дизайна и в настоящее время работает веб-дизайнером и разработчиком пользовательского интерфейса в компании www.bet365.com. Несмотря на любовь к созданию дизайна веб-приложений, в ее сердце всегда остается особый уголок для печатных изданий. В свободное время она любит выпекать небольшие кексы, экспериментировать в области декоративно-прикладного искусства и склонна к раздаче указаний (тем, кто к ней прислушивается), когда что-нибудь в реальном мире идет не так, как ей нравится.
Сайт Софи находится по адресу www.sophiewill.com, а ее записи в «Твиттере» можно найти на страничке @sophiewill13.
Предисловие
Адаптивный веб-дизайн представляет собой такой дизайн, который имеет подобающий внешний вид на смартфоне, настольном компьютере и на всем, что относится к промежуточным устройствам. Он будет легко реагировать на размер пользовательского экрана, что позволяет пользователям получить наилучшее впечатление от ваших веб-продуктов при работе как на сегодняшних гаджетах, так и на устройствах завтрашнего дня.
Книга охватывает все важные особенности адаптивного веб-дизайна. Методология адаптивного веб-дизайна расширяется в ней за счет применения новейших, наиболее полезных технологий, предоставляемых HTML5 и CSS3, как никогда ранее повышающих компактность и облегчающих сопровождение создаваемых конструкций. В книге также даются объяснения самым востребованным и передовым методам написания и предоставления кода, изображений и файлов.
Если вы в состоянии разобраться в коде HTML и CSS, значит, вам также под силу освоить создание конструкций на основе адаптивного веб-дизайна.
О чем эта книга
Глава 1 «Основы адаптивного веб-дизайна» представляет собой краткий обзор ключевых составляющих в создании программных продуктов, отвечающих требованиям адаптивного веб-дизайна.
Глава 2 «Медиазапросы — поддержка различных окон просмотра» охватывает все, что нужно знать о медиазапросах CSS: их возможности, варианты синтаксиса и различные способы применения.
Глава 3 «Динамически изменяемые разметки и адаптивные изображения» показывает, как создавать код пропорциональных разметок и адаптивных изображений, и содержит детальное исследование разметок, создаваемых с помощью Flexbox.
Глава 4 «Использование HTML5 в целях разработки адаптивного веб-дизайна» охватывает все семантические элементы HTML5, семантику текстового уровня и вопросы обеспечения доступности веб-продуктов. В ней также рассматриваются методы вставки видео и аудио в ваши страницы с использованием средств HTML5.
Глава 5 «CSS3. Селекторы, разметка, цветовые режимы и новые возможности» позволяет разобраться с безграничными возможностями CSS: селекторами, установками цветовых решений в форматах HSLA и RGBA, веб-оформлением, относительными единицами измерений окон просмотра и многим другим.
Глава 6 «Создание эстетически привлекательных эффектов средствами CSS3» охватывает CSS-фильтры, блоковые тени, линейные и радиальные градиенты, множественные фоновые изображения и способы нацеливания фоновых изображений на устройства с высоким разрешением экрана.
Глава 7 «Использование SVG для достижения независимости от разрешения» содержит все необходимые объяснения по использованию SVG-графики внутри документов и в качестве фоновых изображений, а также дает описания способов взаимодействия с ними с помощью JavaScript.
Глава 8 «Переходы, преобразования и анимация» дает информацию, как привести все в движение с помощью CSS, и содержит исследование способов организации взаимодействия и анимации элементов с использованием CSS.
Глава 9 «Обуздание форм с помощью HTML5 и CSS3» показывает, что такой нелегкий во все времена вопрос, как работа с формами, существенно упростился с появлением самых последних свойств HTML5 и CSS3.
Глава 10 «Подходы к адаптивному веб-дизайну» содержит исследование основных вопросов, требующих разрешения, прежде чем можно будет приступать к непосредственной разработке адаптивного веб-дизайна, а также целую подборку самых актуальных мудрых мыслей, призванных вдохновить вас на увлекательнейшее занятие — создание адаптивных веб-конструкций.
Что нужно для работы с книгой
• Текстовый редактор.
• Один из самых распространенных браузеров.
• Чувство юмора.
Для кого написана эта книга
Приходилось ли вам создавать два сайта: один для мобильных, а другой — для более крупных устройств? Или, может быть, у вас уже есть первый продукт в стиле адаптивного веб-дизайна, но вы пока не можете собрать в нем все в единое целое? Если так, то второе издание этой книги даст вам все, что нужно для перевода ваших сайтов на следующий, более высокий уровень.
Чтобы следовать за авторской мыслью, нужны лишь некоторые познания в HTML и CSS, а все, что требуется знать об адаптивном веб-дизайне и создании качественных сайтов, включено в эту книгу!
Соглашения
В издании будут встречаться текстовые стили, позволяющие выделять различные виды информации. Рассмотрим примеры этих стилей и их предназначение.
Встречающиеся в тексте слова, относящиеся к программному коду и примерам пользовательского ввода, будут выделены моноширинным шрифтом.
Имена папок, файлов, расширения имен файлов, названия путей, URL-адреса и элементы интерфейса будут выделены полужирным шрифтом без засечек.
Блоки кода будут показаны в следующем виде:
img {
max-width: 100%;
}
Новые понятия и важные слова будут выделены полужирным шрифтом.
В такой врезке будет содержаться важная сопутствующая информация.
А в такой врезке будут представлены советы и интересные приемы работы.
1. Основы адаптивного веб-дизайна
Всего лишь несколько лет назад сайты могли создаваться с фиксированной шириной в расчете на то, что все конечные пользователи получат удобные условия работы. Эта фиксированная ширина (обычно 960 пикселов или около того) была не слишком велика для экранов ноутбуков, а пользователи, имеющие мониторы с высоким разрешением, просто видели с обеих сторон большие поля.
Но в 2007 году на телефонах iPhone компании Apple впервые появились по-настоящему удобные условия просмотра информации и условия доступа людей к веб-данным и работы с ними изменились навсегда.
В первом издании этой книги было отмечено, что «за 12 месяцев, с июля 2010-го по июль 2011 года, процент использования мобильных браузеров во всем мире вырос с 2,86 до 7,02».
В середине 2015 года в той же статистической системе (gs.statcounter.com) утверждалось, что данный показатель увеличился до 33,47 %. Для сравнения, в компании North America Mobile этот показатель достиг 25,86 %.
Использование мобильных устройств растет по любым показателям, а на другом краю шкалы в общую практику применения входят 27- и 30-дюймовые дисплеи. Как никогда ранее растет и разрыв между наименьшими и наибольшими экранами, на которых просматривается веб-содержимое. Благо есть решение, подходящее для постоянно расширяющейся арены браузеров и устройств. Нормальная работа сайта на множестве устройств и экранов возможна благодаря так называемому адаптивному дизайну, построенному на основе применения HTML5 и CSS3. Эта технология позволяет разметке и возможностям сайта подстраиваться под имеющееся окружение (размер экрана, тип ввода и возможности устройства или браузера).
Более того, адаптивный веб-дизайн, создаваемый с помощью HTML5 и CSS3, может быть реализован без необходимости использования конечных решений на серверной стороне.
Итак, вперед к неизведанному
Я надеюсь, что глава 1 поможет достичь одной из двух целей независимо от того, в новинку ли вам такие понятия, как адаптивный дизайн, HTML5 или CSS3, или вы в них неплохо разбираетесь.
Если HTML5 и CSS3 уже используются вами для адаптивной веб-разработки, эта глава позволит быстро вспомнить их основы. А если вы новичок в этом деле, воспринимайте ее в качестве своеобразного курса молодого бойца, охватывающего все с самого начала, так что данная глава пригодится всем без исключения.
К концу главы будет рассмотрено все необходимое для создания полностью адаптивной веб-страницы.
А зачем тогда остальные девять глав? Это также станет понятно к концу главы.
В текущей главе будут рассмотрены следующие вопросы:
• определение адаптивного веб-дизайна;
• способы настройки уровней поддержки браузеров;
• краткий обзор инструментальных средств и текстовых редакторов;
• создание первого адаптивного примера — простой страницы, созданной с использованием HTML5;
• важность метатега viewport;
• способ масштабирования изображений под их контейнер;
• написание медиазапросов CSS3 для создания контрольных точек дизайна;
• несовершенство нашего простого примера;
• почему мы находимся всего лишь в самом начале пути.
Поделиться книгой: