Embed Size (px)
Citation preview
Что плохо в HTML/CSS/JS ?1) Плохая поддержка мультимедиа
– Векторная графика
– Поддержки аудио и видео
– Графика с помощью JS2) Ограничено использование ресурсов клиента
– Хранение данных
– Фоновые вычисления
– Сетевые соединения3) Множество мелких недочетов (inputs и т.д.)
4) Трудно создать богатый GUI
ПлатформыJava Applets – полноценный GUI на Java
Java Fx – платформа, JavaFXScript
Adobe Flash – векторная графика + ActionScript
Adobe Flex – расширение Flash, XML интерфейс
MS SilverLight – аналог Adobe Flash
Возможности - Доступ к файловой системе (ограниченный)
- Локальное хранилище данных
- Поддержка аудио и видео
- Поддержка сетевых соединений (сокеты)
- 2D / 3D графика
- Работа непосредственно с HTTP протоколом
- Работа с DOM
- Прямые и обратные вызовы JavaScript
- Регистрация своих протоколов
Как подключить на страницу ?<embed src="mouse.swf"
type="application/x-shockwave-flash"
pluginspage="http://get.adobe.com/flashplayer/">
<object data="player.swf"
type="application/x-shockwave-flash">
<param name="flashvars" value="url=rolik.mp4"> <param name="quality" value="high">
<param name="wmode" value="opaque">
<embed … >
</object>
<OBJECT width="200" height="200" align="baseline"
classid="clsid:CAFEEFAC-0014-0002-0000-ABCDEFFEDCBA"
codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0">
<PARAM name="code" value="XYZApp.class">
<PARAM name="codebase" value="html/">
<PARAM name="type" value="application/x-java-applet;jpi-version=1.4.2">
<PARAM name="model" value="models/HyaluronicAcid.xyz">
<PARAM name="scriptable" value="true">
Java Applets are not supported !!!
</OBJECT>
Достоинства- Расширенный доступ к ресурсам
- Обеспечение безопасности, “песочница”
- Скорость работы
- Поставляются вместе со средой разработки
- Независимость от браузера
Недостатки- Объем загружаемого кода может быть большим
- Отдельная технология → отдельный программист
- Переносимость плагина
- Как правило, плагин нужно загружать
HTML5- Почему не прижился XHTML?
- Не только язык разметки, это группа технологий
- CSS3
- Реализуется непосредственно в браузере
- Может быть реализован частично
- Как браузеры обрабатывают неизвестные тэги?
- Часть функционала может быть эмулирована с помощью JS (Modernizr.js, HTML5 Enabling)
- И уже работает! http://html5readiness.com/
- Совместим с HTML4
- DOCTYPE html
Разметка: новые тэги
<header> - выделяет шапку страницы
<footer> - выделяет подвал страницы
<section> - раздел сайта, логическая группировка
<article> - “сущность”, предназначенная для самостоятельного распространения
<nav> - блок навигационных ссылок, например рубрикатор или пагинатор
<aside> - имеет косвенное отношение к содержимому, реклама, перелинковка
<time datetime=”2012-05-15”>сегодня</time>
<hgroup><h1></h1><h2></h2><hgroup>
Canvas - рисованиеПоддержка: IE 7+, FF 3+, Chrome 3+, Opera 10+
<canvas id=”a” width=”200” height=”200”>
</canvas>
<script>
var canv = document.getElementById("a");
var ctx = canv.getContext("2d");
ctx.fillRect(50, 25, 150, 100);
</script>
Context – API для рисования
2d – стандартно (система координат – top left)
3d – не во всех браузерах (WebGL)
Методы рисованияctx.fillStyle – стиль заполнения (цвет)
ctx.strokeStyle – стиль росчерка (цвет)
ctx.font – стиль шрифта
ctx.strokeRect(x, y, width, height)
ctx.fillRect(x, y, width, height)
ctx.moveTo(x, y) – переместить перо в точку
ctx.lineTo(x, y) – провести линию в точку
ctx.stroke() - вывести линию с нужным стилем
ctx.fillText(“phrase”, x, y) – вывод текста
Градиенты и изображенияgrd = ctx.createLinearGradient(x0, y0, x1, y1);
grd.addColorStop(0, “black”);
grd.addColorStop(1, “white”);
ctx.fillStyle = grd;
img = Image();
img.src = “images/cat.jpg”;
img.onload = function() {
ctx.drawImage(img, x, y, width, height);
};
HTML5: VideoКак это делалось раньше:
Flash, QuickTime, RealPlayer (плагины)
Что предлагает HTML5:
<video id="movie" width="400" height="320" preload controls poster="poster.jpeg">
<source src="video/snowman.mp4" />
<source src="video/snowman.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video/snowman.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
Видео контейнерыОпределяют формат файла, позволяют хранить в одном файле видео и аудио дорожки
MPEG-4 (mp4, m4v)
FlashVideo (flv)
OGG (ogv)
WebM (только кодеки VP8 и Vorbis)
Audio Video Interactive (avi)
Видео и аудио кодекиНепосредственно декодирование видео и аудио потоков.
В Internet используются кодеки с потерей качества.
Видео:
H.264 – основан на патенте, профили, Blu-ray
Theora – не связан патентами
VP8 – все патенты открыты, принадлежит Google
Аудио:
MP3 – запатентован, поддерживается всем
AAC – запатентован, профили, Apple, iTunes
Vorbis – не связан патентами
Поддержка браузерамиFF(4+): Theora + Vorbis + OGG, WebM
Opera(10.6+): Theora + Vorbis + OGG, WebM
Chrome(6+): Theora + Vorbis + OGG, WebM, H.264 + AAC + MP4
IPhone, Android, Flash(!): H.264 + AAC + MP4
IE(9+): H.264 + AAC + MP4, WebM(*)
Нужно несколько копийWebM (VP8 + Vorbis)
MP4 (H.264 + AAC low)
OGG (Theora + Vorbis)
Откат к Flash плееру
ГеолокацияОбычный способ: REMOTE_ADDR → whois → регион
Еще варианты: подключение к беспроводной сети, подключение к сотовой сети, GPS
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
positionDetected, detectionFailed,
{ enableHighAccuracy: false,
timeout: 5000, maximumAge: 60000 }
);
}
function positionDetected(position) {
position.lattitude; // в градусах
position.longitude; // в градусах
position.accuracy; // в метрах
}
function detectionFailed(error) {
if (error.code == 1) {
// пользователь отказался
}
}
Альтернативы: GoogleGears, Native API, geo.js
Локальное хранилищеНедостатки cookies: размер, передача, скорость
var ls = window.localStorage;
if (ls) {
ls.setItem('str', 'value');
var str = ls.getItem('name');
ls.removeItem('str');
ls['num'] = 3.33;
var num = parseFloat(ls['num']);
ls.length; // количество записей
for (var key in ls)
console.log(key, ls[key])
}
Фоновые вычисленияОбычный способ:
setInterval(function() {
// do some calculations
// post events
}, 100);
Недостатки:
- вычисления в 1 поток
- блокирует работу UI
- сложность event-driven разработки
WebWorkers// создаем тред
var worker = new Worker("worker.js");
// подписываемся на события
worker.onmessage = function(event) {
console.log(event.data);
}
// отправляем сообщение
worker.postMessage(33);
// и когда-нибудь закрываем его
// worker.close();
WebWorkers// worker.js
var i = 0;
var iv = null;
function tick() {
postMessage(i++);
}
// подписываемся на внешние события
onmessage = function(ev) {
i = ev.data;
clearInterval(iv);
iv = setInterval(tick, 500);
};
Offline приложения<html manifest="/cache.manifest">
MIME-тип: text/cache-manifest
CACHE MANIFEST
FALLBACK:
/ /offline.html
CACHE:
/style.css
/script.js
/index.html
NETWORK:
/counter.cgi
Улучшения форм<input type=”text” placeholder=”скажи слово”>
<input type=”text” autofocus>
<input type=”text” required>
Новые типы input: email, url, search, number, range, date, time, week, month, …, color
Валидация форм – по умолчанию
<form novalidate> - отключает встроенную валидацию
SASS - CSS препроцессор
ruby sass input.scss output.css
SASS - переменные и вложенность$bgcolor: gray;
$fgcolor: green;
.txt {
color: $fgcolor;
background: $bgcolor;
a {
color: red;
&:hover {
text-decoration: none;
}
}
}
.txt {
color: green;
background: gray;
}
.txt a {
color: red;
}
.txt a:hover {
Text-decoration: none;
}
SASS – функции и интерполяция$side: top;
$brd-width: 3px;
$clr: red;
.btn {
color: $clr;
border-#{$side}:
lighten($clr, 30%) $brd-width;
width:
70px - $brd-width;
}
.btn {
color: red;
border-top: #ff9999 3px;
width: 67px;
}
SASS - mixins
@mixin rounded($side, $radius: 10px) {
border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius: $radius;
}
#navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }
#navbar li {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px; }
#footer {
border-top-radius: 5px;
-moz-border-radius-top: 5px;
-webkit-border-top-radius: 5px; }
#sidebar {
border-left-radius: 8px;
-moz-border-radius-left: 8px;
-webkit-border-left-radius: 8px; }
CSS Фреймворкпросто библиотека CSS стилей
Преимущества:
- кроссбраузерность
- может использовать не-верстальщик
- как правило более семантичная разметка
- скорость разработки
Подходит для:
- внутренние интерфейсы (админка)
- прототипы сайтов
- сайты-приложения, технические сайты
Примеры: 960 Grid, Blueprint, YAML, Bootstrap
Twitter Bootstrap- Использует less.js
- Требует DOCTYPE html
- Включает:
12 колоночная сетка layoutы страниц стили для основных тэгов компоненты: кнопки, меню, закладки, пагинатор
- Адаптируется под разные устройства:
телефоны планшеты Мониторы
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
</div>
<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
SVG – Scalable Vector Graphics<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version = "1.1"
baseProfile="full"
xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink"
xmlns:ev = "http://www.w3.org/2001/xml-events"
height = "400px" width = "400px">
<rect x="0" y="0" width="400" height="400" fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5"/>
<g fill-opacity="0.6" stroke="black" stroke-width="0.5px">
<circle cx="200px" cy="200px" r="104px" fill="red" transform="translate(0,-52)" />
<circle cx="200px" cy="200px" r="104px" fill="blue" transform="translate(60, 52)" />
<circle cx="200px" cy="200px" r="104px" fill="green" transform="translate(-60, 52)" />
</g>
</svg>
SVG - Пути<path stroke="black" d="M 227 239 L 328 90 L 346 250 L 201 124 L 410 150 L 228 238" />
M – перемещение пера
L H V – прямые
C S Q T – кривые Безье
A – дуги
Достоинства- открытый текстовый формат
- векторная графика, масштабируемость
- интеграция с растровой графикой, CSS, JS
- является частью DOM → анимация и события
Недостатки- размер файла, чуствителен к мелким деталям
- сложно отобразить только часть картинки
ПоддержкаChrome 3+, FF 1.5+, Opera 8+, IE 9+
Для IE <9 существует технология VML
Raphael.js
