Day two most interesting things
A new trend, the rise of the machines
Nest, smart thermostat with app and API, updates itself
Arduino, open source prototyping platform
Facebook native app is twice as fast than html5 app, so users consume twice as much content.
Input file access, you can now upload photos within the browser in iOS6
Facebook now has 1bn monthly users
Users see friend activity and end up at your mobile web app
130 million monthly users on Facebook app center
Facebook mobile web payments, two screens with integrated payments
Mobile apps are now being built with javascript which is shared for each platform, User interface is then rendered using native code
Content in context, Focus on people and their context
Content is key, contextual content is more key
Social, local, mobility, solomo
Wireframe your prototypes, with 20%, 40% and 100% markers, Doug chiang inspired, machanika
Wireframes are much much cheaper than actually designing, do lots
Use the 53ways Paper app on iPad.
Fluid ui prototyping tool allows you to test on the web, scan with qr code to test on device.
Test and iterate, doesn't matter if you are right or wrong.
Fail cheap, fail early
Order matters in 3d css properties
Develop 3d css in chrome with flags composite layer borders
Avoid virtual reality gimmicks, the purpose of web design is to be better than reality
Boilerplates prevent you from understanding the original problems
If you dont know what its doing, why is it there?
You should start developing with nothing, it forces you to consider the implications of adding each thing
Pages are getting larger with polyfills just to support html5 and new features
Teach problem solving skills
Don't allow two tier developers, ones who write, and ones who cobble together solutions.
Always explain the problems before giving out the solutions.
Backbone.js mvc allows you to plumb things yourself
Node.js helps server side code and building
Require.js amd loader use with alternative syntax
Modules provide structures and conventions to keep your code organised
Unit testing, use jasmine, describe, it, expect
Automation, grunt command line javascript tool
Test using headless webkit automated tests phantom.js
Grunt can watch files, then run other tasks when there is a change
Meteor framework is example of next step where javascript is shared between front and back end
____________________________________________________
Day two full notes
Daniel Appelquist - Bluevia
Bluevia create apis for Telefonica
Phone designs used to be so diverse, now they are all black rectangles
A new trend, the rise of the machines
Machine to machine, connected cars, appliances
Current solutions are driven by cost savings, closed systems, no apis, preserving existing business models
Nest, smart thermostat with app and API, updates itself
Nest must be doing something right because they are being sued
Electric vehicles are now all coming with their own apps
Drive to improve, recording mileage, speed etc
Arduino, open source prototyping platform
Telefonia have created a gprs mod for arduino
Arduino interconnected devices
Curzon memories app, control a model cinema
Cosm community, share data from arduino
Mbed, web based ide, arduino clone
Kickstarter startup funding for projects
Raspberry pi is a great prototyping platform
Lego mindstorms also used in hack days
Plug and play devices, coming into mainstream
3d printing
Global m2m sim from bluvia
Maker movement or homebrew?
Simon Cross - Facebook
Html5 on the desktop is here, on mobile it isn't
2010 facebook app was html5, because facebook were web developers and wanted the ability to push code out fast
2012 facebook app is native, because it's twice as fast as the html5 app.
Because it's faster users consume twice as much content.
More users use mobile web fb than ios and android app combined.
7000 devices a day access mobile web app
Performance, distribution, monetization are holding web apps back.
Cpu and frame rate, access to device features
Moores law applies to mobile, soon devices will catch up
Geolocation, and device sensors now available
Input file access, you can now upload photos within the browser in iOS6
No webgl or 3d games on mobile
No audio or video capture yet in the browser.
Founding members of coremob.org
Agre on core features, test, use cases
Ringmark mobile web test suite by coremob
Dolphin android browser is first the pass the tests
Webplatform.org open wiki for standards
Attacking these problems of html5
There are still problems with App store ecosystems, waiting for promotion etc
Developers are using phonegap just to be in the appstore
Facebook now has 1bn monthly users
600 million monthly mobile users, twice as engaged
Open graph structured data
Users see friend activity and end up at your mobile web app
Facebook largest referrer to soundcloud
174 million users sent to other app stores
Much more traffic sent to mobile web apps
Facebook app center is a list of mobile web apps
130 million monthly users on app center
35% more like to return the next day
Build for iOS first because it monetises well
Display ads only work for certain types of app e.g. News app
Credit card payments, 9 steps to enter details on a phone
Carrier billing, transaction costs are already set up, but too many operators
Bango, boku, zong allow you to take mobile payments
Facebook mobile web payments, two screens with integrated payments
Usage of web on mobile is different. Users want faster information rather than exploring
Eran Zinman - Conduit
Choice of Html5 apps or native apps or hybrid approach.
Html 5 is more than a technology, it affects how the company runs and employs staff
Phonegap, jqtouch, jquery, rest apis
Not so fast
iScroll library solution for scrolling html elements instead of browser scrolling
Webkit browsers are not all consistent
No hardware acceleration, bad performance
Split components into native elements header footer and web view.
Native to web view bridge for communication
Windows phone has a very unique ui
And at that time was ie 7, which doesn't have html5 or css3
Use backbone to separate views from code
Javascript sent information to native code, which would draw views
Rendered views in C for windows phone
Core javascript is shared for each platform
User interface is rendered using native code
Linkedin mobile app, hybrid html5 and native, 4mb of js, html and css
Facebook mobile app, server based html css and js, wasn't fast so moved back to native
Eric Loehfelm - Universal Mind
Content in context, Contextual design
Consider where and how the content is consumed
Experience design challenge
Focus on people, their context
Graceful degredation,
Progressive enhancement, adaptive, responsive, target sizes not devices
Content is key, contextual content is more key
Social, local, mobility, solomo
Mobile first approach
Test on real people,
Use analytics to see whats going on
Functionality vs cost
Mobile responsive site
Native apps with widgets loaded using html5 and css3 js
Localisation,
Twitter bootstrap
Backbone
Custom webviews
Document journey as you go along
Cheap and fast with failures
Wireframe your prototypes, with 20%, 40% and 100% markers
Doug chiang inspired wireframes, machanika
Cheaper than actually designing.
Use the 53ways Paper app on iPad.
Fluid ui prototyping tool allows you to test on the web, scan with qr code to test on device.
Export html website, export flow diagrams
Test and iterate, doesn't matter if you are right or wrong.
Design is about experience not how it looks.
Users and context
Fail cheap, fail early
Peter Westendorp - Mint Digital
3D css has gpu acceleration
Normal perspective is around 700px,
Transform origin defaults to 50% 50%
Transform style preserve 3d to set all children
Order does matter in css properties
Perspective or the parent means they share vanishing point
Perspective origin changes the scene camera
Backface visibility to hide other side
Get computed style on 3d transform outputs matrix 3d
Examples are Beercamp, css 3d clouds, foldable me
Test in beta versions of browsers aswell
Develop in chrome with flags composite layer borders
Chrome gpu page gives you stats
Anti alias in firefox fix by setting outline to 1px
Photon.js plugin using matrix 3d and lighting and shading
Gimbal lock, if two loops align you lose rotation. solution is to rotate only 2 axis with different speeds.
Traqball.js animation on 3d objects
Dont intersect planes, problems in Chrome.
3D css is flat planes, no proper lighting, not cross browser.
Alternatives, webgl, create in blender then import with three.js
soon we will have css custom filters, shaders bend page and add shadows
quote: Avoid virtual reality gimmicks, the purpose of web design is to be better than reality
Steve Sanderson - Microsoft
Apps need to communicate with data services
Node, rails, mongo database, backups?
Backend as a service products, stackmob, azure
used by hobbyists, client app devs, web devs
Data in the cloud, push notifications, cloud scaling, auth, cross platform, open source.
Download the example app from azure already set up.
Integrated social logins so you can add keys to the app
Edit server side editor to add columns to tables dynamic schemas.
Push notifications to change tile images or push text.
Rachel Andrew - Perch
Added code and useful hacks are used by people who don't understand the original problem
Respond.js, html5 polyfills are examples
Ie8 no media query support, why not use a fixed width site
No html5 element support, use html4 elements
Lack of css3 selectors, selectiviser polyfill is not always necessary
No solution for responsive images
Think what is the problem, constraints, solutions, polyfill or own solution.
Boilerplates prevent you from understanding the original problems
Modernizr is another example
If you dont know what its doing, why is it there?
What happens if the user doesn't have javascript, polyfills don't work?
What is safe to delete from a boilerplate? how do you know if you don't understand it
You should start with nothing, it forces you to consider the implications of adding each thing
Pages are getting larger with these polyfills just to support html5 and new features
Size matters
If developers copy and paste code they don't learn
You need to make mistakes to learn.
We are all learners and teachers.
for example Html reset removes paragraphs spacing.
Teach real html, css, javascript
Teach problem solving skills
Weighing up the pros and cons.
Two tier developers, ones who write, and ones who cobble together solutions.
Test without javascript
Always explain the problems before giving out the solutions.
Andy Appleton - Mint Digital
Javascript is growing up with mvc frameworks
Backbone.js is one that allows you to plumb things yourself
Models, collections, views
Node.js helps server side code and building
Require.js amd loader use with alternative syntax
Modules provide structures and conventions to keep your code organised
Require r.js build script can be run from Node.js
Backbone router object listens for url change and presents view
Handlebars for templates
You can put templates in html page using script type text/template. Then use dom lookup by id.
Requirejs has handlebars plugin, hbs! to load external templates
other patterns, use mediator publish subscribe. Clone backbone events to get this
implement model caching, sharing across views to reduce requests
Unit testing, use jasmine, describe, it, expect
Automation, grunt command line javascript tool
Grunt auto lints against files, grunt jasmine runner github
Test using headless webkit automated tests phantom.js
Grunt can watch files, then run other tasks when there is a change
github examples at mrappleton/jasmine-examples/
Meteor framework is example of next step where javascript is shared between front and back end
No comments:
Post a Comment