Tag : English

It's pretty common to embed a map on a contact page. But you want this map only on this page. So you don't need to load the Google Map API on every page of your site

Coupled with adress microdata (which you should already have in place), it becomes easy to load a google map on demand with a marker to the desired address.

1. Load Google Map

To load google map is simple. Just call in the URL of the Ajax API. But we must ensure proper load and execute the following script when it's completly loaded. Otherwise, you call functions that doesn't exist on the page.

A simple callback on the load of the script isn't sufficient because Google actually loads an other JS file, corresponding to the current Google Map API version.

I you readSi the doc, you understand you can add a callback that will be called by the APi once loaded

We'll write a function to load this JS file and add a callback given as a parameter. A small addition will permit to load it only one time.

var gmapUrl = 'http://maps.google.com/maps/api/js?sensor=false',
	gmapLoaded = false,
	loadGmap = function(clb) {
		if (!gmapLoaded) {
			window.gMapClb = function() {
				window.gMapClb = null;
				gmapLoaded = true;
				clb();
			};
			$.ajax({url: gmapUrl+'&callback=gMapClb', dataType: 'script'});
		} else {
			clb();
		}
	};

We can now dynamically load the Google Map API and execute a function when everything has come up.

2. Read microdata

The purpose of the code we're writing is to be called on a container, find Address microdata and display the corresponding map.

Once the address is found, we will use geocode from Googme Map to locate the map and add a marker.

Reading microdata is pretty easy thanks to jQuery. We're adding every element in an array:

var adr = me.find('[itemtype="http://data-vocabulary.org/Address"]');
if (adr.length) {
	var search = [],
		elm;
	$.each(['street-address', 'postal-code', 'locality', 'region', 'country-name'], function() {
		elm = adr.find('[itemprop="'+this+'"]');
		if (elm.length)
			search.push(elm.text());
	});
}

Once the address is on the search Array, it only remains to call the geocoder to find its location.

3. Locate address and show the map

We've got the address. We can load the Google Map API on demand with a callback. We still have to find the address location. And if we have it, show the map. To search it, I won't discuss here all the details of Geocoder.

When getting a result from geocoder, a div[class=map] is append to the containing element and the Google Map instance will be created on it. It's the CSS duty to positionnate this div and giving it a height and width.

To allow a toffle of this map, we will save a reference of the map container, a reference of the Google map and the location of the result. A marker is automaticall added at the result location.

loadGmap(function() {
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode({address: search.join(', ')}, function(results, status) {
		if (results.length && status == google.maps.GeocoderStatus.OK) {
			var map = $('<div class="map" />').appendTo(me),
				GMap = new google.maps.Map(map.get(0), {
					center: results[0].geometry.location,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					zoom: defaultZoom
				});
			new google.maps.Marker({
				map: GMap,
				visible: true,
				position: results[0].geometry.location
			})
			me.data('gmap', {
				map: map,
				GMap: GMap,
				location: results[0].geometry.location
			});
		}
	});
});

Note the defaultZoom variable defined elsewhere. (required to create a map)

 

4. Put it all together

We have the 3 necessary elements to view the map. Let's put that in a jQuery plugin, add functionnality to hide/show it on each call of this plugin and we get this:

$(function() {
	var defaultZoom = 15,
		gmapUrl = 'http://maps.google.com/maps/api/js?sensor=false',
		gmapLoaded = false,
		loadGmap = function(clb) {
			if (!gmapLoaded) {
				window.gMapClb = function() {
					window.gMapClb = null;
					gmapLoaded = true;
					clb();
				};
				$.ajax({url: gmapUrl+'&callback=gMapClb', dataType: 'script'});
			} else
				clb();
		};
	
	$.fn.extend({
		myGmap: function() {
			return this.each(function() {
				var me = $(this);
				if (!me.data('gmap')) {
					var adr = me.find('[itemtype="http://data-vocabulary.org/Address"]');
					if (adr.length) {
						var search = [],
							elm;
						$.each(['street-address', 'postal-code', 'locality', 'region', 'country-name'], function() {
							elm = adr.find('[itemprop="'+this+'"]');
							if (elm.length)
								search.push(elm.text());
						});
						if (search.length) {
							loadGmap(function() {
								var geocoder = new google.maps.Geocoder();
								geocoder.geocode({address: search.join(', ')}, function(results, status) {
									if (results.length && status == google.maps.GeocoderStatus.OK) {
										var map = $('<div class="map" />').appendTo(me),
											GMap = new google.maps.Map(map.get(0), {
												center: results[0].geometry.location,
												mapTypeId: google.maps.MapTypeId.ROADMAP,
												zoom: defaultZoom
											});
										new google.maps.Marker({
											map: GMap,
											visible: true,
											position: results[0].geometry.location
										})
										me.data('gmap', {
											map: map,
											GMap: GMap,
											location: results[0].geometry.location
										});
									}
								});
							});
						}
					}
				} else {
					me.data('gmap').map.fadeToggle(function() {
						if (me.data('gmap').map.is(':not(:visible)')) {
							me.data('gmap').GMap.setZoom(defaultZoom);
							me.data('gmap').GMap.panTo(me.data('gmap').location);
						}
					});
				}
			});
		}
	});
});

When the map is hidden, the map is centered again and the default zoom is resset to the default value.

Enjoy!

Version française de ce billet.

For a tooltip script quickly developed for a big current project I'm working on, I'm using the position plugin of jQuery UI.

This function allow you to positionnate an element exactly how you need relative to another element. The ultimate function when dealing with tooltip.

This plugin comes with a detection collision with the windows. In other words, if the positionnate element goes outside the window, then it's positionnate on the other side.

The only problem is that there is no possibility to detect when this collision is happening.

By reading the code I found a simple solution to detect it and a way to add a class to the positionnating element. In my case it is useful in order to change the arrow of the tooltip on the other side.

 

Here is the code:

var currentlyPositionning,
    initPos;
$.ui.position.custom = {
    left: function(position, data) {
        initPos = position.left;
        $.ui.position.flip.left(position, data);
        if (initPos != position.left) {
            currentlyPositionning.addClass('tooltipFlip');
        }
    },
    top: function(position, data) {
        initPos = position.top;
        $.ui.position.flip.top(position, data);
        if (initPos != position.top) {
            currentlyPositionning.addClass('tooltipFlip');
        }
    }
};

Actually we're simply adding a custom option to the plugin. For each top ou left properties, the code is checking if the value is changed by the original collision detection function. If it's the case, then we're adding a class to the element.

You probably notice the currentlyPositionning variable; It should correspond to the element that is currently positionned. Indeed there is no information on the data object to let us find it back.

 

Finally, to use this new functionnality you should call the position function as following::

currentlyPositionning = elem;
elem.position({
    of: me,
    my: 'left bottom',
    at: 'right top',
    offset: '15px',
    collision: 'custom'
});

Et voilà.

Version française de ce billet.

Did you already ask yourself how could look all the text from your blog or your website in a tag cloud?

Wordle gives you its own version, editable, customizable or simply randomly:

via 37 Signals

That's it, my internship is over since last Friday.

Almost one year by Fluidesign to program, develop, integrate, learn.

I really progressed in JavaScript and Ajax Ajax with jQuery that I can't leave anymore. I also learnt many about HTML/CSS integration, thanks to PJ to whom I always asked his mind.

Anyway, it was one year of happiness with fabulous people. The last weeks looked like holidays for everybody (too bad, they're going to work on Monday...).

To not forget all the website I worked in, here is an alphabetical listing of them with a tweak description of what I've done.

• Amandine Café: Navigation by Ajax
• Amber Ridge: The first website I worked on to update some photos and copies
• Athletes: a few PHP and JavaScript debug
• Broad Academy and Broad Residency: Weekly text and image updates
• California Apparel News: Adding PHP functionalities and HTML/CSS updating
• Coral Tree Café: Contact form debugging
• Coupon Chief: PHP and JavaScript debug, HTML/CSS integration of the blog
• First Announcement: Adding functionnalities (Crop Image) and PHP/JavaScript debug
• Gameworks: Adding functionnalities in the backend, Flash, HTML, and CSS updates
• Infinity Studios: PHP Debug (OsCommerce)
• It's Hospitality: Adding functionalities, templates creating, JavaScript, installing search using Zend Lucene. The website uses Symfony (I spent almost all my time on it during the last 6 months)
• Karma Fundation: Flash Debug and updating
• Karma Kandyland: Flash and HTML updating
• Kayne: Quarterly HTML/CSS Updates
• Lisa Kline: ASP.Net and JavaScript Debug
• Low Impact Living: Debug and Adding functionalities
• Not Neutral: HTML updates and uses of Campaign Monitor for the newsletter
• Regent Properties: HTML and Flash updates
• Rimi Security: whole PHP development
• Say Het There: whole PHP and JavaScript development
• Sinai Temple: PHP Debug and HTML updates
• Temple Emmanuel of Beverly Hills: HTML updates
• Tripkick: PHP and JavaScript development of the frontend using CakePHP
• Wessco: PHP and HTML updaes

You could think it's not a lot for one year. But as I said, It's Hospilaty took me a lot of time because it's really huge.

One more time, I'd like to thanks all the Fluidesign team who was really great during all my internship.

Now I still have 3 weeks in USA. A friend is coming on Monday and we'll travel for a roadtrip which will unforgettable. (Yes you probably got it, you'll probably have more posts with a lot of text and photos...)

Version française de ce billet

Voilà bientôt 10 mois que je suis à Los Angeles. Comme je l'avais déjà dit 2 mois après mon arrivée ici, j'ai beaucoup progressé. Et encore plus maintenant.

Comme j'étais vraiment mauvais avant, je vais essayer de résumer toutes les étapes qui m'ont permis d'avoir le niveau que j'ai actuellement. Alors bien sûr, je suis très loin d'être bilingue -il faut 10 ans en immersion pour ça, et encore...-, mais je comprends les gens et je me fais comprendre : l'essentiel !

De plus, durant tout mon cursus scolaire, j'ai toujours eu des problèmes en langue. Des professeurs trop peu intéressant au collège, des textes et sujets barbants, rien qui m'a attiré dans cette langue. Les beaux discours des professeurs qui rabâchent -pas forcément à tort- que l'anglais est indispensable n'y faisait rien. Je n'ai jamais été bon pour apprendre par la théorie, mais j'ai toujours préféré la pratique : Learning by doing. Et pratiquer l'anglais en répondant à une cassette, ce n'est pas des plus sexy quand même...

Les bases

Avant toute chose, il est indispensable d'acquérir les bases de langue : comment conjuguer un verbe, quels sont les pronoms personnels, comment sont formées les phrases. Pour ça, l'école a quand même réussi à m'inculquer ça. Il faut dire que l'anglais n'est quand même pas très compliqué de ce côté là. les verbes au présent simple sont toujours pareil sauf pour la 3ème personne, la tournure des phrases ressemble beaucoup au français. Et si vous utilisez des questions ou du passé, l'utilisation du verbe do pour les verbes réguliers suffit.

Approfondir ces bases

Les bases s'acquièrent rapidement et simplement. Mais il va falloir rapidement emporter un certain bagage linguistique qui s'acquiert un peu plus difficilement. Là encore, il n'y a pas de secret, et si, comme moi, vous avez manqué le coche à l'école, je vous conseille ce livre : L'anglais correct pour les nuls. Derrière ce titre, se cache un livre qui commencera par vous raconter d'où vient la langue, comme elle s'est créée. Chose qu'on ne nous apprend pas à l'école. De plus, n'ayez pas peur, si vous n'y connaissez pratiquement rien en anglais. Comme je l'ai dit, on raconte l'anglais plus qu'on ne l'enseigne. C'est donc une approche beaucoup plus ludique. Dans les premiers chapitres, il y a très peu d'anglais. L'introduction de la langue n'intervient que plus tard, petit à petit, au fil des pages.

A la fin de ce livre, vous aurez en tête une très bonne idée de comment s'exprimer en anglais. Vous aurez acquis les bases, un bon paquet de vocabulaire et serez prêt à réellement pratiquer la langue.

Pratiquer la langue 

Une chose sur laquelle les enseignants ont toujours insisté, c'est que la pratique est indispensable. Autant pour progresser que pour conserver les acquis. Et encore une fois, ce n'est pas à l'école qu'on pratique la langue. Depuis que je suis ici, je me suis rendu compte qu'une langue se décompose en 4 parties : la lecture, l'écriture, la compréhension orale, l'expression orale. Il est évident qu'ils vont 2 par 2, et que progresser dans l'un fera automatiquement progresser dans son binôme, et toujours un peu aussi les 2 autres. Je vais donc décomposer ces 4 processus. Je les ai ordonnés dans l'ordre, du plus facile ou plus compliqué à acquérir. 

La lecture

Vous aurez déjà commencer cette étape en lisant le livre indiqué plus haut, mais cela n'est absolument pas suffisant. Le problème avec le livre, c'est qu'il mélange français et anglais. C'est beaucoup plus facile de le lire, mais le cerveau n'est pas complètement immergé dans un environnement anglophone. L'acquisition du vocabulaire est donc plus difficile, car elle va se faire par association avec des mots français. Il est beaucoup plus intéressant -du moins, pour moi, c'est comme ça que je le ressens- d'apprendre par association avec des images ou des idées. Bien sûr, ces images ou idées vont aussi avoir une transposition dans votre langue natale, mais l'association à une image est plus facile à retenir. J'en veux pour preuve ces génies qui font des calculs immenses en quelques secondes. A la question "Comment faites-vous ?", tous répondent à peu de choses près la même chose : "Je visualise les chiffres" ou "Je me raconte une histoire".

Donc pour en revenir à l'anglais, il faut lire de l'anglais -étonnant, n'est-ce pas. Mais que lire ? La réponse qui viendra à tout le monde est un livre. Alors oui, lire des livres anglais fonctionnent très bien. Même s'il est difficile de tout comprendre, il est possible de jongler avec un dictionnaire si vraiment c'est indispensable. Mais il faut l'éviter au maximum je pense, encore une fois pour éviter ce processus d'association avec le français. Pour ma part, j'ai déjà lu 3 livres de Dan Brown -l'auteur du Da Vinci Code- sur les conseils de mon frère et j'ai adoré. C'était vraiment difficile au début, mais du moment qu'on comprend l'ensemble de l'histoire, ce n'est pas grave. Je n'ai pas absolument tout compris les phrases et les mots, mais j'ai beaucoup améliorer mon vocabulaire en lisant ces livres.

Mais lire un livre est souvent intimidant. Ou on peut ne pas trouver quelque chose qui nous intéresse. Alors pour ça, j'ai trouvé un remplaçant, et là, vous ne pourrez pas dire qu'il n'y a rien pour vous : internet. Vous avez surement une passion, un centre d'intérêt quelconque et qui peut se trouver sur internet. D'ailleurs, il est possible que vous lisiez déjà à ce propos sur internet, mais en français. Changer vos habitudes, et lisez donc en anglais ! Pour ce faire, direction google.com et commencez à chercher. Attention, il est fort probable qu'il soit encore en français. Pensez à cliquer sur Google.com in English. Pour rechercher en français, utiliser google.fr. Et là, libre à vous de faire preuve d'imagination pour trouver des sites qui vous intéresse. Une fois trouvé, ajouter le à vos marques-page ou mieux, utiliser les RSS s'il en dispose !

L'écriture

Maintenant que vous savez comment se compose une phrase anglaise, que vous avez acquis du vocabulaire, il faut penser à écrire. Là aussi, il va falloir se forcer à écrire, et ce n'est pas forcément facile au début. Une solution simple si vous rédiger un blog : traduisez simplement vos billets. Ainsi vous n'aurez pas d'horror vacui en commençant. C'est ce que j'ai commencé à faire il y a peu de temps. Si vous ne tenez pas de blog, pourquoi ne pas en commencer un ? Ou bien essayer de vous rendre sur des forums et de poser des questions sur les sujets qui vous intéressent, de répondre à d'autres. Dans le même temps, vous devrez lire aussi, donc c'est tout bénéfice. Attention par contre à ne pas aller sur des forums où le langage SMS et abrégé est de mise. Si c'est le cas, fermer le site et trouvez-en un autre.

Et si vous ne trouvez toujours pas votre bonheur, essayer de faire la connaissance d'un anglophone passionné par la même chose que vous et échanger par email. Et sinon, je suis un peu à cours d'idée là. Si vous en avez d'autres, n'hésiter pas à partager.

La compréhension orale

On passe maintenant au second couple d'apprentissage. Et là, ça devient du sérieux ! En effet, quand avec la lecture ou l'écriture, on a tout le loisir d'utiliser un dictionnaire ou de relire quand l'on est pas sûr de bien avoir compris, c'est impossible dans la vraie vie. Il existe des solutions multimédia qui permettent d'apprendre l'anglais. Je n'ai jamais testé, mais je pense que ma réaction serait la même qu'à l'école : boooooooring...

A la place, je vous propose plutôt de regarder des films, des séries ou n'importe quoi d'autre. Si besoin, vous pouvez vous aider des sous-titre. Attention, là encore, évitez à tout prix les sous-titre en français ! Avec le texte en français, vous vous focaliserez dessus et n'écouterez même pas les acteurs parler. Avec de l'anglais, vous entendrez en même temps ce que vous lirez, et donc vous apprendrez plus facilement : le texte correspond exactement au paroles ! Si cela vous fait peur, commencez par des films que vous avez déjà vu, que vous connaissez. Vous n'aurez donc pas de problème pour comprendre l'histoire.

Les séries ont l'avantage d'être pour la plupart du temps facile à comprendre et sont assez court. C'est donc un bon point pour commencer. Mais il est moins évident de trouvez les sous-titres. Si vous pouvez vous passer des sous-titre, un bon plan : les sites des chaînes US propose en ligne les derniers épisodes gratuitement : la Fox pour les Simpsons, Bones, Prison Break, ABC pour Lost, Ugly Betty, Desperate Housewife, Grey's Anatomy et NBC pour Urgences, Heroes, Scrubs (les listes ne sont pas exhaustives !)

Si vous avez des chaînes anglophones chez vous (via internet par exemple), vous pouvez aussi regarder des programmes qui vous intéresse ou les news. Les news sont par contre très difficile au début, car il parle la plupart du temps très vite. Ne vous inquiétez pas donc si vous ne comprenez pas tout au début, c'est normal.

Tous ces exercices vont vous aider à développer votre oreille qui vous permettra de différencier les mots lorsque quelqu'un vous parlera et de vous exprimer. En effet, comment parler si on ne sait pas comment prononcer les mots ?

L'expression orale

Stade ultime de l'apprentissage d'une langue, l'expression orale est le point le plus difficile à acquérir. Et là, j'avoue ne pas avoir vraiment d'autres solutions que de partir en immersion dans un pays anglophone, pour un minimum de 3 mois. Au début, les gens vous comprendront très mal, vous devrez sans doute écrire les choses pour vous faire comprendre, mais à force de pratiquer, vous progresser, c'est évident. Et puis les gens sont pour la plupart du temps très compréhensifs, et vous corrigerons même pour vous faire progresser. C'est d'ailleurs une chose qu'il faut demander aux gens. C'est en effet un très bon moyen pour apprendre, c'est bien connu.

De plus, la question se pose de partir tout seul ou à plusieurs. Là encore, il est beaucoup plus intéressant de partir seul, pour être complètement immergé dans le monde anglophone. Si, pendant mon stage, j'avais été avec des français les soirs et les week-end, j'aurai beaucoup moins progresser car nous aurions sans doute parler français. Depuis que je suis ici, je n'ai parlé français que très rarement : quelques coups de fils en France, des rencontres avec des francophones, et depuis quelques temps, un nouveau graphiste français.

Mon expérience

J'ai donc décris les moyens techniques que j'ai utilisé pour progresser en anglais, et j'espère qu'ils seront utiles à quelques uns. J'ai décris les étapes de l'acquisition dans l'ordre le plus simple et facile, mais cela n'a pas été du tout mon cas. J'ai commencer par le livre indiqué plus haut offert par mon petit frère -qui se moquait de moi d'ailleurs, mais qui veut quand même le lire-, puis je suis parti à Los Angeles, continuant de le lire dans l'avion. Puis j'ai donc du faire face à toutes les facettes de la langue en même temps. Cela a été difficile au début, mais je n'en suis pas mort. Si je ne serai pas parti, je n'aurai jamais atteint le niveau que j'ai actuellement. Encore une fois, le niveau que j'ai n'est pas celui d'un bilingue. Mon accent est terriblement français. Je fais encore des fautes ; beaucoup moins, mais ça m'arrive. Mais maintenant, je me rends compte, et me corrige tout seul. Au final, je comprends les gens : je ne comprends pas tout le temps absolument 100% des mots qu'ils disent, mais je comprends le sens général de la phrase.

C'est aussi un mécanisme important à comprendre. Il n'est absolument pas indispensable de comprendre tout pour comprendre l'idée d'une phrase. De plus, la compréhension de cette phrase permettra peut-être de comprendre le sens de ce que l'on a pas compris. Vous suivez l'idée ?

Enfin, pour revenir sur l'apprentissage visuel et non par association français, j'ai remarqué un phénomène intéressant. Il m'arrive des fois de lire un texte en le comprenant parfaitement, mais il m'est impossible de le traduire en français. Je l'ai compris dans le sens où je visualise ce qui y est dit, mais je ne peux pas le traduire directement en français car je n'ai pas les mots français pour cette image que j'ai. Même chose quand je parle. Je sais le dire en anglais, mais impossible en français... Bon, un petit paragraphe quelque peu bizarre, je vous l'accorde, mais je tenez à partager cette expérience. Cela vous est déjà arrivé ?

J'en ai donc terminer avec ce billet qui me tenait à coeur. Autant pour partager mon expérience et peut-être en aider certains que pour me forcer moi-même à continuer à pratiquer une fois que je rentrerai, pour ne pas tout perde.

Des choses à ajouter ? Des expériences à partager ? Les commentaires sont là pour ça.