FITC 2013 - The Technical Learning Curve

Thomas Joos, Little Miss Robot
Experience Director, Partner
@thomasjoos
The Technical Learning Curve
Thomas Joos | Little Miss Robot | @thomasjoos
Thursday 28 February 13

-(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

Design
is
not
just
what
it
looks
like
and
feels
like.
Design
is
how
it
works.
-‐
Steve
Jobs

YO
STEVE!

I’M
REALLY
HAPPY
FOR
YOU

AND
IMA
LET
YOU
FINISH...
BUT
WITHOUT
WOZZ
YOU
HAD
JACK
SHIT!


-(void) goodLuckWithThat;
Pen & Paper
Adobe Photoshop
Keynote
Adobe Illustrator Men’s Bag

DESIGN
VS
DEVELOPMENT

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

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

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.

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’

The Learning Curve,
you said?

iPhone Prototype
Native front-end client (iOS5.0)
Rest API Webservice (http requests,
JSON)
Last.FM API
Wim Van Buynder
@wimvanbuynder

- (UIImage *)imageByScalingProportionallyToSize:
(CGSize)targetSize
Interesting articles:
http://stackoverﬂow.com/questions/2658738/the-simplest-way-to-resize-an-uiimage
http://stackoverﬂow.com/questions/2645768/uiimage-resize-scale-proportion
http://vocaro.com/trevor/blog/2009/10/12/resize-a-uiimage-the-right-way/

- (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 ;
}

Refactoring code.

- (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

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

Radio+ Beta
Responsive Website
HTML5, CSS3, Javascript, Node.JS
Rest API Webservice
(http requests, JSON)
Last.FM API
Gwen Vanhee
@gwenvanhee
Bram Monstrey
@brmm

Channel name
Channel logo
Current Show
Current Presentor
Current Artist
Playlist

Guys. I really think we should
move away from manual
polling as quickly as possible.
It’s Node.JS time.
@brmm

A few tiny thoughts
that crossed my mind...

“ It’s not really in the scope of this project.
Who am I kidding, it’s not in there at all. ”
- the wallet speaking -

“ If we screw this up, it’s gonna be
legen - never have to wait for it again - dary. “
- the chicken speaking -

“ Isn’t Javascript a front-end scripting language?
Maybe it’s just me... “
- the inner voice speaking -

“ How cool would it be to just pull this off. “
- the ego speaking -

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

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

Web services
Radio+
Node
aggregates feed content
push update to client
Push
Node
Last.FM
API
Web Client
(html5)
Feed
Node
request content
(twitter, last.fm)
Version 2

Web services
Radio+
Node
aggregates feed content
push platform optimized update to client
Push
Node
Last.FM
API
Web Client
(html5)
Version 3
Smart TV
(html5)
iOS Client
(obj-c)
Android Client
(java)
Feed
Node
request content
(twitter, last.fm)

#client overload

Guys. I really think we should integrate more Radio+
nodes to serve all those clients.
@Brmm

“ It’s a good idea and ima let you finish...
but it’s not going to happen.”
- the wallet won -

Gwen Vanhee
@gwenvanhee

littlemissrobot.com

Mobile First
HTML5, CSS3, Javascript
Responsive design
Gwen Vanhee
@gwenvanhee

I thought it would be a good idea to learn more about HTML5 for mobile.
@gwenvanhee

Gwen Vanhee
@gwenvanhee
An interactive HTML5 drawing experiment
Code::Brush

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

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

A few insights...

Focus on mobile friendly browsers.
(IE is not one of them.)

Mobile optimalisation simply means downsizing the hell out
of your download size and page requests.

http://blog.netvlies.nl/design-interactie/retina-revolution/

Progressive Enrichment
mobile > tablet > desktop

Too often we discuss what should happen when
the canvas becomes smaller. #mobilefirst thinking
means discussing what happens when the canvas
becomes bigger.
@gwenvanhee

Mobile Journalist
iOS5 & 6
iPhone 4 & 5
Objective-C
Wim Van Buynder
@wimvanbuynder

Start
First time Yes First run Login
Approval
Failed
No
Homescreen
Record Import from library
Cancel Pick image
Last ﬁle takenArchive
Draft
Sent
Uploading
List item
Back Edit
Settings
Conﬁguration Cancel Next
Collection view
Back Next
DetailpageDetailpage
Back Update
Add
Disclaimer
Log out
Launch application
Flowchart Uploader app VRT

Handling large chunks of data.

the iPhone
Application
Document
Directory
Application
Application
Handling large amounts of data is
not really this directory’s specialty.

the iPhone
Application
Document
Directory
Application
Application
Global
Temp Directory
Saving created data directly into the
iPhone’s global ‘temp’ directory.
(tmp/mobilejournalist)

“ It works like a charm. What a wonderful app you
guys made. Thanks! “
- Feedback week 1 -

“ HEY GUYS! THE APP FUCKING STOPPED
WORKING FOR SOME REASON!!! “
- Feedback week 3 -

the iPhone
Application
Document
Directory
Application
Application
Global
Temp Directory
Automatically erasing random content to make space.

the iPhone
Application
Document
Directory
Application
Application
Global
Temp Directory
When data is saved as draft
the app automatically saves
this content in the document directory.

I knew there was something like dummy-proof or granny-proof.
Now I now there is also journalist-proof.
@wimvanbuynder

special thanks to
Wim Van Buynder
@wimvanbuynder
Gwen Vanhee
@gwenvanhee
Bram Monstrey
@brmm

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

FITC 2013 - The Technical Learning Curve

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a FITC 2013 - The Technical Learning Curve

Semelhante a FITC 2013 - The Technical Learning Curve (20)

Mais de Little Miss Robot

Mais de Little Miss Robot (8)

Último

Último (20)

FITC 2013 - The Technical Learning Curve