Replacing Accented Chars for their respective HTML Code

Hi there, long time I do not write in my blog but as you know the World is going through huge economical crisis and I had to work hard to maintain my financial stability (as most of you I am sure). Nevertheless, I wanted to share a piece of javascript code that saved my problems in dealing with accents (Latin Chars) with mySQL.

Scenario:
I have an Internet Guide (www.ibizawebguide.com) and it is Spanish and English based site. I had a huge problem when it came with saving accented chars into a mySQL database as they were saved in some 'gibberish binary language' even though I used UTF-8 (this is quite normal). I didn't have any problems with that as by using a META TAG CONTENT with charset UTF-8 accents were displayed easily. My problems came when I had to do a text search on the database, the accents from PHP were interpreted differently that in the database and moreover, INPUT TEXT fields and SELECT boxes had values that also didn't match the database content.

Solution:
The solution I found the easiest (I tryed everything (SQL- SET NAMES UTF-8, utf8_encode-decode,etc. everything found on Google was faulty and gived me wrong results)) was to convert the accented Chars into their HTML code representation (á becomes á). So I made a Web research on that but none of the solutions presented did replace 'anything at all'), the values were still saved in 'gibberish chars'.

At the end, and before FORM submissions (so to be saved in the database), this is what I did and it worked to perfection (you need prototype.js to use this code but you can easily convert it to suit your needs):
parejas = Class.create();

filter = Class.create();

parejas.prototype = {
initialize: function(char, code){
this.char = char;
this.code = code;
}
}
filter.prototype = {
initialize: function(){
this.pares = new Array();

this.pares[0] = new parejas('%E2%82%AC', "€");
this.pares[1] = new parejas('%C3%A1', "á");
this.pares[2] = new parejas('%C3%A9', "é");
this.pares[3] = new parejas('%C3%AD', "í");
this.pares[4] = new parejas('%C3%B3', "ó");
this.pares[5] = new parejas('%C3%BA', "ú");
this.pares[6] = new parejas('%C3%81', "Á");
this.pares[7] = new parejas('%C3%89', "É");
this.pares[8] = new parejas('%C3%8D', "Í");
this.pares[9] = new parejas('%C3%93', "Ó");
this.pares[10] = new parejas('%C3%9A', "Ú");
this.pares[11] = new parejas('%C3%B1', "ñ");
this.pares[12] = new parejas('%C3%91', "Ñ");
this.pares[13] = new parejas('%C3%9C', "Ü");
this.pares[14] = new parejas('%C3%BC', "ü");
},
htmlentities: function(txt){
var p = this.pares;
txt = encodeURIComponent(txt);
for (var i = 0,count = p.length; i < count; i++)
{
txt = txt.replace(new RegExp(p[i].char,'g'), p[i].code);
}
return decodeURIComponent(txt);
}
}
function htmlEntities(txt){
var f = new filter;
return f.htmlentities(txt);
}
Explanation:
The object parejas is created in order to hold the value pairs of the URI Encoded string and its HTML representation. The object filter first creates an array of parejas objects and inserts the correspondent values to replace (in the object above has Latin Chars but you can insert as many different Special Chars as you wish), and its htmlentities function first URI Encodes the passed string in order to replace its special chars to after URI Decode its result.

How to use:
Just call the htmlEntities function and pass the string to convert, the function will return the converted value. Really easy...

www.ibizawebguide.com

Hi all,
I would like to introduce you to my new project: http://www.ibizawebguide.com. I do not know if you know IBIZA, 'the white island' or the 'party island' as everybody call it in EU. It is a guide aimed to fullfil information gaps of other guides in the island.

What programming interest have this site? Well, again, I am making use of a javascript tool made by the guys of LIVEPIPE called Control.Modal for Prototype.js. I have my javascript widely open in the pages so you guys could get a working example of how this library works (I will surely make use of lightboxXL but in the near future as I am programming this good tool to hold more than just for videos and/or pictures... The site has also good PHP techniques that, if anyone is interested, I will explain the procedures behind and the problems I faced at the beginning (google throws a lot of garbage on its searches as you all know!). For example: How to create search engine friendly url's (http://www.domain.com/?page=1 to http://www.domain.com/1.html)...

Anyway... this is already too long... feedback on this guide is highly welcome

antCUT.com OpenSearch extension

This was a suggestion of a fellow programmer that I thought was a great feature to have. Now you don't need (Firefox users) to go to www.antcut.com and then search for your favourite videos. antCUT.com gives you the option to install its search feature right on your browser search field.

To install the plugin just go to www.antcut.com and click on the link that will appear on the right side of the page!

Please note that only firefox users at the moment have this feature. I still have some issues with Internet Explorer that I need to solve. Thanks to Microsoft fellows I probably have to create a new layout only for Internet Explorer users.

antCUT.com's new look and feel

Due to the amount of visits this little tool I created to demonstrate lightboxXL utility had the past week, I decided to change its look and feel to make it easier to use and understand. Hope you like it.

I would love to have some feedback about it, new features, and so on... if you could spend some of your time it would be highly appreciate it.

Monitizing Searches on Your Site?

While surfing on the net I have found of what I think is one of the coolest ideas for non-intrusive advertising. It is www.predictad.com (see picture above, it is an autocomplete field for my video search engine site www.antcut.com), they allow you, webmaster, to integrate a dropdown autocomplete list to your site's search field.

The following text is extracted from www.techcrunch.com:

Too often it is still easier to search the entire Web than a single site. In-site search leaves much to be desired in its ability to provide users with accurate search results, let alone assistance in performing more accurate searches. Israeli PredictAd is attacking this challenge head-on by offering auto-complete functionality for search boxes with an added twist: monetizable real-estate.

Already deployed across 6,000 websites and generating millions of monthly impressions, PredictAd is announcing the launch of PredictAdPlus+. Targeted at media networks and high-traffic websites/blogs, the offering provides greater control of the look and feel, customization, dedicated databases, and advanced display options. Most importantly, it allows a number of sister sites to be integrated into a single search box. As an example, the TechCrunch search box at the bottom of this post incorporates CrunchGear, MobileCrunch and CrunchBoard. The auto-complete needs time to learn, but you’ll get the general drift. Sign-up here.

PredictAd’s twist on search monetization begins by helping users refine their in-site search queries by way of real-time search suggestions—think Google Toolbar’s auto-suggest feature. PredictAd continuously optimizes its suggestions based on the community search patterns for any given site. Beyond collaborative filtering PredictAd also takes into account historical searches, geo-location, time of day, common misspellings, connections between words, and more.

Not only should users benefit from more accurate searches, site-owners should benefit from increased page views as a result of user exposure to additional site content. Site-owners can also benefit from SEO insights drawn from the service’s analytics backend.

This is where ad monetization comes into play. PredictAd injects contextual advertising into the search box. The ads—text or image—change dynamically as users type out their search queries. In practice, PredictAd creates its own ad real-estate and then monetizes it. An important element in PredictAd’s offering is the fact that the ads are displayed directly in the user’s focal zone, unlike traditional ads which are susceptible to “banner blindness”. Rev-share is 50%/50% on run of network ads, and 80%/20% (for the publisher) when the advertiser selects specific publisher sites. PredictAd is claiming click-through rates in range of 0.5%-4%.

Wish to have one on your site? Get it here.

lightboxXL (for prototype.js)

UPDATE 29 February 2008
I have updated the ZIP file, so you guys can see a demo within. Due to the 'problems' some people have to check lightbox JS and get the other files (CSS, images, and so on) I have also included those within the downloadable ZIP archive. Hope you guys have no problems anymore on how to use them.



We all know how good and how famous lightbox is around the web. Most of us probably have used it or any of its different children (lightbox++, lightbox JS blah blah, etc...)

I had a personal project in mind, an online tool that allow me to search among different providers and view the videos without refreshing pages... lightbox was on my mind. So looking around the net, I found lightbox++, quite good but with some bugs that I had to fix in order to view the videos lightbox style.

lightbox++ only allow one movie and also, it had to end with a .SWF extension, otherwise won't work. I builded a solution, I put it the name of lightboxXL but I DO NOT WANT ANY RECOGNITION for this work, give it to the guys of CONFIDENTIALITY.

How it works
Check the following:

<-- a title="TITLE" tag="SWF" height="355" width="425" rel="lightbox" href="http://www.whereisthemovielocated.com/"-->content<--/a-->

Tags Explained:

• TITLE: title of the image or movie
• TAG: here we set IMG or SWF to tell lightboxXL if it is a flash movie or an image
• HEIGHT: height of the image or movie
• WIDTH: width of the image or movie
• REL: this is a MUST if the link is part of a set you do REL="lightbox[SETNAME]"
• HREF: where is the movie located?

There are plenty websites explaining how it works, this version requires prototype.js library and the difference is the TAG attribute.

I have included a full demo within the zip file but if you wish to see a working demo, go and visit my site: http://www.antcut.com, search videos by RSS or META, view them lightbox style and (in some providers) download them to your computer.

ZIP file contains: CSS and JS files (view demo to check how it works!)

Download lightboxXL v. 1.0.0

- If anyone of you like my idea at http://www.antcut.com and would like to get involved in this project, please drop me a line. I would love to get some help on it...

AJAX File Upload with Progress Bar (+PHP)

This post maybe the result of my ignorance of perhaps my lack of google-art-of-search to find any good solution around the challenge of doing an AJAX File Upload with a Progress bar, written entirely on Javascript and PHP on the server.

After breaking my head against a wall trying to find any guru around that 'could' have done a good solution to this matter, I found a couple of interesting links such as the jqUploader JQuery plugin by lussumo (with a SWF object for upload), the tesUpload object (with a Perl script to get the bytes uploaded info) by Tomas, SWFUpload object (another flash object) and the closest one to what I am wondering about but requires PHP to be patched to make use of upload_progress_meter_get_info.

I wonder if it is possible to actually do what I am saying and if there is any solution out there that I missed on my googlexperience. I have seen some scripts around there that promise such solution but when I tried, poof!, it didn't work as expected. So the challenge is here... I am going to try a solution that actually checks the actual file size of a temporary file after an uploaded form has been posted... Anyone for the challenge? or anyone knows any 'guru' out there to get me to the right direction?

---