Download - FITC 2013 - The Technical Learning Curve
Thomas Joos, Little Miss Robot
Experience Director, Partner@thomasjoos
The Technical Learning CurveThomas Joos | Little Miss Robot | @thomasjoos
Thursday 28 February 13
-(void) helloFragmentation;
Retina
iOS4.0
iOS5.0iOS6.0
320x480 640x960
HTML5
CSS3
Node.js
Objective-c
Java
.NET
OpenFrameworks
IE8IE9 Chrome
Safari
Firefox Opera
C++ Javascript ActionScript
XML
JSON
PHP
XAML
Flash
Smart TV720x1280xHDPI
HDPI
mHDPI
lHDPI
Klingon
Thursday 28 February 13
Design is not just what it looks like and feels like.Design is how it works.
-‐ Steve Jobs
Thursday 28 February 13
YO STEVE! I’M REALLY HAPPY FOR YOU AND IMA LET YOU FINISH...
BUT WITHOUT WOZZYOU HAD JACK SHIT!
Thursday 28 February 13
-(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 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
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
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
A developer’s toolbox:1 Passion for digital innovation2 Interested in interactive design & ux3 Great programming skills4 The ability to say ‘I don’t know’5 Eager to find out ‘how the hell it works’
Thursday 28 February 13
The Learning Curve, you said?
Thursday 28 February 13
Thursday 28 February 13
iPhone PrototypeNative front-end client (iOS5.0)Rest API Webservice (http requests, JSON)Last.FM API
Wim Van Buynder@wimvanbuynder
Thursday 28 February 13
- (UIImage *)imageByScalingProportionallyToSize:(CGSize)targetSize
Interesting articles: http://stackoverflow.com/questions/2658738/the-simplest-way-to-resize-an-uiimagehttp://stackoverflow.com/questions/2645768/uiimage-resize-scale-proportionhttp://vocaro.com/trevor/blog/2009/10/12/resize-a-uiimage-the-right-way/
Thursday 28 February 13
- (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
Refactoring code.
Thursday 28 February 13
Thursday 28 February 13
- (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
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.
@wimvanbuynderiOS Development tip: keep reading the fucking sdk. #rtfsdk
Thursday 28 February 13
Radio+ BetaResponsive WebsiteHTML5, CSS3, Javascript, Node.JSRest API Webservice(http requests, JSON)Last.FM API
Gwen Vanhee@gwenvanhee
Bram Monstrey@brmm
Thursday 28 February 13
Channel nameChannel logoCurrent Show Current PresentorCurrent ArtistPlaylist
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 February 13
A few tiny thoughtsthat 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 -
Thursday 28 February 13
“ 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
“ Isn’t Javascript a front-end scripting language? Maybe it’s just me... “
- the inner voice speaking -
Thursday 28 February 13
“ How cool would it be to just pull this off. “
- the ego speaking -
Thursday 28 February 13
Node.JSA 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
Thursday 28 February 13
Web services
Radio+Node
request content (twitter, last.fm)request additional content (radio host, program guide, ...)receives server updatespush update to client
PushNode
Server Side Polling for updates
Last.FM API
Web Client(html5)
NOA, On Demand, PlaylistAdditional Content (Radio host, program guide, ...
Version 1
Thursday 28 February 13
Web services
Radio+Node
request additional content (radio host, program guide, ...)receives server updatesaggregates feed contentpush update to client
PushNode
Server Side Polling for updates
Last.FM API
Web Client(html5)
NOA, On Demand, PlaylistAdditional Content (Radio host, program guide, ...
FeedNode
request content (twitter, last.fm)
Version 2
Thursday 28 February 13
Web services
Radio+Node
request additional content (radio host, program guide, ...)receives server updatesaggregates feed contentpush platform optimized update to client
PushNode
Server Side Polling for updates
Last.FM API
Web Client(html5)
NOA, On Demand, PlaylistAdditional Content (Radio host, program guide, ...
Version 3
Smart TV(html5)
iOS Client(obj-c)
Android Client(java)
FeedNode
request content (twitter, last.fm)
Thursday 28 February 13
#client overloadThursday 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.comThursday 28 February 13
Mobile FirstHTML5, CSS3, JavascriptResponsive 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 thats a very good thing. Always.
Mobile First
Thursday 28 February 13
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
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 Enrichmentmobile > tablet > desktop
Thursday 28 February 13
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
Mobile JournalistiOS5 & 6iPhone 4 & 5Objective-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 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
Handling large chunks of data.
Thursday 28 February 13
the iPhoneApplication
DocumentDirectory
Application
Application
Handling large amounts of data is not really this directory’s specialty.
Thursday 28 February 13
the iPhoneApplication
DocumentDirectory
Application
Application
GlobalTemp Directory
Saving created data directly into the iPhone’s global ‘temp’ directory.(tmp/mobilejournalist)
Thursday 28 February 13
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 iPhoneApplication
DocumentDirectory
Application
Application
GlobalTemp 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
the iPhoneApplication
DocumentDirectory
Application
Application
GlobalTemp Directory
Saving created data directly into the iPhone’s global ‘temp’ directory.(tmp/mobilejournalist)
When data is saved as draftthe app automatically savesthis content in the document directory.
Thursday 28 February 13
I knew there was something like dummy-proof or granny-proof. Now I now there is also journalist-proof.
@wimvanbuynder
Thursday 28 February 13
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 you. Thomas Joos, The Technical Learning CurveFITC Amsterdam 2013@thomasjoos
Thursday 28 February 13