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

  • 72 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
72
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Rich Internet Applications Смаль Дмитрий smal@corp.mail.ru
  • 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 - Регистрация своих протоколов
  • 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. <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. Достоинства - Расширенный доступ к ресурсам - Обеспечение безопасности, “песочница” - Скорость работы - Поставляются вместе со средой разработки - Независимость от браузера Недостатки - Объем загружаемого кода может быть большим - Отдельная технология → отдельный программист - Переносимость плагина - Как правило, плагин нужно загружать
  • 8. HTML5 - Почему не прижился XHTML? - Не только язык разметки, это группа технологий - CSS3 - Реализуется непосредственно в браузере - Может быть реализован частично - Как браузеры обрабатывают неизвестные тэги? - Часть функционала может быть эмулирована с помощью JS (Modernizr.js, HTML5 Enabling) - И уже работает! http://html5readiness.com/ - Совместим с HTML4 - DOCTYPE html
  • 9. Разметка: новые тэги <header> - выделяет шапку страницы <footer> - выделяет подвал страницы <section> - раздел сайта, логическая группировка <article> - “сущность”, предназначенная для самостоятельного распространения <nav> - блок навигационных ссылок, например рубрикатор или пагинатор <aside> - имеет косвенное отношение к содержимому, реклама, перелинковка <time datetime=”2012-05-15”>сегодня</time> <hgroup><h1></h1><h2></h2><hgroup>
  • 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. Методы рисования 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. Градиенты и изображения 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. 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. Видео контейнеры Определяют формат файла, позволяют хранить в одном файле видео и аудио дорожки MPEG-4 (mp4, m4v) FlashVideo (flv) OGG (ogv) WebM (только кодеки VP8 и Vorbis) Audio Video Interactive (avi)
  • 15. Видео и аудио кодеки Непосредственно декодирование видео и аудио потоков. В Internet используются кодеки с потерей качества. Видео: H.264 – основан на патенте, профили, Blu-ray Theora – не связан патентами VP8 – все патенты открыты, принадлежит Google Аудио: MP3 – запатентован, поддерживается всем AAC – запатентован, профили, Apple, iTunes Vorbis – не связан патентами
  • 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. Геолокация Обычный способ: REMOTE_ADDR → whois → регион Еще варианты: подключение к беспроводной сети, подключение к сотовой сети, GPS if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( positionDetected, detectionFailed, { enableHighAccuracy: false, timeout: 5000, maximumAge: 60000 } ); }
  • 18. function positionDetected(position) { position.lattitude; // в градусах position.longitude; // в градусах position.accuracy; // в метрах } function detectionFailed(error) { if (error.code == 1) { // пользователь отказался } } Альтернативы: GoogleGears, Native API, geo.js
  • 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. Фоновые вычисления Обычный способ: setInterval(function() { // do some calculations // post events }, 100); Недостатки: - вычисления в 1 поток - блокирует работу UI - сложность event-driven разработки
  • 21. WebWorkers // создаем тред var worker = new Worker("worker.js"); // подписываемся на события worker.onmessage = function(event) { console.log(event.data); } // отправляем сообщение worker.postMessage(33); // и когда-нибудь закрываем его // worker.close();
  • 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. 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. Улучшения форм <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. SASS - CSS препроцессор ruby sass input.scss output.css
  • 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. 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. 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. #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. CSS Фреймворк просто библиотека CSS стилей Преимущества: - кроссбраузерность - может использовать не-верстальщик - как правило более семантичная разметка - скорость разработки Подходит для: - внутренние интерфейсы (админка) - прототипы сайтов - сайты-приложения, технические сайты Примеры: 960 Grid, Blueprint, YAML, Bootstrap
  • 31. Twitter Bootstrap - Использует less.js - Требует DOCTYPE html - Включает:  12 колоночная сетка  layoutы страниц  стили для основных тэгов  компоненты: кнопки, меню, закладки, пагинатор - Адаптируется под разные устройства:  телефоны  планшеты  Мониторы
  • 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. <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. 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. 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. Достоинства - открытый текстовый формат - векторная графика, масштабируемость - интеграция с растровой графикой, CSS, JS - является частью DOM → анимация и события Недостатки - размер файла, чуствителен к мелким деталям - сложно отобразить только часть картинки Поддержка Chrome 3+, FF 1.5+, Opera 8+, IE 9+ Для IE <9 существует технология VML
  • 37. Raphael.js