Jukka-Pekka Keisala

Thoughts on Future Of Interaction video

jp — Wed, 09 Nov 2011 21:03:02 +0000

Productivity Future Vision (2011) by Microsoft Office Team

After watching the video I had two things in my mind.

1. Microsoft is really betting and moving somewhere with their Metro UI.
2. There is a lot of touch gestures involved in their future.

Like I wrote previously my ramblings on Metro UI. I am really liking Metro UI and where Microsoft vision on the Metro design is heading. The video above is really showing how typography and chromeless UI can make feel friendly, seemless and responsive but there is still something missing on Metro UI. I am not sure what it is that I am missing. Perhaps pictures under class panel is not enough for us? We should feel them like everything else we feel on our 3 dimensional world that we call it reality. Our hands can do a lot more than just multi-touch with our tip of fingers.

I just read awesome blog post A Brief Rant on the Future of Interaction Design who had exactly same thoughts with me on touch interfaces. Although, his post goes a lot deeper on the analysis of it.

Challenge for the future of computing really isn’t how to make pictures behind class interactive. It is without the doubt 3D and ability to feel the objects, but it will take years before someone breaks that puzzle.

I hope Microsoft R&D is working their ass off to bring Kinect and Touch together.

The Touch, end of mouse?

jp — Sun, 25 Sep 2011 14:43:48 +0000

I have been working a lot with Ipad and mobile sites these days. Mostly trying to create and redesign optimized experience for Ipad users on the existing web page without forgetting mouse. At the same time I have tested and sandboxed some apps for Windows 8 while looking into Microsoft approach to touch interfaces on their new Metro UI.

Touch is definitely the new black on interface design. Like the Director of Program Management for the Microsoft Windows User Experience Team Jensen Harris mentioned on his presentation in Microsoft’s BUILD Windows conference couple of weeks back. Harris was focusing on touch-first experience and then comes the rest which by the way resamples what Luke Wroblewski talked while back on mobile interfaces . Harris said that in coming years all screens will be touch enabled.
It will be like a screen without touch is like a computer without Internet connection. If you are interested how Microsoft is focusing for Metro UI in the future, I highly recommend watching this presentation to anyone who works with UI also check out Designing Metro Style Apps. No matter if you are Web, Windows, iOS or Android developer.

Windows 8 Start Screen

Maybe today it feels strange to think if stationary PC or laptop would have touch capabilities. It is somewhat unnatural that you reach over your laptop to the screen to move things around and then back to keyboard. But is it really so weird behavior. It is more natural than reaching your mouse, right?

Metro is user interface design-language that is heavily type based, think text, and which uses design principles of classic Swiss graphic design. Metro design excludes traditional icons, superfluous graphic and window chrome and it puts actual content up front. It uses large and clean typography and pages with lateral scrolling. Result is clean, sleek user interface that gets out of the way.

Metro UI and Touch behavior requires Windows developers to re-think their applications. How to remove all the chrome from the app is going to be a challenge to anyone who needs to develop on Windows 8. How does a developer re-design Microsoft Word -ribbon to touch? Should one go Apple way and remove from Ribbon those 95% of functionalities that is not used? This is not what Microsoft is used to do. Microsoft strength and burden has been always backwards compatibility and more-is-more features. Now the only way to go forward is to simplify so the software program can become an “app”. It is true that there is still Windows 7 alike Desktop environment but for future developers, if developer wants to develop app that can be used on all MSFT environments they need to forget desktop and go to Metro style. The Desktop in the future is for heavy users.

“When we were an agrarian nation, all cars were trucks. But as people moved more towards urban centers, people started to get into cars. I think PCs are going to be like trucks. Less people will need them. And this is going to make some people uneasy”.
- Steve Jobs at D8 in 2010

I was really impressed when I saw where Microsoft is heading with Windows 8. Honestly I though the game was between Apple and Google but it is nice to see Microsoft is still on the game. It is not as “lickable design” as iOS but it is definitely something new and for Microsoft defense it is just a developer preview. Microsoft is inviting developers around the world to develop on it and with their huge developer eco-system there will be innovative applications coming out in coming months. Also, if you take consideration all the effort and help from Nokia on handsets and gaming community on XBox this unified OS experience will take Windows somewhere into completely new level.

Tech documentaries to watch

jp — Wed, 13 Jul 2011 06:31:57 +0000

While ago I watched on YouTube watched Code Rush, the documentary about Netscape’s developers back in 2000 and their decision to release their code as open source. After seeing it I got hungry about seeing more of these Web/Programming related docs. So, here is my list of few that I have found so far.

Code Rush

The documentary about Mozilla in 2000 and their decision to release their code as open source.

Triumph of the Nerds

A great history of PC from its origins to the launch of Windows 95.

Nerds 2.0.1: A Brief History Of The Internet

A history of Arpanet, The Internet, and the web before the dot-com bust.
NerdTV

A hit or miss interview series with various influential people in the tech industry. Avoid #9 like the plague. I’ve been looking forward to the second season for years, but I’m wondering now if it’ll ever get released. The page hasn’t been updated in quite awhile

“Download: The True Story Of The Interet“.

It picks up right where Nerds 2.0.1 left off and covers the dot-com bust and Web 2.0 up to early 2008.

Revolution OS

Is a decent history of the open source movement and Linux.

The KGB, the Computer and Me

About Cliff Stoll’s experiences catching crackers working for the Soviet Union at the end of the cold war.

Plug and Pray

An extraordinary documentary about computer science, robotics and a homage to the legendary MIT professor Joseph Weizenbaum.

startup.com

Traces the birth and failure of new media company govWorks.com.

Project aardvark

Four interns are brought into Manhattan and given 12 weeks to design, develop, debug and ship a program that will change the way computer geeks around the world fix their friends’ computers

The Internet Archive has lots of old computer and technology videos, I have not check it yet but maybe there are some pearls.

Songs that make you feel better

jp — Thu, 24 Feb 2011 14:16:38 +0000

WebKit Radial Gradients (Circle gradient)

jp — Sun, 06 Feb 2011 20:21:42 +0000

WebKit in January 2011 released new gradient syntax that is closer to w3c recommendation and Mozilla implementation.

The new syntax has four gradient functions:

linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()

On this post I am exploring radial implementation, radial-gradient() and repeating-radial-gradient(). Notice that there is also linear gradient which is most likely be used more often than the radial.

Using CSS gradients in a background lets you display smooth transitions between two or more specified colors; this lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly.

A gradient specified using circles is called a radial gradient. You specify a radial gradient by setting the type to radial and specifying a start inner circle and end outer circle. Each circle is specified by a center and a radius. The color values change gradually from the circumference of the inner circle outward to the circumference of the outer circle.

Examples

-webkit-radial-gradient(circle, white, black);

-webkit-radial-gradient(center, 20px 20px, white, black);

-webkit-repeating-radial-gradient(left, red 10%, green 20%, blue 30%);

-webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);

-webkit-repeating-linear-gradient(top left, red, red 5px, white 5px, white 10px);

-webkit-repeating-linear-gradient(-5px -5px, circle, #bfeeff, #bfeeff 15px, #fff 15px, #fff 30px, #bfeeff 30px, #bfeeff 40px);

See working demo here if you are running latest WebKit (tested on WebKit Version 5.0.3 (6533.19.4, r77734))

References

W3C Proposal for Radial Gradients: http://dev.w3.org/csswg/css3-images/#radial-gradients
W3C Proposal for Background Position: http://www.w3.org/TR/css3-background/#the-background-position
WebKit’s original proposal: http://webkit.org/blog/175/introducing-css-gradients/
WebKit’s new implementation: http://webkit.org/blog/1424/css3-gradients/
Mozilla implementation: https://developer.mozilla.org/en/Using_gradients

VMWare Fusion Keys Reference

jp — Tue, 09 Nov 2010 08:50:44 +0000

I just recently bought new work laptop and setup Windows 7 on it. One thing that takes time to get used to is differences in keyboard shortcuts. I have put here some of the basic commands mainly for my own reference so I wont forget.

Reference

PC	Macintosh / Fusion
Ctrl+Alt+Del	To send Ctrl+Alt+Del to a virtual machine: From the Fusion menu, click Virtual Machine > Send > Crtl+Alt+Delete. If you are using an external PC keyboard, press Ctrl-Alt-Delete. On a full-sized Macintosh keyboard, press Control-Option-\|X>. The \|X> (Forward Delete) key is below the help key. On a Macintosh laptop keyboard, press Fn-Ctrl-Option-Delete.
Delete	The Delete key on an Apple keyboard is actually the backspace key to all other operating systems. To send the PC Delete key to a virtual machine: From the Fusion menu, go to Virtual Machine > Send Key > (Forward Delete) On a MacBook or MacBook Pro keyboard, press Fn-Delete. On a full-sized keyboard, press \|X>. The \|X> (Forward Delete) key is below the Help key.
Insert	To send the Insert key to a virtual machine: On a full-sized Mac keyboard, press the Help key. On older MacBook or MacBook Pro keyboards, press Fn-M. Newer MacBook models do not support Fn-M, and mapping the Insert key (to any convenient key combination chosen by the user) can be achieved in Fusion’s menu bar under VMware Fusion > Preferences > Keyboard & Mouse > Key Mapping.
Print Screen	To send the Print Screen key to a virtual machine, press F13 on a full-sized Mac keyboard.
Alt-Gr	To send the Alt-Gr key to virtual machine: Press the right Option key on a full-sized Mac keyboard. On European MacBook and MacBook Pro keyboards, press the Enter key next to the right Command key. Notes: This is overridden when Num Lock is used for numeric keypad support. To disable this Alt-Gr mapping, open the file: ~/Library/Preferences/VMware Fusion/preferences in a text editor and the line: pref.mapISONumpadEnterToAltGrEnabled = “FALSE”
Selecting multiple list items	Press and hold Ctrl-Option, then click the multiple items. Disable the mouse shortcut for the secondary button (see beginning of Resolution, above), and use Ctrl+click as you would in a regular Windows environment.
Num Lock	To send the Num Lock key to a virtual machine (allowing the use of the numeric keypad), press Clear on a full-sized Mac keyboard.
Function keys	Press fn + the desired function key. To make the Mac function keys act like regular function keys, and trigger the special functions with fn + the function key instead, go to Apple menu > System Preferences > Keyboard (or Keyboard & Mouse > Keyboard), and select Use all F1, F2, etc. keys as standard function keys.

For all keyboard shortcuts, not necessarily those pertaining to Fusion, see Apple’s Knowledge base article Mac OS X keyboard shortcuts.

Starting to blog again

jp — Thu, 21 Oct 2010 20:16:40 +0000

I have not been writing anything for ages on my site mostly because I have been quite busy with these two on the picture below.

However, now I have decided to reserve some time and start to write some posts again, mostly about technical and business challenges that I face daily in my work while developing solutions in Sitecore and Umbraco. Also, I want to write about application development in general using jQuery and other interesting front-end technologies that I bump into. So, if you are interested about these topics come and check out this blog once in a while and drop a comment.

List of useful websites on the web

jp — Sun, 14 Feb 2010 11:47:21 +0000

I found most of these links from reddit (source) and thought I will share and save it to my blog as future reference. There are many new that I have not check it out as well as many old ones that I had forgotten.

http://www.grooveshark.com – For listening to music.

http://www.printfriendly.com – Makes any page printer-friendly.

http://www.ted.com – Interesting and informational videos on a whole range of topics.

http://www.stumbleupon.com – Finds websites based on what you’re interested in and how other people’s ratings.

http://www.slickdeals.net – For finding good deals/freebies/contests.

http://www.bugmenot.com – Usernames/passwords for sites requiring registration.

http://www.mailinator.com – Temporary e-mail for when you want to sign up for something and not get spammed.

http://www.google.com/cse?cx=003849996876419856805:erhhdbygrma&ie=UTF-8&q=&sa=Search – Google torrent search

http://www.pipl.com – Looking up people based on username, name, email, or phone #.

http://ocw.mit.edu/OcwWeb/web/home/home/index.htm – MIT OpenCourseWare – entire courses, often including lecture videos available for free online.

http://ninite.com/ – Great website to create an installation package of applications for when you’re reinstalling your OS or have just purchased a new computer.

http://www.retailmenot.com – Coupons

http://www.kayak.com – Awesome site for when you’re planning a trip.

http://www.nophonetrees.com/ – Get directly in touch with a human when you’re calling customer service/support.

http://www.scribd.com – Ebook search.

http://www.ovguide.com – Search engine for movies/tv shows.

http://www.tineye.com – Reverse image search.

http://downforeveryoneorjustme.com/ – self-explanatory.

http://www.popurls.com – link aggregator.

http://www.knowyourmeme.com

http://www.gethighnow.com – audio and video illusions.

http://tvtropes.org – “Tropes are devices and conventions that a writer can reasonably rely on as being present in the audience members’ minds and expectations. On the whole, tropes are not clichés. The word clichéd means “stereotyped and trite”. In other words, dull and uninteresting. We are not looking for dull and uninteresting entries. We are here to recognize tropes and play with them, not to make fun of them.”

http://www.meetup.com – Meet up with a local group that share your interests.

http://meebo.com – Web-based chat without downloading the actual client (AIM, Yahoo, MSN, etc.)

http://www.boston.com/bigpicture – Amazing, high-quality, pictures from around the world.

http://simple.wikipedia.org/wiki/Main_Page – Wikipedia – in layman’s terms.

http://opendns.org – Safer surfing. Can block sites and protect your network.

http://studyblue.com – Great site to get notes/past exams for college students.

http://www.whatismyip.com – Tells you your IP address.

http://mp3cut.net/ – Cutting/splitting mp3s.

http://ceevee.com/ – Build/maintain a resume.

http://www.cutmypic.com/ – Crop a picture.

http://www.mygazines.net/ – Magazines online.

http://tinychat.com – Create a chatroom. Has web-cam and microphone support.

http://www.mint.com/ – Money management.

http://www.deviantart.com – For anything art-related. Good site to get wallpapers.

http://www.whatshouldireadnext.com/search – Gives you book suggestions based on books you’ve liked before.

http://woot.com – Posts one good deal per day.

http://www.filleritem.com/ – Finds filler items for Amazon so you have enough to get free shipping.

http://fantasti.cc – aggregates most Porn 2.0 sites

http://labs.google.com/sets – Looking for more parts of a set of words (i.e. Entering Mars, Earth, Venus, Jupiter will yield Saturn AND MAYBE PLUTO)

http://chir.ag/projects/tip-of-my-tongue/ – GOOD LORD MAN WHAT IS THAT WORD. Well now you know.

http://www.whois.net/ – Finding the WHOIS info of a domain

http://www.tastespotting.com/ – Amazing food and amazing recipes with amazing pictures. Go indulge your mental stomach while you plan on indulging your physical one.

http://www.whosampled.com/ – Who sampled what music

http://downforeveryoneorjustme.com/ – Is that website down for every-ah you get it

http://www.synchtube.com/ – Watch youtube with your friends (syncs youtube between multiple viewers)

http://www.livemocha.com/ – Learn a new language.

http://passcracking.ru/ – Crack hashes.

http://www.allrecipes.com – Best recipe site I know

http://tutsplus.com/ – tutorials for a bunch of adobe design programs

http://colorschemedesigner.com/ – useful for website color schemes

http://www.smashingmagazine.com/ – design blog

https://thepiratebay.org/ – While it lasts

http://www.dropbox.com – Free service that syncs a folder on your computer to an online data store.

http://network-tools.com Pings, trace routes, dns lookups, dns reverse lookups, whois (domain name owner details, ip address owner details). A total swiss army knife of uh, network tools.

http://delicious.com/ – social bookmarking

www.gigapedia.org: ebooks (for those hard to find textbooks).

www.metacritic.com : aggregrate movies/films/games ratings from all major critics.

http://pandora.com – Another great free music site. Unlike Grooveshark, you can’t freely play any song you want, but it has a fantastic algorithm for discovering similar music so it takes a lot less effort to set it up to play a wide variety of things I like – no need to pick out lots and lots of songs from the catalog beforehand. Yes, Grooveshark does have that same radio feature, but it’s sorely lacking.

http://www.gutenberg.org – for a transcript of any book written before copyright laws. Includes some semi-professional volunteer audiobooks.

http://www.spanishdict.com – as a Spanish major, I’ve found this to be the best and most complete Spanish-English dictionary if you’re looking for a thorough and clear definition.

http://tvshack.net/ has lots of tv shows and movies for streaming. I use a proxy to get around the hour viewing restrictions that some of the shows have.

http://pixlr.com (fixed) I stopped using photoshop since I found this.

http://www.blindtextgenerator.com/lorem-ipsum – Dummy text generator.
http://dummyimage.com/ – Dummy Image Generator.
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager07.html – Adobe Flash player configuration.
http://www.reemst.com/calvinandhobbes/stripsearch – Calvin and Hobbes Extensive Strip Search.
http://challonge.com/ – Tournament Bracket Generator.
http://www.doihaveadeadpixel.com/ – Do I Have A Dead Pixel.
http://accidentsketch.com/ – Accident sketching online.
http://www.freemaptools.com/ – Maps you can make use of…
http://radiotuna.com/ – Discover Online Radio.
http://www.gazopa.com/ – Discover similar pictures.
http://errorlevelanalysis.com/ – Image Error Level Analyzer.
http://www.rainymood.com/ – Rainy Mood.
http://subreddits.0fees.net/comment_stats.htm – Reddit Comment Statistics.
http://www.radioreddit.com:8000/ – Reddit Radio.
http://subredditfinder.com/ – Sub-Reddit Finder.
http://www.visca.com/regexdict/ – Regex Dictionary.
http://www.gskinner.com/RegExr/ – OnLine Regex Testing Tool.
http://scr.im/ – Convert your email address into a short, cute and safe link you can share it more safely.
http://showmewhatswrong.com/ – Instant screen recordings.
http://www.subs.to/ – Search Subtitles.
http://www.youtube.com/disco – YouTube Music Discovery Project and Playlist Creation Tool.

http://www.wikimapia.com – Satellite maps with explanations, tags, links

http://www.marinetraffic.com – Every ship at sea right now

http://www.radioreference.com – Live police & emergency scanner traffic
http://www.flightaware.com – Every IFR airplane airborne in US airspace
http://www.liveatc.net – Live Air Traffic Control radio monitor
http://www.airliners.net – Photos of almost every aircraft in existence
http://www.the506.com/nflmaps – NFL games broadcast map
http://www.gifexplode.com – separate an animated GIF into its component images

vampire weekend – contra

jp — Thu, 04 Feb 2010 09:27:53 +0000

Social job network explained

jp — Mon, 18 Jan 2010 15:01:54 +0000

It’s amazing how close to the truth this video is.