2. Что плохо в HTML/CSS/JS ?
1) Плохая поддержка мультимедиа
– Векторная графика
– Поддержки аудио и видео
– Графика с помощью JS
2) Ограничено использование ресурсов клиента
– Хранение данных
– Фоновые вычисления
– Сетевые соединения
3) Множество мелких недочетов (inputs и т.д.)
4) Трудно создать богатый GUI
3. Платформы
Java Applets – полноценный GUI на Java
Java Fx – платформа, JavaFXScript
Adobe Flash – векторная графика + ActionScript
Adobe Flex – расширение Flash, XML интерфейс
MS SilverLight – аналог Adobe Flash
4. Возможности
- Доступ к файловой системе (ограниченный)
- Локальное хранилище данных
- Поддержка аудио и видео
- Поддержка сетевых соединений (сокеты)
- 2D / 3D графика
- Работа непосредственно с HTTP протоколом
- Работа с DOM
- Прямые и обратные вызовы JavaScript
- Регистрация своих протоколов
7. Достоинства
- Расширенный доступ к ресурсам
- Обеспечение безопасности, “песочница”
- Скорость работы
- Поставляются вместе со средой разработки
- Независимость от браузера
Недостатки
- Объем загружаемого кода может быть большим
- Отдельная технология → отдельный программист
- Переносимость плагина
- Как правило, плагин нужно загружать
8.
9. HTML5
- Почему не прижился XHTML?
- Не только язык разметки, это группа
технологий
- CSS3
- Реализуется непосредственно в браузере
- Может быть реализован частично
- Как браузеры обрабатывают неизвестные тэги?
- Часть функционала может быть эмулирована с
помощью JS (Modernizr.js, HTML5 Enabling)
- И уже работает! http://html5readiness.com/
- Совместим с HTML4
- DOCTYPE html
10. Разметка: новые тэги
<header> - выделяет шапку страницы
<footer> - выделяет подвал страницы
<section> - раздел сайта, логическая
группировка
<article> - “сущность”, предназначенная для
самостоятельного распространения
<nav> - блок навигационных ссылок, например
рубрикатор или пагинатор
<aside> - имеет косвенное отношение к
содержимому, реклама, перелинковка
<time datetime=”2012-05-15”>сегодня</time>
<hgroup><h1></h1><h2></h2><hgroup>
11. 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)
12. Методы рисования
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) – вывод текста
14. 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>
15. Видео контейнеры
Определяют формат файла, позволяют хранить в
одном файле видео и аудио дорожки
MPEG-4 (mp4, m4v)
FlashVideo (flv)
OGG (ogv)
WebM (только кодеки VP8 и Vorbis)
Audio Video Interactive (avi)
16. Видео и аудио кодеки
Непосредственно декодирование видео и аудио
потоков.
В Internet используются кодеки с потерей
качества.
Видео:
H.264 – основан на патенте, профили, Blu-ray
Theora – не связан патентами
VP8 – все патенты открыты, принадлежит Google
Аудио:
MP3 – запатентован, поддерживается всем
AAC – запатентован, профили, Apple, iTunes
Vorbis – не связан патентами
18. Геолокация
Обычный способ: REMOTE_ADDR → whois → регион
Еще варианты: подключение к беспроводной сети,
подключение к сотовой сети, GPS
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
positionDetected, detectionFailed,
{ enableHighAccuracy: false,
timeout: 5000, maximumAge: 60000 }
);
}
19. function positionDetected(position) {
position.lattitude; // в градусах
position.longitude; // в градусах
position.accuracy; // в метрах
}
function detectionFailed(error) {
if (error.code == 1) {
// пользователь отказался
}
}
Альтернативы: GoogleGears, Native API, geo.js
20. Локальное хранилище
Недостатки 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])
}
22. WebWorkers
// создаем тред
var worker = new Worker("worker.js");
// подписываемся на события
worker.onmessage = function(event) {
console.log(event.data);
}
// отправляем сообщение
worker.postMessage(33);
// и когда-нибудь закрываем его
// worker.close();
23. 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);
};
31. CSS Фреймворк
просто библиотека CSS стилей
Преимущества:
- кроссбраузерность
- может использовать не-верстальщик
- как правило более семантичная разметка
- скорость разработки
Подходит для:
- внутренние интерфейсы (админка)
- прототипы сайтов
- сайты-приложения, технические сайты
Примеры: 960 Grid, Blueprint, YAML, Bootstrap
32. Twitter Bootstrap
- Использует less.js
- Требует DOCTYPE html
- Включает:
12 колоночная сетка
layoutы страниц
стили для основных тэгов
компоненты: кнопки, меню, закладки, пагинатор
- Адаптируется под разные устройства:
телефоны
планшеты
Мониторы
36. 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 – дуги
37. Достоинства
- открытый текстовый формат
- векторная графика, масштабируемость
- интеграция с растровой графикой, CSS, JS
- является частью DOM → анимация и события
Недостатки
- размер файла, чуствителен к мелким деталям
- сложно отобразить только часть картинки
Поддержка
Chrome 3+, FF 1.5+, Opera 8+, IE 9+
Для IE <9 существует технология VML
