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

271 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
271
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Rich Internet Applications Смаль Дмитрий smal@corp.mail.ru
  2. 2. Что плохо в HTML/CSS/JS ? 1) Плохая поддержка мультимедиа – Векторная графика – Поддержки аудио и видео – Графика с помощью JS 2) Ограничено использование ресурсов клиента – Хранение данных – Фоновые вычисления – Сетевые соединения 3) Множество мелких недочетов (inputs и т.д.) 4) Трудно создать богатый GUI
  3. 3. Платформы Java Applets – полноценный GUI на Java Java Fx – платформа, JavaFXScript Adobe Flash – векторная графика + ActionScript Adobe Flex – расширение Flash, XML интерфейс MS SilverLight – аналог Adobe Flash
  4. 4. Возможности - Доступ к файловой системе (ограниченный) - Локальное хранилище данных - Поддержка аудио и видео - Поддержка сетевых соединений (сокеты) - 2D / 3D графика - Работа непосредственно с HTTP протоколом - Работа с DOM - Прямые и обратные вызовы JavaScript - Регистрация своих протоколов
  5. 5. Как подключить на страницу ? <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>
  6. 6. <OBJECT width="200" height="200" align="baseline" classid="clsid:CAFEEFAC-0014-0002-0000- ABCDEFFEDCBA" codebase="http://java.sun.com/products/plugin/autod l/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>
  7. 7. Достоинства - Расширенный доступ к ресурсам - Обеспечение безопасности, “песочница” - Скорость работы - Поставляются вместе со средой разработки - Независимость от браузера Недостатки - Объем загружаемого кода может быть большим - Отдельная технология → отдельный программист - Переносимость плагина - Как правило, плагин нужно загружать
  8. 8. HTML5 - Почему не прижился XHTML? - Не только язык разметки, это группа технологий - CSS3 - Реализуется непосредственно в браузере - Может быть реализован частично - Как браузеры обрабатывают неизвестные тэги? - Часть функционала может быть эмулирована с помощью JS (Modernizr.js, HTML5 Enabling) - И уже работает! http://html5readiness.com/ - Совместим с HTML4 - DOCTYPE html
  9. 9. Разметка: новые тэги <header> - выделяет шапку страницы <footer> - выделяет подвал страницы <section> - раздел сайта, логическая группировка <article> - “сущность”, предназначенная для самостоятельного распространения <nav> - блок навигационных ссылок, например рубрикатор или пагинатор <aside> - имеет косвенное отношение к содержимому, реклама, перелинковка <time datetime=”2012-05-15”>сегодня</time> <hgroup><h1></h1><h2></h2><hgroup>
  10. 10. 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)
  11. 11. Методы рисования 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) – вывод текста
  12. 12. Градиенты и изображения 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); };
  13. 13. 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>
  14. 14. Видео контейнеры Определяют формат файла, позволяют хранить в одном файле видео и аудио дорожки MPEG-4 (mp4, m4v) FlashVideo (flv) OGG (ogv) WebM (только кодеки VP8 и Vorbis) Audio Video Interactive (avi)
  15. 15. Видео и аудио кодеки Непосредственно декодирование видео и аудио потоков. В Internet используются кодеки с потерей качества. Видео: H.264 – основан на патенте, профили, Blu-ray Theora – не связан патентами VP8 – все патенты открыты, принадлежит Google Аудио: MP3 – запатентован, поддерживается всем AAC – запатентован, профили, Apple, iTunes Vorbis – не связан патентами
  16. 16. Поддержка браузерами 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 плееру
  17. 17. Геолокация Обычный способ: REMOTE_ADDR → whois → регион Еще варианты: подключение к беспроводной сети, подключение к сотовой сети, GPS if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( positionDetected, detectionFailed, { enableHighAccuracy: false, timeout: 5000, maximumAge: 60000 } ); }
  18. 18. function positionDetected(position) { position.lattitude; // в градусах position.longitude; // в градусах position.accuracy; // в метрах } function detectionFailed(error) { if (error.code == 1) { // пользователь отказался } } Альтернативы: GoogleGears, Native API, geo.js
  19. 19. Локальное хранилище Недостатки 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]) }
  20. 20. Фоновые вычисления Обычный способ: setInterval(function() { // do some calculations // post events }, 100); Недостатки: - вычисления в 1 поток - блокирует работу UI - сложность event-driven разработки
  21. 21. WebWorkers // создаем тред var worker = new Worker("worker.js"); // подписываемся на события worker.onmessage = function(event) { console.log(event.data); } // отправляем сообщение worker.postMessage(33); // и когда-нибудь закрываем его // worker.close();
  22. 22. 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); };
  23. 23. Offline приложения <html manifest="/cache.manifest"> MIME-тип: text/cache-manifest CACHE MANIFEST FALLBACK: / /offline.html CACHE: /style.css /script.js /index.html NETWORK: /counter.cgi
  24. 24. Улучшения форм <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> - отключает встроенную валидацию
  25. 25. SASS - CSS препроцессор ruby sass input.scss output.css
  26. 26. 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; }
  27. 27. 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; }
  28. 28. 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); }
  29. 29. #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; }
  30. 30. CSS Фреймворк просто библиотека CSS стилей Преимущества: - кроссбраузерность - может использовать не-верстальщик - как правило более семантичная разметка - скорость разработки Подходит для: - внутренние интерфейсы (админка) - прототипы сайтов - сайты-приложения, технические сайты Примеры: 960 Grid, Blueprint, YAML, Bootstrap
  31. 31. Twitter Bootstrap - Использует less.js - Требует DOCTYPE html - Включает:  12 колоночная сетка  layoutы страниц  стили для основных тэгов  компоненты: кнопки, меню, закладки, пагинатор - Адаптируется под разные устройства:  телефоны  планшеты  Мониторы
  32. 32. <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>
  33. 33. <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>
  34. 34. 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>
  35. 35. 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 – дуги
  36. 36. Достоинства - открытый текстовый формат - векторная графика, масштабируемость - интеграция с растровой графикой, CSS, JS - является частью DOM → анимация и события Недостатки - размер файла, чуствителен к мелким деталям - сложно отобразить только часть картинки Поддержка Chrome 3+, FF 1.5+, Opera 8+, IE 9+ Для IE <9 существует технология VML
  37. 37. Raphael.js

×