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!

...

In this series on creating a user note-keeping utility, we are using IndexedDB to store user notes on a Web page. In the first two parts of the series we created the IndexedDB database and object store, as well as the initial visible HTML elements in the Web page. In this part we will implement allowing the user to add and delete notes to and from the data store. In the final part of the series we will query the notes and display them within the page. This is part 3 in a series of 4:

Setup and opening the note database Creating the object store Adding and deleting notes Querying and presenting notes

To add notes, the user will interact with the visual elements we have already created. To delete notes, the user will interact with the visible elements we will build in the final part of the series. We will add JavaScript functions to handle adding and deleting, calling these functions on user interaction.

Create a Function for Adding Notes

In your JavaScript section in the page head, after the “init” function and before the line in which you add the event listener to call the “init” function, add the following function outline:

/* Function called when user adds a note */ function addNote(){ }

Notice that this is the function we call in the HTML code, when the user clicks the “add” button to submit any text they have typed into the text-field. In this function we will pull the user text and add it to the note database. First, let’s get the content from the text input element using its ID attribute:

//get user submitted content var noteIn = document.getElementById("note_in"); var newNote = noteIn.value;

We only want to carry out the adding process if the user has actually entered text, so add the following conditional test:

//only carry on if there is content if(newNote.length>0) { }

The remainder of the adding code will go inside this “if” statement. First, get references to the transaction and object store objects using the database:

//get transaction noteTransaction = noteDB.transaction("notes", IDBTransaction.READ_WRITE); //get object store noteObjectStore = noteTransaction.objectStore("notes");

We need a transaction that will allow us to write to the database and we specify the object store by name. Remember that we are going to include the date on which a note was created, so let’s build that now as a text string ready to add as part of the new note:

//get the date var currentTime = new Date(); var month = currentTime.getMonth() + 1; var day = currentTime.getDate(); var year = currentTime.getFullYear(); var dateText = month + "/" + day + "/" + year;

Now we can try adding the new note data:

//add the new note data - date and text, ID key will be autoincremented noteRequest = noteObjectStore.add({ when: dateText, text: newNote });

The new note consists of the date, the text content of the note and the index, which is auto-generated as we specified last time. As with most IndexedDB functions, we now need success and failure handlers, still inside the “if” statement:

//successfully added noteRequest.onsuccess = function(event)...

How do you create a simple, dynamic website using the Python programming language? In this tutorial we are going to learn how to do exactly that. First, lets get some basics about Python.

Classes and Methods in Python

Python is primarily object-oriented. Class instances (objects) in Python are defined as shown below:

class coder: coding_languages = 10 david = coder() david.coding_languages = 5 print “David knows s languages.” % david.coding_languages

Running the above script from the terminal gives the results below:

“David knows 5 languages.”

Methods in Python are functions contained within a class. Methods are written in Classes and referenced using objects. Methods are defined as shown below:

class coder: coding_languages = 10 def learn(self): print “I know s languages.” % self.coding_languages

Consider another method below:

class google(coder): def chrome(self): print “Ow snap!” david = coder() david.chrome()

Variables get inherited the same way as Classes.

In languages like PHP, you only need to code the functions specific to your website. When using Python you can use frameworks like Django, Web.py, Grok and TurboGears. When using Django, install it both locally and on your server when deploying. Django is an MVC framework which is feature-rich and its tutorials are easily available online and this is what we are going to be using in this tutorial.

Creating a Simple Blog

Start your first Django project using the command below:

Django-admin.py startproject SimpleBlog

When you list the files inside the above folder, SimpleBlog, you will see three files have been created: manage.py, settings.py and urls.py

We will start by creating our first app as follows:

Python manage.py startapp blog

This creates a directory called “blog” which is our app. We need to define our models using the models.py file. For a blog we will need a table. We create a table as shown below:

class posts(models.Model): author = models.CharField(max_length = 30) title = models.CharField(max_length =100) bodytext = models.TextField() timestamp = models.DateTimeField()

After installing mySQL as your database, install the Python library for interfacing with the DB (I use Easy Install) and then create the database. Set your Django project to work with your mySQL database.

Add all the models we created into the database using the command below:

manage.py syncdb

This command simply adds new fields and does not alter existing ones in the database.

Set up the urls pattern (urls.py) to the appropriate module as shown:

Urlpatterns = patterns(), url(r’^$’, ‘SimpleBlog.blog.views.home’, name= ‘home’),

Under views.py, add the code below:

from django.shortcuts import render_to_response from blog.models import posts def home(request);...

This is a cool CSS effect to use with links. We can create a link that will change to two different colors when you hover over it.

In order to achieve this effect, we use span tags in the links and our CSS will look like this:

a.twocolors span.red { color: #000; text-decoration: none; } a.twocolors:hover span.red { color: #FF0000; text-decoration: none; } a.twocolors span.blue { color: #000; text-decoration: none; } a.twocolors:hover span.blue { color: #0000FF; text-decoration: none; }

and then our HTML will look like this:

<a class="twocolors" href="#"> <span class="red">Hover</span><span class="blue">Here!</span> </a>

Our final effect can look like this:

DEMO

With this effect you can create links with all different colors on hover and you can use CSS3 transitions to build upon this effect even further! Ask any questions below!

...

Duplicate content in the world of SEO is a no no. You may be familiar with the on-going uproar caused by the series of animal themed updates Google has been rolling out over the past 18 or so months. Duplicate content was one of the targets of Google’s algorithm overlays during the Panda update that originally started back in February 2011. Since then, Google has been making monthly updates to this change and they think they’re pretty on par with how they’re handling it.

With this in mind, duplicated content is one of the (many) things at the front our minds right now as Search Marketers. Besides some of the inherent issues that some CMS’s can cause due to complicated URLs, filters, facets and all the rest, one for the most common issues and questions about duplicate content is internationalisation. This is what I wanted to focus on in this post.

French, English, German, Russian

Google generally isn’t fussed about duplicate content in multiple languages; they understand that this isn’t always possible providing the content is targeted at different countries. However, it’s not always that easy, depending on the website you’re trying to achieve this international visibility.

The ultimate question is “what about English content for the UK and English content for the States?” Sure both sides of the pond have their vocabulary differences; Mom/Mum, labor/labour to name a few. These language differences in spelling provide a strong indication to Google that specific content is targeted at specific countries, but it doesn’t end there.

Sub Folders and Sub Domains

Ideally, this is the way to go about things. Divide the content up into country specific folders or subdomains. That way, there is a clear indication of which is which and you can also control geographic targeting through Google’s Webmaster Tools. But, again, that’s not always possible either.

If you can’t implement anything

I recently had a situation where we needed to implement changes across a site to demonstrate that content was divided between the UK and US. Unfortunately, due to the CMS we were unable to implement the usual methods such as <head> changes using hreflang tags, sub folders, addresses in footers and everything in between. So we needed a solution that by passed that completely but still allowed us to show search engines that particular content was meant for particular geographies.

Enter Sitemap.XML

In March 2012 Google introduced a new way of being able to differentiate content geographically. This is through the use of the sitemap.xml file. The method employees the use of the rel=”alternate” and hreflang=”x” annotations, but within the XML file itself.

Let’s say we have a website called www.example.com (original I know) that has three pages targeting two countries: www.example.com/english.html and www.example.com/usa.html. Each has the same content, with a few subtle differences. You can tell Google using the sitemap.xml the equivalent pages in each country using the following syntax:

<url> <loc>http://www.example.com/english.html</loc> <xhtml:link rel=”alternate” hreflang=”en-us” href=”http://www.example.com/usa.html” /> </url>

The part above says “hey, this is content for English speakers in the UK, but this other URL is for English speakers in the US”

Then for the main USA page entry, you use the syntax:

<url><loc>http://www.example.com/usa.html</loc> <xhtml:link rel=”alternate” hreflang=”en-gb” href=”http://www.example.com/english.html” /> </url>

The above says “this URL has content for English speakers in the US, but this alternative URL has content for English speakers in the UK”.

The same goes for content in other countries. For example, you could target German speakers in Switzerland using de-ch. Or target English speaking users in Australia using en-au. Cool stuff.

The first part of the element specifies the language code, the second part specifies the locale. This is all based on standards ISO 639-1 and ISO 3166-1 Alpha 2.

Automation

For a site with hundreds or thousands or even millions of multilingual pages that are crying out for a solution like this, automating the process would be the answer. However, I’m not currently aware of a solution that employs this – I would love to hear from anyone who does know of a sitemap.xml generator that accurately provides this solution.

Hope you find the above useful!

...

In the first tutorial of this series, we dived into the basics of creating web forms in Web2Py. We saw how easy it is to create dynamic web forms and how smoothly their inputs sync with the database. Assuming that you have followed it, let’s play even harder.

1. Updating and Deleting Form Records:

Many of you should be wondering about how the form data provided through this form can be edited, updated or even deleted? Well, this is simple. First, let’s recall the form_a function that we have created in the default.py controller:

def form_a(): form = SQLFORM(db.registration) if form.process().accepted: response.flash = ‘You have successfully submitted the form’ elif form.errors: response.flash = 'Please check your form for errors' else: response.flash = 'This form cannot be left empty!' return dict(form=form)

This is a very meanly written controller function (I admit it), which only supports the insertion of input data. In order to make it cover the record update/delete features, we can transform it to something like this:

def form_a(): form = SQLFORM(db.registration, deletable=True, request.args(0), upload=URL(r=request, f='download')) if form.accepts(request.vars, session): if not form.record: response.flash = 'Your input data has been submitted.' else: if form.vars.delete_this_record: session.flash = 'User record successfully deleted.' else: session.flash = 'User record successfully updated.' redirect(URL(r=request, f='form_a’)) records = db().select(db.registration.ALL) return dict(form=form, records=records)...

Most of the popular web search engines prioritize the sites that they index by two major criteria: content and links. The indexable content (i.e. content viewable in the source code) gives the search engine spiders material which they can store in their databases and sort according to relevance. The links within a site guide the spiders throughout the site’s architecture. In many instances, web developers ignore the importance of links in creating a site that will bring them search engine results and increased traffic.

Links and Site Structure

A major factor in developing a web site’s architecture is to make sure that each page within the site links to every other page, either directly or indirectly. While most developers include this feature when designing the site navigation system, some pages may inadvertently be left “orphaned”. If a page within the site does not have a link on another page to connect it to the main site, the spiders cannot reach it.

Links and Javascript

Some developers prefer to generate links with Javascript routines rather than with strict HTML. While these Javascript links may improve the user experience, they can hamper the site’s search engine ranking. Since spiders work on the basis of the most technically primitive browsers, they will either fail to parse some Javascript methods, or give these links less significance than they may deserve.

Links and Flash

Many designers and developers spend dozens of man-hours creating the most dynamic, most eye-catching and most dazzling Flash animations. These interactive movies can bring a site to life for a visitor. However, they can also be death to a search engine spider. Spiders typically don’t “see” Flash (or other dynamic browser plug-ins), so they won’t follow any links contained within the animations. A primitive site, with strong content and logical links, can bring in traffic rivaling that of the 1977 premiere of “Star Wars”, while a site with better effects can earn less respect from search engines than audiences gave Jar Jar Binks.

Links and Robots

One of the more problematic issues facing both web site developers and SEO marketers is the use of the “robots.txt” file. This file allows the developer to permit or block search engine spiders from crawling specific files or directories within a site. For instance, if the developer wanted to block a spider from crawling its error pages, the robots.txt file would look like this:

User-agent: * Disallow: /error

The developer can also allow a specific spider (e.g. Googlebot) to index a file or folder, while shutting out the other spiders. The robots.txt file also permits users to set permissions for files within a specific directory:

User-agent: Googlebot Disallow: /comics/DC/ Allow: /comics/DC/Batman.html

To prevent spiders from crawling a specific page, developers can add content to the “robots” meta tag:

<meta name=”robots” content=”no-index,no-follow”>

The cardinal rule for SEO links should be, “When in doubt, spell it out.”  The spiders will index the links, the site will gain more traffic, the client will make more money, and the developer will be in high demand. Everybody wins!

...