Your SlideShare is downloading. ×
0
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk

1,318

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,318
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
39
Comments
0
Likes
1
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. Эффективная разработка веб-интерфейсовс Ample SDK<br />
  • 2. 1.1 О каких веб-интерфейсах идет речь?<br />
  • 3. 1.2 JavaScript Библиотеки и Фреймворки<br /> Библиотеки (для веб-сайтов)<br />prototype.js, Mootools, Scriptaculous, jQuery...<br /> Пост-библиотеки / Пре-фреймворки<br />dojo, Qooxdoo, ExtJS, jQuery-UI, YUI, Google Closure...<br /> Фреймворки (для приложений)<br />Ample SDK, Backbase 4, Bindows, Cappuccino, Ajax.org...<br />
  • 4. 1.3 Проблемы нефреймворков<br /> Проприетарный API<br /> Интерфейс «программируется» на JS+HTML<br /> Слабая поддержка цветовых схем компонентов<br /> Код приложения с ростом сложности быстро становится трудносопровождаемым<br />
  • 5. 1.4 Когда нужен фреймворк?<br /> Интерфейс приложения содержит много типовых элементов взаимодействия<br /> Разрабатывается несколько приложений<br /> Требуется кросс-браузерность (IE до 9, FF etc.)<br /> Уровень абстракции браузера (HTML) недостаточен<br />
  • 6. 2. Эксперимент «Ample SDK»<br />Ample SDK - это кросс-браузерный фреймворк для создания интерфейса пользователя в веб-браузере с использованием стандартных технологий и API.<br />Архитектура:<br /> Ядро (DOM, менеджеры UI, Extensibility API)<br /> Языки разметки интерфейса пользователя (SVG...)<br />
  • 7. 2.1 Модель программирования<br />В сущности, Ample SDK есть веб-браузер написанный на JavaScript, поэтому модель программирования приложений идентична:<br /> Разметка интерфейса на XML (SVG, XUL, XHTML..)<br /> Стилизация интерфейса на CSS (CSS3-UI, CSS3-NS...)<br /> Логика интерфейса на JavaScript (DOM Level 3 APIs...)<br />
  • 8. 3. Разметка интерфейса на XML<br /> Преимущества:<br /> Стандартная технология разметки<br /> Четкое отделение разметки интерфейса от стилизации и логики<br /> XML легко читается<br /> Подсказки кода в любом IDE<br />
  • 9. 3.1 XML островки в HTML (Ample SDK)<br /><script type="application/ample+xml"><br /> <xul:menubar xmlns:xul="http://...only.xul"><br /> <xul:menu label="Файл"/><br /> <xul:menu label="Правка"/><br /> <xul:menu label="Вид"/><br /> </xul:menubar><br /></script><br />
  • 10. 3.2 XML UI Технологии<br /> XHTML (eXtensible Hyper Text Markup Language, W3C)<br /> XUL (XML User interface Language, Mozilla)<br /> SVG 1.1 (Scalable Vector Graphics, W3C)<br /> XHTML 5 (в разработке)<br /> Charts (в разработке)<br /> XForms 1.1 (запланировано)<br /> ваша собственная?<br />
  • 11. 4. Стилизация интерфейса на CSS<br /> Преимущества:<br /> Стандартная технология стилизации<br /> Отделение стиля от разметки интерфейса и логики<br /> Стилизация интерфейса как на уровне компонентов так и на уровне всего приложения<br />
  • 12. 4.1 CSS островки в HTML (Ample SDK)<br /><style type="text/ample+css"><br /> @namespace xul url(http://...only.xul);<br /> xul|menu:hover {<br /> font-variant: italic;<br /> }<br /> xul|datepicker::value {<br /> background-color: red;<br /> }<br /></style><br />
  • 13. 4.2 CSS Технологии<br /> CSS3 Namespaces<br /> @namespace xul url(http://...only.xul);<br /> xul|menuitem {font: normal 1em Verdana}<br /> CSS3 UI<br /> xul|datepicker::input {background-color:pink}<br /> Дополнительные псевдо-классы (:drag, :resize..)<br /> .mytarget:drop {border: dashed 1px red}<br />
  • 14. 5. Логика приложения на JS, DOM API<br /> Преимущества:<br /> Стандартные технологии и API (W3C)<br /> Минимальный порог начала использования<br /> Возможность пере-использования написанного кода в браузерах нативно в будущем<br /> Разделение логики приложения и логики компонентов<br />
  • 15. 5.1 JavaScript островки в HTML<br /><script type="text/javascript"><br />ample.addEventListener("load", function(oEvent) {<br /> var oNode = this.querySelector("svg|circle");<br /> oNode.setAttribute("r", 10);<br />}, false);<br /></script><br />"ample" — обьект, похожий на объект "document" веб-браузера, предоставляющий доступ к объектной модели документа Ample SDK, составленной из островков XML<br />
  • 16. 5.2 JavaScript технологии Ample SDK<br /> DOM Core (Level 2/3)<br />Для создания и модификации документа<br /> DOM Events (Level 3)<br />Для подписки и реагирования на события в документе<br /> Selectors API<br />Для навигации по документу (поиска элементов)<br />
  • 17. 5.3 Менеджеры UI<br /> Drag&Drop (e:dragstart, e:dragenter, e:dragleave, e:drag, e:drop s:dragend, p:$draggable, p:$droppable)<br /> Resize (e:resizestart, e:resize, e:resizeend, p:$resizeable)<br /> History (e:hashchange, m:$bookmark())<br /> Selection (p:$selectable)<br /> Capture (e:capture, e:losecapture, m:setCapture, m:releaseCapture)<br />
  • 18. 5.4 Другие API и технологии<br />JavaScript APIs (обьекты):<br /> XMLHttpRequest, JSON,<br /> DOMParser, XMLSerializer, XSLTProcessor<br />XML APIs (mark-up):<br /> SMIL 3.0 (избранные модули), XInclude 1.0,<br /> XML Schema 1.1 (модуль типов данных)<br />
  • 19. 6. Возможности расширения платформы<br /> Создание своих компонентов (XML языков и диалектов)<br />Примеры: Язык определения графиков, библиотека компонентов интерфейса мобильного приложения<br /> Создание менеджеров интерфейса<br />Примеры: Менеджер жестов мыши, менеджер окон<br />
  • 20. 7. Почему стоит посмотреть Ample SDK?<br /> Знакомая модель программирования (W3C)<br /> Стандартные API (как в современном веб-браузере)<br /> Удобные «строительные элементы»<br /> Быстрый рендеринг<br /> Позволяет использовать SVG в Internet Explorer с 5.5<br /> Позволяет использовать XUL во всех браузерах<br /> Позволяет определять свои языки разметки<br />
  • 21. 8. Ссылки<br />Ample SDK<br /> Сайт проекта: http://www.amplesdk.com<br /> Исходники: http://github.com/clientside/amplesdk<br /> Обсуждения: http://groups.google.com/amplesdk<br />Контакты докладчика<br /> E-mail: sergey@ilinsky.com<br /> Twitter: http://twitter.com/ilinsky<br />

×