Примеры html5


Холст — интересная особенность в HTML5 Canvas которая позволяет рисовать разнообразные вещи в браузере с помощью технологии Java. Например его можно использовать для управления фотографий, рисовать и анимировать разнообразные формы и фигуры, а так же воспроизводить видео. Но это ещё далеко не придел.

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

Спасибо http://www.sanwebe.com и рекомендую:

  • Самые популярные и бесплатные HTML редакторы для веб — разработчиков
  • Как сделать Flipping эффект для блока на CSS и JS
  • HTML5 элементы для лучшей семантики текста
  • Инвертирование цвета с помощью CSS3
  • Очень полезные сайты и ресурсы для разработчиков и дизайнеров

Радужный дождь

Действительно удачный пример анимации работающей на HTML5 Canvas, как будто с неба льёт радужный дождь. Очень красиво смотрится.


Частицы

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

Анимированные круги

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

Геометрическая анимация

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


Анимационные шары

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

Созвездие

Тут созданы случайно двигающиеся звёзды, а при наведении мыли они соединяются линиями. Очень красиво сделанное демо.

Молния

Отличная и удачная имитация молнии с помощью HTML5 Canvas. Смотрится очень достойно и потрясающе!

Радужный осьминог

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


Найди курсор

Этот пример отслеживает расположение курсора указывая на него стрелками

beloweb.ru

Новые теги HTML5

В HTML5 для структуры кода введено несколько новых тегов: <article>, <aside>, <footer>, <header>, <nav>, которые заменяют в некоторых случаях привычный <div>. Сделано это для поисковых роботов, чтобы они лучше распознавали код страниц и отделяли основной контент от вспомогательных элементов.

С использованием новых тегов пустой шаблон HTML5 может выглядеть так:

  <!doctype html>  <html lang="ru">  <head>   <meta charset="utf-8" />   <title></title>   <link rel="stylesheet" href="style.css" />  </head>  <body>    <header>Заголовок страницы</header>    <nav>Меню навигации</nav>    <aside>Боковая колонка SideBar</aside>    <article>   Контент - основное содержимое страницы.  </article>    <footer>Подвал сайта</footer>     </body>  </html>  

Упрощение написания DOCTYPE

Вспомним как было раньше, в HTML4 тег DOCTYPE выглядел так:


   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">  

Теперь же запись минимальна, проще, наверное некуда :

  <!doctype html>  

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

Необязательные теги в HTML5

Новый стандарт принес много послаблений верстальщикам. В частности, использование элементов HTML, HEAD и BODY уже не является обязательным для разметки HTML5. Если их нет, то браузер все равно считает, что они существуют. По сути из обязательных в HTML5 остался только <!doctype html>.

Трактовка русского языка как основного языка HTML документа

Тег <html lang=»ru»> определяет язык документа. В сети регулярно возникают дискуссии о правильном его написании, в частности правильность написания «ru-RU». Я склоняюсь к варианту, что «-RU» является избыточным, так как у русского языка нет диалектов и вариантов написания как у Английского языка (Британский и Американский). Суффикс RU уточняет, где говорят на русском языке. То есть если en-US означает «английский язык на котором говорят в США», то ru-RU означает «русский язык на котором говорят в России», что является излишним.


В прочем, ничего страшного не случится, если вы и дальше будете использовать вариант «ru-RU».

moonback.ru

HTML (HyperText Markup Language, язык разметки гипертекста) — это прежде всего система вёрстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Информация на сайте, способ её представления и оформления зависят исключительно от разработчика и тех целей, которые он перед собой ставит.

Что же такое стили или CSS (Cascading Style Sheets, каскадные таблицы стилей)? Стилем называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определённом месте и легко «прикручиваются» к любому элементу.

Ещё одним преимуществом стилей является то, что они предлагают намного больше возможностей для форматирования, чем обычный HTML. CSS представляет собой мощную систему, расширяющую возможности дизайна и вёрстки веб-страниц.


Любой сайт отображается в специальной программе просмотра, называемой браузером. Таким образом, получается, что разработчики сайта зависят от производителей браузеров, от того, насколько корректно и правильно они воплощают стандарты, разработанные Консорциумом W3. Дело осложняется тем, что популярных браузеров существует несколько, и они порой по-разному интерпретируют указанные стандарты.

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

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

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

webref.ru


Возврат к основам или как создать HTML5 шаблон

Разметка HTML – это прекрасная вещь, которая, безусловно, изменилась за эти годы.
В отличие от предыдущих версий HTML, где код по большей части был ограниченной структурой, которая определяла использование классов и ID элементов, HTML5 пытается обеспечить более сложные структуры.

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

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

Одним из главных вопросов о HTML5 являются <header>, <nav>, <footer> теги. Эти теги кажутся достаточно понятными, но откуда они взялись? На этот вопрос достаточно легко ответить. Они пришли от вас!


В 2005 году Google провел исследование над более чем 3 миллиардов веб-сайтов и обнаружил, что наиболее распространенные классы, используемые в общей разметки были те, которые вы видели на той странице. Footer, menu, title, small, text, content, header, и nav, все они находятся в ТОП чартах по популярности. И, по сути, именно так решил W3C, что стоит использовать для новых семантических тегов HTML5. Теперь, когда вы узнали об этом, давайте погрузимся в изучение этих тегов и основных фундаментальных изменений в HTML5.

doctype

DOCTYPE это не совсем HTML элемент, а больше как декларация, которая становится все более и более важной. Используя его соответствующе, вы можете помочь браузеру понять какой HTML он пытается разобрать. Поэтому всегда нужно использовать соответствующие DOCTYPEs. На данный момент, вы можете просто использовать HTML5 doctype для всего. Но, давайте также рассмотрим некоторые варианты из прошлого. Вот откуда мы пришли к такой простоте:

HTML2:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 2//EN">

HTML3:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">

HTML4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">

HTML5:

<!DOCTYPE html>

Другие упрощения в HTML5


Корневой элемент был упрощен, где вместо того, чтобы писать что-то вроде этого:

<html xmlns=”//www.w3.org/1999/xhtml”  lang=”en”  xml:lang=”en”>

мы просто можем написать:

<html lang=”en”>

Вещи, которые нам нужно скопировать и вставить, становятся все меньше и меньше с каждым днем. Например, в head элементе, кодировка символов перешла от этого:

<meta http-equiv=”Content-Type” content=”text/html;>

к новой версии в HTML5:

<meta charset=”UTF-8”>

И, наконец, наши ссылки сбросили type атрибут. Например это:

<link rel=”stylesheet” href=”style.css” type=”text/css”>

стало этим:

<link rel=”stylesheet” href=”style.css”>

Новые теги

“Section” тег

Section элемент, является общей секцией HTML документа. Наиболее типичным, будет тематическая группировка контента, у которого может быть heading, но не обязательно.

Общее правило для использования раздела заголовка (section heading), является его использования, только если на него явно ссылаются в общих набросках документа. Если, в набросках, была ‘section’ , на которую вы ссылались или чувствуете, что все содержимое одной области относится к ‘section’, тогда включите section тег. Если вы хотите использовать его в основном для стилизации, тогда употребите <div> тег, как вы это обычно делаете.


“nav” тег

“nav” элемент представляет любые части страницы, которые ссылаются на другие части этой страницы или другие страницы сайта. Когда речь заходит про навигационные ссылки, вы первым делом должны думать про “nav” теги.

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

“article” тег

Article элемент, представляет собой автономную композицию в документе, странице или любом сайте. Важно помнить, какой это именно article тег. Обычный, независимо распределенный или контент для повторного использования? Это могут быть сообщения форума, журнала или газеты, статья или запись на блоге, даже комментарии, при условии, что это независимый элемент контента.

Articles могут содержать в себе “section”, “header”, и даже “hgroup”. Но имейте в виду, когда и как вы используете этот элемент, так как он не столь широко используется как тег <div>.

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

<article>  <header>  <h1>Название записи блога</h1>  <p>12/25/2045</p>  </header>  <p>Запись в блоге</p>  <p>...</p>  <section>  <h1>Комментарии</h1>  <article>  <footer>  <p>Написано: <span>Имя человека</span></p>  <p>Время: 15 минут назад</p>  </footer>  <p>Текст комментария здесь  /p>  </article>  <article>  <footer>  <p>Написано: <span>Имя человека</span></p>  <p>Время: 25 минут назад</p>  </footer>  <p>Другой комментарий здесь</p>  </article>  </section>  </article>

“aside” тег

aside элемент, представляет раздел страницы, который состоит из контента, косвенно связанного с содержанием вокруг aside элемента. Самое главное помнить, что это, как правило, информация или содержание, которые разделяются по характеристике. Вы будете его часто использовать в боковой панели, так как большинство из них идеально подходят, чтобы быть полностью завернутыми (wrapped) в aside тег. Другие применения могут включать в себя квоты, биты рекламы, группы навигационных ссылок (nav links), или даже адреса рядом с адресом места под вопросом.

Вы, даже можете использовать элемент в aside для больших разделов сайта, таких как вспомогательная панель для Twitter или Facebook, или случайных линков. Сделайте их aside, а затем используйте header и nav раздел в нем, чтобы пояснить, что там происходит. Также его можно использовать в footer блога, чтобы ссылаться на вещи о нем, или почти в любом другом месте, aside может быть отлично реализован.

“hgroup” тег

hgroup элемент, представляет heading (заголовок) раздела. Этот элемент лучше всего использовать для группирования набора h1-h6 элементов, когда заголовок имеет несколько уровней, или подзаголовки (точно такие, как в статье, которую вы сейчас читаете). Это было бы идеально для hgroup. Вы, также можете использовать его для альтернативных названий или tag-lines(тег-линий).

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

<hgroup>  <h1>Имя доктора:</h1>  <h3>Иван Петрович</h3>  <h2>Область экспертизы</h2>  <h3>Человеческая глупость</h3>  </hgroup>

“Header” тег

header тег, представляет собой любую группу вводных или навигационных средств внутри сайта или его разделов. Теперь, когда формальное определение тега было сделано, давайте его немного разберем. Мы все знаем, что такое заголовок, но, если быть по конкретней, то он включает в себя различные вещи вверху самого сайта. Эти области заголовков обычно включают в себя брендинг разделов (branding sections), элементы призыва к действию (call to action), и, возможно, немного навигации. Там, где вы раньше писали: <div id=”header”>, теперь вы можете написать <header>, и получить ту же семантическую структуру разметки. Важно отметить, W3C заявляет, что header элемент должен содержать либо набор H1, индивидуальные заголовки разделов (h1-h6) или элемент hgroup. Header элементы, также могут использоваться для wrap разделов таблиц контента, формы поиска или любые соответствующие логотипы. Имейте в виду, что заголовок это не секционирование, так как в нем нету замены для “все-в-одном” div. Скорее header, это семантический элемент, который нужно использовать в конкретных ситуациях.

“Footer” тег

Footer элемент, представляет собой “подвал” для своего ближайшего вложенного раздела родитель, и как правило, содержит информацию о разделе родителей (parents section). Footer тег очень похож на header тег, но в противоположной части страницы. Зачастую вы увидете футер страницы, который содержит ссылки, которые были в навигации, и, возможно, логотип или другие подобные вещи (все они могут быть размещенны в <footer> теге). Хотя футер обычно используется в конце сайт, он также может соответствовать концу любого разделу контента. Давайте взглянем на следующий пример:

<body>  <footer><a href=”..”>Back to index...</a></footer>  <hgroup>  <h1>Lorem</h1>  <h2>Ipsum</h2>  </hgroup>  <p>Какой-то текст.</p>  <footer><a href=”..”>Back to index...</a></footer>  </body>

“address” тег

address элемент, представляет контактную информацию для своего ближайшего article или body элемента. Например:

<address>   <a href="../People/Raggett/">Dave Raggett</a>,   <a href="../People/Arnaud/">Arnaud Le Hors</a>,   контактные лица для <a href="Activity">W3C HTML Activity</a>  </address>

W3C также хотел бы отметить, что как правило, address элемент будет включен наряду с другой информацией в footer элемента. Это будет хорошо работать специально для электронной почты или about.me ссылок, на днище сайтов (рядом с информацией об авторских правах). Вы можете это поместить в address элемент следующим образом:

<footer>   <address>   Для подробной информации, свяжитесь с   <a href="mailto:pm@example.com">Pavel Mikuta</a>.   </address>   <p><small>© copyright 2038 Example Corp.</small></p>  </footer>

шаблон

HTML5 Шаблон

Итак, после того, как мы узнали о HTML5, давайте перейдем к кодированию нашего собственного HTML5 шаблона. Давайте начнем с обычного документа.

<!doctype html>  <html lang="ru">  <head>  <meta charset="UTF-8">  <title>HTML5 шаблон</title>  </head>  <body>  </body>  </html>

Теперь давайте добавим stylesheet ссылку

<!doctype html>  <html lang="ru">  <head>  <meta charset="UTF-8">  <title>HTML5 шаблон</title>  <link rel="stylesheet" href="style.css">  </head>  <body>  </body>  </html>

Теперь можно начинать настройку нашего body элемента со структурой, для использования в других проектах. Так что с учетом этого, давайте сделаем:

<!doctype html>  <html lang="ru">  <head>  <meta charset="UTF-8">  <title>HTML5 шаблон</title>  <link rel="stylesheet" href="style.css">  </head>  <body>  <div id="wrapper">  <header>  <hgroup></hgroup>  </header>  <section>  </section>  <footer>  <hgroup>  </hgroup>  <address></address>  </footer>  </body>  </html>

Сейчас, как вы видите, у нас появилось место для нашего контента. В наличии есть несколько определенных секций: footer, header и section элемент в документе. Теперь, давайте добавим элемент навигации.

<!doctype html>  <html lang="ru">  <head>  <meta charset="UTF-8">  <title>HTML5 шаблон</title>  <link rel="stylesheet" href="style.css">  </head>  <body>  <div id="wrapper">  <header>  <hgroup>  <h1>HTML5 шаблон</h1>  <h3>стандартный</h3>  </hgroup>  <nav>  <ul>  <li><a href="#">Home</a></li>  <li><a href="#">About HTML5</a></li>  </ul>  </nav>  </header>  <section>  </section>  <footer>  <hgroup></hgroup>  <address></address>  </footer>  </body>  </html>

Мы, добавили навигацию с неупорядоченным списком в заголовке. А что делать, если у вас есть большой подвал (footer )и вы хотите, чтобы те же самые элементы-навигаторы находились там?! Давайте добавим их туда. За исключением того, что на этот раз мы не будем использовать тег <nav>, а вместо этого воспользуемся div с классом “footer_navigation”. И пока мы здесь находимся, давайте заполним footer контентом.

<!doctype html>  <html lang="ru">  <head>  <meta charset="UTF-8">  <title>HTML5 шаблон</title>  <link rel="stylesheet" href="style.css">  </head>  <body>  <div id="wrapper">  <header>  <hgroup>  <h1>HTML5 шаблон</h1>  <h3>стандартный</h3>  </hgroup>  <nav>  <ul>  <li><a href="#">Home</a></li>  <li><a href="#">About HTML5</a></li>  </ul>  </nav>  </header>  <section>  </section>  <footer>  <div class="footer_navigation">  <ul>  <li><a href="#">Home</a></li>  <li><a href="#">About HTML5</a></li>  </ul>  </div>  <hgroup>  <h3>By Pavel Mikuta </h3>  <h4>from Moscow, Russia</h4>  </hgroup>  <address>  <a href="mailto:mikuta.pavel@gmail.com">Email Me</a>  </address>  </footer>  </body>  </html>

Теперь давайте добавим немного деталей для IE, и другие тонкости:

<!doctype html>  <html lang="ru">  <head>  <meta charset="UTF-8">  <title>HTML5 шаблон</title>  <meta name="description" content="">  <link rel="stylesheet" href="css/style.css">  <!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]>  <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>  <![endif]-->  </head>  <body>  <div id="wrapper">  <header>  <hgroup>  <h1>HTML5 шаблон</h1>  <h3>стандартный</h3>  </hgroup>  <nav>  <ul>  <li><a href="#">Home</a></li>  <li><a href="#">About HTML5</a></li>  </ul>  </nav>  </header>  <section>  </section>  <footer>  <div class="footer_navigation">  <ul>  <li><a href="#">Home</a></li>  <li><a href="#">About HTML5</a></li>  </ul>  </div>  <hgroup>  <h3>By Pavel Mikuta</h3>  <h4>from Moscow, Russia</h4>  </hgroup>  <address>  <a href="mailto:mikuta.pavel@gmail.com">Email Me</a>  </address>  </footer>  </body>  </html>

Вот и все, стандартный HTML5 шаблон готов! 

lpgenerator.ru

Что такое HTML5?

На первый взгляд HTML5 — это всего лишь новая версия языка разметки. Однако сейчас под этим термином подразумевают несколько иное. Рассматривать HTML5 без упоминания того же CSS3 просто нелепо, поскольку для разработки действительно современных web-приложений без него никак не обойтись. Нельзя забывать и о JavaScript. С его помощью реализуется обращение к богатому API, описанному в стандарте HTML5. Резюмируя все вышесказанное, напрашивается определение: HTML5 — это совокупность современных технологий/стандартов (JS, HTML5, CSS3 и так далее), применяемых для разработки web-приложений.

Капелька истории

HTML5 появился отнюдь не внезапно. Его разработка началась еще в 2007 году. За процесс работки отвечала специально созданная группа от консорциума W3C. Но многие возможности HTML5 были придуманы еще в рамках стандарта Web Application 1.0, а над ним корпели аж с 2004 года. Так что в реальности HTML5 не такая уж и юная технология, как может показаться на первый взгляд.

Первая черновая версия спецификации HTML5 стала доступна уже 22 января 2008 года. Прошло три года, но окончательная версия спецификации так и не готова и вряд ли поспеет в ближайшие годдва. Этот печальный момент обязывает разработчиков аккуратно применять новые возможности в своих проектах. Спецификация может запросто поменяться, да и не все современные браузеры (FireFox 4, Google Chrome 10, IE9, Opera 11) в полной мере поддерживают новые возможности.

Полезные рецепты

Говорить о теории HTML5 можно очень долго, но рубрика у нас называется «Кодинг», поэтому я предлагаю тебе прочувствовать возможности стандарта на практике. Я не стал заморачиваться над созданием сверхоригинальных рецептов, а решил привести примеры вещей, которые действительно полезны и которые уже сейчас можно и нужно применять на своих сайтах. Итак, поехали.

Рецепт №1: Включаем Drag&Drop на полную

Одной из приятных няшек (наверное, зря ты употребил столько энергетиков, ведь тут должно быть слово «фишек» — прим. ред.) HTML5 стала возможность применения File API и Drag and Drop API.

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

HTML5 на примерах

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

А ведь технология Drag&Drop применяется в системе сплошь и рядом. Мне лично всегда хотелось просто выделить нужные файлы и легким взмахом крысы кинуть на страницу. Это куда удобней, чем рыскать в поисках файла при помощи стандартного диалога.

HTML5 внес свои коррективы, и теперь ничто не мешает организовать полноценный Drag&Drop для передачи файла на страницу. Первыми эту фичу реализовали гугловчане в Gmail. Если ты пользуешься гмылом, то наверняка давно заметил область, на которую можно перетащить файлы для приаттачивания к письму. Лично я активно пользуюсь этой функцией и сейчас покажу тебе, как замутить такую же для своего проекта. Наш проект будет состоять из трех файлов: sample.html, style.css и scripts.js. Мы, конечно, могли бы ограничиться и одним html-файлом, но тогда код получился бы нечитабельным. Не нужно мешать HTML с JS или CSS. Лучше все разбить по файлам, и потом спокойненько с ними работать. Первым делом подготовим структуру нашего приложения. Создавай файл sample.html и напиши в нем:

<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" media="all" href="style.css" /> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript" src="scripts.js"></script> </head> <body>  <div id="box"><span id="label">Тащи свои файлы сюда</span>  </div> </body> </html>

Для удобства написания кода на JavaScript я подключил библиотеку jquery. После этого описал структуру будущего html-документа. Она проста до безобразия — нам требуется описать поле, на которое пользователь должен перетягивать файлы. Для этого необходим лишь один div-контейнер. Если сейчас открыть страницу в браузере, то ничего хорошего ты не увидишь. Чтобы наше поле стало заметным визуально, требуется его оформить при помощи CSS. Открываем файл style.css и пишем в него следующий код:

#box { width: 500px; height: 300px; border: 2px dashed #000000; background-color: #FCFFB2; text-align: center; color: #3D91FF; font-size: 2em; font-family: Verdana, sans-serif; -moz-border-radius: 8px; -webkit-border-radius: 8px; } #label { position: relative; top: 2%; }

Идентификатор «box» — это и есть наш будущий контейнер для приема файлов (на эту область пользователь должен перетаскивать документы). Чтобы юзер не промахнулся, я делаю область побольше и в качестве варианта обрамления выбираю dashed — пунктирные линии. Обычные пунктирные линии смотрятся не очень, поэтому я сразу задаю значения для свойств: -moz-border-radius и -webkitborderradius. Вот сейчас ты можешь открыть созданную страницу в браузере и оценить общий вид.

Однако если сейчас попробовать что-то перетащить, то ничего интересного не произойдет. Перетаскиваемый файл просто откроется в web-браузере, и все. Исправить ситуацию поможет небольшой кусочек кода на JavaScript:

$(document).ready(function() {  //Добавляем обработчики событий  var mybox = document.getElementById("box")  mybox.addEventListener("dragenter", dragEnter, false);  mybox.addEventListener("dragexit", dragExit, false);  mybox.addEventListener("dragover", dragOver, false);  mybox.addEventListener("drop", drop, false); }); function dragEnter(evt) {  evt.stopPropagation();  evt.preventDefault(); } function dragExit(evt) {  evt.stopPropagation();  evt.preventDefault(); } function dragOver(evt) {  evt.stopPropagation();  evt.preventDefault(); } function drop(evt) {  evt.stopPropagation();  evt.preventDefault();  var files = evt.dataTransfer.files;  var count = files.length;  if (count > 0)  handleFiles(files); } function handleFiles(fi les) {  //Берем первый файл  //Если требуется работать с несколькими  //файлами, то здесь нужно организовать перебор  var file = files[0];  document.getElementById("label").innerHTML = "Поймал: " + file.name;  var reader = new FileReader();  reader.onprogress = handleReaderProgress;  reader.readAsDataURL(file); } function handleReaderProgress(evt) {  if (evt.lengthComputable) {  if (evt.loaded = evt.total) {  alert("Загружен..."); } } }

На первый взгляд код может показаться громоздким и непонятным, но те, кто хоть немного знаком с JavaScript и jquery, сразу должны разобраться с происходящим. В самом начале я определяю события, возникновение которых меня интересует. Для каждого из них я описываю отдельную функцию. Например, событие dragExit возникает, когда пользователь перемещает курсор мыши из элемента, над которым происходит операция перетаскивания. Если пользователь перетащил файл, то управление берет на себя функция handleFiles().

HTML5 на примерах

В ней я преднамеренно обращаюсь к самому первому файлу (files[0]) и начинаю с ним работать. Учти, пользователь может перетащить за раз сразу несколько файлов. Если твое приложение должно уметь обрабатывать такие ситуации, то организуем перебор всего массива files. В функции handleFiles() происходит все самое интересное.

Сначала я вывожу в элемент label (помнишь надпись «Тащи свои файлы сюда»?) имя файла, который пользователь перетянул на активную область, а затем начинаю его считывать при помощи объекта типа FileReader(). Подробней про него можно почитать в этой статье. На всякий случай я определяю обработчик события onProgress для объекта типа FileReader(). Это событие будет вызываться каждый раз, когда произойдет считывание порции данных. В самом обработчике я выставил условие: если объем загруженных данных равен размеру файла, значит, считывание успешно завершено, и можно выводить радостное сообщение.

HTML5 на примерах

Рецепт №2: Пей пиво, смотри видео, слушай рок

До появления HTML5 просмотр видео в web’е осуществлялся при помощи всевозможных flash-плееров. Нельзя сказать, что просмотр видео этим способом неудобен. Проблемы есть разве что в безопас ности (в последнее время Flash Player просто кишит уязвимостями) и необходимости установки самого плагина. Стандарт HTML5 предлагает элегантное решение — встроенная возможность проигрывания видео- и аудио-контента.

Наверное, многие уже догадались, что я говорю о тегах и . Они-то и позволяют встраивать аудио и видео прямо в страницу. Единственное огорчение, с которым приходится сталкиваться — набор поддерживаемых кодеков. Увы, для каждого браузера этот набор различен, поэтому есть большая вероятность, что твой видеоролик будет прекрасно отображаться в Chrome, а пользователи FireFox уйдут лесом. Чтобы не попасть в такую ситуацию, рекомендуется позаботиться о подстраховочном варианте — воспроизведению ролика с помощью Flash-плеера. О няшках (нет, все-таки он не перепутал слова, придется пролечить его электросудорожной терапией от аниме-зависимости — прим. Лозовского) и проблемах поговорили, теперь перейдем к практике. Для демонстрации воспроизведения видео я накидал простенький примерчик:

<!DOCTYPE html> <html><body>  <video src="video-for-sample-1.mp4" poster="screen-for-sample1.jpg" controls>  Здесь должно быть видео. Если ты видишь этот текст, то твой браузер не поддерживает новый стандарт.  </video> </body></html>

Обрати внимание, что в примере для тега

Для чего это может пригодиться? Как вариант, в качестве такого изображения можно вставлять логотип своей компании/проекта. Тег

Рецепт №3: Where are you now (geolocation API)

Geolocation API — программный интерфейс для определения координат пользователя. На основании полученных данных легко отметить местонахождение юзера, скажем, на Google Maps. Где можно применять эту возможность? Да много где! Например, разработчики популярного сервиса микроблоггинга Twitter используют Geolocation API в web-интерфейсе твиттер-клиента. Если пользователь разрешает получать сведения о своем местоположении, то ко всем его твитам будет добавляться город, в котором он находится в данный момент.

Тестируем geolocation API

Не сомневаюсь, что сейчас тебя мучает вопрос: «А откуда GAPI получают сведения о местоположении?». Даже не думай, что в деле замешаны спутники-шпионы и прочие бондовские штучки. Все куда прозаичней — пакет информации для анализа строится на основании данных об IP-адресе, ближайших Wi-Fi хотспотах, GPS (при наличии устройства), GSM cell ID и так далее. Если заинтересовался теорией и практикой получения примерных координат из перечисленных выше источников, то советую поднять подшивку ][ и найти статью Step’а по данной теме, где он хорошо разобрал теоретическую часть, а также дал обзор соответствующего софта. Теперь взглянем на пример использования GAPI. Все предельно просто и понятно:

<!DOCTYPE html> <html> <body> <script language="JavaScript"> if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function (position) { document.getElementById("latitude").innerHTML = position.coords.latitude; document.getElementById("longitude").innerHTML = position.coords.longitude; }, ); } </script> <div id="coords">Широта: <span id="latitude">Unknown</span> Долгота: <span id="longitude">Unknown</span> </div> </body> </html>

Перед тем как пытаться получить координаты, необходимо убедиться, что браузер поддерживает GAPI. Если метод geolocation вернул true, то все в порядке и можно выполнить попытку получения координат. Для этого воспользуемся методом getGurrentPosition объекта navigator. В случае успеха мы получим координаты, которые прямиком отправятся в документ.

Рецепт №4: База данных в браузере

При разработке web-приложений мы привыкли использовать базы данных. MySQL, SQLite — продукты, знакомые каждому программисту. Пятая версия HTML приносит нам еще один подарок — возможность пользоваться автономной SQLite базой данных. Стоп!

Получается, что все данные будут храниться на компе пользователя? Да, именно так. Не нужно поднимать крик, что это небезопасно. Для определенных проектов эта возможность вполне может сгодиться. К сожалению, пока не все браузеры позволяют работать с этой базой.

Например, IE9 и FF4 пока такой возможности не имеют, так что познакомиться с фишкой на практике можно разве что в Google Chrome. Я не стану приводить пример реального кода, а покажу лишь общий принцип работы:

this.db = openDatabase("xakep", "1.0", "test", 8192); tx.executeSql("create mytable if not exists " + "checkins(id integer primary key asc, field_number_one string)", [], function() { console.log("Запрос успешно выполнен"); }); );

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

HTML5.Shutdown()

Применять HTML5 в своих проектах или нет — дело твое. Я считаю, что сейчас самое время. Если ты профессионально занимаешься разработкой сайтов, то не ленись встраивать HTML5-фишки уже сейчас. Само собой, не забывай заботиться о совместимости — реализовывай поддержку, как для современных браузеров, так и для устаревших. У тебя для этого есть все необходимое. Не тормози и старайся, чтобы твои проекты выделялись на фоне остальных. Удачи!

Как подстраховаться?

На протяжении всей статьи я говорил, что в настоящий момент современные браузеры поддерживают разный объем возможностей HTML5. Именно поэтому нужно быть аккуратным и стараться не использовать уж очень экзотичные вещи. Сразу возникает вопрос: «А как узнать, какие возможности HTML5 поддерживает определенный браузер?». Есть несколько способов решения этой задачи, но мне больше всего по душе применение крошечной JavaScript-библиотеки — Modernizr (modernizr.com).

Библиотека распространяется совершенно бесплатно и стоит ее подключить к своему проекту, как она сразу выведет список возможностей HTML5, которые поддерживает твой браузер. Чтобы протестировать функциональность библиотеки, тебе не обязательно сразу ее качать и подключать к своему проекту. Достаточно просто зайти на официальный сайт библиотеки и ты сразу увидишь, что поддерживает твоя бродилка, а что нет. Посмотри скриншоты посещения сайта при помощи Google Chrome и Internet Explorer 9. Несмотря на хорошую pr-компанию и восхваляющие статьи, бродилка от Microsoft явно поддерживает меньше возможностей, нежели Google Chrome.

iantonov.me

Описание HTML5-элементов

  • Содержание:
  • 1. Элемент <header>
  • 2. Элемент <nav>
  • 3. Элемент <article>
  • 4. Элемент <section>
  • 5. Элемент <aside>
  • 6. Элемент <footer>
  • 7. Элемент <address>
  • 8. Элемент <main>
  • 9. Элемент <figure>
  • 10. Элемент <figcaption>
  • 11. Элемент <time>
  • 12. Элемент <mark>
  • 13. Элемент <bdi>
  • 14. Элемент <wbr>
  • 15. Элементы для описания Восточно-Азиатских символов

1. Элемент <header>

Категории контента: потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.

<header>   <h1>Site description</h1>   <nav>   <ul>   <li><a href="">About</a>   <li><a href="">Forum</a>   <li><a href="">Download</a>   </ul>   </nav>  </header>

Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.

2. Элемент <nav>

Категории контента: потоковое содержимое, секционное содержимое.
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.

<nav>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>

В качестве элементов панели навигации можно использовать не только элементы списков:

<nav>   <p><a href="">...</a></p>   <p><a href="">...</a></p>  </nav>

Также можно добавлять заголовки внутрь элемента:

<nav>   <h2>...</h2>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>

3. Элемент <article>

Категории контента: потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <header>   <h2>...</h2>   </header>   <p>...</p>   <footer>   Опубликовано в категории<a href="">Музыка</a>.   <a href="">0 комментариев</a>   </footer>  </article>

4. Элемент <section>

Категории контента: потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <h1>...</h1>   <section>   <h2>...</h2>   <p>...</p>   </section>   <section>   <h2>...</h2>   <p>...</p>   </section>   <p>...</p>  </article>

<article> внутри <section>

Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>

<section>   <h1>Заметки о природе</h1>   <article>   <h2>...</h2>   <p>...</p>   </article>   <article>   <h2>...</h2>   <p>...</p>   </article>  </section>  <section>   <h1>Исторические заметки</h1>   <article>   <h2>...</h2>   <p>...</p>   </article>   <article>   <h2>...</h2>   <p>...</p>   </article>  </section>

5. Элемент <aside>

Категории контента: потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.

<aside>   <h2>...</h2>   <p>...</p>  </aside>
<aside>   <h2>...</h2>   <p>...</p>   <blockquote>   <p>...<cite>...</cite>...</p>   <p>...</p>   </blockquote>  </aside>

6. Элемент <footer>

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

В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.

<footer>   <address>...</address>   <small>@2014...</small>  </footer>

7. Элемент <address>

Категории контента: потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.

8. Элемент <main>

Категории контента: потоковое содержимое.
Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).

Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.

<body>  <header>   <h1>Пудель</h1>   <nav>   <ul>   <li><a href="index.html">Главная</a></li>   <li><a href="about.html">О породе</a></li>   <li><a href="health.html">Здоровье</a></li>   </ul>   </nav>   </header>   <main>   <section>   <header>   <h2>О породе</h2>   <nav>   <ul>   <li><a href="#basic">Разновидности</a></li>   <li><a href="#app">Внешний вид</a></li>   <li><a href="#temp">Характер</a></li>   </ul>   </nav>   </header>   <section id="basic">   <h3>Разновидности</h3>   <p>...</p>   </section>   <section id="app">   <h3>Внешний вид</h3>   <p>...</p>   </section>   <section id="temp">   <h3>Характер</h3>   <p>...</p>   </section>   <footer>   <a href="#basic">Разновидности</a>   <a href="#app">Внешний вид</a>   <a href="#temp">Характер</a>   </footer>   </section>   </main>   <footer>   <small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small>   </footer>  </body>

9. Элемент <figure>

Категории контента: потоковое содержимое, корневое секционное содержимое.
Элемент <figure> представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..

<figure>   <img src="picture.jpg" alt="Осень">   <figcaption>Осенний лес</figcaption>  </figure>

Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:

margin-left: 40px;  margin-right: 40px;  margin-top: 1em;  margin-bottom: 1em;

10. Элемент <figcaption>

Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px.

11. Элемент <time>

Категории контента: потоковое содержимое, текстовое содержимое.
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:

<time datetime="2014-09-25"> 25 Сентября 2014</time>

Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):

<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>

12. Элемент <mark>

Категории контента: потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.

13. Элемент <bdi>

Категории контента: потоковое содержимое, текстовое содержимое.
Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.

14. Элемент <wbr>

Категории контента: потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.

15. Элементы для описания Восточно-Азиатских символов

Категории контента: потоковое содержимое, текстовое содержимое.
Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов <rb>;
— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.

Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.

Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.
Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.
Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.
Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.

html5book.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.