Flex 4 чи HTML 5?


The Presentation inside:

Slide 0

Flex 4 чи HTML 5? Андрій Данилюк Артем Карявка


Slide 1

Вам сорочку чи футболку? FLEX HTML


Slide 2

RIA (Rich Internet Application) Зазвичай це веб-додаток, що має всі функції, які користувач очікує від десктопних систем, — наприклад Google Spreadsheets в порівнянні з Microsoft Excel.


Slide 3

Flex Flex 4 2010


Slide 4

HTML HTML 1.0 HTML 2.0 HTML 3.2 HTML 4.0 HTML5 1991 1995 1997 XHTML 1.0 <!DOCTYPE HTML> <html> <head><title>HTML 5</title></head> <body>Hello World!</body> </html> 1999 HTML 4.1 2022? 2000


Slide 5

Поширення FLEX


Slide 6

Підтримка HTML 5 (Мультимедіа)


Slide 7

Підтримка HTML 5 (API)


Slide 8

Нові можливості Flex 4 Дизайн “на льоту”: підтримка нового фреймворку (Spark), який надає нову ступінь виразності, легкий у використанні за допомогою зручних інструментів. Продуктивність розробника: підвищення ефективності компілятора, нові можливості прив’язки даних. Нові стани (states): використовувати стани стало простіше і зрозуміліше.


Slide 9

Приклад нової архітектури <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"     layout="absolute" width="400" height="300">         <mx:states>         <mx:State name="State2">             <mx:SetProperty target="{button1}"                 name="label" value="Big"/>             <mx:SetProperty target="{button1}"                 name="width" value="200"/>             <mx:SetProperty target="{button1}"                 name="height" value="200"/>             <mx:SetEventHandler target="{button1}"                 name="click" handler="currentState=''"/>             <mx:AddChild relativeTo="{vbox1}"                 position="lastChild">                 <mx:Label text="State 2 Only"                     width="100%"                     textAlign="center"/>             </mx:AddChild>         </mx:State>     </mx:states>         <mx:VBox verticalCenter="0"             horizontalCenter="0"  id="vbox1">         <mx:Button label="Small"             click="currentState='State2'"             id="button1"/>          </mx:VBox> </mx:Application> <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"     xmlns:s="library://ns.adobe.com/flex/spark"     xmlns:mx="library://ns.adobe.com/flex/halo"     width="400" height="300">         <s:states>         <s:State name="State1"/>         <s:State name="State2"/>     </s:states>     <mx:VBox verticalCenter="0"         horizontalCenter="0" >             <s:Button label.State1="Small"             width.State2="200"             height.State2="200"             label.State2="BIG"             click.State1="currentState='State2'"             click.State2="currentState='State1'"/>                     <mx:Label includeIn="State2"             width="100%"             text="State 2 Only"             textAlign="center"/>                 </mx:VBox>     </s:Application>


Slide 10

Нові можливості HTML5: Елементи для сучасної семантичної розмітки сторінок (section, article, aside, header, footer) Викинуто застарілий непотріб, що сьогодні замінюється використанням СSS (basefont, big, center, font, s, strike, tt, u) Як і обіцяли, викинули фрейми (frame, frameset) Принципово нові елементи audio,video, meter, progress, time Потужні API: зручна робота з аудіо, відео, базами даних SQLite, підтримка Websockets, локальне збереження даних на клієнтській стороні та доступ до неї offline Нові властивості елементів вводу та верифікація введених даних Підтримка Drag&Drop Елемент Canvas, векторна 2D та 3D-графіка


Slide 11

Приклад нової розмітки HTML5 З новими теґами (section, article, aside, header, footer) розмітка сторінки відбувається більш логічно, а семантична направленість такої розмітки у майбутньому покращить пошукову оптимізацію


Slide 12

Користувацький інтерфейс (віджети)


Slide 13

Форми


Slide 14

Векторна графіка


Slide 15

Тривимірна графіка


Slide 16

Робота з Бітмап


Slide 17

Відео


Slide 18

Постійне з’єднання


Slide 19

Драг’н’Дроп


Slide 20

Файлова система


Slide 21

Інструменти розробника Flex HTML5 Flex Builder 3, Flash Builder 4, Eclipse, Intellij Idea DreamWeaver, HomeSite etc.


Slide 22

Інструменти тестування Unit Flex HTML5 JSUnit ASUnit Selenium, WebDriver, Watir Fluint? Integration


Slide 23

Сумісність з браузерами Flex HTML5 10, 9, 8, 7, 6, 5, …. 3, 2, .. 3, 2, .. 8, 7, 6, .. 4,3,2,1 .. ?


Slide 24

Adobe Integrated Runtime (AIR) Середовище для запуску додатків, що дозволяє використовати HTML/CSS, Ajax, Adobe Flash або Adobe Flex для перенесення RIA на десктопні ПК.


Slide 25

<application xmlns="http://ns.adobe.com/air/application/1.5"> <id>test.html.HelloWorld</id> <version>0.1</version> <filename>HelloWorld</filename> <initialWindow> <content>HelloWorld.html</content> <visible>true</visible> <width>400</width> <height>200</height> </initialWindow> </application> <html> <head> <title>Hello, World!</title> </head> <body> <b>Hello, World!</b> </body> </html> AIR: Hello, World!


Slide 26

Переваги Поширеність в світі Кросплатформеність Однаковий вигляд в різних браузерах Розвинуті бібліотеки компонентів та гнучкість (flexible) інтерфейсів Потужні засоби розробки (IDE) Доступна документація (довідники, підручники) Справді існує ? Native-інтеграція у браузери без додаткових плагінів “Легкість” використання для мобільних пристроїв Швидке та інтуїтивне засвоєння Flex HTML5


Slide 27

Недоліки Велике навантаження на процесор Неповноцінна підтримка на *nix платформах Погана пошукова індексація Не затверджений стандарт Немає єдиного кодеку для відео Неоднакова підтримка тегів та API різними браузерами Flex HTML5


Slide 28

Дякуємо за Увагу! Артем Карявка http://artem.kariavka.info [email protected] @kariavka Андрій Данилюк http://dnlk.net [email protected] @stdbkr


×

HTML:





Ссылка: