Книга Хуана Диего Гоше «HTML5 для профессионалов»

Хуан Диего Гоше "html5 для профессионалов"Решил я освежить свои знания в области сайтостроительства и упорядочить для себя обрывочные сведения относительно HTML5 и всего, что с ним связано. Статьи в интернете обычно рассказывают о какой-то одной особенности нового стандарта, а хотелось почитать что-то, где описывались бы все нововведения HTML5 по сравнению с HTML4 в одном месте.

Перебирая различные книги, я наткнулся на книгу Хуана Диего Гоше «HTML5 для профессионалов», которая в оригинале называлась «HTML5 for Masterminds, 2nd Edition», и на ее обложке красовался мозг в баночке. В переводе книга издана в 2015 году, а оригинальная вышла в 2012 году.

HTML5 for Masterminds
Свою задачу книга выполнила на 100%, ее содержание полностью сфокусировано на новых возможностях HTML5. Хотя книга и называется «HTML5 для профессионалов» (по крайней мере в переводе), но автор все-таки добавил пару глав, где коротко рассказывает основы HTML и JavaScript, но не более того, что понадобится для понимания примеров из книги. И даже когда он пишет про основы HTML, он сразу отмечает моменты, где по идеологии HTML5 отличается от HTML4. С первых же примеров он начинает использовать такие структурные теги как <header>, <nav>, <section>, <aside> и <footer> (хотя для меня эти теги уже были знакомы, но, пожалуй, самое понятное описание того, какие теги для каких элементов сайта рекомендуется применять, попалось именно в этой книге.), а заодно пишет, как изменилась семантика (смысл) старых HTML-тегов, таких как <i>, <b> и др.

Вот, например, цитата из описания некоторых тегов:

  • <em>. Следует применять для акцентированного фрагмента текста (вместо тега <i>, который использовался раньше);
  • <strong>. Подчеркивает значимость текста (браузеры выделяют такой текст полужирным шрифтом);
  • <b>. Рекомендуется использовать только в тех случаях, когда нет другого, более подходящего элемента;
  • <i>. Больше не применяется для курсивного написания текста, сейчас, согласно спецификации HTML5, служит для выделения особых фрагментов текста, например, цитат, технических терминов, иностранных слов.

Далее подробно с примерами описывает новые теги HTML5, такие как <wbr>, который показывает, где можно разорвать страницу, <details>, <summary> и т.д.

После главы про HTML-теги, начинаются главы про CSS. В первой из них показаны основы использования CSS (довольно коротко, без утомительного перечисления старых CSS-стилей), и упор здесь сделан на блочные модели. Сначала рассказывается про блочную модель, которая сейчас применяется повсеместно (там, где уже отказались от таблиц для разметки страницы), а затем подробно с пояснительными картинками рассказывается про новую блочную модель с использованием Flex-контейнеров или Flexbox.

Эту новую модель начали поддерживать уже все браузеры, но у некоторых из них (опять виноват IE) поддержка новой модели появилась только в 10-й версии, хотя IE 11 поддерживает уже последнюю версию спецификации. А на момент написания книги Flexbox последней версии спецификации поддерживал только Google Chrome (и Chromium), о чем предупреждает автор.

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

После описания новых возможностей CSS (включая и новые свойства) начинается самая большая часть книги, занимающая процентов 70 — это рассказ о новых возможностях в JavaScript. Автор начинает с очень краткого введения в этот язык. Надо сказать, что сами примеры подобраны очень хорошо — они достаточно компактны и акцентированы на конкретное описываемое свойство языка или спецификации. Иногда попадаются длинные примеры, например, когда автор делает простенькую 3D-игру с помощью WebGL, но это вынужденное исключение.

Что касается JavaScript, то каждой новой возможности, появившейся вместе с HTML5, посвящена отдельная глава. Например, после главы, посвященной основам языка начинается глава про API форм (API Forms), где рассказывается про новые типы полей тега <input>, новые атрибуты и т.д. В этой же главе рассказывается, как HTML5 облегчает проверку вводимых пользователем данных, рассказывается про подсказки относительно неправильно заполненных полей форма и т.д.

Следующая глава посвящена мультимедиа — новым HTML-тегам <video> и <audio>, а также работе с ними с помощью JavaScript. После этого идет небольшая глава про работу с субтитрами и тег <track>. Чуть позже будет глава, посвященная API Stream, с помощью которого можно подключаться, например, к веб-камере или другим медиапотокам.

После этого описывается новый API, предназначенный для того, чтобы веб-приложения могли работать в полноэкранном режиме (API Fullscreen).

Разумеется, автор не мог обойти стороной и такое важное нововведение как API Canvas, который позволяет рисовать в окне бразуере так же, как и в окнах обычных приложений. После чего от двумерной графике автор переходит к 3D. Строго говоря, новый стандарт принес нам такой API как WebGL, но автор, ссылаясь на то, что программы, использующие WebGL получаются очень большие, и для его использования надо знать язык программирования шейдеров, рассказывает про трехмерную графику в браузере с использованием более высокоуровневой библиотеки — Three.js.

Еще две главы посвящены мышке. 🙂 Первая из них посвящена новому API, предназначенному для захвата мышки, чтобы, например, установить для определенных элементов страницы свой курсор. Вторая глава посвящена API, предназначенного для перетаскивания элементов в пределах страницы или перетаскивания файлов из других приложений в окно браузера (например, чтобы закачать файл).

Еще несколько глав посвящены новым API, связанными с хранением данных пользователей в браузере. Одна из глав посвящена двум объектам, один из них предназначен для хранения данных пользователя в течение сессии (sessionStorage), а второй для более долговременного хранения данных — localStorage. Эти объекты созданы, чтобы не хранить объекты в cookie, т.к. sessionStorage / localStorage теоретически более безопасны. Однако localStorage предназначены для хранения небольшого количества данных, если их становится много, то есть смысл перейти на IndexedDB — API индексированных баз данных, которому посвящена еще одна глава.

Кроме перечисленных тем, автор рассказывает про API работы с геолокацией, историей посещений страниц, веб-сообщения (The Web Messaging API), WebSockets, WebRTC — протокол, предназначенный для передачи данных между пользователями непосредственно друг другу, P2P, минуя сторонние серверы (которые, тем не менее могут присутствовать и помогать пользователям найти друг друга). Как я понимаю, эта технология создавалась в первую очередь для организации видеотрансляций между пользователями, т.к. передаваемый объем данных в этом случае будет большой и сильно нагружающий сторонние сервера, если те будут задействованы при передаче данных.

Причем это еще не все описанные в книге технологии. Про каждую из них рассказано достаточно кратко, но в то же время понятно и с хорошими лаконичными примерами.

В общем, я доволен прочитанной книгой, рад, что в процессе поиска остановился именно на ней. Жаль только, что когда автор пишет, что та или иная технология реализована только в одном или другом браузере, он не пишет, какие именно версии браузеров он имеет в виду. Ну и немного раздражают постоянные отсылки на сайт книги (http://www.formasterminds.com/ ) за дополнительной информацией, при этом без конкретной ссылки — «ищите где-то там». Ну и по ходу текста попадаются некоторые косяки, связанные скорее всего с невнимательной редактурой русскоязычного издания: где-то был напечатан не тот рисунок, в нескольких местах имя функции JavaScript зачем-то написано через дефис (скорее всего в оригинале там был перенос слова, который стал дефисом в русском тексте), да и опечатки попадаются.

Если захотите купить книгу, то я буду вам благодарен, если сделаете это, пройдя по реферальной ссылке — Хуан Гоше: HTML5. Для профессионалов. Я сам эту книгу покупал в этом магазине.

Вы можете подписаться на новости сайта через RSS, Группу Вконтакте или Канал в Telegram.

Пожалуйста, оцените запись

УжасноПлохоТак себеХорошоОтлично (Количество голосов: 2, средняя оценка: 5,00)
Загрузка...

Один комментарий

  1. Posho:

    спасибо, тоже искал подобную книгу

Leave a comment

Subscribe without commenting