Design consistency

Posted by Eden on September 3, 2010 at 11:14 am
categories Web design, Web usability

In general, design consistency its about avoiding the user having to think at all times how to do what he wants to, and for that purpose the best way its to make things appear always in the same way, so once learned how the site works, learned forever.

Consistency with other websites

This is one of usability foundations, if your niche websites place a triangle shaped button where it says “Go to checkout” and you decide that this button will be a square and say “Order”, possibly the user will lose a couple of seconds looking for the triangle button he is accustomed to. If users have become accustomed to something through other websites of your niche, copy those “standards” and make life easier for the user. Example: The RSS or share icon in blogs.

Color consistency

Colors provide information about relevance, message type, added options, etc. To avoid confusing users its very important you make sure your site always uses the same color guideline, but also, it really helps a lot to evade our site to look like a rainbow: choose one or two colors and make the design from them on. A color in different tones can give you lots of flexibility, so, usually with 2 colors including black and white you’ll have enough.

Read more »

 

Asynchronous request with JavaScript: home-made AJAX

Posted by Eden on September 1, 2010 at 7:54 pm
categories Web programming

This is a translation from my original post in spanish. I hope you enjoy it!

A few days ago I was building a module that should make asynchronous requests to a webservice using javascript, in other words, the famous AJAX but manually made, without using any library. For those who do not know what AJAX is, it’s what allows server requests without having to load the entire page. Surely you’ve seen it in many places, for example, when posting a comment on a blog which is posted and shown without a full reload of the page.

So, in order to do this we need to use the XMLHttpRequest object of our browser using JavaScript and send a request to the server. The server will respond our request by sending us the data in an XML file, so we get it, read it, and display the result we want on screen using javascript.

Read more »

 

How to throw a pop-up properly with Javascript

Posted by Eden on August 30, 2010 at 4:45 pm
categories Web programming, Web standards

This is a translation from my original post in spanish. Hope you enjoy it!

In some cases it can be useful for us and even more comfortable for the user to open a page in a pop-up on which to show the information. If we search in Google how to do it or read any javascript manual the code that will be shown its this one:

window.open('url to open','window name','attribute1,attribute2')

In fact, that code has some mistakes, lets see:

  • Browsers without Javascript will cannot open the page.
  • It will not be crawled correctly by searchers, and some crawlers, will not know how to follow it.
  • When going over it with the mouse we will not see the url on our browser status bar.
  • The user loses the option to make a right click and decide to open it in a new tab, a new window or just copy the url.
  • The user loses the option to save the page into his favourites using the mouse’s right botton.
  • Finally, “a” labels have a reason to exist which is specificated in the W3: “A link is a connection from one Web resource to another“, so to use it to show an appearence but make it work through the onclick doesn’t seem the best way to follow standards.

This is the correct way to open a pop-up:

<a href="./index.html" target="_blank" onClick="window.open(this.href,
this.target, 'width=300, height=400'); return false;">Abrir pop-up.</a>

This way, the link it’s a normal link that will work under any circunstance and, besides, in the most usual conditions it will work the way we want: opening a pop-up.

 

How to make a wordpress widget

Posted by Eden on August 29, 2010 at 12:28 pm
categories Web programming

This is a translation from my original post in spanish. I hope you enjoy it! :)

Widget RSSContinuing with the make your own wordpress theme guide, it is possible that you come to the point where you need a new module you don’t have in the sidebar, more known as widget.

There are a few ways for doing this, in one side since you can choose between a dynamic and an static sidebar you could choose the second one and just develop it in php in one piece, though it will not be editable from the administration panel. Another option is to enter in the admin panel and create a text widget which you can use to insert javascript or HTML code.

But the problem comes in case you want to edit the sidebar without having to touch the sourcecode, or that a widget starts having problems, or we want to make a backup or update to a new version, the maintenance will become more expensive. That’s why the slowest option but the best in long term it’s to build a new widget and install it through the admin panel.

How do I make a new widget?

To make a new widget its easy, you only need to follow these steps:

  1. Create a php file for writing your widget, for example, mywidget.php
  2. Include and edit on that file the code lines I show you down.
  3. Put the file mywidget.php on the folder wp-content/plugins/
  4. In the admin panel, find and install the widget in the plugins section.
  5. In the admin panel, drag the widget to the sidebar in the section design->widgets.

This is the code you have to include in the file mywidget.php:

<?php
/*
Plugin Name: MiWidget - Feed RSS
Plugin URI: http://www.entrecodigos.com/
Description: Enlaces para suscribirse al feed del blog
Author: Rubén Cantón
Version: 1
Author URI: http://www.entrecodigos.com/
*/

function miwidget_rss() {
    echo "<div class='sidebar-rss'>";
    echo "<img src='./wp-content/plugins/miwidget/rss.gif' alt='rss'/>";
    echo "<a href = \"http://feeds.feedburner.com/entrecodigos/ \">Feed de artículos</a>";
    echo "</div>";
}

function init_miwidget_rss(){register_sidebar_widget("Mi Widget - Feed RSS", "miwidget_rss");}

add_action("plugins_loaded", "init_miwidget_rss");
?>

As well as when we make the style.css, the comments on the beggining are used to identify your widget in the admin panel.

The used methods are as follows:

add_action: Stablishes that when the selected event occurs (on this case, when the plugins are loaded) the stablished method will be executed. Notice that this function its writed out of any function, so it will be executed always just on loading the php file.

register_sidebar_widget: Registers a widget stablishing its name (which will be displayed at the widgets admin panel) and the function which has to be called when executed.

What we must not forget

  • Don’t forget that there are free made widgets for wordpress.
  • When you make your own functions, remember always to stablish a prefix impossible to coincide, or else you could generate a conflict between other wordpress functions or another plugin you may install.
  • You can make a folder for your plugin and put images, styles or whatever you may want on it, as I’ve done in the example.
 

Testing LINQ performance with ASP.Net

Posted by Eden on August 28, 2010 at 11:24 am
categories Web programming

LINQ

This post its a translation from my original post in spanish. I hope you enjoy it! :)

After learning the basics about LINQ and how it works, I had no choice but to test if, not only does it simplifies the code but also improves its efficiency.

I decided to test the reading speed of XML files with LINQ and determine which one has a better reading speed: .Net XML access library or its new technology, LINQ. To that purpose, I built an XML with 100.000 registers which simulates a table with students data and I will send some requests.

Read more »

WordPress Themes