Responsive Application – Yellow City

May 18th, 2012 | Posted by Huilaaja in Development | UI - (0 Comments)

I have spent couple of days developing web site / iPad / iPhone application with responsive design and mobile first principles. Project’s idea has been to test how the principles work in action and absorb some knowledge of HTML5, CSS3, how the design affects on content and what should be consider when responsive site is designed.

www.huilaaja.net/keltainenkaupunki
There hasn’t been anyone specifying the design or anyone drafting the UI. Everything has been made iterative through the hard way by me.

http://farm6.staticflickr.com/5337/7217673144_c98e8e66a4.jpgHere’s couple techniques that I have used or practiced in this project:

  • HTML5 & browsers
    • Browsers Geo Location support
  • Layout / Design
    • Mixing positioning between absolute and relative
    • Fluid design combined with responsive design
    • Using CSS3 and JavaScript for responsive design
    • Designing content primary for mobile but compromising it with desktop view
  • Google Maps API v3
    • Google Maps Markers
    • Layers on top of the map
  • CSS3
    • Rounded corners
    • Shadows
    • Animations
    • Transparent backgrounds
    • Web Fonts
  • Performance tools
    • Using Google open-source JavaScript libraries
    • Minification, compression and  combination of JavaScript and CSS files
  • Mobile frameworks
    • PhoneGap (but it’s not actually used in this project)

 

Yellow City (Keltainen Kaupunki) is small series of exhibitions of illustrations…read more about Yellow City.

 

iPhone

http://farm8.staticflickr.com/7219/7217670406_af9edb57cb.jpg 

 

iPad

 

 

 

Desktop

fullsize

Summary

I realize that this application is not perfect but it’s not meant to be one. I have quite many improvement ideas but they shall wait for the next project.

HTML5 applications seems to work quite well in various different mobile devices. I haven’t been able to test it in all devices so I would be grateful for your response and screenshots (mikko (a) huilaaja.net). Most Finnish companies don’t have resources to  create application on all devices separately and maintaining 3-6 different code base for application is unbearable. HTML5 is the key but the best language/platform really depends on nature of the application.

, , , , , , , , , , ,

Embedding Private Videos with Vimeo Pro

November 25th, 2011 | Posted by Huilaaja in Development | UI - (1 Comments)

Are you looking for the way to embed videos into your site that you don’t want anyone else to share? For example if your videos are only for certain people or users should pay for watching them. If so you might be interested of this article.

Vimeo has launched Pro account 1.8.2011 which makes sharing private videos much easier and cheaper. Price of Vimeo’s Pro account is 199$/year (150€/year = ~12€/month) and that’s all you need.

Here’s couple screenshots how you should configure secure way to embed private videos.

Privacy Settings

Embedding Settings

 

 

 

 

 

 

 

 

 

 

 

 

Vimeo Embedding Result. As you can see Video does not have any links to video's page or information how to embed video.

 

Embedding Source Code. Videos ID is visible but embedding other than huilaaja.net domain is impossible.

 

Vimeo Video is not visible for anyone. Even if you try to use video's ID to access video it's not possible.

 

I have done some Googling but I haven’t found any other service that would do the same with less than 100$/month. So I’m definitely recommending Vimeo for commercial use.

 

Embedded Private Video Demo

, , ,

oEmbed unites embedding content of youtube, flickr, vimeo, SlideShare,…

November 5th, 2011 | Posted by Huilaaja in EPiServer - (0 Comments)

oEmbed is an open format designed for embedding videos, images, sound and rich content to another website.

I bump into oEmbed in an article of EPiServer oEmbed plugin and of course I have to test it right away.

Here’s how it basically works when you have oEmbed plugin installed into your content management system (example EPiServer CMS):

 

References:

 

 

Blog 2.0 Rebirth

October 23rd, 2011 | Posted by Huilaaja in Development - (0 Comments)

23.10.2011 Blog has gone thru some changes, but it starts to be ready for new content.

Here’s a old blog screenshot for the memories.

Blog 1.1 (old) look

,

Media Queries shortcuts for Resizing your screen

May 30th, 2011 | Posted by Huilaaja in Development | UI - (0 Comments)

Mediaqueri.es uses following resolutions for screenshots. Resolutions are not official standard but largely agreed.

Javascript based resize links function depends on browser. At least IE9 still supports them.

, , ,

Useful Javascripts for Bookmarks

September 17th, 2010 | Posted by Huilaaja in Development | UI - (0 Comments)

Google search from current site

javascript:var q=prompt(%22Hakusana: %22,%22%22);if(q) document.location=%22http://www.google.fi/search?sitesearch=%22+location.host+%22&q=%22+q;

Make page editable

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

,

Spotify stops playing after first song

September 15th, 2010 | Posted by Huilaaja in Development | UI - (0 Comments)

It’s spotify’s new FEATURE.

WTF!  I thought my spotify client has some strange setting or a bug, but no.

Employee of Spotify answered:

Hi guys,

We have indeed changed how search results are played. As it was before many users would search for a specific song, listen to it, and then just leave their computer on streaming (without actually listening).

However, we are looking into how this has affected making a search into “Current Playlist”.

I’ll keep you updated,

Tom

Source: http://getsatisfaction.com/spotify/topics/playback_halting_after_every_song

, ,

Good Practises: Automatic Deployment

September 15th, 2010 | Posted by Huilaaja in Development - (0 Comments)

Deployment process has habit of getting more complicated over time. If this process is not automated, soon you have only one person in the company who knows how to deploy the project. And then you are married with the project (in sickness and in health).

“Deploy your application automatically from the start”
- Venkat Subramaniam and Andy Hunt

Here’s couple of technologies and techniques you should beware of including into your projects, cause they will make automatic deployment harder:

  • Independent console or windows applications
  • SQL Server Projects
  • External libraries which require some license that is only possible to install in one or two machines
  • External libraries which are different for 64bit and 32bit operating systems
  • DTS  packages

I have seen all of these mistakes been made and I also have made them. Just after spending two days deploying single project into production, I have started to understand the importance of automatic deployment.

If you make deployment automatic from the beginning, it become visible to everyone why not to use technics that are hard to automatically deploy. It will also save you time in the long run.

, ,

WordPress 3 and multisite support

August 24th, 2010 | Posted by Huilaaja in Development - (0 Comments)

I was loking forward to see wp3 multisite system. Unfortunately I hoped to get one backend administration site for many blogs where I could mix content between blogs. Multisite support is not for that purpose. It just ables many completely separate blogs to use with single wp installation. So I could as well copy my blog folder and database to get the same outcome.

If you are still going to enable wp3 multisite feature, read the installation instructions vary carefully cause the installation settings are not reversible. Pay attention whether you select sub-domains or sub-directories installation. I didn’t and I end up messing the installation. Cause of that problem my blog was under some sort of attack or at least target of spam. I wouldn’t have notice that if my sites monthly bandwidth transfer hasn’t rice like stockbroker’s dream.

Blog's traffic stats for last 12 months

Multisite feature installation mess my blog and able some hackers to misuse of it.

Luckily I had backup ;)

,

The Marshmallow Challenge

April 25th, 2010 | Posted by Huilaaja in Development - (0 Comments)

Full list of rules

Ted talks video of the marshmallow challenge

UA-7922872-1