<?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: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-3307636102365499410</id><updated>2012-02-12T22:54:33.128-08:00</updated><category term='Portfolios'/><category term='About Us'/><category term='Products'/><category term='Tech Articles'/><category term='Contact'/><title type='text'>PEHADEV</title><subtitle type='html'>Provide Solutions For Web Based Applications</subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default?max-results=100'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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>23</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>100</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-2193103924936599054</id><published>2010-01-22T18:26:00.000-08:00</published><updated>2010-01-22T18:27:07.846-08:00</updated><title type='text'>Planning for a Strong Corporate Identity</title><content type='html'>Driven by values and founded on strong business ethics, PEHADEV as a Web Developer is passionate about efficiently and effectively solving technical problems of the end-user.&lt;br /&gt;PEHADEV are a full service strategic alliance for the client who is looking for any kind of web services. PEHADEV mission is to provide customized and usable solutions to our client, by maximizing the return on their investment.&lt;br /&gt;PEHADEV business insight, years of experience, and unparalleled cutting edge knowledge of web technology will lead your business to new horizons of expansion.&lt;br /&gt;PEHADEV web development research department is eager to accept new challenges, and PEHADEV support department thrives on surpassing client expectations by providing the best after sale support available.&lt;br /&gt;With your own resources and infrastructure, PEHADEV will lead you to a new business world. Start thinking web.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-2193103924936599054?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/2193103924936599054/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/planning-for-strong-corporate-identity_7400.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/2193103924936599054'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/2193103924936599054'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/planning-for-strong-corporate-identity_7400.html' title='Planning for a Strong Corporate Identity'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-7714418254345436209</id><published>2010-01-22T18:18:00.000-08:00</published><updated>2010-01-22T18:28:09.910-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Tech Articles'/><title type='text'>Best Practices To Develop Perfect Websites for iPhone and Mobile Devices</title><content type='html'>&lt;p&gt;2010 will be the year of consolidation of internet usage via mobile devices. According to internetnews.com, which reports a &lt;a href="http://www.internetnews.com/stats/article.php/3853656"&gt;Gartner analysis&lt;/a&gt;, mobile device sales will rise (9%) in 2010. This scenario will impose to internet companies, online newspapers, bloggers, to provide mobile versions of their websites to simplify the fruition of their contents and enlarge their audience. In this post I prepared a roundup of code snippets inspired to some mobile versions of popular websites (such as Facebook, Flickr, The New York Times, Digg, Google, …) that illustrate some HTML best practices to develop perfect websites for iPhone and mobile Devices. &lt;/p&gt;&lt;br /&gt;&lt;h2&gt;Facebook Touch for iPhone&lt;/h2&gt;&lt;br /&gt;&lt;p&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/ip1.gif" class="alignnone size-full wp-image-2242" style="float: left; margin-right: 14px;" width="430" height="419" /&gt;Let’s start with Facebook Touch for iPhone (&lt;a href="http://touch.facebook.com/"&gt;touch.facebook.com&lt;/a&gt;). The iPhone version of Facebook is characterized by single-column structure (with fluid width) that contains three main sections: header, main content and footer.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;header&lt;/em&gt; section contains the &lt;strong&gt;top bar&lt;/strong&gt;, which includes the notification icon, Facebook logo and search, and the &lt;strong&gt;menu bar&lt;/strong&gt; that contains four links (home, profile, friends and inbox).&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;main content&lt;/em&gt; section contains information about the current page (home, profile, wall, info…).&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;footer&lt;/em&gt; section contains links to select language, switch to full site, logout, and copyright information. This kind of HTML structure (single-column, fluid width, three main sections: header, main content and footer) is widespread in mobile web design because it allows to organize content in a way that fits perfectly most mobile screen sizes. Here is the sample HTML code you can use to implement this layout:&lt;/p&gt;&lt;br /&gt;&lt;div class="codex"&gt;&lt;pre&gt;&lt;code&gt;&amp;lt;div id="header"&amp;gt;&lt;br /&gt;   &amp;lt;div id="topbar"&amp;gt;...&amp;lt;/div&amp;gt;&lt;br /&gt;&lt;br /&gt;   &amp;lt;div id="menubar"&amp;gt;&lt;br /&gt;   &amp;lt;ul&amp;gt;&lt;br /&gt;      &amp;lt;li&amp;gt;&amp;lt;a href="home.html"&amp;gt;Home&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;      &amp;lt;li&amp;gt;&amp;lt;a href="profile.html"&amp;gt;Profile&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;&lt;br /&gt;      &amp;lt;li&amp;gt;&amp;lt;a href="friends.html"&amp;gt;Friends&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;      &amp;lt;li&amp;gt;&amp;lt;a href="inbox.html"&amp;gt;Inbox&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;   &amp;lt;ul&amp;gt;&lt;br /&gt;   &amp;lt;/div&amp;gt;&lt;br /&gt;&lt;br /&gt;&amp;lt;/div&amp;gt;&lt;br /&gt;&amp;lt;div id="content"&amp;gt;&lt;br /&gt;   &amp;lt;div id="page_menu"&amp;gt;...&amp;lt;/div&amp;gt;&lt;br /&gt;   &amp;lt;div id="page"&amp;gt;...&amp;lt;/div&amp;gt;&lt;br /&gt;&amp;lt;/div&amp;gt;&lt;br /&gt;&amp;lt;div id="footer"&amp;gt;...&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;div id="header"&amp;gt;&lt;/code&gt;&lt;/strong&gt; contains &lt;code&gt;&amp;lt;div id="topbar"&amp;gt;&lt;/code&gt; (notification icon, Facebook logo and search) and &lt;code&gt;&amp;lt;div id="menubar"&amp;gt;&lt;/code&gt; (home, profile, friends and inbox).&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;div id="content"&amp;gt;&lt;/code&gt;&lt;/strong&gt; contains &lt;code&gt;&amp;lt;div id="page_menu"&lt;/code&gt; (wall, info, photos) and &lt;code&gt;&amp;lt;div id="page"&amp;gt;&lt;/code&gt; (current page loaded, in this case the Wall of my Facebook profile).&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;h2&gt;Flickr Mobile&lt;/h2&gt;&lt;br /&gt;&lt;p&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/ip2.gif" style="float: right; margin-left: 14px;" width="417" height="339" /&gt;Flickr mobile (&lt;a href="http://m.flickr.com/"&gt;m.flickr.com&lt;/a&gt;) also implements a single-column layout that presents the same characteristics of Facebook Touch layout (one column, fluid width, three main sections: header, main content, footer).&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;header&lt;/em&gt; section contains Flickr logo, sing-in information and the navigation bar.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;main content&lt;/em&gt; section contains information about the current page (in this case the Flickr home page).&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;footer&lt;/em&gt; section contains some information about Flickr and links to switch to original site, download the iPhone app, report abuse and sign-out.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;div class="spacer" style="height: 10px;"&gt;&lt;/div&gt;&lt;br /&gt;&lt;p&gt;Here are some suggestions to implement a perfect navigation bar for mobile devices. I suggest you to use tab-based navigation, tabbed links with relative width and the &lt;strong&gt;&lt;code&gt;display&lt;/code&gt;&lt;/strong&gt; CSS property set to &lt;strong&gt;&lt;code&gt;block&lt;/code&gt;&lt;/strong&gt;.&lt;/p&gt;&lt;br /&gt;&lt;div style="text-align: center;"&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/ip10.gif" width="367" height="127" /&gt;&lt;/div&gt;&lt;br /&gt;&lt;div class="spacer" style="height: 10px;"&gt;&lt;/div&gt;&lt;br /&gt;&lt;p&gt;Here is the typical HTML code to implement a standard navigation bar:&lt;/p&gt;&lt;br /&gt;&lt;div class="codex"&gt;&lt;pre&gt;&lt;code&gt;&amp;lt;div id="nav"&amp;gt;&lt;br /&gt;   &amp;lt;ul&amp;gt;&lt;br /&gt;&lt;br /&gt;      &amp;lt;li&amp;gt;&amp;lt;a href="/activity"&amp;gt;Activity&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;      &amp;lt;li&amp;gt;&amp;lt;a href="/you"&amp;gt;You&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;      &amp;lt;li&amp;gt;&amp;lt;a href="/contacts"&amp;gt;Contacts&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;&lt;br /&gt;      &amp;lt;li&amp;gt;&amp;lt;a href="/more"&amp;gt;More&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;   &amp;lt;ul&amp;gt;&lt;br /&gt;&amp;lt;/div&amp;gt;&lt;br /&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;br /&gt;&lt;p&gt;And here is a sample CSS code:&lt;/p&gt;&lt;br /&gt;&lt;div class="codex"&gt;&lt;pre&gt;&lt;code&gt;#nav ul li {&lt;br /&gt;   float:left;&lt;br /&gt;&lt;br /&gt;   width:25%;&lt;br /&gt;   text-align:center;&lt;br /&gt;   ...&lt;br /&gt;}&lt;br /&gt;   #nav ul li a {display:block;}&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;br /&gt;&lt;h2&gt;The New York Times Mobile&lt;/h2&gt;&lt;br /&gt;&lt;p&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/ip3.gif" style="float: left; margin-right: 14px;" width="428" height="722" /&gt;Now let’s take a look at the mobile version of The New York Times newspaper (&lt;a href="http://mobile.nytimes.com/"&gt;mobile.nytimes.com&lt;/a&gt;). &lt;/p&gt;&lt;br /&gt;&lt;p&gt;The HTML structure is a little bit more complex than the previous websites but it maintains the same characteristics and sections of Facebook and Flickr layouts (one column with, fluid width, three main sections: header, main content, footer).&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;header&lt;/em&gt; sections contains The New York Times logo, date, weather,  financial information and the search field.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;main content&lt;/em&gt; section contains latest news. Below the main content section there are other sections organized by topic (Technology, U.S. News,…) with a list of links.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;footer&lt;/em&gt; section contains links to download the iPhone app, send feedback, copyright information and an user login form.&lt;/p&gt;&lt;br /&gt;&lt;div class="spacer" style="height: 30px;"&gt;&lt;/div&gt;&lt;br /&gt;&lt;p&gt;Just a note for sections below the main content section. You can use the &lt;strong&gt;&lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt;&lt;/strong&gt; tag for section titles and the &lt;strong&gt;&lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;&lt;/strong&gt; tag for the list of links.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;div class="codex"&gt;&lt;pre&gt;&lt;code&gt;&amp;lt;h2&amp;gt;Technology&amp;lt;/h2&amp;gt;&lt;br /&gt;&amp;lt;ul&amp;gt;&lt;br /&gt;      &amp;lt;li&amp;gt;&amp;lt;a href="link_1.html"&amp;gt;Title 1&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;      &amp;lt;li&amp;gt;&amp;lt;a href="link_2.html"&amp;gt;Title 2&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;&lt;br /&gt;      &amp;lt;li&amp;gt;&amp;lt;a href="link_3.html"&amp;gt;Title 3&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;br /&gt;&amp;lt;ul&amp;gt;&lt;br /&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;br /&gt;&lt;h2&gt;Time&lt;/h2&gt;&lt;br /&gt;&lt;p&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/ip5.gif" style="float: right; margin-left: 14px;" width="425" height="806" /&gt; The layout of the mobile version of Time (&lt;a href="http://mobile.time.com/"&gt;mobile.time.com&lt;/a&gt;) is similar to The New York Times.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;header&lt;/em&gt; section contains Time logo and a button with a link to switch to standard site.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;main content&lt;/em&gt; section contains a list of Top Stories. Below this section there are other sections organized by topic (U.S., Quotes of the Day, Photo Essays,…). You can use the &lt;strong&gt;&lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt;&lt;/strong&gt; tag for section titles and the &lt;strong&gt;&lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;&lt;/strong&gt; tag for the list of links.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;footer&lt;/em&gt; section contains links to Help, About Time, Subscribe to Time, CNN Internation, and copyright informations.&lt;/p&gt;&lt;br /&gt;&lt;div class="spacer" style="height: 30px;"&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;h2&gt;Digg&lt;/h2&gt;&lt;br /&gt;&lt;p&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/ip6.gif" style="float: left; margin-right: 14px;" width="425" height="439" /&gt; The mobile version of Digg (&lt;a href="http://m.digg.com/"&gt;m.digg.com&lt;/a&gt;) is clean and minimalist.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;header&lt;/em&gt; section contains a top menu (digg logo, Topics, Login) and a navigation bar.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;main content&lt;/em&gt; section contains the most recent stories (digg counter and title) and pagination buttons.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;footer&lt;/em&gt; sections is really simple and just contains the link to the regular version of Digg.&lt;/p&gt;&lt;br /&gt;&lt;div class="spacer" style="height: 30px;"&gt;&lt;/div&gt;&lt;br /&gt;&lt;p&gt;Here is the sample HTML code you can use to implement a Digg-like layout for mobile devices:&lt;/p&gt;&lt;br /&gt;&lt;div class="codex"&gt;&lt;pre&gt;&lt;code&gt;&amp;lt;div id="header"&amp;gt;&lt;br /&gt;   &amp;lt;div id="h_menu"&amp;gt;...&amp;lt;/div&amp;gt;&lt;br /&gt;   &amp;lt;div id="nav"&amp;gt;...&amp;lt;/div&amp;gt;&lt;br /&gt;&lt;br /&gt;&amp;lt;/div&amp;gt;&lt;br /&gt;&amp;lt;div id="stories"&amp;gt;&lt;br /&gt;   &amp;lt;div class="story"&amp;gt;...&amp;lt;/div&amp;gt;&lt;br /&gt;&amp;lt;/div&amp;gt;&lt;br /&gt;&amp;lt;div id="pagination"&amp;gt;...&amp;lt;/div&amp;gt;&lt;br /&gt;&amp;lt;div id="footer"&amp;gt;...&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;Just for curiosity, the mobile version of Digg uses tables for the website layout! Here is the code used for the top menu:&lt;/p&gt;&lt;br /&gt;&lt;div class="codex"&gt;&lt;pre&gt;&lt;code&gt;&amp;lt;table&amp;gt;&lt;br /&gt;   &amp;lt;tr&amp;gt;&lt;br /&gt;      &amp;lt;td class="h-logo"&amp;gt;&amp;lt;a href="/"&amp;gt;&amp;lt;img src="/img/logo.gif"/&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/td&amp;gt;&lt;br /&gt;      &amp;lt;td class="h-menu"&amp;gt;&lt;br /&gt;         &amp;lt;a class="settings" href="/topics"&amp;gt;Topics&amp;lt;/a&amp;gt;&lt;br /&gt;&lt;br /&gt;         &amp;lt;a class="button" href="/login"&amp;gt;Login&amp;lt;/a&amp;gt;&lt;br /&gt;      &amp;lt;/td&amp;gt;&lt;br /&gt;   &amp;lt;/tr&amp;gt;&lt;br /&gt;&amp;lt;/table&amp;gt;&lt;br /&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;br /&gt;&lt;p&gt;As you see, it uses the &lt;strong&gt;&lt;code&gt;&amp;lt;table&amp;gt;&lt;/code&gt;&lt;/strong&gt; tag to separate links in the top menu. Using tables for design the structure of HTML pages is not a good practice but, I have to admit, in some cases is simpler and quicker than creating floating elements.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;h2&gt;Mixx&lt;/h2&gt;&lt;br /&gt;&lt;p&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/ip7.gif" style="float: right; margin-left: 14px;" width="423" height="338" /&gt; The HTML structure of Mixx (&lt;a href="http://i.mixx.com/"&gt;i.mixx.com&lt;/a&gt;) is similar to Digg but it’s simpler.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;header&lt;/em&gt; section contains Mixx logo and the navigation bar.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;main content&lt;/em&gt; section contains a list of stories. No &lt;em&gt;footer&lt;/em&gt; is present.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;div class="spacer" style="height: 30px;"&gt;&lt;/div&gt;&lt;br /&gt;&lt;h2&gt;Google Mobile&lt;/h2&gt;&lt;br /&gt;&lt;p&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/ip8.gif" style="float: left; margin-right: 14px;" width="432" height="241" /&gt;The mobile version of Google is a great balance between simplicity and perfect usability.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;header&lt;/em&gt; section contains the navigation bar and Google logo.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;main content&lt;/em&gt; section contains the search field and short messages with the latest news about Google services.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;footer&lt;/em&gt; section contains links to iGoogle, Settings and Help.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;It’s interesting to take a look at the multi-level navigation bar present in the Google home page. When you click on the link “more” it appears a list that contains links to other Google services. The following image illustrates an example of typical HTML structure you can use to implement a multi-level navigation bar like that:&lt;/p&gt;&lt;br /&gt;&lt;div style="text-align: center;"&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/ip11.gif" width="352" height="264" /&gt;&lt;/div&gt;&lt;br /&gt;&lt;div class="spacer" style="height: 30px;"&gt;&lt;/div&gt;&lt;br /&gt;&lt;p&gt;Here is a sample HTML code you can use to implement a multi-level navigation bar simply using nasted &lt;strong&gt;&lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;&lt;/strong&gt; tags:&lt;/p&gt;&lt;br /&gt;&lt;div class="codex"&gt;&lt;pre&gt;&lt;code&gt;&amp;lt;div id="header"&amp;gt;&lt;br /&gt;   &amp;lt;div id="nav"&amp;gt;&lt;br /&gt;      &amp;lt;ul&amp;gt;&lt;br /&gt;         &amp;lt;li&amp;gt;&amp;lt;a href="/web"&amp;gt;Web&amp;lt;/li&amp;gt;&lt;br /&gt;&lt;br /&gt;         &amp;lt;li&amp;gt;&amp;lt;a href="/image"&amp;gt;Images&amp;lt;/li&amp;gt;&lt;br /&gt;         &amp;lt;li&amp;gt;&amp;lt;a href="/News"&amp;gt;News&amp;lt;/li&amp;gt;&lt;br /&gt;         &amp;lt;li&amp;gt;More&lt;br /&gt;            &amp;lt;ul&amp;gt;&lt;br /&gt;&lt;br /&gt;               &amp;lt;li&amp;gt;&amp;lt;a href="/Maps"&amp;gt;Maps&amp;lt;/li&amp;gt;&lt;br /&gt;               &amp;lt;li&amp;gt;&amp;lt;a href="/Readers"&amp;gt;Readers&amp;lt;/li&amp;gt;&lt;br /&gt;               &amp;lt;li&amp;gt;&amp;lt;a href="/Translator"&amp;gt;Translator&amp;lt;/li&amp;gt;&lt;br /&gt;&lt;br /&gt;            &amp;lt;/ul&amp;gt;&lt;br /&gt;         &amp;lt;/li&amp;gt;&lt;br /&gt;      &amp;lt;/ul&amp;gt;&lt;br /&gt;   &amp;lt;/div&amp;gt;&lt;br /&gt;&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;br /&gt;&lt;h2&gt;Bing Mobile&lt;/h2&gt;&lt;br /&gt;&lt;p&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/ip9.gif" style="float: right; margin-left: 14px;" width="423" height="193" /&gt;The mobile version of Bing (&lt;a href="http://m.bing.com/"&gt;m.bing.com&lt;/a&gt;) tries to replicate the simplicity of Google mobile, but the alignment difference between some elements make the page less neat than the Google home page (the bing logo is aligned to left, navigation bar and search field are centered, location settings and “Bing for iPhone” message are aligned to left, footer links are centered).&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;div class="spacer" style="height: 30px;"&gt;&lt;/div&gt;&lt;br /&gt;&lt;h2&gt;Mashable Mobile&lt;/h2&gt;&lt;br /&gt;&lt;p&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/ip4.gif" style="float: right; margin-left: 14px;" width="418" height="288" /&gt;I want to conclude this roundup of websites with the mobile version of Mashable (&lt;a href="http://mashable.com/"&gt;mashable.com&lt;/a&gt;) that can be useful to take inspiration for the mobile version of your blog.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;header&lt;/em&gt; section contains Mashable Logo, search field and the navigation bar with links to main channels.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;main content&lt;/em&gt; section contains a list of most recent posts.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;The &lt;em&gt;footer&lt;/em&gt; section contains copyright information and a link to switch to standard site.&lt;/p&gt;&lt;br /&gt;&lt;div class="spacer" style="height: 30px;"&gt;&lt;/div&gt;&lt;br /&gt;&lt;h2&gt;Frameworks for iPhone Developers&lt;/h2&gt;&lt;br /&gt;&lt;p&gt;Here is a small list of my favorite Frameworks to develop websites for iPhone:&lt;/p&gt;&lt;br /&gt;&lt;p&gt;&lt;a href="http://code.google.com/p/iui/"&gt;&lt;strong&gt;IUI&lt;/strong&gt;&lt;/a&gt; is a User Interface Framework for Safari development on iPhone that allows you to make WebApps that look and feel like iPhone native application.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;&lt;a href="http://www.jqtouch.com/"&gt;&lt;strong&gt;jQTouch&lt;/strong&gt;&lt;/a&gt; is a jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;&lt;a href="http://iphone.hohli.com/"&gt;&lt;strong&gt;jQuery iPhone UI&lt;/strong&gt;&lt;/a&gt; is a JavaScript library for prototype iPhone interface on web pages.&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-7714418254345436209?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/7714418254345436209/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/planning-for-strong-corporate-identity_1455.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/7714418254345436209'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/7714418254345436209'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/planning-for-strong-corporate-identity_1455.html' title='Best Practices To Develop Perfect Websites for iPhone and Mobile Devices'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-867759291928820449</id><published>2010-01-22T18:07:00.001-08:00</published><updated>2010-01-22T18:28:09.910-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Tech Articles'/><title type='text'>HTML5 and Beyond</title><content type='html'>On the 6th November 2009 in Prague, here at the Google Developer Day 2009  (&lt;a href="http://code.google.com/intl/cs/events/developerday/2009/home.html" target="_self"&gt;Prague GDD 2009&lt;/a&gt;) during  the Keynote  a few google’s experts pointed out some of the new features of HTML5:  Canvas, Video, Geolocation, Gears and WebWorkers. Let me try to focus in this post on the first two, trying to motivate the main question of this post: “is the era of server-side generated images and flash enabled pages going to finish?”&lt;p&gt;&lt;/p&gt;&lt;br /&gt;&lt;h2&gt;Canvas&lt;/h2&gt;&lt;br /&gt;&lt;p&gt;With this new element in HTML5 you can bring interactive plotting  facilities into the Browser, making the web experience of visitors more interactive and complete. The use of Canvas will let you work with pictures and geometrical entities in a very simple way, directly into the browser (&lt;a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html" target="_self"&gt;draft standard here&lt;/a&gt;).&lt;/p&gt;&lt;br /&gt;&lt;p&gt;Put in your HTML file’s &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt;  a &lt;em&gt;&lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt;&lt;/em&gt; tag:&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;div class="codex"&gt;&lt;code&gt;&amp;lt;canvas id="DrawingArea"&amp;gt;&amp;lt;/canvas&amp;gt;&lt;/code&gt;&lt;/div&gt;&lt;br /&gt;&lt;p&gt;and you get an empty space where to draw, for example, try the following Javascript:&lt;/p&gt;&lt;br /&gt;&lt;div class="codex"&gt;&lt;pre&gt;&lt;code&gt;function drawSomething() {&lt;br /&gt;   var canvas=document.getElementById('DrawingArea');&lt;br /&gt;   var context=canvas.getContext('2d');&lt;br /&gt;&lt;br /&gt;   var gradLR = context.createLinearGradient(0, 0, 400, 400);&lt;br /&gt;   gradLR.addColorStop(0, "white");&lt;br /&gt;   gradLR.addColorStop(1, "blue");&lt;br /&gt;&lt;br /&gt;   var gradRL = context.createLinearGradient(0, 0, 400, 400);&lt;br /&gt;   gradRL.addColorStop(1, "white");&lt;br /&gt;   gradRL.addColorStop(0, "blue");&lt;br /&gt;&lt;br /&gt;   for(i=0;i&amp;lt;40;i++) {&lt;br /&gt;     if(i%2==0)&lt;br /&gt;&lt;br /&gt;       context.fillStyle = gradLR;&lt;br /&gt;     else&lt;br /&gt;       context.fillStyle = gradRL;&lt;br /&gt;     context.translate(250,250)&lt;br /&gt;     context.scale(.9,.9)&lt;br /&gt;     context.translate(-250,-250)&lt;br /&gt;     context.fillRect(0,0, 500, 500);&lt;br /&gt;   }&lt;br /&gt; }&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;br /&gt;&lt;p&gt;Try it here: &lt;a href="http://www.keychain.it-a.googlepages.com/canvas.html"&gt;http://www.keychain.it/canvas.html&lt;/a&gt;.&lt;/p&gt;&lt;br /&gt;&lt;p&gt;Try to add &lt;code&gt;context.rotate(.1)&lt;/code&gt; before &lt;code&gt;context.scale()&lt;/code&gt; and… another nice example  :-)&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;For the full story see &lt;a href="http://diveintohtml5.org/canvas.html" target="_self"&gt;http://diveintohtml5.org/canvas.html&lt;/a&gt; and for a really amazing example open &lt;a href="http://9elements.com/io/projects/html5/canvas/" target="_self"&gt;http://9elements.com/io/projects/html5/canvas/&lt;/a&gt; and if your browser is canvas ready (it seems to work quite well in Chrome, IE-ChromeFrame, Firefox 3.5) you will see what I mean with “interactive web experience”. Finally right-click on the page and note that there is no flash player around.&lt;/p&gt;&lt;br /&gt;&lt;h2&gt;Video&lt;/h2&gt;&lt;br /&gt;&lt;p&gt;After years of frustrating experiences with embedded videos, seems that a new DOM object is going to be introduced in order to simplify our life. This will give us the possibility to interact in a very simple and light way with videos. Using the new &lt;em&gt;&lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt;&lt;/em&gt; tag we will be able to simply insert videos in an html page as we do with images (&lt;a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#video" target="_self"&gt;take a look at the draft standard here&lt;/a&gt;).  Unfortunately life is not so easy: there is not a single file format supported by all the popular web browsers (&lt;a href="http://diveintohtml5.org/video.html#what-works" target="_self"&gt;http://diveintohtml5.org/video.html#what-works&lt;/a&gt;) so using HTML5 video is somewhat combersome i.e. you have to put the video in two formas, for example the following combination might work:&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;div class="codex"&gt;&lt;pre&gt;&lt;code&gt;&amp;lt;video&amp;gt;&lt;br /&gt;   &amp;lt;source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'&amp;gt;&lt;br /&gt;   &amp;lt;source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&amp;gt;&lt;br /&gt;&amp;lt;/video &amp;amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;br /&gt;&lt;p&gt;On the other hand having videos in the DOM opens the opportunity of interacting with the element, for example manipulating it in a canvas: &lt;a href="http://www.keychain.it-a.googlepages.com/video.html" target="_self"&gt;http://www.keychain.it/video.html&lt;/a&gt; (the video is the one produced by &lt;strong&gt;Mark Pilgrim&lt;/strong&gt; and available on &lt;a href="http://diveintohtml5.org/" target="_self"&gt;diveintohtml5.org&lt;/a&gt;)&lt;/p&gt;&lt;p class="articleSource" &gt;Article Source : http://woorkup.com/2009/11/13/html5-and-beyond/&lt;br /&gt;&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-867759291928820449?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/867759291928820449/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/planning-for-strong-corporate-identity_22.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/867759291928820449'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/867759291928820449'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/planning-for-strong-corporate-identity_22.html' title='HTML5 and Beyond'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-8174230783211599631</id><published>2010-01-22T17:57:00.000-08:00</published><updated>2010-01-22T18:28:09.911-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Tech Articles'/><title type='text'>The Death of Tag Clouds</title><content type='html'>&lt;p&gt;In 2004, the Web 2.0 philosophy introduced a new paradigm for the Web that also marked a huge change of direction in the approach to design websites than before. The main guidelines of the new trend in web design was simplicity, minimalism, central layout, bigger text, bold logos, gradient and reflection effects, which constitute the fundamental basis for a viral revolution of the face of the World Wide Web.&lt;br /&gt;The community of web designers greeted with big enthusiasm the new “2.0” model and the result was a general run to restyle “old style” websites according to the new rules.&lt;br /&gt;Tag Cloud was probably one of the most popular elements which characterized that period in web design. That kind of data representation, which uses different font sizes or colors to highlight the relevance of a tag, was an original and new way to list visually tags related to the content of a website and its diffusion and success was immediate.&lt;br /&gt;I have to be honest, I never found really useful tag clouds for browsing a website and finding what I’m looking for concerning a specific tag. Well organized navigation bars and search engines are the better solutions to browse and find everything you need on a website. I think tag clouds work fine with a small number of tags but in most cases, with big lists of tags, they become really difficult to read (this is mainly due to the difference of size between words) and can generate confusion and redundancy especially when similar tags are present.&lt;/p&gt; &lt;p&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/tc3.png" style="float: right; margin-left: 14px;" width="360" height="328" /&gt;For example, I am an avid reader of Mashable and I noticed some redundancy in its tag cloud that make it unclear. Here is a screenshot of Mashable’s tag cloud. As you can see redundancy are due to similar terms such as “advertiser – advertising”, “blog – blogging”, “list – lists”, “games – video games”, “social networking – social network”, “video – viral video”.&lt;br /&gt;These duplicates don’t add any valuable information but generate only “noise” and confusion.&lt;br /&gt;The problem of redundancy in tag clouds is widespread on a lot of websites and is mainly due to lack of content optimization. The solution is to provide a better organization of contents or avoid to use that kind of “misleading” tag clouds.&lt;/p&gt; &lt;p&gt;Another very important aspect that discourage the use of tag clouds is users don’t read each single tag but scan the content with the effect that only words with bigger size text capture their attention while smaller size words are ignored. In this way, for the final user, not all contents of a website will have the same “value” and “relevance” and this altered perception can adversely affect the site penalizing the enjoyment of some contents. The following image illustrate which words in a tag cloud capture the attention of users:&lt;/p&gt; &lt;p&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/tc.png" width="580" height="210" /&gt;&lt;/p&gt; &lt;p&gt;My conclusion is tag clouds are not really useful and necessary elements for providing a easier browsing experience to your users. I suggest you to avoid using them on your websites, adopting instead other solutions that allow users to find easily what they are looking for such as well organized navigation bars and internal search engines. This is the death of tag clouds. What’s your opinion? Every opinion is appreciated!&lt;/p&gt;&lt;p class="articleSource"&gt;Article Source : http://woorkup.com/2010/01/20/the-death-of-tag-clouds/&lt;br /&gt;&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-8174230783211599631?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/8174230783211599631/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/powering-your-website-with-social-media.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/8174230783211599631'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/8174230783211599631'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/powering-your-website-with-social-media.html' title='The Death of Tag Clouds'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-1617782350041016529</id><published>2010-01-13T21:50:00.000-08:00</published><updated>2010-01-22T18:28:09.911-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Tech Articles'/><title type='text'>Powering Your Website With Social Media</title><content type='html'>&lt;p&gt;&lt;strong&gt;Social Media&lt;/strong&gt; is “media designed to be disseminated through social interaction, created using highly accessible and scalable publishing techniques” (&lt;a href="http://en.wikipedia.org/wiki/Social_media"&gt;Wikipedia&lt;/a&gt;), and if that doesn’t make sense I don’t blame you. &lt;/p&gt; &lt;p&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/sm7.jpg" style="float: right; margin-left: 14px;" width="211" height="382" /&gt;Basically everyone these days is interacting through online groups on Facebook, real-time feeds on Twitter, real-time searching with &lt;a href="http://www.oneriot.com/"&gt;One-Riot&lt;/a&gt; and getting their website-of-the-day from automatically generated lists such as &lt;a href="http://delicious.newsified.com/"&gt;Newsified&lt;/a&gt;. A web article that was hot one day probably isn’t going to be hot the day after because there will be another one in its place. Social Media changes shape every day, in fact it’s changing the web every second!&lt;br /&gt;Your website needs to utilize Social Media effectively in order to get a leg-up and be recognized in this constantly-shifting web cosmos. As a follow up to &lt;a href="http://woorkup.com/2009/12/02/how-to-increase-your-productivity-with-project-bubble/"&gt;my previous article&lt;/a&gt;, I wanted to share a few tips that might help your website or web application grow. Since launching &lt;a href="http://www.projectbubble.com/"&gt;Project Bubble&lt;/a&gt; I have seen massive growth which I attribute mostly to the use of social media and I’m sure your website too can benefit from this.&lt;br /&gt;A good place to start is to learn to understand Social Media by subscribing to blogs like &lt;a href="http://mashable.com/"&gt;Mashable&lt;/a&gt; and staying on top of the latest trends by following key people on Twitter. Once you get inside the world of Social Media and begin to understand it the following tips will make a lot more sense to you and you will be able to apply them to your website.&lt;/p&gt; &lt;h3&gt;Build Community&lt;/h3&gt; &lt;p&gt;A lot of websites are static, with a few simple pages and a contact form. The owner of the website only knows if someone has visited based on the tracking statistics (such as Analytics) and they can only communicate with their visitors if the person visiting fills in a contact form. Also anyone else visiting the website won’t be able to interact with other visitors, let alone find out if anyone else is interested in the products or services offered by this website.&lt;/p&gt; &lt;p&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/sm67.jpg" style="float: left; margin-right: 14px;" width="155" height="256" /&gt;Building social community features in to a website will spark life in to your online presence and make it change a lot more often. A site that you might have only updated every six months will suddenly get updated by your community every day, providing you can get the traffic. Your site will look a lot more active, but also by capturing your visitors’ information (such as email, name, country, likes, dislikes etc) you can collect a lot of data on your audience which will be really useful to you (make sure you have permission to capture your visitors’ information with a clear privacy policy).&lt;/p&gt; &lt;p&gt;Community features such as allowing comments on a blog will let your visitors say what they think about your products and services. A forum feature will allow users to network with each other, as well as being able to discuss a recent event in your business. Building a sign up feature to your site will let users be able to return to your website and have their preferences saved, and you will be able to store the contact information and data of those who regularly visit your site. Most of these features are fairly easy to implement and can make a world of difference. &lt;/p&gt; &lt;h3&gt;Get Feedback&lt;/h3&gt; &lt;p&gt;It’s important to get feedback from your users, especially if your web business is new. Don’t be ashamed of any bugs or small issues that might happen on your new website because if you can prove that you are listening to your users, and that you can fix these issues quickly – that will outweigh any problems or bugs people find. &lt;/p&gt; &lt;p&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/sm2.jpg" style="float: right; margin-left: 14px;" width="241" height="184" /&gt;A feedback system will let you know about issues that you might not have otherwise found through your usual testing methods, for example a recent one that came up in Project Bubble is Japanese and Russian characters. Someone reported the issue (and I would never have known about this) then straight away provided a fix. I learnt a lot about UTF-8 that day! Finally, providing a channel for feedback shows that you care about your customers and you are willing to change things based on what people report. This builds loyalty to your brand and will help with user retention. Tools for getting Feedback could be: &lt;a href="http://uservoice.com/"&gt;UserVoice&lt;/a&gt; and &lt;a href="http://getsatisfaction.com/"&gt;GetSatisfaction&lt;/a&gt;.&lt;/p&gt; &lt;h3&gt;Offer Interaction&lt;/h3&gt; &lt;p&gt;Not only do you want to capture the users who visit your site and build a community, you want to offer them the facility to interact with you and vice-versa. Interacting with your website users will build brand loyalty and people will see that you’re not just a big corporate identity but are actually real people behind all the PR gloss. Get your users to talk to you, and when they do make sure you talk back to them straight away.&lt;/p&gt; &lt;p&gt;Tools such as simple web forms are absolutely essential in providing your users with quick, clear and targeted contact methods. Studies have shown that the more work you have to make your user do on your website, the less likely they will do what you want them to do. So, for example in the case of web forms – if you don’t use them and you rely on “mailto:” email links it means that people have to do much more work, whereas with a contact form all they need to do is quickly fill in their name,  email, select a subject from a drop down and then type out a simple message there and then. Also web forms allow you to find out data such as where they came from (based on the I.P. address), what page they were looking at when they visited the web form and so on.&lt;/p&gt; &lt;p&gt;Other tools you should look at to enhance user interaction are blog comments as mentioned before but most importantly Twitter. There are other articles on Woork that you can read which describe the power of Twitter so I won’t go in to detail here, but I’ll just say that it is absolutely essential for any web based business. You can not only find out who is following the developments of your business, but you can talk directly to them and involve everyone as you do so.&lt;/p&gt; &lt;p&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/sm4.jpg" style="float: right; margin-left: 14px;" width="245" height="281" /&gt; For example, you have just launched a new home page design and you announce it on Twitter, then somebody replies saying they can’t view it properly on their browser. You can fix the issue, reply back to them and then not only will they be informed of this fixed but so will all of your followers. The person who reported the issue will likely be very pleased that you fixed their problem so quickly they will praise you on Twitter, then you can re-tweet this feedback to all of your followers. So you have an issue reporting tool, but also a testimonial tool – all for free! A Facebook page is a great way of providing real-time interaction with your user base. Set up a Facebook page and publicize it just as you would a Twitter link.&lt;br /&gt;People use Facebook every day (in some cases all day!), so the minute you post a status update you will likely get comments back straight away. Also because of the real-time feed system people will see your new update pop up just as they look at their other feeds. You can also allow users to upload photos, join in a discussion through forums and install loads of different modules such as a Poll system with just a few clicks.&lt;/p&gt; &lt;h3&gt;Offer the Best Customer Service&lt;/h3&gt; &lt;p&gt;As mentioned earlier, customer service is crucial to the success of your business. Your customers will want to see that you are active and in-touch with them. They will want solutions to their problems as soon as possible. The quicker you can turn-around with these solutions, the better people will rate your customer service. This will in turn create buzz about your company throughout the social sphere (Twitter, Facebook etc).&lt;/p&gt; &lt;h3&gt;Let Your Users Create the Buzz&lt;/h3&gt; &lt;p&gt;Make it easy for your users to create this buzz. As mentioned before you need to make it really easy for your users to do the things that you want them to do. With regards to creating buzz, you can add buttons and ‘widgets’ to your web pages that allow them to do this easily.&lt;br /&gt;&lt;img src="http://woorkup.com/wp-content/uploads/2010/01/sm5.jpg" style="float: right; margin-left: 14px;" width="216" height="193" /&gt;Such as &lt;a href="http://tweetmeme.com/"&gt;TweetMeme&lt;/a&gt; or &lt;a href="http://topsy.com/"&gt;Topsy&lt;/a&gt; (offer a retweet service so your page will get easily posted on Twitter), Add to &lt;a href="http://delicious.com/"&gt;Delicious&lt;/a&gt; (allows users to add your page to their Delicious favorites), &lt;a href="http://digg.com/"&gt;Digg&lt;/a&gt; This (allows users to add to their Digg bookmarks), &lt;a href="http://www.addthis.com/"&gt;Add This&lt;/a&gt; (allows users to add the page to every social website out there). The more times people add your web page to a social media site such as Digg, Mixx and so on the more likely your site will get featured on their home page. So it’s important to have these facilities in place if you are expecting a surge in traffic at any time, for example after doing a television, radio or magazine advert.&lt;/p&gt; &lt;h3&gt;Good luck!&lt;/h3&gt; &lt;p&gt;I hope these tips help. I personally think that social media is a lot of fun, and because there’s always something new to read every day it makes the web so exciting. Maybe your website will be in my RSS aggregator tomorrow as I read the Delicious most-popular list?&lt;/p&gt;&lt;p class="articleSource"&gt;Article source : http://woorkup.com/2010/01/18/powering-your-website-with-social-media/&lt;br /&gt;&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-1617782350041016529?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/1617782350041016529/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/planning-for-strong-corporate-identity.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/1617782350041016529'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/1617782350041016529'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/planning-for-strong-corporate-identity.html' title='Powering Your Website With Social Media'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-8359652490244723330</id><published>2010-01-13T21:21:00.000-08:00</published><updated>2010-01-13T21:28:37.616-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Products'/><title type='text'>Web Devlopment</title><content type='html'>Good web design must be supported by good web development.&lt;br /&gt;It’s like a colossal storefront that lacks a functional warehouse, employee breakroom, supply closet, or loading dock. How unimpressive does that sound?&lt;br /&gt;&lt;br /&gt;Web development is a complex topic, but it affects everything about your site. Like how quickly or slowly pages load. Like whether everything works the way it’s supposed to. The basics!&lt;br /&gt;&lt;br /&gt;Even a simple blog site requires expert web developers at several points along the way. Remember:&lt;br /&gt;Your website’s front-end and back-end must work together.&lt;br /&gt;&lt;br /&gt;This requires two key elements:&lt;br /&gt;&lt;br /&gt;   1. Strategic planning. This means meeting with you and figuring out what we’re going for… and how we can do it better than your competition.&lt;br /&gt;   2. Tactical solutions. The actual nuts and bolts that’ll make it possible to achieve your goals.&lt;br /&gt;&lt;br /&gt;Contact PEHA.DEV to put some mighty fine web developers to work for you.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-8359652490244723330?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/8359652490244723330/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/web-devlopment.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/8359652490244723330'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/8359652490244723330'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/web-devlopment.html' title='Web Devlopment'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-3141848709378734026</id><published>2010-01-13T21:17:00.000-08:00</published><updated>2010-01-13T21:28:27.914-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Portfolios'/><title type='text'>TRANS TV</title><content type='html'>Client : TRANS TV ( &lt;a href="http://www.transtv.co.id"&gt;www.transtv.co.id&lt;/a&gt; ).&lt;br /&gt;  Project Overview : Web Design, Database and Programming for web, forum and mobile version.&lt;br /&gt;  Database : MySQL.&lt;br /&gt;  Programming : PHP.&lt;br /&gt;  Note : Develop using Codeigniter Framework.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-3141848709378734026?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/3141848709378734026/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/trans-tv.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/3141848709378734026'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/3141848709378734026'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/trans-tv.html' title='TRANS TV'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-4897016465181534896</id><published>2010-01-13T21:15:00.000-08:00</published><updated>2010-01-13T21:28:27.915-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Portfolios'/><title type='text'>TRANS7</title><content type='html'>Client : TRANS7 ( &lt;a href="http://www.trans7.co.id"&gt;www.trans7.co.id&lt;/a&gt; ).&lt;br /&gt; Project Overview : Web Design, Database and Programming for web, forum and mobile version.&lt;br /&gt; Database : MySQL.&lt;br /&gt; Programming : PHP.&lt;br /&gt; Note : Develop using Codeigniter Framework.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-4897016465181534896?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/4897016465181534896/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/trans7.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/4897016465181534896'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/4897016465181534896'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/trans7.html' title='TRANS7'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-8594889801520155464</id><published>2010-01-13T21:14:00.001-08:00</published><updated>2010-01-13T21:15:11.546-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Portfolios'/><title type='text'>Pure Art Space</title><content type='html'>Client : Pure Art Space ( &lt;a href="http://www.pure-artspace.com"&gt;www.pure-artspace.com&lt;/a&gt; ).&lt;br /&gt; Project Overview : Web Design, Database and Programming for art gallery.&lt;br /&gt; Database : MySQL.&lt;br /&gt; Programming : PHP.&lt;br /&gt; Note : Develop using Codeigniter Framework.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-8594889801520155464?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/8594889801520155464/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/pure-art-space.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/8594889801520155464'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/8594889801520155464'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/pure-art-space.html' title='Pure Art Space'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-8319929707657136853</id><published>2010-01-13T21:12:00.000-08:00</published><updated>2010-01-13T21:15:11.546-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Portfolios'/><title type='text'>Cempaka Auction</title><content type='html'>Client : Cempaka Auction ( &lt;a href="http://cempakaauction.com"&gt;www.cempakaauction.com&lt;/a&gt; ).&lt;br /&gt;Project Overview : Web Design, Database and Programming for art gallery.&lt;br /&gt;Database : MySQL.&lt;br /&gt;Programming : PHP.&lt;br /&gt;Note : Develop using Codeigniter Framework.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-8319929707657136853?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/8319929707657136853/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/cempaka-auction.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/8319929707657136853'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/8319929707657136853'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/cempaka-auction.html' title='Cempaka Auction'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-5518004401285478678</id><published>2010-01-13T21:10:00.000-08:00</published><updated>2010-01-13T21:15:11.547-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Portfolios'/><title type='text'>Puri Art Gallery</title><content type='html'>Client : Puri Art Gallery ( &lt;a href="http://www.puriartgallery.com"&gt;www.puriartgallery.com&lt;/a&gt; ).&lt;br /&gt;Project Overview : Web Design, Database and Programming for art gallery.&lt;br /&gt;Database : MySQL.&lt;br /&gt;Programming : PHP.&lt;br /&gt;Note : Develop using Codeigniter Framework.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-5518004401285478678?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/5518004401285478678/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/puri-art-gallery.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/5518004401285478678'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/5518004401285478678'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/puri-art-gallery.html' title='Puri Art Gallery'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-3523544350130761051</id><published>2010-01-13T21:09:00.000-08:00</published><updated>2010-01-13T21:15:11.547-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Portfolios'/><title type='text'>RIS-PNPM</title><content type='html'>Client : RIS-PNPM.&lt;br /&gt;Project Overview : Database and Programming for Online Monitoring PNPM Progress.&lt;br /&gt;Database : MySQL.&lt;br /&gt;Programming : PHP.&lt;br /&gt;Note : Develop using Codeigniter Framework.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-3523544350130761051?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/3523544350130761051/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/ris-pnpm.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/3523544350130761051'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/3523544350130761051'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/ris-pnpm.html' title='RIS-PNPM'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-3476284903074931218</id><published>2010-01-13T21:07:00.000-08:00</published><updated>2010-01-13T21:15:11.547-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Portfolios'/><title type='text'>PDAM Kota Tarakan</title><content type='html'>Client : PDAM Kota Tarakan.&lt;br /&gt;Project Overview : Database and Programming for Online Billing System.&lt;br /&gt;Database : Microsoft SQL Server.&lt;br /&gt;Programming : PHP.&lt;br /&gt;Note : Develop using Codeigniter Framework.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-3476284903074931218?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/3476284903074931218/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/pdam-kota-tarakan.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/3476284903074931218'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/3476284903074931218'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/pdam-kota-tarakan.html' title='PDAM Kota Tarakan'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-6452726803613161210</id><published>2010-01-13T21:06:00.000-08:00</published><updated>2010-01-13T21:15:11.547-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Portfolios'/><title type='text'>Bhanthong</title><content type='html'>Client : Bhanthong.&lt;br /&gt;Project Overview : Database and Programming for Integrated Billing System.&lt;br /&gt;Database : MySQL.&lt;br /&gt;Programming : PHP.&lt;br /&gt;Note : Develop using Codeigniter Framework.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-6452726803613161210?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/6452726803613161210/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/bhanthong.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/6452726803613161210'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/6452726803613161210'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/bhanthong.html' title='Bhanthong'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-8145607498285571281</id><published>2010-01-13T21:04:00.000-08:00</published><updated>2010-01-13T21:15:11.548-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Portfolios'/><title type='text'>Speedmark</title><content type='html'>Client : Speedmark.&lt;br /&gt;Project Overview : Database and Programming for Sea Freight Information System.&lt;br /&gt;Database : PostgreSQL.&lt;br /&gt;Programming : PHP.&lt;br /&gt;Note : Develop using Codeigniter Framework.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-8145607498285571281?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/8145607498285571281/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/speedmark.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/8145607498285571281'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/8145607498285571281'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/speedmark.html' title='Speedmark'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-7419282976666021423</id><published>2010-01-13T21:02:00.000-08:00</published><updated>2010-01-13T21:15:11.548-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Portfolios'/><title type='text'>Coalforest</title><content type='html'>Client : Coalforest ( &lt;a href="http://coalforest.com/"&gt;www.coalforest.com&lt;/a&gt;).&lt;br /&gt;Project Overview : Web Design, Database and Programming for coal mining company profile.&lt;br /&gt;Database : MySQL.&lt;br /&gt;Programming : PHP.&lt;br /&gt;Note : Develop using Joomla.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-7419282976666021423?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/7419282976666021423/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/coalforest.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/7419282976666021423'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/7419282976666021423'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/coalforest.html' title='Coalforest'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-2328182461129526300</id><published>2010-01-13T21:00:00.000-08:00</published><updated>2010-01-13T21:01:50.021-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Portfolios'/><title type='text'>Nusantara Group</title><content type='html'>Client : Nusantara Group ( &lt;a href="http://nusantaragroup.co.id"&gt;www.nusantaragroup.co.id&lt;/a&gt;).&lt;br /&gt;Project Overview : Web Design, Database and Programming for coal mining company profile.&lt;br /&gt;Database : MySQL.&lt;br /&gt;Programming : PHP.&lt;br /&gt;Note : Develop using Joomla.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-2328182461129526300?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/2328182461129526300/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/nusantara-group.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/2328182461129526300'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/2328182461129526300'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/nusantara-group.html' title='Nusantara Group'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-1336122458653344763</id><published>2010-01-13T20:57:00.000-08:00</published><updated>2010-01-13T21:01:50.021-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Portfolios'/><title type='text'>Teknofirst</title><content type='html'>Client : Teknofirst ( &lt;a href="http://www.teknofirst.com"&gt;wwwteknofirst.com&lt;/a&gt;).&lt;br /&gt;Project Overview : Web Design, Database and Programming for technology portal.&lt;br /&gt;Database : MySQL.&lt;br /&gt;Programming : PHP.&lt;br /&gt;Note : Develop using Joomla and SOBI2.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-1336122458653344763?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/1336122458653344763/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/teknofirst.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/1336122458653344763'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/1336122458653344763'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/teknofirst.html' title='Teknofirst'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-3607898193762372854</id><published>2010-01-13T20:53:00.000-08:00</published><updated>2010-01-13T20:56:59.225-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Portfolios'/><title type='text'>SMA Budi Mulia Siantar</title><content type='html'>Client : SMA Budi Mulia Siantar ( &lt;a href="http://www.smabudimulia-siantar.com"&gt;www.smabudimulia-siantar.com&lt;/a&gt;).&lt;br /&gt;Project Overview : Web Design, Database and Programming for school profile.&lt;br /&gt;Database : MySQL.&lt;br /&gt;Programming : PHP.&lt;br /&gt;Note : Develop using Joomla.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-3607898193762372854?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/3607898193762372854/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/sma-budi-mulia-siantar.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/3607898193762372854'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/3607898193762372854'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/sma-budi-mulia-siantar.html' title='SMA Budi Mulia Siantar'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-8704666029614908929</id><published>2010-01-13T15:39:00.001-08:00</published><updated>2010-01-13T21:33:06.416-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Products'/><title type='text'>Web Maintenance</title><content type='html'>PEHA.DEV is the professional's choice for one-stop, cost-effective web site maintenance.&lt;br /&gt;We take care of the details so you and your staff can get back to doing what you do best running your business!&lt;br /&gt;&lt;br /&gt;Write us for a free consultation at dimas.webtools@gmail.com us to get started!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-8704666029614908929?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/8704666029614908929/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/products.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/8704666029614908929'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/8704666029614908929'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/products.html' title='Web Maintenance'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-7414618014414698910</id><published>2010-01-13T14:28:00.001-08:00</published><updated>2010-01-13T20:56:15.639-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Portfolios'/><title type='text'>Bayi Bintang</title><content type='html'>Client : Bayi Bintang (&lt;a href="http://www.bayibintang.com"&gt; www.bayibintang.com&lt;/a&gt;).&lt;br /&gt;Project Overview : Web Design, Database and Programming for online store.&lt;br /&gt;Database : MySQL.&lt;br /&gt;Programming : PHP.&lt;br /&gt;Note : Develop using Joomla and Virtuemart.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-7414618014414698910?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/7414618014414698910/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/portfolio-1.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/7414618014414698910'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/7414618014414698910'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/portfolio-1.html' title='Bayi Bintang'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-7227339859578869349</id><published>2010-01-13T14:14:00.000-08:00</published><updated>2010-01-13T21:57:25.272-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='Contact'/><title type='text'>Contact</title><content type='html'>&lt;span style="font-size:130%;"&gt;PEHA.DEV&lt;/span&gt;&lt;br /&gt;Provide Solutions For Web Based Applications&lt;br /&gt;&lt;a href="mailto:dimas.webtools@gmail.com"&gt;dimas.webtools@gmail.com&lt;/a&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-7227339859578869349?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/7227339859578869349/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2010/01/sample-news-release.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/7227339859578869349'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/7227339859578869349'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2010/01/sample-news-release.html' title='Contact'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry><entry><id>tag:blogger.com,1999:blog-3307636102365499410.post-9162316303544755652</id><published>2009-12-04T17:12:00.001-08:00</published><updated>2010-01-22T16:54:38.924-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='About Us'/><title type='text'>PEHADEV as your partner</title><content type='html'>Revitalize Your Corporate Image to Yield Greater Returns&lt;br /&gt;&lt;br /&gt;In today's highly dynamic and competitive marketplace, corporate identity is paramount in the minds of customers. It determines the consumer's overall experience with your organization, and influences their decision to buy. Consumers are looking to established businesses with trusted names for the products and services they need. Most top notch companies owe their huge success to a positive reputation; they have been adept at branding corporate identity to create a distinguished image that sets their business apart from the competition.&lt;br /&gt;&lt;br /&gt;Developing a strong corporate identity starts with understanding your target audience. Your marketing strategy should should be based on a thorough understanding of potential consumers. It should be tailored to their needs and requirements, which may be subject to change. That is why&lt;br /&gt;updating and enhancing corporate identity design has proven to yield positive results for many businesses looking to increase their market share. In the last ten years, many businesses have initiated a rebranding strategy to revitalize their image and yield greater returns.&lt;br /&gt;&lt;br /&gt;Corporate designs, corporate communication and corporate behavior all play into the formation of your corporate identity, therefore consistency among these three elements is essential. A strong, consistent corporate visual identity throughout your communication and marketing efforts helps to effectively express your mission and create a solid image for your business. Your business logo and message should be coherent throughout, including on your company signage and banners, flyers, brochures, business cards, letterhead, stationary and other marking materials.&lt;br /&gt;&lt;br /&gt;Branding corporate identity with a corporate logo identity in a way that makes an impression on potential customers is important. To be effective, corporate branding needs to be unique and easily recognizable. For example, the corporate identity logo design that represents your business should be a distinct image that promotes easy recognition. A corporate identity logo design that visually communicates the nature of your business is an excellent way of improving the recognition of your chosen symbol or trademark. A corporate logo identity can also make it easier to attract international consumers, as they are able to instantly understand the offerings of your business.&lt;br /&gt;&lt;br /&gt;Corporate identity branding is equally as important for a small business as it is for a large corporation. Solid branding may even be more crucial to small businesses, as it inspires confidence and builds trust with potential customers. However owners of small businesses often do not pay enough attention to the branding of their products or services. This is usually due an incomplete understanding of the importance of the various elements involved in corporate branding.&lt;br /&gt;&lt;br /&gt;This is where the help of corporate identity companies, such as an advertising agency or a comprehensive solutions provider are helpful. Many businesses accomplish their goals with the help of professionals or corporate identity design consultants. A professional corporate identity guide will make sure you cover all the bases, not to mention their ability to design results-oriented corporate identity packages that help ensure uniqueness and consistency.&lt;br /&gt;&lt;br /&gt;A top notch provider of this type of package is PEHA.DEV Web Developer. PEHA.DEV provides resourceful insight in helping your business create a successful marketing plan that will lead to a strong corporate identity. Employing a series of planning and development processes, followed by effective strategies, PEHA.DEV understands that just developing a professional logo or letterhead does not form a corporate identity, A comprehensive marketing plan envisioning identity from a market perspective is the foundation for a strong identity. We first seek to gain a keen insight into your business and your unique selling proposition, before developing the brand identity for your company.&lt;br /&gt;&lt;br /&gt;PEHADEV Web Developer starts your project by studying your business domain and current standing in the market. Our creative team will work closely with our marketing team to gain appropriate insight into your business. We will then deliver a strategic plan to achieve the goals of your business, considering your company’s current needs. PEHADEV provides the freedom to project stakeholders that leads to the most original outcome for any creative project. It is this careful process that will give your business a unique identity among your competitors. Our team designs brand identity that is not just creative, but also has strong marketing value. Our highly experienced team is passionate about crafting well thought corporate identity and marketing strategies, and we have an excellent portfolio that displays our successful results.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/3307636102365499410-9162316303544755652?l=pehadev.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pehadev.blogspot.com/feeds/9162316303544755652/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://pehadev.blogspot.com/2009/12/qwe.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/9162316303544755652'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3307636102365499410/posts/default/9162316303544755652'/><link rel='alternate' type='text/html' href='http://pehadev.blogspot.com/2009/12/qwe.html' title='PEHADEV as your partner'/><author><name>dimas.webtools</name><uri>http://www.blogger.com/profile/06589140905166610610</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></entry></feed>
