Wednesday, December 22, 2010

JFlip Fix for IE Browser

Have you ever used the cool jquery plug-in called jflip? This plug-in developed by Renato Formato simulates page flipping for image gallery. 

If you are not cautious in using the plug-in, you may notice that internet explorer (IE8 in my case) does not display the images along with the supposed cool flipping effect. You may notice that the browser yields an error like 'G_vmlCanvasManager' is undefined with reference to the query.jflip-0.4-min.js.

You may get suggestions like use <!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]--> in the HTML header tag. That might solve the problem for some, but if you get another error, try using the excanvasX.js to fix the browser bugs further. Just place it your site directory and don't forget to reference it in the header, before the jflip script. It may look like this: <!--[if IE]><script type="text/javascript" src="js/excanvasX.js"></script><![endif]-->, it depends on your directory structure.

Check again your flipping image gallery in IE to see if that fix really works.


Saturday, December 4, 2010

Social Awareness Campaigns Through Facebook and Other Social Media

Social networking (sites) has found its massive role in making connections among people across the globe. We get reacquainted to many of our long lost friends, found new pals, shared interests, exchanged thoughts, participated in discussions and many other social activities. These of course are done in-front of your computer or mobile gadgets with the power of internet.

Another important usage of social medium like Facebook is that it's becoming a popular outlet to create awareness or raise funds for a cause. I have seen some Facebook pages that seek to raise funds for the operation of children suffering from deadly diseases. The campaign for raising funds can become viral across social spectrum because tagging of friends is just a click a way.

There was also an awareness campaign before that was supported by women Facebook users. It was made known in their status messages! You probably seen it from your newsfeed the kind of posts that starts with "I like it on".  Yes, it was an awareness campaign, about breast cancer, that is. It went viral very fast!

Just recently, another awareness campaign virally popped up on Facebook! This time it is an awareness Campaign to End Violence Against Children. Facebook users who support this campaign had their profile picture replaced by cartoon images. This has something to do with the right of children to enjoy childhood, and life itself, safe and far from violence.

The putting up of a space for campaigns for a cause is one of the greatest achievements of the social media over the internet. It is a rather subtle, convenient and speedy way to advocate great causes. One of the reasons why Internet was nominated  for Nobel Peace Prize this year.

Thursday, December 2, 2010

Image Replacement Through CSS and its SEO Issues

In our web design training, we were taught about the importance of providing alt attributes to images embedded using the <img /> tag. This is for providing some kind of description to the image when the browser has its display image turned off or so that those visually impaired people can have access as to what the image is all about. And for the logo or banner images (wherein they are embedded in CSS and not through img tag) where the company name and its business tagline is etched, we were taught to provide text equivalent to the lines of text in the image.

The CSS technique of replacing the image with text can be accomplished by using the display:none attribute-value or by making the text-indent equal to outside of the screen display (say, -9999px). Basically, what these techniques do is hide the html text from appearing in the browser (remember that those text are already in the image) yet still providing accessibility  for readers (intended for blind). Those hidden text are not visible in the browser but in the source code they can be read by search engine spiders or crawlers.

When I gain some knowledge of SEO, especially on-page, I came to understand that this technique has been tagged as black hat SEO technique because one can then put hidden keywords in web pages. It is admonished to provide text content (keywords) not visible to users but visible to search engines (cloaking!). Putting invisible keywords may result into getting banned from search engines when they discover it.

In todays websphere, some website owners are struggling to rank their site on major search engines. Ranking keywords for your site requires tremendous amount of effort and patience. It is better to adhere to white hat seo practices than to get yourself banned by search engines.

Friday, November 26, 2010

Redirect Moved or Renamed HTML Pages Using 301

In the previous post, we discussed the overview of the importance of creating a customized 404 html page so as to provide visitors a way to navigate back to your site through the links provided in the notfound page.

There are instances where we need to rename some URLs of our indexed web pages, other times, move them to different locations or directories, or even transfer them to totally different domain. And consequently, visitors may encounter not found page. To avoid losing visitors and search engine rankings, you can point the old indexed urls to the newly updated urls by using redirection.

The redirection process can be done by inputing some line of directives in .htaccess. To open the .htaccess, see the instruction in the previous post. Here's what to put in the .htaccess file: redirect 301 /old/old.html http://www.yourdomain.com/new.html. The old.html page under old folder is really the old filename, without the "http://www"  and next to it, sepatated with a space, is the complete url of new file. As simple as that!

After that final touch on .htaccess, you can then upload it and check whether you did it successfully. Enter the old url in the address bar and see if it is redirected to the new page you pointed to. If a page not found is displayed, you probably made some wrong inputs in the .htaccess. Just make sure that urls inputted are valid and the format of the directive line is correctly followed.

Saturday, November 20, 2010

Creating Customized 404 File Not Found HTML Page

Okay, you enter a url of a site in the address bar of your browser or you navigate from one page to another and what your browser displays is an error: page not found. And you just hit the back buttom to your disappointment. File not found errors are encountered when a url is typed incorrectly or the file has been removed or renamed.
For webmasters, creating a customized 404 file not found page is helpful to maintain the focus of visitors on your site. If the site is hosted on Apache servers, a simple tweak on the .htaccess file does the magic. For sites hosted on non-Apache servers, it is advisable to ask help from the hosting provider about 404 error page customization.

To create a customized 404 file not found page, locate the .htaccess file in the root directory of your site and add the following: ErrorDocument 404 /notfound.html. The "notfound.html" is the page that is going to be displayed when the typed url is not found. This page must provide some sort of links going to your site, it can be a link to the home page or to the sitemap.

When the customized error page is done, it must be uploaded along with the .htaccess file to your site. Make sure that the created customized notfound page works as expected, with all the links on it.

In summary, a customized 404 page may prevent losing of visitors by providing links relative to site content. It is a good practice to save visitors and giving them ways to discover your pages.

Friday, November 19, 2010

Online Portfolio and Presentability

Most portfolio sites in the internet are flash based. The reason perhaps why many web designers put their sample works in a flash is because of the "coolness" effect of flash websites. And it is a way of making an
impression for potential employers.

With the proliferation of flash folio sites, some ojectives of having the your sample works showcased online are often overlooked. Some sites are so sophisticatedly cool that records of accomplishments or gallery of
artworks are barely noticeable. Complex animations and rocking audios gets more attention than the list of clients they have serviced.


Flash websites have the tendency of loading very slow in many browsers. Though the site may look cool, the loading speed may suck up and may take away impressive points from the reviewer. It is best to have just enough balance between visual presentation and good usability.

You may opt for other web technologies and techniques in presenting your works. A nice javascript gallery may suffice for your need if you are not feeling those moving visuals created in flash. With good design and
layout, your folio page may look impressive and elegant even with just a lighbox gallery.

It is important to keep in mind that a folio site is a showcase of your  worth as designer. Making it a kick-ass page is not at all admonished, so long as there's a way for your works to speak for themselves in the page,
and the usability of the site is not in ruin. The presentability of your site may reflect your disposition as a career person, so furnish it with right elegance, creativity, and passion.  

Wednesday, November 17, 2010

Online Portfolio 101 for Web Design Applications

Almost all employers in web development industry today require that applicants who wish to become part of their company have to showcase their sample works through live links online. This is essentially important for aspiring candidates who are fresh graduates or career shifters who want an entry level position in web development industry.

For web and graphic design outputs, it is now preferred that they are showcased in a web gallery or similar web pages. Gone are the days when they are just contained in a flash drive or a colorful CD.

It is not uncommon that many applicants today are just copying the works of other people. They claim total ownership of other people's output. They trick potential employers about their real measure of their talent or laziness. Other applicants, to make the stealing less obvious, make some minor modifications on the existing artwork or design.

Some employers demand records of clients from the applicants. They want to see the actual service the applicants have rendered to their clients. They want to assess professionalism of work through scrutiny on clients satisfaction or finished outputs. It is for this reason that applicants must provide honest and professional-looking sets of their works.

Examinations are often provided for applicants and if the folio is nothing but steals from other peoples' effort, credibility maybe put under scrutiny. To put your name into the shortlist of employers, you must showcase the output of your creativity with utmost confidence. Not any form of deceit must come to mind when applying for an opportunity in creative industry. If not that confident in diving into competition, an applicant may consider more practice of his craft and devout more time in honing his skills.

We are going to examine the existing trends in online portfolio making in the upcoming post.