F LEX 4 ЧИ HTML 5? Андрій Данилюк Артем Карявка. В АМ СОРОЧКУ ЧИ ФУТБОЛКУ ? FLEXHTML. - презентация

1 F LEX 4 ЧИ HTML 5? Андрій Данилюк Артем Карявка

2 В АМ СОРОЧКУ ЧИ ФУТБОЛКУ ? FLEXHTML

3 RIA (R ICH I NTERNET A PPLICATION ) Зазвичай це веб-додаток, що має всі функції, які користувач очікує від десктопних систем, наприклад Google Spreadsheets в порівнянні з Microsoft Excel.

4 F LEX ActionScript 3.0 Flash Player ActionScript 1.0 ActionScript 2.0 Flex Flex Flex 2.0 Flex Flex

5 HTML HTML 1.0 HTML 2.0 HTML 3.2 HTML 4.0 HTML XHTML 1.0 HTML 5 Hello World! 1999 HTML ? 2000

6 П ОШИРЕННЯ FLEX

7 П ІДТРИМКА HTML 5 (М УЛЬТИМЕДІА ) Відео TheoraТак Ні H.264ТакНі Аудіо VorbisТак Ні MP3ТакНі WAVНіТак Ні AACТакНі

8 П ІДТРИМКА HTML 5 (API) Local Storage Web Workers3.03.5Ні Web Database4.0Ні10.5Ні Geolocation API5.03.5Ні Web Sockets API4.0Ні SVG Так MathMLНі1.5Ні WebGL5.03.7Ні File API5.03.6Ні

9 Н ОВІ МОЖЛИВОСТІ F LEX 4 Дизайн на льоту: підтримка нового фреймворку (Spark), який надає нову ступінь виразності, легкий у використанні за допомогою зручних інструментів. Продуктивність розробника: підвищення ефективності компілятора, нові можливості привязки даних. Нові стани (states): використовувати стани стало простіше і зрозуміліше.

10 П РИКЛАД НОВОЇ АРХІТЕКТУРИ

11 Н ОВІ МОЖЛИВОСТІ 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-графіка

12 П РИКЛАД НОВОЇ РОЗМІТКИ HTML5 З новими теґами (section, article, aside, header, footer) розмітка сторінки відбувається більш логічно, а семантична направленість такої розмітки у майбутньому покращить пошукову оптимізацію

13 К ОРИСТУВАЦЬКИЙ ІНТЕРФЕЙС ( ВІДЖЕТИ ) Flex HTML5 mx.controls.* HDividedBox TabNavigator Tree MenuBar DataGrid

14 Ф ОРМИ Controls Flex HTML5 mx.controls.ColorPicker, mx.controls.DateChooser input type=list, =range, =date input type= , =url checkValidity mx.validators.PhoneNumberValidator formIsValid Validation

15 В ЕКТОРНА ГРАФІКА Flex HTML5 flash.display.Graphics

16 Т РИВИМІРНА ГРАФІКА Flex HTML5 flash.geom.Matrix3D PaperVision3D, Alternativa3D … canvas.getContext(3d)

17 Р ОБОТА З Б ІТМАП Flex HTML5 canvas.getImageData,setImageData,drawI mage flash.filters.* mx.effects.* flash.geom.ColorTransform flash.display.BitmapData

18 В ІДЕО Flex HTML5 OGG, MPEG4 ControlFormat mx.controls.VideoDisplay FLV

19 П ОСТІЙНЕ З ЄДНАННЯ Flex HTML5 WebSocketflash.net.Socket

20 Д РАГ Н Д РОП Flex (AIR) HTML5 DataTransfer, DragEvent flash.desktop.Clipboard flash.events.NativeDragEvent, flash.desktop.TransferableData

21 Ф АЙЛОВА СИСТЕМА Read Write Flex (AIR) HTML5 input type=upload File, FileStream, FileMode localStorage?

22 І НСТРУМЕНТИ РОЗРОБНИКА Flex HTML5 Flex Builder 3, Flash Builder 4, Eclipse, Intellij Idea DreamWeaver, HomeSite etc.

23 І НСТРУМЕНТИ ТЕСТУВАННЯ Unit Flex HTML5 JSUnitASUnit Selenium, WebDriver, Watir Fluint? Integration

24 С УМІСНІСТЬ З БРАУЗЕРАМИ Flex HTML5 10, 9, 8, 7, 6, 5, …. 3, 2,.. 8, 7, 6,..4,3,2,1.. ?

25 A DOBE I NTEGRATED R UNTIME (AIR) Середовище для запуску додатків, що дозволяє використовати HTML/CSS, Ajax, Adobe Flash або Adobe Flex для перенесення RIA на десктопні ПК.HTMLCSS AjaxAdobe FlashAdobe Flex

26 test.html.HelloWorld 0.1 HelloWorld HelloWorld.html true Hello, World! Hello, World! AIR: H ELLO, W ORLD !

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

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

29 Д ЯКУЄМО ЗА У ВАГУ ! Артем Карявка Андрій Данилюк