flex 4 чи html 5
TRANSCRIPT
![Page 1: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/1.jpg)
FLEX 4 ЧИ HTML 5?Андрій ДанилюкАртем Карявка
![Page 2: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/2.jpg)
ВАМ СОРОЧКУ ЧИ ФУТБОЛКУ?
FLEX HTML
![Page 3: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/3.jpg)
RIA (RICH INTERNET APPLICATION)
Зазвичай це вебдодаток, що має всі функції, які користувач очікує від десктопних систем, — наприклад Google Spreadsheets в порівнянні з Microsoft Excel.
![Page 4: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/4.jpg)
FLEX
Action
Script
3.0
Flash P
layer
Action
Script
1.0
Action
Script
2.0
Flex 1.
0
1997 2000 2003 2004
Flex 3.
0
2006
Flex 2.
0
Flex 4
2007
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Panel title="My Application" >
<mx:Label text="Hello World!"/>
</mx:Panel>
</mx:Application>
Flex 4
2010
![Page 5: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/5.jpg)
HTML
HTML 1.
0
HTML 2.
0
HTML 3.
2
HTML 4.
0
HTML51991 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
![Page 6: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/6.jpg)
ПОШИРЕННЯ FLEX
![Page 7: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/7.jpg)
ПІДТРИМКА HTML 5 (МУЛЬТИМЕДІА)
Відео
Theora Так Так Так Ні
H.264 Так Ні Ні Ні
Аудіо
Vorbis Так Так Так Ні
MP3 Так Ні Ні Ні
WAV Ні Так Так Ні
AAC Так Ні Ні Ні
![Page 8: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/8.jpg)
ПІДТРИМКА HTML 5 (API)
Local Storage 3.0 3.5 10.5 8.0
Web Workers 3.0 3.5 Ні Ні
Web Database 4.0 Ні 10.5 Ні
Geolocation API 5.0 3.5 Ні Ні
Web Sockets API 4.0 Ні Ні Ні
SVG 1.1 1.0 Так 9.5 9.0
MathML Ні 1.5 Ні Ні
WebGL 5.0 3.7 Ні Ні
File API 5.0 3.6 Ні Ні
![Page 9: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/9.jpg)
НОВІ МОЖЛИВОСТІ FLEX 4
Дизайн “на льоту”: підтримка нового фреймворку (Spark), який надає нову ступінь виразності, легкий у використанні за допомогою зручних інструментів.
Продуктивність розробника: підвищення ефективності компілятора, нові можливості прив’язки даних.
Нові стани (states): використовувати стани стало простіше і зрозуміліше.
![Page 10: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/10.jpg)
ПРИКЛАД НОВОЇ АРХІТЕКТУРИ<?xml version="1.0" encoding="utf8"?><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="utf8"?><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>
![Page 11: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/11.jpg)
НОВІ МОЖЛИВОСТІ 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графіка
![Page 12: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/12.jpg)
ПРИКЛАД НОВОЇ РОЗМІТКИ HTML5
З новими теґами (section, article, aside, header, footer) розмітка сторінки відбувається більш логічно, а семантична направленість такої розмітки у майбутньому покращить пошукову оптимізацію
![Page 13: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/13.jpg)
КОРИСТУВАЦЬКИЙ ІНТЕРФЕЙС (ВІДЖЕТИ)
Flex HTML5Flex HTML5
<datagrid></datagrid>
<menu></menu>
mx.controls.*
HDividedBox
TabNavigatorTree
MenuBar
DataGrid
![Page 14: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/14.jpg)
ФОРМИ
Flex HTML5Flex HTML5
mx.controls.ColorPicker, mx.controls.DateChooser
input type=“list”, =“range”, =“date”
input type=“email”, =“url”
checkValidity
mx.validators.PhoneNumberValidator
formIsValid
![Page 15: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/15.jpg)
ВЕКТОРНА ГРАФІКА
Flex HTML5Flex HTML5
flash.display.Graphics <canvas></canvas>
![Page 16: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/16.jpg)
ТРИВИМІРНА ГРАФІКА
Flex HTML5Flex HTML5
flash.geom.Matrix3D
PaperVision3D, Alternativa3D …
canvas.getContext(‘3d’)
![Page 17: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/17.jpg)
РОБОТА З БІТМАП
Flex HTML5Flex HTML5
canvas.getImageData,setImageData,drawImage
flash.filters.*
mx.effects.*
flash.geom.ColorTransform
flash.display.BitmapData
![Page 18: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/18.jpg)
ВІДЕО
Flex HTML5Flex HTML5
OGG, MPEG4
ControlControl
FormatFormat
mx.controls.VideoDisplay
FLV
<video src=“”></video>
![Page 19: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/19.jpg)
ПОСТІЙНЕ З’ЄДНАННЯ
Flex HTML5Flex HTML5
WebSocketflash.net.Socket
![Page 20: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/20.jpg)
ДРАГ’Н’ДРОП
Flex (AIR) HTML5Flex (AIR) HTML5
DataTransfer,
DragEvent
flash.desktop.Clipboard
flash.events.NativeDragEvent,
flash.desktop.TransferableData
![Page 21: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/21.jpg)
ФАЙЛОВА СИСТЕМА
Read
Write
Flex (AIR) HTML5Flex (AIR) HTML5
input type=“upload”File,
FileStream,
FileMode localStorage?
![Page 22: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/22.jpg)
ІНСТРУМЕНТИ РОЗРОБНИКА
Flex HTML5Flex HTML5
Flex Builder 3, Flash Builder 4, Eclipse, Intellij Idea
DreamWeaver, HomeSite etc.
![Page 23: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/23.jpg)
ІНСТРУМЕНТИ ТЕСТУВАННЯ
UnitUnit
Flex HTML5Flex HTML5
JSUnitASUnit
Selenium,
WebDriver, WatirFluint?IntegrationIntegration
![Page 24: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/24.jpg)
СУМІСНІСТЬ З БРАУЗЕРАМИ
Flex HTML5Flex HTML5
10, 9, 8, 7, 6, 5, ….
3, 2, .. 3, 2, ..
8, 7, 6, .. 4,3,2,1 ..
?
![Page 25: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/25.jpg)
ADOBE INTEGRATED RUNTIME (AIR)
Середовище для запуску додатків, що дозволяє використовати HTML/CSS, Ajax, Adobe Flash або Adobe Flex для перенесення RIA на десктопні ПК.
![Page 26: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/26.jpg)
<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!
![Page 27: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/27.jpg)
ПЕРЕВАГИ
Поширеність в світі Кросплатформеність Однаковий вигляд в
різних браузерах Розвинуті бібліотеки
компонентів та гнучкість (flexible) інтерфейсів
Потужні засоби розробки (IDE)
Доступна документація (довідники, підручники)
Справді існує
Nativeінтеграція у браузери без додаткових плагінів
“Легкість” використання для мобільних пристроїв
Швидке та інтуїтивне засвоєння
Flex Flex HTML5 HTML5
![Page 28: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/28.jpg)
НЕДОЛІКИ
Велике навантаження на процесор
Неповноцінна підтримка на *nix платформах
Погана пошукова індексація
Не затверджений стандарт
Немає єдиного кодеку для відео
Неоднакова підтримка тегів та API різними браузерами
Flex Flex HTML5 HTML5
![Page 29: Flex 4 чи Html 5](https://reader034.vdocuments.mx/reader034/viewer/2022042614/55a570f81a28ab25518b4652/html5/thumbnails/29.jpg)
ДЯКУЄМО ЗА УВАГУ!
Артем Карявкаhttp://artem.kariavka.info
[email protected]@kariavka
Андрій Данилюкhttp://dnlk.net
[email protected]@stdbkr