Google chrome overtake Internet Explorer

This is not new news for people who keep track on the browser movement, and I think this is showing how Google serious on getting things improved.

Chrome's share of the market rose to 32.8% in the week ending May 20, while Internet Explorer's share of the market dropped to 31.9%, according to new data from StatCounter

And Chrome is going strong from there with 33.78% today, while IE’s share of market is 32.63%, according to data from StatCounter for now.

I have to agree on with google chrome come in we have never surf the web in boring way, it come with some of the plugin that contribute to the market share as well. It makes surfing activities become more interesting to keep track on what I suppose to do, and also give me some control on the things I want to control with available plugins.

IE will try to fight back anyway, but I think they still have way to go as their plugin is not a much as what chrome have and old version like IE9, 8 and 7 have some complication when come to develop their plugins. I had try it before for IE plugin development, it take me some times to get it done.

I hope IE will push their web browser improvement as web becomes one of the strong channel for user to access data from anywhere. 

Read More

W3C: Getting HTML5 to Recommendation in 2014

I think the team is working on the HTML5 standard few years and it is time to give an end to this move with timeline setup. I see this is kind of great move as people who working closely with HTML5 having a date to focus on.

You can refer to link below for more details: -

http://www.w3.org/QA/2012/09/getting_html5_to_recommendatio.html

It the statement: “HTML Working Group Chairs proposed a plan today to work in parallel on stabilizing HTML 5.0 and developing the next generation of HTML features. The plan identifies, for the first time, how the Working Group will produce an HTML 5.1 Recommendation by 2016.”

So, this is quite a clear plan for HTML5 future and I am wonder if every party who involve in pushing HTML5 will be aggressively focus on the date, and move with it together.  “HTML5.1 recommendation by 2016” sound weird at least for me as I don’t have details on how they want to move 5.1 at this moment.  Will it be after 5.0 only reveal what is supposed to be in 5.1?

We all have to stay tune on the movement and figure it out sooner or later. 

Read More

CSS ? - Cascading Style Sheets, CSS3?

Back to 10 years ago, it never been an important knowledge for web backend developer to know how CSS work. When I was a developers years back in a company who have a designer team setup, there are a guy called “Ah Beng” who always work  out lots of design template for me. And I always work very closely with him on getting web site up with colourful and nice design.

Then people realize that getting CSS to control on the web layout using DIV tag is better, CSS become an important for backend developer to know how to get the web site display dynamic way as like template setup with CSS styling. I had some lecture from “Ah Beng” as well, he was generous in term of guiding me on how to get used with CSS technology but not meal. I always pay the bill.

Here is some of the CSS code example: - 

1 2	#column1 {float: left; width: 100px; padding: 10px; } #column2 {float: left; width: 100px; padding: 10px; }

Some of developers are not sure on when CSS was started, Styles were added to HTML 4.0 to solve a problem. It became quite important for developer to know how it plug into a web site and get it styled.

External Style Sheets is always a common thing for developer nowadays as can save a lot of work and are stored in CSS files.

Then CSS allow web developer to work out on printing layout as this is because some of the people would like to have their printing format differently. example:-

1 2 3 4 5 6 7

<style type="text/css" media="print"> label { float: left; display: block; width: 3cm; } </style>

With multiple size of screen come into picture as tablet and mobile phone are able to surf internet and access web site they like, CSS further enhance it standard to enable developer to detect user agent screen size, this allow developer to style their web accordingly. 

1 2 3 4

<style type="text/css"> @media screen and (max-device-width: 480px) { } </style>

Story come more interesting when HTML5 is in picture. CSS3has become part HTML5, it allow developer to make the web site look more interesting with more animation allowed.

There are lots of web site that provide some tools to generate CSS3 like http://www.css3maker.com/, http://css3generator.com/ and so on. You can get it from searching through google.com

Sad to say that CSS3 is still need sometimes because some of the browsers still working on their capability to support the standard. you can check on the css3 supported browser at caniuse.com. hopefully browser provider can speed up their development on supporting these features. 

I have to agree that with CSS web site been look more interesting.

Read More

HTML5 with Modernizr

There are still lots of issue when come to build a web site to shoot every browsers, as we still see some of the outdated browser like IE7 and IE8 is still used by various company. which I think it can be a headache for people who try to build their web site using HTML5 and CSS3. 

HTML5, it been a good start to have some features supported by some of the browser and if it is not, you will have to work out with some of some polyfill and fallback. In this post I am going to share on how to use Modernizr to detect if bowser is support the HTML5 features.

Ok, What is Modernizr?

Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

Some of you might wonder how we want to use Modernizr to detect HTML5 feature, I will share with you on how it work with some simple example, let say web worker. For those who not sure how Web worker work, you can refer to link http://www.html5rocks.com/en/tutorials/workers/basics/ for some basic briefing on it. 

Let's check on this example below:-

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>Testing Modernizr For HTML5 Web Worker</title> <script src="http://modernizr.com/downloads/modernizr-latest.js"></script> </head> <body> <script> if(Modernizr.webworkers){ alert("Browser supports Web Workers"); } else{ alert("Web Workers not supported"); } </script> </body> </html>

With this code you will get alert to check if the browser support HTML5's Web Workers feature.

Google Chrome having a positive test on this features and it supported HTML5's Web Workers feature:

 Firefox is giving the green light on this feature as well:-

IE9 is obviously not support Web Workers.

Theory behind  Modernizr is it adds a large number of classes indicating the browser's capabilities into the html tag with no-js class added beginning of the code.

you can have a check on firebugs for firefox, it will show this:-

if you interested to check out what are the features that can be detected, please go to the link below:-
http://modernizr.com/docs/#features-html5

And please go to Download page to build your production copy, and you can choose what to include on the build itself.

Read More

I love Webkit! And you should too…

Have to say that people are moving from bring the big laptop to smartphone and tablet when they wish to have an electronic device that can surf the internet while relaxing at the chair of some known café.

Smartphone and tablet's OS been nominated by mobile provider, Apple IOS, Google’s Android, Research in Motion’s Blackberry, and Microsoft’s Windows Mobile. Off cause some of the players like Symbian and Baba from Samsung. Eventually that each of these different operating systems has its own way of developing and deploying “native” apps.

With mobile and tablets is the focus, people will start to focus on mobile users market, you might spend many thousands dollars to get one apps to run on Iphone IOS, and have to spend little more thousand more to get it run at Google’s Android, and give an impression that people would like tablet version, you have to pour out few thousand for tablet’s version and there are few tablet with different resolutions.

Inside smartphone and tablet’s technology, some of them have 1 thing in common which is they are using webkit-base browser. You can have a research on it and WebKit-based browsers run on nearly all of the major smartphone and tablet operating systems.

With Webkit, business owner can have 1 cost on 1 web apps to cover every single type of device. Developer can just focus on HTML, CSS and Javascript on 1 apps that really make life easier. and now they are bringing HTML5 supported for tablet and mobile.

With Webkit-based browser, mobile will no need to get a notification from “store” and updates every time the native apps out of date. This seriously 1 thing that always annoying me a lots nowadays and I always have like 45 outstanding updates to run!

In fact, Web is always the best way to go for with Webkit in mind. So, we can have our data store in web cloud storage and switch tablets and smartphone.

Read More

What? Mobile and Tablet Web design?

To be frank, Apple’s iPhone and iPad have turned the dream of viewing your web in the palm of your hand into reality. This reality has been broadening by join force of Samsung and Lenovo.  With people accepting tablet as one of the must to have when laying down at sofa and looking for information from web. Buying things by go through e-commerce’s site.

Tim Cook used to say: “I truly believe, and many others in the company believe, that there will come a day that the tablet market in units is larger than the PC market.”

Yeah right, so you need to design and develop your web for mobile and tablet friendly as well. So, I can say if you want to go into further understanding on getting things done, I can say you need a better understanding of all the new capabilities this new mobile platform offers: Location awareness, motion sensitivity, and even varying aspect ratios. This allows me to introduce you HTML5 which currently have fulfilled every single needs for mobile and tablet web development.

One of the obvious differences between mobile web and normal web is touchscreen! With touch screen, you can tap, point, flip, tilt, swipe and so on more. However, with HTML5 come alive with some of the javascript standard, it make website look alike native apps. I am not going to cover javascript part on this post, I am going to cover how to make different CSS style sheet for different type of screen resolutions, probably for iPad and iPhone. 

Here are the links to the two style sheets for the iPad:

<link href="css/ipadPortrait.css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)">

<link href="css/ipadLanscape.css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)">

Here are the links to the two style sheets for the iPhone:

<link href="css/iphonePortrait.css" rel="stylesheet" media="only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait)">

<link href="css/iphoneLanscape.css" rel="stylesheet" media="only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape)">

This will allow you to have a different css for different type of tablet and mobile device.I know this is difficult, I will continue to do some research and come out with more information on how to design your web for mobile and tablet friendly.  

Using multiple style sheets to create designs targeted to specific devices is relatively simple when compared with the more advanced programming required if you want to do device detection on the server and send completely different HTML files to different devices.  That will be more on creating one using PHP or some server side programming language. 

Read More

Add Custom Favicon to Blogger

I was out from blogging industry for quite long time, I can see last blog post was end of 2010. Wow, I was out for 2 years!! Got to keep up on posting something and share with everyone.

So, I changed the template and go through some of the special features by blogger. It is official that blogger can add favicon to the blogger. You can upload your custom favicon to your blog and don't let people know you are using blogger. :P

blogger favicon's print screen

This can be seen under Blogger’s Dashboard > Layout tab. You have to come out with your own favicon first before you can make it to your blog. You will need to click on edit button and you will come to a popup that will need you to choose a square image that less than 100KB.

Here you go, you can have a new favicon now. I have a blog post previously that mentioned how to using some kind of hack to add favicon to Blogger, I think this option give more flexibility for blogger who like to make their blogs more customized. 

Read More

HTML5, Let’s do it

Recently I have been working so close with html5 and figure out this standard for World Wide Web is quite an interesting thing to learn and play around. 


Html5 is integrate with some of the features that html 4 can’t give, which is more like to solve some of the existing issue which we need to hack our head on blend it in with javascript. 

Read More

Mobile apps vs mobile web

Internet website is becoming a common thingto have nowadays, and with mobile user is increasing and you are nowconsidering creating a mobile website. One of the question might jump into yourhead is whether to create a mobile application (apps) or a mobile website?

With the huge buzz on App development and itseem that mobile applications are taking over? But is a mobile app the rightsolution for everyone? We seem like go backward and install package softwareinto our personal device and use it?

For me, I would prefer to build mobile website. Let’s look at some of thepoint that keep me think website is the best for now.

Read More