Эта презентация о разметке HTML5

Нажмите -> чтобы продолжить.

Есть вопросы? Прочитайте это.

HTML5*

Новый уровень веб-разработки

* В том числе и другие технологии создания сайтов следующего поколения.

Хронология развития веб-технологий

1991

HTML

1994

HTML 2

1996

CSS 1

JavaScript

1997

HTML 4

1998

CSS 2

2000

XHTML 1

2002

Бестабличная верстка

2005

AJAX

2009

HTML 5

HTML5 ~= HTML + CSS + JS API's

JS APIs

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

Поиск элементов по классу (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");

JS APIs

Хранение данных

// 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'];

Пример: сохранение электронной почты на стороне клиента

JS APIs

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

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

JS APIs

API кэша

<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

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

JS APIs

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);

Загрузка путя...

Попробуйте перетащить карту при расчете сложного маршрута (будет разрешено, если вы будете использовать Workers)

JS APIs

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вЂќ); }

Если веб-сервер позволяет это сделатт, отправьте данные в браузер (COMET)

JS APIs

Уведомления

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, чтобы показать ваш последний твит, как уведомление

JS APIs

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

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

Выделите этот текст и перетащите (с удалением)
Выделите этот текст и перетащите

Данные

Место для перетаскивания

Скоро: перетаскивание файлов с вашего рабочего стола

JS

Геолокация

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)));    
  });
}

JS APIs

Хранение на стороне клиента (Web базы данных SQL, App Кэш, Web Storage)
Коммуникации (Web Сокеты, Worker Workers)
Десктопные функции (уведомления, API перетаскивания)
Геолокация

HTML

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

<body>
  <header>
    <hgroup>
      <h1>Заголовок</h1>
      <h2>Подзаголовок</h2>
    </hgroup>
  </header>

  <nav>
   <ul>
     Навигация...
   </ul>
  </nav>

  <section>
   <article>
     <header>
       <h1>Заголовок</h1>
     </header>
     <section>
       Содержание...
     </section>
   </article>

   <article>
     <header>
       <h1>Заголовок</h1>
     </header>
     <section>
       Содержание...
     </section>
   </article>

   <article>
     <header>
       <h1>Заголовок</h1>
     </header>
     <section>
       Содержание...
     </section>
   </article>
  </section>

  <aside>
   Верхние ссылки...
  </aside>

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

HTML

Новые связи ссылок

<link rel='alternate'>
<link rel='icon'>
<link rel='nofollow'>
<link rel='prefetch'>

<a rel='archives'>
<a rel='external'>
<a rel='license'>
<a rel='noreferrer'>
<a rel='pingback'>
<a rel='sidebar'>
<a rel='tag'>

HTML

Микроданные

<div item>
 <p>Моё имя <span itemprop='name'>Николай</span>.</p>
 <p>Моя группа называется <span itemprop='band'>Four Parts Water</span>.</p>
 <p>Я <span itemprop='nationality'>британец</span>.</p>
</div>

HTML

Атрибуты ARIA

<ul id="tree1"
      role="tree" 
      tabindex="0" 
      aria-labelledby="label_1"
      > 
  <li role="treeitem" tabindex="-1" aria-expanded="true">Фрукты</li>
  <li role="group"> 
    <ul> 
      <li role="treeitem" tabindex="-1">Апельсины</li>
      <li role="treeitem" tabindex="-1">Бананы</li>
      ...
    </ul>
  </li>
  </ul>

HTML

Новые типы полей

Реализовано

<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'>

HTML

Аудио + Видео

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

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

HTML

Холст

<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>

HTML

Пример canvas

HTML

Canvas 3D (WebGL)

<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>

HTML

Семантика (новые теги, свзяи ссылок, микроданные)
Доступность (ARIA)
Web Формы 2.0 (поля ввода)
Мультимедиа (аудио и видео теги)
2D и 3D рисование (Canvas, WebGL)

CSS

CSS селекторы

Селекторы

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

Строка 1

Строка 2

Строка 3

Строка 4

Показ как изображение

div {
  display: inline-block;
}

Конкретные атрибуты

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

Отрицание

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

Более спецефичный таргеттинг

h2:first-child { ... }

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

CSS

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

@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

CSS

Перенос текст

div {
  text-overflow: ellipsis;
}

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

Поиграйте с ползунком на этой и последующих слайдах!

CSS

Столбцы

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

Среди первых социологов также следует назвать Герберта Спенсера (1820—1903). Его можно считать основоположником социалорганицизма и эволюционизма. Слабость идей органицизма в том, что аналогии подменяли конкретный анализ (органицисты пытались устанавливать закономерности в обществе по аналогии с закономерностями в живых организмах). Спенсер сформулировал независимо от Дарвина свою теорию эволюции. Социальная эволюция по Спенсеру — это часть всеобщей. В ней также действуют два фактора: борьба за существование и выживание наиболее приспособленных (естественный отбор). Он выделял две стороны процесса эволюции — интеграция и дифференциация: от неустойчивости к устойчивости, и три фазы эволюции: неорганическая, органическая, надорганическая. Социальная эволюция — это часть надорганической, которая отличается уровнем сложности, темпами изменения и важностью следствий.

Идеи эволюционизма развивались во многих странах независимо, одной из ветвей эволюционизма был социальный дарвинизм:

Людвиг Гумплович (1838—1909), Австрия. Написал ряд трудов: «Основы социологии», «Социология и политика», «Социологическая идея государства», «Раса и государство», «Расовая борьба». Считал, что предмет социологии — изучение социальных групп и взаимоотношений между ними. Социальная группа для него — не просто сумма составляющих её единиц, а обладающая групповым эффектом. Основной закон каждой социальной группы — стремление подчинить себе другие социальные группы, стремление к порабощению и господству, к самосохранению.

Уильям Самнер (1840—1910), США. Считал, что социальная эволюция происходит независимо от воли и желания людей и законы естественного отбора и борьбы за существование универсальны. Основная работа Самнера: «Народные обычаи», где он осуществляет попытку объяснения происхождения и развития некоторых важных групповых привычек и социальных форм жизни людей. Обычай по Самнеру — стандартные групповые формы поведения, выступающие на уровне индивида как привычки. Ввел понятие In-референтных и Out-референтных групп.

CSS

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

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

Пример обводки

CSS

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

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

Web Design

CSS

Цвет (HSLA)

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

HSL example

CSS

Закругенные углы

  border-radius: 0px;

Пример

CSS

Градиенты

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))

CSS

Тени

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

Пример теней

CSS

Мгновенное 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)));

Создание Web 2.0 логотипа

CSS

Фон

Размеры фона

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

Измени размер!

Множественные фоны

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

Тест

CSS

Переходы

#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';

CSS

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

Наведи курсор:

-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!

CSS

Анимация

@-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;
}

* Будьте осторожны с этим тегом - мигающие надписи могут отпугивать посетителей.

Пульс!

CSS

Типография
Визуализация
Перемещение, трансформция и анимация

HTML5 ~= HTML + CSS + JS APIs

HTML5 = Следующее поколение развития веб разработок