четверг, 5 августа 2010 г.

25 вещей, которые вы должны знать об HTML5

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

1. Новый Doctype

Итак, используя Doctype, вы наверняка забываете эти 2 строчки?\

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  Но в HTML5 всё это гораздо проще:

<!DOCTYPE html>

И вправду, но вы знаете что этот Doctype даже не требуется в html5?Тем не менее, он используется для текущей и предыдущих версиях браузеров, которые требуют doctype.

2. Элемент 'The figure'

Рассмотрим следующие надписи для изображений:

 <img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>

Здесь , к сожалению, нет простого способа связать подпись в  теге <p></p>  к самому изображению.HTML5 исправляет это с введением <figure> элемента.  В сочетании с <figcaption> элемент, мы можем ассоциировать подписи с изображениями:)
<figure>
    <img src="path/to/image" alt="о картинке" />
    <figcaption>
        <p>Данная картина очень красива </p>
    </figcaption>
</figure>



3.Изменение <small>

Теперь в html5 small рассматривается как мелкий шрифт.

Представим себе надпись о авторских правах в футере страницы и , учитывая способность html5,с тегом <small> эта надпись будет выглядеть идеально.

4.Никаких типов в тегах ссылок и скриптов!

Возможно, вы до сих пор добавляете атрибут type в для ваших ссылок и скриптов:

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

 

Но теперь, это не является необходимым, так как сам тег указывает на тип данного объекта.(скрипт или ссылка ).Тоесть, можем просто удалить ненужный код.

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>


5.Создавать кавычки или нет

Создавать или нет?Теперь, это дело вкуса, пользуйтесь как вам нравится.

<p class=myClass id=someId>Запускаем коллайдер.

6.Делаем контент редактируемым

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

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>untitled</title>
</head>
<body>
    <h2> To-Do List </h2>
     <ul contenteditable="true">
        <li> Break mechanical cab driver. </li>
        <li> Drive to abandoned factory
        <li> Watch video of self </li>
     </ul>
</body>
</html>

Или, как мы написали ранее, теперь мы можем написать так:
<ul contenteditable=true>

7.Input форма для e-mail

Если мы будем применять type для полей e-mail'ов , то вводится будут только текст ввида электронной почты.Тоесть проверка данных уже реализована в самом html5Но мы не можем 100% полагаться на этот раз пока, по понятным причинам. In older browsers that do not understand this “email” type, they'll simply fall back to a regular textbox. В более старых браузеров, которые не понимают этого "email" типа, они просто будут читать это поле как обычно.

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>untitled</title>
</head>
<body>
    <form action="" method="get">
        <label for="email">Email:</label>
        <input id="email" name="email" type="email" />

        <button type="submit"> Submit Form </button>
    </form>
</body>
</html>

8.Маркеры(placeholders)

Раньше мы должны были использовать js для создания маркеров.Тоесть если в input forme пользователей удаляет этот текст, то после пару щелчков мыши вне это формы текст опять появится.Теперь можем сделать так

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />



8.Локальное хранение данных

10. Семантический Header и Footer

Эти времена уже прошли...:

<div id="header">
    ...
</div>

<div id="footer">
    ...
</div>

В HTML5 всё вышенаписанный код можно заменить на :
<header>
    ...
</header>

<footer>
    ...
</footer>
 11.Особенности форм в html5

11.Internet explorer и  html5
К сожалению, этот  Internet Explorer требует немного пререканий, чтобы понять новые элементы HTML5.
Для того,  чтобы убедиться , что новые элементы HTML5 корректно отображаются, необходимо добавить  сделать стили для них:
header, footer, article, section, nav, menu, hgroup {
   display: block;
}
 Для IE также нужно писать:
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
Кстате, Remy Sharp создали скрипт , которые исправляет некоторые проблемы с выводом.
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
13.hgform


С помощью hgroup элемента, можно сгруппировать заголовки(h1,h2 и др) вместе.


<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
 14.Атрибут Required(обязательный)
В формах теперь появился новый атрибут required,который обозначает, что данный элемент является обязательным.
<input type="text" name="someInput" required>
А можно и так:
<input type="text" name="someInput" required="required">


Любой метод годится вообщем.В следующем примере данные не отправятся, пока элемент someInput не будет заполнен:


<form method="post" action="">
<label for="someInput"> Your Name: </label>
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
<button type="submit">Go</button>
</form>
 15.Атрибут Autofocus.
 Если какая-то часть input формы должна быть выделена, просто используем автофокус:
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
  16.Поддержка аудио.
 В настоящее время, только самые последние браузеры предлагают поддержку HTML5 аудио.
<audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" />
    <source src="file.mp3" />
    <a href="file.mp3">Download this file.</a>
</audio>
Заметим, что Firefox потребует Ogg тип, а вот Webkit-у достаточно и общего типа.Поэтому придётся создавать 2 типа аудиозаписей.
Обратите внимание, что IE не поддерживает данную фитчу, а опера медленно работает с .wav форматом.
17.Поддержка видео.
Аналогично аудио, в html5 поддерживается видео!Так как не все браузеры поддерживают формат H.264, нужно добавить соответствующий код:
<video controls preload>
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
    <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>
 18.Preload видео.
Этот  атрибут необходим, чтобы знать, действительно ли пользователь хочет загружать видео, или ему это вовсе необходимо.
<video preload>
19.Display controls.
Если вы заметили, то при просмотре видео, не отображается  контроль управления.Для включения,добавьте атрибут controls в элемент видео.
<video preload controls>
 20.Регулярные выражения.
Ну чтож, теперь регулярные выражения уже есть встроенные в html5!Для этого есть атрибут pattern.
<form action="" method="post">
    <label for="username">Create a Username: </label>
       <input type="text"
       name="username"
       id="username"
       placeholder="4 <> 10"
       pattern="[A-Za-z]{4,10}"
       autofocus
       required>
    <button type="submit">Go </button>
</form>

 
Если вы знакомые с регулярными выражениями, то вы знаете, что запись [A-Za-z]{4,10} принимает только верхние и строчные буквы. Эта строка должна иметь как минимум 4 символов и не более 10.
 21.Проверяем работу атрибута.
Какая польза от этих атрибутов, если у нас нет способа узнать, поддерживает ли их браузер?Есть несколько способов выяснить это. Мы обсудим два. Первый вариант заключается в использовании Modernizr библиотеки.Например, в нашем предыдущем примере, если мы хотим определить, можно ли в браузере реализовать pattern атрибут?Добавим немного JavaScript на нашем сайте:
alert( 'pattern' in document.createElement('input') ) // boolean;
Выше мы создаем новый input элемент, для определения того, работает ли pattern атрибутв браузере. Если это так, браузер поддерживает эту функцию.
<script>
if (!'pattern' in document.createElement('input') ) {
    // do client/server side validation
}
</script>
  22.Элемент 'Mark'
Если вам нужна подсветка текста, то используйте теги <mark></mark>
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>.</p>
  23. Когда нужно использовать <div> ?
Некоторые из нас задают вопросы, когда мы должны использовать тег div.. Благодаря нему мы имеем доступ к header , article , section , footer. .
24. Что действительно надо использовать ? 
 
25. Html 5 - это не....


Многие люди считают, что большинство javascript кода есть в html5.Пожалуй, даже Apple не сможет это реализовать.Если вкратце,то это простой способ для обозначения современных веб-стандартов.Важно понятно, чем html5 не является.
  1. SVG - не html5, ну как минимум ещё лет 5.
  2. CSS3 - ну здесь всё понятно
  3. Данные юзера(Client storage).
  4. Web соккеты


    P.S Ссылка на более полный англоязычный источник.

    Спасибо за внимание:)

    Комментариев нет:

    Отправить комментарий