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


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 WOZZYOU 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 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’


The Learning Curve, you said?


iPhone PrototypeNative 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://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/


http://stackoverflow.com/questions/2658738/the-simplest-way-to-resize-an-uiimage

http://stackoverflow.com/questions/2658738/the-simplest-way-to-resize-an-uiimage

http://stackoverflow.com/questions/2645768/uiimage-resize-scale-proportion

http://stackoverflow.com/questions/2645768/uiimage-resize-scale-proportion

http://vocaro.com/trevor/blog/2009/10/12/resize-a-uiimage-the-right-way/

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.

@wimvanbuynderiOS Development tip: keep reading the fucking sdk. #rtfsdk


Radio+ BetaResponsive WebsiteHTML5, CSS3, Javascript, Node.JSRest API Webservice(http requests, JSON)Last.FM API

Gwen Vanhee@gwenvanhee

Bram Monstrey@brmm


Channel nameChannel logoCurrent Show Current PresentorCurrent ArtistPlaylist


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


A few tiny thoughtsthat 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.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


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


Web services

Radio+Node

request additional content (radio host, program guide, ...)receives server updatesaggregates feed contentpush update to client

PushNode


Last.FM API

Web Client(html5)


FeedNode

request content (twitter, last.fm)

Version 2


Web services

Radio+Node

request additional content (radio host, program guide, ...)receives server updatesaggregates feed contentpush platform optimized update to client

PushNode


Last.FM API

Web Client(html5)


Version 3

Smart TV(html5)

iOS Client(obj-c)

Android Client(java)

FeedNode

request content (twitter, last.fm)


#client overloadThursday 28 February 13

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 -


littlemissrobot.comThursday 28 February 13

Mobile FirstHTML5, CSS3, JavascriptResponsive design



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

@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 Enrichmentmobile > 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 JournalistiOS5 & 6iPhone 4 & 5Objective-C



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


Handling large chunks of data.


the iPhoneApplication

DocumentDirectory

Application

Application

Handling large amounts of data is not really this directory’s specialty.



DocumentDirectory

Application

Application

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



DocumentDirectory

Application

Application



Automatically erasing random content to make space.



DocumentDirectory

Application

Application



When data is saved as draftthe app automatically savesthis 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



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 CurveFITC Amsterdam 2013@thomasjoos


fitc 2013 - the technical learning curve

Technology

cgfloat scaledwidth

height cgfloat targetwidth

height cgfloat scalefactor

width cgfloat targetheight

size cgfloat width

cgfloat widthfactor

scaledwidth thumbnailrect

thumbnailpoint thumbnailrect