Le Mashup en pleine explosion ?
Tout le monde en parle, mais qu'en est il vraiment sur le web ?
D'après le très sérieux site programmable web, nous pouvons constater une très forte augmentation ces 6 derniers et ce ne serait pas prêt de s'arrêter car après la première vague des développeurs confirmés va venir tous les fous d'informatiques du dimanche prêt a tout pour avoir son propre Mashup
Les chiffres nous confirment que la plupart des Mahup sont réalisés pour des cartes personnalisées ou de la recherches avec l'API google dans la plupart des cas observés car c’est celle qui bénéficie de la plus grande documentation.
Comment les mashups sont-ils conçus ?
Pour élaborer ces sites hybrides, les développeurs ont recours à des API ouvertes. Ces interfaces de programmation (en anglais Application Program Interface) utilisent la technologie des Web services qui permettent de créer de nouveaux services composites en intégrant et en exploitant des programmes, des services ou des contenus sources élaborés par d'autres.
De nombreux éditeurs fournissent librement des API afin d'inciter les développeurs à concevoir des mashups exploitant leur contenu. C'est ainsi le cas des principaux acteurs de l'Internet, tels Google, Yahoo, Amazon, eBay ou encore Microsoft.
Les mashups font également appel à Ajax, ainsi qu'à des procédés d'extraction et d'agrégation de contenu, comme RSS ou Atom (deux formats de syndication de contenu).
Si vous voulez vous amuser à mixer les API pour trouver votre bonheur, cette page est faite pour vous => Web 2.0 Mashup Matrix
par 20 Notes sur : Epita Team
publié dans :
20notessurmashup
Et hop, une nouvelle petite video. Vous connaissez Youtube ? L'hébergeur vidéo le plus populaire du moment. Il offre en plus de l'hébergement de vidéos, la possibilité d'intégrer ces vidéo sur un site personnel et tout celà très simplement, sans avoir a souffrir de l'hébergement de la vidéo. Un très bon exemple de Mashup, de plus en plus utilisé. Nous vous présentons donc aujourd'hui un petit tutoriel vidéo expliquant comment intégrer une vidéo Youtube à son site Web, le tout en musique. Enjoy :)
Le lien direct au cas ou : http://sthocs.free.fr/youtube.avi
Le lien direct au cas ou : http://sthocs.free.fr/youtube.avi
par Sylvain
publié dans :
20notessurmashup
Sur son blog Karl Dubost, un internaute averti et vétéran de la "blogosphère" s'insurge en disant qu'il faut "arrêter de prendre les gens pour des imbéciles", il argumente ce propos par la déclaration suivante:
"Utiliser les concepts de liberté, de créativité, de beaux sentiments, de communautés pour mieux vous abuser, pour mieux pomper tout ce qui fait de vous un consommateur bien identifié est une arnaque." "Nous assistons à la naissance d'une nouvelle forme d'esclavage. Dans une chaîne de production, ce qui coûte souvent le plus cher, c'est la main-d'œuvre…" "Pourquoi pensez-vous que toutes ces sociétés investissent dans le domaine du 'réseau social' (l'ironie des termes), non pas pour améliorer le sort de l'humanité, mais bien parce qu'il y a, à la clef, un intérêt commercial. Pourquoi font-ils un pari sur vous ? parce que vous faites tout cela gratuitement ou plus exactement vous prenez de votre temps et de vos compétences pour le faire sans qu'ils aient à vous payer pour le faire."
En effet, une article paru dans le Newsweek annonçait ceci:
Why is everyone so happy in Silicon Valley again? A new wave of start-ups are cashing in on the next stage of the Internet. And this time, it's all about… you.
The New Wisdom of the Web, Steven Levy, Brad Stone
Le web 2.0 est très orienté sur la communauté, l'échange et les réseaux de relations.
Mais à qui profite toute cette euphorie ?
L'intérêt des multinationales de l'Internet pour les solutions et services 2.0 à forte valeur ajoutée potentielle et à matière première gratuite n'est pas étrangère au succès "médiatique" du concept.
L'internet 2.0, c'est ce que nous faisons. Nos amis, ce que nous faisons, les vidéos que nous aimons, les personnes que nous cotôyons, ce qu'elles font.
C'est une intrusion dans la vie privée des internautes, une immense base de données sur la vie privée des individus. Elle s'auto-alimente et en redemande.
On savait déjà que certaines sociétés dévoilaient à qui le voulait, nos achats, ou nos activités afin de mieux cibler le consommateur.
Maintenant c'est le consommateur qui fait tourner la machine avec un effort beaucoup moins conséquent de la part de l'entreprise.
C'est un marché immense et qui semble beaucoup plus viable celui du web 1.0.
Une nouvelle vague de start-up est déjà en vue.
Yahoo a récemment acheté le site de partage d'information del.icio.us.
"Utiliser les concepts de liberté, de créativité, de beaux sentiments, de communautés pour mieux vous abuser, pour mieux pomper tout ce qui fait de vous un consommateur bien identifié est une arnaque." "Nous assistons à la naissance d'une nouvelle forme d'esclavage. Dans une chaîne de production, ce qui coûte souvent le plus cher, c'est la main-d'œuvre…" "Pourquoi pensez-vous que toutes ces sociétés investissent dans le domaine du 'réseau social' (l'ironie des termes), non pas pour améliorer le sort de l'humanité, mais bien parce qu'il y a, à la clef, un intérêt commercial. Pourquoi font-ils un pari sur vous ? parce que vous faites tout cela gratuitement ou plus exactement vous prenez de votre temps et de vos compétences pour le faire sans qu'ils aient à vous payer pour le faire."
En effet, une article paru dans le Newsweek annonçait ceci:
Why is everyone so happy in Silicon Valley again? A new wave of start-ups are cashing in on the next stage of the Internet. And this time, it's all about… you.
The New Wisdom of the Web, Steven Levy, Brad Stone
Le web 2.0 est très orienté sur la communauté, l'échange et les réseaux de relations.
Mais à qui profite toute cette euphorie ?
L'intérêt des multinationales de l'Internet pour les solutions et services 2.0 à forte valeur ajoutée potentielle et à matière première gratuite n'est pas étrangère au succès "médiatique" du concept.
L'internet 2.0, c'est ce que nous faisons. Nos amis, ce que nous faisons, les vidéos que nous aimons, les personnes que nous cotôyons, ce qu'elles font.
C'est une intrusion dans la vie privée des internautes, une immense base de données sur la vie privée des individus. Elle s'auto-alimente et en redemande.
On savait déjà que certaines sociétés dévoilaient à qui le voulait, nos achats, ou nos activités afin de mieux cibler le consommateur.
Maintenant c'est le consommateur qui fait tourner la machine avec un effort beaucoup moins conséquent de la part de l'entreprise.
C'est un marché immense et qui semble beaucoup plus viable celui du web 1.0.
Une nouvelle vague de start-up est déjà en vue.
Yahoo a récemment acheté le site de partage d'information del.icio.us.
par Lou..
publié dans :
20notessurmashup
Plusieurs personnes nous ont demandé des exemples de Mashup, voici une superbe vidéo qui illustre bien le Mashup.
Prenez 2 trilogies cultes, STAR WARS et LORDS OF THE RING, mélangez, saupoudrez de bonnes idées et regardez. Régalez-vous les yeux et les oreilles.
Un Mashup vidéo très réussi, réalisé par MISSHAPEN FEATURES.
Télécharger ces videos.
par 20 Notes sur : Epita Team
publié dans :
20notessurmashup
Créer une carte peut s'avérer utile pour certains sites. La qualité des carte étant de rigueur, le publique veut des images satellites et/ou aériennes.
Ce poste va donc être consacré à expliquer comment y arriver.
Le nécessaire pour y parvenir est :
- "map API" qui permettra d'insérer une carte dans le site internet,
- source de données (data source),
- comment passer à travers les restrictions de domaine ?
Il y a une multitude de choix de carte à intégrer. La plus connue est Google Maps, mais il y a aussi Virtual Earth ou encore le Yahoo! Maps.
Ce dernier est vraiment au point, il offre différentes possibilités pour toutes les utilisations que l'on peut faire d'une carte.
Yahoo! Maps permet différente manière d'intégrer sa mappemonde et d'interagir avec :
- une simple API prenant un fichier XML formaté geoRSS
- le JavaScript, permettant de créer facilement des applications optimisées.
- L'API AJAX.
Voici un exemple en ligne >ici< où vous pourrez voir le code javaScript (en regardant la page source).
L'API AJAX est utilisée et permet ainsi :
- de Geocoder une adresse et l'afficher dans la carte
- d'afficher toutes les informations concernant le trafic comme les accidents, les zones en construction, etc.
- d'informer sur les zones de recherche
Les data sources utilisées sont trois web servicies mis à disposition récemment par Yahoo!. Ils sont facile à programmer (c'est juste une URL avec des paramètres qui renvois du XML).
Le problème est que les browsers tels que Firefox et IE imposent des restrictions de domaine et refusent des appels HTTP depuis un autre domaine.
Alors pour palier à ce problème, il y a différents moyens :
- Software proxy
- Apache mod_rewrite
- Chargement dynamique des fichiers .js via des scripts tags à la place de code JavaScript.
La façon la plus simple est d'écrire un proxy qui se situera sur le même serveur que l'application et qui ne fera que passer les Requêtes et les Réponses depuis et vers le serveur web.
Après la théorie, laissons place à la pratique ! Voici un peu de code :
Comment ajouter des contrôles/réglages pour la map :
Tous ces réglages et bien d'autres encore peuvent être trouvés dans le Getting Started Guide for AJAX.
Maintenant, pour l'exemple on va s'intéresser à comment passer outre la restriction des domaines... Un fichier PHP en guise de proxy fera l'affaire :
Maintenant que le proxy est en place, on va pouvoir faire l'appel à la data source api.local.yahoo.com.
Voici comment faire pour que lorsqu'on clic sur le bouton ‘AddLocation’ une boite de dialogue s'ouvre et permettra d'entrer une adresse.
Quand le bouton est cliqué, la fonction addGeocode() est appelée. Elle permet de préparer la requête et d'appelé le proxy.
La fonction callWS() fait une requête XmlHttpRequest au proxy et affiche au besoin ‘Loading...’ si ça prend du temps.
La méthode parseResult() permet l'exécution si l'appel à la data source a réussie.
Dès lors, tout ce qui reste à faire est de parser le XML et de rajouter les marqueurs.
Dans cet exemple le parseur xmlw3cdom.js (de SourceForge) est utilisé. Il est très complet (trop pour l'exemple) mais il est d'une simplicité extrême.
Ce parseur DOM nécessite le parseur SAX suivant : xmlsax.js pour pouvoir travailler avec les objets XML.
La manière de parser un fichier XML est très simple, alors nous allons nous intéresser plutôt à la suite (Pour les plus curieux, il suffit de regarder le code source).
Les résultats sont utilisés pour créer un point et une chaîne de caractère pour la Smartwindow, qui sont passé à la méthode createYMarker().
Crée les marqueurs sur la map.
Tout ceci reste un exemple assez basique, mais il peut devenir une base pour un mashup plus complexe. Dès que cette partie est faite, ça ne peut qu'aller en s'améliorant =)
Voici d'autres exemples (mais pas Yahoo! cette fois) :
http://research.microsoft.com/mapcruncher/Gallery/Universities/
http://research.microsoft.com/mapcruncher/Gallery/NationalParks/
Et bon courage à toutes celles et ceux qui veulent se lancer dans ce périple !
Ce poste va donc être consacré à expliquer comment y arriver.
Le nécessaire pour y parvenir est :
- "map API" qui permettra d'insérer une carte dans le site internet,
- source de données (data source),
- comment passer à travers les restrictions de domaine ?
Il y a une multitude de choix de carte à intégrer. La plus connue est Google Maps, mais il y a aussi Virtual Earth ou encore le Yahoo! Maps.
Ce dernier est vraiment au point, il offre différentes possibilités pour toutes les utilisations que l'on peut faire d'une carte.
Yahoo! Maps permet différente manière d'intégrer sa mappemonde et d'interagir avec :
- une simple API prenant un fichier XML formaté geoRSS
- le JavaScript, permettant de créer facilement des applications optimisées.
- L'API AJAX.
Voici un exemple en ligne >ici< où vous pourrez voir le code javaScript (en regardant la page source).
L'API AJAX est utilisée et permet ainsi :
- de Geocoder une adresse et l'afficher dans la carte
- d'afficher toutes les informations concernant le trafic comme les accidents, les zones en construction, etc.
- d'informer sur les zones de recherche
Les data sources utilisées sont trois web servicies mis à disposition récemment par Yahoo!. Ils sont facile à programmer (c'est juste une URL avec des paramètres qui renvois du XML).
Le problème est que les browsers tels que Firefox et IE imposent des restrictions de domaine et refusent des appels HTTP depuis un autre domaine.
Alors pour palier à ce problème, il y a différents moyens :
- Software proxy
- Apache mod_rewrite
- Chargement dynamique des fichiers .js via des scripts tags à la place de code JavaScript.
La façon la plus simple est d'écrire un proxy qui se situera sur le même serveur que l'application et qui ne fera que passer les Requêtes et les Réponses depuis et vers le serveur web.
Après la théorie, laissons place à la pratique ! Voici un peu de code :
<html>
<head>
<script type="text/javascript"
src="http://api.maps.yahoo.com/ajaxymap?v=2.0
&appid= dantheurer"></script>
<style type="text/css">
#mapbox {
height: 600px;
width: 600px;
} </style>
</head>
<body>
<div id="mapbox"></div>
<script type="text/javascript">
//init map
var ymap =
new YMap(document.getElementById('mapbox'));
//define a point to start at
var startPoint = new YGeoPoint(37.34,-122.02);
//center and draw map at given point
ymap.drawZoomAndCenter(startPoint, 7);
</script>
</body>
</html>
<head>
<script type="text/javascript"
src="http://api.maps.yahoo.com/ajaxymap?v=2.0
&appid= dantheurer"></script>
<style type="text/css">
#mapbox {
height: 600px;
width: 600px;
} </style>
</head>
<body>
<div id="mapbox"></div>
<script type="text/javascript">
//init map
var ymap =
new YMap(document.getElementById('mapbox'));
//define a point to start at
var startPoint = new YGeoPoint(37.34,-122.02);
//center and draw map at given point
ymap.drawZoomAndCenter(startPoint, 7);
</script>
</body>
</html>
Comment ajouter des contrôles/réglages pour la map :
//init map
var ymap = new YMap(document.getElementById('mapbox'));
//add controls
ymap.addPanControl();
ymap.addZoomLong();
…
var ymap = new YMap(document.getElementById('mapbox'));
//add controls
ymap.addPanControl();
ymap.addZoomLong();
…
Tous ces réglages et bien d'autres encore peuvent être trouvés dans le Getting Started Guide for AJAX.
Maintenant, pour l'exemple on va s'intéresser à comment passer outre la restriction des domaines... Un fichier PHP en guise de proxy fera l'affaire :
yproxy.php
<?php
header("Content-type: text/xml\n\n");
$url = $_SERVER['QUERY_STRING'];
//strpos allows only calls to specified endpoint
if ( strpos($url,"http://api.local.yahoo.com/") === 0)
{
$ch = curl_init($url);
curl_exec($ch);
}
?>
<?php
header("Content-type: text/xml\n\n");
$url = $_SERVER['QUERY_STRING'];
//strpos allows only calls to specified endpoint
if ( strpos($url,"http://api.local.yahoo.com/") === 0)
{
$ch = curl_init($url);
curl_exec($ch);
}
?>
Maintenant que le proxy est en place, on va pouvoir faire l'appel à la data source api.local.yahoo.com.
Voici comment faire pour que lorsqu'on clic sur le bouton ‘AddLocation’ une boite de dialogue s'ouvre et permettra d'entrer une adresse.
<div class="inputelement">
<button onClick="addGeocode()">
Add location</button> <input id="geoquery"
value="5th Avenue,New York" size="50">
</input> - enter an address</div>
<button onClick="addGeocode()">
Add location</button> <input id="geoquery"
value="5th Avenue,New York" size="50">
</input> - enter an address</div>
Quand le bouton est cliqué, la fonction addGeocode() est appelée. Elle permet de préparer la requête et d'appelé le proxy.
var query = document.getElementById("geoquery").value;
var uri =
"http://api.local.yahoo.com/MapsService/V1/geocode?
appid=dantheurer&location=" + query;
callWS(uri, "geocode");
var uri =
"http://api.local.yahoo.com/MapsService/V1/geocode?
appid=dantheurer&location=" + query;
callWS(uri, "geocode");
La fonction callWS() fait une requête XmlHttpRequest au proxy et affiche au besoin ‘Loading...’ si ça prend du temps.
La méthode parseResult() permet l'exécution si l'appel à la data source a réussie.
var url = 'yproxy.php?' + encodeURI(target);
xmlhttp.open('GET', url, true);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('result').innerHTML = '';
parseResult(xmlhttp.responseText, service);
} else {
document.getElementById('result').innerHTML =
"Loading...";
}
};
xmlhttp.send(null);
}
xmlhttp.open('GET', url, true);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('result').innerHTML = '';
parseResult(xmlhttp.responseText, service);
} else {
document.getElementById('result').innerHTML =
"Loading...";
}
};
xmlhttp.send(null);
}
Dès lors, tout ce qui reste à faire est de parser le XML et de rajouter les marqueurs.
Dans cet exemple le parseur xmlw3cdom.js (de SourceForge) est utilisé. Il est très complet (trop pour l'exemple) mais il est d'une simplicité extrême.
Ce parseur DOM nécessite le parseur SAX suivant : xmlsax.js pour pouvoir travailler avec les objets XML.
La manière de parser un fichier XML est très simple, alors nous allons nous intéresser plutôt à la suite (Pour les plus curieux, il suffit de regarder le code source).
Les résultats sont utilisés pour créer un point et une chaîne de caractère pour la Smartwindow, qui sont passé à la méthode createYMarker().
var point =
new YGeoPoint(parseFloat(lat),parseFloat(lon));
var smart = "Long: " + lon + "
” + “Lat: ” + lat;
var myMarker = createYMarker(point, i, smart);
new YGeoPoint(parseFloat(lat),parseFloat(lon));
var smart = "Long: " + lon + "
” + “Lat: ” + lat;
var myMarker = createYMarker(point, i, smart);
Crée les marqueurs sur la map.
var marker = new YMarker(point,'id'+number);
marker.addLabel(number);
YEvent.Capture(marker,EventsList.MouseClick, function() { marker.openSmartWindow(msg) });
return marker;
marker.addLabel(number);
YEvent.Capture(marker,EventsList.MouseClick, function() { marker.openSmartWindow(msg) });
return marker;
Tout ceci reste un exemple assez basique, mais il peut devenir une base pour un mashup plus complexe. Dès que cette partie est faite, ça ne peut qu'aller en s'améliorant =)
Voici d'autres exemples (mais pas Yahoo! cette fois) :
http://research.microsoft.com/mapcruncher/Gallery/Universities/
http://research.microsoft.com/mapcruncher/Gallery/NationalParks/
Et bon courage à toutes celles et ceux qui veulent se lancer dans ce périple !
par Flo.
publié dans :
20notessurmashup
