tag:blogger.com,1999:blog-42216305386231310602024-02-20T03:09:47.382-08:00web 2.0 blogweb 2.0 tutorialesweb2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.comBlogger84125tag:blogger.com,1999:blog-4221630538623131060.post-39470753106287456502010-02-05T23:54:00.000-08:002010-02-05T23:54:13.513-08:0010 Fresh jQuery Tutorials to Enhance Navigation MenusA few years ago, when designers wanted to add cool effects to the navigation of a website they used Flash. We all know the types of problems that caused. Now with the growing popularity of javascript frameworks like jQuery, those same types of “Flash-like” effects can be achieved without Flash. Here are 10 jQuery tutorials and techniques to enhance your website’s navigation and menus.<span id="more-1674"></span><br />
<h3><a href="http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial" target="_blank">Horizontal Scroll Menu with jQuery Tutorial</a></h3><a href="http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial" target="_blank"><img alt="jquery navigation" src="http://webdesignledger.com/wp-content/uploads/2009/10/jquery_nav_1.jpg" /></a><br />
<h3><a href="http://jqueryfordesigners.com/bbc-radio-1-zoom-tabs/" target="_blank">BBC Radio 1 Zoom Tabs</a></h3><a href="http://jqueryfordesigners.com/bbc-radio-1-zoom-tabs/" target="_blank"><img alt="jquery navigation" src="http://webdesignledger.com/wp-content/uploads/2009/10/jquery_nav_2.jpg" /></a><br />
<h3><a href="http://www.distinctcorp.com.au/jquery/spritemenu.html" target="_blank">Spritemenu</a></h3><a href="http://www.distinctcorp.com.au/jquery/spritemenu.html" target="_blank"><img alt="jquery navigation" src="http://webdesignledger.com/wp-content/uploads/2009/10/jquery_nav_3.jpg" /></a><br />
<h3><a href="http://nettuts.s3.amazonaws.com/358_jquery/example%20files/all-examples.html" target="_blank">Outside the Box Navigation with jQuery</a></h3><a href="http://nettuts.s3.amazonaws.com/358_jquery/example%20files/all-examples.html" target="_blank"><img alt="jquery navigation" src="http://webdesignledger.com/wp-content/uploads/2009/10/jquery_nav_4.jpg" /></a><br />
<h3><a href="http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html" target="_blank">Sexy Drop Down Menu w/ jQuery & CSS</a></h3><a href="http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html" target="_blank"><img alt="jquery navigation" src="http://webdesignledger.com/wp-content/uploads/2009/10/jquery_nav_5.jpg" /></a><br />
<h3><a href="http://www.queness.com/post/741/a-simple-and-beautiful-jquery-accordion-tutorial" target="_blank">A Simple and Beautiful jQuery Accordion Tutorial</a></h3><a href="http://www.queness.com/post/741/a-simple-and-beautiful-jquery-accordion-tutorial" target="_blank"><img alt="jquery navigation" src="http://webdesignledger.com/wp-content/uploads/2009/10/jquery_nav_10.jpg" /></a><br />
<h3><a href="http://www.sitepoint.com/blogs/2009/03/31/make-a-mega-drop-down-menu-with-jquery/" target="_blank">Make a Mega Drop-Down Menu with jQuery</a></h3><a href="http://www.sitepoint.com/blogs/2009/03/31/make-a-mega-drop-down-menu-with-jquery/" target="_blank"><img alt="jquery navigation" src="http://webdesignledger.com/wp-content/uploads/2009/10/jquery_nav_6.jpg" /></a><br />
<h3><a href="http://jqueryfordesigners.com/jquery-look-tim-van-damme/" target="_blank">jQuery look: Tim Van Damme</a></h3><a href="http://jqueryfordesigners.com/jquery-look-tim-van-damme/" target="_blank"><img alt="jquery navigation" src="http://webdesignledger.com/wp-content/uploads/2009/10/jquery_nav_7.jpg" /></a><br />
<h3><a href="http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/" target="_blank">jQuery Feed Menus</a></h3><a href="http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/" target="_blank"><img alt="jquery navigation" src="http://webdesignledger.com/wp-content/uploads/2009/10/jquery_nav_8.jpg" /></a><br />
<h3><a href="http://www.queness.com/post/762/create-a-nice-looking-floating-menu-with-jquery-easing" target="_blank">Create a Good Looking Floating Menu with jQuery Easing</a></h3><a href="http://www.queness.com/post/762/create-a-nice-looking-floating-menu-with-jquery-easing" target="_blank"><img alt="jquery navigation" src="http://webdesignledger.com/wp-content/uploads/2009/10/jquery_nav_9.jpg" /></a><br />
<h2 class="relatedPosts">Related Posts</h2>Here's some other articles that you will definitely find useful.<br />
<h3><a href="http://webdesignledger.com/resources/14-helpful-cheat-sheets-for-front-end-web-development" rel="bookmark" title="Permanent Link to 14 Helpful Cheat Sheets for Front-end Web Development">14 Helpful Cheat Sheets for Front-end Web Development</a></h3><a href="http://webdesignledger.com/resources/14-helpful-cheat-sheets-for-front-end-web-development" rel="bookmark" title="Permanent Link to 14 Helpful Cheat Sheets for Front-end Web Development"><img src="http://webdesignledger.com/wp-content/uploads/2010/01/cheat_sheet.jpg" /></a><br />
<h3><a href="http://webdesignledger.com/resources/12-useful-jquery-plugins-for-working-with-tables" rel="bookmark" title="Permanent Link to 12 Useful jQuery Plugins for Working with Tables">12 Useful jQuery Plugins for Working with Tables</a></h3><a href="http://webdesignledger.com/resources/12-useful-jquery-plugins-for-working-with-tables" rel="bookmark" title="Permanent Link to 12 Useful jQuery Plugins for Working with Tables"><img src="http://webdesignledger.com/wp-content/uploads/2009/11/jquery_tables.jpg" /></a><br />
<h3><a href="http://webdesignledger.com/resources/12-excellent-jquery-plugins-for-enhancing-forms" rel="bookmark" title="Permanent Link to 12 Excellent jQuery Plugins for Enhancing Forms">12 Excellent jQuery Plugins for Enhancing Forms</a></h3><a href="http://webdesignledger.com/resources/12-excellent-jquery-plugins-for-enhancing-forms" rel="bookmark" title="Permanent Link to 12 Excellent jQuery Plugins for Enhancing Forms"><img src="http://webdesignledger.com/wp-content/uploads/2009/04/jquery_navigation.jpg" /></a><br />
<h3><a href="http://webdesignledger.com/resources/14-jquery-plugins-for-enhanced-content-viewing" rel="bookmark" title="Permanent Link to 14 jQuery Plugins for Enhanced Content Viewing">14 jQuery Plugins for Enhanced Content Viewing</a></h3><a href="http://webdesignledger.com/resources/14-jquery-plugins-for-enhanced-content-viewing" rel="bookmark" title="Permanent Link to 14 jQuery Plugins for Enhanced Content Viewing"><img src="http://webdesignledger.com/wp-content/uploads/2009/10/jquery_plugins.jpg" /></a><br />
<h3><a href="http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials" rel="bookmark" title="Permanent Link to 13 Super Useful jQuery Content Slider Scripts and Tutorials">13 Super Useful jQuery Content Slider Scripts and Tutorials</a></h3><a href="http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials" rel="bookmark" title="Permanent Link to 13 Super Useful jQuery Content Slider Scripts and Tutorials"><img src="http://webdesignledger.com/wp-content/uploads/2009/08/jquery_sliders.jpg" /></a>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-71856293461815541582009-10-30T21:00:00.000-07:002009-10-30T21:01:08.259-07:00Five Favorite Web Applications of Designers<div id="content"><br />
<b>Webapps</b>–compared to their desktop counterparts–have the distinct advantage of being flexible in terms of the environment they have to run in; if you have a web browser and an internet connection, you’re good to go. This allows designers who work in a variety of locations, from office cubicles to the neighborhood coffee shop, to do what they need to do without being bound to a single spot.<br />
Last week, we asked readers what they thought the <a href="http://sixrevisions.com/contests/best-web-application-for-designers/">best web application for designers is</a>, and here we share the <b>top five favorites</b> that gained the most votes. The web applications you’ll see here aren’t all specifically for designers but, as you’ll soon see, it’s not surprising why designers love them.<br />
<h3>5. <a href="http://www.freshbooks.com/">FreshBooks</a></h3><br />
<br />
<br />
<a href="http://www.freshbooks.com/" target="_blank"><img alt="FreshBooks" height="300" src="http://images.sixrevisions.com/2009/10/17-01_freshbooks.png" width="550" /></a><br />
</div><h3><span style="font-size: small;"><i style="font-weight: normal;">FreshBooks</i><span style="font-weight: normal;"> (coincidentally Six Revisions’ longest standing site sponsor) is a time-tracking and invoicing tool targeted towards freelancers. It’s perfect for project-based work, with the ability to keep your time logs, keep track of your expenses, create repeating invoices, and much, much more. FreshBooks comes </span><a href="http://www.freshbooks.com/pricing.php" style="font-weight: normal;">in many flavors</a><span style="font-weight: normal;">, and for those wanting to try before buying, the </span><a href="https://secure.freshbooks.com/subscribe.php" style="font-weight: normal;">free version</a><span style="font-weight: normal;"> gives you all the features of the webapp (but is limited to only three clients). As a FreshBooker myself, I can’t say enough good things about this web application, only that it’s crucial for people who work on contractual jobs.</span></span> </h3><h3><br />
</h3><h3>4. <a href="http://www.google.com/analytics/">Google Analytics</a></h3><h3> </h3><br />
<br />
<br />
<a href="http://www.google.com/analytics/" target="_blank"><img alt="Google Analytics" height="300" src="http://images.sixrevisions.com/2009/10/17-02_google_analytics.png" width="550" /></a><br />
<h3><span style="font-size: small;"><i>Google Analytics</i> is a free web application that tracks site statistics. This is a favorite tool amongst web designers for seeing how effective their web user interface designs are. It lets you create custom reports that you can PDF and ship off to your clients (you can use it to show the effectiveness of that recent redesign you did for them). I use Google Analytics on Six Revisions for traffic reporting, and it’s, without a doubt, the best web analytics out there – free or otherwise.</span> </h3><h3>3. <a href="http://basecamphq.com/">Basecamp</a></h3><a href="http://basecamphq.com/" target="_blank"><img alt="Basecamp" height="300" src="http://images.sixrevisions.com/2009/10/17-03_basecamp.png" width="550" /></a><br />
<h3> <span style="font-size: small;"><i style="font-weight: normal;">Basecamp</i><span style="font-weight: normal;"> is a project collaboration tool aimed mainly towards small-to-medium sized organizations. You can share and upload project files, create to-do lists, set milestones, participate in real-time collaboration (with Writeboard), and a lot more. I’ve been using Basecamp for roughly six months, and it’s made teamwork with co-workers and communication with clients a breeze.</span></span></h3><h3><span style="font-size: small;"><span style="font-weight: normal;"> </span></span></h3><h3>2. <a href="http://www.getdropbox.com/">DropBox</a></h3><h3> </h3><br />
<br />
<a href="http://www.getdropbox.com/" target="_blank"><img alt="DropBox" height="300" src="http://images.sixrevisions.com/2009/10/17-04_dropbox.png" width="550" /></a><br />
<h3><span style="font-size: small;"><b><i>DropBox</i> is a file syncing tool that’s fast, reliable, and very easy to set up. DropBox also has a web interface that allows you to manage, upload, delete, and organize your synced files. DropBox is free, allowing you to store 2GB of files (and you can get up to 5GB for referring people to join) – if you need more storage space, the $100/year is more than worth it, especially if you’re using it for work. DropBox is my personal favorite: it’s become an essential component to my work.</b></span></h3><h3>1. <a href="http://kuler.adobe.com/">Kuler</a></h3><ul><li><a href="http://sixrevisions.com/">Home</a></li>
<li><a href="http://sixrevisions.com/all-articles/">All Articles</a></li>
<li><a href="http://sixrevisions.com/category/tutorials/">Tutorials</a></li>
<li><a href="http://sixrevisions.com/category/freebies/">Freebies</a></li>
<li><a href="http://sixrevisions.com/about/">About</a></li>
<li><a href="http://sixrevisions.com/contact/">Contact</a></li>
<li class="twitterSubscribe"><a href="http://twitter.com/sixrevisions">Follow on Twitter</a></li>
<li class="primarySubscribe"><b>Subscribe:</b> <a href="http://feeds2.feedburner.com/SixRevisions" title="RSS Feed Subscription">RSS Feed</a> | <a href="http://feedburner.google.com/fb/a/mailverify?uri=SixRevisions&loc=en_US" title="Email Subscription">Email</a></li>
</ul><div id="content"><span style="margin-left: 38px;"> <script type="text/javascript">
digg_url = 'http://sixrevisions.com/web-applications/five-favorite-web-applications-of-designers/';
digg_title = 'Five Favorite Web Applications of Designers';
digg_skin = 'compact';
digg_window = 'new';
</script> <script src="http://digg.com/tools/diggthis.js" type="text/javascript">
</script><iframe frameborder="0" height="18" scrolling="no" src="http://digg.com/tools/diggthis.php?u=http%3A//sixrevisions.com/web-applications/five-favorite-web-applications-of-designers/&s=compact&t=Five%20Favorite%20Web%20Applications%20of%20Designers&w=new" width="120"></iframe></span> <br />
<h2><a href="http://sixrevisions.com/web-applications/five-favorite-web-applications-of-designers/" rel="bookmark" title="Permanent Link to Five Favorite Web Applications of Designers">Five Favorite Web Applications of Designers</a></h2><div class="meta">October 17th, 2009 by Jacob Gube | <a href="http://sixrevisions.com/web-applications/five-favorite-web-applications-of-designers/#comments">39 Comments</a> | <a href="http://www.stumbleupon.com/submit?url=http://sixrevisions.com/web-applications/five-favorite-web-applications-of-designers/">Stumble It!</a> <a href="http://del.icio.us/post?url=http://sixrevisions.com/web-applications/five-favorite-web-applications-of-designers/&title=Five%20Favorite%20Web%20Applications%20of%20Designers%20%7C%20Six%20Revisions" target="_blank">Delicious</a> <br />
</div><b>Webapps</b>–compared to their desktop counterparts–have the distinct advantage of being flexible in terms of the environment they have to run in; if you have a web browser and an internet connection, you’re good to go. This allows designers who work in a variety of locations, from office cubicles to the neighborhood coffee shop, to do what they need to do without being bound to a single spot.<br />
Last week, we asked readers what they thought the <a href="http://sixrevisions.com/contests/best-web-application-for-designers/">best web application for designers is</a>, and here we share the <b>top five favorites</b> that gained the most votes. The web applications you’ll see here aren’t all specifically for designers but, as you’ll soon see, it’s not surprising why designers love them.<br />
<h3>5. <a href="http://www.freshbooks.com/">FreshBooks</a></h3><a href="http://www.freshbooks.com/" target="_blank"><img alt="FreshBooks" height="300" src="http://images.sixrevisions.com/2009/10/17-01_freshbooks.png" width="550" /></a><br />
<span id="more-1818"></span><br />
<i>FreshBooks</i> (coincidentally Six Revisions’ longest standing site sponsor) is a time-tracking and invoicing tool targeted towards freelancers. It’s perfect for project-based work, with the ability to keep your time logs, keep track of your expenses, create repeating invoices, and much, much more. FreshBooks comes <a href="http://www.freshbooks.com/pricing.php">in many flavors</a>, and for those wanting to try before buying, the <a href="https://secure.freshbooks.com/subscribe.php">free version</a> gives you all the features of the webapp (but is limited to only three clients). As a FreshBooker myself, I can’t say enough good things about this web application, only that it’s crucial for people who work on contractual jobs.<br />
<h3>4. <a href="http://www.google.com/analytics/">Google Analytics</a></h3><a href="http://www.google.com/analytics/" target="_blank"><img alt="Google Analytics" height="300" src="http://images.sixrevisions.com/2009/10/17-02_google_analytics.png" width="550" /></a><br />
<i>Google Analytics</i> is a free web application that tracks site statistics. This is a favorite tool amongst web designers for seeing how effective their web user interface designs are. It lets you create custom reports that you can PDF and ship off to your clients (you can use it to show the effectiveness of that recent redesign you did for them). I use Google Analytics on Six Revisions for traffic reporting, and it’s, without a doubt, the best web analytics out there – free or otherwise.<br />
<h3>3. <a href="http://basecamphq.com/">Basecamp</a></h3><a href="http://basecamphq.com/" target="_blank"><img alt="Basecamp" height="300" src="http://images.sixrevisions.com/2009/10/17-03_basecamp.png" width="550" /></a><br />
<i>Basecamp</i> is a project collaboration tool aimed mainly towards small-to-medium sized organizations. You can share and upload project files, create to-do lists, set milestones, participate in real-time collaboration (with Writeboard), and a lot more. I’ve been using Basecamp for roughly six months, and it’s made teamwork with co-workers and communication with clients a breeze.<br />
<h3>2. <a href="http://www.getdropbox.com/">DropBox</a></h3><a href="http://www.getdropbox.com/" target="_blank"><img alt="DropBox" height="300" src="http://images.sixrevisions.com/2009/10/17-04_dropbox.png" width="550" /></a><br />
<i>DropBox</i> is a file syncing tool that’s fast, reliable, and very easy to set up. DropBox also has a web interface that allows you to manage, upload, delete, and organize your synced files. DropBox is free, allowing you to store 2GB of files (and you can get up to 5GB for referring people to join) – if you need more storage space, the $100/year is more than worth it, especially if you’re using it for work. DropBox is my personal favorite: it’s become an essential component to my work.<br />
<h3>1. <a href="http://kuler.adobe.com/">Kuler</a></h3><a href="http://kuler.adobe.com/" target="_blank"><img alt="Kuler" height="300" src="http://images.sixrevisions.com/2009/10/17-05_kuler.jpg" width="550" /></a><br />
</div><h3> <span style="font-size: small;"><span style="font-weight: normal;">Coming in at numero uno: </span><i style="font-weight: normal;">Kuler</i><span style="font-weight: normal;">, managing to garner nearly a third of the total votes, is a web application that lets you make, store, and share color schemes. It’s wonderful for remembering your favorite color combinations and getting color scheme inspiration for your design projects.</span></span></h3><h3><span style="font-size: small;"><b></b></span> </h3><h3><span style="font-size: small;"><b><span style="font-weight: normal;"> </span></b></span></h3><h3><br />
</h3>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com3tag:blogger.com,1999:blog-4221630538623131060.post-87481380748048094102009-10-30T10:18:00.000-07:002009-10-30T10:18:02.320-07:00Lynda.com Search Engine Optimization<div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><br />
<br />
<div style="text-align: center;"><img alt="http://img420.imageshack.us/img420/7319/searchengineoptcover185ia5.gif" src="http://img420.imageshack.us/img420/7319/searchengineoptcover185ia5.gif" /><br />
</div><div style="text-align: center;"><br />
</div>Table of contents:<br />
1. Getting Started<br />
2. Black Hat SEO/White Hat SEO<br />
3. The Search Magician’s Three Linking Rings<br />
4. The First Linking Ring: Know Your Searchers<br />
5. The Second Linking Ring: Know the Search Engines & Directories<br />
6. SEO Tools: Browser Bars<br />
7. SEO Tools: Keyword Research/Project Management<br />
8. SEO Tools: Links, KDA, and Rank Checkers<br />
9. SEO Tools: Code Checkers, & Web Site Analytics<br />
10. Keywords: The Golden Key to Outstanding SEO<br />
11. The Third Linking Ring: Creating Search Friendly Web Sites<br />
12. Before We Begin: Site Setup the Wrong Way<br />
13. SEO Hands-On: Site Setup in a Search Friendly Way<br />
14. Optimized Web Pages: Submitting and Monitoring Page Rank<br />
15. Santa Monica Carousel Fan Web Site<br />
16. Link Building: The Company You Keep<br />
17. Top Ten SEO Lists<br />
18. Errata, Corrections, & Updates<div style="text-align: center;"><br />
</div><strong>D0wn10ad</strong><br />
<a href="http://www.easy-share.com/f/1326005333/Lynda.com_Search_Engine_Optimization">http://www.easy-share.com/f/1326005333/Lynda.com_Search_Engine_Optimization</a><br />
Mirror<br />
<a href="http://hotfile.com/dl/4819228/4d42814/Lynda.com_Search_Engine_Optimization.part01.rar.html">http://hotfile.com/dl/4819228/4d42814/Lynda.com_Search_Engine_Optimization.part01.rar.html</a><br />
<a href="http://hotfile.com/dl/4819260/caad66f/Lynda.com_Search_Engine_Optimization.part02.rar.html">http://hotfile.com/dl/4819260/caad66f/Lynda.com_Search_Engine_Optimization.part02.rar.html</a><br />
<a href="http://hotfile.com/dl/4819282/c8fbf02/Lynda.com_Search_Engine_Optimization.part03.rar.html">http://hotfile.com/dl/4819282/c8fbf02/Lynda.com_Search_Engine_Optimization.part03.rar.html</a><br />
<a href="http://hotfile.com/dl/4819304/f6cdf3b/Lynda.com_Search_Engine_Optimization.part04.rar.html">http://hotfile.com/dl/4819304/f6cdf3b/Lynda.com_Search_Engine_Optimization.part04.rar.html</a><br />
<a href="http://hotfile.com/dl/4819331/4646c45/Lynda.com_Search_Engine_Optimization.part05.rar.html">http://hotfile.com/dl/4819331/4646c45/Lynda.com_Search_Engine_Optimization.part05.rar.html</a><br />
<a href="http://hotfile.com/dl/4819362/7aceb5b/Lynda.com_Search_Engine_Optimization.part06.rar.html">http://hotfile.com/dl/4819362/7aceb5b/Lynda.com_Search_Engine_Optimization.part06.rar.html</a><br />
<a href="http://hotfile.com/dl/4819394/a01fd08/Lynda.com_Search_Engine_Optimization.part07.rar.html">http://hotfile.com/dl/4819394/a01fd08/Lynda.com_Search_Engine_Optimization.part07.rar.html</a><br />
<a href="http://hotfile.com/dl/4819418/93fa353/Lynda.com_Search_Engine_Optimization.part08.rar.html">http://hotfile.com/dl/4819418/93fa353/Lynda.com_Search_Engine_Optimization.part08.rar.html</a><br />
<a href="http://hotfile.com/dl/4819458/3ca62b0/Lynda.com_Search_Engine_Optimization.part09.rar.html">http://hotfile.com/dl/4819458/3ca62b0/Lynda.com_Search_Engine_Optimization.part09.rar.html</a><br />
<a href="http://hotfile.com/dl/4819488/3c11190/Lynda.com_Search_Engine_Optimization.part10.rar.html">http://hotfile.com/dl/4819488/3c11190/Lynda.com_Search_Engine_Optimization.part10.rar.html</a><br />
<a href="http://hotfile.com/dl/4819508/a9afae2/Lynda.com_Search_Engine_Optimization.part11.rar.html">http://hotfile.com/dl/4819508/a9afae2/Lynda.com_Search_Engine_Optimization.part11.rar.html</a><br />
<a href="http://hotfile.com/dl/4819530/8148c60/Lynda.com_Search_Engine_Optimization.part12.rar.html">http://hotfile.com/dl/4819530/8148c60/Lynda.com_Search_Engine_Optimization.part12.rar.html</a><br />
<a href="http://hotfile.com/dl/4819556/f7e6e6a/Lynda.com_Search_Engine_Optimization.part13.rar.html">http://hotfile.com/dl/4819556/f7e6e6a/Lynda.com_Search_Engine_Optimization.part13.rar.html</a><br />
<a href="http://hotfile.com/dl/4819576/91cbc06/Lynda.com_Search_Engine_Optimization.part14.rar.html">http://hotfile.com/dl/4819576/91cbc06/Lynda.com_Search_Engine_Optimization.part14.rar.html</a><br />
<a href="http://hotfile.com/dl/4819607/e9eed0a/Lynda.com_Search_Engine_Optimization.part15.rar.html">http://hotfile.com/dl/4819607/e9eed0a/Lynda.com_Search_Engine_Optimization.part15.rar.html</a> <br />
<div style="text-align: center;"><br />
</div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-70517382486449003992009-10-28T08:09:00.000-07:002009-10-28T08:10:21.882-07:00Create a photorealistic web layout<div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><a href="http://www.grafpedia.com/wp-content/uploads/2009/09/2111.jpg" rel="thumbnail"><img alt="2111" class="alignnone size-medium wp-image-4129" height="468" src="http://www.grafpedia.com/wp-content/uploads/2009/09/2111-500x468.jpg" title="2111" width="500" /> </a><br />
</div><div style="text-align: left;"><br />
</div><div style="text-align: left;">In this tutorial I will show you how to create a simple photo realistic website in just a few steps.<br />
I know it is hard to believe that a website like this can be converted into a real website.<br />
VIP members will be able to download the PSD layout and also the css/xhtml code. <br />
</div><div style="text-align: left;"><a href="http://www.grafpedia.com/wp-content/uploads/2009/09/2111.jpg" rel="thumbnail">Preview full size layout<br />
</a><br />
</div><div></div><div style="text-align: left;"><span id="more-4107"></span><br />
For this tutorial we will need a nice texture. Click on the following thumbnail, and download this texture to your computer.<br />
</div><div style="text-align: left;"><br />
</div><a href="http://www.grafpedia.com/wp-content/uploads/2009/09/127.jpg" rel="thumbnail"><img alt="127" class="alignnone size-medium wp-image-4109" height="469" src="http://www.grafpedia.com/wp-content/uploads/2009/09/127-76x469.jpg" title="127" width="76" /></a><br />
Open the image inside Photoshop and then go to Edit > Define pattern. Choose a name for this pattern and click OK.<br />
Create a new document with the following size: 960 width and 900 pixels height<br />
Select <a class="screenshot" href="http://www.grafpedia.com/tutorials/create-photorealistic-web-layout#" rel="http://www.grafpedia.com/images/Paint-Bucket-Tool.jpg">Paint Bucket Tool</a>, and in the option bar choose the pattern you just created<br />
<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/220.jpg" rel="thumbnail"><img alt="220" class="alignnone size-full wp-image-4110" height="415" src="http://www.grafpedia.com/wp-content/uploads/2009/09/220.jpg" title="220" width="363" /></a><br />
Click over your layout with <a class="screenshot" href="http://www.grafpedia.com/tutorials/create-photorealistic-web-layout#" rel="http://www.grafpedia.com/images/Paint-Bucket-Tool.jpg">Paint Bucket Tool</a>. You will have something like this<br />
<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/319.jpg" rel="thumbnail"><img alt="319" class="alignnone size-full wp-image-4111" height="469" src="http://www.grafpedia.com/wp-content/uploads/2009/09/319.jpg" title="319" width="500" /></a><br />
Set the foreground color to #49290a and with <a class="screenshot" href="http://www.grafpedia.com/tutorials/create-photorealistic-web-layout#" rel="http://www.grafpedia.com/images/Rounded-Rectangle-Tool.jpg" title="">Rounded Rectangle Tool</a> create a shape, and place it in the middle of the layout<br />
<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/413.jpg" rel="thumbnail"><img alt="413" class="alignnone size-full wp-image-4112" height="469" src="http://www.grafpedia.com/wp-content/uploads/2009/09/413.jpg" title="413" width="500" /></a><br />
<br />
Add the following layer styles<br />
<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/57.jpg" rel="thumbnail"><img alt="57" class="alignnone size-full wp-image-4113" height="258" src="http://www.grafpedia.com/wp-content/uploads/2009/09/57.jpg" title="57" width="320" /></a><br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/67.jpg" rel="thumbnail"><img alt="67" class="alignnone size-full wp-image-4114" height="205" src="http://www.grafpedia.com/wp-content/uploads/2009/09/67.jpg" title="67" width="333" /></a><br />
You will have to add other shape over this brown shape. This time please use white color<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/77.jpg" rel="thumbnail"><img alt="77" class="alignnone size-full wp-image-4115" height="469" src="http://www.grafpedia.com/wp-content/uploads/2009/09/77.jpg" title="77" width="500" /></a><br />
<br />
Please use the same layer styles you have used a few seconds ago.<br />
<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/57.jpg" rel="thumbnail"><img alt="57" class="alignnone size-full wp-image-4113" height="258" src="http://www.grafpedia.com/wp-content/uploads/2009/09/57.jpg" title="57" width="320" /></a><br />
<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/67.jpg" rel="thumbnail"><img alt="67" class="alignnone size-full wp-image-4114" height="205" src="http://www.grafpedia.com/wp-content/uploads/2009/09/67.jpg" title="67" width="333" /></a><br />
This is the result<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/87.jpg" rel="thumbnail"><img alt="87" class="alignnone size-full wp-image-4116" height="299" src="http://www.grafpedia.com/wp-content/uploads/2009/09/87.jpg" title="87" width="500" /></a><br />
<br />
On the bottom right side of the layout I will add some stock images with a flower pot and a sofa.<br />
<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/97.jpg" rel="thumbnail"><img alt="97" class="alignnone size-full wp-image-4117" height="305" src="http://www.grafpedia.com/wp-content/uploads/2009/09/97.jpg" title="97" width="467" /></a><br />
<br />
Under the layer with the sofa I will create a round shape with <a class="screenshot" href="http://www.grafpedia.com/tutorials/create-photorealistic-web-layout#" rel="http://www.grafpedia.com/images/Elipse-Tool.jpg">Ellipse Tool</a><br />
<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/107.jpg" rel="thumbnail"><img alt="107" class="alignnone size-full wp-image-4118" height="274" src="http://www.grafpedia.com/wp-content/uploads/2009/09/107.jpg" title="107" width="476" /></a><br />
<br />
I will go to Filter > Blur > Gaussian blur and I will use the following settings<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/1111.jpg" rel="thumbnail"><img alt="1111" class="alignnone size-full wp-image-4119" height="331" src="http://www.grafpedia.com/wp-content/uploads/2009/09/1111.jpg" title="1111" width="322" /></a><br />
<br />
In this way you will have a real shadow under the sofa<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/128.jpg" rel="thumbnail"><img alt="128" class="alignnone size-full wp-image-4120" height="292" src="http://www.grafpedia.com/wp-content/uploads/2009/09/128.jpg" title="128" width="453" /></a><br />
On the left side of the layout I will create some boxes with <a class="screenshot" href="http://www.grafpedia.com/tutorials/create-photorealistic-web-layout#" rel="http://www.grafpedia.com/images/Rectangle-Tool.jpg">Rectangle Tool</a><br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/137.jpg" rel="thumbnail"><img alt="137" class="alignnone size-full wp-image-4121" height="496" src="http://www.grafpedia.com/wp-content/uploads/2009/09/137.jpg" title="137" width="500" /></a><br />
<br />
All shapes have the following layer styles<br />
<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/147.jpg" rel="thumbnail"><img alt="147" class="alignnone size-full wp-image-4122" height="256" src="http://www.grafpedia.com/wp-content/uploads/2009/09/147.jpg" title="147" width="339" /></a><br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/157.jpg" rel="thumbnail"><img alt="157" class="alignnone size-full wp-image-4123" height="208" src="http://www.grafpedia.com/wp-content/uploads/2009/09/157.jpg" title="157" width="334" /></a><br />
<br />
I will add some text and the images<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/166.jpg" rel="thumbnail"><img alt="166" class="alignnone size-full wp-image-4124" height="428" src="http://www.grafpedia.com/wp-content/uploads/2009/09/166.jpg" title="166" width="500" /></a><br />
On the right side I will add some banners<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/177.jpg" rel="thumbnail"><img alt="177" class="alignnone size-full wp-image-4125" height="731" src="http://www.grafpedia.com/wp-content/uploads/2009/09/177.jpg" title="177" width="368" /></a><br />
I will create a dashed line between the posts.<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/187.jpg" rel="thumbnail"><img alt="187" class="alignnone size-full wp-image-4126" height="198" src="http://www.grafpedia.com/wp-content/uploads/2009/09/187.jpg" title="187" width="500" /></a><br />
To create the dashed line you need to use <a class="screenshot" href="http://www.grafpedia.com/tutorials/create-photorealistic-web-layout#" rel="http://www.grafpedia.com/images/Horizontal-Type-Tool.jpg">Horizontal Type Tool</a> and use the following font and settings<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/196.jpg" rel="thumbnail"><img alt="196" class="alignnone size-full wp-image-4127" height="226" src="http://www.grafpedia.com/wp-content/uploads/2009/09/196.jpg" title="196" width="214" /></a><br />
My last step is to create a logo and some text buttons.<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/206.jpg" rel="thumbnail"><img alt="206" class="alignnone size-full wp-image-4128" height="250" src="http://www.grafpedia.com/wp-content/uploads/2009/09/206.jpg" title="206" width="487" /></a><br />
This is my final layout. I hope you like it. As you can see it was done very easy, and requires only some good stock images.<br />
<a href="http://www.grafpedia.com/wp-content/uploads/2009/09/2111.jpg" rel="thumbnail"><img alt="2111" class="alignnone size-medium wp-image-4129" height="468" src="http://www.grafpedia.com/wp-content/uploads/2009/09/2111-500x468.jpg" title="2111" width="500" /></a><br />
<div style="text-align: left;"><br />
</div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-33075354873164125672009-10-07T18:47:00.000-07:002009-10-07T18:47:40.743-07:00Lynda.com Adobe ColdFusion 9 Essential Training<div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="http://i36.tinypic.com/2mw88d0.jpg" class="aligncenter" src="http://i36.tinypic.com/2mw88d0.jpg" /><br />
</div><div style="text-align: center;"><strong>Lynda.com Adobe ColdFusion 9 New Features | 216 MB</strong><br />
Released on: 10/5/2009</div>In ColdFusion 9 New Features, author and developer Dan Short has gathered together the important updates and improvements in this dynamic web application. Dan showcases the new ColdFusion Builder application throughout the course, using it to work through the new language and CFScript enhancements in this release. He shows how to use the new Server Manager to compare servers and create server groups, as well as monitor server health through notifications. He also explains the new integration with Office applications, building Excel, Word, and even PowerPoint files on the fly from ColdFusion. Finally, he covers the important new Object Relational Mapping feature and how to use the built-in Flash Player. Exercise files accompany this course.<br />
<br />
<br />
<strong>More information</strong><br />
<!--code1--><!--ecode1-->http://www.lynda.com/home/DisplayCourse.aspx?lpk2=54844<br />
<strong>Uploading </strong><br />
<a href="http://uploading.com/files/4a4d1874/LcAC9ET.part1.rar">http://uploading.com/files/4a4d1874/LcAC9ET.part1.rar</a><br />
<a href="http://uploading.com/files/cab662f4/LcAC9ET.part2.rar">http://uploading.com/files/cab662f4/LcAC9ET.part2.rar</a><br />
<a href="http://uploading.com/files/6242141c/LcAC9ET.part3.rar">http://uploading.com/files/6242141c/LcAC9ET.part3.rar</a><br />
<a href="http://uploading.com/files/9a4235m2/LcAC9ET.part4.rar">http://uploading.com/files/9a4235m2/LcAC9ET.part4.rar</a><br />
<a href="http://uploading.com/files/1em7d23d/LcAC9ET.part5.rar">http://uploading.com/files/1em7d23d/LcAC9ET.part5.rar</a><br />
<a href="http://uploading.com/files/8151638m/LcAC9ET.part6.rar">http://uploading.com/files/8151638m/LcAC9ET.part6.rar</a><br />
<strong>Hotfile For All</strong><br />
<a href="http://hotfile.com/dl/14317876/aefff29/LcAC9ET.part1.rar.html">http://hotfile.com/dl/14317876/aefff29/LcAC9ET.part1.rar.html</a><br />
<a href="http://hotfile.com/dl/14317886/93b7ce9/LcAC9ET.part2.rar.html">http://hotfile.com/dl/14317886/93b7ce9/LcAC9ET.part2.rar.html</a><br />
<a href="http://hotfile.com/dl/14317893/1d3a25a/LcAC9ET.part3.rar.html">http://hotfile.com/dl/14317893/1d3a25a/LcAC9ET.part3.rar.html</a><br />
<a href="http://hotfile.com/dl/14317905/4bcf08c/LcAC9ET.part4.rar.html">http://hotfile.com/dl/14317905/4bcf08c/LcAC9ET.part4.rar.html</a><br />
<a href="http://hotfile.com/dl/14317913/97e5e8e/LcAC9ET.part5.rar.html">http://hotfile.com/dl/14317913/97e5e8e/LcAC9ET.part5.rar.html</a><br />
<a href="http://hotfile.com/dl/14317923/54e82c1/LcAC9ET.part6.rar.html">http://hotfile.com/dl/14317923/54e82c1/LcAC9ET.part6.rar.html</a><br />
<strong>Mirror Rapidshare for all:</strong><br />
http://rapidshare.com/files/289746197/LcAC9ET.part1.rar<br />
http://rapidshare.com/files/289746270/LcAC9ET.part2.rar<br />
http://rapidshare.com/files/289746146/LcAC9ET.part3.rar<br />
http://rapidshare.com/files/289747658/LcAC9ET.part4.rar<br />
http://rapidshare.com/files/289746115/LcAC9ET.part5.rar<br />
http://rapidshare.com/files/289746066/LcAC9ET.part6.rarweb2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-44887932500085681662009-10-04T04:57:00.000-07:002009-10-04T04:59:17.536-07:00Creating a First Web Site with Dreamweaver CS4<div style="text-align: center;"><img alt="http://87.118.94.126:8090/IMAGE/images/178_000f93a2_medium.jpeg" src="http://87.118.94.126:8090/IMAGE/images/178_000f93a2_medium.jpeg" /><br />
</div><div style="text-align: left;"><br />
</div><div style="text-align: left;"><b>Lynda.com Creating a First Web Site with Dreamweaver CS4 | 367 MB</b><br />
</div><div style="text-align: left;"><br />
</div><div></div><div style="text-align: left;">Creating a First Web Site with Dreamweaver CS4 shows the basics of doing just that—building a first web site. Adobe Certified Instructor Paul Trani walks through the important steps of creating a web site from concept to publishing, using Dreamweaver CS4. He teaches how to create basic web pages, add text and image content, use Cascading Style Sheets for design and layout, create a photo gallery, and even check the final site for browser compatibility. He also demonstrates how to create a contact form to encourage viewer feedback on the site. Exercise files accompany the course.<span id="more-14531"></span><br />
</div><div style="text-align: left;"></div><div style="text-align: left;">Download<br />
</div><div style="text-align: left;"><br />
</div>Download<br />
<a href="http://hotfile.com/dl/13289878/2d1c02f/LcCAFWSWDCS4-iN.part1.rar.html">http://hotfile.com/dl/13289878/2d1c02f/LcCAFWSWDCS4-iN.part1.rar.html</a><br />
<a href="http://hotfile.com/dl/13297811/92a04a7/LcCAFWSWDCS4-iN.part1.rar.html">http://hotfile.com/dl/13297811/92a04a7/LcCAFWSWDCS4-iN.part1.rar.html</a><br />
<a href="http://hotfile.com/dl/13289889/c98d7cd/LcCAFWSWDCS4-iN.part2.rar.html">http://hotfile.com/dl/13289889/c98d7cd/LcCAFWSWDCS4-iN.part2.rar.html</a><br />
<a href="http://hotfile.com/dl/13297836/0123874/LcCAFWSWDCS4-iN.part2.rar.html">http://hotfile.com/dl/13297836/0123874/LcCAFWSWDCS4-iN.part2.rar.html</a><br />
<a href="http://hotfile.com/dl/13289898/cc2a072/LcCAFWSWDCS4-iN.part3.rar.html">http://hotfile.com/dl/13289898/cc2a072/LcCAFWSWDCS4-iN.part3.rar.html</a><br />
<a href="http://hotfile.com/dl/13297853/caa4d66/LcCAFWSWDCS4-iN.part3.rar.html">http://hotfile.com/dl/13297853/caa4d66/LcCAFWSWDCS4-iN.part3.rar.html</a><br />
<a href="http://hotfile.com/dl/13289905/d4a7eb8/LcCAFWSWDCS4-iN.part4.rar.html">http://hotfile.com/dl/13289905/d4a7eb8/LcCAFWSWDCS4-iN.part4.rar.html</a><br />
<a href="http://hotfile.com/dl/13297883/7bd0534/LcCAFWSWDCS4-iN.part4.rar.html">http://hotfile.com/dl/13297883/7bd0534/LcCAFWSWDCS4-iN.part4.rar.html</a><br />
<br />
<br />
<br />
<div style="text-align: left;"><br />
</div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-19660105249545807142009-10-02T15:15:00.000-07:002009-10-02T15:15:52.210-07:0030 Free Premium Blogger Templates<div style="text-align: left;"><span>Today some of our fellow bloggers decided to stay with Blogger platform, so really nice wordpress themes are converted to <span class="IL_SPAN"><input name="IL_MARKER" type="hidden" />Blogger Templates</span>. Some are so nicely done, you won’t be able to tell if it’s a Blogger or Wordpress.</span><br />
<br />
<span><span>If you are looking for free <span class="IL_SPAN"><input name="IL_MARKER" type="hidden" />premium</span> </span><span class="IL_SPAN"><input name="IL_MARKER" type="hidden" />blogger templates</span> for your valued blog, There are some cool new templates that have been created in 2009, most of them are enriched with more advanced features. If you are going to start a new blog or you want to give a new look to your blog, I am sure you will like these templates. Enjoy and have a nice Blogger blog with a beautiful template!</span><br />
</div><div style="text-align: left;"><br />
</div><div style="text-align: center;"> 1. <b>BloggerTube</b> | <a href="http://bloggertube-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://www.dantearaujo.net/2009/09/blogger-video-template.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div mce_style="text-align: center;" style="text-align: center;"><img alt="BloggerTube" height="249" mce_src="/images/albums/930-1/Bloggertube.jpg" src="http://visionwidget.com/images/albums/930-1/Bloggertube.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 2. Creative by Nature | <a href="http://creativebynature-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://btemplates.com/download/1256/" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Creative by Nature" height="232" mce_src="/images/albums/930-1/Creative-Nature.jpg" src="http://visionwidget.com/images/albums/930-1/Creative-Nature.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 3. <b>Photoplus</b> | <a href="http://photoplus-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://www.dantearaujo.net/2009/08/photoplus-blogger-template.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Photoplus" height="243" mce_src="/images/albums/930-1/Photoplus.jpg" src="http://visionwidget.com/images/albums/930-1/Photoplus.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 4. <b>Zitizen</b> | <a href="http://zitizen-full.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://www.cahayabiru.com/2009/07/zitizen-full-versions.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Zitizen" height="255" mce_src="/images/albums/930-1/Zitizen.jpg" src="http://visionwidget.com/images/albums/930-1/Zitizen.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 5. <b>Mainstream </b>| <a href="http://wpbt-mainstream.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://wpbloggerthemes.blogspot.com/2009/08/mainstream.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Mainstream" height="271" mce_src="/images/albums/930-1/Mainstream.jpg" src="http://visionwidget.com/images/albums/930-1/Mainstream.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 6. <b>Bcute </b>| <a href="http://bcute-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://www.deluxetemplates.net/2009/05/bcute-blogger-templates.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Bcute" height="234" mce_src="/images/albums/930-1/Bcute.jpg" src="http://visionwidget.com/images/albums/930-1/Bcute.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 7. <b>Conservative </b>| <a href="http://conservativezc.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://zonacerebral.com/2009/04/plantilla-blogger-2-columnas-conservative.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Conservative" height="257" mce_src="/images/albums/930-1/Conservative.jpg" src="http://visionwidget.com/images/albums/930-1/Conservative.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 8. <b>Gamezine </b>| <a href="http://gamezine-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://cahayabiru-sphere.blogspot.com/2009/02/blogger-template-gamezine-cahaya.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Gamezine" height="269" mce_src="/images/albums/930-1/Gamezine.jpg" src="http://visionwidget.com/images/albums/930-1/Gamezine.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 9. <b>Gallery </b>| <a href="http://gallery-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://btemplates.com/download/1295/" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Gallery" height="245" mce_src="/images/albums/930-1/Gallery.jpg" src="http://visionwidget.com/images/albums/930-1/Gallery.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 10. <b>Magazine1.2</b> | <a href="http://businessclubs.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://blogtemplate4u.com/2009/03/magazine-template-r12.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Magazine1.2" height="277" mce_src="/images/albums/930-1/Magazine1.2.jpg" src="http://visionwidget.com/images/albums/930-1/Magazine1.2.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 11. <b>Letter Frame</b> | <a href="http://letterframe-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://www.falconhive.com/2009/08/letter-frame-blogger-template.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Letter-Frame" height="252" mce_src="/images/albums/930-1/Letter-Frame.jpg" src="http://visionwidget.com/images/albums/930-1/Letter-Frame.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 12. <b>Comfy </b>| <a href="http://comfymagazine-bloggertemplate.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://www.tricksdaddy.com/2009/04/comfy-magazine-blogger-template-by-technolizard.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Comfy" height="251" mce_src="/images/albums/930-1/Comfy.jpg" src="http://visionwidget.com/images/albums/930-1/Comfy.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 13. <b>Freshbrown </b>| <a href="http://freshbrown.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://www.tricksdaddy.com/2009/04/freshbrown-new-blogger-template.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="freshbrown" height="231" mce_src="/images/albums/930-1/freshbrown.jpg" src="http://visionwidget.com/images/albums/930-1/freshbrown.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 14. <b>Bmagazine </b>| <a href="http://www.niteshkothari.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://themetoday.com/blogger-templates/download-bmagazine-premium-blogger-template/" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Bmagazine" height="244" mce_src="/images/albums/930-1/Bmagazine.jpg" src="http://visionwidget.com/images/albums/930-1/Bmagazine.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 15. <b>Acosmintech </b>| <a href="http://wpbt-acosmintech.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://wpbloggerthemes.blogspot.com/2009/06/acosmintech.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Acosmintech" height="215" mce_src="/images/albums/930-1/acosmintech-wp-theme.jpg" src="http://visionwidget.com/images/albums/930-1/acosmintech-wp-theme.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 16. <b>Community </b>| <a href="http://community-bietemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://www.bietemplates.com/2009/07/community.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><img alt="Community" height="244" mce_src="/images/albums/930-1/Community.jpg" src="http://visionwidget.com/images/albums/930-1/Community.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 17. <b>Chucky </b>| <a href="http://chucky-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://btemplates.com/download/1242/" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Chucky" height="242" mce_src="/images/albums/930-1/Chucky.jpg" src="http://visionwidget.com/images/albums/930-1/Chucky.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 18. <b>Dreamy </b>| <a href="http://dreamy2-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://btemplates.com/download/1068/" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Dreamy" height="259" mce_src="/images/albums/930-1/dreamy.jpg" src="http://visionwidget.com/images/albums/930-1/dreamy.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 19. <b>Driftwood </b>| <a href="http://driftwoodmag-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://btemplates.com/download/1142/" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Driftwood" height="251" mce_src="/images/albums/930-1/driftwood-mag.jpg" src="http://visionwidget.com/images/albums/930-1/driftwood-mag.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 20. <b>Mahusay </b>| <a href="http://mahusay-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://www.freebloggertemplate.info/2009/07/mahusay-free-premium-blogger-template.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Mahusay" height="285" mce_src="/images/albums/930-1/Mahusay.jpg" src="http://visionwidget.com/images/albums/930-1/Mahusay.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 21. <b>Paper Wall </b>| <a href="http://paperwall-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://btemplates.com/download/1145/" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Paper-Wall" height="251" mce_src="/images/albums/930-1/Paper-Wall.jpg" src="http://visionwidget.com/images/albums/930-1/Paper-Wall.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 22. <b>Magasin Tres</b> | <a href="http://magasintres-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://falconhive.com/2009/05/blogger-template-magasin-tres.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Magasin-Tres" height="254" mce_src="/images/albums/930-1/Magasin-Tres.jpg" src="http://visionwidget.com/images/albums/930-1/Magasin-Tres.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 23. <b>Plantilla </b>| <a href="http://magazeenzc.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://zonacerebral.com/2009/03/plantilla-blogger-magazeen.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Plantilla" height="259" mce_src="/images/albums/930-1/Plantilla.jpg" src="http://visionwidget.com/images/albums/930-1/Plantilla.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 24. <b>SchemerMag </b>| <a href="http://schemar-mag.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://www.bloggertricks.com/2009/03/one-more-magazine-style-blogger.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="SchemerMag.jpg" height="251" mce_src="/images/albums/930-1/SchemerMag.jpg" src="http://visionwidget.com/images/albums/930-1/SchemerMag.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 25. <b>Woody </b>| <a href="http://woody-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://btemplates.com/2009/04/01/woody/" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="woody" height="216" mce_src="/images/albums/930-1/woody.jpg" src="http://visionwidget.com/images/albums/930-1/woody.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 26. <b>Showcase </b>| <a href="http://showcase-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://btemplates.com/download/1125/" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="showcase" height="242" mce_src="/images/albums/930-1/showcase.jpg" src="http://visionwidget.com/images/albums/930-1/showcase.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 27. <b>Showcase Light</b> | <a href="http://showcaselight-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://btemplates.com/download/1176/" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="Showcase-Light" height="222" mce_src="/images/albums/930-1/Showcase-Light.jpg" src="http://visionwidget.com/images/albums/930-1/Showcase-Light.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 28. <b>The Latest </b>| <a href="http://thelatest-btemplates.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://anshuldudeja.blogspot.com/2009/07/latest-blogger-template.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="thelatest" height="228" mce_src="/images/albums/930-1/thelatest.jpg" src="http://visionwidget.com/images/albums/930-1/thelatest.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 29. <b>MiniBlog </b>| <a href="http://wpbt-miniblog.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://wpbloggerthemes.blogspot.com/2009/05/miniblog.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="miniBlog" height="274" mce_src="/images/albums/930-1/miniBlog.jpg" src="http://visionwidget.com/images/albums/930-1/miniBlog.jpg" width="500" /><br />
</div><br />
<div style="text-align: center;"> 30. <b>One Room</b> | <a href="http://wpbt-oneroom.blogspot.com/" mce_="" rel="nofollow" target="_blank">Demo </a>| <a href="http://wpbloggerthemes.blogspot.com/2009/04/oneroom.html" mce_="" rel="nofollow" target="_blank">Download</a><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><img alt="One-Room" height="232" mce_src="/images/albums/930-1/One-Room.jpg" src="http://visionwidget.com/images/albums/930-1/One-Room.jpg" width="500" /><br />
</div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-29024259732745508862009-09-21T16:20:00.000-07:002009-09-21T16:20:51.779-07:0010 Top-Notch CSS Editors<div style="text-align: center;"><strong>CSS editors</strong> are editors that focus solely on generating Cascading Style Sheets. Though you could scrape by using a fully-featured IDE or source code editor – CSS editors may offer specialized functions and features to help you write better CSS, quicker.<br />
</div><div> </div><div style="text-align: center;">In this article, you’ll find some of the more <em>popular CSS editors</em> available on the market.<br />
</div><div style="text-align: center;"> </div><h3 style="text-align: center;"><a href="http://www.skybound.ca/">Stylizer</a></h3><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://www.skybound.ca/"><img alt="Stylizer" height="329" src="http://images.sixrevisions.com/2009/08/25-01_stylizer.png" width="546" /></a><br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"><span id="more-1504"></span><br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><em>Stylizer</em> is a visual CSS code editor. It has real-time preview that renders changes on your web browser on the fly as you make them. It also has a point-and-click interface (called "Bullseye") which allows you to target page elements by clicking on them, making CSS editing a cinch. Stylizer is available only for Windows and Mac OS.<br />
</div><div style="text-align: center;"> </div><h3 style="text-align: center;"><a href="http://westciv.com/style_master/">Style Master</a></h3><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://westciv.com/style_master/"><img alt="Style Master" height="303" src="http://images.sixrevisions.com/2009/08/25-02_stylemaster.png" width="478" /></a><br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><em>Style Master</em> is a cross-platform CSS development application that comes with a robust set of features such as auto-completion, on the fly code editing and rendering of dynamically-generated pages (such as PHP, .NET, and Ruby on Rails), and a hierarchic display of CSS fields. It also has a feature called Support Watcher which warns you of potential CSS bugs for certain browsers.<br />
</div><div style="text-align: center;"> </div><h3 style="text-align: center;"><a href="http://www.blumentals.net/rapidcss/">RapidCSS</a></h3><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://www.blumentals.net/rapidcss/"><img alt="RapidCSS" height="374" src="http://images.sixrevisions.com/2009/08/25-03_rapidcss.png" width="546" /></a><br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><em>RapidCSS</em> is ideal for writing CSS code; it is lightweight and offers a wide range of features like code auto complete, syntax highlighting, built-in CSS references and various shortcuts for CSS tags.<br />
</div><div style="text-align: center;"> </div><h3 style="text-align: center;"><a href="http://www.blumentals.net/csstool/">Free CSS Toolbox</a></h3><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://www.blumentals.net/csstool/"><img alt="Free CSS Toolbox" height="315" src="http://images.sixrevisions.com/2009/08/25-04_freecss_toolbox.png" width="546" /></a><br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><em>Free CSS toolbox</em> is a simple text editor for CSS. It’s very lightweight and simple to use. It has a syntax highlighter feature, code auto-complete, CSS checker, CSS validator and compressor.<br />
</div><div style="text-align: center;"> </div><h3 style="text-align: center;"><a href="http://www.coffeecup.com/stylesheet-maker/">CoffeeCup StyleSheet Maker</a></h3><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://www.coffeecup.com/stylesheet-maker/"><img alt="CoffeeCup StyleSheet Maker" height="386" src="http://images.sixrevisions.com/2009/08/25-05_coffeecup_stylesheet_maker.png" width="546" /></a><br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><em>CoffeeCup StyleSheet Maker</em> is another CSS editor which offers many functionalities to edit CSS, but still not very flexible to increase productivity to its highest level. It has support for shortcut keys for tags, classes, and margins to reduce the amount of typing you need to do. It also comes jam-packed with premade code snippets for common CSS styles.<br />
</div><div style="text-align: center;"> </div><h3 style="text-align: center;"><a href="http://enginsite.com/css-editor.htm">EnginSite CSS Editor</a></h3><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://enginsite.com/css-editor.htm"><img alt="EnginSite CSS Editor" height="436" src="http://images.sixrevisions.com/2009/08/25-06_enginesite_css.png" width="546" /></a><br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><em>EnginSite CSS Editor</em> is a good CSS editor with "instant" preview. This editor is ideal for beginning designers focused on simple tasks and designs.<br />
</div><div style="text-align: center;"> </div><h3 style="text-align: center;"><a href="http://macrabbit.com/cssedit/">CSSEdit</a></h3><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://macrabbit.com/cssedit/"><img alt="CSS Edit" height="386" src="http://images.sixrevisions.com/2009/08/25-07_css_edit.jpg" width="550" /></a><br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><em>CSSEdit</em> stands in the middle between sophisticated web development editors and basic ones. CSS Edit is sleek and clean. It’s best suited for first time and casual CSS coders.<br />
</div><div style="text-align: center;"> </div><h3 style="text-align: center;"><a href="http://www.apple.com/downloads/macosx/internet_utilities/jellyfishcss.html">JellyFish-CSS</a></h3><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://www.apple.com/downloads/macosx/internet_utilities/jellyfishcss.html"><img alt="JellyFish-CSS" height="365" src="http://images.sixrevisions.com/2009/08/25-08_jellyfish-css.png" width="510" /></a><br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><em>JellyFish CSS </em> is a smart and simple CSS editor. It helps edit CSS code easily and quickly. It will also help you steer clear of CSS syntax errors with its Code-sense feature.<br />
</div><div style="text-align: center;"> </div><h3 style="text-align: center;"><a href="http://www.improvingcode.com/snapcss/">SnapCSS</a></h3><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://www.improvingcode.com/snapcss/"><img alt="SnapCSS" height="387" src="http://images.sixrevisions.com/2009/08/25-09_snapcss.png" width="550" /></a><br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><em>SnapCSS</em> is a windows-only CSS editor that is extremely lightweight, featuring a super simple text-editor interface. It has a beautify code function that automatically formats and standardizes your CSS.<br />
</div><div style="text-align: center;"> </div><h3 style="text-align: center;"><a href="http://www.apple.com/downloads/macosx/internet_utilities/simplecss.html">SimpleCSS</a></h3><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://www.apple.com/downloads/macosx/internet_utilities/simplecss.html"><img alt="SimpleCSS" height="360" src="http://images.sixrevisions.com/2009/08/25-10_simplecss.jpg" width="450" /></a><br />
</div><div style="text-align: center;"> </div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><em>SimpleCSS</em> is a Mac OS application for easily creating stylesheets from scratch. It has an import feature which allows you to pool together several stylesheets into one file. SimpleCSS also features drag-and-drop capabilities for reordering your style rules, so that you may organize them in the manner you need.<br />
</div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-44559433110815436722009-09-18T16:10:00.000-07:002009-09-18T16:10:33.573-07:0025 Tutorials for Creating Stunning 3D Text Effects<h4 style="text-align: center;"><a href="http://www.1stwebdesigner.com/tutorials/unique-3d-text-xara-3d-photoshop-tutorial/" rel="bookmark" title="Unique 3D Text – Xara 3D + Photoshop Tutorial">Unique 3D Text – Xara 3D + Photoshop Tutorial</a></h4>This is tutorial is a good start as it shows you how to work in Xara 3D and give letters a 3d effect. Then it show you how to export from Xara 3D and get the text into Photoshop to do the final retouching.<br />
<h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/unique2.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.digitalartsonline.co.uk/tutorials/index.cfm?featureID=1617" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.digitalartsonline.co.uk');" target="_blank">Fresh Typographic Effect</a></h4><h4 style="text-align: center;"> </h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/fresh.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.computerarts.co.uk/tutorials/3d__and__animation/the_new_way_to_create_3d_text" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.computerarts.co.uk');" target="_blank">New Way to Create 3D Text</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/computerarts.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://psd.tutsplus.com/designing-tutorials/valentines-day-photoshop-style/" onclick="javascript:pageTracker._trackPageview('/outbound/article/new.psdtuts.com');" target="_blank">Valentines Day Photoshop Style</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/val.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://blogof.francescomugnai.com/2008/06/tutorial-how-to-create-a-stunning-3d-effect-in-photoshop/" onclick="javascript:pageTracker._trackPageview('/outbound/article/blogof.francescomugnai.com');" target="_blank">Stunning 3D Effect</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/cold.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.tutorialsphere.com/homemade/design/kaboom-exploding-text/" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.tutorialsphere.com');" target="_blank">Kaboom Exploding Text</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/kab.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://abduzeedo.com/awesome-milk-typography-effect-photoshop">Awesome Milk Typography Effect in Photoshop</a></h4><h4 style="text-align: center;"><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/milk.jpg" width="625" /><a href="http://abduzeedo.com/awesome-milk-typography-effect-photoshop"><br />
</a><a href="http://photoshoptutorials.ws/photoshop-tutorials/text-effects/3d-textured-text-effect.html" onclick="javascript:pageTracker._trackPageview('/outbound/article/photoshoptutorials.ws');" target="_blank">3D Textured Text Effect</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/c.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.webdesignerdepot.com/2009/05/render-a-3d-text-scene-using-photoshop/">Create a 3D Text Scene Using Photoshop</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/oasis.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.tutorial9.net/photoshop/create-a-retro-pop-style-wallpaper/" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.tutorial9.net');" target="_blank">Retro Pop Style</a><a href="http://blogof.francescomugnai.com/2008/06/tutorial-how-to-create-a-stunning-3d-effect-in-photoshop/"><br />
</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/retro.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.tutorialwiz.com/3D_text2/" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.tutorialwiz.com');" target="_blank">3D Text Effect 2</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/text.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.denisdesigns.com/blog/2009/03/3d-text-on-fire/">3D Text on Fire</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/fire.jpg" width="625" /><a href="http://www.digitalartsonline.co.uk/tutorials/index.cfm?featureid=1617"><br />
</a></h4><h4 style="text-align: center;"><a href="http://psd.tutsplus.com/text-effects-tutorials/design-soft-stylized-3d-type/">Design Soft Stylized 3D Type</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/psdtuts.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.tutorialwiz.com/3D_cliff_text/" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.tutorialwiz.com');" target="_blank">3D Clif Text Effect</a><a href="http://psd.tutsplus.com/text-effects-tutorials/design-soft-stylized-3d-type/"><br />
</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/wiz.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.marcofolio.net/photoshop/glowing_and_sparkling_intense_light_3d_logo.html">Glowing and Sparkling Intense Light 3D Logo</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/q.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.marcofolio.net/photoshop/stunning_neon_light_3d_typography.html">Stunning Neon Light 3D Typography</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/marco.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://psd.tutsplus.com/tutorials/text-effects-tutorials/create-a-spectacular-grass-text-effect-in-photoshop/">Create a Spectacular Grass Text Effect in Photoshop</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/earth.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://psd.tutsplus.com/text-effects-tutorials/create-a-spectacular-flaming-meteor-effect-on-text/">Creating a Spectacular Flaming Meteor Effect on Text</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/typo.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.adobetutorialz.com/articles/2978/1/Create-a-Spectacular-Style-Text-Effect">Create a Spectacular Style Text Effect</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/style.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://abduzeedo.com/hell-tutorial-photoshop">Hell of Tutorial in Photoshop</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/hell.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.gomediazine.com/tutorials/create-dream-design-3d-typography/">Create a Dream Design with 3D Typography</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/dream.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.photoshoproadmap.com/Photoshop-blog/2008/10/31/papercraft-text-effect/">Papercraft Text Effect<br />
</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/craft.jpg" width="625" /></h4><h4><a href="http://10steps.sg/photoshop/create-a-3d-flowery-text-effect/">Create a 3D Flowery Text Effect</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/10.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.minervity.com/features/photoshop/how-to-create-a-realistic-3d-stone-text-effect/">How to Create a Realistic 3D Stone Text Effect</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/metal.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.denisdesigns.com/blog/2009/01/create-3-d-text-with-some-extreme-lighting/">Create 3D Text with Some Extreme Lighting</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/dd.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.layersmagazine.com/illustrator-3d-text-effect.html">3D Text Effect in Photoshop</a> (video)</h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/ring.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://pshero.com/archives/transformer-text">Transformers Effect</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/trans.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.adobetutorialz.com/articles/3023/1/3D-text-effect---2009">3D Text Effect</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/2009.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://psd.tutsplus.com/tutorials/text-effects-tutorials/how-to-create-high-quality-metal-3d-text-in-photoshop/">How to Create High Quality Metal 3D Text in Photoshop</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/3dtext.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://psd.tutsplus.com/tutorials/text-effects-tutorials/how-to-quickly-create-a-stylish-retro-text-effect/">How to Quickly Create a Stylish Retro Text Effect</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/psd.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.tutorialwiz.com/3D_text/">3D Text effect</a></h4><h4><img alt="3D Text Effexts" height="300" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/3d2.jpg" width="625" /></h4><h4 style="text-align: center;"><a href="http://www.depiction.net/tutorials/photoshop/3dtext.php">3D Text</a></h4><h4><img alt="3D Text Effexts" height="120" src="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/3d-text/dep.jpg" width="625" /></h4>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-17160148188319121792009-09-18T11:02:00.000-07:002009-09-18T11:03:31.464-07:00Using CSS to Do Anything: 50+ Creative Examples and Tutorials<div style="text-align: center;">CSS can powerfully open the doors to a lot of rich and unique techniques. Today we are presenting a round-up of CSS coding, creative approaches and techniques. <span id="more-230"></span>Definitely worth taking a very close look at! We also included some basic techniques you can probably use in every project you are developing. This is just the third article in this series , the forth part will be coming soon, stay tuned and Enjoy!<br />
<hr />You can also take a look at other 2 articles in this series :<br />
<br />
<img alt="http://noupe.com/img/c2-25.gif" src="http://noupe.com/img/c2-25.gif" /> <br />
<ul><li><a href="http://www.noupe.com/design/101-css-techniques-of-all-time-part-1.html">101 CSS Techniques Of All Time- Part 1</a></li>
<li><a href="http://www.noupe.com/css/101-css-techniques-of-all-time-part2.html">101 CSS Techniques Of All Time- Part 2</a></li>
</ul><hr />So let’s get started and don’t forget to subscribe to our <a href="http://feeds.feedburner.com/noupe">RSS-Feed</a> to keep track on our next post in this series.<br />
<hr /><h4 class="title">Styling Lists</h4><a class="showcase" href="http://www.bitsonewmedia.com/permalink/the_amazing_li">The Amazing </a><br />
<br />
<li>- With a little CSS, the </li><br />
<br />
<br />
<br />
<li> becomes one of the most powerful and versatile tags in a web designer's arsenal. This article is a tutorial and a tribute to the amazing </li><br />
<br />
<br />
<br />
<li>. <a class="showcase" href="http://www.bitsonewmedia.com/permalink/the_amazing_li"><img alt="" src="http://noupe.com/img/c2-2.gif" /></a><br />
<br />
<hr />So let’s get started and don’t forget to subscribe to our <a href="http://feeds.feedburner.com/noupe">RSS-Feed</a> to keep track on our next post in this series.<br />
<a class="showcase" href="http://css-tricks.com/better-ordered-lists-using-simple-php-and-css/">Better Ordered Lists (Using Simple PHP and CSS)</a>- Here is an example where you ditch the traditional ordered list and create your own!<br />
<a class="showcase" href="http://css-tricks.com/better-ordered-lists-using-simple-php-and-css/"><img alt="" src="http://noupe.com/img/c2-14.gif" /></a><br />
<br />
<hr /><a class="showcase" href="http://www.webdesignerwall.com/tutorials/style-your-ordered-list/">Style Your Ordered List</a>- Here is a quick CSS tutorial on how you can use the ordered list <br />
<br />
<ol>and paragraph element to design a stylish numbered list. <a class="showcase" href="http://www.webdesignerwall.com/tutorials/style-your-ordered-list/"><img alt="" src="http://noupe.com/img/c2-15.gif" /></a>
<ul id="star"><li><b>Live Demo</b><a href="http://www.webdesignerwall.com/demo/ordered-list/ordered-list.html">View it Here</a></li>
<li><b>Download </b> <a href="http://www.webdesignerwall.com/demo/ordered-list/ordered-list.html">zip file</a></li>
</ul><hr /><a class="showcase" href="http://pixelspread.com/blog/323/list-based-calendar">List Based Calendar</a>- A simple way to add multiple views to a calendar, so you can view your events in a simple list, or in a month based calendar format. <a class="showcase" href="http://pixelspread.com/blog/323/list-based-calendar"><img alt="" src="http://noupe.com/img/c2-40.gif" /></a>
<ul id="star"><li><b>Live Demo</b><a href="http://pixelspread.com/demo/calendar/">View it Here</a></li>
</ul><hr /><h4 class="title">Forms and Form Elements</h4><a class="showcase" href="http://www.webdesignfromscratch.com/datasheet.cfm">Datasheet-style form using HTML and CSS</a>- Make a datasheet-style web form using HTML, CSS and JavaScript with multiple similar records, <a class="showcase" href="http://www.webdesignfromscratch.com/datasheet.cfm"><img alt="" src="http://noupe.com/img/c2-4.gif" /></a>
<hr /><a class="showcase" href="http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom">Styling File Inputs with CSS and the Dom </a>- File inputs (<input type="file" />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. <a class="showcase" href="http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom"><img alt="" src="http://noupe.com/img/c2-33.gif" /></a>
<ul id="star"><li><b>Live Demo</b><a href="http://www.shauninman.com/assets/examples/styling-file-inputs/">View it Here</a></li>
<li><b>Download </b> <a href="http://www.shauninman.com/assets/downloads/styling-file-inputs.zip">zip file</a></li>
</ul><hr /><a class="showcase" href="http://www.digital-web.com/articles/redesigning_ebay_registration/">Better Web Forms: Redesigning eBay’s Registration</a>- Is a detailed walkthrough of simple changes that have a dramatic positive impact. <a class="showcase" href="http://www.digital-web.com/articles/redesigning_ebay_registration/"><img alt="" src="http://noupe.com/img/c2-5.gif" /></a>
<hr /><a class="showcase" href="http://dnevnikeklektika.com/uni-form/"> Uni-Form</a>- Uni-Form is an attempt to standardize form markup (xhtml) and css, “modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms <a class="showcase" href="http://dnevnikeklektika.com/uni-form/"><img alt="" src="http://noupe.com/img/c2-46.gif" /></a>
<hr /><h4 class="title">Footers</h4><a class="showcase" href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/">A CSS sticky footer that just works</a>- In just a few simple CSS classes with minimal extra HTML markup, you can get a sticky footer that even beginners can get a handle on. It’s been tested in IE 5 and up, Firefox, Safari and Opera. <a class="showcase" href="http://ryanfait.com/sticky-footer/"><img alt="" src="http://noupe.com/img/c2-1.gif" /></a>
<hr /><a class="showcase" href="http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/">MAKING YOUR FOOTER STAY PUT WITH CSS</a>- How to make your footer dock to the bottom of the screen. <a class="showcase" href="http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/"><img alt="" src="http://noupe.com/img/c2-3.gif" /></a>
<hr /><h4 class="title">New ideas for Image Replacement</h4><a class="showcase" href="http://www.nimlok-louisiana.com/blog/create-custom-search-bars-with-image-replacement-using-css/">Create Custom Search Bars </a>- With Image Replacement using CSS <a class="showcase" href="http://www.nimlok-louisiana.com/blog/create-custom-search-bars-with-image-replacement-using-css/"><img alt="" src="http://noupe.com/img/c2-19.gif" /></a>
<hr /><a class="showcase" href="http://blog.neatlysliced.com/2008/03/hr-image-replacement/">HR Image Replacement with CSS</a>- How to replace the HR tag with an image that works cross browser.
<hr /><h4 class="title">Image Sprite</h4><a class="showcase" href="http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/">Image Sprite Navigation With CSS</a>- Creating a navigation using an image sprite, you can have a complete navigation, rollovers and all, by only using one image. <a class="showcase" href="http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/"><img alt="" src="http://noupe.com/img/c2-11.gif" /></a>
<hr /><h4 class="title">CSS image techniques</h4><a class="showcase" href="http://www.smileycat.com/miaow/archives/000648.php">Create Resizable Images With CSS</a>- A new technique to resize images when the user increases their browser’s text size. Images are resized along with the text rather than staying constant in size. <a class="showcase" href="http://www.smileycat.com/miaow/archives/000648.php"><img alt="" src="http://noupe.com/img/c2-12.gif" /></a>
<hr /><a class="showcase" href="http://dnevnikeklektika.com/css/css-stamps/">CSS Stamps</a>- Using the CSS property border and outline to achieve the stamp look. <a class="showcase" href="http://dnevnikeklektika.com/css/css-stamps/"><img alt="" src="http://noupe.com/img/c2-18.gif" /></a>
<hr /><a class="showcase" href="http://www.askthecssguy.com/examples/examplesUsingjQuery/imageCaptions.html">Image Captions Generated with CSS and JavaScript</a>- The names are not part of the image – they are stored in the img’s title attribute. <a class="showcase" href="http://www.askthecssguy.com/examples/examplesUsingjQuery/imageCaptions.html"><img alt="" src="http://noupe.com/img/c2-20.gif" /></a>
<hr /><a class="showcase" href="http://www.daltonlp.com/view/217">Cross-browser semi-transparent backgrounds</a>- Semi-transparent backgrounds are nice. They would be more popular, but Internet Explorer doesn’t support .png transparency. There are a few clunky workarounds. Here’s another that’s a little less clunky. <a class="showcase" href="http://www.daltonlp.com/view/217"><img alt="" src="http://noupe.com/img/c2-21.gif" /></a>
<hr /><a class="showcase" href="http://www.designmeme.com/articles/learn-web-design-css-rollovers/">CSS Rollovers</a>- Learn how to create a simple rollover image using CSS. <a class="showcase" href="http://www.designmeme.com/articles/learn-web-design-css-rollovers/"><img alt="" src="http://noupe.com/img/c2-45.gif" /></a>
<hr /><h4 class="title">Text and Links Effects</h4><a class="showcase" href="http://css-tricks.com/put-checkmarks-next-to-visted-links-with-pure-css/">“Checkmark” Your Visited Links with Pure CSS</a>- The goal of this tutorial is to get a check mark preceding visited links for a nice visual indicator. <a class="showcase" href="http://css-tricks.com/put-checkmarks-next-to-visted-links-with-pure-css/"><img alt="" src="http://noupe.com/img/c2-13.gif" /></a>
<hr /><a class="showcase" href="http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php">Simple Round CSS Links </a>- Now you can style both (a) and (button) in this super easy and light-weight solution <a class="showcase" href="http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php"><img alt="" src="http://noupe.com/img/c2-43.gif" /></a>
<hr /><a class="showcase" href="http://meyerweb.com/eric/css/edge/popups/demo2.html">Pure CSS Popups</a>- Using pure CSS causing text to appear and disappear. <a class="showcase" href="http://meyerweb.com/eric/css/edge/popups/demo2.html"><img alt="" src="http://noupe.com/img/c2-23.gif" /></a>
<hr /><h4 class="title">Navigation</h4><a class="showcase" href="http://woork.blogspot.com/2008/03/perfect-pagination-style-using-css.html">Perfect pagination style using CSS</a>- This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages. <a class="showcase" href="http://woork.blogspot.com/2008/03/perfect-pagination-style-using-css.html"><img alt="" src="http://noupe.com/img/c2-6.gif" /></a>
<hr /><a class="showcase" href="http://blog.itookia.com/post/How-to-create-VISTA-style-toolbar-with-CSS.aspx">VISTA style toolbar</a>- How to create VISTA style toolbar with CSS, <a class="showcase" href="http://blog.itookia.com/vista_toolbar.html"><img alt="" src="http://noupe.com/img/c2-37.gif" /></a>
<ul id="star"><li><b>Live Demo</b><a href="http://blog.itookia.com/vista_toolbar.html">view it Here</a></li>
<li><b>Download code</b><a href="http://blog.itookia.com/file.axd?file=VISTA_toolbar.zip">from Here</a></li>
</ul><hr /><a class="showcase" href="http://woork.blogspot.com/2008/01/digg-like-navigation-bar-using-css.html">Digg-like navigation bar using CSS</a>- This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links. <a class="showcase" href="http://woork.blogspot.com/2008/01/digg-like-navigation-bar-using-css.html"><img alt="" src="http://noupe.com/img/c2-8.gif" /></a>
<hr /><a class="showcase" href="http://metalize.liveonstyle.com/2007/03/22/menu-circular-en-css/">Menu circular en CSS</a>- A circular menu with nice hover effect showing text description for each item in the menu. <a class="showcase" href="http://metalize.liveonstyle.com/2007/03/22/menu-circular-en-css/"><img alt="" src="http://noupe.com/img/c2-39.gif" /></a>
<ul id="star"><li><b>Live Demo</b><a href="http://metalize.liveonstyle.com/wp-content/uploads/2007/03/index.html">view it Here</a></li>
</ul><hr /><h5 class="title2">Further readings on Navigation</h5><a class="showcase" href="http://vandelaydesign.com/blog/css/4-reasons-to-use-css-based-navigation/">4 Reasons to Use CSS-Based Navigation</a>- By using CSS to create a navigational menu you can achieve both accessibility and a professional, attractive appearance. Vandelay Design listed the benefits of using CSS for navigational menus, Worth reading.
<hr /><h4 class="title">CSS Image Galleries</h4><a class="showcase" href="http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/">CSS Image Gallery</a>- A purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image. <a class="showcase" href="http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/"><img alt="" src="http://noupe.com/img/c2-32.gif" /></a>
<hr /><a class="showcase" href="http://www.cssplay.co.uk/menu/photo_not_so_simple">Not so simple photograph gallery</a>- A CSS image gallery that have a default image, a line or two of descriptive text and the ability to click an image to hold it on the screen. <a class="showcase" href="http://www.cssplay.co.uk/menu/photo_not_so_simple"><img alt="" src="http://noupe.com/img/c2-25.gif" /></a>
<hr /><a class="showcase" href="http://www.cssplay.co.uk/menu/click_gallery#nogo">A sliding list click gallery</a>- A demonstration to show a sliding tabs gallery, with a click to open action rather than a hover. Also the facility to add some descriptive text to accompany the large image. <a class="showcase" href="http://www.cssplay.co.uk/menu/click_gallery#nogo"><img alt="" src="http://noupe.com/img/c2-27.gif" /></a>
<hr /><h4 class="title">Drop Caps</h4><a class="showcase" href="http://www.onyx-design.net/weblog2/css/nice-drop-caps-with-css/">Nice Drop caps with CSS</a>- Using the :first-letter pseudo-element, you can easily create nice drop caps with CSS. No extra HTML or Javascript required and IE5+ browser support. <a class="showcase" href="http://www.onyx-design.net/weblog2/css/nice-drop-caps-with-css/"><img alt="" src="http://noupe.com/img/c2-29.gif" /></a>
<ul id="star"><li><b>Live Demo</b><a href="http://www.onyx-design.net/weblog2/wp-content/uploads/2008/03/cssfirstletter.php">View it Here</a></li>
</ul><hr /><a class="showcase" href="http://labs.prdesign-studio.co.uk/category/css/drop-caps/">Drop Caps</a>- This small snippet of CSS utilises the :first-letter pseudo class to apply a particluar style to the first letter of each paragraph, giving the look of an illuminated initial. <a class="showcase" href="http://labs.prdesign-studio.co.uk/category/css/drop-caps/"><img alt="" src="http://noupe.com/img/c2-36.gif" /></a>
<ul id="star"><li><b>Download code</b><a href="http://labs.prdesign-studio.co.uk/category/css/drop-caps/drop-caps.zip">from Here</a></li>
</ul><hr /><h4 class="title">Rounded Corners in a simple New approach</h4><a class="showcase" href="http://cssglobe.com/post/1415/3-simple-steps-in-coding-a-rounded-corners-layout">3 Simple Steps in Coding a Rounded Corners Layout</a>- A simple approach to coding fixed width, rounded corners layout in 3 simple steps. <a class="showcase" href="http://cssglobe.com/articles/3steps/"><img alt="" src="http://noupe.com/img/c2-10.gif" /></a>
<ul id="star"><li><b>Live Demo</b><a href="http://cssglobe.com/articles/3steps/">View it Here</a></li>
<li><b>Download </b> <a href="http://cssglobe.com/articles/3steps/3steps.zip">zip file</a></li>
</ul><hr /><a class="showcase" href="http://www.askthecssguy.com/2008/03/one_pixel_notched_corners_as_u.html">One pixel notched corners</a>- as used by Google Analytics. <a class="showcase" href="http://www.askthecssguy.com/2008/03/one_pixel_notched_corners_as_u.html"><img alt="" src="http://noupe.com/img/c2-17.jpg" /></a>
<ul id="star"><li><b>Live Demo</b><a href="http://www.askthecssguy.com/examples/notchedcorners/index.html">View it Here</a></li>
</ul><hr /><a class="showcase" href="http://dtott.com/thoughts/2008/03/17/auto-cropping-rounded-corners/">Auto-Cropping Rounded Corners</a>- A new solution for rounded corners, what it does is: it crops the content below it, so that anything with a background color or image (headers, paragraphs, even images) automatically get the rounded corner treatment with no extra work. <a class="showcase" href="http://dtott.com/thoughts/2008/03/17/auto-cropping-rounded-corners/"><img alt="" src="http://noupe.com/img/c2-31.gif" /></a>
<ul id="star"><li><b>Download Example</b><a href="http://dtott.com/mint/pepper/orderedlist/downloads/download.php?file=http%3A//dtott.com/examples/croppingcorners/croppingCorners.zip">from Here</a></li>
</ul><hr /><h4 class="title">Blockquotes</h4><a class="showcase" href="http://www.webdesignerwall.com/tutorials/simple-double-quotes/">Simple Double Quotes</a>- This CSS tutorial will show you how to display two double-quote images using one blockquote tag. <a class="showcase" href="http://www.webdesignerwall.com/tutorials/simple-double-quotes/"><img alt="" src="http://noupe.com/img/c2-16.gif" /></a>
<ul id="star"><li><b>Live Demo</b><a href="http://www.webdesignerwall.com/demo/doublequote/doublequote.html">View it Here</a></li>
<li><b>Download </b> <a href="http://www.webdesignerwall.com/demo/doublequote/doublequote.html">zip file</a></li>
</ul><hr /><a class="showcase" href="http://www.mandarindesign.com/troops.html#blockquoteimage">Blockquotes with Image Quotes</a>- Adding an image to the blockquote style.
<hr /><h4 class="title">Worth Checking</h4><a class="showcase" href="http://cssglobe.com/post/1468/pure-css-animated-progress-bar">Pure CSS Animated Progress Bar</a>- A simple demonstration of how you can create animated progress bar using pure css. The trick is very simple. We need 3 elements, one container and 2 nested elements. <a class="showcase" href="http://cssglobe.com/lab/progress_bar/"><img alt="" src="http://noupe.com/img/c2-9.gif" /></a>
<ul id="star"><li><b>Live Demo</b><a href="http://cssglobe.com/lab/progress_bar/">View it Here</a></li>
<li><b>Download </b> <a href="http://cssglobe.com/lab/progress_bar/progress_bar.zip">zip file</a></li>
</ul><hr /><a class="showcase" href="http://www.dynamixlabs.com/2008/01/17/a-quick-look-add-a-loading-icon-to-your-larger-images/">Add a “loading” icon to your larger images</a>- Using CSS to embed a “loading” image, to let visitors know that an image is loading. <a class="showcase" href="http://www.dynamixlabs.com/2008/01/17/a-quick-look-add-a-loading-icon-to-your-larger-images/"><img alt="" src="http://noupe.com/img/c2-35.gif" /></a>
<hr /><a class="showcase" href="http://www.csstextwrap.com/index.php">The CSS Text Wrapper </a>- The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. <a class="showcase" href="http://www.csstextwrap.com/index.php"><img alt="" src="http://noupe.com/img/c2-22.gif" /></a>
<ul id="star"><li><b>Live Demo</b><a href="http://www.csstextwrap.com/examples.php">View it Here</a></li>
</ul><hr /><a class="showcase" href="http://eatyourgreens.org.uk/archives/2007/08/adding_a_magnif.html">Adding a magnifier to images with CSS and JavaScript</a> <a class="showcase" href="http://eatyourgreens.org.uk/archives/2007/08/adding_a_magnif.html"><img alt="" src="http://noupe.com/img/c2-24.gif" /></a>
<hr /><a class="showcase" href="http://grassegger.at/xperimente/charts-daten-semantik-css/">SAC Simple Accessible Charts</a>. <a class="showcase" href="http://grassegger.at/xperimente/charts-daten-semantik-css/"><img alt="" src="http://noupe.com/img/c2-26.gif" /></a>
<hr /><a class="showcase" href="http://bitsamppixels.com/2008/02/11/cross-browser-transparent-columns/">Cross-browser transparent columns</a>- How to create transparent columns that can work in all browsers. By using the opacity property and still having the content opaque. Floats work too – which makes it possible to create multi-column transparent-column layouts. <a class="showcase" href="http://bitsamppixels.com/2008/02/11/cross-browser-transparent-columns/"><img alt="" src="http://noupe.com/img/c2-34.gif" /></a>
<ul id="star"><li><b>Live Demo</b><a href="http://bitsamppixels.com/transparent-columns/">View it Here</a></li>
<li><b>Download </b> <a href="http://bitsamppixels.com/wp-content/uploads/2008/02/transparent-columns.zip">zip file</a></li>
</ul><hr /><a class="showcase" href="http://dbachrach.com/blog/2006/10/09/a-cool-css-effect-dashboard/">A Cool CSS Effect – Dashboard [Updated x2]</a>- A very simple tutorial on how to create an attractive dashboard-like dimmer for your webpage and draw your user’s attention to a certain object. Very cool web effect. <a class="showcase" href="http://dbachrach.com/blog/2006/10/09/a-cool-css-effect-dashboard/"><img alt="" src="http://noupe.com/img/c2-38.jpg" /></a>
<hr /><a class="showcase" href="http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/">Text-Shadow Exposed</a>- Make cool and clever text effects with css text-shadow. <a class="showcase" href="http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/"><img alt="" src="http://noupe.com/img/c2-44.gif" /></a>
<hr /><a class="showcase" href="http://www.willmayo.com/2007/02/10/css-speech-bubbles/">CSS Speech Bubbles</a>- Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 STRICT. <a class="showcase" href="http://www.willmayo.com/2007/02/10/css-speech-bubbles/"><img alt="" src="http://noupe.com/img/c2-41.gif" /></a>
<ul id="star"><li><b>Download </b> <a href="http://www.willmayo.com/journal/projects/07/bubbles/download.zip">zip file</a></li>
</ul>
</ol><br />
<br />
</li><br />
</div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-74079725675096552272009-09-17T13:13:00.000-07:002009-09-17T13:13:44.704-07:00Design a Retro Style Ribbon<div style="text-align: center;"></div><div style="text-align: center;"><a href="http://www.photoshopstar.com/graphics/design-a-retro-style-ribbon/"><img alt="Design a Retro Style Ribbon" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_27.jpg" title="Design a Retro Style Ribbon" /></a></div><div> </div><div style="text-align: center;"></div><div style="text-align: center;">Are you interesting in retro style? I have one interesting tutorial for you how to make a retro style ribbon by yourself.</div><div style="text-align: center;"> </div><div style="text-align: center;"><span id="more-4044"></span></div><div style="text-align: center;"> </div><div style="text-align: center;">Start by making a new document in Photoshop – around <strong>500×500</strong> pixels in size, or, you know, whatever you prefer and fill it with color of <strong>#dac8aa</strong>.</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 01" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_01.jpg" title="Design a Retro Style Ribbon 01" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;">Now, find some appropriate texture to put it on the canvas. You can find a lot of interesting textures or feel free to <a href="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_Paper.jpg">use mine</a>. Open this texture and copy to the canvas. Then desaturate it with <strong>Image > Adjustments > Desaturate</strong>:</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 02" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_02.jpg" title="Design a Retro Style Ribbon 02" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">After that change layer mode to <strong>Overlay</strong> and change opacity to 60%. Merge two of layers in one.</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 03" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_03.jpg" title="Design a Retro Style Ribbon 03" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Ok, now I would like to sharpen of background. Use the <strong>Sharpen Tool</strong> to do this.</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 04" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_04.jpg" title="Design a Retro Style Ribbon 04" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Ok, now we start to create the ribbon. First of all, get out the <strong>Rectangular Marquee Tool</strong> to create selection as on my picture below and fill in with green (<strong>#95b900</strong>) color on the new layer.</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 05" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_05.jpg" title="Design a Retro Style Ribbon 05" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Add two more lines in the same way using yellow (<strong>#e9db03</strong>) and red (<strong>#b94a00</strong>) colors.</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 06" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_06.jpg" title="Design a Retro Style Ribbon 06" /></div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 07" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_07.jpg" title="Design a Retro Style Ribbon 07" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Remove the selection with <strong>Ctrl+D</strong> and duplicate layer using <strong>Ctrl+J</strong>, then use <strong>Ctrl+T</strong> to rotate copied layer as you can see below.</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 08" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_08.jpg" title="Design a Retro Style Ribbon 08" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Also move to the original layer and rotate it to.</div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 09" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_09.jpg" title="Design a Retro Style Ribbon 09" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Now, select this layer with <strong>Select > Load Selection</strong> and drag with black to transparent gradient. It will be the shadow from upper part of the ribbon.</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 10" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_10.jpg" title="Design a Retro Style Ribbon 10" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Remove the selection with <strong>Ctrl+D</strong> and merge two of these layers in one. After that get out the <strong>Polygonal Lasso Tool</strong> and select some part of ribbon in the bottom. Press <strong>Delete</strong> to clear selected part of image and remove the selection again.</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 11" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_11.jpg" title="Design a Retro Style Ribbon 11" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">I think, time to add the text our ribbon, give it some life, right? Get the <strong>Horizontal Type Tool</strong> out and write some text onto your ribbon. In the bottom image I’ve used a_MonumentoTitul for my font, if you don’t have this font just find a good another one. I also used the color of <strong>#efe6e0</strong>. After that rotate the text with <strong>Edit > Free Transform</strong> on the ribbon and duplicate four more times.</div><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_12big.jpg"><img alt="Design a Retro Style Ribbon 12" class="size-full aligncenter" height="313" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_12.jpg" title="Design a Retro Style Ribbon 12" width="500" /></a></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Then merge all text layers and ribbon layer in one and apply the <a href="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_13.jpg">Outer Glow</a> layer style for this layer.</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 13" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_13.jpg" title="Design a Retro Style Ribbon 13" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Now you should have something like this:</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 14" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_14.jpg" title="Design a Retro Style Ribbon 14" /></div><div style="text-align: center;"> </div><div style="text-align: center;">Apply <strong>Filter > Texture > Texturizer</strong> for this layer:</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 15" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_15.jpg" title="Design a Retro Style Ribbon 15" /></div><div style="text-align: center;"> </div><div style="text-align: center;">Now, we have a relief like this:</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 16" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_16.jpg" title="Design a Retro Style Ribbon 16" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Then, move to the next step. To bring our ribbon three-dimensional effect use <strong>Dodge Tool</strong> with moderate settings (Brush: 125 px, Range: Highlights, Exposure: 20%) and do a little bit of dodge-work on it. We should have an image like below:</div><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_17big.jpg"><img alt="Design a Retro Style Ribbon 17" class="size-full aligncenter" height="313" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_17.jpg" title="Design a Retro Style Ribbon 17" width="500" /></a></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Select <strong>Burn Tool</strong> (Brush: 80 px, Range: Shadows, Exposure: 30%) to make some burn-work.</div><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_18big.jpg"><img alt="Design a Retro Style Ribbon 18" class="size-full alignnone" height="313" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_18.jpg" title="Design a Retro Style Ribbon 18" width="500" /></a></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Move to the next step. We need to add the grid to ribbon. Create a new document with size of 3×3 pixels and draw the pattern by using <strong>Pencil Tool</strong> as on picture below.</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 19" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_19.jpg" title="Design a Retro Style Ribbon 19" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Then go to <strong>Edit > Define Pattern</strong> and save it as pattern. After that go back to our main document, use <strong>Select > Load Selection</strong> to select ribbon area, then create a new layer, get out the <strong>Paint Bucket Tool </strong>and fill selected area with new pattern.</div><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_20big.jpg"><img alt="Design a Retro Style Ribbon 20" class="size-full alignnone" height="313" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_20.jpg" title="Design a Retro Style Ribbon 20" width="500" /></a></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Remove selection with <strong>Ctrl+D</strong> and mess a little bit with layer mode and opacity. I tried <strong>Overlay</strong> and 40%.</div><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_21big.jpg"><img alt="Design a Retro Style Ribbon 21" class="size-full alignnone" height="313" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_21.jpg" title="Design a Retro Style Ribbon 21" width="500" /></a></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Now, it will be better to add a shadow to the places where the arrows indicates.</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 22" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_22.jpg" title="Design a Retro Style Ribbon 22" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Create a new layer under the layer with ribbon. Get out the <strong>Polygonal Lasso Tool</strong> to create selection as on my picture below and fill it with black to transparent gradient.</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 23" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_23.jpg" title="Design a Retro Style Ribbon 23" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Remove selection using <strong>Select > Deselect</strong> and blur the shadow a little bit with the <strong>Blur Tool</strong>.</div><div style="text-align: center;"> </div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 24" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_24.jpg" title="Design a Retro Style Ribbon 24" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Add more shadow to other two places in he same way.</div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;"><img alt="Design a Retro Style Ribbon 25" class="aligncenter size-full" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_25.jpg" title="Design a Retro Style Ribbon 25" /></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">Looking quite good now. To finish off this tutorial, I think, we need to add some shadow to the background. Go to the background layer, select the <strong>Burn Tool</strong> (Brush: 300 px, Range: Shadows, Exposure: 30%) and make darker some parts of the background.</div><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_26big.jpg"><img alt="Design a Retro Style Ribbon 26" class="size-full alignnone" height="313" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_26.jpg" title="Design a Retro Style Ribbon 26" width="500" /></a></div><div style="text-align: center;"> </div><div style="text-align: center;"></div><div style="text-align: center;">That is it for now! Our tutorial is done!</div><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_27big.jpg"><img alt="Design a Retro Style Ribbon 27" class="size-full alignnone" height="313" src="http://www.photoshopstar.com/wp-content/uploads/2009/09/retro_style_ribbon_27.jpg" title="Design a Retro Style Ribbon 27" width="500" /></a></div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com1tag:blogger.com,1999:blog-4221630538623131060.post-66998094302093087442009-09-17T08:32:00.000-07:002009-09-17T08:32:18.519-07:00JavaScript: The Definitive Guide<div class="image" style="text-align: center;"></div><div class="image" style="text-align: center;"></div><div class="image" style="text-align: center;"></div><div class="image" style="text-align: center;"></div><div class="image" style="text-align: center;"></div><div class="image" style="text-align: center;"></div><div class="image" style="text-align: center;"><div class="center"><b> </b></div><div class="center"><img id="external_img_939555" src="http://pixhost.ws/avaxhome/23/56/000e5623_medium.jpeg" /><b> <br />
</b></div><div class="center"><b> </b></div><div class="center"><b>JavaScript: The Definitive Guide By David Flanagan</b><br />
Publisher: O’Reilly 1998-07-15 | 784 Pages | ISBN: 1565923928 | PDF (OCR from html) | 1.9 MB</div>JavaScript is a powerful scripting language that can be embedded directly in HTML; it allows you to create dynamic, interactive Web-based applications that run completely within a Web browser.JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and its client-side framework, complete with sophisticated examples that show you how to handle common tasks. The book also contains a definitive, in-depth reference section that covers every core and client-side JavaScript function, object, method, property, constructor, and event handler. This third edition of JavaScript: The Definitive Guide describes the latest version of the language, JavaScript 1.2, as supported by Netscape Navigator 4 and Internet Explorer 4. The book also covers JavaScript 1.1, which is the first industry-standard version known as ECMAScript.<br />
Since the earliest days of Internet scripting, Web developers have considered JavaScript: The Definitive Guide an essential resource. David Flanagan’s approach, which combines tutorials and examples with easy-to-use syntax guides and object references, suits the typical programmer’s requirements nicely. The brand-new fourth edition of Flanagan’s “Rhino Book” includes coverage of JavaScript 1.5, JScript 5.5, ECMAScript 3, and the Document Object Model (DOM) Level 2 standard from the World Wide Web Consortium (W3C). Interestingly, the author has shifted away from specifying–as he did in earlier editions–what browsers support each bit of the language. Rather than say Netscape 3.0 supports the Image object while Internet Explorer 3.0 does not, he specifies that JavaScript 1.1 and JScript 3.0 support Image. More usefully, he specifies the contents of independent standards like ECMAScript, which encourages scripters to write applications for these standards and browser vendors to support them. As Flanagan says, JavaScript and its related subjects are very complex in their pure forms. It’s impossible to keep track of the differences among half a dozen vendors’ generally similar implementations. Nonetheless, a lot of examples make reference to specific browsers’ capabilities.<br />
Though he does not cover server-side APIs, Flanagan has chosen to separate coverage of core JavaScript (all the keywords, general syntax, and utility objects like Array) from coverage of client-side JavaScript (which includes objects, like History and Event, that have to do with Web browsers and users’ interactions with them. This approach makes this book useful to people using JavaScript for applications other than Web pages. By the way, the other classic JavaScript text–Danny Goodman’s JavaScript Bible–isn’t as current as this book, but it’s still a fantastic (and perhaps somewhat more novice-friendly) guide to the JavaScript language and its capabilities. –David Wall<br />
Topics covered: The JavaScript language (version 1.0 through version 1.5) and its relatives, JScript and ECMAScript, as well as the W3C DOM standards they’re often used to manipulate. Tutorial sections show how to program in JavaScript, while reference sections summarize syntax and options while providing copious code examples.</div><div class="image" style="text-align: center;"><br />
</div><div class="image" style="text-align: center;"><br />
</div><div class="image" style="color: orange; text-align: center;"><span style="font-size: large;"><b>Download here </b></span></div><div class="image" style="text-align: center;"><span style="font-size: large;"><b><br />
</b></span></div><div class="image" style="text-align: center;"><a href="http://www.blogger.com/while%20providing%20copious%20code%20examples.%20%20http://uploading.com/files/T7N69ESB/JavaScriptTheDefinitiveGuide.rar.html"><span style="font-size: large;"><b>click here </b></span></a></div><div class="image" style="text-align: center;"><br />
</div><div class="image" style="text-align: center;">or </div><div class="image" style="text-align: center;"><br />
</div><div class="image" style="text-align: center;"><a href="http://rapidshare.com/files/258917797/JavaScriptTheDefinitiveGuide.rar"><span style="font-size: large;"><b>mirro here </b></span></a><br />
</div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-90161900351621126052009-09-17T05:11:00.000-07:002009-09-17T05:12:31.957-07:00Search Engine Optimization 101<div style="text-align: center;"><h3>What is SEO?</h3><h3> </h3><h3><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/seo.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/seo.jpg" style="display: inline;" /> </h3><h3> <br />
</h3><h3 style="font-weight: normal; text-align: left;"><strong>S</strong>earch <strong>E</strong>ngine <strong>O</strong>ptimization is the process of increasing the number of visitors by achieving a high position within search results when relevant keywords are searched for. It is common knowledge that people rarely look passed the second or third page of the search results. Optimally you'll want a first page position or even the first result in the first page. However, to accomplish this, you'll need to optimize and code accordingly </h3></div><h3 style="color: orange;">Choose the Right Keywords</h3><h3 style="color: orange;"> </h3><div class="tutorial_image" style="text-align: center;"></div><div class="tutorial_image" style="text-align: center;"></div><div class="tutorial_image" style="text-align: center;"></div><div class="tutorial_image" style="text-align: center;"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/kw.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/kw.jpg" style="display: inline;" /></div><h3 style="color: orange;"> </h3>Choosing the right keywords can be painless or extremely tricky depending upon the scenario. You'd want to avoid the generic ones since it is going to be extremely difficult to optimize for them. Try to pick keywords that are just as specific as they need to be. For example if you are a freelancer based in Melbourne, your optimal keywords would be <em>freelancer Melbourne</em> or <em>web development services Melbourne</em>. Going for the generic <em>freelancer</em> or <em>web development</em> keywords isn't going to do you any good.<br />
Research your keywords. Know which ones are probably going to be searched for most and go from there.<br />
<br />
<h3>Focus on the Content</h3><h3> </h3><div class="tutorial_image" style="text-align: center;"></div><div class="tutorial_image" style="text-align: center;"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/content.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/content.jpg" style="display: inline;" /></div><h3> </h3>Content always comes first. It doesn't matter if you perform some dark voodoo to get your site the top place in the results. You'll still need solid content to back that up since the visitors are going to be leaving pretty quickly if they don't find what they are looking for.<br />
Having good, relevant content is the most important aspect of SEO. Your content needs to be suitably useful for the people who you'd want to find your site. You need the content to make sense to the reader. The content needs to appeal to people and make them come back for more. <br />
Having original content is very important. Don't expect to just copy-paste some text from another site, throw in some keywords and call it a day. You need lots and lots of original content with the keywords in the content itself. If people searching for jQuery come to your page, they expect something related to jQuery to be found on your page. Throw in relevant keywords within the content of the page. But don't just spam them sporadically like with tweeting. Your keywords need to be in the appropriate position and of appropriate density. Throw too much keywords around in the content and you are going to be flagged for spam.<br />
Just as important as having original content is having regularly updated content. Fresh content will bring in people and bots alike which in turn will let you get your site indexed with much more frequency which will in turn return fresher results to the search results. But don't update just for the sake of updating. Bots have little incentive to come back if all the updates you perform are only marginally incremental. Just try to have something fresh for the visitors and you should be alright.<br />
<h3 style="color: orange;">Get a Proper Domain Name</h3><h3> </h3><h3></h3><h3><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/domain.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/domain.jpg" style="display: inline;" /></h3><h3> </h3><br />
This is a hard to obtain part. If at all possible, get a domain name with the keywords in the domain name itself. www.webdevelopmentaustralia.com is going to have a lot more weight with search engines than www.somecompany.com. Obtaining a domain with the proper keywords should be difficult though. <br />
Domains with the keyword as part of it do look ugly but keep in mind that keywords in the domain name carry very great weight.<br />
<br />
<h3 style="color: orange;">Create Pretty URLs</h3><h3 style="color: orange; text-align: center;"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/url.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/url.jpg" style="display: inline;" /> </h3><h3 style="color: orange; text-align: center;"><br />
</h3>Using a URL scheme where parameters are passed as a query string through the URL make it difficult for search engine spiders to look through your site. More importantly, when you are passing the session ID as part of the URL you are essentially creating a separate URLs for each session with almost the same content. This is probably going to get you penalized for duplicate content. We'll talk about that later on. <br />
Human readable, bot parsable URLs are generally preferred over traditional parameter filled URLs. <em>www.somecompany.com/games/2009/callofduty6</em> is generally preferred to <em>www.somecompany.com/index.php?cat=game&year=2009&name=callofduty6</em>. When crafting pretty URLs try to avoid days, months and years.<em> www.somecompany.com/blog/seobasics</em> is preferred to <em>www.somecompany.com/blog/2009/09/09/seobasics</em><br />
<br />
<h3 style="color: orange;">Dish out Relevant Page Titles</h3><h3 style="color: orange; text-align: center;"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/title.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/title.jpg" style="display: inline;" /> <br />
</h3><br />
<br />
The text within the <em>title</em> tags: the text that is displayed on your browser's title bar is amongst the most important elements of a page. Actually I'd venture so far as to say it's the most important part of your page after the actual content itself. <br />
Make sure the title is unique for each page and contains relevant keywords. With regards to the title's structure itself <em>Page Title -> Site Name</em> is vastly preferred to <em>Site Name -> Page Title</em>. There are no reasons for you to feel the title needs to be as terse as possible but on the other hand don't try to make it too long. 60 characters is the accepted limit.<br />
Also whilst using keywords in your title text, please don't try to spin it too much. If the search bot sees too many keywords, you are going to be flagged for spam. Remember, the title text is what appears on the search engine result page. You need to convey as much information as possible without sounding too spammy.<br />
<br />
<h3 style="color: orange;">Tweak the Meta Elements</h3><h3 style="color: orange;"> </h3><h3 style="color: orange; text-align: center;"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/meta.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/meta.jpg" style="display: inline;" /> <br />
</h3><br />
The meta elements used to matter eons ago when search engine bots were less sophisticated and relied on the meta description and keyword attributes to help them. When this was taken advantage of by spammers, search bots started giving less importance to meta elements.<br />
Having said that, it doesn't hurt to include the meta description element. This is the text used in the description of your site. Try to limit yourselves to 200 characters, keep it simple, grammatically correct and include relevant keywords. Keep the descriptions unique for each page.<br />
<h3 style="color: orange;">Optimize the Page Structure</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/page.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/page.jpg" style="display: inline;" /><br />
</div>Layouts vary. Positions of your sidebar or navigation vary too. But with respect to the core markup itself, it's best to put your main content as close to the body tag as possible. If your other elements have to be placed before the content, use CSS to position it before the content instead of moving the markup itself before the content. <br />
Footers are wonderful places to link to other content on your site. Don't just ignore your footer. Place links to recent posts or popular posts in the footer. Having said that, try to not make it look like a link farm. <br />
<h3 style="color: orange;">Use Appropriate Tags</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/tag.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/tag.jpg" style="display: inline;" /><br />
</div>Use the appropriate tags when developing a site. The heading tags are widely under used. People are instead using generic div tags to encapsulate important information. This is wrong. Strictly looking at the markup alone, the heading tags lets us see the informational hierarchy of the page and this applies for the bots too. Use<em> h1</em> for the title of the post, <em>h2</em> for each section's heading and so on. <br />
If you are including some code, use the pre tag. If you think some information is important feel free to make it bold. Bots tend to place value on bolded text just like we immediately see what the bolded text. As always, use it sparingly. You don't want to be flagged for spam.<br />
<h3 style="color: orange;">Craft Proper Links</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/proper.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/proper.jpg" style="display: inline;" /><br />
</div>When creating links, try to stay away from the generic read me text. It's not very SEO friendly. Try to include a part of the child link's title to the anchor text itself. This is not as hard as it sounds. For example, instead of using <em>read more</em>, use<em> read more about seo</em>. It doesn't take that much time to change but yields a lot of SEO benefits.<br />
While linking to page on your site, try to make the anchor text as focused as possible. <em>Portfolio</em> is a better candidate than <em>What I've Done</em>. The latter sounds more catchy but the former represents better SEO. <br />
<h3>Link Internally</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/linkstructure.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/linkstructure.jpg" style="display: inline;" /><br />
Courtesy of Opera</div>Don't be scared to interlink the pages in your site. If the number of pages is small, putting it all up on the navigation bar is the way to go. If yours is a big site with a ton of pages, just put all the main category pages on the navigation bar. One way or the other, make sure your pages can be found through links on your site. <br />
Thinking outside the box, you could just as easily include a popular post section on each page. This way you get the interlinking SEO needs and at the same time your visitors can get to see some of the popular posts on your site. It's a win-win situation. <br />
<h3 style="color: orange;">Make your site Accessible</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/accessible.png" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/accessible.png" style="display: inline;" /><br />
</div>Remember, search engines are meant to bring people to your site. Which means your site is primarily for human parsing. Design with them in mind. <br />
Include alt attributes for all images on your site. This is not only good practice but also a necessity if you want valid markup. If it's appropriate include relevant keywords in the alt text. Remember, search bots can't really look at a picture and decide whether it's relevant or not. Appropriate keywords lets it make that decision. As always don't go overboard on the text. Keep it simple and to the point.<br />
Please don't hide your content behind obnoxious JavaScript or Flash. Spiders can't go through those to get to your content. And without content, the entire point of your site fails. Miserably. Avoid this unless you absolutely have to.<br />
<h3>Avoid Duplicate Content</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/duplicate.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/duplicate.jpg" style="display: inline;" /><br />
</div>Google is very strict about duplicate content and severely penalizes sites which do so. This is regardless of whether the content is on different domains. If the same, exact content appears on different pages, the page last indexed is going to be penalized.<br />
This is mostly common sense: don't have the same content on each page. The footer text can be repeated with no penalties but not if your footer text is big enough to qualify as an article.<br />
Also, your site may dish out alternative print capable pages which might be seen by the search engine as duplicate content. In this case, use robotx.txt to disallow indexing on these pages.<br />
<h3 style="color: orange;">Use robots.txt</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/robots.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/robots.jpg" style="display: inline;" /><br />
</div>Create a robots.txt file to allow/disallow spiders from certain parts of your site. You just create a file named <em>robots.txt</em> and place it at the root of your web site and all co-operating spiders will respect the rules you've mentioned in the file. <br />
You can do everything from disallowing all bots from accessing a specific folder to disallowing bots from a specific search engine. Read up more about it <a href="http://www.robotstxt.org/">here</a>. <br />
<h3 style="color: orange;">Create a Site Map</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/sitemap.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/sitemap.jpg" style="display: inline;" /><br />
Courtesy of Opera</div>A site map lets the search engine know about the existence of pages it might not have discovered through spidering through your site normally. Ideally, you should create a normal HTML site map for your users and an XML site map for the search bots. If at all possible, link both.<br />
<h3 style="color: orange;">Avoid Frames</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/frames.gif" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/frames.gif" style="display: inline;" /><br />
</div>I can't say this enough: frames are bad. Both from a web developer perspective and a seo perspective. Content inside frames are virtually invisible to search engines. <br />
More disturbingly, even if one frame of the page gets indexed and is returned as result the result would take you to just the frame without all of its supporting frames inside the parent document. Frames cause undue confusion to people and virtually stop spiders from crawling through your site. Unless you absolutely have to, don't use frames. <br />
<h3 style="color: orange;">Reduce Code Bloat</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/bloat.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/bloat.jpg" style="display: inline;" /><br />
</div>And by this I mean 2 things: <br />
Move your JavaScript and CSS to their own separate files. Spiders have no business with them and it is best practice to remove them from the core markup. Create separate files and include them later.<br />
No presentational markup. This is not only SEO friendly but also best practice. Your HTML markup is no place to define how the content should look and similarly the bots have no reason to know how your site is programmed to look. Format the document to your heart's content in your CSS and leave the markup pristine and clean.<br />
<h3 style="color: orange;">Avoid using a Flash Only Navigation</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/flash.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/flash.jpg" style="display: inline;" /><br />
</div>This is common sense but a lot of designers and developers tend to overlook this. Bots can't crawl through flash based content and if the only navigation is flash based, the bot has nothing to crawl through. <br />
If your entire site is flash based, it makes sense to create a text only version for spiders and bots to crawl through and find your content. It'll take extra time to create that but without a text version to fall back on your site will be virtually invisible to search engines.<br />
<h3 style="color: orange;">Use a Common Domain Naming Scheme</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/naming.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/naming.jpg" style="display: inline;" /><br />
</div>Decide on a common naming scheme and stick to it. Personally I prefer www.somename.com but others may like http://somename.com. Decide on a format and stick to it. Use URLs of this format while linking other pages on your site.<br />
Also decide on a whether trailing slashes are required or not. Search engines considers www.somename.com/seo and www.somename.com/seo/ to be different URLs and there is a possibility you are going to be penalized for duplicate content. To get around this, modify your .htaccess file to redirect to the format you like with a 301 redirect. This tells the bot that the page has been moved permanently.<br />
<h3 style="color: orange;">Submit your Site</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/submit.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/submit.jpg" style="display: inline;" /><br />
</div>If your site is newly hatched and hasn't been indexed yet, it's a good idea to get the ball rolling by submitting it to search engines and inspiration galleries. This not only let the search engines get to your site early but also brings in a ton of new traffic and back links. <br />
Do not resort to link submitters unless you absolutely trust it. A lot of these submit your links to a number of link farms, an activity which might get you penalized. Just stick to the big search engines and galleries.<br />
<h3 style="color: orange;">Check for Broken Links</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/broken.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/broken.jpg" style="display: inline;" /><br />
</div>Nothing stops spiders dead in their tracks quicker than broken links specially in the home page. Check thoroughly for broken links to ensure the bots have something to start crawling through your site.<br />
Create a proper 404 page in case the search engine leads the visitor to an old URL. Include appropriate links in the error page. <br />
<h3 style="color: orange;">Get Linked by Peer Sites</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/link.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/link.jpg" style="display: inline;" /><br />
</div>This is the massive step that is going to take you a lot of time to get right. Ideally, you'd want a lot of sites linking to your site and your posts . Each link to your site is considered as a vote to your site by the linking site. Getting inbound links from sites catering to the same user base is extremely vital since the current way of ranking relies on the fact that if a lot of sites link back to you then the site must contain relevant information.<br />
Unfortunately, this is a long, arduous and never ending task and only one thing can assure you this: good content. Provide good content and sites will automatically start linking to your content. The more sites link to you, the higher your rank is going to be. <br />
Do not resort to illegal means to get back links. This includes link farms and so. Doing anything like this is going to get you kicked out pretty quickly. Accepted means of getting back links includes reciprocal linking where a site places a link to another site in exchange for that site linking back to the original site. <br />
The way I prefer is to write for Net Tuts. Each article I write nets me a back link and Net Tuts being as large as it is, these contribute heavily to my rankings. Plus it brings in a ton of interested new visitors. :)<br />
<h3 style="color: orange;">Use Appropriate Tools</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/tools.jpg" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/tools.jpg" style="display: inline;" /><br />
</div>Tools like Google Analytics helps you analyze and track a number of data including from where your traffic comes from, which pages visitors look at, how much time they spend at each page, how many pages and so on. Use this data to fine tune your site. <br />
Don't forget Google WebMaster tools. It lets you look at the search queries which bring visitors to your page, whether the spider encountered any error while trying to crawl through your site, which sites link to you and more. Invaluable when you are trying to optimize.<br />
<h3 style="color: orange;">Avoid Black Hat Techniques</h3><div class="tutorial_image"><img border="0" original="http://nettuts.s3.amazonaws.com/432_seoTips/images/blackhat.JPG" src="http://nettuts.s3.amazonaws.com/432_seoTips/images/blackhat.JPG" style="display: inline;" /></div>I can't say this enough: don't try to cheat. Sooner or later, most probably sooner than you think, you are going to be caught and kicked out with no chance of getting listed again. This includes legit sounding techniques like link farms or cross linking to keyword stuffing and keyword dilution. <br />
Just don't do it. <br />
<h3 style="color: orange;">Wait for the Results</h3>At this point, you've hopefully done everything right. The only thing you need to do is sit back, generate some quality content and wait for the rankings to increase. Be patient, this doesn't happen over night but it definitely happens once you have the basics nailed down.web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com2tag:blogger.com,1999:blog-4221630538623131060.post-54852708685858159852009-09-16T07:57:00.000-07:002009-09-16T07:57:53.251-07:00ASP.NET MVC in Action<div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"><div><strong> </strong></div><div><img alt="" id="external_img_1000027" src="http://pixhost.ws/avaxhome/5b/42/000f425b_medium.jpeg" /><strong> <br />
</strong></div><div><strong> </strong></div><div style="text-align: left;"><strong> </strong><br />
<strong>Jeffrey Palermo,Ben Scheirman,Jimmy Bogard “ASP.NET MVC in Action” </strong><br />
Manning Publications | 2009 | ISBN: 1933988622 | 275 pages | PDF | 12,9 MB</div><div> </div><div style="text-align: left;">ASP.NET MVC in Action<br />
The Model-View-Controller pattern is widely accepted as a best practice for UI development. <span id="more-13506"></span>With Microsoft’s first release of an MVC framework for ASP.NET development, web development on the .NET framework is both simplified and more flexible. ASP.NET MVC in Action is an advanced guide to developing long-lived applications with the ASP.NET MVC framework. It moves past simple introductions and dives deep into architectural techniques that lead to maintainable web applications with the MVC pattern.</div><div style="text-align: left;"> </div><div style="text-align: left;">ASP.NET MVC in Action lays a flexible foundation based on Domain-driven design, the S.O.L.I.D. principles, TDD, and interface-based development. With best-practices woven into every chapter, the authors present the new ASP.NET MVC framework in a manner that leads to more maintainable .NET web applications.</div><div style="text-align: left;"> </div><div style="text-align: left;">This book assumes that readers are already experienced with ASP.NET development and C#. Numerous popular open-source libraries, such as MvcContrib, are referenced throughout, and the book comes with the full source to CodeCampServer, a user group conference organizing application.</div><div style="text-align: left;"> </div><div style="text-align: left;">About the Author<br />
All three authors are popular bloggers and Alt.Net developers. From Houston and Austin, TX, Jeffrey, Ben, and Jimmy are frequent user group and conference speakers. They are also committers to the open-source projects MvcContrib and CodeCampServer.</div><div style="text-align: left;"> </div><div style="text-align: left;">Jeffrey Palermo is the CTO of Headspring Systems in Austin, Texas. Jeffrey is an MCSD.NET, Microsoft Solutions Architect MVP, Agile Coach, Austin .Net User Group leader, and an INETA speaker. He is an ASP.NET expert and a co-founder of the MvcContrib project. His website, PartyWithPalermo.com was the first ASP.NET MVC application in production.</div><div style="text-align: left;"> </div><div style="text-align: left;">Ben Scheirman is a Principal Consultant with Sogeti in Houston, Texas. He studied computer science at the University of Houston and is a Certified ScrumMaster and Microsoft Certified Solution Developer. He enjoys speaking and blogging about Agile development topics in .NET.</div><div style="text-align: left;"> </div><div style="text-align: left;">Jimmy Bogard is a senior consultant with Headspring Systems in Austin, Texas. His focus is using .NET technologies together with Agile methodologies.</div><div style="text-align: left;"></div><div style="text-align: center;"><span style="font-size: large;"><b>Download </b></span></div><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://rapidshare.com/files/276592324/Mann.ASP.NE.MV.in.Action.009.rar"><b style="background-color: #f3f3f3; color: orange;">click here </b></a></div></div><div style="text-align: center;"><br />
</div><div style="text-align: center;">or</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><a href="http://hotfile.com/dl/11685173/1acfceb/Mann.ASP.NE.MV.in.Action.009.rar.html"><span style="font-size: large;"><b style="color: orange;">mirro</b></span></a> </div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;">or </div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><a href="http://hotfile.com/dl/11462608/c7ef74a/ManninASP.rar.html"><span style="font-size: large;"><b style="color: orange;">mirro</b></span></a> <br />
</div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-83456737722480864322009-09-15T06:09:00.000-07:002009-09-15T06:09:58.296-07:00The Essential Guide to Flash CS4 with ActionScript<div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"><img alt="http://www.pixhost.org/thumbs/183/258904_000c92c7_medium.jpeg" src="http://www.pixhost.org/thumbs/183/258904_000c92c7_medium.jpeg" /></div><strong>The Essential Guide to Flash CS4 with ActionScript | 32.2 MB</strong><br />
For any professional designer or developer working in the world of web technologies or multimedia, Flash is the must-have application, and knowing how to use it effectively is vital. Add in ActionScript 3.0, and Flash becomes an even more powerful tool for the development of high-performance web applications.<span id="more-14149"></span><br />
The Essential Guide to Flash CS4 with ActionScript introduces and explores the possibilities available to you through using Flash CS4. You will learn the aspects basics of Flash’s working environment and, using a step-by-step approach, work through the features of Flash and ActionScript needed to quickly achieve results. From navigating the interface to using graphic tools to write scripts and troubleshoot, you’ll master all of the of deploying highly interactive applications with rich audio, video, and animation.<br />
Written for the beginning-to-intermediate Flash user, this book uses complete examples that highlight best practices that you can apply to your daily work as a developer or designer in today’s rich media world.<br />
Learn to create and manage assets in Flash using the graphics tools and the library.<br />
Acquire a comprehensive understanding of animation using the new Motion Editor and inverse kinematics tools.<br />
Discover the dynamic world of ActionScript development including classes, events, and XML.<br />
Learn to use and customize Flash’s UI components.<br />
Become familiar with audio and video assets including preparation and integration.<br />
Debug, publish, and deploy Flash applications for the Web with Flash Player and the desktop using the Adobe Integrated Runtime (AIR).<br />
<div style="text-align: center;"><a href="http://hotfile.com/dl/12326616/85592f7/FlaCs4.rar_.html"><b><span style="font-size: large;">Download</span></b></a></div><div style="text-align: center;"></div><div style="text-align: center;"><b><span style="font-size: large;"><br />
</span></b></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-74634195856142611572009-09-15T05:56:00.000-07:002009-09-16T07:57:53.252-07:00Apress Beginning ASP.NET E-Commerce in C#: From Novice to Professional<div style="text-align: center;"><br />
<br />
<br />
<img alt="http://pic.leech.it/i/1dfce/1d637f179a4.gif" src="http://pic.leech.it/i/1dfce/1d637f179a4.gif" /></div><strong>Apress Beginning ASP.NET E-Commerce in C#: From Novice to Professional | 16.12 MB</strong><br />
With the latest incarnations of ASP.NET 3.5 and SQL Server 2008, programming dynamic data–driven web sites with Microsoft technologies has become easier and much more efficient than ever before. Fewer mouse clicks and fewer lines of code can now enable more powerful features and the tools you need—Visual Web Developer and SQL Server 2008 Express Edition—are free. In Beginning ASP.NET E-Commerce in C#: From Novice to Professional, you’ll learn how to best use the free development tools offered by Microsoft to build an online product catalog. You will gain an intimate understanding of every piece of code you write. This understanding will enable you to build your own powerful and flexible web sites efficiently and rapidly with ASP.NET 3.5.<span id="more-14153"></span><br />
Build a complete site, including a shopping cart, checkout, product searching, product recommendations, control panel, customer accounts, order processing, and much, much more.<br />
Explore new challenges and theoretical concepts, which are carefully analyzed and explained throughout the book, with each feature you add to the web site.<br />
Learn to handle payments by integrating PayPal and DataCash into your site.<br />
What you’ll learn<br />
Use Microsoft’s Express products to build an online product catalog.<br />
Add payment processing with PayPal and DataCash.<br />
Expand your site’s product listing through web services.<br />
Implement an order pipeline.<br />
Take advantage of SEO techniques to publicize your site.<br />
<br />
<br />
<div style="text-align: center;"><a href="http://hotfile.com/dl/12326637/6ddc25b/Apress.Beginning.ASP.NET.E.Commerce.In.C.Sharp.From.Novice.To.Professional.Mar.2009.eBook-ELOHiM-.ra.html"><span style="font-size: large;"><b>Download here </b></span></a></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"><span style="font-size: large;">or </span></div><div style="text-align: center;"></div><div style="text-align: center;"><a href="http://rapidshare.com/files/279394216/Apress.Beginning.ASP.NET.E.Commerce.In.C.Sharp.From.Novice.To.Professional.Mar.2009.eBook-ELOHiM-.rar"><span style="font-size: large;">mirro click here </span></a></div><div style="text-align: center;"> </div><div style="text-align: center;"> </div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-39740270120297881442009-09-15T05:51:00.000-07:002009-09-15T05:51:06.015-07:00Learning PHP, MySQL, and JavaScript: A Step-by-Step Guide to Creating Dynamic Websites<div style="text-align: center;"><img alt="Learning PHP, MySQL, and JavaScript: A Step-by-Step Guide to Creating Dynamic Websites " height="240" src="http://ecx.images-amazon.com/images/I/51kADeFffSL._SL500_AA240_.jpg" title="Learning PHP, MySQL, and JavaScript: A Step-by-Step Guide to Creating Dynamic Websites " width="240" />L</div><div style="text-align: center;"></div>Learning PHP, MySQL, and JavaScript: A Step-by-Step Guide to Creating Dynamic Websites<br />
<div style="text-align: center;"><strong>Product Description</strong><br />
</div><div style="text-align: left;"> If you know HTML, this guide will have you building interactive websites quickly. You’ll learn how to create responsive, data-driven websites with PHP, MySQL, and JavaScript, regardless of whether you already know how to program. Discover how the powerful combination of PHP and MySQL provides an easy way to build modern websites complete with dynamic data and user interaction. You’ll also learn how to add JavaScript to create rich Internet applications and websites.<span id="more-11525"></span> </div><em>Learning PHP, MySQL, and JavaScript</em> explains each technology separately, shows you how to combine them, and introduces valuable web programming concepts, including objects, XHTML, cookies, and session management. You’ll practice what you’ve learned with review questions in each chapter, and find a sample social networking platform built with the elements introduced in this book.<br />
This book will help you:<br />
<ul><li>Understand PHP essentials and the basics of object-oriented programming</li>
<li>Master MySQL, from database structure to complex queries</li>
<li>Create web pages with PHP and MySQL by integrating forms and other HTML features</li>
<li>Learn about JavaScript, from functions and event handling to accessing the Document Object Model</li>
<li>Use libraries and packages, including the Smarty web template system, PEAR program repository, and the Yahoo! User Interface Library</li>
<li>Make Ajax calls and turn your website into a highly dynamic environment</li>
<li>Upload and manipulate files and images, validate user input, and secure your applications</li>
</ul><div style="text-align: center;">, </div><div style="text-align: center;"></div><div style="text-align: center;"><a href="http://rapidshare.com/files/259842021/Lear_php_Mysq_Javascri.rar"><span style="font-size: large;"><b>Download <br />
</b></span></a></div><div style="text-align: center;"></div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-32780625646318395072009-09-15T05:46:00.000-07:002009-09-15T05:47:14.425-07:00Java 2 Enterprise Edition 1.4 Bible<div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"><br />
<img alt="Java 2 Enterprise Edition 1.4 Bible" id="external_img_1000517" src="http://pixhost.ws/avaxhome/45/44/000f4445_medium.jpeg" /><strong> <br />
</strong><br />
<br />
<br />
<strong>James McGovern, Rahim Adatia, Yakov Fain, Jason Gordon, Ethan Henry, Walter Hurst, Ashish Jain, Mark Little, Vaidyanathan Nagarajan, Harshad Oak, Lee Anne Phillips, «Java 2 Enterprise Edition 1.4 Bible»</strong><br />
John Wiley & Sons | ISBN: 0764539663 | 2003 | PDF | 1008 pages | 12.88 MB<div> </div><div style="text-align: left;">That Java 2 Enterprise Edition 1.4 makes your enterprise services more cost-effective, more adaptable, more versatile, and more responsive to the <span id="more-13425"></span>needs of your customers. To get you up to speed on J2EE 1.4, a crack team of experts has packed this comprehensive volume with clear instructions and vendor-neutral, real-world solutions you can use in your enterprise. Everything you need to turn on J2EE power is right here.</div><div style="text-align: left;"></div><div style="text-align: left;"></div><div style="text-align: center;"><a href="http://rapidshare.com/files/275201726/java-2-enterprise-edition-1-4-j2ee-1-4-bible.9780764539664.22043.pdf"><b> Download here </b></a></div><br />
</div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com1tag:blogger.com,1999:blog-4221630538623131060.post-32917303631278831402009-09-14T18:48:00.000-07:002009-09-14T18:48:19.751-07:00Understanding AJAX: Using JavaScript to Create Rich Internet Application<div style="text-align: center;"><img alt="" border="0" onload="NcodeImageResizer.createOn(this);" src="http://img72.imageshack.us/img72/3068/013221635301sclzzzzzzzhs0.jpg" /></div><br />
<br />
AJAX: fast mastery for experienced Web developers!<br />
Already an experienced Web developer? Apply your skills in today�s fastest-growing area of Web development: AJAX!<br />
Building on what you already know, this fast-paced guide will show you exactly how to create rich, usable Internet applications. Joshua Eichorn teaches through sophisticated code examples, including extensive server-side PHP code.<br />
You won�t just learn how to code AJAX applications: Eichorn covers the entire development lifecycle, from use cases and design through debugging. He also presents detailed application case studies, including a start-to-finish update of a non-AJAX application that addresses everything from feature improvements to changing usage patterns. Coverage includes:<br />
� How AJAX changes the conventional Web development cycle<br />
� Problems created by the AJAX paradigm — and how to avoid them<br />
� Adding AJAX to existing Web applications: key considerations<br />
� Using core AJAX technologies, including the XMLHttpRequest object<br />
� Consuming data returned to an AJAX application using both XSLT and JSON<br />
� Building more usable AJAX applications: guidelines and downloadable resources<br />
� Use cases: solving real-world problems in the AJAX environment<br />
� Libraries and toolkits for simplifying AJAX development, including Sarissa, scriptaculous, and HTML_AJAX<br />
� A complete guide to AJAX debugging<br />
� Supporting browsers without XMLHttpRequest by using IFrames or cookies<br />
� JSON data encoding debugging guide, which covers tools for Firefox and Internet Explorer<br />
� A list of libraries, which includes PHP, .NET, Java, and other libraries that can be used with any server language<br />
Download :<br />
http://rapidshare.com/files/1117214/Prentice.Hall.PTR.Understanding.AJAX.Using.JavaScript.to.Create.Rich.Internet.Applications.Aug.2006.eBook-BBL.rar<br />
<a href="http://rapidshare.com/files/195342948/readme.zip">http://rapidshare.com/files/195342948/readme.zip</a><br />
Password default : <a href="http://www.shytex.com/">shytex.com</a>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-20181600639853004722009-09-14T18:45:00.000-07:002009-09-14T18:45:55.148-07:00PHP Programming Solutions 1st Edition (With Source Code)<div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"><div><a href="http://pixhost.ws/pictures/991424" target="_blank"><img alt="" border="1" src="http://pixhost.ws/avaxhome/c0/20/000f20c0_medium.jpeg" /></a></div><br />
<br />
<br />
<strong>PHP Programming Solutions 1st Edition (With Source Code)</strong><br />
Vikram Vaswani<br />
07 2007 | English | ISBN: 9780071487 | 577 Pages | PDF | 6.2 MB<strong>PHP Programming Solutions</strong> is a full-fledged developer guide with two primary goals: to deliver solutions to commonly encountered problems,<span id="more-12762"></span> and to educate developers about the wide array of built-in functions and ready-made PHP widgets available to them. Task-based categorization makes it easy to locate solutions, and each section comes with working code, a detailed explanation, and applicable usage tips and guidelines. The solutions described use both PHP’s native functions and off-the-shelf PEAR classes.<br />
PHP Programming Solutions includes coverage of a wide variety of categories, including string and number manipulation, input validation and security, authentication, caching, XML parsing, database abstraction, and more.<br />
The solutions are intended to :<br />
(1) simplify and shorten the application development cycle;<br />
(2) reduce test time;<br />
(3) improve quality;<br />
and (4) provide you, the developer, with the tools you need to quickly solve real PHP problems with minimal time and fuss.<br />
Simplify and shorten the PHP application development cycle using the in-depth information contained in this hands-on guide. PHP Programming Solutions clearly lays out more than 250 programming challenges alongside practical solutions, functioning code, detailed explanations, and usage tips.<br />
Inside, you’ll learn to manipulate strings and arrays, work with HTML and Web pages, accept and validate user input, parse XML code, and resolve programming problems using PEAR and PECL widgets and extensions. Plus, you’ll get detailed coverage of PHP security issues, SQL database interaction, debugging techniques, and error processing.<br />
* Work with numbers, strings, dates, times, files, and directories<br />
* Build complex data structures using PHP’s array manipulation API<br />
* Use functions and classes to build modular, reusable code<br />
* Create, update, and cache HTML documents and Web content<br />
* Obtain and process user input submitted via online forms<br />
* Protect, log, and debug PHP script actions<br />
* Authenticate and track users with sessions and cookies<br />
* Traverse, validate, and transform XML documents<br />
* Store and retrieve data from MySQL, PostgreSQL, and Oracle databases<br />
* Traverse, validate, and transform XML documents<br />
* Store and retrieve data from MySQL, PostgreSQL, and Oracle databases<br />
* Interface with different server types, network protocols, and file formats<br />
* Perform efficient exception handling and error processing <br />
<a href="http://rapidshare.com/files/272517128/PHPProgrammingSolutions1stEd062007.rar">DOWNLOAD HERE</a></div><div style="text-align: center;"><br />
</div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com1tag:blogger.com,1999:blog-4221630538623131060.post-71089827654762578242009-09-14T18:38:00.000-07:002009-09-14T18:38:54.761-07:00The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP<div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><br />
<br />
<div style="text-align: center;"><img alt="http://i43.tinypic.com/13zd474.jpg" src="http://i43.tinypic.com/13zd474.jpg" /></div><br />
<br />
Publisher: friends of ED<br />
Author: David Powers<br />
Format: PDF<br />
Pages: 940<br />
Dreamweaver CS4 is a massive step forward in terms of integration with the rest of the CS4 suite (Flash, Fireworks, Photoshop, etc.), and also includes a whole host of exciting new features of its own. The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP concentrates on getting the best out of Dreamweaver CS4, rather than going into every menu item and toolbar icon. The emphasis is on developing websites compliant with the latest web standards, using CSS, JavaScript libraries (with particular emphasis on Spry, Adobe�s implementation of Ajax), and PHP.<br />
The book covers all aspects of the new user interface, including workspace layouts, iconic panels, the related documents feature, Live View, Code Navigator, and Live Code. It also shows how to use the improved CSS editing features, and JavaScript code introspection. There is also coverage of other new features, such as version control through Subversion integration, and the improved support for Photoshop integration through the use of Smart Objects.<br />
* Takes you through your development environment set up<br />
* Covers everything you need to create both standards compliant web sites, and dynamic web applications<br />
* Teaches real world techniques using a series of step by step tutorials<br />
What you’ll learn:<br />
* Streamline your workflow with the Related Files toolbar, Live view, and the Code Navigator<br />
* Bring your pages alive with Ajax widgets from Spry, jQuery, and the Yahoo! User Interface Library<br />
* Use server-side includes, ********s, and Adobe’s InContext Editing online service<br />
* Create dynamic web applications using Dreamweaver’s PHP server behaviors<br />
* Build real world web site functions, such as form validation, random quote generator, search function, user management/login pages, dynamic Ajax gallery, and much more<br />
* Consume RSS feeds and create Spry data sets<br />
* How to publish your site after you’ve created it<br />
Who is this book for?<br />
This book is for both beginners who want a solid grounding in Dreamweaver CS4, and intermediate web designers and developers with previous Dreamweaver experience, who want to get up to speed with the new features.<br />
<img alt="" border="0" src="http://i43.tinypic.com/2dln4n7.jpg" /><br />
<div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"><b>Downlaod </b></div><div style="text-align: center;"></div><div style="text-align: center;"><a href="http://rapidshare.com/files/218528019/booktraining.net_EB73.rar">click here to download</a></div><div style="text-align: center;"></div><div style="text-align: center;">Password: xk120</div><div> </div><div style="text-align: center;">Password default : <a href="http://www.shytex.com/">shytex.com</a></div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-33285929304631791582009-09-13T23:59:00.000-07:002009-09-14T04:48:08.024-07:00Free Icons sets for Free and open<div style="text-align: left;">Icons are everywhere on the web. In most modern designs it is used to not only complete our design but also to attract the user’s eye. Designers use Icons to create breath-taking designs and decorate their desktop as well. Today we’re going to take a look at 40 most beautiful icon sets that were freshly created.</div><div style="text-align: left;"></div><div style="text-align: left;">Some amazing Icon Sets are missing? Let us know! </div><div style="text-align: left;"></div><h3 class="title" style="text-align: center;"><a href="http://mhmoodzaidan.deviantart.com/art/Kung-Fu-Panda-119349301">Kung Fu Panda</a></h3><h3 class="title" style="text-align: center;"> </h3><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"><a href="http://mhmoodzaidan.deviantart.com/art/Kung-Fu-Panda-119349301"><img alt="Fresh and Trendy Icons" src="http://noupe.com/img/fresh-icons19.jpg" /></a></div><h3 class="title" style="text-align: center;"> </h3><h3 class="title" style="text-align: left;">4 icons of funny creatures. </h3><h3 class="title" style="text-align: left;"><br />
</h3><h3 class="title" style="text-align: center;"><a href="http://iconfactory.com/freeware/preview/helo">Hello Kitty</a></h3><h3 class="title" style="text-align: center;"> </h3><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"><a href="http://iconfactory.com/freeware/preview/helo"><img alt="Fresh and Trendy Icons" src="http://noupe.com/img/fresh-icons1.jpg" /></a></div><h3 class="title" style="text-align: left;"><span style="font-weight: normal;">Super-cute icons based the mega hit from Japan. This collection contains 9 individual icons with large resources for Vista & Leopard.</span> </h3><h3 class="title" style="text-align: center;"><a href="http://iconfactory.com/freeware/preview/trxi">Star Trek </a></h3><h3 class="title" style="text-align: center;"> </h3><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"><a href="http://iconfactory.com/freeware/preview/trxi"><img alt="Fresh and Trendy Icons" src="http://noupe.com/img/fresh-icons2.jpg" /></a></div><h3 class="title" style="text-align: left;"><span style="font-weight: normal;">Official icons for the new Star Trek film from J.J. Abrams. This collection contains 15 individual icons with large resources for Vista & Leopard.</span> </h3><h3 class="title" style="text-align: left;"><br />
</h3><h3 class="title" style="text-align: center;"><a href="http://icondock.com/free/15-free-origami-icons">15 Free Origami Icons</a></h3><h3 class="title" style="text-align: center;"> </h3><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"><a href="http://icondock.com/free/15-free-origami-icons"><img alt="Fresh and Trendy Icons" src="http://noupe.com/img/fresh-icons11.jpg" /></a></div><h3 class="title" style="text-align: left;"><span style="font-weight: normal;">Origami Free Set is a set of 15 icons. The icons are available in 5 different sizes (16px, 32px, 48px, 128px, and 256px) and come as Windows ICO and 32-bit transparent PNG files.</span> </h3><h3 class="title" style="text-align: left;"><br />
</h3><h3 class="title" style="text-align: center;"><a href="http://wefunction.com/2009/05/free-social-icons-app-icons/">Function App Icon Set</a></h3><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"><img alt="Fresh and Trendy Icons" src="http://noupe.com/img/fresh-icons18.jpg" /> </div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;">A beautiful free set of social media icons by <b>WeFunction</b>. </div><div class="img" style="text-align: center;"></div><h3 class="title" style="text-align: center;"><a href="http://dryicons.com/free-icons/preview/coquette-part-4-icons-set/">Coquette Part 4 Icons</a></h3><h3 class="title" style="text-align: center;"> </h3><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"></div><div class="img" style="text-align: center;"><a href="http://dryicons.com/free-icons/preview/coquette-part-4-icons-set/"><img alt="Fresh and Trendy Icons" src="http://noupe.com/img/fresh-icons3.jpg" /></a></div><h3 class="title" style="font-weight: normal; text-align: left;"> </h3><h3 class="title" style="text-align: left;"><span style="font-weight: normal;">This playful free icon set contains curvy and colorful free icons made with one goal, to get all the affection and playfulness to your projects. “Coquette” free icon set contains 50 high quality, free icons in these sizes: 16×16px, 32×32px, 48×48px, 64×64px and 128×128px and 32-bit transparency PNG file format.</span> </h3><h3 class="title" style="text-align: left;"><br />
</h3><h3 class="title" style="text-align: center;"><a href="http://icondock.com/free/20-free-blockie-icons">20 Free Blockie Icons</a></h3><div class="img" style="text-align: center;"><a href="http://icondock.com/free/20-free-blockie-icons"><img alt="Fresh and Trendy Icons" src="http://noupe.com/img/fresh-icons12.jpg" /></a></div><h3 class="title" style="text-align: left;"> Here is a set of 80 icons (available in four different colors). The icons can be used for Windows desktop softwares and general web applications such as blog themes, forums, and eCommerce sites.</h3>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-57820864392842939602009-09-12T20:10:00.000-07:002009-09-12T20:10:16.403-07:00The Ultimate Joomla Toolbox: Themes, Extensions and Resources<div style="text-align: center;"><img alt="http://noupe.com/img/joomla/joomla-post.jpg" src="http://noupe.com/img/joomla/joomla-post.jpg" /><br />
Joomla is one of the most popular CMSs out there, and it’s no surprise considering how extensible it is. The great thing about Joomla is the extensions (components, modules and plugins), that can be added to your Joomla website. This allows the average user to add more functionality and dynamic content to their website without being a developer or programmer.<br />
<br />
In this post you will find a thorough collection of all kinds of resources that will aid designers and developers working with Joomla-powered websites. This collection is intended to simplify your tasks and save you time when working with Joomla. <br />
</div><div style="text-align: center;">This post covers essential resources related to Joomla— Themes, Extensions, Tutorials, Forums, Cheat Sheets and Useful Documents.</div><div style="text-align: center;"> </div><div style="text-align: center;">Joomla’s current version is 1.5, however, some people are still using 1.0. Some of the extensions are only compatible with 1.0, we tried to mix between both version while prioritizing 1.5.</div><div style="text-align: center;"></div><h3 class="title" style="background-color: #cfe2f3; color: orange; text-align: center;">Beautiful Free Joomla Themes</h3><div style="text-align: center;"></div><h4 class="title" style="text-align: center;"><a href="http://www.portfoliodesign.org/resources/60-free-myportfolio-joomla-15-template.html" target="_blank">MyPortfolio</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://www.portfoliodesign.org/resources/60-free-myportfolio-joomla-15-template.html" target="_blank"><img alt="Ultimate Joomal Toolbox" height="237" src="http://noupe.com/img/joomla/18_mypr.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://www.prowebcreative.com/free-joomla-templates/138-extreme-sports-joomla-template" target="_blank">Xtreme Sports</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://www.prowebcreative.com/free-joomla-templates/138-extreme-sports-joomla-template" target="_blank"><img alt="Ultimate Joomla Toolbox" height="221" src="http://noupe.com/img/joomla/02_xtrm.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://www.themesbase.com/?view=32328" target="_blank">Manuscript</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://www.themesbase.com/?view=32328" target="_blank"><img alt="Ultimate Joomla Toolbox" height="289" src="http://noupe.com/img/joomla/03_mnus.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://themebot.com/free-website-templates/joomla-templates/3126-jp-12-2007-dirtystyle" target="_blank">Ditystyle</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://themebot.com/free-website-templates/joomla-templates/3126-jp-12-2007-dirtystyle" target="_blank"><img alt="Ultimate Joomla Toolbox" height="213" src="http://noupe.com/img/joomla/05_drty.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a alt="Ultimate Joomla Toolbox" href="http://www.prowebcreative.com/free-joomla-templates/117-business-joomla-template" target="_blank">Business</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://www.prowebcreative.com/free-joomla-templates/117-business-joomla-template" target="_blank"><img alt="Ultimate Joomla Toolbox" height="235" src="http://noupe.com/img/joomla/04_busi.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://www.prowebcreative.com/free-joomla-templates/79-pro-free-joomla-template-fashion-style-beauty" target="_blank">Fashion and Style</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://www.prowebcreative.com/free-joomla-templates/79-pro-free-joomla-template-fashion-style-beauty" target="_blank"><img alt="Ultimate Joomla Toolbox" height="193" src="http://noupe.com/img/joomla/06_fsh.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://themebot.com/free-website-templates/joomla-templates/1631-decayed" target="_blank">Decayed</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://themebot.com/free-website-templates/joomla-templates/1631-decayed" target="_blank"><img alt="Ultimate Joomla Toolbox" height="222" src="http://noupe.com/img/joomla/07_decy.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://themejoomla.com/releases/templates/sublime-template.html" target="_blank">Sublime</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://themejoomla.com/releases/templates/sublime-template.html" target="_blank"><img alt="Ultimate Joomla Toolbox" height="198" src="http://noupe.com/img/joomla/08_sub.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://themebot.com/free-website-templates/joomla-templates/1645-siteground-j15-16" target="_blank">Siteground</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://themebot.com/free-website-templates/joomla-templates/1645-siteground-j15-16" target="_blank"><img alt="Ultimate Joomla Toolbox" height="215" src="http://noupe.com/img/joomla/09_stgr.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://www.bestofjoomla.com/component/option,com_bestoftemplate/task,detail/Itemid,46/id,2211/" target="_blank">ManiFolio</a></h4><div style="text-align: center;"> </div><div style="text-align: center;"> <a href="http://www.bestofjoomla.com/component/option,com_bestoftemplate/task,detail/Itemid,46/id,2211/" target="_blank"><img alt="Ultiamte Joomla Toolbox" height="220" src="http://noupe.com/img/joomla/10_man.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://www.bestofjoomla.com/component/option,com_bestoftemplate/task,detail/Itemid,46/id,1499/" target="_blank">Happiness</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://www.bestofjoomla.com/component/option,com_bestoftemplate/task,detail/Itemid,46/id,1499/" target="_blank"><img alt="Ultimate Joomla Toolbox" height="220" src="http://noupe.com/img/joomla/11_happ.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://themebot.com/free-website-templates/joomla-templates/3418-red-evo-aphelion" target="_blank">Red Evo Aphelion</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://themebot.com/free-website-templates/joomla-templates/3418-red-evo-aphelion" target="_blank"><img alt="Ultimate Joomla Toolbox" height="207" src="http://noupe.com/img/joomla/12_red.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://www.joomlaweb.com/index.php?option=com_content&view=article&id=46:another-free-joomla-15-template-jw-getty&catid=3:free-joomla-templates&Itemid=55" target="_blank">JW Getty</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://www.joomlaweb.com/index.php?option=com_content&view=article&id=46:another-free-joomla-15-template-jw-getty&catid=3:free-joomla-templates&Itemid=55" target="_blank"><img alt="Ultimate Joomla Toolbox" height="184" src="http://noupe.com/img/joomla/13_jw.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://templates.arcsin.se/beautiful-day-joomla-template/" target="_blank">Beautiful Day</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://templates.arcsin.se/beautiful-day-joomla-template/" target="_blank"><img alt="Ultiamte Joomla Toolbox" height="195" src="http://noupe.com/img/joomla/14_bd.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://themebot.com/free-website-templates/joomla-templates/3396-rainbow" target="_blank">Rainbow</a></h4><div style="text-align: center;"> </div><div style="text-align: center;"><a href="http://themebot.com/free-website-templates/joomla-templates/3396-rainbow" target="_blank"><img alt="Ultimate Joomla Toolbox" height="230" src="http://noupe.com/img/joomla/15_rnbw.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://www.djoomla.com/component/option,com_remository/Itemid,2/func,fileinfo/id,493/" target="_blank">Anemone Colourful</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://www.djoomla.com/component/option,com_remository/Itemid,2/func,fileinfo/id,493/" target="_blank"><img alt="Ultimate Joomla Toolbox" height="203" src="http://noupe.com/img/joomla/16_ano.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://themebot.com/free-website-templates/joomla-templates/3577-transparent-bliss" target="_blank">Transparent Bliss</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://themebot.com/free-website-templates/joomla-templates/3577-transparent-bliss" target="_blank"><img alt="Ultimate Joomla Toolbox" height="201" src="http://noupe.com/img/joomla/17_trb.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://www.themesbase.com/?view=32674" target="_blank">Color Paper</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://www.themesbase.com/?view=32674" target="_blank"><img alt="Ultimate Joomla Toolbox" height="249" src="http://noupe.com/img/joomla/01_ki.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://themebot.com/free-website-templates/joomla-templates/3683-xblog" target="_blank">Xblog</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://themebot.com/free-website-templates/joomla-templates/3683-xblog" target="_blank"><img alt="Ultimate Joomla Toolbox" height="217" src="http://noupe.com/img/joomla/19_xblog.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://www.bestofjoomla.com/component/option,com_bestoftemplate/task,detail/Itemid,46/id,1359/" target="_blank">Contaminated</a></h4><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://www.bestofjoomla.com/component/option,com_bestoftemplate/task,detail/Itemid,46/id,1359/" target="_blank"><img alt="Ultimate Joomal Toolbox" height="222" src="http://noupe.com/img/joomla/20_con.jpg" width="500" /></a></div><div style="text-align: center;"> </div><div style="text-align: center;"> </div><div style="text-align: center;"> </div><h3 class="title" style="text-align: center;">Must Have Joomla Extensions</h3><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/access-&-security/backup/1606/details">JoomlaPack</a></h4><div style="text-align: center;"> </div><div style="text-align: center;"> Backup is the most important thing for any bloggers. JoomlaPack is an open-source backup component for the Joomla. It allows to create a site backup that can be restored on any Joomla!-capable server.</div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.siliana.com/en/sh404SEF-and-url-rewriting/sh404SEF-Joomla-SEF-URL-without-URL-rewriting-or-.htaccess.html">sh404SEF</a></h4><div style="text-align: center;"> </div><div style="text-align: center;"> sh404SEF is really useful and essentianl Joomla extensions. sh404SEF creates Joomla SEF URL, and turn them to a more user-friendly format for your site visitors, as well as for search engines.</div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/1830/details">JoomSEO</a></h4><div style="text-align: center;"> </div><div style="text-align: center;">It is necessary to have correct metadata and keyword get discovered by Search Engines. JoomSEO adds heading tags to content titles and descriptions relevant for the search engines, improving ranking and accessibility.</div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/contacts-&-feedback/articles-comments/4389/details">JoomlaComment </a></h4><div style="text-align: center;"> </div><div style="text-align: center;">This is a useful comment extension which has features such a threaded comments, CAPTCHA Protection and more. </div><div style="text-align: center;"> </div><div class="img" style="text-align: center;"> <a href="http://extensions.joomla.org/extensions/contacts-&-feedback/articles-comments/4389/details" target="_blank"><img alt="ultiamte Joomla Toolbox" height="233" src="http://noupe.com/img/joomla/24_com.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/4059/details">Avatar/Gravatar Plugin</a></h4><div style="text-align: center;"> </div><div style="text-align: center;">Avatar/ Gravter is widely used in website. This extension add the gravter functionality to your site.</div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/communities-&-groupware/communities/210/details">JoomlaStats</a></h4><div style="text-align: center;"> </div><div style="text-align: center;">No matter what CMS you are using, Knowing your site stats such as hits, pageviews, search engines & keywords are improtant. JoomlaStats is the great tool to be aware of what users/bots are doing with your site .</div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/communities-&-groupware/communities/210/details">Community Builder</a></h4><div style="text-align: center;"> </div><div style="text-align: center;">Community Builder suite (CB) extends the Joomla! user management system such as : extra fields in profile, enhanced registration workflows, user lists, admin defined tabs and user profiles, image upload, front-end workflow management, Forum, Galleries.</div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/ads-&-affiliates/corner-banners/3209/details" target="_blank">Page Peel Banner</a></h4><div style="text-align: center;"> </div><div style="text-align: center;">This module is developed based on a wonderful Pageear Script, which shows a Page Peel effect on the site</div><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://moduledemo.templateplazza.com/content/view/31/41/" target="_blank"><img alt="Ultimate Joomla Toolbox" height="275" src="http://noupe.com/img/joomla/21_peel.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/communities-&-groupware/social-bookmarking/4416/details">AllVideos</a></h4><div style="text-align: center;"> </div><div style="text-align: center;">If you have media site or want to add videos is AllVideo is a must have extension . You can use the plugin to easily embed videos hosted on popular services like YouTube, Metacafe, Vimeo (and many more) inside your Joomla! articles (content items). or playback almost any video/audio filetype directly from your server or a remote server.</div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/photos-&-images/photo-gallery/5481/details">JoomGallery </a></h4><div style="text-align: center;"> </div><div style="text-align: center;">JoomGallery is a gallery component completely integrated into Joomla, with support for Joomla 1.0 and 1.5 native. Easyto configure with fullscreen animated JavaScript view (Lightbox, Slimbox or Thickbox3).</div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/812/details">The Ultimate Social Bookmarking Plugin</a></h4><div style="text-align: center;"> </div><div style="text-align: center;">Blogger all over the world knows how important it is to have a good social network. This plugin will adds social bookmarking buttons to your content, making it easy for your visitors to submit your articles and build traffic to your website.</div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"> <a href="http://extensions.joomla.org/extensions/communities-&-groupware/social-bookmarking/5816/details">Joomla! AddThis</a></h4><div style="text-align: center;"> </div><div style="text-align: center;">Another useful module that intergrates AddThis on your site on specified position.his module only works with Joomla 1.5.x. You can customize any AddThis Parameter easily within the module it self.</div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/search-&-indexing/tags-&-clouds/6493/details" target="_blank">Joomulus</a></h4><div style="text-align: center;"> </div><div style="text-align: center;"> A Flash based tag cloud that works with Joomla 1.5</div><div style="text-align: center;"> </div><div class="img" style="text-align: center;"><a href="http://joomlabear.com/Joomulus/" target="_blank"><img alt="Ultimate Joomal Toolbox" height="149" src="http://noupe.com/img/joomla/22_clu.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/edition/custom-code/1023/details" target="_blank">Jumi</a></h4><div style="text-align: center;"> </div><div style="text-align: center;"> If you are web designer or web developer this is a must have plugin. This plugin allows you can include php, html, javascript scripts into the modules position, articles, category or section descriptions, or into your own custom made component pages.</div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/ads-&-affiliates/corner-banners/3209/details" target="_blank">Slick RSS</a></h4><div style="text-align: center;"> </div><div style="text-align: center;">This is a really cool plugin . It parse and display RSS Feed News with DHTML Teaser Tooltip</div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/communication/shoutbox/43/details" target="_blank">AJAX Shoutbox</a></h4><div style="text-align: center;"> </div><div style="text-align: center;">This Joomla module adds live chat functionality to your Joomla site. Your visitors can chat with each other right in your website without refreshing their browsers.</div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/contacts-&-feedback/contact-forms/6343/details" target="_blank">Contact Enhanced </a></h4><div style="text-align: center;"> </div><div style="text-align: center;"> Getting feedback or allowing your readers to communicate is vital for any kind of website. Contacts Enhanced is a contact component allows to have contact form with CAPTCHA and custom fields.</div><div style="text-align: center;"> </div><div class="img" style="text-align: center;"> <a href="http://ideal.fok.com.br/joomla/extensions/contact-enhanced.html" target="_blank"><img alt="Ultimate Joomla Toolbox" height="149" src="http://noupe.com/img/joomla/23_con.jpg" width="500" /></a></div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/content-&-news/frontend-news/2751/details" target="_blank">Mini FrontPage</a></h4><div style="text-align: center;"> </div><div style="text-align: center;">MiniFrontPage module provides you with a lightweight but powerful news headline style of your most recent content items. </div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/content-&-news/frontend-news/2751/details" target="_blank">AdSense Module</a></h4><div style="text-align: center;"> </div><div style="text-align: center;"> A really simple handy solution for implementing Google AdSense ads in Joomla.</div><div style="text-align: center;"> </div><h4 class="title" style="text-align: center;"><a href="http://extensions.joomla.org/extensions/search-&-indexing/site-search/3547/details" target="_blank">PixSearch Ajax Search module</a></h4><div style="text-align: center;"> </div><div style="text-align: center;">Another cool module that mimics search like the one on apple.com. It shows result as you type.</div><div style="text-align: center;"> </div><div class="img" style="text-align: center;"> </div><div style="text-align: center;"> <a href="http://extensions.joomla.org/extensions/search-&-indexing/site-search/3547/details" target="_blank"><img alt="Ultimate Joomla Toolbox" height="205" src="http://noupe.com/img/joomla/25_pix.jpg" width="500" /></a></div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-48548970211191950712009-09-12T04:01:00.000-07:002009-09-12T04:01:06.611-07:00Setting up Google Analytics for your Joomla Site.<div style="text-align: left;"><span class="highlight-5">In This Tutorial We will be learning install <a href="http://www.google.com/analytics/" target="_blank">Google analytics</a> Code for your Joomla site. </span><br />
First of all... there are several different ways to get <a href="http://www.google.com/analytics/" target="_blank">Google Analytics</a> up to work with your joomla site via modules, plugins, components. But we don't trust third parties that much.So, in this tutorial we will be just editing the html of our site template and inserting the code directly into it!<br />
<br />
<b style="background-color: #cfe2f3; color: blue;">1. Navigate to Extensions >> Template Manager. </b><br />
</div><br />
<div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"><img alt="http://tutorials.jm-experts.com/images/stories/edit_a_template_tutorial/images/image1.jpg" src="http://tutorials.jm-experts.com/images/stories/edit_a_template_tutorial/images/image1.jpg" /></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="background-color: #cfe2f3; color: blue;"></div><br />
<b style="background-color: #cfe2f3; color: blue;">2. On this page you will see a list of templates installed in your joomla site. Select the template you want to edit. </b><br />
<br />
<br />
<br />
<img alt="http://tutorials.jm-experts.com/images/stories/edit_a_template_tutorial/images/image2.jpg" src="http://tutorials.jm-experts.com/images/stories/edit_a_template_tutorial/images/image2.jpg" style="cursor: -moz-zoom-out;" /><b style="background-color: #cfe2f3; color: blue;"> </b><br />
<b style="background-color: #cfe2f3; color: blue;"> <br />
</b><br />
<b style="background-color: #cfe2f3; color: blue;">3. Hit the Edit button on the top right of the page. </b><br />
<br />
<br />
<img alt="http://tutorials.jm-experts.com/images/stories/edit_a_template_tutorial/images/image3.jpg" src="http://tutorials.jm-experts.com/images/stories/edit_a_template_tutorial/images/image3.jpg" /><b style="background-color: #cfe2f3; color: blue;"> </b><br />
<br />
<br />
<span style="background-color: #cfe2f3; color: blue;">4. Some Templates have Parameters which you can change. This can include Color variations, Width and other template properties. </span><b style="background-color: #cfe2f3; color: blue;"> </b><br />
<br />
<br />
<img alt="http://tutorials.jm-experts.com/images/stories/edit_a_template_tutorial/images/image4.jpg" src="http://tutorials.jm-experts.com/images/stories/edit_a_template_tutorial/images/image4.jpg" /><b style="background-color: #cfe2f3; color: blue;"> </b><br />
<br />
<br />
<b style="color: blue;"><span style="background-color: #cfe2f3;">5. The other things you can do here is Edit the index file of the template. Every template is based on a main index.php file which can be edited here... Click the Edit HTML button to view the code of the index.php file and make changes to it.</span></b><b style="background-color: #cfe2f3; color: blue;"> </b><br />
<br />
<br />
<img alt="http://tutorials.jm-experts.com/images/stories/edit_a_template_tutorial/images/image5.jpg" src="http://tutorials.jm-experts.com/images/stories/edit_a_template_tutorial/images/image5.jpg" /><b style="background-color: #cfe2f3; color: blue;"> </b><br />
<br />
<b style="color: blue;"><span style="background-color: #cfe2f3;">6. After you click on Edit HTML you can see all the code of the Template here. You are free to edit it and make changes to it. </span></b><b style="background-color: #cfe2f3; color: blue;"> </b><br />
<br />
<img alt="http://tutorials.jm-experts.com/images/stories/edit_a_template_tutorial/images/image6.jpg" src="http://tutorials.jm-experts.com/images/stories/edit_a_template_tutorial/images/image6.jpg" /><b style="background-color: #cfe2f3; color: blue;"> </b><br />
<br />
<div style="background-color: #cfe2f3; color: blue;"><b>7. Now go to the end of this code and you will see the two lines.</b></div><div style="color: orange;"><b><br />
</b></div>Put your Google Analytics code right before the <strong></strong> tag and you are done!<br />
<b style="background-color: #cfe2f3; color: blue;"> </b><b style="background-color: #cfe2f3; color: blue;"> </b>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0tag:blogger.com,1999:blog-4221630538623131060.post-25781570352030255622009-09-12T03:52:00.000-07:002009-09-12T03:52:19.697-07:00How to change your Joomla Site Default WYSIWYG editor?<div style="text-align: left;">The Tiny-Mice Editor Which comes with joomla really Sucks, most of the people want to either switch it off or change it. Here is a Small Tutorial to change the Default editor for your joomla site.</div><div style="text-align: left;"><br />
</div><div style="background-color: #cfe2f3; color: blue; text-align: left;"><b>1. Begin and Navigate to Site >> Global Configuration.</b></div><div style="text-align: left;"></div><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://tutorials.jm-experts.com/images/stories/How_to_change_your_WYSIWYG_editor/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Joomla Global Configuration" border="0" src="http://tutorials.jm-experts.com/images/stories/How_to_change_your_WYSIWYG_editor/1.png" /></a></div><b style="background-color: #cfe2f3; color: blue;">2. From here you can Select or Change the Default WYSIWYG editor for your joomla site. </b><br />
<br />
<img alt="Change Default WYSIQYG editor in joomla" src="http://tutorials.jm-experts.com/images/stories/How_to_change_your_WYSIWYG_editor/2.png" /><br />
<br />
<br />
<b style="background-color: #cfe2f3; color: blue;">3. All right Now you are good to go… Hit the Save button.</b><b style="background-color: #cfe2f3; color: blue;"> </b><br />
<b style="background-color: #cfe2f3; color: blue;"><br />
</b><br />
<div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: center;"></div><div style="text-align: left;"></div><div style="text-align: left;"></div><div style="text-align: left;"></div><div style="text-align: left;"></div><div style="text-align: left;"></div><div style="text-align: left;"><img alt="Joomla Tutorials" src="http://tutorials.jm-experts.com/images/stories/How_to_change_your_WYSIWYG_editor/3.png" /></div>web2.0 Design resoursehttp://www.blogger.com/profile/09477965523896897276noreply@blogger.com0