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

Node.js

Objective-c

OpenFrameworks

IE8IE9 Chrome

Safari

Firefox Opera

C++ Javascript ActionScript

Smart TV720x1280xHDPI

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/

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

First time Yes First run Login

Approval

Failed

Homescreen

Record Import from library

Cancel Pick image

Last file takenArchive

Uploading

List item

Back Edit

Settings

Configuration Cancel Next

Collection view

Back Next

DetailpageDetailpage

Back Update

Disclaimer

Log out

Launch application

Flowchart Uploader app VRT

Handling large chunks of data.

the iPhoneApplication

DocumentDirectory

Application

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

DocumentDirectory

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

Automatically erasing random content to make space.

DocumentDirectory

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

cgfloat scaledwidth

height cgfloat targetwidth

height cgfloat scalefactor

width cgfloat targetheight

size cgfloat width

cgfloat widthfactor

scaledwidth thumbnailrect

thumbnailpoint thumbnailrect

Technology

fitc - here be dragons: advanced javascript debugging

transdermal delivery of fitc-dextrans with different

beefing up air - fitc ams 2012

for blackberry sleek protection for blackberry curve...

fitc - 2012-04-23 - responsive web design

fitc android for flashers

technical specifications - theatre - curve · technical...

fitc netpulse webinar 2015 - a world of apps

ns fitc guidelines

gravity roller technical handbook 2011 - · pdf file3...

fitc whats new in es6 for web devs

supplemental fig. s1 - the journal of immunology cd62l...

life of p fitc & createupstate

thermodynamic incompatibility and complex formation in...

a survey of elliptic curve cryptosystems, part i:...

windows store app design (fitc)

technical yield curve building

training deep gaussian processes using stochastic...

pensacola state college fitc booklet

fitc 2010 slides