Скачать презентацию User Interfaces in the Mobile Industry October 2010 Скачать презентацию User Interfaces in the Mobile Industry October 2010

43f04d6a7532d6723aaccae4b144de54.ppt

  • Количество слайдов: 35

User Interfaces in the Mobile Industry October 2010 User Interfaces in the Mobile Industry October 2010

Open-Plug key facts • Founded in 2002 • France (Sophia-Antipolis), Romania (Bucharest), Taiwan (Taipei) Open-Plug key facts • Founded in 2002 • France (Sophia-Antipolis), Romania (Bucharest), Taiwan (Taipei) • ~ 50 people Open-Plug provides the first open software framework for mass market wireless phones Open-Plug Confidential & Proprietary 2

Open-Plug key facts Experts in mobile software development environments • Mobile industry veterans • Open-Plug key facts Experts in mobile software development environments • Mobile industry veterans • Experts in embedded software for mobile phones • H. Q. based in Sophia Antipolis, the French ‘telecom valley’ Open-Plug Confidential & Proprietary 3

Introduction and background Open-Plug Confidential & Proprietary 4 Introduction and background Open-Plug Confidential & Proprietary 4

User Interface • What is a User Interface ? Display things Receive inputs Open-Plug User Interface • What is a User Interface ? Display things Receive inputs Open-Plug Confidential & Proprietary 5

Example of GTK, but it applies to all Send events To widget tree Window Example of GTK, but it applies to all Send events To widget tree Window List toolbar Btn right Btn mid Btn left Widget Tree Drawing engine (GDK/DFB/n. Core) Gmain loop control point Process events From widget tree Services (Databases, …) Open-Plug Confidential & Proprietary 6

Notion of states State 2 State 3 State 1 Open-Plug Confidential & Proprietary 7 Notion of states State 2 State 3 State 1 Open-Plug Confidential & Proprietary 7

Actors definition Graphical Designer • Creates Graphical Assets « what the screens look like Actors definition Graphical Designer • Creates Graphical Assets « what the screens look like » • Transitions and animations Tech Expertize Artistic Talent Interaction Designer • Defines Screens and UI Flow • High level application logic • Defines UI Data to be presented • Screen Layouts Software Engineer • Connects data services to middleware. • Integrates application logic with middleware and events Different actors, different knowledge …. So different technologies and different tools! Open-Plug Confidential & Proprietary 8

2 years ago… • UI is designed by Graphic Designers on paper, and put 2 years ago… • UI is designed by Graphic Designers on paper, and put in place by Engineers. • UI is developed in C/C++/Java, using GTK, QT, or proprietary technologies. • Result is often not exactly what designer wanted. OK OK Open-Plug Confidential & Proprietary 9

2 years ago… • On the Customer side: – Software is not important – 2 years ago… • On the Customer side: – Software is not important – People only look at the hardware design – People don’t buy a phone because UI is pretty Open-Plug Confidential & Proprietary 10

2 years ago… • On the Phone Makers side: – Operators focus on functionality 2 years ago… • On the Phone Makers side: – Operators focus on functionality instead of ergonomics – No code reuse between platforms, lot of time is lost rewriting the UI for each phone – Screen size adaptation means rewriting the UI (engineers) Open-Plug Confidential & Proprietary 11

The turn-over Open-Plug Confidential & Proprietary 12 The turn-over Open-Plug Confidential & Proprietary 12

Change of mind • New handset comes out • UI is pretty and easy Change of mind • New handset comes out • UI is pretty and easy to use • Many features are missing (MMS…) But it is a success ! Open-Plug Confidential & Proprietary 13

Change of mind • People realize that software is important • Phone companies wants Change of mind • People realize that software is important • Phone companies wants beautiful UIs, quickly • UI shouldn’t be developed by engineers, but by graphic designers • Graphic Designers should be free to do what they want, and not limited by technology Open-Plug Confidential & Proprietary 14

What industry wants • Sexy mobile phones with beautiful UI • Create new variants What industry wants • Sexy mobile phones with beautiful UI • Create new variants of a mobile phone easily • Let graphic designers handle the UI Open-Plug Confidential & Proprietary 15

Next. Gen UI Open-Plug Confidential & Proprietary 16 Next. Gen UI Open-Plug Confidential & Proprietary 16

UI technologies are trendy on phones…. • i. Phone • Samsung Player • HTC UI technologies are trendy on phones…. • i. Phone • Samsung Player • HTC Touch • Flash Phones (LG Prada) etc… Open-Plug Confidential & Proprietary 17

UI technolgies are trendy on the web and desktop RIA Runtime UI Control Tools UI technolgies are trendy on the web and desktop RIA Runtime UI Control Tools Adobe Flex Flash Plugin MXML Action Script 3 (= JS 2) Adobe Flex Builder MS Silverlight (WPF/E) Silverlight Brower Plugin XAML (subset) Javascript, C#, VB#, all. NET languages Expression line + VS Open. Laszlo Flash or DHTML LZX Javascript No XULRunner XUL (mozilla) Runtime UI Javascript No Control Tools Adobe AIR (flash + webkit) MXML Action Script 3 (= JS 2) Adobe Flex Builder WPF . NET FWK XAML . NET languages Expression line + VS Prism XULRunner XUL JS NO XUL RDA Open-Plug Confidential & Proprietary 18

Next Gen UI • New UI technologies focus on : – – Productivity Easy Next Gen UI • New UI technologies focus on : – – Productivity Easy access for designers Reusability Componentization (widgets) Open-Plug Confidential & Proprietary 19

Adobe Flex • What is Flex ? – UI technology from Adobe – One Adobe Flex • What is Flex ? – UI technology from Adobe – One of the most productive Framework of the industry (10 times more productive than Flash, as said by Adobe) – Framework and tools to build dynamic, interactive rich Internet applications delivered on the web (Flash Player) or to the desktop (Adobe AIR) – Very popular in web and desktop environments: • • • Google Volkswagen Oracle HP e. Bay – Leverages Adobe tools penetration with graphics/designers Open-Plug Confidential & Proprietary 20

Adobe Flex Builder Open-Plug Confidential & Proprietary 21 Adobe Flex Builder Open-Plug Confidential & Proprietary 21

Adobe Flex on mobile phones ? • Adobe Flex can bring a lot to Adobe Flex on mobile phones ? • Adobe Flex can bring a lot to Mobile Phones – In term of productivity – In term of graphical standard • But – Flex requires a Flash 10 or AIR runtime • Not yet available for mobile phone (announced 2010) • Flash/AIR runtime faces performance/memory constraints on mid- and low- end platforms • No standard industrial flow is defined between all actors in the mobile phone product lifecycle – Flex suits only single application design and not complex system design Open-Plug Confidential & Proprietary 22

Mass market phone specifications • Processor: ARM 7 ~100 MHz to ARM 9 ~200 Mass market phone specifications • Processor: ARM 7 ~100 MHz to ARM 9 ~200 MHz • RAM: 1 MB to 4 MB • Flash: 4 MB to 16 MB • Screen: 16 bits, 176*220 to 240*320 Open-Plug Confidential & Proprietary 23

Next. Gen UI on platform Rich Interface Runtime UI Control Tools TAT Cascade XML Next. Gen UI on platform Rich Interface Runtime UI Control Tools TAT Cascade XML C TAT Motion Lab Digital Airways Kreb KIDE XML C KIDE Google Android Java Android XML Java No Java. FX Mobile + VM Java. FX Script No SVG Ikivo (and other) SVG JS Ikivo Open-Plug Confidential & Proprietary 24

What does Open-Plug offer ? ELIPS Studio 3 The next generation of development environment What does Open-Plug offer ? ELIPS Studio 3 The next generation of development environment for mobile applications You are a Flex developer ? Now you are a mobile expert ! Open-Plug Confidential & Proprietary 25

Open-Plug Solution • Open-Plug ELIPS 3. 0 – ELIPS 3. 0 code – ELIPS Open-Plug Solution • Open-Plug ELIPS 3. 0 – ELIPS 3. 0 code – ELIPS 3. 0 Data reuses Adobe tools allows to transform scripted Flex applications into native allows Designers to be in charge of UI, not Engineers makes a clear separation of Presentation from Logic and • Model-View-Controller pattern – ELIPS 3. 0 relies on OP’s commercical-grade graphics rendering engine • Excellent performance on feature phone platforms, even low-end • Advanced features – Touchscreen support – Transition effects – ELIPS 3. 0 can be introduced easily on an existing platform • Thanks to OP Companion Framework Open-Plug Confidential & Proprietary 26

Flex is your new mobile SDK • Code your application in Flex Builder with Flex is your new mobile SDK • Code your application in Flex Builder with our mobile Flex SDK • Test it in our phone simulator • Build it natively and deploy it on today’s handsets Open-Plug Confidential & Proprietary 27

How do we do this ? § Flex Framework internal AS code has been How do we do this ? § Flex Framework internal AS code has been optimised § Unique build technology “transcodes” AS 3/MXML into native code § Application is executed natively on the “bare metal” § Compact and efficient execution libraries are packaged in the app assets YOUR APP CODE AS 3 MXML 010101 01010 ELIPS MOBILE FLEX SDK ELIPS COMPILER Open-Plug Confidential & Proprietary 28

Tutorial Open-Plug Confidential & Proprietary 29 Tutorial Open-Plug Confidential & Proprietary 29

Tutorial • Step 1: Setup – Install Adobe Flex Builder – Install Open-Plug ELIPS Tutorial • Step 1: Setup – Install Adobe Flex Builder – Install Open-Plug ELIPS Studio 3 – Setup Flex Builder’s Workspace • Step 2: Flickr Application – Create AIR app – Simulate on PC • Step 3: Bring to device – Build for Windows Mobile or Android – Run on device Open-Plug Confidential & Proprietary 30

Join the ELIPS Studio 3 Developer Program • Go to http: //www. open-plug. com/developers Join the ELIPS Studio 3 Developer Program • Go to http: //www. open-plug. com/developers • It’s free for students, just enroll ! – Download ELIPS Studio 3 and be the first to make Flex applications for mobiles – Learn more through videos and samples – Share your experiences with our experts and other users on our Forum – Influence the commercial product spec • And enjoy the mobile world !

Thank you! Open-Plug Confidential & Proprietary 32 Thank you! Open-Plug Confidential & Proprietary 32

Internships Open-Plug Confidential & Proprietary 33 Internships Open-Plug Confidential & Proprietary 33

Open-Plug Internships • Open-Plug recruits interns! – – – Design User Interfaces Write Java. Open-Plug Internships • Open-Plug recruits interns! – – – Design User Interfaces Write Java. Script applications Optimize drawing algorithms Develop MXML to C++ compiler Adapt graphic stack for new devices (Android, i. Phone) Open-Plug Confidential & Proprietary 34

ELIPS 3. 0 Actors and Flow -Define Screens and UI Flow -High level application ELIPS 3. 0 Actors and Flow -Define Screens and UI Flow -High level application logic -Define UI Data to be presented -Screen Layouts -Transition and animations Adobe Flex Builder Visual Studio -Connect data services to middleware. -Integrate application logic with middleware and events Engineer Produces -Graphical assets creation Ergonomist /Designer Produces Adobe CS 3 Photoshop / Illustrator Graphic Designer Produces • CSS • Images • Fonts • Sounds • Animations • . c/. h • Binaries • MXML Layouts and states • CSS • Images • Fonts • Sounds • Animations Open-Plug Confidential & Proprietary 35 35