Posts Tagged ‘site’

Disable favicons in Firefox

Favicons are the little icons that appear on each tab in your browser. Although they can help you find which site you have opened in a given tab, when you have a lot of tabs opened, they can really, really annoy you if the site designers have decided that a blinking favicon is the way to go. That is why, Firefox allows users to disable favicons in a rather easy way.

Open Firefox and enter about:config in the address bar. Firefox will warn you that you can really mess things up if you are not careful.

Click the I’ll be careful, I promise! button and the configurations will open:

In the Filter textbox enter browser.chrome.favicons:

Double click on the browser.chrome.favicons preference to set its value to false:

Do absolutely the same for the browser.chrome.site_icons preference:

Restart Firefox and you are done.

VN:F [1.9.18_1163]
Rating: 7.0/10 (3 votes cast)

How to force the browser to reload CSS and JavaScript files

When editing the CSS and JavaScript of a site, there is a slight chance that the user may get the old versions, which at best will cause a lot of complains and at worst will cost you a lot of lost customers. The reason for this is that browsers cache static content like CSS and JavaScript. However, telling a browser to reload them is not that hard to do. All it takes is a little trick that will force our friendly browsers into thinking that the CSS and JavaScript are dynamic content.

Before we go on, let us take a look at how we specify the CSS and JavaScript to be used within HTML. Normally we have something in the line of:

<link rel="StyleSheet" type="text/css" href="/static/style.css">
<script src="/static/js/script.js" type="text/javascript"></script>

Where style.css and script.js are our files. Naturally CSS files are specified with the href attribute of the link tag, while JavaScript files are included using the script tag. Now, let’s take a look how we can make our browser reload CSS and JavaScript every time:

<link rel="StyleSheet" type="text/css" href="/static/style.css?version=15">
<script src="/static/js/script.js?version=15" type="text/javascript"></script>

“Now what is that “version”?”, you are probably thinking. Well it’s nothing. No really, it does absolutely nothing. You can use ?favouritesite=onlinehowto.net15 if you want. It would have the absolutely same effect.

“But what does it do?”, you are probably thinking. “This looks just like passing GET variables.” Exactly!

The browser cache uses a pretty complicated mechanism, but there is one thing that you should know for sure index.html?version=14 and index.html?version=15 are two different pages for the browsers, therefore it can’t rely on its cache, therefore it must get them again. But what happens on the server side? Well those arguments are ignored by our server and it simply supplies style.css and script.js.

Whatever language, technology, etc. you are using, you always keep a header file which is included pretty much everywhere so changing the version=<number> part after each revision is pretty easy. You can even make it a part of your site’s logic.

In conclusion, this trick may save you a lot of headaches related to cached CSS and JavaScript, and if you believe you may have some issues, we greatly encourage you to use it!

VN:F [1.9.18_1163]
Rating: 10.0/10 (2 votes cast)

How to setup Apache HTTP and HTTPS virtual hosts

Virtual hosting is a way of hosting several servers on a single machine. This technique is widely used in shared web hosting, because it greatly reduces hosting costs, since multiple customers use one server.

There are three types of virtual hosting:

  • Name-based – when the virtual hosts is determined by its domain. A problem with this approach is that it is completely dependent on the DNS.
  • IP-based – when each site is differentiated via his IP. A natural complication is that this requires a different IP for each site.
  • Port-based – when each site is described with the same domain, but different port. Naturally, the problem that users don’t generally use ports arises. Additionally, some firewalls block uncommon ports.

Using Apache, we will setup two name-based virtual hosts – an HTTP one and an HTTPS one. Both will work on the standard ports 80 for HTTP and 443 for HTTPS. Naturally we will see how to set port-based hosts.

Note: This tutorial assumes standard file places and settings for Apache on CentOS.

Note: The goal of this tutorial is not to provide extensive knowledge on configuring virtual hosts, but to provide a general-purpose working configuration. For more find-tuned configurations refer to the Apache documentation on virtual hosts.

We assume that <domain> is the domain for our virtual host. In the httpd/conf.d directory (usually /etc/httpd/conf.d) create a file called <domain>.conf

Note: It is not necessary to call your file <domain>.conf, but it’s a sort of a convention and makes editing hosts easier. The file for the HTTP virtual host should contain:

# <domain> HTTP Virtual Host
<VirtualHost *:80>
    # General
    ServerAdmin <administrator_e_mail>
    DocumentRoot /var/www/html/<domain>
    ServerName www.<domain>
    ServerAlias <domain>
 
    # Logging
    ErrorLog logs/<domain>-error_log
    CustomLog logs/<domain>-access_log common
</VirtualHost>

<administrator_e_mail> is the e-mail of the site administrator. After you set this file restart the HTTP Server daemon:

service httpd restart

To setup an HTTPS virtual host, again create the <domain>.conf file in the /httpd/conf.d. Again we assume <domain> is the domain-name:

# <domain> HTTPS Virtual Host
<VirtualHost *:443>
    # General
    ServerAdmin <administrator_e_mail>
    DocumentRoot /var/www/html/<domain>
    ServerName www.<domain>
    ServerAlias <domain>
 
    # Logging
    ErrorLog logs/<domain>-ssl_error_log
    TransferLog logs/<domain>-ssl_access_log
    CustomLog logs/<domain>-ssl_request_log "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"
    LogLevel warn
 
    # SSL Engine
    SSLEngine on
 
    # SSL Protocol
    SSLProtocol all –SSLv2
 
    # SSL Cipher Suite
    SSLCipherSuite LL:!ADH:!EXPORT:!SSLv2:RC4+RSA:+HIGH:+MEDIUM:+LOW
 
    # Server Certificate
    SSLCertificateFile <path_to_certificate>
 
    # Server Private Key
    SSLCertificateKeyFile <path_to_private_key>
 
    # SSL Engine Options
    <Files ~ "\.(cgi|shtml|phtml|php3?)$">
        SSLOptions +StdEnvVars
    </Files>
    <Directory "/var/www/cgi-bin">
        SSLOptions +StdEnvVars
    </Directory>
 
    # SSL Protocol Adjusments
    SetEnvIf User-Agent ".*MSIE.*" nokeepalive ssl-unclean-shutdown owngrade-1.0 force-response-1.0
</VirtualHost>

Of course, after setting this, restart the HTTP daemon:

service httpd restart

It is easily noticeable, that you can setup port-based virtual hosts quite easy, by using the same domain, but different ports in the .conf file.

Naturally this tutorial is not exhaustive, as such tutorial will be pretty much equal to documentation (which you can find here).

VN:F [1.9.18_1163]
Rating: 7.0/10 (2 votes cast)

Run cron jobs within Django using django-cron

Quite often web applications require cron-like behavior which more or less contradicts with the request-response model.

Not many host providers allow users to create a cron jobs, and even if it is possible, if your site relies on an external script it loses its integrity. It no longer is a website, it is a website relying on cron jobs.

Now at first glance, there is not much difference, but such things make migrating harder and/or may cause a lot of problems in the long run.

As we all know Django is an open source web application framework, designed for rapid development. It follows the so called DRY principle and therefore greatly emphasizes on “pluggability”. In this short tutorial we will show you how to “plug-in” a little but very useful Django application called django-cron, which allows you to easily get cron line behavior.

You can visit the project’s site in at http://code.google.com/p/django-cron

Installation is fairly easy:

  • Download the source
  • Place django_cron on your python path
  • Add “django_cron” in the list of installed apps in your settings.py:
INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.messages',
    'django.contrib.admin',
    'django_cron',
)
  • In the beginning of your global urls.py file add:
import django_cron
django_cron.autodiscover()
  • Write your crons in a file named cron.py inside the application you want write crons to. Note: The application must be installed in your settings.py

A cron job is fairly easy to write.

Here is an example cron.py file which deletes old files from a fixed directory:

import os
import time
from django_cron import cronScheduler, Job

class DeleteOldFilesCron(Job):
“””A cron which deletes files older than a minute from a fixed directory”””

    run_every = 60*60*24 # run every day

    def job(self):
        path = ‘/var/www/html/media/tmp/’
        files = os.listdir(path)
        for file in files:
            if(time.time() – os.path.getmtime(path + file) > 60):
                os.remove(path + file)

cronScheduler.register(DeleteOldFilesCron)

Naturally you can have several crons in your cron.py

Note: There are some Apache specific configurations which must be taken into account. For more information visit http://code.google.com/p/django-cron/wiki/Install

VN:F [1.9.18_1163]
Rating: 3.0/10 (2 votes cast)

14 advises for how to design your website’s navigation

One of the most important things to keep in mind when designing a website is navigation. You don’t like getting lost in a city you don’t know, do you? Well, neither do your users. You won’t tolerate travelling for two hours just to buy a cup of coffee, will you? Well, neither will your users. In this short article we will provide you with a few guidelines to follow when designing your site.

1. Each page should show the basic structure of your site.

2. Make each action sequence clear and structured. Remember, users don’t know what your website’s back-end is. What you may find to be logical on a technical level may be irrational on a logical level.

3. Keep each screen as clean as possible. Align page elements horizontally or vertically.

4. Be consistent with the placing of important items. Highlighting critical information is a must.

5. Keep your site’s structure as broad and as shallow as possible.

6. Carefully choose your header and bottom of the page. Make sure the user doesn’t get confused that he has reached the top/bottom of the page when he hasn’t.

7. No horizontal scrolling.

8. Links should be self-explanatory.

9. Avoid elements that look clickable, but are not.

10. Make sure that category labels are distinguished from ordinary ones. They should be self-explanatory. Never forget that page titles should be descriptive.

11. Navigation labels should be consistent with page titles/headings. Tooltips are your friends.

12. Heading should be descriptive and consistent throughout the site. This helps users familiarize the site structure.

13. Order items in the lists by importance. Users scan content top-bottom.

14. List ordering should be consistent between pages.

Follow these guidelines and your website’s navigation will be user friendly and intuitive.

VN:F [1.9.18_1163]
Rating: 0.0/10 (0 votes cast)

Choosing the right Content Management System

Choosing the right Content Management System

Choosing the right CMS is a fundamental decision and will pretty much predetermine the success of your project. Not long ago, before the birth of CMSs, people used to update their content by manually changing the HTML code of the site. Nowadays, things are a lot more civilized and there is a large variety of platforms that can do that sort of thing for you, no need to know HTML or CSS and stuff like that. But, when I say “a large variety”, I mean exactly that. Today there are so many CMSs that one could easily get lost and make a wrong choice. Don’t get me wrong, I’m not implying that most of the CMSs are bad, on the contrary, most of them are actually pretty good, but there is yet to come a CMS that works perfect for everybody. That is why one should be cautious when making his decision.

What should you do?

Embrace the variety. Variety means options. If a CMS doesn’t meet your criteria, choose another one. Yes, it is that easy.

Try it. Try out different CMSs. Click here and there, add a post, edit it, delete it. Is the editor good? Preferably don’t test an already installed demo (it will obviously work). Set it up yourself or have the person in charge of deployment set it up. Is it easy to setup? Evaluate the performance. See if you can configure it like you want – customization and flexibility are a must.

Evaluate the user interface. A CMS is more than it name states. It should not only manage content. It should look good and feel natural as well. Does your choice look good?

Check for. Roles and permissions – so you can assign different roles to people with different skills (otherwise you may one day wake without a site at all), versioning – it’s always good to be able to bring back an older version), multiple website support – if you plan on making a mobile version of the site for example, multilingual support, etc.

What shouldn’t you do?

Don’t trust biased information! Don’t look for opinions in a site or forum that is obviously supportive of one CMS. There is no such thing as a CMS that works for all. Try to stick to independent reviews.

Price doesn’t mean quality! Don’t think that more money will get you a better CMS. Many times Open Source solutions surpass paid ones greatly.

Beauty means nothing! Just because an existing installation looks nice, doesn’t mean that the CMS is good. A designer can make you a custom theme for a modest price. Prefer functionality and performance to looks.

Define what you need.

Narrower needs like Editing Features (spell checker, pictures and videos in posts), Multilingual Support (multiple language support, localization), Social Media Integration (what social media, comments, tags, forum, user generated content), Cost (what is your budget not only for purchasing, but for deploying, modifying and customizing your CMS).

Broader needs like Usability (basically is the CMS easy to use, after all, the point of a CMS is to make maintaining a site easier), Evolution (will the CMS be able to keep up with your plan for evolution of the site/service, will it be easy to upgrade when new versions come out), Architecture (does the CMS fit in your IT architecture).

Decide…

Take your time! Consult with the IT department when researching and defining your needs. Consult with other departments as well (marketing, sales, etc.). Decision matrix, pros and cons, etc. always help. Ask for help and guidance from the IT department and from those who will use the CMS as well. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (0 votes cast)

Using Opera’s mini simulator to preview your site on a mobile device

In case you have been living in a cave for the last few years – it is possible to access websites via mobile devices. And it is a good idea to make sure you website is readable on such a device. In case you don’t have a mobile device with an internet access, don’t worry, Opera has your back covered. You can now preview your site using a simulator of the popular browser for mobile devices Opera Mini. The simulator of course comes from Opera.

Navigate to http://www.opera.com/mobile/demo/

Wait for the application to load:
Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 10.0/10 (1 vote cast)

How to block websites in Opera

One can have many reasons to block a website. The most notable without any doubt is parental control. Although this can be done using the Windows hosts file, Opera makes it even easier by adding it as a feature.

First, open Opera. Click on the Opera Menu button (the button with the Opera logo), select Settings and click Preferences:
Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)

How to newsletter – tips for Web Designers

I have presented in previous posts how to create a cool websites and how to convert more visitors into clients. Newsletters are also part of the designing/branding of a company online, they usually come together with the site, so it’s still a designer’s job. You might thing that newsletters are old school and social networks have replaced them but they still convert very well and are more suitable for non technology companies where customers don’t necessarily get that much in touch with social networking. Newsletters are great because they target a specific audience that is clearly interested to hear more about the company’s product and services. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)

Clear your private data in Firefox

This tutorial is about how to clear your private data in Firefox.

There is a variety of things that internet users want to keep private. Whether it is their browsing history or their username on some site, most internet users prefer to keep that information to themselves. Well lucky for them clearing any private data is just a matter of a few clicks in Firefox 3.

First open Firefox, click the Tools dropdown menu and select Clear Recent History: Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)