<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:blogger='http://schemas.google.com/blogger/2008' xmlns:georss='http://www.georss.org/georss' xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-2510124777776048204</id><updated>2015-11-11T18:57:35.461+08:00</updated><category term="HTML5"/><category term="Web"/><category term="blogger"/><category term="PHP"/><category term="google"/><category term="CSS"/><category term="Javascript"/><category term="Webkit"/><category term="browser"/><category term="framework"/><category term="maps"/><category term="mobile Web"/><title type='text'>JSInTech.com</title><subtitle type='html'>JSInTech.com | Programming, Tutorials, jQuery, Ajax, HTML5, PHP, MySQL, SQL and google tech is a programming and technology sharing blog maintained by Jason. Tutorials focused on Programming, Jquery, Ajax, PHP, HTML5, Demos, Web Design, Javascript, google technology and MySQL. JSIntech.com also provide some solutions to improve web sites.</subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://www.jsintech.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>19</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-5376713330151028943</id><published>2013-05-29T10:38:00.000+08:00</published><updated>2013-08-08T09:25:00.107+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="google"/><category scheme="http://www.blogger.com/atom/ns#" term="maps"/><title type='text'>New Google Maps</title><content type='html'>&lt;div class=&quot;MsoNormal&quot;&gt;Google Maps today is quite a great tool for what it’s supposed to do now, and you can navigate from location A to location B. Month back, I really enjoy the apps when I was in Europe. I get into a place that never been before and still can enjoy travelling with the help of the great &lt;a href=&quot;http://maps.google.com/&quot;&gt;Google Maps&lt;/a&gt;.&amp;nbsp; But things will never been so complete if Google enhance the maps to cater what a traveller needs. I got my feeling that Google Maps will be more advance with shop’s review because it bought &lt;a href=&quot;http://www.zagat.com/&quot;&gt;Zagat &lt;/a&gt;and also getting better with street view and so on. And it finally here, today I am going to talk a little bit of New Google Maps.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;I requested for New Google Maps preview since they introduced it in Google I/O, and it finally granted me to have a look on the great new Google Maps.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;Here is the new look of Google Maps:-&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;a href=&quot;http://4.bp.blogspot.com/-g9bgsLkAYg8/UaVkyQm0RYI/AAAAAAAAJzM/5UYHO5cfVYQ/s1600/newmaps1.bmp&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em; text-align: center;&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;185&quot; src=&quot;http://4.bp.blogspot.com/-g9bgsLkAYg8/UaVkyQm0RYI/AAAAAAAAJzM/5UYHO5cfVYQ/s400/newmaps1.bmp&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;Some of them name it your maps as it will collect your data and you can save all the information into this so called “your Maps” meaning that Google will create a specific maps under your name and you can then utilize the maps for your own data and the maps will adapt to the things that interest you, including restaurants you&#39;ve been to, ones that you might like and what your friends have done.&amp;nbsp;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;A new and smarter search box is the first thing you should use to search for direction or a point that you want to search. The box will give you some suggestion based on your browsing data:-&amp;nbsp;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://2.bp.blogspot.com/-4658UcKtFLc/UaVkwStRXOI/AAAAAAAAJyg/1CDd_0Bdbqo/s1600/2013-05-29_094041.bmp&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;131&quot; src=&quot;http://2.bp.blogspot.com/-4658UcKtFLc/UaVkwStRXOI/AAAAAAAAJyg/1CDd_0Bdbqo/s400/2013-05-29_094041.bmp&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;Just search any keyword that you require and it will show up some of the location base on the area you searched.&amp;nbsp;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://3.bp.blogspot.com/-L529MZ3hy7I/UaVkwl5gcqI/AAAAAAAAJyo/ap2Jx16Ge0k/s1600/2013-05-29_094204.bmp&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;227&quot; src=&quot;http://3.bp.blogspot.com/-L529MZ3hy7I/UaVkwl5gcqI/AAAAAAAAJyo/ap2Jx16Ge0k/s400/2013-05-29_094204.bmp&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;You can get more information from the info card below the smart search box and it will include&amp;nbsp;Zagat ratings, reviews from your friends and quick entry points to photos of the venue from Street View, both inside and outside of the venue: Review will link directly to Google Plus location.&amp;nbsp;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://1.bp.blogspot.com/-e2r44_kM35A/UaVkxFXRS0I/AAAAAAAAJy0/YR0npL1xxUE/s1600/2013-05-29_094232.bmp&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;228&quot; src=&quot;http://1.bp.blogspot.com/-e2r44_kM35A/UaVkxFXRS0I/AAAAAAAAJy0/YR0npL1xxUE/s400/2013-05-29_094232.bmp&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;It integrated with Google earth and allow you to switch between Maps view and Earth view and this time they have better view with photo sharing view which combined from public shared photo and allow you to have a look on the destination you want to go.&amp;nbsp;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://2.bp.blogspot.com/-VklX0Rtt_Go/UaVkxsBjkcI/AAAAAAAAJzA/TuRButH_Ox4/s1600/2013-05-29_094317.bmp&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;228&quot; src=&quot;http://2.bp.blogspot.com/-VklX0Rtt_Go/UaVkxsBjkcI/AAAAAAAAJzA/TuRButH_Ox4/s400/2013-05-29_094317.bmp&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;The most interesting features that always keep me coming back to Google Maps is directions, and I am impressed with they even have information for KL which i think previously I don&#39;t see anything good in here. :P&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://3.bp.blogspot.com/-R8kMkHp1QUg/UaVkykxB9aI/AAAAAAAAJzU/1E-TmEOrdS4/s1600/transit+direction.bmp&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;186&quot; src=&quot;http://3.bp.blogspot.com/-R8kMkHp1QUg/UaVkykxB9aI/AAAAAAAAJzU/1E-TmEOrdS4/s400/transit+direction.bmp&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;I think i am getting excited with this New Google Maps now, and keep playing around with the new features and layout.&amp;nbsp;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;You can have a request by &lt;a href=&quot;http://maps.google.com/help/maps/helloworld/desktop/preview/&quot;&gt;here&lt;/a&gt;.&lt;br /&gt;&lt;span style=&quot;background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;&quot;&gt;7TPJPA2M2E5Y&amp;nbsp;&lt;/span&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/5376713330151028943/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2013/05/new-google-maps.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/5376713330151028943'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/5376713330151028943'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2013/05/new-google-maps.html' title='New Google Maps'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://4.bp.blogspot.com/-g9bgsLkAYg8/UaVkyQm0RYI/AAAAAAAAJzM/5UYHO5cfVYQ/s72-c/newmaps1.bmp" height="72" width="72"/><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-67040502600367411</id><published>2013-05-28T11:10:00.002+08:00</published><updated>2013-05-28T11:10:13.568+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="PHP"/><title type='text'>Automated testing</title><content type='html'>&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;Ok, when you see this word “automated testing”. It should be referring to we get the testing automated, that’s it! What a simple way to describe the concept. I would say to describe the word can be in one or two sentences, but to implement the concept might take about few months. &lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;Why automated testing? Yeah, and everyone knows how important is testing and without testing I don’t think you might be comfortable to push the changes to live and get it running. The principle of automated testing is that there is a job or program that runs the software being tested, by feeding it the proper inputs, and then checking the output against the output that was expected. It should be automated and yes it is automated. Which means you will need to just develop a test suite with your complete program and get it tested every times you push the changes to the environment. &lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;I used to say good programmers know how to minimize error, and I think good programmer will make mistake as everyone make mistakes. The big difference between a good programmer and a bad programmer is that the good programmer uses tests to detect his mistakes as soon as possible. So, good programmer will have good discipline attitude and continue to discipline in any area. But I believe not every company can have luck to get a group of good programmer to work in a team, that’s why we need some protection before we publish it to live. Automated testing will be part of the solutions to avoid some costly mistake release to production and you have too much to pay back the clients or customers. &lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;Actually the goal of using automated tests is to get the team minimize mistakes that harm the production program, I think you will see reduction in defects once you start implementing automated testing suites. &lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;I am in the mid of testing php automated testing environment, looking forward to get some feedback from my blog post and hope to share with everyone on how I get my own up and running. Ciao!&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/67040502600367411/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2013/05/automated-testing.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/67040502600367411'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/67040502600367411'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2013/05/automated-testing.html' title='Automated testing'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-1009703189346952108</id><published>2013-05-16T15:13:00.003+08:00</published><updated>2013-05-16T15:13:42.296+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="PHP"/><category scheme="http://www.blogger.com/atom/ns#" term="Web"/><title type='text'>Why PHP and MySQL?</title><content type='html'>&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;Years back when PHP was not OOP, many debates about hard to maintain this pieces of code and very hard to understand or develop using this programming language. Now it is not the case as PHP is a scripting language designed specifically for use on the web, with features that make web design and programming easier. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;MySQL used to be maintained by a group of people now been purchased by some cooperation to get it development more underway. MySQL is a fast, easy-to-use RDBMS (Relational Database Management System) used on many websites. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;If you are first enter to the web application programming and wonder why most of the programmers chosen PHP and MySQL to be the pair for building dynamic web applications. I can really list out some of the advantages in here. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;MySQL and PHP as a pair have several advantages:&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;/div&gt;&lt;ul&gt;&lt;li&gt;&lt;span style=&quot;text-indent: -18pt;&quot;&gt;They’re free. Yes!!!! They’re free! It is hard to reject this choice when it cost you nothing to run a business huh..&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;text-indent: -18pt;&quot;&gt;They are easy to use, which mean easy to understand and there are lot of ready tools which just download and run type installer for running these 2 together&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;text-indent: -18pt;&quot;&gt;They are used to building web. PHP is mainly as a web programming language and MySQL is more than that, but I think most of the web hosting company is using the pair for web hosting component.&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;text-indent: -18pt;&quot;&gt;Fast! And yes, they are fast! And I am serious about it because if you can implement a good database structure and coding. Combined both they provide one of the fastest way to deliver dynamic websites.&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;text-indent: -18pt;&quot;&gt;PHP and MySQL communicate well with each other; PHP has some built-in features to communicate with MySQL. This allows you have little knowledge on technical part but still able to get them work together.&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;text-indent: -18pt;&quot;&gt;Both are open source, this mean we can customize it by our way of operations. But I do think you have to understand how to customize it. :P&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;text-indent: -18pt;&quot;&gt;Since it is open source, there will be a wide base of support available and because it is free, they will have large user bases and many tutorials can be easily found by looking for Mr. Google. And because they’re often used as a pair, they always have people who can help you on using both as a pair in dynamic web application development.&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;br /&gt;&lt;div class=&quot;MsoListParagraphCxSpLast&quot; style=&quot;mso-list: l0 level1 lfo1; text-indent: -18.0pt;&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;So, any doubt on your decision for web programming languages and databases?&amp;nbsp;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/1009703189346952108/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2013/05/why-php-and-mysql.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/1009703189346952108'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/1009703189346952108'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2013/05/why-php-and-mysql.html' title='Why PHP and MySQL?'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-7775132346176852948</id><published>2013-05-07T10:55:00.004+08:00</published><updated>2013-05-07T10:55:32.601+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="framework"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML5"/><category scheme="http://www.blogger.com/atom/ns#" term="Javascript"/><title type='text'>Twitter bootstrap</title><content type='html'>&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;What is twitter bootstrap? &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;As you can see from the taglines: - Sleek, intuitive, and powerful front-end framework for faster and easier web development.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://1.bp.blogspot.com/-9ACrSY5bq0s/UYhsyzCXCbI/AAAAAAAAJOs/bKeL5_9cqlc/s1600/2013-05-07_093118.bmp&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;299&quot; src=&quot;http://1.bp.blogspot.com/-9ACrSY5bq0s/UYhsyzCXCbI/AAAAAAAAJOs/bKeL5_9cqlc/s640/2013-05-07_093118.bmp&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;Wow! It explained!&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;Ok, let’s have some details description if it doesn’t. Twitter Bootstrap is a toolkit/framework to develop web apps and sites in faster way, as it includes basic CSS and HTML for creating Typography, Tables, Forms, Navigation, Alerts and lot more. It includes scaffolding section which including responsive 12-column grids, layouts, and component. It is includes 13 custom jQuery plugins. That is the reason why it becomes so popular nowadays. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;After all the craps, how to kick start using this powerful framework?&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;Go to &lt;a href=&quot;http://twitter.github.io/bootstrap/&quot;&gt;http://twitter.github.io/bootstrap/&lt;/a&gt;and click on Download Bootstrap button, and you will get a bootstraps.zip file in your Downloads folder. &amp;nbsp;Double clicks on it and you will see a folder in this zip file. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://1.bp.blogspot.com/-nMDHr7aw9d4/UYhsx9xQBcI/AAAAAAAAJOo/_IiaEDgSFvA/s1600/2013-05-07_101332.bmp&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://1.bp.blogspot.com/-nMDHr7aw9d4/UYhsx9xQBcI/AAAAAAAAJOo/_IiaEDgSFvA/s1600/2013-05-07_101332.bmp&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div align=&quot;center&quot; class=&quot;MsoNormal&quot; style=&quot;text-align: center;&quot;&gt;&lt;!--[if gte vml 1]&gt;&lt;v:shape id=&quot;Picture_x0020_2&quot;  o:spid=&quot;_x0000_i1025&quot; type=&quot;#_x0000_t75&quot; style=&#39;width:119.25pt;height:162.75pt;  visibility:visible;mso-wrap-style:square&#39;&gt; &lt;v:imagedata src=&quot;file:///C:\Users\82072~1.COR\AppData\Local\Temp\msohtmlclip1\01\clip_image003.png&quot;   o:title=&quot;2013-05-07_101332&quot;/&gt;&lt;/v:shape&gt;&lt;![endif]--&gt;&lt;!--[if !vml]--&gt;&lt;!--[endif]--&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;File structure: -&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div style=&quot;background: #F7F7F9; border: solid #E1E1E8 1.0pt; mso-border-alt: solid #E1E1E8 .75pt; mso-element: para-border-div; padding: 6.0pt 6.0pt 6.0pt 6.0pt;&quot;&gt; &lt;div class=&quot;MsoNormal&quot; style=&quot;background-position: initial initial; background-repeat: initial initial; border: none; line-height: 15pt; margin-bottom: 15pt; padding: 0cm; word-break: break-all;&quot;&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;bootstrap&lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;/&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot; style=&quot;background-position: initial initial; background-repeat: initial initial; border: none; line-height: 15pt; margin-bottom: 15pt; padding: 0cm; word-break: break-all;&quot;&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: &amp;quot;Courier New&amp;quot;; font-size: 10.0pt; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;├──&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt; css&lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;/&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot; style=&quot;background-position: initial initial; background-repeat: initial initial; border: none; line-height: 15pt; margin-bottom: 15pt; padding: 0cm; word-break: break-all;&quot;&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: &amp;quot;Courier New&amp;quot;; font-size: 10.0pt; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;│&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: &amp;quot;Courier New&amp;quot;; font-size: 10.0pt; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;├──&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt; bootstrap&lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;css&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot; style=&quot;background-position: initial initial; background-repeat: initial initial; border: none; line-height: 15pt; margin-bottom: 15pt; padding: 0cm; word-break: break-all;&quot;&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: &amp;quot;Courier New&amp;quot;; font-size: 10.0pt; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;│&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: &amp;quot;Courier New&amp;quot;; font-size: 10.0pt; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;├──&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt; bootstrap&lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;min&lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;css&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot; style=&quot;background-position: initial initial; background-repeat: initial initial; border: none; line-height: 15pt; margin-bottom: 15pt; padding: 0cm; word-break: break-all;&quot;&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: &amp;quot;Courier New&amp;quot;; font-size: 10.0pt; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;├──&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt; js&lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;/&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot; style=&quot;background-position: initial initial; background-repeat: initial initial; border: none; line-height: 15pt; margin-bottom: 15pt; padding: 0cm; word-break: break-all;&quot;&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: &amp;quot;Courier New&amp;quot;; font-size: 10.0pt; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;│&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: &amp;quot;Courier New&amp;quot;; font-size: 10.0pt; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;├──&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt; bootstrap&lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;js&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot; style=&quot;background-position: initial initial; background-repeat: initial initial; border: none; line-height: 15pt; margin-bottom: 15pt; padding: 0cm; word-break: break-all;&quot;&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: &amp;quot;Courier New&amp;quot;; font-size: 10.0pt; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;│&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: &amp;quot;Courier New&amp;quot;; font-size: 10.0pt; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;├──&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt; bootstrap&lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;min&lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;js&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot; style=&quot;background-position: initial initial; background-repeat: initial initial; border: none; line-height: 15pt; margin-bottom: 15pt; padding: 0cm; word-break: break-all;&quot;&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: &amp;quot;Courier New&amp;quot;; font-size: 10.0pt; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;└──&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt; img&lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;/&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot; style=&quot;background-position: initial initial; background-repeat: initial initial; border: none; line-height: 15pt; margin-bottom: 15pt; padding: 0cm; word-break: break-all;&quot;&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;├──&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt; glyphicons&lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;-&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;halflings&lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;png&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot; style=&quot;background-position: initial initial; background-repeat: initial initial; border: none; line-height: 15pt; margin-bottom: 15pt; padding: 0cm; word-break: break-all;&quot;&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;└──&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt; glyphicons&lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;-&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;halflings&lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;-&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;white&lt;/span&gt;&lt;span style=&quot;color: #93a1a1; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: #48484c; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;png&lt;/span&gt;&lt;span style=&quot;color: #333333; font-family: Monaco; font-size: 10.0pt; mso-bidi-font-family: &amp;quot;Courier New&amp;quot;; mso-fareast-font-family: &amp;quot;Times New Roman&amp;quot;;&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot; style=&quot;text-align: center;&quot;&gt;&lt;i&gt;Copied from &lt;a href=&quot;http://twitter.github.io/bootstrap/&quot;&gt;http://twitter.github.io/bootstrap/&lt;/a&gt;&lt;/i&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;Extract it into your development folder and start using it as your front-end framework. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;I can say you have to go through the example and some tutorial to get yourself familiar with this framework, happy coding everyone!&amp;nbsp;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/7775132346176852948/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2013/05/twitter-bootstrap.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/7775132346176852948'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/7775132346176852948'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2013/05/twitter-bootstrap.html' title='Twitter bootstrap'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://1.bp.blogspot.com/-9ACrSY5bq0s/UYhsyzCXCbI/AAAAAAAAJOs/bKeL5_9cqlc/s72-c/2013-05-07_093118.bmp" height="72" width="72"/><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-3318726790692571474</id><published>2012-10-03T11:15:00.001+08:00</published><updated>2012-10-03T11:15:38.005+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="browser"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML5"/><category scheme="http://www.blogger.com/atom/ns#" term="Web"/><title type='text'>Google chrome overtake Internet Explorer</title><content type='html'>&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;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. &lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;Chrome&#39;s share of the market rose to 32.8% in the week ending May 20, while Internet Explorer&#39;s share of the market dropped to 31.9%, according to new data from &lt;a href=&quot;http://gs.statcounter.com/#browser-ww-weekly-200827-201240&quot;&gt;StatCounter &lt;/a&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;And Chrome is going strong from there with 33.78% today, while IE’s share of market is 32.63%, according to data from &lt;a href=&quot;http://gs.statcounter.com/#browser-ww-weekly-200827-201240&quot;&gt;StatCounter &lt;/a&gt;for now. &lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;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.&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;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. &lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;I hope IE will push their web browser improvement as web becomes one of the strong channel for user to access data from anywhere.&amp;nbsp;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/3318726790692571474/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2012/10/google-chrome-overtake-internet-explorer.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/3318726790692571474'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/3318726790692571474'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2012/10/google-chrome-overtake-internet-explorer.html' title='Google chrome overtake Internet Explorer'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-8823644742158875028</id><published>2012-09-26T14:05:00.001+08:00</published><updated>2012-09-26T14:05:38.961+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="HTML5"/><title type='text'>W3C: Getting HTML5 to Recommendation in 2014</title><content type='html'>&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;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. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;You can refer to link below for more details: -&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;a href=&quot;http://www.w3.org/QA/2012/09/getting_html5_to_recommendatio.html&quot;&gt;http://www.w3.org/QA/2012/09/getting_html5_to_recommendatio.html&lt;/a&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;It the statement: “&lt;span style=&quot;background: white; color: #33444a; font-family: &amp;quot;Gill Sans MT&amp;quot;,&amp;quot;sans-serif&amp;quot;;&quot;&gt;HTML Working Group Chairs proposed a&lt;span class=&quot;apple-converted-space&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;a href=&quot;http://lists.w3.org/Archives/Public/public-html/2012Sep/0243.html&quot;&gt;&lt;span style=&quot;background: white; color: #005a9c; font-family: &amp;quot;Gill Sans MT&amp;quot;,&amp;quot;sans-serif&amp;quot;;&quot;&gt;plan&lt;/span&gt;&lt;/a&gt;&lt;span class=&quot;apple-converted-space&quot;&gt;&lt;span style=&quot;background: white; color: #33444a; font-family: &amp;quot;Gill Sans MT&amp;quot;,&amp;quot;sans-serif&amp;quot;;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background: white; color: #33444a; font-family: &amp;quot;Gill Sans MT&amp;quot;,&amp;quot;sans-serif&amp;quot;;&quot;&gt;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.&lt;/span&gt;”&lt;/span&gt;&lt;br /&gt;&lt;!--[if !supportLineBreakNewLine]--&gt;&lt;br /&gt;&lt;!--[endif]--&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;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. &amp;nbsp;“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. &amp;nbsp;Will it be after 5.0 only reveal what is supposed to be in 5.1?&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;We all have to stay tune on the movement and figure it out sooner or later.&amp;nbsp;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/8823644742158875028/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2012/09/w3c-getting-html5-to-recommendation-in.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/8823644742158875028'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/8823644742158875028'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2012/09/w3c-getting-html5-to-recommendation-in.html' title='W3C: Getting HTML5 to Recommendation in 2014'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-517691195029138139</id><published>2012-09-25T13:14:00.004+08:00</published><updated>2012-09-25T13:15:26.246+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="PHP"/><title type='text'>PHP programming - Setting up your development environment in Windows</title><content type='html'>&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;I always get this question from junior who like to kick start learn about PHP programming language: How to get development side running at my PC, and how to test on it?&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;Interesting question and I think I should have shared this at my blog and we shall comment accordingly starting from here. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;“Install &lt;a href=&quot;http://www.apachefriends.org/en/xampp-windows.html&quot;&gt;XAMPP&lt;/a&gt;!” This is always my answer for those who ask me this question. &amp;nbsp;Lots of debate about my answer because there are some of the developers especially seniors said developer need to know how to install and configure Apache, MySQL, and PHP individually. Yup, you are right!! But if for developers who like to kick start on programming should they just focus on getting the development environment up and running first?&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;Installation for &lt;a href=&quot;http://www.apachefriends.org/en/xampp-windows.html&quot;&gt;XAMPP&lt;/a&gt; is pretty easy as it bundled with &lt;a href=&quot;http://www.apache.org/&quot;&gt;Apache&lt;/a&gt;, &lt;a href=&quot;http://www.mysql.com/&quot;&gt;MySQL&lt;/a&gt;, &lt;a href=&quot;http://www.phpmyadmin.net/home_page/index.php&quot;&gt;phpMyAdmin&lt;/a&gt;, &lt;a href=&quot;http://filezilla-project.org/&quot;&gt;FileZilla&lt;/a&gt; FTP Server and of cause &lt;a href=&quot;http://www.php.net/&quot;&gt;PHP&lt;/a&gt;!!&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;And then you are done with the development environment, I think the next question will be what can I use to do the coding? Yeah, which IDE should I go for?? &amp;nbsp;Alright, this might be a tricky one for every programmer and more debates on the best one to be. I personally recommended &lt;a href=&quot;http://www.eclipse.org/downloads/&quot;&gt;eclipse&lt;/a&gt;and &lt;a href=&quot;http://netbeans.org/downloads/&quot;&gt;netbeans&lt;/a&gt;, because it is come with lots of features that I need for PHP development. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;If you are not comfortable with these, you can have a check with the comparison of the IDE Please go this link:-&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;a href=&quot;http://en.wikipedia.org/wiki/Comparison_of_integrated_development_environments#PHP&quot;&gt;http://en.wikipedia.org/wiki/Comparison_of_integrated_development_environments#PHP&lt;/a&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;You will need to study on the features and get a kick start on development and know which is best for your environment. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;Happy to drop comment and we shall start something from here. :D&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/517691195029138139/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2012/09/php-programming-setting-up-your.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/517691195029138139'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/517691195029138139'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2012/09/php-programming-setting-up-your.html' title='PHP programming - Setting up your development environment in Windows'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-304080109120887593</id><published>2012-06-26T13:17:00.001+08:00</published><updated>2012-06-26T13:18:19.702+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="PHP"/><category scheme="http://www.blogger.com/atom/ns#" term="Web"/><title type='text'>Time Zone with PHP</title><content type='html'>&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;Time zone setting can be a tricky thing on the Web. Imagine you have hosted you web site at web hosting company you probably not sure where your Web hosting company maintains the servers that house your Web site. The current time store in the server where PHP is running is always referring to the server location. And the user might be from other part of the world. &lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;br /&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white;&quot;&gt;So, this is the case we might just set particularly one time zone that user can refer to. This is the statement that can be included to define your application timezone in your script:&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div style=&quot;background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;&quot;&gt;&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;pre style=&quot;line-height: 125%; margin: 0;&quot;&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td&gt;&lt;pre style=&quot;line-height: 125%; margin: 0;&quot;&gt;date_default_timezone_set(&quot;UTC&quot;);&lt;br /&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;br /&gt;You can seriously refer to php.net timezone supported list at&amp;nbsp;&lt;a href=&quot;http://www.php.net/manual/en/timezones.php&quot;&gt;http://www.php.net/manual/en/timezones.php&lt;/a&gt;.&lt;br /&gt;&lt;br /&gt;This topic is not going to go through every single thing for date time, but I will focus on timezone only as this is something people been looking for in PHP.&lt;br /&gt;&lt;br /&gt;Basically PHP have a class that can be used when you need it for PHP programming, Class&amp;nbsp;&lt;a href=&quot;http://www.php.net/manual/en/class.datetimezone.php&quot;&gt;DateTimeZone&lt;/a&gt;&amp;nbsp;is created to support the time zone in PHP.&lt;br /&gt;&lt;br /&gt;&lt;div style=&quot;background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;&quot;&gt;&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;pre style=&quot;line-height: 125%; margin: 0;&quot;&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td&gt;&lt;pre style=&quot;line-height: 125%; margin: 0;&quot;&gt;print_r( DateTimeZone::listIdentifiers());&lt;br /&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;br /&gt;This script will generate a list of supported timezone like:&lt;br /&gt;&lt;br /&gt;&lt;pre style=&quot;background-color: #e1e1e1; font-family: Consolas, &#39;Andale Mono WT&#39;, &#39;Andale Mono&#39;, &#39;Lucida Console&#39;, Monaco, &#39;Courier New&#39;, Courier, monospace; font-size: 14px; text-align: left;&quot;&gt;Africa/Abidjan&lt;br /&gt;Africa/Accra&lt;br /&gt;Africa/Addis_Ababa&lt;br /&gt;Africa/Algiers&lt;br /&gt;Africa/Asmara&lt;/pre&gt;&lt;br /&gt;This will be a simple code that created for getting timezone area, offset and also list of&amp;nbsp;Abbreviations into an array:-&lt;br /&gt;&lt;br /&gt;&lt;div style=&quot;background: #f8f8f8; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;&quot;&gt;&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;pre style=&quot;line-height: 125%; margin: 0;&quot;&gt; 1&lt;br /&gt; 2&lt;br /&gt; 3&lt;br /&gt; 4&lt;br /&gt; 5&lt;br /&gt; 6&lt;br /&gt; 7&lt;br /&gt; 8&lt;br /&gt; 9&lt;br /&gt;10&lt;br /&gt;11&lt;br /&gt;12&lt;br /&gt;13&lt;/pre&gt;&lt;/td&gt;&lt;td&gt;&lt;pre style=&quot;line-height: 125%; margin: 0;&quot;&gt;    $tempArray = array();&lt;br /&gt;    $i = 0;&lt;br /&gt;foreach(DateTimeZone::listIdentifiers() as $tz) {&lt;br /&gt;    $current_tz = new DateTimeZone($tz);&lt;br /&gt;    $offset =  $current_tz-&amp;gt;getOffset($dt);&lt;br /&gt;    $transition =  $current_tz-&amp;gt;getTransitions($dt-&amp;gt;getTimestamp(), $dt-&amp;gt;getTimestamp());&lt;br /&gt;    $abbr = $transition[0][&#39;abbr&#39;];&lt;br /&gt;    $tempArray[$i]= array( &quot;timezone&quot;=&amp;gt;$tz, &lt;br /&gt;             &quot;offset&quot;=&amp;gt;$offset,&lt;br /&gt;      &quot;abbr&quot; =&amp;gt;$abbr);&lt;br /&gt;&lt;br /&gt; $i++; &lt;br /&gt;}&lt;br /&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;br /&gt;When you try to print_r &amp;nbsp;the&amp;nbsp;&lt;span style=&quot;background-color: white; line-height: 16px;&quot;&gt;$tempArray, it will return result below:-&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;div style=&quot;background: #f8f8f8; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;&quot;&gt;&lt;pre style=&quot;line-height: 125%; margin: 0;&quot;&gt;Array&lt;br /&gt;(&lt;br /&gt;    [0] =&amp;gt; Array&lt;br /&gt;        (&lt;br /&gt;            [timezone] =&amp;gt; Africa/Abidjan&lt;br /&gt;            [offset] =&amp;gt; 0&lt;br /&gt;            [abbr] =&amp;gt; GMT&lt;br /&gt;        )&lt;br /&gt;&lt;br /&gt;    [1] =&amp;gt; Array&lt;br /&gt;        (&lt;br /&gt;            [timezone] =&amp;gt; Africa/Accra&lt;br /&gt;            [offset] =&amp;gt; 0&lt;br /&gt;            [abbr] =&amp;gt; GMT&lt;br /&gt;        )&lt;br /&gt;&lt;br /&gt;    [2] =&amp;gt; Array&lt;br /&gt;        (&lt;br /&gt;            [timezone] =&amp;gt; Africa/Addis_Ababa&lt;br /&gt;            [offset] =&amp;gt; 10800&lt;br /&gt;            [abbr] =&amp;gt; EAT&lt;br /&gt;        )&lt;br /&gt;&lt;br /&gt;)&lt;br /&gt;&lt;/pre&gt;&lt;/div&gt;&lt;br /&gt;You can then have your own function to get it massage and display accordingly. I believe lots of developer know how to get used with this Class and play around with it on their web site.&lt;br /&gt;&lt;br /&gt;I am happy to comment on this.</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/304080109120887593/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2012/06/time-zone-with-php.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/304080109120887593'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/304080109120887593'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2012/06/time-zone-with-php.html' title='Time Zone with PHP'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-1843652760980545600</id><published>2012-06-22T10:57:00.000+08:00</published><updated>2012-06-23T17:59:48.627+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML5"/><title type='text'>CSS ? - Cascading Style Sheets, CSS3?</title><content type='html'>&lt;br /&gt;&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;a href=&quot;http://www.w3.org/html/logo/badge/html5-badge-h-css3.png&quot; imageanchor=&quot;1&quot; style=&quot;clear: right; float: right; margin-bottom: 1em; margin-left: 1em;&quot;&gt;&lt;img alt=&quot;HTML5 Powered with CSS3 / Styling&quot; border=&quot;0&quot; height=&quot;64&quot; src=&quot;http://www.w3.org/html/logo/badge/html5-badge-h-css3.png&quot; title=&quot;HTML5 Powered with CSS3 / Styling&quot; width=&quot;133&quot; /&gt;&lt;/a&gt;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&amp;nbsp; 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. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;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.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;Here is some of the CSS code example: -&amp;nbsp;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;&quot;&gt;&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;pre style=&quot;line-height: 125%; margin: 0;&quot;&gt;1&lt;br /&gt;2&lt;/pre&gt;&lt;/td&gt;&lt;td&gt;&lt;pre style=&quot;line-height: 125%; margin: 0;&quot;&gt;&lt;span style=&quot;color: #0060b0; font-weight: bold;&quot;&gt;#column1&lt;/span&gt; {&lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;float&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;left&lt;/span&gt;; &lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;width&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: #6000e0; font-weight: bold;&quot;&gt;100px&lt;/span&gt;; &lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;padding&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: #6000e0; font-weight: bold;&quot;&gt;10px&lt;/span&gt;; }&lt;br /&gt;&lt;span style=&quot;color: #0060b0; font-weight: bold;&quot;&gt;#column2&lt;/span&gt; {&lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;float&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;left&lt;/span&gt;; &lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;width&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: #6000e0; font-weight: bold;&quot;&gt;100px&lt;/span&gt;; &lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;padding&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: #6000e0; font-weight: bold;&quot;&gt;10px&lt;/span&gt;; }&lt;br /&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;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. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;External Style Sheets is always a common thing for developer nowadays as can save a lot of work and are stored in CSS files.&lt;br /&gt;&lt;br /&gt;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:-&lt;br /&gt;&lt;br /&gt;&lt;div style=&quot;background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;&quot;&gt;&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;pre style=&quot;line-height: 125%; margin: 0;&quot;&gt;1&lt;br /&gt;2&lt;br /&gt;3&lt;br /&gt;4&lt;br /&gt;5&lt;br /&gt;6&lt;br /&gt;7&lt;/pre&gt;&lt;/td&gt;&lt;td&gt;&lt;pre style=&quot;line-height: 125%; margin: 0;&quot;&gt;&lt;span style=&quot;color: #303030;&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&quot;color: #007000;&quot;&gt;style&lt;/span&gt; &lt;span style=&quot;color: #007000;&quot;&gt;type&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;background-color: #fff0f0;&quot;&gt;&quot;text/css&quot;&lt;/span&gt; &lt;span style=&quot;color: #007000;&quot;&gt;media&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;background-color: #fff0f0;&quot;&gt;&quot;print&quot;&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;color: #007000;&quot;&gt;label&lt;/span&gt; {&lt;br /&gt;&lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;float&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;left&lt;/span&gt;;&lt;br /&gt;&lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;display&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;block&lt;/span&gt;;&lt;br /&gt;&lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;width&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: #6000e0; font-weight: bold;&quot;&gt;3cm&lt;/span&gt;;&lt;br /&gt;}&lt;br /&gt;&lt;span style=&quot;color: #303030;&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span style=&quot;color: #007000;&quot;&gt;style&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;br /&gt;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&amp;nbsp;&lt;span style=&quot;background-color: white;&quot;&gt;further enhance it standard to enable developer to detect user agent screen size, this allow developer to style their web accordingly.&amp;nbsp;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;br /&gt;&lt;div style=&quot;background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;&quot;&gt;&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;pre style=&quot;line-height: 125%; margin: 0;&quot;&gt;1&lt;br /&gt;2&lt;br /&gt;3&lt;br /&gt;4&lt;/pre&gt;&lt;/td&gt;&lt;td&gt;&lt;pre style=&quot;line-height: 125%; margin: 0;&quot;&gt;&lt;span style=&quot;color: #303030;&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&quot;color: #007000;&quot;&gt;style&lt;/span&gt; &lt;span style=&quot;color: #007000;&quot;&gt;type&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;background-color: #fff0f0;&quot;&gt;&quot;text/css&quot;&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;@media&lt;/span&gt; &lt;span style=&quot;color: #007000;&quot;&gt;screen&lt;/span&gt; &lt;span style=&quot;color: #007000;&quot;&gt;and&lt;/span&gt; &lt;span style=&quot;color: #303030;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color: #007000;&quot;&gt;max-device-width&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: #007000;&quot;&gt;480px&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;)&lt;/span&gt; {&lt;br /&gt;}&lt;br /&gt;&lt;span style=&quot;color: #303030;&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span style=&quot;color: #007000;&quot;&gt;style&lt;/span&gt;&lt;span style=&quot;color: #303030;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;br /&gt;Story come more interesting when HTML5 is in picture.&amp;nbsp;&lt;span style=&quot;background-color: white;&quot;&gt;CSS3&lt;/span&gt;&lt;span style=&quot;background-color: white;&quot;&gt;has become part HTML5, it allow developer to make the web site look more interesting with more animation allowed.&lt;/span&gt;&lt;br /&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;There are lots of web site that provide some tools to generate CSS3 like&amp;nbsp;&lt;a href=&quot;http://www.css3maker.com/&quot; style=&quot;background-color: white;&quot;&gt;http://www.css3maker.com/&lt;/a&gt;,&amp;nbsp;&lt;a href=&quot;http://css3generator.com/&quot; style=&quot;background-color: white;&quot;&gt;http://css3generator.com/&lt;/a&gt;&amp;nbsp;and so on. You can get it from searching through &lt;a href=&quot;http://google.com/&quot;&gt;google.com&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;o:p&gt;&lt;br /&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;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 &lt;a href=&quot;http://caniuse.com/&quot;&gt;caniuse.com&lt;/a&gt;. hopefully browser provider can speed up their development on supporting these features.&amp;nbsp;&lt;o:p&gt;&lt;/o:p&gt;&lt;br /&gt;&lt;br /&gt;I have to agree that with CSS web site been look more interesting.&lt;br /&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/1843652760980545600/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2012/06/css-cascading-style-sheets-css3.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/1843652760980545600'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/1843652760980545600'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2012/06/css-cascading-style-sheets-css3.html' title='CSS ? - Cascading Style Sheets, CSS3?'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-5012783907138325782</id><published>2012-06-20T22:20:00.002+08:00</published><updated>2012-06-23T17:59:24.420+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="CSS"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML5"/><category scheme="http://www.blogger.com/atom/ns#" term="Javascript"/><title type='text'>HTML5 with Modernizr</title><content type='html'>&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://3.bp.blogspot.com/-V6lnksjC0g0/T-HQuEBFRDI/AAAAAAAABOM/Ka0L9N74kYs/s1600/html5.jpg&quot; imageanchor=&quot;1&quot; style=&quot;clear: right; float: right; margin-bottom: 1em; margin-left: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://3.bp.blogspot.com/-V6lnksjC0g0/T-HQuEBFRDI/AAAAAAAABOM/Ka0L9N74kYs/s1600/html5.jpg&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;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.&amp;nbsp;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;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.&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;Ok, What is &lt;a href=&quot;http://modernizr.com/docs/#whatis&quot;&gt;Modernizr&lt;/a&gt;?&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;a href=&quot;http://modernizr.com/docs/#whatis&quot;&gt;Modernizr&lt;/a&gt; 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.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://3.bp.blogspot.com/-k8U88jL8Wzc/T-HQrxLjmhI/AAAAAAAABOE/OytGfMk803k/s1600/modernizr.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;205&quot; src=&quot;http://3.bp.blogspot.com/-k8U88jL8Wzc/T-HQrxLjmhI/AAAAAAAABOE/OytGfMk803k/s400/modernizr.png&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;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 &lt;a href=&quot;http://www.html5rocks.com/en/tutorials/workers/basics/&quot;&gt;http://www.html5rocks.com/en/tutorials/workers/basics/&lt;/a&gt;for some basic briefing on it.&amp;nbsp;&lt;o:p&gt;&lt;/o:p&gt;&lt;br /&gt;&lt;br /&gt;Let&#39;s check on this example below:-&lt;br /&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;&quot;&gt;&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;pre style=&quot;line-height: 125%; margin: 0;&quot;&gt; 1&lt;br /&gt; 2&lt;br /&gt; 3&lt;br /&gt; 4&lt;br /&gt; 5&lt;br /&gt; 6&lt;br /&gt; 7&lt;br /&gt; 8&lt;br /&gt; 9&lt;br /&gt;10&lt;br /&gt;11&lt;br /&gt;12&lt;br /&gt;13&lt;br /&gt;14&lt;br /&gt;15&lt;br /&gt;16&lt;br /&gt;17&lt;br /&gt;18&lt;/pre&gt;&lt;/td&gt;&lt;td&gt;&lt;pre style=&quot;line-height: 125%; margin: 0;&quot;&gt;&lt;span style=&quot;color: #507090;&quot;&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;color: #007000;&quot;&gt;&amp;lt;html&lt;/span&gt; &lt;span style=&quot;color: #0000c0;&quot;&gt;class=&lt;/span&gt;&lt;span style=&quot;background-color: #fff0f0;&quot;&gt;&quot;no-js&quot;&lt;/span&gt; &lt;span style=&quot;color: #0000c0;&quot;&gt;lang=&lt;/span&gt;&lt;span style=&quot;background-color: #fff0f0;&quot;&gt;&quot;en&quot;&lt;/span&gt;&lt;span style=&quot;color: #007000;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;color: #007000;&quot;&gt;&amp;lt;head&amp;gt;&lt;/span&gt;&lt;br /&gt;  &lt;span style=&quot;color: #007000;&quot;&gt;&amp;lt;meta&lt;/span&gt; &lt;span style=&quot;color: #0000c0;&quot;&gt;charset=&lt;/span&gt;&lt;span style=&quot;background-color: #fff0f0;&quot;&gt;&quot;utf-8&quot;&lt;/span&gt;&lt;span style=&quot;color: #007000;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;  &lt;span style=&quot;color: #007000;&quot;&gt;&amp;lt;title&amp;gt;&lt;/span&gt;Testing Modernizr For HTML5 Web Worker&lt;span style=&quot;color: #007000;&quot;&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;&lt;br /&gt;  &lt;span style=&quot;color: #007000;&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span style=&quot;color: #0000c0;&quot;&gt;src=&lt;/span&gt;&lt;span style=&quot;background-color: #fff0f0;&quot;&gt;&quot;http://modernizr.com/downloads/modernizr-latest.js&quot;&lt;/span&gt;&lt;span style=&quot;color: #007000;&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;color: #007000;&quot;&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;color: #007000;&quot;&gt;&amp;lt;body&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;color: #007000;&quot;&gt;&amp;lt;script&amp;gt;&lt;/span&gt;&lt;br /&gt;      &lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;if&lt;/span&gt;(Modernizr.webworkers){&lt;br /&gt;          alert(&lt;span style=&quot;background-color: #fff0f0;&quot;&gt;&quot;Browser supports Web Workers&quot;&lt;/span&gt;);&lt;br /&gt;        }&lt;br /&gt;        &lt;span style=&quot;color: green; font-weight: bold;&quot;&gt;else&lt;/span&gt;{&lt;br /&gt;          alert(&lt;span style=&quot;background-color: #fff0f0;&quot;&gt;&quot;Web Workers not supported&quot;&lt;/span&gt;);&lt;br /&gt;        }   &lt;br /&gt;   &lt;span style=&quot;color: #007000;&quot;&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;color: #007000;&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;color: #007000;&quot;&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;With this code you will get alert to check if the browser support HTML5&#39;s Web Workers feature.&lt;br /&gt;&lt;br /&gt;Google Chrome having a positive test on this features and it supported HTML5&#39;s Web Workers feature:&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://2.bp.blogspot.com/-qog8QCWUgbk/T-HY0kXBYGI/AAAAAAAABOY/-EsDh7nG474/s1600/chrome.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://2.bp.blogspot.com/-qog8QCWUgbk/T-HY0kXBYGI/AAAAAAAABOY/-EsDh7nG474/s1600/chrome.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&amp;nbsp;Firefox is giving the green light on this feature as well:-&lt;br /&gt;&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://3.bp.blogspot.com/-Uc-GgpAehsE/T-HY1OCWFVI/AAAAAAAABOg/Gwi8RZYFRqI/s1600/firefox.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://3.bp.blogspot.com/-Uc-GgpAehsE/T-HY1OCWFVI/AAAAAAAABOg/Gwi8RZYFRqI/s1600/firefox.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: left;&quot;&gt;IE9 is obviously not support Web Workers.&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://3.bp.blogspot.com/-0VmVItves18/T-HY_UetafI/AAAAAAAABOo/gD1njAEgQjU/s1600/IE.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://3.bp.blogspot.com/-0VmVItves18/T-HY_UetafI/AAAAAAAABOo/gD1njAEgQjU/s1600/IE.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;Theory behind&amp;nbsp; Modernizr&amp;nbsp;is&amp;nbsp;it adds a large number of classes indicating the browser&#39;s capabilities into the html tag with no-js class added beginning of the code.&lt;br /&gt;&lt;br /&gt;you can have a check on firebugs for firefox, it will show this:-&lt;br /&gt;&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://2.bp.blogspot.com/-a-zecvUrMDs/T-Hbcy5WETI/AAAAAAAABO4/7z5FVICdcBw/s1600/html5.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://2.bp.blogspot.com/-a-zecvUrMDs/T-Hbcy5WETI/AAAAAAAABO4/7z5FVICdcBw/s1600/html5.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;/div&gt;&lt;br /&gt;if you interested to check out what are the features that can be detected, please go to the link below:-&lt;br /&gt;&lt;a href=&quot;http://modernizr.com/docs/#features-html5&quot;&gt;http://modernizr.com/docs/#features-html5&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;And please go to &lt;a href=&quot;http://modernizr.com/download/&quot;&gt;Download &lt;/a&gt;page to build your production copy, and you can choose what to include on the build itself.&lt;br /&gt;&lt;br /&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/5012783907138325782/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2012/06/html5-with-modernizr.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/5012783907138325782'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/5012783907138325782'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2012/06/html5-with-modernizr.html' title='HTML5 with Modernizr'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://3.bp.blogspot.com/-V6lnksjC0g0/T-HQuEBFRDI/AAAAAAAABOM/Ka0L9N74kYs/s72-c/html5.jpg" height="72" width="72"/><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-5756498884366740026</id><published>2012-06-10T13:11:00.001+08:00</published><updated>2012-06-23T17:58:51.747+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="HTML5"/><category scheme="http://www.blogger.com/atom/ns#" term="Webkit"/><title type='text'>I love Webkit! And you should too…</title><content type='html'>&lt;br /&gt;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é.&lt;br /&gt;&lt;br /&gt;Smartphone and tablet&#39;s&amp;nbsp;&lt;a href=&quot;http://en.wikipedia.org/wiki/Mobile_operating_system&quot;&gt;OS&amp;nbsp;&lt;/a&gt;been nominated by mobile provider, Apple&amp;nbsp;&lt;a href=&quot;http://en.wikipedia.org/wiki/IOS&quot;&gt;IOS&lt;/a&gt;, Google’s&amp;nbsp;&lt;a href=&quot;http://www.android.com/&quot;&gt;Android&lt;/a&gt;,&amp;nbsp;&lt;a href=&quot;http://www.rim.com/&quot;&gt;Research in Motion&lt;/a&gt;’s Blackberry, and Microsoft’s&amp;nbsp;&lt;a href=&quot;http://www.microsoft.com/windowsphone/en-us/default.aspx&quot;&gt;Windows Mobile&lt;/a&gt;. 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.&lt;br /&gt;&lt;br /&gt;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.&lt;br /&gt;&lt;br /&gt;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.&lt;br /&gt;&lt;br /&gt;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 &lt;a href=&quot;http://www.jsintech.com/2012/04/html5-lets-do-it.html&quot;&gt;HTML5 &lt;/a&gt;supported for tablet and mobile.&lt;br /&gt;&lt;br /&gt;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!&lt;br /&gt;&lt;br /&gt;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.&lt;br /&gt;&lt;br class=&quot;Apple-interchange-newline&quot; /&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/5756498884366740026/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2012/06/i-love-webkit-and-you-should-too.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/5756498884366740026'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/5756498884366740026'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2012/06/i-love-webkit-and-you-should-too.html' title='I love Webkit! And you should too…'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-807605979751849469</id><published>2012-05-07T20:52:00.001+08:00</published><updated>2012-05-07T21:08:02.820+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="HTML5"/><category scheme="http://www.blogger.com/atom/ns#" term="mobile Web"/><title type='text'>What? Mobile and Tablet Web design?</title><content type='html'>&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;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. &amp;nbsp;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. &lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;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.”&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;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. &lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;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.&amp;nbsp;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;Here are the links to the two style sheets for the iPad:&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;pre style=&quot;background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px;&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&amp;lt;link href=&quot;css/ipadPortrait.css&quot; rel=&quot;stylesheet&quot; media=&quot;only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)&quot;&amp;gt;&lt;/span&gt;&lt;/pre&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;pre style=&quot;background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px;&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&amp;lt;link href=&quot;css/ipadLanscape.css&quot; rel=&quot;stylesheet&quot; media=&quot;only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)&quot;&amp;gt;&lt;/span&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/pre&gt;&lt;br /&gt;&lt;span lang=&quot;EN-US&quot;&gt;Here are the links to the two style sheets for the iPhone:&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;br /&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;pre style=&quot;background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px;&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&amp;lt;link href=&quot;css/iphonePortrait.css&quot; rel=&quot;stylesheet&quot; media=&quot;only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait)&quot;&amp;gt;&lt;/span&gt;&lt;/pre&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;pre style=&quot;background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px;&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&amp;lt;link href=&quot;css/iphoneLanscape.css&quot; rel=&quot;stylesheet&quot; media=&quot;only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape)&quot;&amp;gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/pre&gt;&lt;/div&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;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. &amp;nbsp;&lt;/div&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;span lang=&quot;EN-US&quot;&gt;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. &amp;nbsp;That will be more on creating one using PHP or some server side programming language.&amp;nbsp;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;span lang=&quot;EN-US&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/807605979751849469/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2012/05/what-mobile-and-tablet-web-design.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/807605979751849469'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/807605979751849469'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2012/05/what-mobile-and-tablet-web-design.html' title='What? Mobile and Tablet Web design?'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-4645265800398409305</id><published>2012-04-29T23:53:00.002+08:00</published><updated>2012-05-06T20:51:39.907+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="blogger"/><title type='text'>Add Custom Favicon to Blogger</title><content type='html'>&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;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. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;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&#39;t let people know you are using blogger. :P&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;table align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; class=&quot;tr-caption-container&quot; style=&quot;margin-left: auto; margin-right: auto; text-align: center;&quot;&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style=&quot;text-align: center;&quot;&gt;&lt;a href=&quot;http://1.bp.blogspot.com/-bciVR6nxNaU/T51jHFuIxKI/AAAAAAAAA-Y/L0utMX-1_QI/s1600/2012-04-29_234858.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: auto; margin-right: auto;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://1.bp.blogspot.com/-bciVR6nxNaU/T51jHFuIxKI/AAAAAAAAA-Y/L0utMX-1_QI/s1600/2012-04-29_234858.png&quot; /&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class=&quot;tr-caption&quot; style=&quot;text-align: center;&quot;&gt;&lt;i&gt;blogger favicon&#39;s print screen&lt;/i&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;This can be seen under Blogger’s Dashboard &amp;gt; 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. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://2.bp.blogspot.com/-Sv3atcmLYgc/T51jIAQFglI/AAAAAAAAA-g/uX8cfIvaDf8/s1600/2012-04-29_234913.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://2.bp.blogspot.com/-Sv3atcmLYgc/T51jIAQFglI/AAAAAAAAA-g/uX8cfIvaDf8/s1600/2012-04-29_234913.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;Here you go, you can have a new favicon now.&amp;nbsp;I have a &lt;a href=&quot;http://www.jsintech.com/2010/12/add-custom-favicon-to-your-blogger-blog.html&quot;&gt;blog post&lt;/a&gt; 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.&amp;nbsp;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/4645265800398409305/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2012/04/add-custom-favicon-to-blogger.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/4645265800398409305'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/4645265800398409305'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2012/04/add-custom-favicon-to-blogger.html' title='Add Custom Favicon to Blogger'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://1.bp.blogspot.com/-bciVR6nxNaU/T51jHFuIxKI/AAAAAAAAA-Y/L0utMX-1_QI/s72-c/2012-04-29_234858.png" height="72" width="72"/><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-6159275171653190874</id><published>2012-04-28T00:14:00.000+08:00</published><updated>2012-04-28T00:16:52.053+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="HTML5"/><category scheme="http://www.blogger.com/atom/ns#" term="Web"/><title type='text'>HTML5, Let’s do it</title><content type='html'>&lt;a href=&quot;http://www.w3.org/html/logo/&quot;&gt;&lt;img alt=&quot;HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D &amp;amp; Effects, Multimedia, Performance &amp;amp; Integration, Semantics, and Offline &amp;amp; Storage&quot; height=&quot;64&quot; src=&quot;http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-css3-device-graphics-multimedia-performance-semantics-storage.png&quot; title=&quot;HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D &amp;amp; Effects, Multimedia, Performance &amp;amp; Integration, Semantics, and Offline &amp;amp; Storage&quot; width=&quot;357&quot; /&gt;&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;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.&amp;nbsp;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;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.&amp;nbsp;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;a name=&#39;more&#39;&gt;&lt;/a&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;Features are like:-&amp;nbsp;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;1.&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;Offline &amp;amp; Storage&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;2.&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;Device Access&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;3.&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;Connectivity / Realtime&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;4.&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;Performance &amp;amp; Integration&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;5.&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;Multimedia&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;6.&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;Semantics&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;7.&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;Graphics, 3D &amp;amp; Effects&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;8.&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;CSS3 / Styling&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;br /&gt;&lt;span lang=&quot;EN-US&quot; style=&quot;font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 115%;&quot;&gt;My favorite site to go thru html5 is &lt;a href=&quot;http://html5rocks.com/&quot;&gt;html5rocks.com&lt;/a&gt; and keeps updated with lots of passionate programmer to come out with something new and get us updated with how they use it for range of features it has.&amp;nbsp;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;If you want to start build with html5, you can come to &lt;a href=&quot;http://www.html5rocks.com/en/tutorials/&quot;&gt;Tutorial &lt;/a&gt;page and pick some of the easy tutorial to learn how interesting it is.&lt;/span&gt;&lt;br /&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/6159275171653190874/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2012/04/html5-lets-do-it.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/6159275171653190874'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/6159275171653190874'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2012/04/html5-lets-do-it.html' title='HTML5, Let’s do it'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-1851270916706761264</id><published>2012-04-24T14:46:00.002+08:00</published><updated>2012-04-28T00:22:46.355+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="HTML5"/><category scheme="http://www.blogger.com/atom/ns#" term="Web"/><title type='text'>Mobile apps vs mobile web</title><content type='html'>&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;br /&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif; line-height: 115%;&quot;&gt;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?&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif; line-height: 115%;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;strong&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: windowtext; border-bottom-style: none; border-bottom-width: 1pt; border-image: initial; border-left-color: windowtext; border-left-style: none; border-left-width: 1pt; border-right-color: windowtext; border-right-style: none; border-right-width: 1pt; border-top-color: windowtext; border-top-style: none; border-top-width: 1pt; color: #373737; font-family: Arial, Helvetica, sans-serif; font-weight: normal; line-height: 115%; padding-bottom: 0cm; padding-left: 0cm; padding-right: 0cm; padding-top: 0cm;&quot;&gt;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?&lt;/span&gt;&lt;/strong&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;a href=&quot;http://www.blogger.com/blogger.g?blogID=2510124777776048204&quot; name=&quot;more&quot;&gt;&lt;/a&gt;&lt;span style=&quot;background-color: white; color: #373737; line-height: 115%;&quot;&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;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.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: windowtext; border-bottom-style: none; border-bottom-width: 1pt; border-image: initial; border-left-color: windowtext; border-left-style: none; border-left-width: 1pt; border-right-color: windowtext; border-right-style: none; border-right-width: 1pt; border-top-color: windowtext; border-top-style: none; border-top-width: 1pt; color: #373737; font-family: Arial, Helvetica, sans-serif; line-height: 115%; padding-bottom: 0cm; padding-left: 0cm; padding-right: 0cm; padding-top: 0cm;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;a name=&#39;more&#39;&gt;&lt;/a&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: windowtext; border-bottom-style: none; border-bottom-width: 1pt; border-image: initial; border-left-color: windowtext; border-left-style: none; border-left-width: 1pt; border-right-color: windowtext; border-right-style: none; border-right-width: 1pt; border-top-color: windowtext; border-top-style: none; border-top-width: 1pt; color: #373737; font-family: Arial, Helvetica, sans-serif; line-height: 115%; padding-bottom: 0cm; padding-left: 0cm; padding-right: 0cm; padding-top: 0cm;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: windowtext; border-bottom-style: none; border-bottom-width: 1pt; border-image: initial; border-left-color: windowtext; border-left-style: none; border-left-width: 1pt; border-right-color: windowtext; border-right-style: none; border-right-width: 1pt; border-top-color: windowtext; border-top-style: none; border-top-width: 1pt; color: #373737; font-family: Arial, Helvetica, sans-serif; line-height: 115%; padding-bottom: 0cm; padding-left: 0cm; padding-right: 0cm; padding-top: 0cm;&quot;&gt;First thing, Portability!!!! If we build mobile website, we no need tocare about the platform or I can say we don’t care what phone you are using. Itcan run as long as it have web browser, sound simple right? &lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot; style=&quot;margin-bottom: 0.0001pt;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; color: #373737; font-family: Arial, Helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot; style=&quot;margin-bottom: 0.0001pt;&quot;&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; color: #373737;&quot;&gt;Secondly, easier to support and maintain as developer hascomplete access to the site. &lt;/span&gt;&lt;span style=&quot;color: #373737;&quot;&gt;No need to upgrade, all users see the latest version. Get tiredwith version upgrade which uses up all the bandwidth for the mobile’s dataplan? Or need to plug to personal computer and get things sync. Is this soundhassle? &lt;/span&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: windowtext; border-bottom-style: none; border-bottom-width: 1pt; border-image: initial; border-left-color: windowtext; border-left-style: none; border-left-width: 1pt; border-right-color: windowtext; border-right-style: none; border-right-width: 1pt; border-top-color: windowtext; border-top-style: none; border-top-width: 1pt; color: #373737; font-family: Arial, Helvetica, sans-serif; line-height: 115%; padding-bottom: 0cm; padding-left: 0cm; padding-right: 0cm; padding-top: 0cm;&quot;&gt;Third, no extra cost needed if you have a web site now. Just need toswitch to mobile site as this can be done by some twisting on the &lt;a href=&quot;http://en.wikipedia.org/wiki/Cascading_Style_Sheets&quot;&gt;CSS&lt;/a&gt; and give a go. If you want to develop a mobile app, it needs extra expertise that ableto write it out and the user interface part will need to redesign as this is applicationnot web. &lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: windowtext; border-bottom-style: none; border-bottom-width: 1pt; border-image: initial; border-left-color: windowtext; border-left-style: none; border-left-width: 1pt; border-right-color: windowtext; border-right-style: none; border-right-width: 1pt; border-top-color: windowtext; border-top-style: none; border-top-width: 1pt; color: #373737; font-family: Arial, Helvetica, sans-serif; line-height: 115%; padding-bottom: 0cm; padding-left: 0cm; padding-right: 0cm; padding-top: 0cm;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: windowtext; border-bottom-style: none; border-bottom-width: 1pt; border-image: initial; border-left-color: windowtext; border-left-style: none; border-left-width: 1pt; border-right-color: windowtext; border-right-style: none; border-right-width: 1pt; border-top-color: windowtext; border-top-style: none; border-top-width: 1pt; color: #373737; line-height: 115%; padding-bottom: 0cm; padding-left: 0cm; padding-right: 0cm; padding-top: 0cm;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; color: black; font-family: Arial, Helvetica, sans-serif; line-height: 115%;&quot;&gt;Fourth, Mobile websites are much easier forusers to find because we have google.com, and it is still a website that canget all users link to it when they trying to assign your normal website. Mobileapp is only available for specific type that you develop.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: windowtext; border-bottom-style: none; border-bottom-width: 1pt; border-image: initial; border-left-color: windowtext; border-left-style: none; border-left-width: 1pt; border-right-color: windowtext; border-right-style: none; border-right-width: 1pt; border-top-color: windowtext; border-top-style: none; border-top-width: 1pt; color: #373737; font-family: Arial, Helvetica, sans-serif; line-height: 115%; padding-bottom: 0cm; padding-left: 0cm; padding-right: 0cm; padding-top: 0cm;&quot;&gt;Still not happy with that, then you can go ahead with hiring extra programmerand proceed with mobile app development. :P&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: windowtext; border-bottom-style: none; border-bottom-width: 1pt; border-image: initial; border-left-color: windowtext; border-left-style: none; border-left-width: 1pt; border-right-color: windowtext; border-right-style: none; border-right-width: 1pt; border-top-color: windowtext; border-top-style: none; border-top-width: 1pt; color: #373737; font-family: Arial, Helvetica, sans-serif; line-height: 115%; padding-bottom: 0cm; padding-left: 0cm; padding-right: 0cm; padding-top: 0cm;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;&lt;span style=&quot;background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: windowtext; border-bottom-style: none; border-bottom-width: 1pt; border-image: initial; border-left-color: windowtext; border-left-style: none; border-left-width: 1pt; border-right-color: windowtext; border-right-style: none; border-right-width: 1pt; border-top-color: windowtext; border-top-style: none; border-top-width: 1pt; color: #373737; line-height: 115%; padding-bottom: 0cm; padding-left: 0cm; padding-right: 0cm; padding-top: 0cm;&quot;&gt;From what I see &lt;/span&gt;&lt;span style=&quot;line-height: 115%;&quot;&gt;mobile web isgrowing fast. We now have mobile Safari which is one of the most used apps onthe iPhone, allowing developers to build high performance web applications andenhancing users&#39; browsing experience. You do not need a developer account tohost and run a mobile site, you don&#39;t need to get approval from any app marketto launch a mobile website and you can make updates any time you like withoutthe hassle of waiting for approval. All these are benefits of mobile webdevelopment. &lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif; line-height: 115%;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;MsoNormal&quot;&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif; line-height: 115%;&quot;&gt;With &lt;a href=&quot;http://html5rocks.com/&quot;&gt;HTML5&lt;/a&gt; coming to rock the world, Ithink mostly all the lacking that we have with website will be solved.&lt;/span&gt;&lt;span style=&quot;line-height: 115%;&quot;&gt;&lt;span style=&quot;font-family: Arial, Helvetica, sans-serif;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/1851270916706761264/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2012/04/mobile-apps-vs-mobile-web.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/1851270916706761264'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/1851270916706761264'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2012/04/mobile-apps-vs-mobile-web.html' title='Mobile apps vs mobile web'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-5086645858123875166</id><published>2010-12-03T12:37:00.000+08:00</published><updated>2012-04-27T23:56:13.774+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="blogger"/><title type='text'>Read more widget with Blogger (Expandable Post Summary)</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://4.bp.blogspot.com/_E0dV2LViS-c/TPhvkS2HiHI/AAAAAAAAAyI/aEpoLquNnZE/s1600/2010-12-03_121717.jpg&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;220&quot; src=&quot;http://4.bp.blogspot.com/_E0dV2LViS-c/TPhvkS2HiHI/AAAAAAAAAyI/aEpoLquNnZE/s320/2010-12-03_121717.jpg&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;Referring to picture above, your blog will be more structure if you able to display post summary at the main page of the blog. refer to picture above. when blogger first come to the world, it didn&#39;t provide expandable post summary for blogs. It need some technical skill to implement it, and some even screw up their own blog with changing code in their own template.&lt;br /&gt;&lt;br /&gt;Now, blogger give easy way to make read more or expendable post summary like &lt;a href=&quot;http://wordpress.com/&quot;&gt;wordpress.com&lt;/a&gt;.&lt;br /&gt;&lt;br /&gt;&lt;a name=&#39;more&#39;&gt;&lt;/a&gt;&lt;br /&gt;How to do that? OK, This features only active if you using new editor. You need to change your post editor to the updated editor. It can be change from the Settings tab&amp;gt; Basic, just scroll down until the bottom of the basic settings you will see Global Settings .&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://4.bp.blogspot.com/_E0dV2LViS-c/TPhyE1VRT1I/AAAAAAAAAyM/oxu1q8E0Rxw/s1600/2010-12-03_122634.jpg&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;95&quot; src=&quot;http://4.bp.blogspot.com/_E0dV2LViS-c/TPhyE1VRT1I/AAAAAAAAAyM/oxu1q8E0Rxw/s400/2010-12-03_122634.jpg&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;New editor is look like picture below:&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://1.bp.blogspot.com/_E0dV2LViS-c/TPhy-sqQ-cI/AAAAAAAAAyU/0H8XaLmHwCQ/s1600/2010-12-03_123225.jpg&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;247&quot; src=&quot;http://1.bp.blogspot.com/_E0dV2LViS-c/TPhy-sqQ-cI/AAAAAAAAAyU/0H8XaLmHwCQ/s400/2010-12-03_123225.jpg&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;With new editor you will notice the &quot;Insert jump break&quot; icon in the editor&#39;s toolbar. Click on the icon and a line of jump break will be inserted into your blog post.&lt;br /&gt;&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;http://1.bp.blogspot.com/_E0dV2LViS-c/TPhyHkW6wfI/AAAAAAAAAyQ/JgBHAZl9NRE/s1600/2010-12-03_122541.jpg&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;364&quot; src=&quot;http://1.bp.blogspot.com/_E0dV2LViS-c/TPhyHkW6wfI/AAAAAAAAAyQ/JgBHAZl9NRE/s640/2010-12-03_122541.jpg&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;And now you are done. your blog will have a expendable post summary at your main page.</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/5086645858123875166/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2010/12/read-more-widget-with-blogger.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/5086645858123875166'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/5086645858123875166'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2010/12/read-more-widget-with-blogger.html' title='Read more widget with Blogger (Expandable Post Summary)'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://4.bp.blogspot.com/_E0dV2LViS-c/TPhvkS2HiHI/AAAAAAAAAyI/aEpoLquNnZE/s72-c/2010-12-03_121717.jpg" height="72" width="72"/><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-5879651069393235145</id><published>2010-12-02T12:35:00.004+08:00</published><updated>2012-04-29T23:55:20.854+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="blogger"/><category scheme="http://www.blogger.com/atom/ns#" term="google"/><title type='text'>Add Custom Favicon to your Blogger Blog</title><content type='html'>&lt;div style=&quot;text-align: left;&quot;&gt;Everyone realize that when you publish or create a blog with &lt;a href=&quot;http://blogger.com/&quot;&gt;Blogger&lt;/a&gt;, the default favicon which appears in your browser navigation bar is Blogger’s favicon (the orange and white logo). If you don&#39;t like user know that this site is actually hosted in blogger, you can change favicon setting and pointing to your custom made images.&lt;br /&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;I would like to share with you how to change it according to what your prefer in this post. I will show you how to get it done with google&#39;s picasa web to host the image.&lt;/div&gt;&lt;br /&gt;&lt;a name=&#39;more&#39;&gt;&lt;/a&gt;&lt;br /&gt;Firstly create a image with measuring 16×16 pixels. Favicons are usually made with the .ico extension, though it’s also possible to use .GIF and .PNG files to reference a favicon.&lt;br /&gt;Picasa Web upload screen will look like below:&lt;br /&gt;&lt;div&gt;&lt;br /&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; id=&quot;BLOGGER_PHOTO_ID_5545941200886409778&quot; src=&quot;http://2.bp.blogspot.com/_E0dV2LViS-c/TPckI3gJqjI/AAAAAAAAAxQ/1WLEo5EpxT4/s1600/2010-12-02_124334.jpg&quot; style=&quot;display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center;&quot; /&gt;&lt;br /&gt;&lt;div&gt;&lt;div&gt;When uploaded complete, it will be appear in your photo album:&lt;/div&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; height=&quot;57&quot; id=&quot;BLOGGER_PHOTO_ID_5545941196620516722&quot; src=&quot;http://1.bp.blogspot.com/_E0dV2LViS-c/TPckInnFTXI/AAAAAAAAAxI/LxaBwsvip0Q/s400/2010-12-02_124358.jpg&quot; style=&quot;display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center;&quot; width=&quot;400&quot; /&gt;&lt;br /&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;Search for the right column, there is a column called link to this photo. Click on image only and copy the link out. &lt;/div&gt;&lt;div&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; id=&quot;BLOGGER_PHOTO_ID_5545941207218562786&quot; src=&quot;http://4.bp.blogspot.com/_E0dV2LViS-c/TPckJPF2puI/AAAAAAAAAxY/nx35W_ge5Wk/s400/2010-12-02_124151.jpg&quot; style=&quot;display: block; height: 204px; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; width: 320px;&quot; /&gt;&lt;br /&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;As my favicon is with .PNG format, I added a code below in my header tag.&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;Refer to print screen below for what I had insert.&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; height=&quot;179&quot; id=&quot;BLOGGER_PHOTO_ID_5545943525908994338&quot; src=&quot;http://4.bp.blogspot.com/_E0dV2LViS-c/TPcmQM4u2SI/AAAAAAAAAxg/Nx2lWQ87eDA/s640/2010-12-02_125140.jpg&quot; style=&quot;display: block; height: 112px; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; width: 400px;&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;Here it is, now your favicon is showing what you had design.&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; id=&quot;BLOGGER_PHOTO_ID_5545946447271592066&quot; src=&quot;http://4.bp.blogspot.com/_E0dV2LViS-c/TPco6Pz2gII/AAAAAAAAAxo/-IAXzwFMV-s/s1600/2010-12-02_130356.jpg&quot; style=&quot;display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center;&quot; /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/5879651069393235145/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2010/12/add-custom-favicon-to-your-blogger-blog.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/5879651069393235145'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/5879651069393235145'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2010/12/add-custom-favicon-to-your-blogger-blog.html' title='Add Custom Favicon to your Blogger Blog'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://2.bp.blogspot.com/_E0dV2LViS-c/TPckI3gJqjI/AAAAAAAAAxQ/1WLEo5EpxT4/s72-c/2010-12-02_124334.jpg" height="72" width="72"/><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-2976478367738297916</id><published>2010-12-02T11:34:00.004+08:00</published><updated>2012-04-29T23:56:09.095+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="blogger"/><category scheme="http://www.blogger.com/atom/ns#" term="google"/><title type='text'>Add Google Analytics to Your Blogger Blog</title><content type='html'>As i explain at my previous post, this website is hosting at blogspot. As you are ready to get user into your blog, you should be able to track all visitor and study on their statistic and make your web great for browsing and search engine.&lt;br /&gt;&lt;div&gt;Google Analytic is a tools that provided by google, this tool help you to attract more of the traffic you are looking for, and help you turn more visitors into customers. The best thing is it is free and easy to use. &lt;/div&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;/div&gt;&lt;a name=&#39;more&#39;&gt;&lt;/a&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;I will show you how to add Google Analytics to your Blogger blog. It’s a fairly simple process and doesn&#39;t require any technical skill at all. Just do it with your google analytic account and blogger account will do.&lt;/div&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;1. Setup Google Analytics Account&lt;/div&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;Go to &lt;a href=&quot;http://www.google.com/analytics/&quot;&gt;Google Analytics&lt;/a&gt; and sign in using your Blogger login. If you didn&#39;t use google analytic before, you can create a new one. &lt;a href=&quot;http://www.google.com/analytics/&quot;&gt;Google Analytics&lt;/a&gt; main page:&lt;/div&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; height=&quot;384&quot; id=&quot;BLOGGER_PHOTO_ID_5545927569413333858&quot; src=&quot;http://4.bp.blogspot.com/_E0dV2LViS-c/TPcXvaTtY2I/AAAAAAAAAwM/ys8wmWuz8Xk/s400/2010-12-02_114825.jpg&quot; style=&quot;display: block; height: 480px; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; width: 500px;&quot; width=&quot;400&quot; /&gt;&lt;/div&gt;&lt;div&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;Once you login you’ll see a screen that looks like this:&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; height=&quot;151&quot; id=&quot;BLOGGER_PHOTO_ID_5545928952127181346&quot; src=&quot;http://1.bp.blogspot.com/_E0dV2LViS-c/TPcY_5UYUiI/AAAAAAAAAwU/Gp0WyFT6yBo/s640/2010-12-02_115610.jpg&quot; style=&quot;display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center;&quot; width=&quot;640&quot; /&gt;&lt;br /&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;Go to Create New Website Profile and create a profile with new domain. &lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; height=&quot;283&quot; id=&quot;BLOGGER_PHOTO_ID_5545931447743748002&quot; src=&quot;http://1.bp.blogspot.com/_E0dV2LViS-c/TPcbRKNvF6I/AAAAAAAAAwc/LzcEdBZz9vc/s640/2010-12-02_120518.jpg&quot; style=&quot;display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center;&quot; width=&quot;640&quot; /&gt;&lt;br /&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;Then you need to get the tracking code and post it to your blogger template. &lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; height=&quot;259&quot; id=&quot;BLOGGER_PHOTO_ID_5545932568284294066&quot; src=&quot;http://1.bp.blogspot.com/_E0dV2LViS-c/TPccSYja67I/AAAAAAAAAwk/FHMSdTpz-Vo/s640/2010-12-02_120938.jpg&quot; style=&quot;display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center;&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;2.. Paste your tracking code into your blogger template.&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;Search for the body close tag and paste the javascript provided just before that. &lt;/div&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;br /&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; height=&quot;294&quot; id=&quot;BLOGGER_PHOTO_ID_5545933271278055218&quot; src=&quot;http://3.bp.blogspot.com/_E0dV2LViS-c/TPcc7TaMbzI/AAAAAAAAAws/TR56GMTaO0Y/s640/2010-12-02_121236.jpg&quot; style=&quot;display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center;&quot; width=&quot;640&quot; /&gt;&lt;br /&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;3.. Your account is successfully setup!&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;You will see it is showing Waiting for Data, this mean your blog is good with the Google Analytics on track. &lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; height=&quot;131&quot; id=&quot;BLOGGER_PHOTO_ID_5545933577918284946&quot; src=&quot;http://1.bp.blogspot.com/_E0dV2LViS-c/TPcdNJu7BJI/AAAAAAAAAw0/8K5pyOMdAIM/s640/2010-12-02_121432.jpg&quot; style=&quot;display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center;&quot; width=&quot;640&quot; /&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;It is as simple as 123.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/2976478367738297916/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2010/12/add-google-analytics-to-your-blogger.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/2976478367738297916'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/2976478367738297916'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2010/12/add-google-analytics-to-your-blogger.html' title='Add Google Analytics to Your Blogger Blog'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://4.bp.blogspot.com/_E0dV2LViS-c/TPcXvaTtY2I/AAAAAAAAAwM/ys8wmWuz8Xk/s72-c/2010-12-02_114825.jpg" height="72" width="72"/><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry><entry><id>tag:blogger.com,1999:blog-2510124777776048204.post-2370068619001327019</id><published>2010-12-01T20:51:00.001+08:00</published><updated>2010-12-03T12:16:00.323+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="blogger"/><title type='text'>JSintech.com with blogger</title><content type='html'>&lt;div style=&quot;text-align: left;&quot;&gt;As I started this web, I decided to use Blogspot as the backend for the site. For those who like to blog with only tight budget, can refer to my blog, from time to time. I will bring you more excitement on building it with low budget.&lt;br /&gt;For this site, it only cost me USD10 for the domain and that&#39;s all.&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;a name=&#39;more&#39;&gt;&lt;/a&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;To do so, you just go to the settings&amp;gt; Publishing under your blog administration site and u will see a link Custom domain as seen below.&lt;/div&gt;&lt;div&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; id=&quot;BLOGGER_PHOTO_ID_5545697507037052418&quot; src=&quot;http://3.bp.blogspot.com/_E0dV2LViS-c/TPZGgBK2fgI/AAAAAAAAAv8/YJJmTAABR64/s400/2010-12-01_205417.png&quot; style=&quot;cursor: hand; cursor: pointer; display: block; height: 79px; margin: 0px auto 10px; text-align: center; width: 400px;&quot; /&gt;&lt;/div&gt;&lt;div&gt;A page with domain search will be appear as below. &lt;/div&gt;&lt;div&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; id=&quot;BLOGGER_PHOTO_ID_5545697881658028386&quot; src=&quot;http://4.bp.blogspot.com/_E0dV2LViS-c/TPZG10vc8WI/AAAAAAAAAwE/gnaHkrQDnRA/s400/2010-12-01_205759.png&quot; style=&quot;cursor: hand; cursor: pointer; display: block; height: 211px; margin: 0px auto 10px; text-align: center; width: 400px;&quot; /&gt;&lt;/div&gt;&lt;div&gt;Search for the preferred domain name and proceed with payment. It take about 15 minutes to get the routing for domain done. &lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;Domain parking are provided by godaddy.com, don&#39;t worry if you don&#39;t like blogger and like to switch to other hosting. Godaddy administration site can allow you route to other DNS. &lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://www.jsintech.com/feeds/2370068619001327019/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.jsintech.com/2010/12/jsintechcom-with-blogger.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/2370068619001327019'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2510124777776048204/posts/default/2370068619001327019'/><link rel='alternate' type='text/html' href='http://www.jsintech.com/2010/12/jsintechcom-with-blogger.html' title='JSintech.com with blogger'/><author><name>Jason</name><uri>http://www.blogger.com/profile/16646777928204209578</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://3.bp.blogspot.com/_E0dV2LViS-c/TPZGgBK2fgI/AAAAAAAAAv8/YJJmTAABR64/s72-c/2010-12-01_205417.png" height="72" width="72"/><thr:total>0</thr:total><gd:extendedProperty name="commentSource" value="1"/><gd:extendedProperty name="commentModerationMode" value="FILTERED_POSTMOD"/></entry></feed>