'

Flex 4 чи HTML 5?

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

Flex Flex 4 2010


Слайд 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


Слайд 5

Поширення FLEX


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 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>


Слайд 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-графіка


Слайд 11

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


Слайд 12

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


Слайд 13

Форми


Слайд 14

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


Слайд 15

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


Слайд 16

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


Слайд 17

Відео


Слайд 18

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


Слайд 19

Драг’н’Дроп


Слайд 20

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


Слайд 21

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


Слайд 22

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


Слайд 23

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


Слайд 24

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


Слайд 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!


Слайд 26

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


Слайд 27

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


Слайд 28

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


×

HTML:





Ссылка: