Погружение в HTML5

Обновил Погружение в HTML5 от Марка Пилгрима. Хотя эта книга уже публиковалась у меня, за последние годы произошло несколько вещей в сфере веб-технологий.

  • HTML5 перестал быть экзотикой и воспринимается большинством как полноценный и удобный инструмент.
  • Браузеры поддерживают, хотя и не всё, но уже большинство технологий. Даже IE, да.

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

С учётом этого обновления и внесены правки в перевод и исправлены мелкие ошибки (самая главная — с буквой ё!).

Так что если вы до сих пор в раздумьях, верстать на HTML5 или нет, то вопрос стоит неверно. HTML5 это уже не будущее, это то, что происходит здесь и сейчас и использовать его надо непременно. А книга, как надеюсь, вам в этом поможет.

Кому заказать разработку и продвижение корпоративного веб-сайта. Часть 2.

Реклама

Над вынесенным в заголовок вопросом ежедневно задумываются тысячи владельцев бизнесов или менеджеров, на которых возложена соответствующая задача. Итак, есть задача, есть бюджет на её решение, возможно есть видение, как всё должно быть сделано. И вы ищете подрядчика или подрядчиков, которым хотели бы доверить свою задачу и выделенный на её решение бюджет. Выбор огромен. Тысячи веб-студий предлагают услуги по разработке и продвижению веб-сайтов. Например, вы можете заказать ваш сайт в веб-студии Вики Веб, Интернет Лаборатории СевенПро или в компании СМСдизайн. Продвижение вашего веб-сайта вы можете заказать в компании Алроникс, которая работает по всей России. Также вы можете заказать продвижение вашего сайта одному из лидеров СЕО-отрасли, компании SEO.RU. Это одна из самых надёжных компаний в отрасли, у них есть клиенты, которых они обслуживают вот уже более 10 лет.

Кому заказать разработку и продвижение корпоративного веб-сайта

Реклама

Итак, вам нужен веб-сайт для вашего нового бизнеса. Включаем компьютер, заходим в Яндекс или Гугл, спрашиваем «заказать разработку и продвижение веб-сайта» и получаем огромное количество предложений. Разработку сайтов можно заказать например в студии SynWeb или в Санкт-Петербургской WebEvolution, а продвижение в СЕО-Импульс или Директ Оптима. Продвижение интернет-магазина, в т. ч. крупного, насчитывающего от 5000 товаров, можно заказать, например, в компании СайтАктив. Кроме нескольких перечисленных компаний разумеется есть еще несколько тысяч других. Выбор разработчика вашего будущего веб-сайта это важное решение, от которого во многом будет зависеть успех вашего нового бизнеса.

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

Как верстать на HTML5 и CSS3

Появилось новое руководство по HTML5 и CSS3 от Дамиана Вельгошика. Ориентировано на новичков, которые вообще знать не знают ничего о вёрстке. Остальным рекомендую заглянуть в последнюю главу, где приведены полезные ссылки.

Создание игр для Firefox OS

На сайте webref.ru добавилась новая книга Андре Гарсия посвящённая разработке игр для Firefox OS. Несмотря на то, что эта платформа относительно новая и малоизвестная у нас в стране, у неё есть огромный потенциал. Хотя бы потому, что приложения делаются с помощью связки HTML, CSS и JavaScript. А значит, всё это известно, всё это можно смотреть в браузере и при желании превратить в мобильное приложение для iOS и Android.

В книге идёт речь об использовании фреймворка Phaser для создания Арканоида, это такая классическая игра, все её хоть раз видели. На этом примере вы рассмотрите полный цикл разработки игр на HTML5.

Разработка для Firefox OS

Добавилось новое руководство по разработке приложений для Firefox OS от Андре Гарсия. Это относительно новая мобильная платформа, для создания приложений к которой надо знать HTML, CSS и JavaScript. Благодаря нашему сайту две трети вы уже знаете. Так что это ваш шанс выйти на новый мобильный рынок!

Примеры в справочниках

На сайте webref.ru обновился справочник HTML и CSS. Исправлены мелкие ошибки, переделано большинство примеров, а главное — их теперь можно просматривать непосредственно в браузере. Для этого возле примеров есть вкладка «Результат», при щелчке по ней виден результат текущего примера. Технология используется та же, что и на htmlbook.ru, но на мой взгляд, сделана удобнее. Используйте и делитесь впечатлениями и предложениями по справочникам.

Подсветка кода через Rainbow

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

Less

По адресу webref.ru/layout/less добавилось небольшое руководство по Less. Если не знаете что это такое, читать обязательно, а если знаете, то продолжайте дальше использовать Sass.

Справочник HTML

На сайте webref.ru обновился Справочник HTML. Обновлена таблица с браузерами, дополнены примеры, исправлены мелкие ошибки. В общем, справочник стал ещё лучше!

Хостинг от Unihost к празднику

Друзья, в честь праздников компания Unihost специально для читателей htmlbook согласилась предоставить скидки на услуги хостинга. Итак:

  • -15% на любой тариф виртуального хостинга при заказе на срок от 1 до 6 месяцев либо домен в подарок при заказе от года и более. Подробности
  • -15% на заказ виртуального сервера (VPS) на любой срок. Подробности
  • -20% на установку и первый месяц аренды выделенного сервера в Германии, Франции или Канаде. Подробности

И напоследок, детальная инструкция по переносу сайта с компьютера или другого хостинга на хостинг Unihost.com.

Курс по вёрстке

htmlbook.ru давно дружит с Нетологией. Здесь размещаются анонсы их курсов по веб-технологиям, а они со своей стороны предлагают скидки читателям сайта. Вот и теперь всем посетителям доступна персональная скидка 5000 рублей по промокоду htmlbook на программу онлайн-обучения «HTML-вёрстка: с нуля до первого макета». Учащиеся под руководством профессионалов готовят свои макеты и защищают диплом, а преподаватели дают личную консультацию по каждой работе.

Вы научитесь:

  • писать профессиональный HTML- и СSS-код, а также подбирать модульные сетки для макета;
  • пользоваться базовыми инструментами Adobe Photoshop и обрабатывать изображения;
  • писать скрипты и работать с библиотекой jQuery.

Записаться на программу обучения. Старт обучения 17 апреля, скидка действует до 20 апреля.

Направление текста

Мы привыкли читать тексты слева направо, для нас это кажется привычным и естественным. В то же время есть языки, где писать надо справа налево, например, в арабском письме. Кроме того изредка возникают задачи, когда текст надо повернуть, отразить или ещё как-то представить непривычным образом. Гугл так пошутил на первое апреля и показал оборотную сторону своего поисковика (рис. 1).

Google. Вид сзади

Рис. 1. Google. Вид сзади

Слава CSS, задавать направление текста весьма легко и это делается буквально парой свойств, так что можно экспериментировать вволю.

Полоски при наведении

Для больших рекламных боксов на Uniqlo.com применялись анимированные полоски, которые показывались при наведении курсора мыши. Это весьма потрясающе, если вы меня спросите. Возможно поэтому они хотели чтобы это работало в большинстве браузеров, так что использовали для создания эффекта анимированный GIF. Его размер меньше 4 Кб, но как вы знаете, это дополнительный HTTP-запрос. Давайте повторим этот эффект в современном улучшенном стиле: меньше поддержки браузерами, зато более действенно.

Эффект в действии

Эффект в действии

Маскирование в CSS

В компьютерной графике отсечение и маскирование — это две наиболее используемые операции. Обе они визуально скрывают часть элемента. Если вы ранее работали с SVG или HTML Canvas, то эти операции для вас, скорее всего, уже не новы. Отсечение определяет область элемента которая будет видна, всё остальное за пределами этой области не отображается и получается «отрезанным». При маскировании изображение маски объединяется с элементом, влияя на его альфа-канал. Части маскированного элемента получаются полностью или частично прозрачными. Новая спецификация CSS Masking направлена на объединение этих двух операций в мире HTML.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.