Archive for category: Web Development

Most Pressed Keys in HTML development

Most Pressed Keys in HTML development

I found a post called Most Pressed Keys and Programming Syntaxes that shared a simples webapp that allowed to heatmap a virtual keyboard highlighting the most used keys.
I was tempted to find out which are the keys I used the mo.st when developing my Conserveira de Lisboa project, and here’s the result:

Keyboard usage in HTML development

14 de September de 2011 0 comments Read More
The Johny Cash Project

The Johny Cash Project

The Johnny Cash Project is a interactive web project where participants from all over the world draw their contribute Johny Cash to be included into a collective wholesome. The drawings are than displayed to the sound of Johny Cash’s song Ain’t No Grave creating an original and unique videoclip. Watch the video for more information about this project.

http://www.thejohnnycashproject.com/

27 de October de 2010 0 comments Read More
Arcade Fire – The Wilderness Downtown

Arcade Fire – The Wilderness Downtown

Here’s something to remember by: The Wilderness Downtown is a single released by Arcade Fire in 2010
This project is the collaboration between Google Creative Lab, Chris Milk and B-Reel and is fully developed using HTML5 video, audio and canvas and interacts with Google Maps API in order to show the location you enter before the video starts.

An amazing project / experiment worth checking out: http://www.thewildernessdowntown.com/.
If you want to know more about this project visit Mr. doob’s blog post about the Making of The Wilderness Downtown

26 de October de 2010 0 comments Read More
Vertical search on a Semantic web

Vertical search on a Semantic web

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?

25 de April de 2010 4 comments Read More
WordPress Theme CSS Reset

WordPress Theme CSS Reset

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:

4 de April de 2010 2 comments Read More