1 [18:02] <ClassBot> Logs for this session will be available at http://irclogs.ubuntu.com/2011/04/14/%23ubuntu-classroom.html following the conclusion of the session.
   2 [18:10] <jryannel> Before I continue on rapid prototyping... some remarks to animations
   3 [18:10] <jryannel> There are several ways to use animtions:
   4 [18:10] <jryannel> * Animation on <property>
   5 [18:11] <jryannel> * Animation { } // standalone
   6 [18:11] <jryannel> * Animation during a state transition
   7 [18:12] <jryannel> * Behavior on <property> // when property changes than always with the specified animation
   8 [18:12] <jryannel> You can nest animations with ParallelAnimation and Sequential Animation.
   9 [18:13] <jryannel> There is also a PauseAnimation, which waits some time before continue with the next animation in a group
  10 [18:13] <jryannel> IMPORTANT!!: If an element is anchored for example on the left and right, x can't be animated!!
  11 [18:14] <jryannel> anchoring is stronger!!
  12 [18:14] <jryannel> if an element is anchored on left and right, sure y can be animated and also the height. but not the width and x
  13 [18:16] <jryannel> All of this is available as a 5 1/2 hour talk here: http://qt.nokia.com/developer/learning/online/training/training-day-at-developer-days-2010
  14 [18:16] <jryannel> Just make yourself a nice video evening instead of watching lord of the rings
  15 [18:16] <jryannel> Coming to "Qt Quick Prototyping"
  16 [18:17] <jryannel> Please have a look at: http://qt.nokia.com/developer/learning/online/talks/developerdays2010/tech-talks/qt-quick-rapid-user-interface-prototyping
  17 [18:18] <jryannel> Sorry I planned to have a screen sharing available. I hope at least some of you can watch the video
  18 [18:18] <jryannel> Anyway I will explain about the thoughts behind...
  19 [18:19] <jryannel> Qt Quick was designed to bridge the gap between "designers" and "developers"
  20 [18:20] <jryannel> In a normal design driven project you have
  21 [18:20] <jryannel> designers, which think about the user interaction, graphics and nowadays animation (e.g. motions)
  22 [18:21] <jryannel> Then they use tools like Flash or paper or PhotoShop to sketch the ui.
  23 [18:21] <jryannel> Present beautiful design to their bosses and then ...
  24 [18:21] <jryannel> They throw these design to the c++ developer and ask them to implement this.
  25 [18:22] <jryannel> Sure the result will be miles away from the the sketch. It's a different technology maybe even different HW on embedded
  26 [18:23] <jryannel> Qt Quick allows designers early on to work with the same technologies as all the other developers
  27 [18:23] <jryannel> Sure these kind of designers should now how to work e.g. with HTML/JavaScript of Flash/ActionScript. For them it's pretty easy to come to Qt Quick
  28 [18:24] <jryannel> The result is that at any time developers and designers work on the same code base and it's easy to sketch a first ui prototype ...
  29 [18:25] <jryannel> and then the prototype goes over nicely into production code
  30 [18:26] <jryannel> By this you can shorten the time to market but also ensure the that the UI is really that what someone asked for. Pixelperfect
  31 [18:27] <jryannel> Qt Quick is fast to code. So that you can create many different prototypes easily and then just ask you users, which one they like best
  32 [18:27] <jryannel> Another aspect id that the ui code is cleanly seprated from the c++ code.
  33 [18:28] <jryannel> This allows you to unit test your models and business logic and heavy lifting...
  34 [18:28] <jryannel> and push a simple and clean qml API towards the ui developers
  35 [18:29] <jryannel> Qt Creator contains a design mode, which allows you to drag-n-drop ui elements (and your custom components) on a surface to sketch your ui
  36 [18:30] <jryannel> When you are in a qml file hit the button on the left "Design"
  37 [18:30] <jryannel> in Qt Creator
  38 [18:31] <jryannel> Here you can create a first sketch. But finally you want to switch to your code (editor) to make the more complicated stuff
  39 [18:31] <jryannel> So an interaction designer creates "wireframes" e.g. like on http://balsamiq.com/
  40 [18:32] <jryannel> A graphics designer makes nice graphics to the wireframe, e.g. with photoshop, gimp, inkscape, ...
  41 [18:33] <jryannel> A motion designer thinks about how ui elements should be animated.
  42 [18:33] <jryannel> This is currently how I see designers. I'm not a designer I'm a programmer and I always wondered how they work
  43 === tubadaz is now known as tubadaz_away
  44 [18:35] <jryannel> We have material for designers ready at: http://qt.nokia.com/developer/learning/online/training/materials/qt-quick-for-designers
  45 [18:35] <jryannel> Especially module 6 talks about the different designer roles.
  46 [18:36] <jryannel> If you target a UI different from a standard desktop UI you want to have a design affine person in your team.
  47 [18:36] <jryannel> Especially with Qt Quick. This makes it really efficient.
  48 [18:37] <jryannel> If you target a standard desktop UI you want to create a set of standard UI elements or use/extend the elements produce by the Qt Components project
  49 [18:37] <jryannel> See https://qt.gitorious.org/qt-components
  50 [18:39] <jryannel> I posted this link already yesterday: http://labs.qt.nokia.com/2011/03/10/qml-components-for-desktop/
  51 [18:39] <jryannel> When I prototype a UI I always start with rectangles
  52 [18:40] <jryannel> I normally use black background and white borders.
  53 [18:40] <jryannel> Just make sure you get the dimensions right. Maybe add some text to label an element
  54 [18:40] <jryannel> Then concentrate on the application logic
  55 [18:41] <jryannel> E.g. when I press here what should be happen?
  56 [18:41] <jryannel> At then end you look into the animations.
  57 [18:41] <jryannel> When something changes, then how. Should it fade (animation on opacity), should it fly in (animation on x)
  58 === tubadaz_away is now known as tubadaz
  59 [18:42] <jryannel> Should it fly and fade (parallel animation on opacity and x)
  60 [18:43] <jryannel> You should extract components early on (e.g. mybutton, mytextedit, mycheckbox, etc...
  61 [18:43] <jryannel> Then you concentrate on the more details and bring in the graphics, colors, gradients, etc...
  62 [18:44] <jryannel> Make sure you get the structure right. give application wide used elements a good id.
  63 [18:45] <jryannel> Mark internal properties with '_<property-name>
  64 [18:46] <jryannel> Try to avoid to be to dependent on your c++ backend, I use a bool _debug property to guard sometimes those dependencies
  65 [18:46] <jryannel> Try not to create a reusable component which can be reused in all projects in the future.
  66 [18:47] <jryannel> Designers think more in reuse by copy. Just make the element work for your needs. Qt Quick can be fast adapted anyway
  67 [18:47] <jryannel> I guess that's it is for now. Any questions?
  68 [18:49] <jryannel> Take care and hope you enjoined this lengthy talk :)
  69 [18:49] <jryannel> Ohh, one link at the end
  70 [18:50] <jryannel> https://gitorious.org/qtmediahub, a XMBC (MediaCenter) clone in qt
  71 [18:50] <jryannel> And https://gitorious.org/qmlshowcase.
  72 [18:51] <jryannel> qmlshowcase was produced for a customer in one afternoon! Check it out