Онлайн демонстрация возможностей HTML5

Posted in HTML5, HTML5 уроки, jQuery by awebdesign on 11.05.2010

Здесь представлена презентация возможностей HTML5: http://apirocks.com/html5/html5.html#slide1

Откройте презентацию в отдельном окне и читайте перевод послайдово — номера слайдов написаны в адресной строке браузера.

Это необходимо, так как все возможности демонстрируются наглядно на самом сайте.

В Firefox почти все работает.

Итак, перевод:

Слайд 1

Эта презентация – сайт, написанный на HTML5

Нажимайте стрелку на клавиатуре, чтобы листать страницы.

Некоторые функции могут не работать, так как сайт написан под Google Chrome. Так что вы будете плакать от счастья, когда увидите работу в полном объеме на вашем IE после загрузки и установки Google Frame!

Слайд 2

HTML5 – Веб-развитие нового уровня

(включая следующие поколения других веб-технологий)

Слайд 3

Развитие Web-технологий по годам:

1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2009 HTML 5

Слайд 4

HTML5 ~= HTML + CSS + JS APIs

JS API:

Слайд 6

Новые селекторы

Нахождение элементов по классу (DOM API)

var el = document.getElementById('section1');
el.focus();

var els = document.getElementsByTagName('div');
els[0].focus();

var els = document.getElementsByClassName('section');
els[0].focus();

Нахождение элементов по синтаксису CSS (Селекторы API)

var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");

Слайд 7

Web хранение

// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
  window.localStorage['value'] = area.value;
  window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];

Пример использования: Сохраните e-mail на стороне клиента (защищено от взлома)

Слайд 8

Web SQL база данных

var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

«Сделать» «Построить таблицу» «Удалить таблицу»

Слайд 9

Кэш

<html manifest="cache-manifest">
window.applicationCache.addEventListener('checking', updateCacheStatus, false);

CACHE MANIFEST

# version 1

CACHE:
/html5/src/refresh.png
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

Отключите интернет-соединение и обновите страницу!

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

Слайд 10

Web Worker-ы

main.js:
  var worker = new Worker(‘extra_work.js');
  worker.onmessage = function (event) { alert(event.data); }; 

extra_work.js:
  // do some work; when done post message.
  postMessage(some_data);

Web Worker-ы позволяют ява-скриптам исполняться параллельно работе остальной страницы, поэтому с worker-ами ява-скрипты работают гораздо быстрее и эффективнее. Чтобы увидеть разницу, нажмите сначала на кнопку “Find Route with Workers” (найти маршрут с помощью worker-ов) и “Find Route without Workers” (найти маршрут без worker-ов).

Слайд 11

Web Сокеты

var socket = new WebSocket(location);
socket.onopen = function(event) {
  socket.postMessage(“Hello, WebSocket”);
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert(“closed”); }

Позволяют серверам передавать информацию браузерам.

Слайд 12

Уведомления

if (window.webkitNotifications.checkPermission() == 0) {
  // you can pass any url as a parameter
  window.webkitNotifications.createNotification(tweet.picture, tweet.title,
      tweet.text).show();
} else {
  window.webkitNotifications.requestPermission();
}

«Установить разрешение на получение уведомлений»

Нажать, если вы хотите также переустановить настройки

Используйте свое имя на Twitter-е, чтобы показать ваше последние сообщение в качестве уведомления.

(Push Notification позволяет приложениям получать напоминания, обновления и оповещения из сети даже тогда, когда они не запущены. Подробнее на Push notification – прим. переводчика)

Слайд 13

Перетаскивание и бросание

document.addEventListener('dragstart', function(event) {
   event.dataTransfer.setData('text', 'Customized text');
   event.dataTransfer.effectAllowed = 'copy';
}, false);

Первое окно: «Выделите текст и перебросьте, выделенный вами текст появится в окне»

Второе окно: «Выделите текст и перебросьте, текст сменится на другой»

(Перетаскивать нужно в окно “Drop Area”, в окне “Source Data” будут выведены html-разметка и сам текст — прим. переводчика).

Ожидается в ближайшее время: перетаскивание файлов с вашего рабочего стола. (Фантастика! Прим. переводчика).

Слайд 14

Геолокация

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    map.setCenter(new GLatLng(lat, lng), 13);
    map.addOverlay(new GMarker(new GLatLng(lat, lng)));
  });
}

«Показать местоположение»

(apirocks.com запросит ваше местоположение и сохранит его на вашем компьютере, чтобы отображать на карте)

Слайд 15

Итого по JS API:

Хранение на стороне клиента (База данных Web SQL, кэш, Web-хранение данных)

Общение (веб-сокеты, worker-ы)

Новые возможности десктопа (Уведомления, перетаскивание и бросание)

Геолокация

HTML

Слайд 17

Новые семантические тэги

<body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>

  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>

  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>

  <aside>
   Top links...
  </aside>

  <footer>
   Copyright © 2009.
  </footer>
</body>

Слайд 18

Новые link relations

<link rel='alternate' type="application/rss+xml" href="http://myblog.com/feed" />
<link rel='icon' href="/favicon.ico" />
<link rel='pingback' href="http://myblog.com/xmlrpc.php">
<link rel='prefetch' href="http://myblog.com/main.php">
...

<a rel='archives' href="http://myblog.com/archives">old posts</a>
<a rel='external' href="http://notmysite.com">tutorial</a>
<a rel='license' href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel='nofollow' href="http://notmysite.com/sample">wannabe</a>
<a rel='tag' href="http://myblog.com/category/games">games posts</a>
...

(Link relations объясняют браузеру, какого типа ссылка прописана в тексте. Link rel встречались в HTML4 в элементе header. Теперь будут использоваться в тэге <a href=”#”>#</a> — прим. переводчика)

Слайд 19

Микродата

<div itemscope itemtype="http://example.org/band">
 <p>My name is <span itemprop='name'>Neil</span>.</p>
 <p>My band is called <span itemprop='band'>Four Parts Water</span>.</p>
 <p>I am <span itemprop='nationality'>British</span>.</p>
</div>

(Отдельная тема – прим. переводчика)

Слайд 20

Доступные Rich Internet Приложения

(Как я поняла – примочки для слабовидящих пользователей интернета – детальные пояснения, что именно показывает страница, читаются скрин-ридерами и понятны людям – прим. переводчика).

<ul id="tree1"
      role="tree"
      tabindex="0"
      aria-labelledby="label_1"
      >
  <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li>
  <li role="group">
    <ul>
      <li role="treeitem" tabindex="-1">Oranges</li>
      <li role="treeitem" tabindex="-1">Pineapples</li>
      ...
    </ul>
  </li>
  </ul>

Слайд 21

Новые типы полей в формах

Что уже внедрено

<input type='range' min='0' max='50' value='0'>  

<input autofocus type='search'>  

<input type='text' placeholder='Search inside'>

Что ожидается

<menu>
<progress>

<input type='color'>
<input type='number'>
<input type='email'>
<input type='tel'> 

<input type='time'>
<input type='date'>
<input type='month'>
<input type='week'>
<input type='datetime'>

Слайд 22

Тэги audio и video

<audio src="sound.mp3" controls></audio>
document.getElementById("audio").muted=false;

<video src='movie.mp4' autoplay controls ></video>
document.getElementById("video").play();

Слайд 23

Canvas (в переводе – холст, рисование векторных элементов, графиков и прочего средствами HTML5 – прим. переводчика)

<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var canvasContext = document.getElementById("canvas").getContext("2d");
  canvasContext.fillRect(250, 25, 150, 100);

  canvasContext.beginPath();
  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = 'round';
  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
  canvasContext.stroke();
</script>

Слайд 24

Пример использования Canvas

Кнопки:

«Экспортировать в JPEG»

«Экспортировать в PNG (тяжелый файл)»

Фото: без рамки, с рамкой, рамка Полароид.

Показать углы

Слайд 25

Canvas 3D (Web GL)

<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var gl = document.getElementById("canvas").getContext("experimental-webgl");
  gl.viewport(0, 0, canvas.width, canvas.height);
  ...
</script>

Демо требует браузера с поддержкой WebGL

Слайд 26

Итого по HTML:

Семантика (Новые тэги, link relations, Микродата)
Доступность (ARIA)
Веб-формы (новые поля)
Мультимедиа (Тэги Audio и Video)
Рисование 2D и 3D (Canvas, WebGL)

CSS

Слайд 28

CSS-селекторы

Селекторы

.row:nth-child(even) {
  background: #dde;
}
.row:nth-child(odd) {
  background: white;
}

Отображение контента наподобие отображения картинок

div {
  display: inline-block;
}

Специальные аттрибуты

input[type="text"] {
  background: #eee;
}

Отрицание (условие выполняется при отрицательном результате, т.е является true при результате false – прим. переводчика)

:not(.box) {
  color: #00c;
}
:not(span) {
  display: block;
}

Более точечный таргетинг

h2:first-child { ... }

div.text > div { ... }
h2 + header { ... }

Слайд 29

Поддержка новых шрифтов

@font-face {
  font-family: 'Junction';
  src: url(Junction02.otf);
}
@font-face {
  font-family: 'LeagueGothic';
  src: url(LeagueGothic.otf);
}
@font-face {
  font-family: 'GG250';
  src: url(General250.otf);
}

header {
  font-family: 'LeagueGothic';
}

LeagueGothic без замены на картинки

Слайд 30

Сворачивание текста (Text Wrapping)

div {
  text-overflow: ellipsis;
}

Попробуйте ввести разные цифры в поле под текстом и нажать Enter – увидите результат!

То же самое касается следующих страниц.

Слайд 31

Колонки

-webkit-column-count: 2;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

Слайд 32

Обводка текста

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 0.00px;
}

Слайд 33

Прозрачность

  color: rgba(255, 0, 0, 0.75);
  background: rgba(0, 0, 255, 0.75);

(Тоже измените цифры в полях color и background, изменится прозрачность текста и подложки – прим. переводчика).

Слайд 34

То же самое, но в цветовой модели Hue/saturation/luminance

color: hsla(
  128,
  75%,
  33%,
  1.00);

Слайд 35

Скругленные углы

  border-radius: 0px;

Слайд 36

Градиенты

background: -webkit-gradient(linear, left top, left bottom,
                             from(#00abeb), to(white),
                             color-stop(0.5, white), color-stop(0.5, #66cc00))

background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))

Слайд 37

Тени

text-shadow:
  rgba(64, 64, 64, 0.5)
  0px
  0px
  0px;
box-shadow:
  rgba(0, 0, 128, 0.25)
  0px
  0px
  0px;

Слайд 38

Мгновенный Web 2.0 (только поменяйте цифры)

text-shadow: rgba(0, 0, 0, 0.5) 0 0px 0px;  

background:
  -webkit-gradient(linear, left top, left bottom,
                   from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0))); 

border-radius: 0px;  

-webkit-box-reflect: below 10px
  -webkit-gradient(linear, left top, left bottom,
                   from(transparent), to(rgba(255, 255, 255, 0)));

Слайд 39

Расширение возможностей бэкграунда

Изменение размеров бэкграунда:

#logo {
  background: url(logo.gif) center center no-repeat;
  background-size: 

      auto
      contain
      cover
      100%
    ;
}

Несколько бэкграундов

div {
  background: url(src/zippy-plus.png) 10px center no-repeat,
              url(src/gray_lines_bg.png) 10px center repeat-x;
}

Слайд 40

Перемещения

#box.left {
  margin-left: 0;
}
#box.right {
  margin-left: 1000px;
}

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right';

#box {
  -webkit-transition: margin-left 1s ease-in-out;
}  

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right';

Слайд 41

Трансформации

«Проведи надо мной мышью»

-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px)

#threed-example {
  -webkit-transform: rotateZ(5deg);

  -webkit-transition: -webkit-transform 2s ease-in-out;
}
#threed-example:hover {
  -webkit-transform: rotateZ(-5deg);
}

«А теперь нажми цифру 3!»

Слайд 42

Анимация

@-webkit-keyframes pulse {
 from {
   opacity: 0.0;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
 }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

Слайд 43

Итого по CSS:

Шрифты
Визуальные эффекты
Перемещения, трансформации и анимация

Слайд 44

Где уже работает?

В современных браузерах
В мобильных браузерах
В Google Chrome / Firefox

Слайд 45

Chrome Frame:

Это самый простой способ апгрейдить IE6, 7 и 8 до уровня современных технологий HTML5
Два способа сделать ваш сайт готовым для Chrome Frame:

на стороне клиента

<meta http-equiv="X-UA-Compatible" content="chrome=1">

на стороне сервера

X-UA-Compatible: chrome=1

Попробуйте загрузить эту презентацию в IE!

Слайд 46

HTML5 ~= HTML + CSS + JS APIs

Tagged with: CSS3, CSS3 уроки, HTML5, HTML5 презентация, HTML5 уроки, HTML5 учебник, HTML5 tutorial, Javascript, javascript уроки, jQuery, jQuery уроки

1 comment

Один ответ

Subscribe to comments with RSS.

Павел said, on 21.04.2011 at 9:07 дп

Спасибо за перевод! По html5 cache api очень мало материалов на русском.
Вот еще интересная статья: http://www.clearboth.ru/article/go-offline-with-application-cache.html

НравитсяНравится

Ответить