SEO Portugal

Motivation & Marketing

Mario Andrade — Sun, 08 Nov 2009 11:40:30 +0000

Motivation

My co-worker Susana Vilaça published her 1st post on her new blog called What drives you? – motivation theories which talks about motivation techniques implemented in business that have been scientifically proven wrong but are still being implemented on current business management. The video it about 20 minutes long and presented by Daniel Pink at TED Talks.

Marketing

One other video I found very interesting is a marketing campaign created by BBDO Argentina using an iPhone, voice to text recognition and Twitter.
This innovative marketing campaign allowed thousands of people to interact, cheer, share opinion and follow the racers throughout the race.

Using an iPhone strapped to their arms and an earphone, simply by pressing a button, the runners were able to share their experiences with the world in real time. The voice message was turned into a text message that was automatically published at thehumanrace.com.ar/envivo/, in their Twitter accounts, and banners on sports vertical portals and news sites.

Nike+ Human Race 10K LIVE from the INSIDE from BBDO argentina.

Flash CS5 Physics

Mario Andrade — Sat, 24 Oct 2009 10:06:10 +0000

Flash CS5 introduces a whole bunch of new features in order to keep up to date with the current necessities in the development of RIAs and other software for Mobile hardware such as the iPhone.

The following video will show some of Flash CS5 gaming capabilities and, starting at 3min50sec, an introduction to Flash CS5 physics.

For more information on Flash CS5 you may consult Adobe Technologies page on Flash CS5

Adobe Photoshop CS5 Patchmatch

Mario Andrade — Wed, 21 Oct 2009 18:34:12 +0000

This new algorithm is inserted into Photoshop CS5 Healing tool giving it the amazing capability of creating a completely new image.

Image Recomposing / reshuffling

Image recomposing allows you to move parts of an image around and attaching it to other parts of the image. This allows you to create a completely new image effect simply by drag and drop method.

Image Completion / Inpainting

There was a time when removing foreign people and objects from an image had it's dificulty. The new algorithm allows you to remove objects from an image quick and simple.

Image re-targeting

Adobe also implemented the directional similarity algorithm that simplifies repetitive structures with additional constrain tools to achieve better results.

The following video explains and shows Image reshuffling, In-painting and Image re-targeting methods:

Unfortunately if you notice the message in the end of the film, Photoshop response time is not as quick as seen on video as Adobe explains:

Except where noted, all image updates are shown in real time using 2 CPU cores for synthesis.

Some user interactions (Drawing paint strokes & lines) have been sped up by 5x for brevity.

Which means that this algorithm will eat your CPU heart out when you try to use it. Unfortunately this means I can't test CS5 at home.

For more information visit the following links:

Stefan Sagmeister: The power of time off

Mario Andrade — Mon, 05 Oct 2009 09:50:34 +0000

I am a strong defender that to be successful at anything you must love it and you must enjoy it. If you don't than something is not right.

link: Stefan Sagmeister

Check if email domain exists with PHP

Mario Andrade — Sun, 04 Oct 2009 21:36:21 +0000

So let's create a function to allow you to check the dns record of a full email address:

function VerifyEmailAddress($email) {
    list($user, $domain) = explode("@", $email);
    $result = checkdnsrr($domain, 'MX');
    return($result);
}

This function breaks the email string example@domain.tld giving the username the the content before @ and the domain the content after the @.
If you insert an email like example@domain.tld the user would be example and the domain would be domain.tld.

After breaking the email into user and domain the function calls checkdnsrr to check is the MX records on the $domain variable returning 1 is the domain exists or 0 if the domain does not exist.

Now you need to call it when checking an email:

if(VerifyEmailAddress($email) != 1) {
    echo "The e-mail you inserted is not valid.";
}

And here you have it. You can now check if the domain of an email exists.
For complete email verification I advise you to implement the following functions:

Check if email string inserted is a correct email for. Must have string@string.com
Check if the email domain exists. You can use this tutorial for that
Limit the amount of tries, for a determined period of time, a user can insert an email in order to stop possible spam bots

How to remove Google Maps Info Window

Mario Andrade — Wed, 30 Sep 2009 19:39:41 +0000

Fortunately I was able to easily understand that the tooltip is called by using a variable named iwloc which is used to specify where the infowindow A.K.A info bubble, info ballon or info tooltip.
You can read more about the iwloc variable and it's properties at mapki wiki about Google Map Parameters on the Info Windows Section

Important Note:

Two days after writing this post I was unable to view the Info Window (info ballon) when the page is loaded. If you wish to know what the Info Window is, left click on top of any pinpoint and it will show.

Here is an example of what I mean:

View Larger Map

You can imagine why clients wouldn't want this info window showing up on a map at their website. But unfortunately removing this info window is not as simple as removing the iwloc var from the code google maps gives you to embed the map on your website.

Here is the code that shows the map above:

iwloc=A&output=embed"> View Larger Map

I highlight the iwloc variable but now if I remove it. Here is what I get:

View Larger Map

Here is the code I used to show the map above:

View Larger Map

I removed the iwloc variable and I noticed this works on some maps, on others you have to endorse other strategies.

After reading the Google Map Paremeters information about the iwloc variable I started trying the different values you can apply and I found that using iwloc=near; does what I want: The map shows up with the pinpoint and no Info Window, if I click on the pinpoint the Info Windows shows up. Perfect!

View Larger Map

Here is the code I used to create the map you see above:

iwloc=near&output=embed"> View Larger Map

And voilá! Just don't forget when applying a Map make sure on Google Maps you right click and set the map to center on that spot by clicking on Center Map Here:

The Final Result:

View Larger Map

A consultant point of view on blog Content Management Systems

Mario Andrade — Fri, 18 Sep 2009 22:04:58 +0000

Today I've had, in overall, a total of 8 weblogs and I'm a devoted blogger to my portuguese blog about blogging and WordPress, muiomuio.net, since 2006.

Hover the years I've seen hundreds of new themes, trends and page layouts, some really appealing but not really that functional, others really simple and functional but still 99% of blogs fail in the same aspect that other kind of websites are really good at. I've talked several times about it in muiomuio.net and alerted the readers giving several tips on how to change / improve their blogs.

Duplicated content

A "standard" blog theme is built in a way that will favor duplicated content. For example, you write a post, that text will show up in at least 2 places the homepage and the post page. Even though you can change that by adding excerpts, the excerpt will still show up in the homepage and archive page.

Mr. John Chow

The simple solution is to write a post, write an excerpt that is an introduction and complementary to the post and use that text in the homepage and archives page.
Further more you need to define that you do not want search engine crawlers / robots to index or follow your archive pages.

As you see you need to have some programing skills or ask someone in order to have a fully optimized website.

How to show excerpts instead of full post on the homepage

This is a sample of the code I have on the homepage of this blog:

post_excerpt)) : ?>
	
		Continue reading:

I check if the excerpt field has content, if so than shows the post_excerpt, otherwise shows the normal post content. Ultimately I use the excerpt as an introduction to my posts and also use it in the post itself.

Homepage structure

Inicially a blog was built upon a newspaper website structure where the homepage shows the most recent "news". Altought the idea is good the implementation of it is, nowadays, less than great.
Like I said many times on my Portuguese blog muiomuio.net, the homepage must work as a channel to the post pages and it would be great if every post would have a thumbnail image on the homepage.

Mr. Jeremy "Shoemoney"

But again the homepage, in practically all blog CMS, shows the content of the most recent posts which will lead you to the duplicated content issue.

Take notice that duplicated content is not only a search engine issue. If a user has all the content in the homepage why would he / she go to the post page? Maybe to comment but not all readers comment. By showing all your blog post on the homepage you are removing many call to actions like sharing in social media, bookmarking and possibly profit from that specific post page.

Additional but important functionality

Blogging Content Management Systems are still very raw. Almost all of them offer only the default functionality in the installation pack.

Related Posts
Related posts should be a default functionality of all Content Management Systems. The user would than define if this functionality is active or not.

Share on Social Web
Social Web is important to every blog. The CMS should support the chance to submit content to the popular Social Networks and the module should also make it simple for the user to add new websites.

I understand that a CMS has to keep in mind that not all users want the same functionality and most of them offer extra functionality with components, modules and plugins. The porpuse of this article is to expose what I believe are "near-standard" functionalities and should be implemented by default on Content Management Systems.

If you have something to add, disagree with my point of view or want to share your experience, I would love the hear from you. Please leave a comment.

CSS Opacity for hover effects

Mario Andrade — Fri, 04 Sep 2009 18:11:05 +0000

The big issue with the opacity property is, of course, IE support. For this you have to use MS Filter and alpha property: filter:alpha(opacity=value), for all other browsers just use opacity: value.
Before I get started with this there are a few things you need to know:

The CSS opacity property values run from 0 to 1 meaning you can apply opacity of 0, 0.1, 0.2, 0.3... up to 1.
When you apply opacity to a block, all elements inside that block will have the same opacity. Let's say you have a block with 4 images inside. If you apply 0.5 opacity to the block, all 4 images will have 0.5 opacity as well.

Simple Opacity

The following image is from my personal Flickr account, it's actually the first photo I took in 2009 and also the view from my balcony. Great view isn't it?

For this example I applied a 50% opacity to the image using the opacity and filter:alpha properties. If you look into this page source code you'll find:

Opacity change when mouse is hover the image

This example can be a bit tricky. I'm going to use some javascript to manage the hover effect and share the CSS code.

Again if you look to this page source code you'll find:

What I've done was use some javascript to change the image styles when the mouse is on top of the image and when it's out. But since we don't want this, it's preferable that you use CSS. Notice I applied a class to the image called imgOpacity, this is only for tutorial purpose.

.imgOpacity {
opacity:.5;
filter:alpha(opacity=50);
}

.imgOpacity:hover {
opacity:1;
filter:alpha(opacity=100);
}

Just add this to your styles and apply the class to whatever you wish and you'll have a rollover effect.

This block of text will change opacity when you run your mouse over it.

You may also use opacity on divs in order to create semi-transparent backgrounds which can be great when used correctly.

Multi-browser support of opacity

Like I mentioned the CSS Opacity Property is supported by all modern browsers. We've covered Internet Explorer's exceptional case but previous versions of Opera and Firefox and other browsers may not render the opacity property correctly. For that you'll need to apply some special properties:

-moz-opacity
-moz-opacity is needed for previous versions of Mozilla Firefox and Netscape browsers. Just apply -moz-opacity:value; and you are set.

Ex: -moz-opacity:0.5;

-kthml-opacity
-khtml-opacity will allow older versions of Safari (1.x) to recognize the opacity property. it's used in similar way of -moz-opacity. It's actually been deprecated since 2004 but if people still use IE6, some will probably use Safari 1.x. Personally I wouldn't bother with this too much.

Ex: -khtml-opacity:0.5;

IE6 and 7 support
Unfortunately Internet Explorer can't play along with the rest of the browsers. There are some known bugs in versions prior to IE8 that will not display opacity even though you use filter:alpha(opacity=value). I advise you to try and specify height and width of the element you want to apply the opacity to, it works many of the times. if that doesn't do the trick I suggest you try applying the "ever so friendly" Microsoft filter hacks:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:alpha(opacity=50);

Curiously when you use IE7 and IE8 works just fine but when you use IE8 as IE7 if you don't use the hacks the Microsoft browser will not recognize opacity.

Interesting readings:

Chris Coyier from CSS Tricks wrote a very interesting article on the subject called
CSS transparency settings for all browsers. I advise you to read it and read the comments as they carry very useful information.
The W3C article on CSS opacity subject. A quick and interesting reading.

Add / Remove items with jQuery

Mario Andrade — Fri, 28 Aug 2009 15:46:16 +0000

Creating the markup

In this example I'm going to create text field and 2 buttons that will allow me to add and remove text fields. Similar to online apps that allow you to create web form.

Adicionar Remover

The

around the input is just to add a new line when I add now input's.

Applying jQuery to the markup

First you need to get jQuery. You can download it from the official jQuery website or use the link from Google Code: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Now you need to call jQuery in the section of you HTML Template using the script tag:

Here you have it. You need to keep in mind that every time you refresh the page the items will be gone. You'll need more codding in order to keep the variables on a database. This is just to cover the basic add / remove functions from jQuery.

Demo

Usefull links
Theme Forest - Jquery for Absolute Beginners - Day 5
jQuery Homepage

The Pomodoro Technique

Mario Andrade — Tue, 18 Aug 2009 11:17:41 +0000

The technique can be applied to practically anything you are doing and consists on disciplining yourself following the Pomodoro rules. You basically break tasks down in minutes time and when you reach a certain limit you must take time to yourself.

My co-worker Catarina introduced me to the Pomodoro Technique, she found it quite interesting and a bit funny since Pomodoro means tomato in Italian. I decided to take a deeper look into the technique on my extremely short free time and test the results. This post is based on my 2 week experience of the Pomodoro Technique trying to GTD in my personal projects and life.

The Pomodoro Method

Like I mentioned the Pomodoro Technique has rules you must respect in order for the technique to be effective.

Rule #1
The most important rule and also the most basic one is knowing that 1 Pomodoro is equivalent to 25 minutes and you cannot subtract or add any minutes to it.
During these 25 minutes you must do only the task you committed yourself to do with no distractions and no breaks.

Rule #2
After each 25 minute period you must take 5 minutes off to relax.
You are not allowed to talk about work or engage in any activity that will require any mental effort such as making phone calls or writing emails that will require you to make decisions, etc... This is time for you to relax and completely disconnect from what you where doing, even if you did not finish it.

When you go back to an unfinished task reset the clock to 25 minutes and start the Pomodoro process from
the beginning. This means that the task you are doing will now last 2 Pomodoros (two 25 minute periods).

When you reach 4 Pomodoros (four 25 minute periods) increase the break to 15-30 minutes.

The way of the Pomodoro

Over the past two weeks I have been applying the Pomodoro Technique to myself and I've found extremely complicated to respect the 25 minute rule during the first 3-5 days but I managed.

The improvement is visible mostly on myself and on organization aspects like knowing exactly how much time I took to accomplish tasks and knowing that I was able to know exactly how much they cost.
On the other hand when I was working from 9pm I knew that I would get tired, slower and less motivated around 11pm so knowing that and breaking a coding process every 25 minutes isn't the smartest thing to do.
But take in consideration each case should be handled as a single case but you must respect rule #1 do the Pomodoro Technique.

The hardest part is disciple, making yourself follow the rules but the the results are gratifying. You will sleep better, get things done and have them under control. Trust me, I have a rough time dealing with anxiety and this technique has helped.

Resources

I advise you to visit The Pomodoro Technique Website and download the free e-book complete with helpful sheets you can use with the Pomodoro Technique. It's an excellent reading and will teach you The Pomodoro Technique and how to implement it to yourself and you team.

I use an Adobe Air based Application called Pomodairo which is a timer created to be used when applying the Pomodoro Technique.