Книга «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.» / Хабр
Привет, Хаброжители! У нас вышло второе издание книги Бена Фрэйна:
Книга охватывает все важные особенности адаптивного веб-дизайна. Методология адаптивного веб-дизайна расширяется в ней за счет применения новейших, наиболее полезных технологий, предоставляемых 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, а все, что требуется знать об адаптивном веб-дизайне и создании качественных сайтов, включено в эту книгу!
Об авторе
Бен Фрэйн (Ben Frain) занимается веб-дизайном и разработкой веб-приложений с 1996 года. В настоящее время он работает ведущим разработчиком пользовательского интерфейса в компании Bet365.
До того как заняться веб-технологиями, работал скромным, не получившим должного признания актером на телевидении и техническим писателем.
Окончил Салфордский университет, получив высшее образование в области театрального искусства.
О рецензентах
Эстебан С. Эбэйт (Esteban S. Abait) — разработчик архитектуры программных продуктов и бывший аспирант. Имеет опыт разработки архитектуры сложных программных продуктов и планирования работы по их созданию. Был штатным и внештатным работником в компаниях Cisco, Intuit и Southwest. Работал с различными технологиями, в частности Java, PHP, Ruby и Node.js. В последние годы проявлял особый интерес к разработке веб-приложений, приложений для мобильных устройств и к REST API-интерфейсам.
В настоящее время Эстебан работает главным инженером компании Globant. В этой должности он добивается сдачи проектов в срок с обеспечением наивысшего качества конечного продукта. Он также занимается разработкой обучающих курсов по созданию программных продуктов и проводит совещания с разработчиками программных средств. Кроме того, Эстебан работает выездным консультантом по вопросам веб-технологий.
Компания Globant относится к новому поколению поставщиков технологических услуг, нацеленных на выработку инновационных программных решений с использованием новых технологий и тенденций. Globant сочетает в своей деятельности жесткость в вопросах проектирования и технических решений, характерную для поставщиков сервисов информационных технологий, с творческим и культурным подходом, присущим агентствам по внедрению цифровых технологий.
Кристофер Скотт Эрнандес (Christopher Scott Hernandez), будучи по профессии дизайнером, стал разработчиком веб-технологий, начав с того, что в 1996 году создал для своего отца первый в Интернете сайт по обивке катеров. После этого он стал передавать свой опыт мелким и крупным компаниям, поработав над наиболее посещаемыми в мире сайтами, включая eBay, LinkedIn и Apple.
Был техническим редактором книги HTML5 Multimedia Development Cookbook, вышедшей в Packt Publishing. Является заядлым читателем и любителем книг. Когда не занимается расстановкой пикселов и написанием кода, любит проводить время с женой и дочерью, знакомясь с парками и пешеходными тропами красивого города Остина в штате Техас.
Мовис Ледфорд (Mauvis Ledford) занимается комплексным созданием и техническим руководством компаний, специализирующихся в области веб-технологий, мобильных веб-технологий и создания приложений, масштабируемых в облачных сервисах.
Работал в компаниях Disney Mobile, Skype, Netflix, и многих других молодых компаниях в Сан-Франциско, Нью-Йорке и их окрестностях. В настоящее время он является техническим директором в недавно созданной компании Pathbrite, занимающейся разработкой образовательных технологий и специализирующейся на создании бесплатных адаптивных мультимедийных электронных портфолио и цифровых резюме для всех желающих. Вы также можете воспользоваться ее услугами, если зайдете на сайт.
Мовис также был техническим редактором первого издания книги Responsive Web Design with HTML5 and CSS3, вышедшей в Packt Publishing, и книги Building Hybrid Android Apps with Java and JavaScript, вышедшей в O’Reilly Media.
Софи Уильямс (Sophie Williams) — весьма взыскательный человек, увлекающийся дизайном. Имеет ученую степень в области графического дизайна и в настоящее время работает веб-дизайнером и разработчиком пользовательского интерфейса в компании www.bet365.com. Несмотря на любовь к созданию дизайна веб-приложений, в ее сердце всегда остается особый уголок для печатных изданий.
В свободное время она любит выпекать небольшие кексы, экспериментировать в области декоративно-прикладного искусства и склонна к раздаче указаний (тем, кто к ней прислушивается), когда что-нибудь в реальном мире идет не так, как ей нравится.
» Более подробно с книгой можно ознакомиться на сайте издательства
» Отрывок
Для Хаброжителей скидка 25% по купону — Фрэйн.
Книга «Отзывчивый дизайн на HTML5 и CSS3 для любых устройств. 3-е изд.»
16.05.2022
Книга «Отзывчивый дизайн на HTML5 и CSS3 для любых устройств. 3-е изд.»
Со времени выхода предыдущего издания многое изменилось, теперь отзывчивый дизайн — это не новая технология, а стандарт разработки на HTML5 и CSS3. Неформальный и открытый стиль автора позволяет быстро освоить все возможности современного веб-дизайна. Вы получите практические знания о SVG, разметке HTML, создании потрясающей эстетики и эффектов с помощью CSS, переходах, преобразованиях и анимациях и многом другом.
Если же вы опытный веб-игрок, то смело переходите к новым темам — гридам (CSS Grid layout) или вариативным шрифтам. К концу книги вы не только получите полное представление об отзывчивом веб-дизайне и возможностях последних версий HTML5 и CSS, но и узнаете, как максимально эффективно использовать эти знания на практике. Все, что нужно для начала работы, — это представление о том, что такое HTML и CSS.
Для масштабирования используется следующий синтаксис:
Проход указателя мыши над ссылкой, имеющей класс scale, вызовет такой эффект:
Мы указываем браузеру при наведении на элемент указателя мыши увеличить этот элемент в 1,4 раза.
Использование значений меньше единицы приведет к сжатию элементов. Следующий код приведет к сжатию элемента до половины его размера:
Перемещение (translate)
Для перемещения используется следующий синтаксис:
В нашем примере это правило приведет к следующему эффекту:
Свойство translate дает команду браузеру перемеcтить элемент на расстояние, определяемое длиной (например, vw, px, % и т.
д.). Первое значение относится к перемещению по оси x, второе — по оси y. Положительные значения, заданные в скобках, приводят к перемещению элемента вправо или вниз, а отрицательные —соответственно, влево или вверх.
Если передается только одно значение, то оно применяется к оси x.
Если нужно указать для перемещения элемента значение только для одной оси, можно использовать объявления translateX(-20px), что в данном случае приведет к перемещению элемента влево на 20 px, или translateY(-20px), что в данном случае приведет к перемещению элемента вверх на 20 px.
Использование translate для центрирования элементов с абсолютным позиционированием
translate предоставляет удобный способ центрирования элементов с абсолютным позиционированием внутри контейнера с относительным позиционированием. Пример кода находится в каталоге example_09-03.
Рассмотрим разметку:
И этот код CSS:
Возможно, вам уже приходилось делать нечто подобное. Когда известны размеры элемента с абсолютным позиционированием (в данном случае 200 px × 200 px), для «подталкивания» элемента обратно в центр можно воспользоваться отступами с отрицательными значениями.
А как включить содержимое и насколько высоким оно окажется?
Добавим к внутреннему блоку произвольное содержимое.
Очевидно, возникла проблема. Разберемся с этим беспорядком с помощью transform:
И вот результат:
Здесь top и left позиционируют блок внутри контейнера таким образом, что вначале левый верхний угол внутреннего блока находится в точке 50 % длины и 50 % высоты контейнера. Объявление transform работает в отношении внутреннего блока и позиционирует его в обратную сторону по этим осям на половину (-50%) его собственной ширины и высоты. Превосходно!
Приобрести книгу можно на сайте издательства:
https://www.piter.com/collection/new/product/otzyvchivyy-dizayn-na-html5-i-css3-dlya-lyubyh-ustroystv-3-e-izd
HTML5 и CSS3: разработка с учетом стандартов завтрашнего дня сегодня, Брайан П. Хоган
Элиас
76 отзывов8 подписчиков
18 января 2016 г. Ну, я полагаю, что чтение книги о веб-технологиях через 3 года после ее выхода обязательно покажется вам немного устаревшей.
Книга неплохая: если вы не знаете о возможностях, добавленных в браузер за последние пару лет, вы, вероятно, узнаете много нового из этой книги. Он охватывает множество тем в широком смысле, что я и искал.
Я был немного разочарован качеством кода в примерах, я ожидал, что он будет более отшлифованным, но по сути это одноразовый код.
Книга работает как достойное введение в темы, но вам нужно будет выполнить дополнительную домашнюю работу, когда придет время ее реализовать. В частности, о CSS я рекомендую прочитать «Секреты CSS» Леа Веру (в настоящее время я читаю, и одна только первая глава, вероятно, уже стоила своей цены).
21 мая 2012 г.
В HTML5 и CSS3 не так уж много нового, чтобы его изучить понадобилась бы эта книга. Вы также можете заполнить поисковую систему и найти ресурсы обо всех этих новых аспектах в Интернете. Однако с этой книгой у вас есть все это в одном месте, и вы получаете гарантию, что решения, представленные в этой книге, являются действительно работающими примерами из реального мира.
Автор также представляет обходные пути для всех тех решений, которые еще не работают во всех браузерах, поэтому наряду с технологиями, указанными в заголовке, вы также получите хороший обзор кода Javascript и особенно кода jQuery.
- it
9 января 2012 г.
Эта книга служит хорошим введением в изменения, включенные в обновления HTML5 и CSS3. Мне очень нравится, как в примерах отражается реальный опыт Брайана, поскольку он показывает, как вы можете реализовать эти новые функции таким образом, чтобы они поддерживали несколько браузеров. Теория — это здорово, но мне нравится то, что я могу ИСПОЛЬЗОВАТЬ, и это дает нам это.
26 июня 2013 г.
Только что закончил второе издание, которое содержит более актуальные ссылки и примеры. Это хорошее начало для знакомства с HTML5 и некоторыми функциями CSS3, а также хороший справочник по идеям и другим источникам. Но, ни в коем случае, это не та книга, которая научит вас всему.
Как и все хорошие закуски, он предназначен только для того, чтобы подготовить ваши вкусовые рецепторы.
9 сентября 2012 г.
Сначала я получил его в библиотеке, но потом купил для справки. Очень хорошо организовано и показывает, как сделать каждый элемент обратно совместимым, что я считаю особенно ценным. Единственной плохой частью было ограниченное покрытие элемента canvas.
- профессионал
14 сентября 2012 г.
Эта книга является хорошим учебником для начинающих по HTML 5, CSS3 и JQuery. Она хорошо написана, по образцам легко следовать, и к ней есть хорошие приложения для дальнейшего использования. Акцент на доступности является дополнительным бонусом, поскольку большинство книг, как правило, игнорируют эту мантру дизайна.
- программное обеспечение
2 января 2013 г.
Хорошая штука. Хорошая книга, но не для тех, кто начинает с HTML и CSS. Книга предлагает хороший обходной путь или откат, чтобы противостоять проблеме со старыми браузерами и теми, кто еще не принимает новые теги.
Гюри
48 отзывов2 подписчика
6 апреля 2011 г.Хороший обзор HTML5 и CSS. Мне нравятся подробности об откате, когда функциональные возможности HTML5 не на месте… хотя я надеюсь, что скоро нам больше не понадобится отступать.
- программирование
23 августа 2011 г.
Хорошая книга для освежения знаний, и приятно иметь большую часть информации в одной книге. С другой стороны, я думаю, что в сети есть бесплатные справочники и учебные пособия получше.
- ла-хойя
Дженни
41 отзыв3 подписчика
29 ноября 2011 г.В этом семестре я искал руководства по работе с веб-разработчиками и IA; это действительно не соответствовало счету.
- млис
Чтение
14 октября 2012 г.Пока это отличные книги для разработчиков. хорошее введение и подробности о новейших веб-технологиях.
31 июля 2014 г.
Действительно очень полезно для изучения новых стандартов
3 февраля 2016 г.
Я купил эту книгу, когда впервые изучал HTML5 и CSS3. Я обнаружил, что это действительно хорошее место для начала в качестве основы для информации как по HTML5, так и по CSS3.
- чтение в мягкой или твердой обложке
14 апреля 2017 г.
Это помогло мне освежить некоторые навыки работы с HTML и CSS.
разработка с учетом стандартов завтрашнего дня уже сегодня
Хилл, Джош и Браннен, Джеймс А.
Великолепный HTML5 и CSS3 . Харлоу, Великобритания: Pearson Education, 2011. xii, 300 стр. ISBN 978-0-273-74712-3. 18,99 фунтов стерлинговХоган, Брайан П.
HTML5 и CSS3: разработка с учетом завтрашних стандартов уже сегодня . Роли, Северная Каролина: Прагматическая книжная полка, 2010. xvi, 258, [6] с. ISBN 978-1-93435-668-5. $33,00 Кажется, холмы оживают звуками книг по HTML5, выходящих из-под печатного станка — отсюда и рецензия на пару книг, в дополнение к другой, появившейся в этом номере журнала.
Я предполагаю, что это означает, что издатели и авторы считают, что стандарт теперь достаточно надежен, чтобы продолжать публикацию. Я говорю «достаточно надежный», потому что стандарт еще не завершен (текущая версия — ревизия 1.4903), но процесс достижения согласия по каждому элементу и функции в соответствующем комитете W3C может быть довольно бесконечным.
Из двух книг книга Хилла и Бреннана является самой базовой: это общий текст по HTML и CSS с использованием текущих версий этих стандартов для обучения разработке веб-страниц. Он проходит через основы структурирования страницы, разметки текста, использования гиперссылок, а затем переходит к более сложным функциям изображений, таблиц и форм. Если вы уже знаете, как это делать, книга станет курсом повышения квалификации, и вы сможете сосредоточиться на тех разделах, которые посвящены новым элементам и новым возможностям.
В части книги, посвященной CSS3, авторы отмечают, что, в отличие от CSS2, спецификация утверждается не единым куском, а разбита на модули, а это значит, что дизайнеры веб-сайтов могут использовать новые возможности по мере необходимости.
утверждаются, а не ждут, возможно, несколько лет, пока не будет утверждена полная спецификация. Авторы указывают на полезный ресурс veign.com, но, к сожалению, найти на сайте краткое руководство по CSS3 очень сложно. Он не появился, даже когда я воспользовался его внутренней поисковой системой и нашел его, только выполнив общий поиск в Интернете. Итак, в качестве услуги покупателю этой книги, вот ссылка на страницу, которую я заархивировал на WebCite. Если повезет, он не исчезнет: http://bit.ly/lxK5pG.
По сути, HTML5 связан со структурой страницы, а CSS3 — с ее внешним видом. Аббревиатура означает «каскадные таблицы стилей», а «каскад» работает на трех уровнях: уровень сайта, предоставляемый отдельной таблицей стилей, которая управляет внешним видом сайта в целом или любой части сайта, которую вы хотите. относиться к; уровень страницы со стилем, встроенным в раздел
страницы; и «встроенный», т. е. встроенный в элемент страницы.Здесь проиллюстрирован встроенный каскадный уровень: вы увидите, что для этого абзаца было выбрано другое семейство шрифтов, используя оператор стиля в теге абзаца:
.
Остальные абзацы на странице остаются без изменений, поскольку их стиль задается таблицей стилей для раздела отзывов в целом.
В CSS3 слишком много новых функций, чтобы рассматривать их здесь: это цель книги, и она хорошо показывает, как использовать стили для закругления углов прямоугольников и подобных загадочных функций!
В целом, книга очень хорошо оформлена, с использованием большого количества цветов, скриншотов, боковых панелей и других элементов, чтобы донести свою мысль. «Блестящий» в названии — это не хвастовство, а отсылка к сериалу, в котором он появляется. Если вы только начинаете изучать HTML и CSS, это будет хорошим началом.
Вторая книга совсем другая: лучше было бы назвать ее «Разработка веб-сайтов с помощью HTML5 и CSS3», поскольку ее внимание сосредоточено не на обучении основам, а на использовании стандартов в дизайне сайтов. В самом начале автор ясно дает понять, что необходимы предварительные знания:
Эта книга предназначена в первую очередь для веб-разработчиков, хорошо разбирающихся в HTML и CSS... Я также предполагаю, что у вас есть базовое понимание Javascript и jQuery. ..
.. Я также предполагаю, что у вас есть базовое понимание Javascript и jQuery. ..Итак, если вы новичок, вам нужно начать с чего-то другого, и книга, рассмотренная выше, будет хорошей отправной точкой, или другое введение в HTML5, рассмотренное здесь.
Книга Хогана, безусловно, своевременна: HTML5 набирает силу, и большинство браузеров теперь могут справляться с большинством новых функций. Я подозреваю, что скорость, с которой он принимается, отражает облегчение от того, что не приходится иметь дело с XML, хотя я полагаю, что этот стандарт продолжит находить приверженцев в специализированных областях. Однако сеть настолько открыта, что миллионы дизайнеров страниц, как профессиональных, так и любителей, существующих в киберпространстве, с большей вероятностью примут эволюционный продукт, такой как HTML5.
Автор использует очень практичный практический подход, хотя, как отмечалось выше, в некоторых главах ожидается некоторый предшествующий опыт. После вводного обзора HTML5 и CSS3 книга разделена на три части: Улучшение пользовательских интерфейсов; Новые виды и звуки, а также Beyond HTML5.