RSS
 

Archive for the ‘Web Development’ Category

Vertical search on a Semantic web

25 Apr

What is Vertical Search?

Vertical search engines
A vertical search engine differentiates from a regular search engine due to it’s focus on a given subject or content type.

Topic focused vertical search engine
A great example of topic based search is Trip Advisor, a website with great information for people who are looking to travel.

Content focused vertical search engine
Media Type search can be found on sites such as Youtube, Vimeo, Flickr and others, where you search within specific media file types.
For example when I’m looking to fix CSS bugs my basic instinct makes me search on Google but if the first page doesn’t return the best answer for my problem I use Delicious, for books I use Amazon, etc.

The advantage of using a vertical search engine is that it will narrow the amount of information indexed which will result in more relevant search results.

What is Semantic Web

Semantic Web Experience
Semantic web can be interpreted as an intelligent, self-learning web. The future of semantic web will belong to services that will understand the user and deliver them the best answers for it’s need.

While it’s not perfectly clear for users, semantics have been implemented on several websites for a while now. Amazon was, as far as I know, the first site to implement a semantic user experience when it started suggesting further products based on users preferences. When a user bought a book, Amazon’s software would recommend other books based on purchases made by users who have bought that very same book. The result was a massive increase of sales and profit.
Google also is improving it’s search engine by reordering search results based on user navigation history.

So it’s fair to say a semantic web, or Web 3.0 as some call it, is each more a reality and not a trend. This brings me to this posts topic:

Can Vertical Search Engines coexist in a semantic web?

Personally I see vertical search engines as a the first step into the semantic web concept. I believe some people will say there completely separate things and I’d love to hear a different opinion on the subject.
If I want to find a needle inside a huge barn and know the needle is inside a haystack, I’ll search only inside the haystack. The haystack is my vertical search engine.

Using the same metaphor with semantic web once I’m inside the barn I’ll get a suggestion the needle is probably on the haystack, along with a picture of how the needle might look like and also where in the haystack it will probably be.
Eventually, once I find the needle, related subjects such as strings, other kinds of needles, groups, etc would be suggested as a complement to my interest on the needle.

Being the first time I searched for something I would also get suggestions related to hay and the haystack but if I show no interest in that, further similar searches would not retrieve those suggestions.

What do you think about the future of vertical search? How can it grow in order to survive on a Web 3.0 environment?

 

WordPress Theme CSS Reset

04 Apr

WordPress, like any CMS has a default structure with it’s how template hierarchy, template tags and default CSS classes that are obligatory on every WordPress theme in order for WordPress to work correctly.

Download WordPress Theme CSS Reset

Eric Meyer’s CSS Reset

A CSS reset will set all default values of HTML elements to zero. This will improve cross-browser CSS compatibility as different browsers will set different values for HTML / XHTML elements.

Eric Meyer’s CSS reset it a wonderful CSS reset for default HTML styles but when it comes to WordPress you need to contemplate WordPress default CSS styles.

WordPress default styles

As I mentioned before WordPress, as a CMS, creates some default CSS classes that applies to HTML elements and that you must include in your Theme style.css file in order for the Visual Editor (WYSIWYG Editor) to work correctly:

.alignleft {
   float: left;
}
.alignright {
   float: right;
}
.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}
.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}
.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

Beyond these classes there are others to take in consideration. These classes are applied when showing categories, specific pages, widgets, links and so on. I’ll leave them blank so you can personalize as you wish. All the elements where the following classes applied have been reseted by Meyer’s CSS Reset.

When you put all of the CSS together you will get a complete CSS Reset for WordPress themes. Ready to go, ready to use on your own themes.
You can download the WordPress Theme CSS Reset by clicking on the link or just copy / paste the following code on to your style.css theme file:

/* WordPress WYSIWYG default syles */
.alignleft {
   float: left;
}
.alignright {
   float: right;
}
.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}
.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}
.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}
.aligncenter, div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}
/* WordPress template default classes */
.categories {}
.cat-item {}
.current-cat {}
.current-cat-parent {}
.children {}
.pagenav {}
.page_item {}
.current_page_item {}
.current_page_parent {}
.current_page_ancestor {}
.widget {}
.widget_text {}
.blogroll {}
.linkcat{}
/* Eric Meyer's CSS Reset v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Related links:

 

6 WordPress plugins for better user experience

07 Feb

Allow your users to Subscribe to comments

When you allow users to leave there opinions they might want to follow up that conversation. Although it’s possible to do that by subscribing the comments RSS they might want to get email warnings instead.
I’ve been using Subscribe to Comments for years and I’ve found a reasonable number of users subscribing to comments on posts they have given their opinions. Allowing your readers to choose if they want to be warn when there’s an update on a specific post is improving the user experience.

WordPress Subscribe to comments plugin

Users can edit their comments after submitting them

One of the most embarrassing comments I’ve ever made was about 2 years ago on a popular blog. It was past 1am and I was finishing up some work when I did a pause. I read an interesting post about SEO and left my comment. Fortunately I went back to the post again and re-read it. I ended up noticing that the comment I had left was pure nonsense. I wish I had the chance to change that. Would save me some embarrassment.

For that you have a plugin called WP Ajax Edit Comments which allows all users to edit their own comments without the need to be registered or logged in.

Better printing experience

One other subject I take in consideration is printing. The most common practice when someone wants to print an interesting post is printing the whole blog layout or printing a selection. But the best practice is when a user chooses to print and will only print what he wants.
For this you have two options:

  1. Create a specific CSS for print
  2. Use a plugin for that effect

Personally I prefer to create a specific stylesheet for print and apply the layout I want. But WP-Print plugin does a terrific job
and it’s a very good alternative for hand-coding your printing styles.

iPhone, Cell Phone, PDA navigation

Recently I just ended my mobile internet contract. The reason is quite simple, I don’t use it that much and when I do I don’t really get to visit the websites I want. Smashing Magazine has a mobile version of their website but, for example, Abduzeedo doesn’t and when I tried to reach it with my mobile phone it jammed it with too many images, javascript and information that I didn’t want to see.

WordPress Mobile Pack plugin will help you adapt your WordPress site to mobile browsers and not just iPhones.
Again you can do a specific CSS stylesheet for the effect but the plugin covers that very well.

Speed up your website

How often do you visit websites and when they take too long to load their content you simple leave them? This is common on websites that are hosted on shared servers and have a considerable amount of traffic.
When someone visits your site or blog the server gets requests to display everything on that page. When you have a site with heavy images or simple allot of images it’s normal that page loading time takes longer than it should.
Fortunately for WordPress powered sites there’s WP Super Cache that will cache the pages making the loading time faster thus improving user experience on your website.
For small websites or pages with little content or not so rich in images you might not notice much difference.

Give users a quick navigational reference with a Sitemap

Usually when you speak about sitemaps on WordPress you are refering to XML Sitemaps for Google Webmaster Tools, Bing’s Webmaster Central, etc. In this case I am speaking of a page with a reference to existing links on your website.

This is important for 2 primary reasons:

  1. Users have a quick reference to categories, pages and posts separated by category
  2. Search engine robots have a place to crawl to your posts thus indexing more pages for your website

There are many plugins to create sitemaps on WordPress. Personally I recommend Sitemap Generator WordPress plugin for this effect.

 

Learning HTML5 and CSS3

09 Jan
 

E-mail spam filter with jQuery

03 Jan

jQuery currently has a plugin called Mailme – Email Defuscator created specifically to protect and filter email from spam.
Let’s take a look at it’s function and basic use:

jQuery.fn.mailme = function() {
    var at = / at /;
    var dot = / dot /g;
    this.each( function() {
        var addr = jQuery(this).text().replace(at,"@").replace(dot,".");
        var title = jQuery(this).attr('title')
        $(this)
            .after(''+ addr +'')
            .remove();
    });
};

This function allows you to define your email link and the title to be shown on mouse over that link. Here’s the sample html syntax:

 <span class="mailme" title="Send me a letter!">me at mydomain dot com</span>

Using a spam with the class mailme you can define the title and the email using words instead of symbols. If you want extra protection create your own words for the at sign (@) and dot. In this particular case what robots will crawl is: me at mydomain dot com but the user will actually see me@mydomain.com and the user is actually able to click it.

You can set the addr var on the jQuery function to something else. Personally I like having pages with contact form so when you click on the link it will take you to the contact form page instead of opening an email program. Just pay attention you still need to execute the jQuery code to replace the text for the symbols: jQuery(this).text().replace(at,”@”).replace(dot,”.”);.

Now you can create simple and effective email spam filters that reduce spam considerably since spiders are unable to track emails, especially if you develop a personified code.

 
 

Page optimized by WP Minify WordPress Plugin