Что такое HTML5?

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Кредит: Тема Простая - Что такое HTML5? Они делают классные анимированные ролики.

Введение в HTML5

Добро пожаловать в Envato Tuts +! Этот учебник содержит вводный обзор HTML5. Если вы ничего не слышали об этом или просто хотите понять его значимость, вы попали в нужное место.

HTML5 является последним стандартом для браузеров для отображения и взаимодействия с веб-страницами. Утвержденный в 2014 году, это первое обновление для HTML за 14 лет. Это прямо целая жизнь между обновлениями.

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

Вот несколько ключевых улучшений в HTML5:

На страницах есть более простая, более прямолинейная структура элементов, что упрощает их сбор, настройку и отладку - и создание автоматизированных службы, которые помогут вам найти важные ресурсы в Интернете.
Он предоставляет стандартные элементы для обычных медиа-объектов, которые ранее требовали раздражающих плагинов для аудио, видео и т.д. Эти плагины необходимо было регулярно обновлять, то есть повторять загрузки для управления безопасностью.
Существует встроенная интеграция с интерфейсами для удовлетворения современных веб-и мобильных потребностей. Одним из моих любимых примеров этого является геолокация, которая позволяет вам определять координаты GPS посетителя через браузер. Ранее эта функция была ограничена телефонами с поддержкой GPS.

Например, ниже приведен пример геолокации HTML5 из «Создание вашего стартапа с PHP: геолокация и Google Места» (Tuts +):

Для кого HTML5 имеет значение?

Вы просто веб-пользователь или поклонник YouTube?

HTML5 улучшит скорость, удобство использования и согласованность в Интернете. Да, ваш опыт YouTube будет постепенно становиться все лучше. Будет меньше обновлений для браузера и плагинов, меньше угроз безопасности и больше более элегантных, более читаемых и более быстрых веб-сайтов.

Вы веб-разработчик?

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

Вы хотите создать веб-браузер?

С одной стороны, у вас будет отличная дорожная карта в спецификации HTML5, в которой подробно описано, как и что вы должны строить. С другой стороны, есть еще кое-что. Совсем не так просто будет отличить ваш браузер от крупных производителей браузеров.

Хотите узнать больше?

Просто быстрое напоминание, прежде чем мы погрузимся! Я стараюсь участвовать в обсуждениях ниже. Если у вас есть вопрос или тема для будущего учебника, пожалуйста, напишите комментарий ниже или свяжитесь со мной в Twitter @reifman.

Предистория HTML5

Откуда выходит HTML5?

HTML5 является последним за более чем 20 лет стандартов программирования браузера с момента запуска Интернета в 1991 году.

История HTML

HTML впервые появился в качестве стандарта в 1993 году, и вот график версий HTML, принятых комитетами по стандартам:

HTML 2.0: 1995
HTML 4.0: 1997
HTML 4.01: 2000
HTML 5: 2014

Цели HTML5

Согласно Википедии, HTML5 предназначен для консолидации более ранних версий и дифференцированных типов документов, таких как XHTML 1 и DOM Level 2 HTML:

[HTML5] расширяет, улучшает и рационализирует разметку, доступную для документов, и вводит разметку и ... (API) для сложных веб-приложений ... HTML5 также является потенциальным кандидатом для кросс-платформенных мобильных приложений. Многие функции были разработаны с использованием маломощных устройств, таких как смартфоны и планшеты, которые были приняты во внимание.

Вот краткое описание того, как MakeUseOf объясняет цели HTML5:

Устранение плагинов, таких как Flash, для общих функций, которые вам нужны. Создание собственной поддержки для таких вещей, как аудио, видео и т.д.
Уменьшение необходимости в JavaScript и дополнительном коде с новыми встроенными элементами.
Обеспечение согласованности между браузерами и устройствами.
При этом сделать все это максимально прозрачным.

What is HTML5 Plugin Past for Video Element

Кредит изображения: Простая тема

Какие новые возможности предлагает HTML5?

Выходи что очень много! HTML5 предоставляет такой впечатляющий список новых возможностей, которые основные браузеры по-прежнему не полностью еще поддерживают даже через 18 месяцев после его принятия:

Кредит изображения: PHPFlow

Там также эта интерактивная визуальная радуга в HTML5Readiness. Наведите указатель мыши на разные дуги, и вы увидите, какие функции поддерживаются браузерами:

Это весело, но другие диаграммы на других сайтах могут быть более функционально интуитивными в использовании.

Уровни поддержки HTML5

В 2011 году Wikipedia сообщила, что около трети из 100 лучших веб-сайтов поддерживали некоторые возможности HTML5. К августу 2013 года было сделано около 153 сайтов из списка Fortune 500.

Вот визуализация огромности возможностей HTML5:

Кредит изображения: Википедия

Новые элементы HTML5

Самые основные новые элементы HTML5 облегчают выкладку веб-страниц и отладку кода. Это также облегчает автоматические услуги для сканирования документов в Интернете и понимания важности различных компонентов страницы.

Для макета страницы и ключевых функций в настоящее время существуют определенные элементы, такие как:

<header> и <footer>
<nav> для всех видов меню
<side> для боковых панелей или близлежащего контента
<article>, куда идет контент, такой например, как сообщение в блоге
<section> похож на <div>, но более ориентирован на контент
<audio> и <video>, чтобы браузеры управляли воспроизведением каждого из них. Больше нет плагинов и обновлений безопасности для этого
<canvas> специально для того, чтобы вы могли рисовать графику с помощью отдельного языка сценариев
<embed> для размещения внешнего контента или приложений на странице

Вот хороший визуальный очерк их Smashing Magazine:

Вот некоторые из более продвинутых функций HTML5, включая интеграцию API, что делает программирование в JavaScript для сложных действий более простым и последовательным в браузерах:

Воспроизведение аудио и видео: обеспечивает воспроизведение мультимедиа в браузерах без использования плагинов.
Геолокация: укажите местоположение посетителя.
Перетаскивание: для загрузки файлов из браузера с помощью простых жестов.
Кэш приложения: обеспечивает поддержку для запуска HTML-сайтов в автономном режиме.
Веб-воркеры: выполняет JavaScript в фоновом режиме (неблокирование).
События, отправленные сервером: позволяют серверам обновлять веб-страницы в браузере после их загрузки, проще и эффективнее, чем AJAX и JavaScript.
Автономное хранение данных: обеспечивает способ хранения данных локально в браузере независимо от файлов cookie. Как использовать автономное хранилище HTML5 на вашем сайте предоставит вам хороший обзор этой возможности.

HTML5 и «Будущее Интернета» предлагают другое руководство по этим функциям. Вот один из их выводов - они очень ценят кэш приложений:

Google Gears предоставил нам автономное хранилище данных, и Flash познакомил нас с кешем приложений (Pandora использует его для сохранения вашей информации в журнале). Благодаря HTML5 эти возможности теперь доступны для использования прямо в браузере и могут быть легко расширены с помощью JavaScript.

Нужно выяснить, какие функции поддерживаются в браузерах? HTML5Test имеет полезную интерактивную оценку функций и поддержки браузера:

What is HTML5 Feature Compatibility Browser Matrix

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

Несколько примеров HTML5 в действии

Давайте рассмотрим несколько интересных примеров HTML5 в действии.

Страница Boilerplate HTML5

Простота HTML5 понятна в новых макетах страниц. Чем больше элементов, ориентированных на контент, тем легче понять код страницы и отладить. Вот простой пример, который я построил с помощью проекта HTML5-Reset:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title></title>
    <meta name="author" content="" />
  <meta name="description" content="" />

 <link rel="stylesheet" href="assets/css/style.css" />

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header>
    	<h1><a href="/">Page Title</a></h1>
		<nav>
			<ol>
				<li><a href="">Nav Link 1</a></li>
				<li><a href="">Nav Link 2</a></li>
				<li><a href="">Nav Link 3</a></li>
			</ol>
		</nav>
	</header>
	<article>
		<h1>Article Header</h1>
		<p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p>

		<h2>Article Subhead</h2>
		<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>

	</article>

	<aside>
		<h2>Sidebar Content</h2>
	</aside>

	<footer>
		<p><small>&copy; Copyright Your Name Here 2014. All Rights Reserved.</small></p>
	</footer>

</div>

  <script src="scripts/js/scripts.js"></script>
</body>
</html>

Обратите внимание, что есть более простой тег doctype, теги ссылок и теги скриптов. Сценарий HTML5Shiv обеспечивает устаревшую поддержку версий Internet Explorer до 9.x.

Если вы хотите увидеть некоторые другие подходы, ознакомьтесь с HTML5 Boilerplate, более широкой версией HTML5 с открытым исходным кодом.

Элемент video и плейеры

Вот видео-пример из W3Schools, показывающий исходный код слева, и полученный плейер справа:

Нет никакого плагина и нет обновлений.

Формы

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

Вот пара отличных уроков для перехода к более продвинутым формам в HTML5 Doctor:

Например, вот демонстрация элемента range, отображаемого в браузере Chrome:

Масштабируемая векторная графика (SVG)

В HTML5 вы можете легко анимировать элементы с помощью JavaScript и HTML5. Вот масштабируемые простые анимированные часы (изменение масштаба):

Вот пример кода для демонстрации выше интеграции JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>HTML5 Demo: SVG clock animation</title>
<link rel="stylesheet" href="css/html5demos.css">
<script src="js/h5utils.js"></script></head>
<body>
<section id="wrapper">
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
    <header>
      <h1>SVG clock animation</h1>
    </header>

<style>
  /* any custom styles live here */
  line {
  stroke-width: 3px;
  stroke: black;
  }      
</style>
<article>
  <p>SVG clock animation by <a href="http://twitter.com/davidbasoko">David Basoko</a>.</p>
    <div>
      <label for="zoominput">Zoom</label>
      <select id="rangeinput" onchange="CLOCK.zoom();">
        <option value="1" selected="selected">1x</option>
        <option value="2">2x</option>
        <option value="3">3x</option>
        <option value="4">4x</option>
        <option value="5">5x</option>
      </select>
    </div>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" >
        <g>
          <circle id="circle" style="stroke: black; fill: #f8f8f8;" cx="100" cy="100" r="100"/>
          <line id="hour0" x1="100" y1="10"  x2="100" y2="0"/>
          <line id="hour1" x1="150" y1="13"  x2="145" y2="22"/>
          <line id="hour2" x1="187" y1="50"  x2="178" y2="55"/>
          <line id="hour3" x1="190" y1="100" x2="200" y2="100"/>
          <line id="hour4" x1="187" y1="150" x2="178" y2="145"/>
          <line id="hour5" x1="150" y1="187" x2="145" y2="178"/>
          <line id="hour6" x1="100" y1="190" x2="100" y2="200"/>
          <line id="hour7" x1="50"  y1="187" x2="55"  y2="178"/>
          <line id="hour8" x1="13"  y1="150" x2="22"  y2="145"/>
          <line id="hour9" x1="0"   y1="100" x2="10"  y2="100"/>
          <line id="hour10" x1="13"  y1="50"  x2="22"  y2="55" />
          <line id="hour11" x1="50"  y1="13"  x2="55"  y2="22" />
        </g>
        <g>
          <line x1="100" y1="100" x2="100" y2="45" style="stroke-width: 6px; stroke: green;" id="hourhand"/>
          <line x1="100" y1="100" x2="100" y2="15" style="stroke-width: 4px; stroke: blue;"  id="minutehand"/>
          <line x1="100" y1="100" x2="100" y2="5"  style="stroke-width: 2px; stroke: red;"   id="secondhand"/>
        </g>
      </svg>
    </div>

</article>
<script>
var CLOCK = (function() {
    var drawClock = function() {
        var INITIAL_R = 100;

        var zoom = document.getElementById("rangeinput").value;
        
        var r = INITIAL_R * zoom;

        // Draw Circle
        var circle = document.getElementById("circle");
        circle.setAttribute('r', r);
        circle.setAttribute('cx', r);
        circle.setAttribute('cy', r);

        // Draw Hours
        for(var i = 0; i < 12; i++) {
            var hour = document.getElementById("hour"+i);
            var degrees = i * 30;
            hour.setAttribute('x1', getX(degrees, r, 0.9)); // 90% of radio's length.
            hour.setAttribute('y1', getY(degrees, r, 0.9)); // 90% of radio's length.
            hour.setAttribute('x2', getX(degrees, r));
            hour.setAttribute('y2', getY(degrees, r));
        }

        // Draw hands
        drawHands();
    };

    var drawHands = function() {
        // Constants for hand's sizes.
        var SECONDS_HAND_SIZE = 0.95,
        MINUTES_HAND_SIZE = 0.85,
        HOURS_HAND_SIZE = 0.55;

        var circle = document.getElementById("circle");

        // Clock Circle's Properties
        var r = circle.getAttribute('r'),
        cx = parseInt(circle.getAttribute('cx')),
        cy = parseInt(circle.getAttribute('cy'));

        // Current time.
        var currentTime = new Date();

        // Draw Hands
        drawHand(document.getElementById("secondhand"),
                 currentTime.getSeconds(),
                 SECONDS_HAND_SIZE,
                 6);
        drawHand(document.getElementById("minutehand"),
                 currentTime.getMinutes(),
                 MINUTES_HAND_SIZE,
                 6);
        drawHand(document.getElementById("hourhand"),
                 currentTime.getHours(),
                 HOURS_HAND_SIZE,
                 30);
        
        function drawHand(hand, value, size, degrees) {
            var deg = degrees * value;
            x2 = getX(deg, r, size, cx),
            y2 = getY(deg, r, size, cy);
            
            hand.setAttribute('x1', cx);
            hand.setAttribute('y1', cy); 
            hand.setAttribute('x2', x2);
            hand.setAttribute('y2', y2); 
        }
    };

    /*
     * Get a Point X value.
     * degress. Angle's degrees.
     * r. Circle's radio.
     * adjust. Percent of length.
     * x. Start of X point.
     */
    function getX(degrees, r, adjust, x) {
        var x = x || r, 
        adj = adjust || 1;
        return x + r * adj * Math.cos(getRad(degrees));
    }

    /*
     * Get a Point Y value.
     * degress. Angle's degrees.
     * r. Circle's radio.
     * adjust. Percent of length.
     * x. Start of Y point.
     */   
    function getY(degrees, r, adjust, y) {
        var y = y || r,
        adj = adjust || 1;
        return y + r * adj * Math.sin(getRad(degrees));
    }

    // Convert from degrees to radians.
    function getRad(degrees) {
        var adjust = Math.PI / 2;
        return (degrees * Math.PI / 180) - adjust;
    }
        
    return {
        init: function() {
            drawClock();
            setInterval(drawHands, 1000);
        },
        zoom: function() {
            drawClock();
        }
    };
})();
CLOCK.init();
</script>
<a id="html5badge" href="http://www.w3.org/html/logo/">
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage">
</a>
    <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer> 
</section>
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<script src="js/prettify.packed.js"></script>
<script>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>

Что дальше?

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

Введение в HTML5: отличное введение в улучшения HTML5 для разработчиков, которые хотят быстро пройти по всем новым элементам.
HTML5 Demos and Examples: Идеально подходит для показа организованного меню из множества демонстраций HTML5, показывая вам новые возможности.

Вот пример доступных для просмотра демонстраций в HTML5 Demos (не все из них для меня оказались рабочими):

Если вы являетесь менеджером сайта WordPress, как и многие читатели Envato Tuts +, вы можете оценить будущие темы для их соответствия HTML5. Разработка, основанная на стандартах с последовательной поддержкой браузера, делает веб-разработку намного проще для многих из нас и уменьшит количество ошибок, с которыми сталкиваются наши клиенты, в то же время все более обеспечивая лучший пользовательский опыт.

В целом, я очень впечатлен HTML5. И, похоже, он будет продолжать развиваться быстрее, чем каждые 14 лет.

Кроме того, если вы ищете другие утилиты, которые помогут вам развить свои навыки HTML5, не забудьте посмотреть, что у нас есть на Envato Market.

Мне бы хотелось узнать больше в ваших отзывах о HTML5 и предложениях для будущих тем, о которых вы хотели бы узнать больше. Пожалуйста, не стесняйтесь оставлять свои вопросы и комментарии ниже. Вы также можете напрямую связаться со мной в Twitter @reifman. Чтобы увидеть другие учебники, которые я написал, просмотрите страницу инструктора Envato Tuts +.

Ссылки по теме

Поскольку для HTML5 существует так много полезных ресурсов, я включил дополнительную помощь некоторых из тех, которые я считаю наиболее полезными: