Your SlideShare is downloading. ×
0
Thomas Joos, Little Miss Robot
Experience Director, Partner
@thomasjoos
The Technical Learning Curve
Thomas Joos | Little ...
-(void) helloFragmentation;
Retina
iOS4.0
iOS5.0
iOS6.0
320x480
640x960
HTML5
CSS3
Node.js
Objective-c
Java
.NET
OpenFrame...
Design	
  is	
  not	
  just	
  what	
  it	
  looks	
  like	
  and	
  feels	
  like.
Design	
  is	
  how	
  it	
  works.
-­...
YO	
  STEVE!	
  
I’M	
  REALLY	
  HAPPY	
  FOR	
  YOU	
  
AND	
  IMA	
  LET	
  YOU	
  FINISH...
BUT	
  WITHOUT	
  WOZZ
YOU...
-(void) goodLuckWithThat;
Pen & Paper
Adobe Photoshop
Keynote
Adobe Illustrator Men’s Bag
Thursday 28 February 13
DESIGN
VS
DEVELOPMENT
Thursday 28 February 13
Thursday 28 February 13
Our name represents our ambition to combine creative ideas with innovative technology.
‘Little Miss’ stands for dreams and...
Development informs.
When building a product, design leads development and development
informs design. This is a cyclical,...
You tell designers what they
can or can not do.
And they will show you how it should look like and feel like.
You know, be...
A developer’s toolbox:
1 Passion for digital innovation
2 Interested in interactive design & ux
3 Great programming skills...
The Learning Curve,
you said?
Thursday 28 February 13
Thursday 28 February 13
iPhone Prototype
Native front-end client (iOS5.0)
Rest API Webservice (http requests,
JSON)
Last.FM API
Wim Van Buynder
@w...
- (UIImage *)imageByScalingProportionallyToSize:
(CGSize)targetSize
Interesting articles: 
http://stackoverflow.com/questio...
- (UIImage *)imageByScalingProportionallyToSize:(CGSize)targetSize {
    
    UIImage *sourceImage = self;
    UIImage *ne...
Refactoring code.
Thursday 28 February 13
Thursday 28 February 13
- (UIImage *)imageByScalingProportionallyToSize:(CGSize)targetSize {
    
    UIImage *sourceImage = self;
    UIImage *ne...
Too often we feel the need to reinvent the wheel and
program specific behavior from scratch.
Always remind yourself to sta...
Radio+ Beta
Responsive Website
HTML5, CSS3, Javascript, Node.JS
Rest API Webservice
(http requests, JSON)
Last.FM API
Gwen...
Channel name
Channel logo
Current Show
Current Presentor
Current Artist
Playlist
Thursday 28 February 13
Guys. I really think we should
move away from manual
polling as quickly as possible.
It’s Node.JS time.
@brmm
Thursday 28 ...
A few tiny thoughts
that crossed my mind...
Thursday 28 February 13
“ It’s not really in the scope of this project.
Who am I kidding, it’s not in there at all. ”
- the wallet speaking -
Thur...
“ If we screw this up, it’s gonna be
legen - never have to wait for it again - dary. “
- the chicken speaking -
Thursday 2...
“ Isn’t Javascript a front-end scripting language?
Maybe it’s just me... “
- the inner voice speaking -
Thursday 28 Februa...
“ How cool would it be to just pull this off. “
- the ego speaking -
Thursday 28 February 13
Node.JS
A platform built on Chrome’s JavaScript runtime for easily building
fast, scalable network applications. Node.js u...
Thursday 28 February 13
Web services
Radio+
Node
request content (twitter, last.fm)
request additional content (radio host, program guide, ...)
re...
Web services
Radio+
Node
request additional content (radio host, program guide, ...)
receives server updates
aggregates fe...
Web services
Radio+
Node
request additional content (radio host, program guide, ...)
receives server updates
aggregates fe...
#client overload
Thursday 28 February 13
Guys. I really think we should integrate more Radio+
nodes to serve all those clients.
@Brmm
Thursday 28 February 13
“ It’s a good idea and ima let you finish...
but it’s not going to happen.”
- the wallet won -
Thursday 28 February 13
Gwen Vanhee
@gwenvanhee
Thursday 28 February 13
littlemissrobot.com
Thursday 28 February 13
Mobile First
HTML5, CSS3, Javascript
Responsive design
Gwen Vanhee
@gwenvanhee
Thursday 28 February 13
I thought it would be a good idea to learn more about HTML5 for mobile.
@gwenvanhee
Thursday 28 February 13
Gwen Vanhee
@gwenvanhee
An interactive HTML5 drawing experiment
Code::Brush
Thursday 28 February 13
Conceptual, visual and functional, #mobilefirst stimulates you to
remove the clutter and focus on what really matters.
And...
We are at a turning point where websites will be visited mostly by mobile
devices. A new site should last for 3 years, so ...
A few insights...
Thursday 28 February 13
Focus on mobile friendly browsers.
(IE is not one of them.)
Thursday 28 February 13
Mobile optimalisation simply means downsizing the hell out
of your download size and page requests.
Thursday 28 February 13
Thursday 28 February 13
Thursday 28 February 13
Thursday 28 February 13
http://blog.netvlies.nl/design-interactie/retina-revolution/
Thursday 28 February 13
Thursday 28 February 13
Thursday 28 February 13
Thursday 28 February 13
Progressive Enrichment
mobile > tablet > desktop
Thursday 28 February 13
Too often we discuss what should happen when
the canvas becomes smaller. #mobilefirst thinking
means discussing what happe...
Mobile Journalist
iOS5 & 6
iPhone 4 & 5
Objective-C
Wim Van Buynder
@wimvanbuynder
Thursday 28 February 13
Start
First time Yes First run Login
Approval
Failed
No
Homescreen
Record Import from library
Cancel Pick image
Last file t...
Handling large chunks of data.
Thursday 28 February 13
the iPhone
Application
Document
Directory
Application
Application
Handling large amounts of data is
not really this direct...
the iPhone
Application
Document
Directory
Application
Application
Global
Temp Directory
Saving created data directly into ...
Thursday 28 February 13
“ It works like a charm. What a wonderful app you
guys made. Thanks! “
- Feedback week 1 -
Thursday 28 February 13
Thursday 28 February 13
“ HEY GUYS! THE APP FUCKING STOPPED
WORKING FOR SOME REASON!!! “
- Feedback week 3 -
Thursday 28 February 13
Thursday 28 February 13
the iPhone
Application
Document
Directory
Application
Application
Global
Temp Directory
Saving created data directly into ...
the iPhone
Application
Document
Directory
Application
Application
Global
Temp Directory
Saving created data directly into ...
I knew there was something like dummy-proof or granny-proof.
Now I now there is also journalist-proof.
@wimvanbuynder
Thur...
special thanks to
Wim Van Buynder
@wimvanbuynder
Gwen Vanhee
@gwenvanhee
Bram Monstrey
@brmm
Thursday 28 February 13
Thomas Joos, Little Miss Robot
Experience Director, Partner
@thomasjoos
Defining a great
experience design
process.
Thank ...
Upcoming SlideShare
Loading in...5
×

FITC 2013 - The Technical Learning Curve

175

Published on

Technical presentation at FITC by our managing partner Thomas Joos. The presentation gives insight and behind the scene learnings.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
175
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "FITC 2013 - The Technical Learning Curve"

  1. 1. Thomas Joos, Little Miss Robot Experience Director, Partner @thomasjoos The Technical Learning Curve Thomas Joos | Little Miss Robot | @thomasjoos Thursday 28 February 13
  2. 2. -(void) helloFragmentation; Retina iOS4.0 iOS5.0 iOS6.0 320x480 640x960 HTML5 CSS3 Node.js Objective-c Java .NET OpenFrameworks IE8 IE9 Chrome Safari Firefox Opera C++ Javascript ActionScript XML JSON PHP XAML Flash Smart TV 720x1280xHDPI HDPI mHDPI lHDPI Klingon Thursday 28 February 13
  3. 3. Design  is  not  just  what  it  looks  like  and  feels  like. Design  is  how  it  works. -­‐  Steve  Jobs Thursday 28 February 13
  4. 4. YO  STEVE!   I’M  REALLY  HAPPY  FOR  YOU   AND  IMA  LET  YOU  FINISH... BUT  WITHOUT  WOZZ YOU  HAD  JACK  SHIT!   Thursday 28 February 13
  5. 5. -(void) goodLuckWithThat; Pen & Paper Adobe Photoshop Keynote Adobe Illustrator Men’s Bag Thursday 28 February 13
  6. 6. DESIGN VS DEVELOPMENT Thursday 28 February 13
  7. 7. Thursday 28 February 13
  8. 8. Our name represents our ambition to combine creative ideas with innovative technology. ‘Little Miss’ stands for dreams and fantasy without limits, like a true ten-year-old. ‘Robot’ illustrates the endless technical opportunities and evolutions in our industry. We are user- centered in every step of our process, in order to create wonderful experiences that meet the needs of real people. As a wise man once said: ‘Design is not what it looks like and feels like. Design is how it works. LITTLE MISS ROBOT Thursday 28 February 13
  9. 9. Development informs. When building a product, design leads development and development informs design. This is a cyclical, iterative process in which the goal is to continually improve the product to better meet the needs of users. source: Aral Balkan, Mobile Considerations in UX Design Thursday 28 February 13
  10. 10. You tell designers what they can or can not do. And they will show you how it should look like and feel like. You know, because that’s how it works. Thursday 28 February 13
  11. 11. A developer’s toolbox: 1 Passion for digital innovation 2 Interested in interactive design & ux 3 Great programming skills 4 The ability to say ‘I don’t know’ 5 Eager to find out ‘how the hell it works’ Thursday 28 February 13
  12. 12. The Learning Curve, you said? Thursday 28 February 13
  13. 13. Thursday 28 February 13
  14. 14. iPhone Prototype Native front-end client (iOS5.0) Rest API Webservice (http requests, JSON) Last.FM API Wim Van Buynder @wimvanbuynder Thursday 28 February 13
  15. 15. - (UIImage *)imageByScalingProportionallyToSize: (CGSize)targetSize Interesting articles:  http://stackoverflow.com/questions/2658738/the-simplest-way-to-resize-an-uiimage http://stackoverflow.com/questions/2645768/uiimage-resize-scale-proportion http://vocaro.com/trevor/blog/2009/10/12/resize-a-uiimage-the-right-way/ Thursday 28 February 13
  16. 16. - (UIImage *)imageByScalingProportionallyToSize:(CGSize)targetSize {          UIImage *sourceImage = self;     UIImage *newImage = nil;          CGSize imageSize = sourceImage.size;     CGFloat width = imageSize.width;     CGFloat height = imageSize.height;          CGFloat targetWidth = targetSize.width;     CGFloat targetHeight = targetSize.height;          CGFloat scaleFactor = 0.0;     CGFloat scaledWidth = targetWidth;     CGFloat scaledHeight = targetHeight;          CGPoint thumbnailPoint = CGPointMake(0.0,0.0);          if (CGSizeEqualToSize(imageSize, targetSize) == NO) {                  CGFloat widthFactor = targetWidth / width;         CGFloat heightFactor = targetHeight / height;                  scaleFactor = heightFactor;         scaledWidth  = width * scaleFactor;         scaledHeight = height * scaleFactor;                  // center the image                  if (widthFactor < heightFactor) {             thumbnailPoint.y = 0;          } else if (widthFactor > heightFactor) {             thumbnailPoint.x = (targetWidth - scaledWidth) * 0.5;         }     }               // this is actually the interesting part:          UIGraphicsBeginImageContext(targetSize);          CGRect thumbnailRect = CGRectZero;     thumbnailRect.origin = thumbnailPoint;     thumbnailRect.size.width  = scaledWidth;     thumbnailRect.size.height = scaledHeight;          [sourceImage drawInRect:thumbnailRect];          newImage = UIGraphicsGetImageFromCurrentImageContext();     UIGraphicsEndImageContext();          if(newImage == nil)         NSLog(@"could not scale image");          return newImage ; } Thursday 28 February 13
  17. 17. Refactoring code. Thursday 28 February 13
  18. 18. Thursday 28 February 13
  19. 19. - (UIImage *)imageByScalingProportionallyToSize:(CGSize)targetSize {          UIImage *sourceImage = self;     UIImage *newImage = nil;          CGSize imageSize = sourceImage.size;     CGFloat width = imageSize.width;     CGFloat height = imageSize.height;          CGFloat targetWidth = targetSize.width;     CGFloat targetHeight = targetSize.height;          CGFloat scaleFactor = 0.0;     CGFloat scaledWidth = targetWidth;     CGFloat scaledHeight = targetHeight;          CGPoint thumbnailPoint = CGPointMake(0.0,0.0);          if (CGSizeEqualToSize(imageSize, targetSize) == NO) {                  CGFloat widthFactor = targetWidth / width;         CGFloat heightFactor = targetHeight / height;                  scaleFactor = heightFactor;         scaledWidth  = width * scaleFactor;         scaledHeight = height * scaleFactor;                  // center the image                  if (widthFactor < heightFactor) {             thumbnailPoint.y = 0;          } else if (widthFactor > heightFactor) {             thumbnailPoint.x = (targetWidth - scaledWidth) * 0.5;         }     }               // this is actually the interesting part:          UIGraphicsBeginImageContext(targetSize);          CGRect thumbnailRect = CGRectZero;     thumbnailRect.origin = thumbnailPoint;     thumbnailRect.size.width  = scaledWidth;     thumbnailRect.size.height = scaledHeight;          [sourceImage drawInRect:thumbnailRect];          newImage = UIGraphicsGetImageFromCurrentImageContext();     UIGraphicsEndImageContext();          if(newImage == nil) //NSLog(@"could not scale image");         NSLog(@"could not scale image");          return newImage ; } = backgroundImage.contentMode = UIViewContentModeScaleAspectFill Thursday 28 February 13
  20. 20. Too often we feel the need to reinvent the wheel and program specific behavior from scratch. Always remind yourself to start from the beginning and Read The Fucking Manual. @wimvanbuynder iOS Development tip: keep reading the fucking sdk. #rtfsdk Thursday 28 February 13
  21. 21. Radio+ Beta Responsive Website HTML5, CSS3, Javascript, Node.JS Rest API Webservice (http requests, JSON) Last.FM API Gwen Vanhee @gwenvanhee Bram Monstrey @brmm Thursday 28 February 13
  22. 22. Channel name Channel logo Current Show Current Presentor Current Artist Playlist Thursday 28 February 13
  23. 23. Guys. I really think we should move away from manual polling as quickly as possible. It’s Node.JS time. @brmm Thursday 28 February 13
  24. 24. A few tiny thoughts that crossed my mind... Thursday 28 February 13
  25. 25. “ It’s not really in the scope of this project. Who am I kidding, it’s not in there at all. ” - the wallet speaking - Thursday 28 February 13
  26. 26. “ If we screw this up, it’s gonna be legen - never have to wait for it again - dary. “ - the chicken speaking - Thursday 28 February 13
  27. 27. “ Isn’t Javascript a front-end scripting language? Maybe it’s just me... “ - the inner voice speaking - Thursday 28 February 13
  28. 28. “ How cool would it be to just pull this off. “ - the ego speaking - Thursday 28 February 13
  29. 29. Node.JS A platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Perfect for data-intensive real-time applications that run across distributed devices. source: nodejs.org Thursday 28 February 13
  30. 30. Thursday 28 February 13
  31. 31. Web services Radio+ Node request content (twitter, last.fm) request additional content (radio host, program guide, ...) receives server updates push update to client Push Node Server Side Polling for updates Last.FM API Web Client (html5) NOA, On Demand, Playlist Additional Content (Radio host, program guide, ... Version 1 Thursday 28 February 13
  32. 32. Web services Radio+ Node request additional content (radio host, program guide, ...) receives server updates aggregates feed content push update to client Push Node Server Side Polling for updates Last.FM API Web Client (html5) NOA, On Demand, Playlist Additional Content (Radio host, program guide, ... Feed Node request content (twitter, last.fm) Version 2 Thursday 28 February 13
  33. 33. Web services Radio+ Node request additional content (radio host, program guide, ...) receives server updates aggregates feed content push platform optimized update to client Push Node Server Side Polling for updates Last.FM API Web Client (html5) NOA, On Demand, Playlist Additional Content (Radio host, program guide, ... Version 3 Smart TV (html5) iOS Client (obj-c) Android Client (java) Feed Node request content (twitter, last.fm) Thursday 28 February 13
  34. 34. #client overload Thursday 28 February 13
  35. 35. Guys. I really think we should integrate more Radio+ nodes to serve all those clients. @Brmm Thursday 28 February 13
  36. 36. “ It’s a good idea and ima let you finish... but it’s not going to happen.” - the wallet won - Thursday 28 February 13
  37. 37. Gwen Vanhee @gwenvanhee Thursday 28 February 13
  38. 38. littlemissrobot.com Thursday 28 February 13
  39. 39. Mobile First HTML5, CSS3, Javascript Responsive design Gwen Vanhee @gwenvanhee Thursday 28 February 13
  40. 40. I thought it would be a good idea to learn more about HTML5 for mobile. @gwenvanhee Thursday 28 February 13
  41. 41. Gwen Vanhee @gwenvanhee An interactive HTML5 drawing experiment Code::Brush Thursday 28 February 13
  42. 42. Conceptual, visual and functional, #mobilefirst stimulates you to remove the clutter and focus on what really matters. And thats a very good thing. Always. Mobile First Thursday 28 February 13
  43. 43. We are at a turning point where websites will be visited mostly by mobile devices. A new site should last for 3 years, so #mobilefirst thinking is a must. Mobile First Thursday 28 February 13
  44. 44. A few insights... Thursday 28 February 13
  45. 45. Focus on mobile friendly browsers. (IE is not one of them.) Thursday 28 February 13
  46. 46. Mobile optimalisation simply means downsizing the hell out of your download size and page requests. Thursday 28 February 13
  47. 47. Thursday 28 February 13
  48. 48. Thursday 28 February 13
  49. 49. Thursday 28 February 13
  50. 50. http://blog.netvlies.nl/design-interactie/retina-revolution/ Thursday 28 February 13
  51. 51. Thursday 28 February 13
  52. 52. Thursday 28 February 13
  53. 53. Thursday 28 February 13
  54. 54. Progressive Enrichment mobile > tablet > desktop Thursday 28 February 13
  55. 55. Too often we discuss what should happen when the canvas becomes smaller. #mobilefirst thinking means discussing what happens when the canvas becomes bigger. @gwenvanhee Thursday 28 February 13
  56. 56. Mobile Journalist iOS5 & 6 iPhone 4 & 5 Objective-C Wim Van Buynder @wimvanbuynder Thursday 28 February 13
  57. 57. Start First time Yes First run Login Approval Failed No Homescreen Record Import from library Cancel Pick image Last file takenArchive Draft Sent Uploading List item Back Edit Settings Configuration Cancel Next Collection view Back Next DetailpageDetailpage Back Update Add Disclaimer Log out Launch application Flowchart Uploader app VRT Thursday 28 February 13
  58. 58. Handling large chunks of data. Thursday 28 February 13
  59. 59. the iPhone Application Document Directory Application Application Handling large amounts of data is not really this directory’s specialty. Thursday 28 February 13
  60. 60. the iPhone Application Document Directory Application Application Global Temp Directory Saving created data directly into the iPhone’s global ‘temp’ directory. (tmp/mobilejournalist) Thursday 28 February 13
  61. 61. Thursday 28 February 13
  62. 62. “ It works like a charm. What a wonderful app you guys made. Thanks! “ - Feedback week 1 - Thursday 28 February 13
  63. 63. Thursday 28 February 13
  64. 64. “ HEY GUYS! THE APP FUCKING STOPPED WORKING FOR SOME REASON!!! “ - Feedback week 3 - Thursday 28 February 13
  65. 65. Thursday 28 February 13
  66. 66. the iPhone Application Document Directory Application Application Global Temp Directory Saving created data directly into the iPhone’s global ‘temp’ directory. (tmp/mobilejournalist) Automatically erasing random content to make space. Thursday 28 February 13
  67. 67. the iPhone Application Document Directory Application Application Global Temp Directory Saving created data directly into the iPhone’s global ‘temp’ directory. (tmp/mobilejournalist) When data is saved as draft the app automatically saves this content in the document directory. Thursday 28 February 13
  68. 68. I knew there was something like dummy-proof or granny-proof. Now I now there is also journalist-proof. @wimvanbuynder Thursday 28 February 13
  69. 69. special thanks to Wim Van Buynder @wimvanbuynder Gwen Vanhee @gwenvanhee Bram Monstrey @brmm Thursday 28 February 13
  70. 70. Thomas Joos, Little Miss Robot Experience Director, Partner @thomasjoos Defining a great experience design process. Thank you. Thomas Joos, The Technical Learning Curve FITC Amsterdam 2013 @thomasjoos Thursday 28 February 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×