Event will host a lucky draw and a panel discussion open for participant’s direct questions to the speakers. The venue is the latest 6 star hotel in Bangkok, Okura Prestige – we look forward for another great event! The Event is free with translations in both Thai and English.

We have a lineup of global experts in 3 subject areas lined up for you (presentations available in both Thai and English):

Pocket PlayLab – Startup

Company: Pocket PlayLab / Jakob Lykkegaard Pedersen
Subject:: Booming Mobile Gaming industry

Thailand is the Southeast Asia’s biggest online gaming market.

Pocket Playlab partner Jakob Lykkegaard Pedersen will speak about the booming mobile gaming industry and how it will affect Thailand and the region. Most revenue forecasters indicate the multi-billion dollar mobile gaming industry will nearly double the current annual revenue by 2016, as a result the Pocket Playlab team is rapidly expanding to position themselves for this growth opportunity. Pedersen is poised to help create a mobile gaming development hub here in Bangkok by actively pursuing the international gaming market and landing foreign corporate contracts. Join us as Pedersen shares insight into Pocket Playlab’s current strategy as well as lessons learned from his previous tech ventures.

Amazon -Technology

Company: Amazon
Subject: Case Studies on doing business on mobile using cloud

First appearance of Amazon in Thailand!

Amazon is the largest e-commerce website in the world and Amazon Web Services (AWS) is the largest Cloud provider in the world.

AWS is a spin off from Amazon.com, the largest e-commerce website in the world. AWP will present intriguing statistics and educational case studies about startup and mobile cloud possibilities. Amazon will be joined by a popular figure in the field with lessons learned and best practices on the topic.

Google – Business

Company: Google
Subject: Thai mobile opportunity and how to take advantage of it

The largest internet company in the world explain how mobile will change your world.

Google will present interesting presentation on a mobile opportunity with stats and best practices. Thailand is a largely an untapped opportunity for web and mobile. Startups and technology businesses can do much more to take advantage of this large population of mobile users. Google presents some of the key trends on the industry as well as what you can do to become more successful on a mobile.

Location

Okura Prestige Hotel, close to BTS Ploenchit
57 Wireless Road, Lumpini
Pathumwan Bangkok 10330
Thailand

On google Maps: http://g.co/maps/r532b

Sign Up to our event!

Please be free to sign up to the event already now, we look forward to see you there on May!

Message from our Sponsors Pocket Play Lab:

“We are a fully functional social games production house consisting of experienced game development staff. We are available for complete product development and outsourcing contract for programing/content and always looking for new members to join our team! “

On Saturday, Sitsari Kitisakkul told me his concept GOT.IT – a social customer loyalty app to replace paper punch cards and plastic membership cards – was selected and asked me to join his team as a UI designer to take on the design of the iPhone application.

Here’s what I have designed for my team (click to enlarge):

Application points of differenciation:

• Combine punch cards and membership cards into a single platform
• Social aspects to increase usage and retention (gifting friends, integration with facebook, Got.it point system to complement vendors own loyalty programs)
• Location based vendor discovery
• Provide analytics and consumer behavior data to vendors/merchants
• First mover in Thailand.

After two days of hard work and an incredible team work, we had to pitch our product and show the demo in only 5 minutes. This is a very short amount of time to convince the judges.

But finally, after two hours and final judges’ deliberation we won 1st runner up (behind ChatterBox) and a prize of 100,000 Thai Bahts (about US$3,000). Yeaaahh! Unfortunately, I had to leave the event early and could not be there on stage with the rest of the team to celebrate.

The team is committed to complete this project and release the app on the Apple Store later next year. Stay stunned!

In the evening we will have three presentations from global experts in 3 subject areas (presentations available in both Thai and English):

• Technology – Nokia, one of the biggest mobile manufacturer in the world.
• Startup – AFP, the oldest news agency in the world.
• Business – Tarad.com, number one E-commerce company in Thailand.

Speaker – Technology

Company: Nokia
Subject: Nokia and Windows 8
Presenter: Nokia Technology Director

Nokia’s next bet on technology is weighted heavily on the new Microsoft Windows 8 mobile operating system. In the near future Nokia’s new phones and tablets are expected to be shipped with the faster, easier, and UI enhanced Windows OS hence raising concern in the rapidly expanding Android community. The strategic partnership between these two tech giants has the potential to increase Nokia’s share in the ultra competitive smartphone market. Nokia Technology Director Asia, will highlight some of the unique technological changes to be seen in the Nokia product line of 2012.

Speaker – Business

Company: AFP – Agence France-Presse
Subject: Delivering News for the Next Billion People – From Pigeons to Mobiles
Presenter: Nicolas Giraudon – Deputy Sales and Marketing Director

AFP traces its history back to the 1835 creation of Agence Havas, the world’s first international news agency. Throughout this time, AFP has maintained a formidable presence in media through progressive adaptations to the distribution of news and information. As user generated content and mobile access is shifting the way we create and share news AFP and competing agencies are in a race to once again adapt as the paradigm is shifted. AFP Deputy Sales and Marketing Director Asia, Nicolas Giraudon, will share some of the business model changes currently being made in media to engage the quickly evolving mobile market.

Speaker – Startup

Company: TARAD.com (Rakuten company)
Subject: Mobile Commerce in Thailand
Presenter: Pawoot Pongvitayapanu – Managing Director

TARAD.com, Thailand’s largest e-commerce company was established in 1999 as an innovative and integrated hub for e-Commerce, advertising and merchant services. In 2009 TARAD.com joined in partnership with Japanese e-Commerce giant Rakuten Inc.and now hosts 180 thousand online merchants responsible for 1.6 million items. As e-Commerce startups seek to take advantage of the rapid economic growth regionally, TARAD is poised to maintain its competitive edge through engagement with mobile commerce. TARAD.com Managing Director, Pawoot Pongvitayapanu, will share his experiences of creating, maintaining, and partnering a successful e-Commerce company

Location

Four Points by Sheraton
4 Sukhumvit Soi 15, Sukhumvit Road,
Klongtoey-Nua, Wattana Bangkok 10110, Thailand

Organizers

• Ville Kulmala – Chairman – Mobile Monday Thailand
• Jeremie Tisseau – Co-organizer – Mobile Monday Thailand (Yep, That’s Me!)
• Mike Michalec – Co-organizer – Mobile Monday Thailand
• Ellen Boonstra – Media Relations & Venue
• Thaninrat Pipitcharulerd – Thai Coordinator – Mobile Monday Thailand

Sponsors & Partners

• Nokia – Main Sponsor
• Four Points by Sheraton Bangkok – Venue Sponsor
• AFP – Partner
• Media Technology for Thailand – Partner

Mobile Monday (MoMo) Bangkok chapter invites you to join our first ever event in Bangkok!

Mobile Monday, established in 2000, is a global community for mobile community.
Original chapter locations included Helsinki, New York, Silicon Valley, London, Sydney, Paris, Mumbai, Beijing, Singapore and Tokyo with 100 cities active now and more planning to launch in 2011.

 

Register for free

Focus of Mobile Monday Bangkok is to:

• Foster an open, independent and innovative platform within the mobile sector
• Facilitate industry networking between small and large companies and individuals
• Bridge partnership exchanges between domestic and international organizations
• To present valuable visions, trends, studies and forecasts from the mobile marketplace
• Provide opportunities for local members to effectively participate in global initiatives

Our Speakers

There will be three presentations from global experts in three subject areas (presentations both in Thai and English).

• BUSINESS: Developing compelling apps by BlackBerry
  Johan Kremer, Head of Alliances at Research In Motion (RIM, www.rim.com )
• TECHNICAL: Digital publishing and monetizing your digital content
  Dr. Polapat Udomphol, business development director of IT Works (www.itworks.co.th)
• START-UP: What you need to know to be a successful startup
  Thomas Kjeldgaard is the cofounder of Pagemodo (www.pagemodo.com)

Event Location:

Novotel Siam Square (Siam BTS exit 4)
392/44 Siam Square Soi 6
Bangkok, Thailand

See more updates on our websites or visit our Facebook page

Overview

We will cover everything from exporting/importing a database in PhpMyAdmin to creating a new one, creating a new user, updating user privileges… And last but not least, I will show you how to update your old domain name URIs (e.g. http://old-domain.com) to your new domain name (e.g. http://new-domain.com) using SQL Queries in PhpMyAdmin.

SQL Query is a powerful tool that you can use within your MySQL database: you can create, drop or update one of your tables, select or delete a specific row… and much more. So as always, be sure to make a backup of your database before playing with this tool; if not, you could seriously screw it up. I always recommend to save your backups in at least two different places. That could be on your computer, external hard drive or in the cloud (Dropbox, Mozy Backup…).

For this tutorial, I will assume you have an Apache server and PhpMyAdmin installed. PhpMyAdmin is easier to use than it might seem at first glance so don’t let this scare you. This step by step tutorial should hopefully be simple enough even for a first time user.

If you are a more experienced user, you may want to skip some sections and go straight to “Step 6: SQL Queries“.

Let’s get started!

Step 1 – Download/Upload all your WordPress files Via FTP

First things first, you will need to download ALL your files from your old host and upload them to your new host.

• Connect via FTP or SFTP to your old host with your favorite FTP client. Mine is Filezilla but WinSCP is also a good alternative for Windows. To configure your FTP client, refer to your host documentation. If you can not find it, contact a technician. Hosting companies usually offer a 24/7 support and they should be able to provide an answer within a few hours or less.

  Note: SFTP stands for SSH File Transfer Protocol. Not all hosts allow you to transfer files via SFTP but if they do you should favor this protocol over FTP. That basically means that all your files will be encrypted during transfer (read “more secure”).

• Once connected, browse to your WordPress folder and download all your files locally onto your desktop or into a specific folder of your choice. This includes files from your themes folder and plugins folder. Make sure to save the .htaccess file at the root of your WordPress site. Neglecting to save your .htaccess file will result in broken permalinks. That is of course if you are using permalinks.
• Now that you have made a backup of your WordPress site, you will need to upload ALL your WordPress files to the new host. Configure your FTP client to connect to it.
• Browse to your new site directory and transfer all the files from your machine to the server.

Step 2 – Export your database

Connect to PhpMyAdmin on your old host. Most hosting companies have Cpanel or a similar control panel. On the main screen, you should see a bunch of icons. Scroll down to the Databases section and log into PhpMyAdmin.

• Once you have reached PhpMyAdmin, you will see all your databases on the right hand side of the panel. Select the database that correspond to your WordPress install. It will load all your tables on the next screen. Click the export tab on the top.
  
• On the next screen, select all the tables.
  
• Scroll to the bottom and check “Save as file”. Leave the default valued (_DB_) or give it a custom name. If you have a large database you might want to zip it. Click Go. It will ask you where you want to save the file. Select a folder and click save.
  

Step 3 – Create a new database

If you have Cpanel, you can directly create a new database right from the control panel (Cpanel -> Databases -> MySQL Databases -> Create Database) but since we are talking about PhpMyAdmin in this tutorial, I am going to show you how to do so in PhpMyAdmin.

• Connect to PhpMyAdmin on your new host. On the home page, you should see a field to create a new database. Enter the name of your database and click “Create”.

  

  If everything has worked correctly, you should see this message:

  

Step 4 – Create new user in PhpMyAdmin

Once you created a new database, the next step is to create a user to administrate this database.

• Click on the privileges tab on top.

  

• It will take you to this page:
  
• Click on “Add a new user”. On the next page, choose your username and then select “localhost” in the Host section. For password, you can either enter your own or generate one.
• Now Scroll down to Global privileges section. Leave it blank at the moment as shown in the screenshot below. Click on the “Go” button.
  
• If everything worked fine, you should see this dialogue:
  
• On the same page, scroll down to the “Database-specific privileges” section and select the database you previously created.
  
• It will take you to this screen. I usually check all the boxes and leave the admin section unchecked. Click “Go” when you are done.
  
• You should see another message:
  

Step 5 – Import your database

• Still in PhpMyAdmin, click the import tab (make sure your new database is selected on the right).
  
• On the next page, select the database you exported in step 2. Click “Go”.
  
• You should see this message if everything worked fine.
  

Step 6 – SQL Queries

Now that we have successfully imported the database onto the new server, we need to replace the old website URI (e.g. ‘http://www.old-domain.com’) with the new URI (e.g. ‘http://www.new-domain.com’).

(Note: This step is actually optional. In most cases, the domain name will remain the same. If so, you can just skip this section.)

In a default WordPress install, you only need to replace the URI in 3 tables: wp_posts, wp_postmeta and wp_options.

• To run a SQL Query, click on the SQL tab on top
  
• This will take you to this screen.
  
• Now enter the following queries one by one and click go for each. Don’t forget to change http://www.old-domain.com and http://www.new-domain.com by your old domain name and new one respectively. Also, if you changed the default table prefix (e.g. “wp_”) to something else, make sure to update it in the queries below.
  ^?View Code PHP

  1 2 3 4

  UPDATE wp_posts SET guid = replace(guid, 'http://www.old-domain.com','http://www.new-domain.com'); UPDATE wp_posts SET post_content = replace(post_content, 'http://www.old-domain.com', 'http://www.new-domain.com'); UPDATE wp_postmeta SET meta_value = replace(meta_value, 'http://www.old-domain.com', 'http://www.new-domain.com'); UPDATE wp_options SET option_value = replace(option_value, 'http://www.old-domain.com', 'http://www.new-domain.com') WHERE option_name = 'home' OR option_name = 'siteurl';

  You probably noticed that the last query is a little bit different from the others. What we do here is to replace the old domain name with the new one only for “home” and “siteurl” in the option_name column. Here’s how it looks in PhpMyAdmin when you browse the wp_options table:

  

• If your query was successfully executed you should see a dialog like the one below with the number of raw affected.
  

(Note: Some plugins need the site URI. You might need to update that as well. The easiest way to check if another table contain the old domain name is to do a search in PhpMyAdmin (your database -> Search tab -> Select all the tables). It will return all the tables that contain the old site URI and you can then change accordingly as explained above.)

Step 7 – Edit wp-config.php

• Open and edit wp-config.php in your favorite web/text editor (Dreamweaver, Aptana, Notepad…).

  Replace the old settings with your new database name, username and password you created in steps 3 and 4.

  ^?View Code PHP

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

  <?php /** The name of the database for WordPress */ define('DB_NAME', 'new-site');   /** MySQL database username */ define('DB_USER', 'yourusernamehere');   /** MySQL database password */ define('DB_PASSWORD', 'yourpasswordhere');   /** MySQL hostname */ define('DB_HOST', 'localhost');   /** Database Charset to use in creating database tables. */ define('DB_CHARSET', 'utf8');   /** The Database Collate type. Don't change this if in doubt. */ define('DB_COLLATE', '');

• Save the document and upload it to your server via FTP.

Conclusion

That’s it! Load the site in your browser and if everything went well, you should see it as it was on the old host. I hope you enjoyed this tutorial. If you have any question, leave a comment below and I will do my best to answer you.

If you want to learn more about SQL query, read this excellent article from Onextrapixel.com: 13 Useful WordPress SQL Queries You Wish You Knew Earlier.

Do you know any other SQL query tricks? Share them with us!

But just because users all over the world are now linked, does not make them the same. Different cultures have distinct habits and preferences so you will need to think carefully about what each of your target markets will respond to before you begin to design your website.

Looking at the websites of successful companies in each country will give you some indication as to what your audience find appealing. There are also certain steps which can be taken to aid your search engine optimisation (SEO) in each region.

To help you out, here are a few of the aspects you should consider when localising your website:

1. Domain

Invest in an in-country domain name for each of your target markets. While it may be cheaper and more convenient to have one domain name which covers all of your target countries, having dedicated in-country domains helps Google to rank each site on its country-specific search engines, and will therefore boost your rankings.

2. Server Location

Check with your chosen web service providers that their server is actually held in your target country. Again this will help with your SEO, as search engines favour sites which are hosted in their ‘home’ country.

3. Meta Keywords

Ensure that you are including the best possible keywords in your copy, and if possible in your URL.

It isn’t enough to simply translate the keywords that you use on your English site on a word-for-word basis; different nationalities use different phrases in their searching habits, including synonyms, acronyms, colloquialisms and abbreviations, and you will need to adapt your keywords accordingly. Google’s keyword tool can help you with this.

4. Design

While you will want to create cohesive and consistent branding across all of your sites, the design of each site should allow for that country’s cultural preferences.
Using Cascading Style Sheets (CSS) allows for table-less design and separates content from design, meaning that you won’t have to re-design each page from scratch.

Elements to consider in your design include:

• Colour
  Colour can be very culturally significant, with the same colour having vastly different connotations around the world. For example red, in the West, signifies danger, while in China it suggests celebration and in India, purity. Take some time to investigate what your colour scheme may mean to your consumers. A green or blue background with white or black text tends to be the most universally accepted.
• Imagery
  Adjust your images for each site, and ensure that you are culturally aware. For example, a Western travel website may show holidaymakers in bikinis, but this could be considered inappropriate and even offensive in more conservative Eastern cultures.
• Navigation
  Not all languages read from left to right – Arabic for instance, the world’s fifth most influential language, reads from right to left. Choosing a horizontal navigation bar instead of a vertical one will help to combat this issue.
• Font
  It is important to use a common font, so that the text is displayed correctly on most screens. Sans serif fonts such as Arial or Verdana are easy on the eye.
• Use Unicode
  Unicode UTF-8 is a flexible character encoding tool which is compatible with over 90 written languages. Using this will make it easier to switch between languages.
  Bear in mind that different character sets mean changing line heights and widths. Also, certain languages use more characters to express the same ideas, for example German words tend to be longer than English words. So be sure to factor this into your page design.
• Avoid Flash
  The text embedded in Flash is not easily read by engine bots, which will impede your SEO progress. Also, not all countries have high speed Internet access so a Flash site may take too much time to load.

5. Content

The fundamental point here is to make sure that your content is translated correctly. To gain the trust of your potential customers, you will need to ensure that the nuances of the local language and culture are observed.

Tempting though it may be to use an automatic translation program, there is really no substitute for using a professional translator working in their native tongue. Text converted by a machine translation tool rarely reads naturally, and you will run the risk of confusing, or even offending, your target audience.

With these points in mind, the world is your oyster, and your website will be sure to attract new customers across the cosmos.

Credits: Vector tech map by Chadlonius

This step-by-step beginner’s guide takes the pain out of using the world’s best open source e-commerce solution. It guides you through installing the software, configuring your store, populating your store with products, accepting payments, maintaining relationships with your customers, and fulfilling orders.

As your online store grows, you can be sure that this robust e-commerce system will handle your needs. However, getting started with Magento can be difficult without the right guidance. This book provides that guidance in the form of a step-by-step approach to build a simple and effective online store. As you follow along with the guided lessons, you will see how an online coffee store is created from the ground up.

The Cover

Book Description

• Step-by-step guide to building your own online store
• Focuses on the key features of Magento that you must know to get your store up and running
• Customize the store’s appearance to make it uniquely yours
• Clearly illustrated with screenshots and a working example

Free sample for my readers

The publisher sent me a sample chapter (.PDF format) on “Categories and Attributes” that will teach you how to add products to their online Magento store. You can view or download it here.

Where to buy?

You can buy or read more about at PACKT Publishing.

I hope you will find this list useful. Please, if you think this list is incomplete, add your link in the comments.

iPhone GUI:

• iPhone GUI PSD 3.0
  (Photoshop CS4)

  

• Fireworks toolkit for creating iPhone UI mockups
  (Fireworks CS3 and CS4)

  

• FreshBooks iPhone Application GUI
  (Photoshop)

  

• 320480 – iPHone Interface PSD file
  (Photoshop)

  

• Designing the User Interface of Your iPhone Application
  (Official documentation: iPhone Human Interface Guidelines)

  

Android GUI:

• Android GUI PSD v. 1.0 (for Android 1.5)
  (Photoshop)

  

• Google Android GUI PSD
  (Photoshop)

  

• Android User Interface Guidelines
  (Official documentation)

  

• DroidDraw Beta
  (User Interface (UI) designer/editor for programming the Android Cell Phone Platform)

  

Palm Pre GUI:

• Palm Pre GUI PSD
  (Photoshop CS4)

  

• Palm Pre User Interface Guidelines
  (Official documentation)

  

iPad GUI:

• iPad GUI PSD
  (Photoshop CS4)

  

• ipad vector GUI elements: tabs buttons menus icons
  (Illustrator, Photoshop – Found on Nettuts)

  

• iPad Human Interface Guidelines
  (Documentation: Design an incredible user interface and user experience for your iPad application by following the iPad Human Interface Guidelines. )

  

Let’s get started

For this tutorial, I will assume you are familiar with Aptana and have installed it on your Computer. If not, you can download it for free here. As we speak, version is 1.5.

Launch Aptana Studio and open the Projects and Snippets Views (Window > Show View).

How to Use Code Snippets in your projects

You might not be aware of it but everytime you click on a button in your toolbar you are actually using a code snippet:

Alternatively, you can just expand a folder in the Snippets view and double click a snippet or right click and “Apply snippet” to quickly insert a piece of code into your HTML, CSS, JavaScript, PHP, XML… files.

Edit an existing Snippet

If you want to edit a Snipppet, expand a folder in the Snippets View (e.g. HTML, CSS…), right-click on the snippet you want to edit and select “Edit Snippet”.

Add a new snippet (step by step tutorial)

For this tutorial, we are going to create a new HTML snippet to Wrap text with <a> and prompt users to type link url and title. Our snippet will generate this code: <a href="http://domain.com" title="Your Title Here" target="_blank" rel="nofollow">selected text here</a>.

• To add a new Snippet, you must create a new folder named snippets in any top-level folder of your Project View. You only need to do this the first time you create a snippet.
• In your snippets folder, create a blank HTML file and give it a name (e.g. wrap-with-a-options.html).

   

  

   

• In Snippets View, expand Snippet Templates and select “HTML Snippet Template”. It will open a dialog box and prompt you to enter the name of your Snippet (e.g. “Wrap with <a> (Options)”):

   

  

   

  Aptana will generate the following code for you on top of your HTML file:
  

  ^?View Code HTM4STRICT

  1 2 3 4 5

  <!-- category: HTML name: Wrap with <a> (Options) toolTip: Wrap with <a> (Options) -->

• Next, add your code snippet:
  
  ^?View Code HTM4STRICT

  1 2 3 4 5 6

  <!-- category: HTML name: Wrap with <a> (Options) toolTip: Wrap with <a> (Options) --> <a href="" title="" target="_blank" rel="nofollow"></a>

• Now, we need create some variables to prompt users to enter url and title for the link they want to generate. We will use prompt(var_name): promptText where var_name is the name of the variable and promptText is the text that you want the Snippet to prompt the user with. Here how it goes:
  
  ^?View Code HTM4STRICT

  1 2 3 4 5 6 7 8

  <!-- category: HTML name: Wrap with <a> (Options) toolTip: Wrap with <a> (Options) prompt(url): Enter URL prompt(title): Enter Title --> <a href="${url}" title="${title}" target="_blank" rel="nofollow"></a>

• We will go one step further and wrap our code around ${selection}. This will let you select the text you want to link:
  
  ^?View Code HTM4STRICT

  1 2 3 4 5 6 7 8

  <!-- category: HTML name: Wrap with <a> (Options) toolTip: Wrap with <a> (Options) prompt(url): Enter URL prompt(title): Enter Title --> <a href="${url}" title="${title}" target="_blank" rel="nofollow">${selection}</a>

• Save your file. This snippet is ready to use and should now be filed in the Snippets View under HTML. To use it, place your cursor somewhere in a HTML file or select the text you want to link, and click twice on your snippet to insert it.

Add Snippet to toolbar (optional)

Following our previous example, we are now going to add our snippet to the toolbar:

1
2
3
4
5
6
7
8
9
10
11
12

<!--
	category: HTML
	name: Wrap with <a> (Options)
	toolTip: Wrap with <a> (Options)
	prompt(url): Enter URL
	prompt(title): Enter Title
 
	toolbar: true
	icon: com.aptana.ide.snippets/icons/link.png
	language: text/html
-->
<a href="${url}" title="${title}" target="_blank" rel="nofollow">${selection}</a>

toolbar : if set to “true”, show snippet in toolbar
icon : relative path to icon toolbar item. (default path: com.aptana.ide.snippets/icons/)
language : MIME type of content to wich this item is related. Options: text/html, text/css, text/javascript…

Unfortunately, there seems to be no easy way to add your own set of icons. This has been reported in a ticket and we just have to hope someone will work on this. However, all is not lost. Icons are stored in a JAR archive: C:\Program Files\Aptana\Aptana Studio 1.5\plugins\com.aptana.ide.snippets_1.5.0.24896.jar\icons in Windows (please note path to this folder might be slightly different for you). Copy your icons to this folder and change the name of your icon in the code above and it will appear in toolbar (you will have to restart Aptana first).

The End Result

In the screenshot below, you can see the new icon in the toolbar on the right. Select the text you want to link, click on the button and you will be prompted to enter the url and title for this link:

Last word

I hope you enjoyed this tutorial. Do not hesitate to share your snippets with us in the comments.

Smashing Magazine put together a great list of code snippets repositories. Check their article: 45+ Excellent Code Snippet Resources and Repositories

And you? What software or application do you use to store your snippets?

Preview / Download

This menu is released under a Creative Commons Attribution-Share Alike 2.0 License. Feel free to do whatever you’d like with this menu or template, just please give credit where credit is do.

Step 1: The HTML

HTML code is pretty simple:

1
2
3
4
5
6
7
8
9
10
11
12

<div id="sponsors">
    <span>Our Sponsors:</span>
 
    <a class="mootools" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="drupal" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="technorati" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="jquery" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="miro" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="mozilla" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="nbc" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="twitter" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="wordpress" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a></div>

The same result could be done with an unordered list but I didn’t see the necessity to add extra tags to my document.

Step 2: CSS Sprites

A sprite is basically multiple graphics combined into one single file. To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed.

Google makes good use of CSS sprites on their search page:

The main advantages of using sprites are:

• Fewer images for the browser to download, which means less http requests.
• Total images size is generally smaller.
• Rollover image appears instanlty on mouseover.

For this example, we are going to create a color version and a grayscale version and merge them into one file as you can see below:

Include the CSS code below in the head of your html document or in an external style sheet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!--
#sponsors {
	width: 940px;
	display: block;
	clear: both;
	border: 1px solid #eee;
	padding: 10px 5px;
	margin: 15px auto;
	text-transform: uppercase;
	font-weight: bold;
	color: #666;
}
#sponsors span {
	display: block;
	float: left;
	padding: 0 10px;
	height: 20px;
	line-height: 20px;
}
#sponsors a {
	display: block;
	float: left;
	height: 20px;
	padding: 0 10px;
}
a.mootools {background: url(images/mootools.jpg) no-repeat 0 0; width:85px;}
a.drupal {background: url(images/drupal.jpg) no-repeat 0 0; width:74px;}
a.technorati {background: url(images/Technorati.Jpg) no-repeat 0 0; width:107px;}
a.jquery {background: url(images/jquery.jpg) no-repeat 0 0; width:63px;}
a.miro {background: url(images/miro.jpg) no-repeat 0 0; width:23px;}
a.mozilla {background: url(images/mozilla.jpg) no-repeat 0 0; width:63px;}
a.nbc {background: url(images/nbc.jpg) no-repeat 0 0; width:75px;}
a.twitter {background: url(images/twitter.jpg) no-repeat 0 0; width:87px;}
a.wordpress {background: url(images/wordpress.jpg) no-repeat 0 0; width:20px;}
 
	/*mouseover*/
	a:hover.mootools, 
	a:hover.drupal, 
	a:hover.technorati, 
	a:hover.jquery, 
	a:hover.miro, 
	a:hover.mozilla, 
	a:hover.nbc, 
	a:hover.twitter, 
	a:hover.wordpress {background-position: 0 -20px;} /* reveal color version */
-->

In the initial state, we only want to see the grayscale version. In order to do that, we set the background-position property to “0 0″ in our CSS. On mouseover, we change background-position to “0 -20px” to reveal the color version.

(If you want to learn more about sprites, check this excellent article from Smashing Magazine: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials)

Step 3: the Javascript (js/colorize.js)

I have commented the JS. It should be self-explanatory but if you have any question, ask in the comments below.

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

window.addEvent('domready', function(){
 
	var sponsors = $$('#sponsors a').setStyle('opacity', 0.5); // Set opacity to 0.5 for grayscale image
 
	sponsors.set('tween',{duration:200, wait:false}).addEvents({
 
		//On mouseenter
		'mouseenter': function(){
			this.setStyle('background-position','0 -20px'); //Reveal color image
			this.get('tween').start('opacity',1); //set opacity to 1
		},		
 
		//on mouseleave
		'mouseleave':function(){
			this.setStyle.delay(500,this,['background-position','0 0']); //set back initial background-position for grayscale image
			var tween =  this.get('tween');
			tween.start.delay(500, tween,['opacity',0.5]); //set back initial opacity
		}
 
	});
});

Step 4: Make it happen!

Finally, add links to the Mootools 1.2 and colorize.js in the head of your html document:

1
2

<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"><!--mce:0--></script>
<script src="js/colorize.js" type="text/javascript"><!--mce:1--></script>

Test your page in a browser and you will be all set.

A while ago, I started to sketch a few menus in my notebook. I wanted a menu that would be minimalist – almost invisible – but still accessible, some kind of button or maybe a link that would open the menu. I started to think where would be the best place to put it. In the upper left corner? The right one? Next to the logo? And why not the logo or title itself?! That’s it. Users are most likely to hover the logo or header, right? That made the most sense.

That was now time to roll my sleeves up and see how to implement this. After a few hours and some headaches, I came up with a nice hidden jQuery Drop Down Menu.

Here’s how it works. When user put his cursor over the header, the script hides the logo/title and reveals the navigation along with a search bar (not functional in this demo). When user leaves the menu, navigation fades out after 3 seconds and logo/title comes back.

Preview/Download

This menu is released under a Creative Commons Attribution-Share Alike 2.0 License. Feel free to do whatever you’d like with this menu or template, just please give credit where credit is do.

Screenshots

Navigation – initial state:

Navigation – on mouseenter:

Step 1: HTML

We need to create two containers inside our header: “nav-disabled” and “nav-enabled”. By default, “nav-enabled” is hidden. This will be the container for our navigation.

1
2
3
4
5
6
7
8
9
10

<!-- Our demo Starts Here -->
<div id="header" colla="-">
	<div class="nav-disabled">
		[LOGO OR TITLE HERE]
	</div>
	<div class="nav-enabled">
		[YOUR NAVIGATION HERE]
	</div>
</div>
<!-- /END DEMO -->

Add your logo. For this example, we are only going to use plain text but feel free to replace it by anything you want.

1
2
3
4
5
6
7
8
9
10
11

<!-- Our demo Starts Here -->
<div id="header">
	<div class="nav-disabled">
		<h1>Hidden jQuery Drop Down Menu - Hover Me!</h1>
		<small>&uarr; MENU</small>
	</div>
	<div class="nav-enabled">
		[YOUR NAVIGATION HERE]
	</div>
</div>
<!-- /END DEMO -->

Finally, create an unordered list for your top navigation. Then simply nest another unordered list for your sub-navigation. My jQuery script only allows for a two level navigation which I think should be enough in most cases.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!-- Our demo Starts Here -->
<div id="header">
	<div class="nav-disabled">
		<h1>Hidden jQuery Drop Down Menu - Hover Me!</h1>
		<small>&uarr; MENU</small>
	</div>
	<div class="nav-enabled">
		<ul class="nav">
			<li>Navigation &rarr;</li>
			<li><a href="http://web-kreation.com">Home</a></li>
			<li><a href="http://web-kreation.com/index.php/services">Services</a>
				<ul class="dropdown">
					<li>&darr;</li>
					<li><a href="http://web-kreation.com/index.php/services">Nemo enim ipsam</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Voluptas</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Aspernatur</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Nemo enim ipsam</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Voluptas</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Aspernatur</a></li>
				</ul>
			</li>
			<li><a href="http://web-kreation.com/index.php/category/portfolio">Portfolio</a></li>
			<li><a href="http://web-kreation.com/index.php/blog">Blog</a></li>
			<li><a href="http://web-kreation.com/index.php/about">About</a>
				<ul class="dropdown">
					<li>&darr;</li>
					<li><a href="http://web-kreation.com/index.php/services">Nemo enim ipsam</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Voluptas</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Aspernatur</a></li>
				</ul>
			</li>
			<li><a href="http://web-kreation.com/index.php/contact">Contact</a></li>
			<li><a href="http://web-kreation.com/index.php/articles/hidden-jquery-drop-down-menu-for-minimalist-design">Go Back to Article &raquo;</a></li>
		</ul>
		<small>Pretty cool this menu, huh? You could replace the title by your own logo, an image... anything you want really. This menu will fade out after 3 seconds. Seach bar is not functional. This is just a demo.</small>
		<form method="get" id="search" action="">
			<input class="search-input" type="text" value="" />
			<input class="search-submit" type="submit" value="SEARCH" />
		</form>
	</div>
</div>
<!-- /END DEMO -->

That’s it for the HTML.

Step 2: CSS (minimalist-menu.css)

Next, style your header and navigation with CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

body {
    font-size: 80%;
}
 
#header {
	padding: 40px 40px 0;
	clear: both;
  	display: block;
	font-family: Georgia, "Times New Roman", Times, serif;
}
 
#header a {
	text-decoration: none;
}
 
#header small {
	color: #999;
	font-size: 0.8em;
	margin-top: 5px;
	float: left; 
	width: 600px;
	padding-left: 10px;
}
 
#header .nav-disabled, #header .nav-enabled {
	display: block;
	clear: both;
	height: 70px; /* Fixed height to make sure navigation doesn't flick on mouseleave - set it to anything you want */
}
 
#header .nav-disabled h1 {
	background: url('../images/ui-menu-disable.png') no-repeat 6px 3px;
	padding-left: 26px;
	display: block;
	height: 21px;
	padding-top: 3px;
	color: #709A71;
	text-transform: uppercase;
	font-size: 1.5em;
}
 
ul.nav {
  	display: block;
	border: 1px solid #E6E6E6;
	text-transform: uppercase;
	height: 22px;
	background: #F3F3F3 url('../images/ui-menu.png') no-repeat 5px 3px;	
	padding-left: 20px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;	
	-moz-border-radius: 4px;
	border-radius: 4px;
}
 
ul.nav li {
	display: block;
	float: left;
	height: 12px;
	padding: 5px 10px;
	border-right: 1px solid #E6E6E6;
	color: #666; 
	position: relative;  
}
 
ul.nav li a {
	color: #666; 
}
 
ul.nav li a:hover {
	color: #333; 
	text-decoration: none;
}
 
/* Subnav */
ul.nav li.btn a {
	background: url(../images/subnav_btn.gif) no-repeat right 4px; /* add arrows next links when subnav exists */ 
	padding-right: 20px;
}
 
ul.nav li.btn a:hover, ul.nav li.hover {
	background-position: right -35px;
}
 
ul.nav li ul.dropdown {
	display: none;
	list-style: none;
	position: absolute;
	float: left;
	left: 0; 
	top: 22px;
	width: 160px;
	background: #F3F3F3;
	margin: 0; 
	padding: 0;
	border-left: 1px solid #E6E6E6;
	border-right: 1px solid #BBB;
	border-bottom: 1px solid #BBB;
}
 
ul.nav li ul.dropdown li {
	margin: 0; 
	padding: 0;
	border-top: 1px solid #E6E6E6;
	clear: both;
	height: 14px;
	width: 139px;
	padding: 5px 10px;
	display: block;
}
 
ul.nav li ul.dropdown li a {
	text-transform: none;
	background: transparent!important;
}
 
html ul.nav li ul.dropdown li a {
	float: left;
}
/* Search Form */
#header #search {
    background: transparent url('../images/search.gif') no-repeat 0 0;
    height: 20px;
    width: 240px;
    float: right;
	margin-top: 5px;
	padding-right: 10px;
}
 
#header .search-input, #header .search-submit {
    background: transparent;
    border: none;
    float: left;
	color: #999 !important;
}
 
#header .search-input {
    padding: 2px 6px;
    width: 170px;
}
 
#header .search-submit {
    cursor: pointer;
    padding: 3px 0;
    width: 56px;
    font: 0.85em Georgia, "Times New Roman", Times, serif;
}

Step 3: JS (minimalist-menu.js)

This menu requires jQuery 1.3.2 and jquery.event.hover.js from Three Dub Media.

Below is the code that will do all the magic:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

// ##################################
//Variables
// YOU CAN EDIT BELOW
 
var navFadeOutDelay = 3000; // Set delay for drop down to slide down (in ms)
var slideDownDelay = 200; // Set delay for drop down to slide down (in ms)
 
 
// DO NOT EDIT BELOW THIS LINE
// ##################################
 
 
 
$(document).ready(function(){
 
	// Plugin: Delay
	// http://tech.apt.no/2009/04/01/delay-in-jquery/
	(function($){
		jQuery.fn.delay = function(millis,callBack){
			var object = $(this);
			$.extend(object,{callBack:callBack});
			return window.setTimeout(function() {
				object.callBack();
				return object;
			}, millis);
		}
	})(jQuery);
 
 
	// Navigation:
	// requires jquery.event.hover-1.0 plugin : http://blog.threedubmedia.com/2008/08/eventspecialhover.html 	
	var nav = {count:0};
 
	$("#header .nav-enabled").hide(); //hide navigation on page load. 
	$(function(){
		$('#header').bind('hover',function(){ // On mouseenter, hide title and show navigation
	        $("#header .nav-disabled").hide();
	        $("#header .nav-enabled").fadeIn();
			nav.count += 1;
		}).bind('hoverend',function(){ // On mouseleave, fade out navigation and show title
			var tmp = nav.count;
			$("#header .nav-enabled").delay(navFadeOutDelay, function(){ // Delay: wait X ms before navigation FadeOut                
                if (tmp == nav.count) { // prevent delay from firing if user hovers navigation before the end of delay
			        $(this).fadeOut('slow', function(){ //Callback					
						$("#header .nav-disabled").show(); 
					}); 
                }				
		    });   
		});
	});
 
 
	// Drop Down Navigation
	$("ul.dropdown").parent().addClass("btn"); // hide sub-navigation on page load and adds class to li in topnav
 
	$("ul.nav li.btn").hover(function() { 
		$(this).find("ul.dropdown").slideDown(slideDownDelay).show(); //Slide subnav down on mouseenter
	}, function(){
		$(this).find("ul.dropdown").slideUp('slow'); //Slide subnav up on mouseleave
	}); 
 
 
});

Preview/Download

Conclusion

The menu is really simple and should be easy to customize as it only makes use of CSS (no images except for the menu icon). I have added rounded corners to the demo with CSS3. However, this is only supported by Firefox, Chrome and Safari. If your site needs to be CSS compliant, I recommend you remove the CSS code from line 50 to 53 (in CSS code above).

This menu has been tested in IE6+, FF3.5, Opera 10, Safari 4, Chrome 2 in Windows XP only. If you find a bug or have a suggestion, concern, feedback… leave your comments below and I will make my best to answer you.

The template used for this demo was inspired from my Pignews theme (coming soon!). Use this template as you wish but just please give me credits.

If you are new to this blog, the Gorilla Project is an opensource project created by Chris and myself to overcome common issues encountered by a single WordPress theme designer. Our goal is to build a large community of WordPress designers and developers to collaborate together to build FREE Premium WordPress themes, maintain and upgrade the themes to the latest WordPress version, fix bugs, make the themes cross browser and cross OS platform compatible,offer support to users (forum), write tutorials, create a theme framework to speed up themes development, write an extensive documentation (Wiki) for WordPress developers willing to create a theme for the Gorilla Project.

“WPSynergy” in place of “The Gorilla Project”

First of all, after we discovered someone else was using a similar name for his Premium WordPress themes site, we renamed “The Gorilla Project” to “WPSynergy” – even though Matt Mullenweg told us not to on our Google groups. The new name was proposed by Jeffro from WordPress Tavern with the following definition:

Synergy: The enhanced result of two or more people, groups or
organizations working together. In other words, one and one equals
three! It comes from the Greek “synergia,” which means joint work and
cooperative action. The word is used quite often to mean that
combining forces produces a better product.

This was clearly in line with our project so we decided to go for it.

Logo

Logo design followed a long process and after many concepts and feedbacks on Conceptshare, a few votes from the WordPress community and a few other modifications, we finally got our final logo (below). I hope you like it.

Logo, as all of our free themes, is released under a GPL2 license. Illustrator source file can be downloaded here. As usual, feel free to download it, modify it and upload the new version if you don’t like the one you see here.

SVN, Trac, dev site, mailing list

To be more productive while developing our opensource wordpress themes, we created an infrastructure on Chris’ server:

• http://dev.wpsynergy.org/: P2 WordPress theme for any discussion related to development. If you want to Join our team start by creating an account there.
• http://bugs.wpsynergy.org/: Trac to keep track of our themes and report bugs
• http://svn.wpsynergy.org/: SVN for our themes repository
• http://groups.google.com/group/wpsynergy: our mailing list on Google Groups.
  (Register if you want to be part of this mailing list)

On my server – which will host the themes, demos and forum – we installed WordPress MU for the theme demos and BBpress as our support forum.

Our themes

We are actively working on PigNews. You can follow the progress here (please, note we didn’t fix IE6′s bugs yet). However, mostly because of a lack of time and a low involvement from the WordPress community, we are striving to finish the theme. We hope more designers and developers will join our effort after we released a few themes and complete the official site at http://wpsynergy.org.

Pignews color schemes:

If you want to help us develop Pignews, grab the files from the SVN trunk. (If you are new to SVN, start by downloading Tortoise.) (To make a SVN update or commit, you will have to request a password from Chris to access SVN. His email is chris[a-t]wpsynergy {d-o-t}org.)

Other themes to be part of WPSynergy

• OneRoom
• Synjob

How can you help us?

Once again, we are asking for help from the WordPress community. If you are a designer or developer, there’s many way to be involved in this project. As a designer, we need you to create stunning themes, design mascots, logos, icons… As a developer, we need you to enhance our themes with options page, add AJAX effects, configure servers, develop our Options theme Framework… and we need everyone to spread the word (on twitter, Facebook, on your blog…) to move this project forward and take it to the next level.

Thanks to everyone for supporting us and a special thanks to Matt Mullenweg for his support since the beginning of this project. We really appreciate.

They created a wiki page hosted on Google Code site to give us a series of tutorials to improve website performance:

What about their code?

I wanted to check if Google put into practice what they teach us on that page so I opened their search page and examined it with Firebug.

Is their code optimized for a better website performance? Yes, definitely!

HTML, CSS, JS

Their Javascript, CSS and html code is compressed to fit on one single line only, no external style sheet.

They use short CSS tags such as “ssb”, “tbd”, “cnt”… to make their code lighter (this is only a sample of their code):

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

<html>
 <head done="done"></head>
 <body id="gsr">
  <textarea id="csi" style="display: none;"/>
  <div id="header"></div>
  <div id="ssb"></div>
  <div id="tbd" class="med"/>
  <div id="cnt"/></div>
  <br clear="all"/>
  <table id="nav"></table>
  <div class="std"></div>
  <div id="wml"></div>
  <div id="xjsd"></div>
  <div id="xjsi"></div>
</body>
</html>

Images:

They use only one image instead of a few small images:

… and just change background position for each css class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

.w10, .w11, .w20, .w21, .w24, .wci, .wpb, .w4, .w5, .w40, .w41, .w44, .w50, .w51, .w54, li.w0 .w5, li.w1 .w5 {
    background: url(/images/nav_logo6.png) no-repeat;
    border: 0;
    cursor: pointer;
    display: none;
    margin-right: 3px;
    height: 14px;
    vertical-align: bottom;
    width: 14px
}
 
.w10, .w11, .w20, .w21, .w24 {
    height: 16px;
    margin-left: 8px;
    width: 16px
}
 
.w10 {
    background-position: -104px -42px
}
 
.w11 {
    background-position: -134px -27px;
    cursor: default;
    display: inline
}
 
.w20 {
    background-position: -104px -57px
}
 
.w21 {
    background-position: -104px -27px
}
 
.w24 {
    background-position: -134px -44px;
    cursor: default;
    display: inline
}
 
.wci, .w4, .w5, .w40, .w41, .w44, .w50, .w51, .w54, li.w0 .w5, li.w1 .w5 {
    display: inline;
    height: 14px;
    width: 14px
}
 
.w14, .w44, .w54 {
    display: none
}
 
.wci {
    background-position: -119px -87px;
    height: 14px;
    width: 16px
}
 
.wpb {
    background-position: -91px -74px;
    display: inline;
    height: 13px;
    vertical-align: 5px;
    width: 13px
}
 
.w4, .w40, .w41, .w44 {
    background-position: -104px -42px
}
 
.w5, .w50, li.w0 .w5, .w54 {
    background-position: -104px -57px
}
 
.w51, li.w1 .w5 {
    background-position: -104px -27px
}
 
.wcd {
    margin-top: 2px;
    max-width: 42em
}

This is a technic I use often but I never thought to convert all my images in just one big image.

Last Word

Knowing that Google counts some of the best engineers on the web, makes use of the latest web standards and technologies (HTML5, CSS3, AJAX…) and is maybe one of the most innovative company on the web, I think it is definitely worth and good practice to follow their tips and take time to view their source code. There’s a lot to learn in there for anyone eager to learn.

Link: Let’s Make The Web Faster
Firefox Plugin: Page Speed

While it is really great to have so many people contributing to it, there’s some limitations when it comes to free WordPress themes created by individuals:

• They have real difficulties to keep their themes up to date with the latest WordPress releases.
• Their themes are not always cross browsers and cross platforms.
• Their support is limited.
• They usually don’t have all the skills needed to make a Premium Theme.
• After a while, they might completely cease to maintain their themes because of lack of time or boredom.
• As themes are updated by authors, upgrading will usually mean losing any custom styles you’ve added.
• Many themes are offered as “one size fits all”, and can only be customized with knowledge of HTML/CSS.

Here comes the Gorilla Project WPSynergy Project, an opensource project created by Chris and I to overcome these common issues. Our goal is to build a large community of WordPress designers and developers to:

• Collaborate together to build FREE Premium WordPress themes. Some companies (Woothemes, ithemes…) offer excellent premium WordPress themes but you have to pay for it!
  (“A premium theme refers to themes that have more quality in terms of design, or maybe layouts (magazine, grid, showcase, etc) that differs them from the majority free themes. It’s also fair to label them as themes that allows you to do more customization, or even displays content in a different formats” – Hongkiat)
• Maintain and upgrade the themes to support the latest versions of WordPress.
• Fix bugs.
• Make the themes cross browser and cross OS platform.
• Offer support to users (forum).
• Write tutorials.
• Create a theme framework to speed up themes development.
• Write an extensive documentation (Wiki) for WordPress developers willing to create a theme for the Gorilla WPSynergy Project.

We need your help!

The gorilla project WPSynergy Project is going to be a huge and exciting project but we need your help to make it successful. Here’s how you can contribute:

• Designers, we need your talents to design stunning themes, icons, mascots in Photoshop, Fireworks or any other image editor. We have a number of theme designs planned, but it would be nice to have an extra hand in the future.
• Front end developers, we need you to code the theme in valid (X)HTML/CSS.
• Back end developers, right now, Chris is looking for PHP developers to help develop the “Gorilla Theme Options Framework” (GTOF) SYNTOF (WPSynergy Theme Options Framework) which we will be uses as the main framework for our themes. But we are also looking for contributers to other back end development projects – options pages, widgets, plugins…you name it!
• Blog Owners, a section at wpgorilla.org wpsynergy.org will be created for you to report bugs, suggest improvements and new ideas…
• Readers (yes, you too can help!), we need you to spread the word! Tweet it! Digg it! Stumble it! Talk about it on your blog. Help us grow this new community and make this project a reality and you will soon be able to download premium WordPress themes for free!

Ready to help?

If you are ready to help, you can contact us at joinus {a t} wpgorilla {d o t} o r g joinus {a t} wpsynergy {d o t} o r g or head to Launchpad our DEV site and pick a project. We are just starting out so you are not going to find much there at the moment but you can be the first one to propose a new project or you can help us develop the “Gorilla Theme Options Framework” (GTOF) SYNTOF till completion – anyone interested in finding out more can email chris {at} wpgorilla {dot} org chris {at} wpsynergy {dot} org for more information.

If you need help with Launchpad, read this »

Pignews theme – our first theme to be part of this project – is going to be on hold until we finish Gorilla Theme Options Framework (GTOF) SYNTOF but in the meantime you can review the concepts on Flickr and give us your feedback.

All the themes created by the Gorilla WPSynergy community will be hosted at www.wpgorilla.org www.wpsynergy.org. The site is under construction at the moment (see screenshot below). If you want to help me with the development of this site, contact me at jeremie {a-t} wpgorilla {d-o-t} org jeremie {a-t} wpsynergy {d-o-t} org. The fastest we build this site and the fastest we will be able to release free premium themes there.

Benefits of this project

If you run a WordPress blog, the benefits are quite obvious: you will be able to download free Premium WordPress themes and plugins developed and maintained by a large community of WordPress developers.

If you are a designer or developer (or both!), you will be able to work with various professionals, make contacts, learn new ways to build a WordPress theme and hopefully make WordPress a better CMS. We plan to create a page on WPGorilla.org WPSynergy.org to list our most active team members with a bio and a link to their site.

In the end, everyone will benefit from this project… so don’t forget to spread the word!

Links

Official Site: http://wpgorilla.org/

Projects:https://launchpad.net/~wpgorilla

Theme Concepts: http://www.flickr.com/groups/wpgorilla/

Google Group: http://groups.google.com/group/wpgorilla

UPDATE:

Official Site: http://wpsynergy.org/

SVN:SVN

TRAC: Bugs

Discussions: Dev Site

Then, a few weeks ago, when one of my client asked me if I could design some Twitter illustrations for one of his project, I thought it would be nice to design a couple of Twitter icons to give away on my blog. I started to sketch out a few ideas and finalized them in Illustrator. Here’s the end result:

Download

The zip contains two transparent PNG icons available in resolutions of 128×128 pixels, 256×256 and 512×512:

Alternatively, you can download the source files if you need to modify text or colors. The sources are in AI files (Adobe Illustrator CS3), PSD files and EPS files:

You can freely use them for both your private and commercial projects, including templates and themes. A link back or some credits would be nice but not mandatory.

Conclusion

That’s my small contribution to the Twitter community. Leave me a note in the comments if you like them or Follow Me! I have a couple of other sketches waiting in my notebook so I might create more icons in the future if you really like them.

Update:

You can preview the icons on my Flickr account if you want to see how they look when size is reduced:

Andreas Papula made a green version of one of the icon above (PSD file). To download this icon, use this direct link: http://www.studio0611.de/misc/break_the_egg_green.psd.zip