Web весна 2013 лекция 10

310
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
310
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web весна 2013 лекция 10

  1. 1. Rich Internet Applications Дмитрий Смаль
  2. 2. Что плохо в HTML / CSS / JS ?
  3. 3. Что плохо ? ● Плохая поддержка мультимедиа – Векторная графика – Поддержки аудио и видео – Графика с помощью JS ● Ограничено использование ресурсов клиента – Хранение данных – Фоновые вычисления – Сетевые соединения ● Множество мелких недочетов (inputs и т.д.)
  4. 4. Платформы Java Applets – полноценный GUI на Java Java Fx – платформа, JavaFXScript Adobe Flash – векторная графика + ActionScript Adobe Flex – расширение Flash, XML интерфейс MS SilverLight – аналог Adobe Flash
  5. 5. Возможности ● Доступ к файловой системе (ограниченный) ● Локальное хранилище данных ● Поддержка аудио и видео ● Поддержка сетевых соединений (сокеты) ● 2D / 3D графика ● Работа непосредственно с HTTP протоколом ● Работа с DOM ● Прямые и обратные вызовы JavaScript ● Регистрация своих протоколов
  6. 6. Как подключить ? Устревший способ: <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>
  7. 7. Java Applets <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-javaapplet;jpi-version=1.4.2"> <PARAM name="model" value="models/HyaluronicAcid.xyz"> <PARAM name="scriptable" value="true"> Java Applets are not supported !!! </OBJECT>
  8. 8. Достоинства платформ ● Расширенный доступ к ресурсам ● Обеспечение безопасности, “песочница” ● Скорость работы ● Поставляются вместе со средой разработки ● Независимость от браузера
  9. 9. Недостатки платформ ● Объем загружаемого кода может быть большим ● Отдельная технология → отдельный программист ● Переносимость плагина ● Как правило, плагин нужно загружать
  10. 10. HTML 5 ● Почему не прижился XHTML? HTML5 - не только язык разметки, это группа технологий (JS API, CSS 3) ● ● Совместим с HTML4 ● DOCTYPE html ● Реализуется непосредственно в браузере ● Может быть реализован частично Часть функционала может быть эмулирована с помощью JS (Modernizr.js, HTML5 Enabling) ● ● И уже работает! http://html5readiness.com/
  11. 11. Совместимость ... Graceful Degradation vs. Progressive Enhancement
  12. 12. Разметка: новые тэги <header> - выделяет шапку страницы <footer> - выделяет подвал страницы <section> - раздел сайта, логическая группировка <article> - “сущность”, предназначенная для самостоятельного распространения <nav> - блок навигационных ссылок, например рубрикатор или пагинатор <aside> - имеет косвенное отношение к содержимому, реклама, перелинковка
  13. 13. Разметка: новые тэги <canvas> - для рисования JavaScript ом <audio> - для управления аудио <video> - вывод видео без flash <hgroup><h1></h1><h2></h2></hgroup> <time datetime=”2012-05-15”>сегодня</time>
  14. 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. 15. Видеоконтейнеры Определяют формат файла, позволяют хранить в одном файле видео и аудио дорожки ● MPEG-4 (mp4, m4v) ● FlashVideo (flv) ● OGG (ogv) ● WebM (только кодеки VP8 и Vorbis) ● Audio Video Interactive (avi)
  16. 16. Видео кодеки Непосредственно декодирование видео и аудио потоков. В Internet используются кодеки с потерей качества. Видео: ● H.264 – основан на патенте, профили, Blu-ray ● Theora – не связан патентами ● VP8 – все патенты открыты, принадлежит Google
  17. 17. Аудио кодеки Аудио: ● MP3 – запатентован, поддерживается всем ● AAC – запатентован, профили, Apple, iTunes ● Vorbis – не связан патентами
  18. 18. Поддержка браузерами 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(*)
  19. 19. Совместимость Для работы со всеми браузерами нужно хранить несколько копий видеоролика в разных форматах: WebM (VP8 + Vorbis) MP4 (H.264 + AAC low) OGG (Theora + Vorbis) Откат к Flash плееру
  20. 20. JavaScript API
  21. 21. Canvas: рисование <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) Поддержка: IE 7+, FF 3+, Chrome 3+, Opera 10+
  22. 22. Методы рисования 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) – вывод текста
  23. 23. Градиенты и изображения 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); };
  24. 24. Геолокация Обычный способ: REMOTE_ADDR → whois → регион Еще варианты: подключение к беспроводной сети, подключение к сотовой сети, GPS if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( positionDetected, detectionFailed, { enableHighAccuracy: false, timeout: 5000, maximumAge: 60000 } ); }
  25. 25. Геолокация function positionDetected(position) { position.lattitude; // в градусах position.longitude; // в градусах position.accuracy; // в метрах } function detectionFailed(error) { if (error.code == 1) { // пользователь отказался } } Альтернативы: GoogleGears, Native API, geo.js
  26. 26. Локальное хранилище Недостатки 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]) }
  27. 27. Фоновые вычисления Обычный способ: setInterval, setTimeout Недостатки: ● вычисления в 1 поток ● блокирует работу UI ● сложность event-driven разработки setInterval(function() { // do some calculations // post events }, 100);
  28. 28. WebWorkers // создаем тред var worker = new Worker("worker.js"); // подписываемся на события worker.onmessage = function(event) { console.log(event.data); } // отправляем сообщение worker.postMessage(33); // и когда-нибудь закрываем его worker.close();
  29. 29. 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); };
  30. 30. Offline приложения <html manifest="/cache.manifest"> MIME-тип: text/cache-manifest CACHE MANIFEST FALLBACK: / /offline.html CACHE: /style.css /script.js /index.html NETWORK: /counter.cgi
  31. 31. Улучшение форм <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> - отключает встроенную валидацию
  32. 32. SASS – CSS препроцессор
  33. 33. 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; }
  34. 34. 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; }
  35. 35. 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); }
  36. 36. CSS фреймворки
  37. 37. CSS фреймворк Преимущества: ● кроссбраузерность ● может использовать не-верстальщик ● как правило более семантичная разметка ● скорость разработки Подходит для: ● внутренние интерфейсы (админка) ● прототипы сайтов ● сайты-приложения, технические сайты
  38. 38. Twitter Bootstrap ● Использует less.js ● Требует DOCTYPE html Включает: 12 колоночная сетка, layoutы страниц, стили для основных тэгов ● ● Компоненты: кнопки, меню, закладки, пагинатор Адаптируется под разные устройства: телефоны, планшеты, мониторы ● ● Альтернативы: 960 Grid, Blueprint, YAML
  39. 39. Twitter Bootstrap <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>
  40. 40. SVG
  41. 41. SVG <?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>
  42. 42. 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 – дуги
  43. 43. SVG: Достоинства ● открытый текстовый формат ● векторная графика, масштабируемость ● интеграция с растровой графикой, CSS, JS ● является частью DOM → анимация и события
  44. 44. SVG Достоинства: ● открытый текстовый формат ● векторная графика, масштабируемость ● интеграция с растровой графикой, CSS, JS ● является частью DOM → анимация и события Недостатки: ● размер файла, чуствителен к мелким деталям ● сложно отобразить только часть картинки
  45. 45. SVG: Поддержка Chrome 3+, FF 1.5+, Opera 8+, IE 9+ Для IE <9 существует технология VML Raphael.js
  46. 46. Спасибо за внимание Дмитрий Смаль, smal@corp.mail.ru
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×