The advent of HTML5 has created a new set of opportunities for web developers and site architects. The new system has also forced those unfamiliar with its origins to reassess how they view their site design, especially when it comes to questions of search engine optimization. How will HTML5 interact with the current search engine spiders, such as Googlebot and Bing, and how will those crawlers evolve in this dynamic environment?

New Content Tags

One of the biggest new features in HTML5 is the new set of markup tags. These tags have been designed to reflect the new state of web content, such as articles, sidebars, headers and footers. Many of these tags replace or supplement the <div> tags from HTML4 with additional functionality

Tag: <header> Page Function: Similar to <h1>, <h2>, etc., but can also contain a logo and navigation data. SEO Function: Just as with the <h1> tags, the <header> tags inform the crawlers that the contents are highly relevant to the page content. Example:

<header> <img src = “images/company_logo.jpg”> <h1>Main Header</h1> <h2>Subheadline</h2> </header>

Tag: <nav> Page Function: The <nav> tag allows designers to separate the major navigation functions from the page content. The <nav> tags typically nest inside the <header> tags at the top of a page. SEO Function: Links enclosed in a <nav> tag inform the spiders about the major sections of a site’s content. Example:

<nav> <ul> <li><a href=”/dccomics”>DC Comics</a></li> <li><a href=”/marvelcomics”>Marvel Comics</a></li> <li><a href=”/imagecomics”>Image Comics</a></li> <li><a href=”/darkhorsecomics”>Dark Horse Comics</a></li> </ul> </nav>

Tag: <article> Page Function: The <article> tag contains independent, self-contained content. Although the content in the <article> tags can relate to the other content on the page, it can also stand alone. SEO Function: Since “content is king” for search engines, the primary target for crawlers will be within the <article> tags. Example:

<article> <h1>Superman</h1> <h2>Origin of Superman</h2> <p>Rocketed as a baby from the doomed planet Krypton, Kal-El was adopted by Jonathan and Martha Kent, a childless couple from Smallville, Kansas, and named “Clark...

Here’s a cool CSS technique that we can use to give a hover effect to a group of divs, and then an additional effect to the element being hovered on!

Twitter uses this effect with their sharing links on a tweet. When you hover over an individual tweet, the reply, retweet and favorite links appear, like this:

But then when you place your cursor over one of the links, it becomes underlined, while the others remain revealed, but not underlined, like this:

In this example we’ll create the same effect. We’ll use divs that will not be visible until we hover over the parent div, and then we’ll underline each div once it is hovered on.

Here’s our HTML:

<section class="parent"> <p>Section text would go here</p> <div class="child">Share</div> <div class="child">Like</div> <div class="child">Tweet</div> </section>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

And our CSS looks like this:

.parent { width: 400px; height: 100px; background: #fff; border: 2px solid #000; margin: 10px; } .child { opacity: 0; color: #000; margin-left: 10px; float: right; } .child:hover { opacity: 1.0; text-decoration: underline; cursor: pointer; } .parent:hover > .child { opacity: 1.0; }

Check out a live (editable) demo here: DEMO

Feel free to ask any questions in the comments below!

...

Speed. It’s an important factor in the recent Olympics, the Paralympics and even our day to day lives. Speed is also an important factor when it comes to Google. Their ethos concerns the provision of accurate, relevant search results delivered as quickly as possible to the user. To quote their Webmaster Guidelines:

“Monitor your site’s performance and optimize load times. Google’s goal is to provide users with the most relevant results and a great user experience. Fast sites increase user satisfaction and improve the overall quality of the web …”

We’re going to take a look at some factors and tools that you can use to monitor, identify site speed issues and some quick wins you can look at getting now.

Webmaster Tools

Got access to Webmaster Tools? Yes? Great stuff. No? Go get it kiddo. I highly recommend you make sure you sign up for and setup Google Webmaster Tools for your site. Big G is really good at updating its features and carefully used it can become a genuine line of communication between you and the giant search engine.

The above is a screen shot from Google’s Webmaster Central Blog showing the graph they produce for a website so you can see site performance historically.

Analysing your site speed

Apart from Google’s own site speed performance charts as above, there are a myriad of available tools you can use to track and analyse the current speed of your website. Here are a few and they’re all free.

Page Speed – Recommended by Google, open source Firefox and Firebug plugin that evaluates performance available on Google Developers site.

YSlow – A plugin from Yahoo that provides some great analysis on page and gives recommendations on speeding things up.

A few personal preferences:

Pingdom – Great websites that gives you a complete breakdown of what’s taking time to download. When you look at the completed report, it’s really easy to pick out problem items and focus your attention on specific HTML requests that are causing lag.

GTmetrix – Another nice website that shows you what’s lagging and provides an at-a-glance ‘grade’ on your site’s performance based on the request. It then provides individual grades against optimisation recommendations so you can again prioritise specific tasks to enable you to catch that whizzy Gonzales.

A few quick wins

So now you’re armed with everything you need to start checking and keeping tabs on your site’s load time. From the tools above, you should also get some good recommendations to implement from the feedback the tools give you. However, below are some quick wins that you can probably implement now:

Image Optimisation

Definitely one of the more common culprits to a lagging website is ma-husive images squeezed into tiny window like a marshmallow in a thimble. Identify the images on your site that are really too large for what they’re being used for. No image on a normal website should be larger than about 100kb. If they are, there’s room to move. How do you identify them? My preference is to use what we at Vertical Leap term the SCROG – Screaming Frog SEO Tool. Crawl the website you want to identify large images for (the free version has a limit of 500 URI limit) and once complete, look at the images tab, hit the drop down and you can export all image addresses that are above 100kb.

HTTP requests

The more requests a browser requests to a server, the more load it’s put under to perform. In turn, this can have detrimental effects on the loading speed of your pages. This is a particularly common issue with Content Management Systems that have a myriad of plugins or extensions. Take a look at the below:

JavaScript and CSS are the main culprits time and time again. In the above the browser has to make 12 requests to the server to completely render the page and the functionality. To remedy the problem all you have to do is reduce the number of HTTP requests being made by combining files. Put all your CSS into one single file, do the same with your JS (just watch out for conflicts).

Server compression GZip

GZip compression is a server side method of squishing resources on your website into smaller files. When they’re requested, it takes less to squeeze them down the pipeline to the user’s browser. It can make quite a considerable amount of difference in doing so, for example, JS files can be reduced by 70% or more when they undergo compression. When you have lots of JS files and they all get squashed to such a degree; that’s quite a big impact on loading times.

You can enable GZip compression on Apache it depends on what version you’re using. You’ll either be using the ‘mod_gzip’ module or the ‘mod_deflate’ module. For you IIS folks you’ll be using the interface for “web site properties” depending on whether you’re an IIS 6 or 7 dude or dudette. However, I’m much more unfamiliar with IIS than I am Apache so here’s a useful article on enabling compression in IIS. I’m not going to leave the Apache peeps hanging with a link, so here’s a pretty good guide on doing the same with lovely Apache (biased, much?).

And there we go. Go forth and catch that Speedy Gonzales! AKA – optimising site speed for Google. Remember to add any additional suggestions in the comments!

...

Welcome to the third and final tutorial in the series of creating dynamic web forms using Web2Py.

In the second tutorial of this series, we talked about editing/updating/deleting the submitted form records as well as management of those records using an ingenious function named SQLFORM.grid(), which allowed us to import and manage our form records in a pre-built environment having security features enabled.

In this third, and final tutorial of the series, I would like to shed some light on how multiple web forms can exist on a single page, how a single form can submit data to multiple tables, and finally, a hint about modifying CSS of your web form (which is a common practice in classical PHP based web forms). The reason why I am going to this extent is just to ensure you that web forms in Web2Py are no second to PHP forms, and they have everything that a PHP form can offer – our forms require even less amount of coding, which is exactly the reason why Web2Py and other Pythonic web frameworks are getting popular.

Okay, let’s go.

1. Multiple Forms on a Single Page:

As the header suggests, we are going to integrate more than one web forms on a single page, arranged serially against each other. All these forms will be linked to different tables in the database, but will be incorporated and controlled using a single controller (in our case it is form_a()) function.

We already have one form in place, so we will define two more tables for two additional forms in our default.py:

db.define_table('registration', Field('firstname', requires=IS_NOT_EMPTY()), Field('lastname', requires=IS_NOT_EMPTY()), Field('gender', requires=IS_IN_SET(['Male', 'Female'])), Field('username', requires=IS_NOT_EMPTY()), Field('password', 'password'), Field('image', 'upload')) db.define_table('personal', Field('nick_name', requires=IS_NOT_EMPTY()), Field('address', requires=IS_NOT_EMPTY()), Field('married', 'boolean'), Field('zip_code', requires=IS_NOT_EMPTY()))

Now we have two database tables named ‘registration’ and ‘personal’ having following fields:

registration:

Firstname: Lastname: Gender (Drop-down): Username: Password: Image (Upload Field):

personal:

Nickname: Address: Married (Check Box): Zip Code:

Once the database tables are defined, let’s work on our controller function to incorporate the two forms based on them:

def form_a(): form1 = SQLFORM(db.registration, deletable=True, upload=URL(r=request, f='download')) if form1.accepts(request.vars, session): redirect(URL(r=request, f='form_a')) qq = db().select(db.registration.ALL) form2 = SQLFORM(db.personal, deletable=True, upload=URL(r=request,...

Compared to other platforms, WordPress is pretty fast. However, we can still make it run even faster. A fast loading WordPress site not only gets love from people, but also from Google. Here we look at 4 useful optimization tips that you can implement right now and get your site running faster than ever before.

1. Optimize Your Database

Your MySQL database tables should be cleaned regularly. These tables are sure to have some clutter in time and this has a direct impact on the load times of your WP site. Rather than use plugins to do this, getting a hands-on idea of what is going on with your database is most recommended.

Using the phpMyAdmin panel, choose the “Check All Tables Having Overhead” to get an overview of all the tables that need to be optimized. From the drop down menu, select “optimize table” which when completed, should display a success message. In case of errors in your DB tables, select the “Repair Table” option. Always remember to backup your database before making any major optimization efforts or repairing your database tables.

If you are running WordPress 2.9 and below, which do not support automatic database optimization, add the line below to your wp-config.php file:

define (‘WP_ALLOW_REPAIR’, TRUE);

2. Cache Your Posts

Caching your WordPress posts creates .html files that are served to visitors instead of having to query the database every time, effectively speeding up your website. To do this, you can use popular WP plugins like WP Super Cache, Hyper Cache, W3 Total Cache or the DB Cache. Some plugins like the W3 Total Cache improve your server performance, caching every aspect of your site and reducing download times of site elements.

If you are caching a high traffic website, you might want to consider adding an opcode cache like Alternative PHP Cache (APC) to your server to enhance PHP’s performance. Using a CDN (content delivery network) helps to server your content via a number of servers. This is an expensive option as most CDNs are quite expensive. I would recommend a CDN like CloudFare – it is free but with features that come close to paid services.

3. Compress and Combine Your JS and CSS Files

Compressing and combining JS and CSS files has been shown to improve site loading times. Compressing reduces the overall page size while combining multiple files reduces the number of HTTP requests to the web server required to retrieve the files. There are many JS and CSS compressors out there available for free.

Again, you can do this manually by rewriting the URLs that point to the respective CSS and javascript libraries to point to one destination and then using a small script, concatenate the requested files, compress and send to the browser.

A much easier way would be to use the WP Minify plug-in that combines your various JS can CSS files into one file. And of course compressing images further using a plugin like WP Smush.it does not hurt.

4. Use CSS Sprites

This is a fantastic technique of combining multiple images into a single file with all the information about the graphical elements in it. Sprites can, for example, be used to on a blog’s sidebar where there are 5 buttons each requiring 5 images. These 5 different images can be combined into one file requiring only that single file to be loaded thereby speeding up the site and saving bandwidth.

I recommend a tool like “Sprite Me” to make your sprite coding job easier.

5. Clean Your House

Of course, there are other obvious ways to speed up a WP site like upgrading your WordPress installation, upgrading plugins and deleting unused plugins.  These should be on your regular site maintenance list.

...

So, you built a website with an amazing strength of potential for millions of internet aficionados to venture, read information, blog, whatever –and maybe make you a few pesos in the big scheme of things. There is a simple, yet powerful tool to gain traffic through: RSS.

RSS means Really Simple Syndication. To syndicate just means gather all the information in once place, where people can subscribe via their web browser, to an article list. But, the words “really simple” on the programming side, are not so simple –as you might have guessed. Creating an RSS Feed, should be quite easy. And after racking my brain for days over the programming connection between my existing PHP website and testing out several Feed Generators { like Mag Pie or Simply Smarty } had a moment where my iMac nearly plunged out the window.

Luckily, I remained calm and went back to my old school PHP programming know-how for the answer to Customizing An RSS Feed without bloated parsers. The customization of this type of Feed creates a Username based RSS Channel in PHP, that returns valid. For each user generated page, you can place the link to that specific group of Articles on the website. The system automatically creates the files needed with each registration. This means less work for you, more flexibility, certainly no manual entry – and if all goes well, increased subscribers.

Creating the entire Custom RSS Feed will take you minutes, literally. From here you can allow Members to jack into Feedburner, Pheedo or any other Syndication they prefer, which can also be used for Internal Tax and Folks -onomy. You will need three {3} items in all:

A Make File function at Member Registration The PHP-XML Hybrid File { template } The Output Script/Feed Link

1. A Make File function at Member Registration

On the Registration Confirmation page call a MAKE FILE function. This tells the server to create a file titled Username.rss.php.  It is vital you make this file, else the RSS Output will not be created. The function gets the POST Username and tells the server to MAKE FILE called Username.rss.php.

$USERNAME=$_POST['USERNAME']; $FILE=$USERNAME.'.rss.php'; if(!$handle=fopen($FILE, 'a')) { echo "Crickets, cannot open file ($FILE)"; exit } $ginger=file_get_contents("rss.php");

2. The PHP-XML Hybrid File { template }

Now, here is the tricky part: you will need to GET the base RSS-PHP hybrid Template. Why? This saves a lot of time and headache. The function gets all the Template information and appends it to the new file called Username.rss.php. This will include the RSS Elements for each Member who joins. Write the header to the new RSS file and move it to the proper directory. { You may choose whatever folder you like, just so long as you remember where you created it so you may link it later on }. The above code now automatically creates the RSS-PHP file in that directory. In order for that file to be created, you need the base code or Hybrid Template, and obviously a connection to the database.

3. The Output Script/Feed Link

One of the unique features of RSS, it is written in XML. Essentially, you can customize the items like Title, Main URL, Main Photo and Child Elements as well. Some browsers will enable photos for each feed listing, some do not. Feedburner and Pheedo definitely do, by creating an XHTML (XML+HTM) page for the feed. This is great for putting in Ads.

The issue with RSS/XML and PHP is simply the language. Communication between is like speaking Russian to a Dolphin, neither understand a word the other is saying. However, there is a way to unite the languages and everyone go home happy. This is called parsing. One language meets another and information is translated. In fact, the parser IS the translator. To make this work, we tell the server this PHP File, should be read as an XML file. This is found in the Content Type. Most web pages tell you in the header what type of content is designed or allowed for the page. If you are using XHTML Transitional or even Strict, you can display pretty much any code. With PHP/XML you need to specifically assign which Content Type. In this case, XML/RSS. Let’s create the Main RSS Template file first and customize it.

header(Content-Type: application/rss+xml; charset=ISO-8859-1); require_once('mydataconnect.php'); $USERNAME= basename($_SERVER['SCRIPT_FILENAME']); $USERNAME= str_replace('_',' ',$USERNAME); $USERNAME= str_replace('.rss.php','',$USERNAME); $USERNAME= strtolower($USERNAME); $USERNAME= ucfirst($USERNAME); $feed = '<?xml version="1.0" encoding="ISO-8859-1"?>'; $feed .= '<rss version="2.0">'; $feed .= '<channel>'; $feed .= '<title>Your RSS</title>'; $feed .= '<link>http://www.yourwebsite.com</link>'; $feed .= '<description>Describe...

Some things can be extremely time consuming when it comes to the development process. It helps, especially when you are paid by the hour, to streamline as many processes as you can without sacrificing quality. That is where these CSS3 generators come in handy. 

Below you will find a list of very useful generators that can speed up your development process! Each one of the generators that I have included in this list are tools that I’ve actually used in some of my projects so they are tried and true, not just ones I found on the Internet somewhere. The criteria I used to choose the best tools to include in this list were the ones that are the easiest to use, and the fastest to implement into your design.

Gradient Generator

This is an awesome generator for gradients, extremely easy to use and lots of different options.

CSS3.me

CSS3.me is a great tool to generate code for border-radius, box shadow and opacity for an element. A live preview gives you a good idea of what your finished product will look like!

CSS3 Layout Generator

This is a good tool to help you generate a layout. This has many useful options, including automatically using the Eric Meyer Reset, keeping the footer at the bottom of the browser window and much more. Give it a try!

CSS3 Button Generator

This is a great tool to generate awesome looking buttons. With this tool you can set any option that you could think of. From custom gradients to multiple text shadows, you’ll have some great looking buttons!

Subtle Patterns

This isn’t exactly a generator, but Subtle Patterns is the best place to get perfectly patterned backgrounds for your next project. Subtle Patterns has tons of designs that work perfectly together and are the perfect touch to give your page life. There’s over 250 patterns to choose from, both light and dark colors.

Pattern Cooler

This is a great generator to make totally unique backgrounds. You can make them as bold or as subtle as you’d like. Pattern Cooler can give your project the perfect unique look.

These tools can speed up your design process and give you amazing looking results. If you have additional suggestions, post the link in the comment and I’ll take a look! Enjoy!

...