Table des matières

Expérimentations d'outils du Web 2.0

Expérimentations et veille développées en collaboration avec Olivier Blondeau

Test d'insertion d'une vidéo flash "à la Youtube"

<html>

<center> <B>Alive in Joburg</B><br>par Neill Blomkamp<br><br> <object type=“application/x-shockwave-flash” width=“320” height=“260” wmode=“transparent” data=“http://hack.tion.free.fr/player/flvplayer.swf?file=movie/alive.flv&autoStart=false”> <param name=“movie” value=“http://hack.tion.free.fr/player/flvplayer.swf?file=movie/alive.flv&autoStart=false” /> <param name=“wmode” value=“transparent” /> </object> <br><br>

<a href=“http://hack.tion.free.fr/flash_flv_player.zip”>Téléchargement du player</a> </center> </html>

Alive In Joburg est un court métrage réalisé sous la forme d'un documentaire par le réalisateur Neill Blomkamp. Il met en images l'histoire de la discrimination raciale envers les Aliens en Afrique du Sud, une référence évidente à l'apartheid → http://www.spyfilms.com/

<html>

<center> <B>Twintowers</B><br><br> <object type=“application/x-shockwave-flash” width=“320” height=“240” wmode=“transparent” data=“http://hack.tion.free.fr/player/flvplayer.swf?file=movie/twintowers.flv&autoStart=false”> <param name=“movie” value=“http://hack.tion.free.fr/player/flvplayer.swf?file=movie/twintowers.flv&autoStart=false” /> <param name=“wmode” value=“transparent” /> </object> <br> </center> </html>

Badge Flickr de Politechnicart

<html> <center> <!– Start of Flickr Badge –> <style type=“text/css”> #flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;} #flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;} #flickr_icon_td {padding:0 5px 0 0 !important;} .flickr_badge_image {text-align:center !important;} .flickr_badge_image img {border: 1px solid black !important;} #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;} #flickr_badge_uber_wrapper a:hover, #flickr_badge_uber_wrapper a:link, #flickr_badge_uber_wrapper a:active, #flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;} #flickr_badge_wrapper {background-color:#CCCCCC;border: solid 1px #000000} #flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;} </style> <table id=“flickr_badge_uber_wrapper” cellpadding=“0” cellspacing=“10” border=“0”><tr><td><a href=“http://www.flickr.com” id=“flickr_www”>www.<strong style=“color:#3993ff”>flick<span style=“color:#ff1c92”>r</span></strong>.com</a><table cellpadding=“0” cellspacing=“10” border=“0” id=“flickr_badge_wrapper”> <tr> <script type=“text/javascript” src=“http://www.flickr.com/badge_code_v2.gne?count=5&display=random&size=t&layout=h&source=user&user=87062643%40N00”></script> </tr> </table> </td></tr></table> <!– End of Flickr Badge –> </center> <br> </html>

Del.icio.us : veille quotidienne sur différents thèmes

<html> <script type=“text/javascript” src=“http://del.icio.us/feeds/js/tags/politechnicart?icon;count=159;size=10-22;color=87ceeb-0000ff;title=my%20del.icio.us%20tags”></script> </html>

Test de script de Géolocalisation vidéo sur GoogleMap

<html> <br></html> <html> <head> 

  <style type="text/css">

<!– .Style3 { 

font-size: 18px;
font-weight: bold;

} .Style4 { 

font-family: "Courier New", Courier, mono;
font-size: 18px;

} .Style5 {font-size: 16px} .Style7 {font-size: 18px} a:link { 

color: #666666;

} a:visited { 

color: #666666;

} a:hover { 

color: #FF0000;

} a:active { 

color: #666666;

} .Style8 {font-size: 12px} .Style9 {font-style: italic} .Style10 {font-size: 16px; font-style: italic; } .Style11 {font-size: 14px} .Style13 {font-size: 9px} body { 

margin-top: 5px;
margin-bottom: 5px;

} –> 

  </style>
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAIi5SHN5QCZnyfDCCHI7UxBS_HXhOmVGJN6lVBdQJS-OMfafduhRFyWlBT_Abf137eH7PKabX-uv-_Q" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
</head>
<body onunload="GUnload()">
<center>
  <div style="text-align: center;">

<!– the div where the map will be displayed –> 

  <div id="map" style="width: 500px; height: 450px"></div>
  
  <!-- fail nicely if the browser has no Javascript -->
  <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
    However, it seems JavaScript is either disabled or not supported by your browser. 
    To view Google Maps, enable JavaScript by changing your browser options, and then 
    try again.
  </noscript>
  <script type="text/javascript">
  //<![CDATA[
  if (GBrowserIsCompatible()) { 
    var background = [];
        background["pink"]  = "http://lh2o.biz/these/colour108.png";
        background["gold"]  = "http://lh2o.biz/these/colour086.png";
        background["white"] = "http://lh2o.biz/these/colour125.png";
    var overlay = [];
        overlay["A"] = "http://lh2o.biz/these/overlay2.png";
        overlay["B"] = "http://lh2o.biz/these/overlay3.png";
        overlay["C"] = "http://lh2o.biz/these/overlay4.png";
  
    function createMarker(point,html,ba,ov) {
      var mylabel = {"url":overlay[ov], "anchor":new GLatLng(4,4), "size":new GSize(12,12)};
      var Icon = new GIcon(G_DEFAULT_ICON, background[ba], mylabel)
      var marker = new GMarker(point,Icon);
      GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    // Display the map, with some controls and set the initial location 
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(48.8734092762673100196479936 , 2.3385429382324218750000000),12);
  
    // Set up three markers with info windows 
  
  
    var point = new GLatLng(48.8750340372439069369647768 , 2.3772096633911132812500000);
    var marker = createMarker(point,'<div=left><strong>Test vidéo</strong><hr> <table><tr><td> Un clip de Kenny Arkana</td><td><OBJECT DATA="http://lh2o.biz/these/larage.mov" " type="video/quicktime" WIDTH=160 HEIGHT=135> <PARAM NAME=pluginspage VALUE="http://quicktime.apple.com"> <PARAM NAME=autoplay VALUE=true> <PARAM NAME=controller VALUE=true></OBJECT></td></tr></table></div>','gold','C')
    map.addOverlay(marker);
    
    var polyline = new GPolyline([
new GLatLng(48.8554928326593156384660688 , 2.3273903131484985351562500),
new GLatLng(48.880000,2.38458),
  new GLatLng(48.8750340372439069369647768 , 2.3772096633911132812500000)

], “#ff0000”, 4); map.addOverlay(polyline); 

  }
  // display a warning if the browser was not compatible
  else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
  }
  // This Javascript is based on code provided by the
  // Blackpool Community Church Javascript Team
  // http://www.commchurch.freeserve.co.uk/   
  // http://www.econym.demon.co.uk/googlemaps/
  //]]>
  </script>
<p><br>
</p>

</div> 

</center>
</body>

</html>

Test de Géotracking

<html> 

<head>
	<base target="_top">
	<title>Test G&#233;otracking</title>
</head>
<body onload="GV_Map();" onunload="GUnload();" >
	
	<!--
		If you want to transplant this map into another Web page, there are a number of pieces
		you need to copy, and it is important that some things are placed in a particular order:
		   1. The DOCTYPE declaration and the extra attributes in the "html" tag (xmlns:v=...)
		     that allow Internet Explorer for Windows to render polylines
		   2. The onload="GV_Map();" attribute in the "body" tag 
		   3. The "div" tags that contain the map and its widgets
		   4. JavaScript stuff:
		      a. The GPS Visualizer global variables (they begin with var = gv_...)
		      b. The "script" tag that points to maps.google.com (you must insert your own API key!)
		      c. The "script" tag that points to www.gpsvisualizer.com
		      d. The JavaScript commands that actually build the map (function GV_Map())
	-->
	
	<!-- If you want to place the map in a page, you can set its margins here: -->
	<div style="margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px;">
		<div style="width:400px; height:350px; margin:0px; padding:0px; float:left; overflow:hidden;">
			
			<div id="gmap_div" style="width:300px; height:350px;"></div>
			
			<div id="gv_credit_container" style="display:none;">
				<table style="filter:alpha(opacity=80); -moz-opacity:0.8;" cellspacing="0" cellpadding="0" border="0"><tr><td><div id="gv_credit" style="background-color:#FFFFFF; border:none; padding:1px; font:10px Verdana,sans-serif;"></div></td></tr></table>
			</div>
			<div id="gv_crosshair_container" style="display:none;" class="gmnoprint">
				<div id="gv_crosshair" align="center" style="width:15px; height:15px; display:block;"><img src="http://www.gpsvisualizer.com/google_maps/crosshair.gif" alt="" width="15" height="15"></div>
			</div>
			<div id="gv_center_container" style="display:none;">
				<table style="cursor:crosshair; filter:alpha(opacity=80); -moz-opacity:0.80;" cellspacing="0" cellpadding="0" border="0"><tr><td><div id="gv_center_coordinates" style="background-color:#FFFFFF; border:solid #666666 1px; padding:1px; font-family:Arial; font-size:10px; line-height:11px;" class="gmnoprint" onClick="GV_Toggle('gv_crosshair');" title="Click here to turn center crosshair on or off"></div></td></tr></table>
			</div>
			<div id="gv_legend_container" style="display:none;">
				<table id="gv_legend" style="position:relative; top:0px; cursor:move; filter:alpha(opacity=95); -moz-opacity:0.95;" cellpadding="0" cellspacing="0" border="0"><tr><td>
					<div id="gv_legend_contents" align="left" style="font-family:Arial; font-size:11px; font-weight:bold; border:solid #000000 1px; background:white; padding:4px; position:relative;">
					<span style="color:#000000;">Tracks:</span>
					<br><span id="trk1_label" style="color:#FFFF00; cursor:pointer;" onclick="GV_Toggle_Track_And_Label(gmap,'trk1','#FFFF00');" onmouseover="this.style.textDecoration='underline'; GV_Legend_Tooltip_Show('trk1_label','gmap_div');" onmouseout="this.style.textDecoration='none'; GV_Legend_Tooltip_Hide('trk1_label');" title="Trajet Entre:04/04/07 &#224; 08:47:54 UTC et 04/04/07 &#224; 09:08:49 UTC">- 04/04/07 &#224; 08:47:54 UTC</span>
				</div>
				</td></tr></table>
			</div>
			<div id="gv_legend_tooltip" class="gv_legend_tooltip" style="width:200px; background-color:#FFFFFF; border-width:1px; border-style:solid; border-color:#CCCCCC; padding:2px; font-family:Arial; font-size:11px;"></div>
		</div>
		<div id="gv_marker_list" align="left" class="gv_marker_list" style="width:160px; height:350px; margin-left:12px; overflow:auto; display:none;"></div>
		<div style="height:0px; clear:both;"><!-- clear the "float" --></div>
	</div>
	
	<script type="text/javascript">
		/* Global variables used by the GPS Visualizer functions (1175678719): */
		var gv_maptypecontrol_style = 'menu';
		var gv_filter_map_types = true;
		// var gv_excluded_map_types = ['USGS_TOPO_TILES','USGS_AERIAL_TILES','NRCAN_TOPO_TILES','NRCAN_TOPO_NAMES_TILES','BLUEMARBLE_TILES','DAILY_TERRA_TILES','DAILY_AQUA_TILES'];
		var gv_default_marker = {color:'red',icon:'googlemini'}; // icon can be a URL, but be sure to include size:[w,h]
		var gv_icon_directory = 'http://maps.gpsvisualizer.com/google_maps/icons/';
		var gv_marker_link_target = '_blank';
		var gv_driving_directions = false;
		var gv_marker_filter_options = {filter:false,limit:0,update_list:true,sort_list_by_distance:false};
		var gv_marker_list_options = {list:false,map:'gmap',array:'wpts',colors:false,default_color:'#000000',icons:true,desc:false,toggle:false,center:false,zoom:false,info_window:true,url_links:false,wrap_names:false};
		
	</script>
	<script src="http://maps.google.com/maps?v=2&file=api&key=ABQIAAAAIi5SHN5QCZnyfDCCHI7UxBS_HXhOmVGJN6lVBdQJS-OMfafduhRFyWlBT_Abf137eH7PKabX-uv-_Q" type="text/javascript"></script>
	<script src="http://maps.gpsvisualizer.com/google_maps/functions.js" type="text/javascript"></script>
	<script type="text/javascript">
	function GV_Map() {
		if (GBrowserIsCompatible()) { 
			gmap = new GMap2(document.getElementById("gmap_div")); // create map
			_mSvgEnabled = true; _mSvgForced = true;
			var initial_zoom_level = 15; // higher number means closer view; at 600px wide, 7 = width of New Mexico, 12 = San Francisco
			gmap.setCenter(new GLatLng(48.8723758333334,2.37484333333334), initial_zoom_level, G_HYBRID_MAP);
			gmap.addControl(new GLargeMapControl());
			gmap.addControl(new GScaleControl());
			gmap.addControl(gv_maptypecontrol = new GV_MapTypeControl()); // add custom map type switcher
			GV_Place_Control(gmap,'gv_credit_container',G_ANCHOR_BOTTOM_RIGHT,6,18);
			GV_Place_Control(gmap,'gv_center_container',G_ANCHOR_BOTTOM_LEFT,4,40);
			GV_Place_Control(gmap,'gv_legend_container',G_ANCHOR_TOP_RIGHT,6,32); Drag.init(document.getElementById("gv_legend"));
			GV_Setup_Crosshair(gmap,{crosshair_container_id:'gv_crosshair_container',crosshair_graphic_id:'gv_crosshair',crosshair_width:15,center_coordinates_id:'gv_center_coordinates',fullscreen:false});
			
			// GEvent.addDomListener(document.getElementById('gmap_div'),"DOMMouseScroll", GV_MouseWheel); // mouse-wheel scrolling for Firefox
			// GEvent.addDomListener(document.getElementById('gmap_div'),"mousewheel", GV_MouseWheel); // mouse-wheel scrolling for IE
			
			GEvent.addListener(gmap, "moveend", function() { GV_Filter_Tracks(gmap,trk_info); });
			GEvent.addListener(gmap, "moveend", function() { window.setTimeout('GV_Process_Waypoints(gmap,wpts)',50) });
			
			trk_info = new Array();
			
			// Draw track #1 ("04/04/07 &#224; 08:47:54 UTC")
			trk1 = new Array();
			// track 1 segment 1:
			var pts1_1 = [
				new GLatLng(48.8739933333333,2.37588),
				new GLatLng(48.8736783333333,2.37684833333333),
				new GLatLng(48.873895,2.37678166666667),
				new GLatLng(48.8734766666667,2.37665166666667),
				new GLatLng(48.8730966666667,2.37747666666667),
				new GLatLng(48.8727383333333,2.376225),
				new GLatLng(48.87334,2.37737),
				new GLatLng(48.872255,2.37640333333333),
				new GLatLng(48.8719316666667,2.37654666666667),
				new GLatLng(48.8722416666667,2.37760166666667),
				new GLatLng(48.8719416666667,2.37717833333333),
				new GLatLng(48.8716566666667,2.37741),
				new GLatLng(48.8721033333333,2.37666333333333),
				new GLatLng(48.8719483333333,2.37542666666667),
				new GLatLng(48.8718833333333,2.37612833333333),
				new GLatLng(48.871625,2.375815),
				new GLatLng(48.8717866666667,2.37510166666667),
				new GLatLng(48.870955,2.373225),
				new GLatLng(48.87054,2.372955),
				new GLatLng(48.871585,2.372085),
				new GLatLng(48.8722583333333,2.37257666666667),
				new GLatLng(48.872125,2.37287333333333),
				new GLatLng(48.8736183333333,2.37515166666667),
				new GLatLng(48.8734483333333,2.37605833333333),
				new GLatLng(48.873565,2.37508166666667),
				new GLatLng(48.8736133333333,2.37539666666667),
				new GLatLng(48.87397,2.375005),
				new GLatLng(48.8736983333333,2.37534),
				new GLatLng(48.87408,2.374995),
				new GLatLng(48.8742116666667,2.37536666666667)
			];
			trk1.push (new GPolyline(pts1_1,"#FFFF00",4,1.0));
			gmap.addOverlay(trk1[trk1.length-1]);
			trk_info['trk1'] = { w:2.372085,e:2.37760166666667,s:48.87054,n:48.8742116666667 };
			
			wpts = new Array();
			wpts.push( GV_Marker(gmap,{lat:48.8719822186147,lon:2.37569702020202,name:'1 km',desc:'',color:'white',icon:'diamond',type:'tickmark'}) ); trk1.push(wpts[wpts.length-1]);
			wpts.push( GV_Marker(gmap,{lat:48.8735061904762,lon:2.37573880411255,name:'2 km',desc:'',color:'white',icon:'diamond',type:'tickmark'}) ); trk1.push(wpts[wpts.length-1]);
			wpts.push( GV_Marker(gmap,{lat:48.8742116666667,lon:2.37536666666667,name:'2.29 km',desc:'',color:'white',icon:'diamond',type:'tickmark'}) ); trk1.push(wpts[wpts.length-1]);
			wpts.push( GV_Marker(gmap,{lat:48.874042,lon:2.376233,name:'Debut Tracking',desc:'04/04/07 &#224; 08:47:54 UTC',color:'',icon:'googlemini'}) );
			wpts.push( GV_Marker(gmap,{lat:48.874212,lon:2.375367,name:'Fin Tracking',desc:'04/04/07 &#224; 09:08:49 UTC',color:'',icon:'googlemini'}) );
			wpts.push( GV_Marker(gmap,{lat:48.873168,lon:2.377793,name:'Plus Haut',desc:'Alt: 307 m 04/04/07 &#224; 09:06:03 UTC',color:'',icon:'googlemini'}) );
			wpts.push( GV_Marker(gmap,{lat:48.87207,lon:2.375017,name:'Plus Bas',desc:'Alt: -58 m 04/04/07 &#224; 08:54:55 UTC',color:'',icon:'googlemini'}) );
			wpts.push( GV_Marker(gmap,{lat:48.871897,lon:2.377227,name:'Plus Rapide',desc:'25 Km/H 04/04/07 &#224; 08:54:00 UTC',color:'',icon:'googlemini'}) );
			wpts.push( GV_Marker(gmap,{lat:48.873965,lon:2.376673,name:'Plus Lent',desc:'0 Km/H 04/04/07 &#224; 08:48:19 UTC',color:'',icon:'googlemini'}) );
			wpts.push( GV_Marker(gmap,{lat:48.873053,lon:2.374548,name:'Arret 1',desc:'Pendant:24 S Alt: 88 m 04/04/07  &#224; 09:04:03 UTC',color:'',icon:'googlemini'}) );
			
			window.setTimeout('GV_Process_Waypoints(gmap,wpts)',100); // the delay lets IE6 realize the markers are in the cache
		} else {
			document.getElementById('gmap_div').style.backgroundColor = '#DDDDDD';
			document.getElementById('gmap_div').innerHTML = 'Sorry, your Google Map cannot be displayed.';
		}
	}
	</script>

<br> 

</body>

</html>

Test réalisé avec un téléphone 'HTC P 3300', un récepteur GPS Bluetooth 'Holux GPSlim 236', le logiciel GPSLogGoogle et le site : GPSVisualiser

Test de QRCode

Ma sonnerie téléphone

(simulation audioguide avec téléchargement par téléphone mobile d'un mp3 : 288k)

Envoi d'un SMS

Simulation réalisée avec un téléphone HTC P3300 sous Windows Mobile 5 avec le logiciel QuickMark Mobile Barecode