РАЗРАБОТКА НАСЫЩЕННЫХ ВЕБ- ИНТЕРФЕЙСОВ Подготовил: студент гр. 9-19-13, Сергеева Н.М., ИжГТУ 2011. - презентация

1 РАЗРАБОТКА НАСЫЩЕННЫХ ВЕБ- ИНТЕРФЕЙСОВ Подготовил: студент гр , Сергеева Н.М., ИжГТУ 2011

2 Программные системы в среде WEB Отличия веб-приложений от «настольных» клиент-серверных приложений: 1) отсутствие состояния 2) зависимость от браузера (различные «движки») 3) распределенность современных веб-приложения 4) асинхронный режим взаимодействия клиентской и серверной частей приложения 5) передача в раюочем цикле не только данных, но и программных компонент

3 Программные системы в среде WEB Веб-приложение на клиенте – специфическая, динамически изменяющаяся, полу- детерминированная программная структура, трансформация которой ведется в условиях, когда мы точно знаем состояние структуры до и после трансформации, однако не можем точно предсказать, когда эта трансформация завершится.

4 «Веб нового поколения» (Web 2.0). Поддержка полноценного, насыщенного (rich) пользовательского интерфейса – функционального, интерактивного, удобного и эффективного.

5 Model-View-Controller (MVC) 3 уровня архитектуры (MVC-триада): 1) Model - инкапсулирующий представление данных и реализацию бизнес-логики приложения 2) View - определяющий правила формирования внешних форм, отображающих состояние приложения на экране 3) Controller - отвечающий за преобразование событий пользовательского интерфейса (нажатие кнопок клавиатуры, мыши и т.п.) в вызовы операций бизнес логики

6 MVC в приложении к WEB Опосредованность (mediated interaction) Статусность (statefulness)

7 Опосредованность В ходе своего взаимодействия ни одна из компонент не должна получать или хранить прямые ссылки на объекты (атрибуты, методы и т.п.) других компонент. Нет прямых ссылок между документами, представляемыми в разных окнах (относительно многооконных интерфейсов)

8 Статусность Механизм взаимодействия компонент должен подчиняться более сложным правилам диспетчеризации событий, чем простая передача сообщений между модулями. Механизм диспетчеризации должен обладать состояниями, в которых аккумулируется история взаимодействия компонент.

9 MVC Frameworks – Symfony

10 Object-relational mapping (ORM) Объектно-реляционное отображение) технология программирования, которая связывает базы данных с концепциями объектно-ориентированных языков программирования, создавая «виртуальную объектную базу данных». Наиболее популярные PHP ORM: Propel 1.6 Doctrine 2 Под.NET LINQ Nhibernate ORM

11 Cascading Style Sheets (CSS3) CSS (Cascading Style Sheets каскадные таблицы стилей) формальный язык описания внешнего вида документа, написанного с использованием языка разметки (html, xhtml, xml(svg, xul)).

12 Подключение CSS – вариант 1 … …

13 Подключение CSS – вариант url(style.css);

14 Подключение CSS – вариант body { color: red; }

15 Построение правила CSS селектор, селектор { свойство: значение; } #left_container p, #top_menu li{ width: 135px; padding: px 10px; }

16 Возможности CSS3: Границы Закругленные углы.border_rounded { background-color: #ddccb5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #897048; padding: 10px; width: 310px; }

17 Возможности CSS3: Границы Градиентные границы.border_gradient { border: 8px solid #000; -moz-border-bottom-colors: # # #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; -moz-border-top-colors: # # #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; -moz-border-left-colors: # # #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; -moz-border-right-colors: # # #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; padding: 5px 5px 5px 15px; width: 300px; }

18 Возможности CSS3: Границы Тени.border_shadow { -webkit-box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px; width: 300px; }

19 Возможности CSS3: Границы Изображения на границах.border_image { -webkit-border-image: url(border.png) round round; }

20 Возможности CSS3: Текст Тень.text_shadow { color: #666666; background-color: #ссс; text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070; }

21 Возможности CSS3: Текст Использование своих { font-family: 'Имя вашего шрифта'; src: url(' }

22 Возможности CSS3: Пользовательский интерфейс Растягивание блоков.ui_resizable { padding: 20px; border: 1px solid; resize: both; //или inline overflow: auto; }

23 Возможности CSS3: Пользовательский интерфейс Выделение.ui_outline { width: 150px; padding: 10px; height: 70px; border: 2px solid black; outline: 2px solid #897048; outline-offset: 15px; }

24 Возможности CSS3: Пользовательский интерфейс Мультиколоночность в CSS3 Cвойства, использующиеся для мультиколоночности: column-count column-width column-gap column-rule.multiplecolumns { -moz-column-width: 130px; -webkit-column-width: 130px; -moz-column-gap: 20px; -webkit-column-gap: 20px; -moz-column-rule: 1px solid #ddccb5; -webkit-column-rule: 1px solid #ddccb5; }

25 Возможности CSS3: Пользовательский интерфейс Объединение колонок h2 { column-span: all; }

26 Возможности CSS3: Изображения Эффект окружности.circle.image-wrap { -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em; }

27 Возможности CSS3: Изображения Рельеф.embossed.image-wrap { -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3); -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5),inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3); box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }

28 Возможности CSS3: Изображения Эффект отраженияЭффект глянца

29 Возможности CSS3: Изображения При наведении мыши происходит подсветка изображения и изменение его формы до окружности. Эффект подсветки создается благодаря свойству box-shadow. Используя свойство box-shadow можно делать эффект врезанного в плоскость изображения. Морфинг и подсветкаВрезанный стиль

30 Библиотеки JavaScript Сборники классов и/или функций на языке JavaScript. 1. jQuery (jQuery UI) 2. MooTools 3. Prototype 4. Yahoo! UI Library

31 jQuery UI Виды взаимодействий: Draggable Предоставляет элементу возможность быть перемещенным с помощью мыши Droppable Контролирует где перетаскиваемый элемент может быть брошен Resizable Предоставляет возможность динамически изменять размеры элемента с помощью мыши Selectable Предоставляет возможность выделять один или несколько элементов пользовательского интерфейса из группы Sortable Представляет возможность сортировки для группы элементов

32 jQuery UI Эффекты: Color Animation анимирует изменение цвета компонента Toggle Class, Add Class, Remove Class, Switch Class анимируют изменение набора класса стилей компонента Effect множество эффектов связанных с появлением и исчезновением компонентов интерфейса Toggle функция переключения между режимами видимости компонентов с использованием эффектов Hide функция исчезновения компонента с использованием эффектов Show функция появления компонента с использованием эффектов

33 jQuery UI Виджеты: Accordion виджет «Аккордеон» Autocomplete Поле ввода с автодополнением Button улучшенная кнопка, может также быть флажком (check box) или радио-кнопкой (radio button); все виды кнопки могут располагаться на панели инструментов (toolbar) Datepicker виджет для выбора даты или диапазона дат Dialog диалоговое окно, которое может иметь любое содержимое Progressbar полоса прогресса Slider слайдер Tabs вкладки

34 jQuery AJAX Query(..).load $(document).ready(function(){ $('#example-1').click(function(){ $(this).load('ajax/example.html'); }) });

35 jQuery AJAX jQuery.ajax $.ajax({ url: '/ajax/example.html', dataType : "json", success: function (data, textStatus) { $.each(data, function(i, val) { /*... */ }); } });

36 jQuery AJAX jQuery.get, jQuery.post $(document).ready(function(){ $('#example-3').click(function(){ $.post('ajax/example.xml', {}, function(xml){ $('#example-3').html(''); $(xml).find('note').each(function(){ $('#example-3').append('To: ' + $(this).find('to').text() + ' ').append('From: ' + $(this).find('from').text() + ' ').append(' ' + $(this).find('heading').text() + ' ').append( $(this).find('body').text() + ' '); }); }, 'xml'); }) });

37 jQuery AJAX jQuery.getScript $ (document).ready(function(){ $('#example-5').click(function(){ $.getScript('ajax/example.js', function(){ testAjax(); }); }) }); Файл example.js: function testAjax() { $('#example-5').html('Test completed'); }