Client side (Browser) development with MVC JS
- For DOM (Document Object Model) development, there are lot of JS Libraries and Frameworks available. Examples for popular ones are YUI, JQuery, Prototype, MooTools, ExtJS, Dojo and the list goes on and it’s almost countless!
Server side JS development
- If you like to master HTML5 canvas, in my opinion first try with 2D animation and learn some basics.
If you are interested in animation using HTML5 canvas, try to understand features and experiment with libraries like Processing.JS, Easel.JS, Kinetic.JS, Paper.JS, Fabric.JS etc. Though Raphael.js losing popularity in competition, this one got browser compatibility even with IE6!
You may don’t need to master all, but understanding few of them may help you to select the best suitable one for a given situation. Please google for each library and experiment with each one. But if you want to learn only one or two, please refer this link http://www.html5canvastutorials.com/articles/web-graphics-trends-in-2013/
- Try 3D with Three.JS
Every other day a new library is appearing in GitHub. Keep your eye and mind open for the next excitement. Happy Scripting.
A recent experience with one of my client, gave me a shocking realization that most of the beginners are handling mobile projects very poorly. I agree, people can’t learn everything before start doing something, but they should try.
For this case study, I’m taking an instance of a mobile app development project took place in a mid size company with a team of 50 members in the project. The team supposed to develop few mobile applications for 5-6 different platforms ranging from iOS to Symbian. For them this is first time experience. However their inside research team suggested using PhoneGap. Till then things were fine.
Things changed thereafter – The web designers in the team asked for submitting mock screens for each activity/layout of the app. They were also new in mobile app development. They just gone through some basic UI documentation of iOS, Android etc. and designed screens in native style for each platform. Once designing phase was over and approved by client, web designers created the HTML templates. For that, they advised to use JqueryMobile. I joined into the project at this time. Once started creating HTML templates web developers started realizing most of the screens they designed for each platform is very ‘native’ in look and mimicking it using JQueryMobile is like creating different templates for each device!
- If your client is looking for an app which can deploy on various platforms-like iOS, Android, Windows, BlackBerry etc. PhoneGap is definitely a good option for hybrid development. But before proceeding, do good research. Research. and Research.
- Finalize the Architecture and make sure along with technical lead/Project Designer your UI lead also involved in the process from the beginning. Knowing exactly what you are going to build and being everyone in same page will definitely speed up the development time.
- Once Architecture is finalized create a wireframe using tools like Pencil project, Axure or something like that. Before jumping up on creating wireframes make sure, you studied latest trends in visual representation of data and navigation options. If client and Team lead/Designer agrees with the flow, proceed to create at least 4-5 screens which should look like screen shot of app you are going to create.
- Once got written approval from Client on design, colors and other branding elements, designers can start creating designs and icons. Make sure they are working on vector format, so it’ll be easy to create different size design elements and icons for various resolutions. For example while designing for iPhone and iPad you have to create at least 3 sets of designs and for android minimum 4 is required. PNG is the best acceptable format. But for Symbion icons are supposed to create in svg format. MAKE SURE DESIGNERS GONE THROUGH DESIGN DOCUMENTATION PROVIDED BY EACH Mobile OS PLATFORMS. (In case of iOS, pixel sizes they mentioned should be followed. Otherwise your app may get rejected). ALSO, REMEMBER AND CONSIDER THE PHYSICAL SIZE AND/OR RESOLUTION OF DEVICE WHICH MAY VARY.If you got at least 3 designers, assign two platforms to each of them and demand a thorough study of what is possible in each platform. Before proceeding to design process, it’s better to provide mobile handsets and tablets to designers and allow them to download similar apps and experiment with it.
- Once design is over, create html templates with the help of web developers. While creating the page structure, give special attention to the order and arrangement of DOM elements. Try to avoid overuse and deeply nested DOM elements. This will help to reduce ‘browser reflow’. (You can find a good note here http://www-archive.mozilla.org/newlayout/doc/reflow.html ) Also, I noticed some html developers adding ‘translate3d’ transform css style extensively in their project which is normally good for hardware acceleration. But applying translate3d CSS property on complex DOM elements may affect the app performance adversely – sometime it may even get crash! Also avoid nesting DOM elements that use translate3d.)
- Then came the development phase. But before starting development, I suggest to do a smoke test of templates and make sure it’s appearing fine in all hardware devices and various screen resolutions.
Well, this is a very short note about Hybrid Mobile App development. But I hope it might be useful for someone in the business. I’m not an expert, so please let me know if you got better ideas/options or suggestions and comments. Thanks.
What is Cloud Services Brokerage, or CSB
A Cloud Services Brokerage, or CSB could be a third party company or internal IT divison which will help the organization to integrate different cloud services into a sigle point that matches with the organizations custom requirements.
Resources for Cloud Computing Clients,
If you are interested to know how CSBs can help in managing different vendors, go through this link
Resources for Cloud developers,
visit 2 leading CSBs: jamcracker and gravitant. Also worth a visit to Cloud Market Place leader appdirect developer page. If interested , you can visit Meaning2CLOUD - a project initiated by European Commission.
Today is the third Saturday since I came to Bangalore for an IT project in the role of Consultant. The project scope includes a Govt. portal for a Middle East country and Web & Mobile Apps for their services. OK, that’s official… nothing more to reveal.
I landed in Bangalore on the second last week of August. I directly went to the Office for reporting and even at that 10am in the morning, I felt the cold breeze around. It reminds me of my old days in Bangalore that is around 15 years back, when I used to come for buying computer peripherals and parts for assembling systems for friends and relatives back in my neighborhood in Kerala.
Life goes on. After 10 years of expat life in UAE, I’m back again. Lot of new architecture marvels built across the main streets and can see flower sellers in every corner. But the outer skirts of Bangalore remain same with lot of chat (kind of snacks) sellers, dogs, cows and waste. Everyone holding smart phones (which made me happy- there is lot of scope for mobile web) and riding luxury cars and bikes. Still I found young people gathering around used book sellers and talking about abstract art and about Ramana Maharishi!
After the first day’s work I went to the nearby hotel where accommodation was arranged by company. It was nice and clean. Evening I went out for dinner and found Bangalore is changed a lot! Earlier fruits and vegetables were inexpensive and thus restaurants. Now prices are gone high. That weekend I went out and started searching for apartments and flats. To get a clean and mid standard one, I have to pay more than or equal to what I used to pay in Dubai!
One of the most exciting event was the Onam celeberation at our company on 28th; that is just after a week of my joining. There were 12 keralites and together we made an atha pookkalam. For the first time in my life, I sketched a pookkalam design and decorated it with flowers! Even back at my home country, I never did it myself. I used to watch how the girls are doing it and that experience helped me a lot this time. Overnight I became a hero among colleagues! At noon we had a feast, and even colleagues from other states enjoyed it. Well that’s the good things…
On the other side of Bangalore life, I found one strange thing. If you take a bus ticket less than 6 -7 Rs, most of the bus conductors are not willing to give the ticket! When I asked a conductor to give ticket, he’s simply nodding his head with a smile! And when I demanded again and asked what’ll happen if a checker came in for inspection?
“I’ll take care” he simply said without losing that smile.
I had this experience with few other bus conductors of Govt. owned bus services. I’m sure this’ll put a bad impression about people of Karnataka in general. But in reality, most of the people in Karnataka are good and willing to help.
I’m living in Cunningham road, near Vasanth Nagar, which is very close to National School of Drama and an art gallery – an ideal neighborhood for me. Also I’m lucky to have a good vegetarian restaurant nearby. Hope things will be better in Bangalore for me.
If you are travelling to Bangalore. please check this link. It’s good Bangalore City Travel Guide
Last week I got a call from a recruiting agency and a sweet female voice enquired me what I meant by Front End Developer? She wants to know whether I’m a programmer or a web developer? She seems confused why I applied for Senior UI/UX Designer post if I’m a programmer! For me it took around 5 minutes to explain the job profile of Front end developer and how it differs from a web designer or Programmer. But I can’t blame her. In my 3 years job as a Front end developer in a reputed Technology firm in UAE, they address me as ‘designer’, ‘web designer’, ‘web master’, ‘web developer’ and even ‘flash man’ (I love to hear the last one as it remind me of Flash Gordon – one of my fav. Comic hero). But never addressed me as a Front End developer!
I guess there should be a clear definition for the job roles of Web Designer, Web Developer, Front End Developer, Mobile App developer, Mobile Web Designer, Web Master, Application Developer etc.
Web Designer Job Profile
Web Designer is the one who visualize or Design the look and feel of a Website. The difference from Print designer to a Professional Web Designer is huge – even though they use mostly the same tools!
A web designers job include,
1. She/he should consider the screen size and resolution of display device (monitor or mobile screen or tablet) and have to make sure she/he following ‘Responsive Web Design’ if the same design is supposed to appear in mobile, tablet and monitor.
2. Accessibility of website for handicapped and understanding of W3C Specifications for HTML and CSS.
3. He must think how people may interact with the website and how to implement call for actions in a website using proper usage of links, buttons, tabs, sliding panels and other Interface methods. This became a major subject in HCI (Human Computer Interaction) and specialized professions arouse like ‘UI Designers’ and ‘UX Designers’.
4. She/he should make sure the website will display alike in all major browsers. (technically speaking it’s matter of ‘Cross browser compatibility’ )
Front End Developer Job Profile
Front End Developer job profile is,
1. All of the above mentioned for Web Designer plus,
2. Experience in UI/ UX Prototyping tools like Azure, Pencil etc.
5. CSS Grids, CSS Frameworks, OOCSS and CSS Pre-Processors like LESS and Sass.
6. Progressive Enhancement / Graceful Degradation of web pages in different versions of browsers.
7. Intermediate level knowledge in one or more programming languages like PHP, Ruby, C#.net, VB.Net
8. Exposure to RIA (Rich Internet application Development) using MS Silverlight, Flash, Java FX technologies and tools using for it. Eg. Expression Blend for silverlight, FlashDevelop, Adobe AIR or Flash CS for Flash based RIAs.
9. Good knowledge of all important Social Networks and usage of APIs. (eg. Facebook API, Google Map API etc)
10. Website Speed / Performance and Optimization techniques
11. Thorough understanding of most popular Browsers and Debugging Tools (Firebug, Development Tools in Google Chrome and IE)
12. Working knowledge of CMS (Content Management Systems) like Joomla, mod X, WordPress, CMSMadeSimple (PHP based), ektron 400, DotNetNuke, sharepoint(.net based) and usage of APIs.
13. Experience with one or more Development Environment like Visual Studio from Microsoft, Eclipse, NetBeans IDE etc.
14. Version Control (Git / GitHub / CVS / Subversion)
15. Good understanding of Data Formats (e.g. JSON, XML) and proper usage.
16. Internationalization / Localization
17. Intermediate level knowledge in SEO (Searh Engine Optimization), SMO (Social Media Optimization)
19. Microdata / Microformats
20. Theme, Skins and Template design and development for Web / Mobile Apps, CMS etc.
Web Developer Job Profile
Web Developer job profile is,
1. She/he should know at least one programming language, like PHP, Ruby, C#.net, Vb.net, Java or Python.
2. An intermediate level knowledge of markup languages like HTML, XML etc.
3. Good knowledge in one or more Database (MySQL, MS SQL etc) and optimized using of it and thorough understanding of Normalization.
4. Good understanding and application of OOP (Object Oriented Programming), MVC (Model View Control) Framework.
5. Knowledge of at least one framework (like ZEND, CakePHP for PHP, Majento for Python, Ruby on Rails etc.)
6. Working knowledge of CMS (Content Management Systems) like Joomla, WordPress, CMSMadeSimple (PHP based), ektron 400, sharepoint(.net based) and usage of APIs.
7. Experience with one or more Development Environment like Visual Studio from Microsoft, Eclipse, NetBeans IDE etc.
8. Version Control (Git / GitHub / CVS / Subversion)
9. Good understanding of Data Formats (e.g. JSON, XML) and proper usage.
10. Internationalization / Localization
Oh! It’s going longer than I anticipated initially… enough for time being. I’ll continue later. Hope you got basic idea of what is Front end developer and how it differs from that of Designer and Developer job roles.
3-4 years back the major challenge to a web designer was the incompatibility of browsers and different screen resolutions. But, along with my fellow beings, I survived those days by experimenting with flexible interface designs that rendered same on IE6 and Firefox. When IE8 released, and when I heard firefox becoming popular, and when my colleagues preferred Chrome over Internet Explorer… I sighed! A sigh of relief! at least hope was there…
While I was experimenting by creating mobile website for my first smartphone running symbian, I was not knowing the dooms day is coming closer! poor me! When my Bossman asked to design for the first iPhone App back in 2009, I couldn’t hide my excitement. I didn’t lose that excitement even after the release of iPhone4 in 2011 for which I have to create an image for older versions and another 2x version of it for new one with double pixel resolution! Then came Android projects, which demands at least 4 size images – ldpi, mdpi, hdpi and xhdpi for different device resolutions ranging from 120dpi to 320 dpi!
Now I am working on websites that could run smoothly on laptop screens, mobile screens and tablets. This demands very careful planning and intelligent applications of UX patterns. There are many useful JQuery plugins are available for it.
I found some of these sites as helpful resources on this subject. May be you too can try these in your projects.
Last week, from 9th to 16th December, I took break from my projects and immerse into a world of good cinema. 16th Edition of International Film Festival of Kerala (IIFK) was going on at Trivandrum, the Capital of my state Kerala. As a busy professional I never got a chance to dedicate myself a whole week for such a cultural program.
Now, being an independent consultant, I can manage my time in a more balancing way by providing equal importance to Life and Work. The Film Festival was quite good experience. I met some nice people and watched a number of classic films.
I watched 19 films in 5 days! There was a special retrospective section for Masters of Cinema like Robert Bresson and Nagisa Oshima. Actually the first movie I watched, Pickpocket, was directed by Bresson. There were lot of good movies from different part of the world and I tried to watch selected ones.
Following are the movies I watched
- Pickpocket Robert Bresson French
- Poetry Chang Dong Lee S.Korea
- A Screaming Man Mahamat Saleh Haroun Chad/Belgium
- Angel’s Fall Semih Kaplanoglu Turkey
- The Painting Lesson Pablo Perelman Chile/Mexico
- Faust Aleksander Sokurov Russia
- Damascus with Love Muhammed Abdul Aziz Syria
- Beloved Christophe Honore UK/Czech
- By Chance Balthazar Robert Bresson French
- Eternity & A Day Angelopoulos Greek/Italy
- Rough Hands Mohamed Asli Morocco
- Short Films Adolf Mekas USA
- Mumbai Diaries Kiran Rao India
- Abu, Son of Adam Salim Ahmed India
- The First Grader Justin Chadwick Kenya/US
- Together Zajedno Zerbia
- The Colours of Carlos Cesar Arbelaez Colombia
- That Day Raoul Ruiz France
- Future Lasts Forever Ozcan Alper Turkey/Kurdish
Colombian film, ‘The Colours of the Mountains’ directed by Carlos Cesar Arbelaez choosen as the Best picture of the Year. Overall it was a good memorable experience.