insérer une webcam externe dans un blog

vosgesfreeride · 20 Janvier 2007

bonjour, j'ai un blog (non-lucratif) sur le freeride dans les Vosges, et j'aimerais insérer sur une page une ou plusieurs webcams. (ces webcams existent déjà par ailleurs sur d'autres sites). Comment faire en sorte que le flux soit en live? (je suis débutant, j'espère que je me fais comprendre: il faudrait que quand l'image change sur le site parent, l'image change aussi sur le mien).

voici l'adresse de mon blog: http://vosgesfreeride.zeblog.com

l'adresse de la webcam que j'aimerais insérer (par exemple): http://webcam.langmatt.net/

copie de l'interface de mon blog (ZeBlog.com)(je ne sais pas si ça peut être utile; j'ai aussi accès, pour chaque billet du blog, à un "mode HTML")

---------------------------------------------------------------------------------------------------------------------------------------------------


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
  <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
    <title>
<%TitreFenetre%>
    </title>
<style type="text/css">
/* Style généraux */

BODY			{ 	background:#DDE6FF; MARGIN : 0PX; PADDING : 0PX; }
BODY,TD,DIV,LI	{ FONT-SIZE : 11px; FONT-FAMILY : VERDANA; LINE-HEIGHT : 150%; COLOR : #000; }

#ombre { /* Ombre autour du design*/
	background:#D8D9FF;
	background-image:url(http://zeblog.com/blog/images/templates/clean-blue/fond.png); /* Le fond contient également la couleur du menu de gauche ! */
	background-repeat:repeat-y;
	width:800px;
	margin:auto;
	}

#droite { /* Contenu (droite) */
	BORDER-LEFT : 1PX #5C5FD6 DOTTED;
	height:100%;
	BACKGROUND : #EEF2FA;
	WIDTH : 560PX;
	padding:15px 10px 0px 10px;
	}

A:LINK, A:VISITED, A:ACTIVE	{
	COLOR: #608CFF;
	TEXT-DECORATION: NONE;
	}

A:HOVER	{
	COLOR: #0080FF;
	TEXT-DECORATION: NONE;
	}
/* Banniere HAUT (titre) */

#TOP {
	BACKGROUND : #8099FB;
	padding-top:20px;
	padding-bottom:20px;
	border-bottom:3px solid #5C5FD6;
	}

h1 { /* Titre */
	PADDING-left:15px;
	FONT : BOLD 14PT GEORGIA;
	margin:0px;
	COLOR: #FFF;
	}

h1 a:visited, h1 a:link, h1 a:hover  {
	COLOR: #FFF;
	}

a:link.url, a:visited.url, a:hover.url { /* URL */
	PADDING : 0PX 15PX 20PX;
	LETTER-SPACING : 5PX;
	FONT-SIZE : 10PT; 
	COLOR : #FFF;
	text-decoration:none;
	}

/* Banniere bas (copyright) */
#pied {
	BORDER-TOP : 1PX #5C5FD6 DOTTED;
	BACKGROUND : #E5E8FF;
	padding-top:4px;
	padding-bottom:4px;
	WIDTH : 788PX;
	text-align:center;
	}

/* CALENDRIER */
   table.calendrier {border: 0; background-color: #fff;}
   table.calendrier td, th {text-align: center; border: 0}
   table.calendrier th {height: 10px; font-size: 7pt;}
   table.calendrier td {width: 19px; height: 10px; font-size: 8pt;}
   table.calendrier .calendrier-mois {font-weight: bold; margin-top: 3px; font-size: 8pt; text-align: center}
   table.calendrier .calendrier-mois a{text-decoration: none}
   table.calendrier .calendrier-prec, table.calendrier .calendrier-suiv {font-weight: normal;}
   table.calendrier th {text-align: center;}
   table.calendrier td.lien-jour {font-weight: bold; background-color: #FCFCFC;}
   table.calendrier td.lien-jour-selectionne {font-weight: bold; background-color: #F9F9F9;}
   table.calendrier td.lien-jour a {text-decoration: none;}

/* MENU */
#gauche {
	WIDTH : 182PX;
	MARGIN-BOTTOM : 30PX;
	padding-left:10px;	
	}

h3 { /* Titre rubrique */
	MARGIN-TOP : 20PX;
	WIDTH : 180PX;
	MARGIN-BOTTOM : 10PX;
	font-family:Trebuchet MS;
	color:#5C94FD;
	font-size:15px;
	letter-spacing:1px;
	}

.menugauche {
	list-style: none;
	padding: 0;
	margin-top: 0px;
	margin-left: 10px;
	margin-bottom:11px;
}

.menugauche li { /* lien rubrique */
	margin: 0;
	padding: 0;
	padding-bottom:3px;
}

img.avatar { /* avatar */
	float: left; 
	padding-right: 6px;
}

p.avatar { /* Paragraphe de l'avatar */
	margin: 0 0 10px 0;
	padding-right:5px;
	}
/* BILLETS */
h2 { /* Titre billet */
	PADDING : 1PX 8PX 2PX 0px;
	margin:0px;
	font-family:Trebuchet MS;
	font-weight:bold;
	FONT-SIZE : 15px;
	COLOR : #3B7FFF;
	text-decoration:none;
	}

h2 a:visited, h2 a:link, h2 a:hover {
	COLOR : #3B7FFF;
	}

div.billet { /* Contenu billet */
	text-align:justify;
	margin-right:8px;
	}

div.billet-header { /* Header billet (auteur, date, catégorie) */
	margin-top:0px;
	margin-bottom:3px;
	font-size:10px;
	color:#86B7FF;
	}

div.billet-pied { /* Pied billet (commentaires, trackbacks) */
	margin-top:6px;
	margin-bottom:10px;
	margin-right:8px;
	color:#808080;
	text-align:right;
	font-size:11px;
	}

/* PAGES */

#archives {
	text-align:justify;
	}

/* TRACKBACKS ET COMMENTAIRES */
h4 { /* Titre TrackBack */
	margin:0px;
	font-size:13px;
	}

#trackbacks {
	margin-top:5px;
	margin-bottom:10px;
	}

#commentaires {
	margin-top:5px;
	margin-bottom:10px;
	}

div.commentaire-header { /* header commentaire et trackback */
	margin-bottom:5px;
	font-size:11px;
	}

div.commentaire { /* Contenu commentaire et trackback */
	margin-left:5px;
	text-align:justify;
	margin-bottom:15px;
	border:1px dotted #5C7BD6;
	background:#F4F7FF;
	padding-left:5px; 
	padding:9px;
	padding-top:15px;
	padding-bottom:15px;
	}

/* FORMULAIRES */

input.button {
	background : #ffffff url(http://www.zeblog.com/design/degrade_1.png) repeat-x 0 100%;
	border:1px dotted #86A2D6;
	padding: 2px;
	font-size: 11px;;
	font-weight: bold;
	font-family: verdana;
}

input.button:hover, input.button:focus{
	background : #ffffff url(http://www.zeblog.com/design/degrade_2.png) repeat-x 0 100%;
}

input, textarea, select {
	font-family: verdana;
	font-size:11px;
	border:1px dotted #86A2D6;
	background:#FDFDFD;
	letter-spacing:1px;
	padding:2px;
	}
textarea {
	width:350px
	}
</STYLE>
	<link rel="alternate" type="application/rss+xml" title="RSS Billets" href="<%IndexURL%>rss.php" />
	<link rel="alternate" type="application/xml" title="RSS Commentaires" href="<%IndexURL%>rsscom.php" />
</head> 

<body> 
<div id="ombre">
<table align="center" cellpadding="0" cellspacing="0" width="788" >
	<tr>
		<td valign="top" colspan="2" id="TOP">

<div id="TOP">
<h1><a href="<%IndexURL%>"><%Titre%></a></h1>
<A HREF="<%IndexURL%>" class="url"><%IndexURL%></A>
</div>
		</td>
	</tr>
	<tr>
		<td valign="top" id="gauche">

	<Calendrier>
	<h3>Calendrier</h3>
	<%Calendrier%>
	</Calendrier>

	<h3><%Pseudo%></h3>
	<div>
	<p class="avatar"><%Avatar%><%Description%></p>
	<div style="clear:both; height:1px"></div>
	</div>

	<h3>Bienvenue</h3>
	<ul class="menugauche">
	<li><a href="<%IndexURL%>">Accueil</a></li>
	<li><a href="<%ArchiveURL%>">Archives</a></li>
	<Email><li><a href="mailto:<%Email%>">Contact</a></li></Email>
	</ul>

	<Categories>
	<h3>Sommaire</h3>
	<ul class="menugauche">
	<CategoriesList><li><%NomCategorie%></li></CategoriesList>
	</ul>
	</Categories>

	<DerniersCommentaires>
	<h3>Derniers commentaires</h3>
	<ul class="menugauche">
	<DernierCommentaire><li class="derniersbillets"><%DernierCommentaire%></li></DernierCommentaire>
	</ul>
	</DerniersCommentaires>

	<DerniersBillets>
	<h3>Derniers billets</h3>
	<ul class="menugauche">
	<DernierBillet><li class="derniersbillets"><%DernierBilletTitre%></li></DernierBillet>
	</ul>
	</DerniersBillets>

	<Pages> 
	<h3>Pages</h3>
	<ul class="menugauche pages"> 
	<li><PagePrecedente>Page précédente</PagePrecedente></li>
	<li><PageSuivante>Page suivante</PageSuivante></li>
	<li>Page actuelle : <%PageActuelle%></li>
	<li>Pages au total : <%TotalPages%></li> 
	</ul>
	</Pages>

	<Compteurs> 
	<h3>Compteurs</h3>
	<ul class="menugauche">  
	<li><%CompteurConnectes%></li>
	<li><%CompteurVisiteursJour%></li>
	<li><%CompteurVisiteursSemaine%></li>
	<li><%CompteurVisites%></li>
	<li><%CompteurCommentaires%></li>
	<li><%CompteurBillets%></li>
	</ul>
	</Compteurs> 

	<h3>Liens</h3>
	<ul class="menugauche">
	<Link><li><a href="<%LinkURL%>" target="_blank"><%LinkTitre%></a></li></Link>
	</ul>

	<h3>Fils RSS</h3>
	<ul class="menugauche">
	<li><a href="<%RSSURL%>">Fil RSS Billets</a> </li>
	<li><a href="<%IndexURL%>rsscom.php">Fil RSS Commentaires</a> </li>
	</ul>

		</td>
		<td valign="top" id="droite">

<ArchivePage>
<h2>Archives du mois</h2>
<div id="archives">
<%ArchiveInfo%>
</ArchivePage>
<AccueilPage>
<Billet>
<h2><a href="<%BilletURL%>"><%BilletTitre%></a></h2>
<div class="billet-header">Par <%BilletAuteur%> :: <%BilletDate%> à <%BilletHeure%> <Categories>:: <%BilletCategorie%></Categories></div>
<div class="billet">
<%BilletContenu%>
</div>
<div class="billet-pied">
<Commentaires>
<a href="<%BilletURL%>"><%BilletCommentairesCompteur%></a>
</Commentaires>
<Trackbacks>
:: <a href="<%BilletTrackbackURL%>"><%BilletTrackbackCompteur%></a>
</Trackbacks>
</div>
</Billet>
</AccueilPage>

<BilletPage>
<Billet>
<h2><a href="<%BilletURL%>"><%BilletTitre%></a></h2>
<div class="billet-header">Par <%BilletAuteur%> :: <%BilletDate%> à <%BilletHeure%> <Categories>:: <%BilletCategorie%></Categories></div>
<div class="billet">
<%BilletContenu%>
</div>
<Trackbacks>
<h2 style="margin-top:10px;">Trackbacks</h2>
<div id="trackbacks">
Pour faire un trackback sur ce billet :  <%BilletTrackbackURL%></div> 

<Trackback>
<div class="commentaire-header">
Le <%TrackbackDate%> à <%TrackbackHeure%>, de <a href="<%TrackbackURL%>"><%TrackbackBlog%></a> : <%TrackbackTitre%> <span style="font-size:9px;"><TrackbackDelete>supprimer</TrackbackDelete></span>
</div>
<div class="commentaire">
<%TrackbackContenu%>
</div>
</Trackback>

</Trackbacks>


<Commentaires>
<h2>Commentaires</h2>
<div id="commentaires">
<Commentaires>
<Comment>
<div class="commentaire-header"> Le <%CommentDate%> à <%CommentHeure%>, par <%CommentAuteur%> <span style="font-size:9px;"><CommentEdit>éditer</CommentEdit> <CommentDelete>supprimer</CommentDelete></span>
</div>
<div class="commentaire">
<%CommentBody%>
</div>
</Comment>
</div>

<h2>Ajouter un commentaire</h2>
<div id="commentaires">
<%CommentPost%>
</div>
</Commentaires>
</Billet>
</BilletPage> 
</div>
		</td>
	</tr>
	<tr>
		<td colspan="2" id="pied">
<a href="<%IndexURL%>"><%Titre%></a>  - Blog créé avec <a target="_blank" href="http://www.zeblog.com">ZeBlog</a>
		</td>
	</tr>
</table>
</div>
</BODY>
</HTML>

---------------------------------------------------------------------------------------------------------------------------------------------------

autre question, est-ce légal d'utiliser une webcam d'un autre site? (je rappelle que mon blog est non-lucratif et ne possède AUCUNE pub)

merci!

Modifié 20 Janvier 2007 par vosgesfreeride

Sarc · 20 Janvier 2007

Bonjour,

Pour améliorer la lisibilité du post, il serait sympathique et approprié de mettre tout ce code entre balise [ codebox ] et [ /codebox ] sans espaces...

Pour ce qui est de la légalité, la meilleure chose à faire serait de demander des autorisations aux sites qui les exploite... En fait, il y a deux solutions : soit sur le site, il est déjà marqué que ces webcams peuvent être insérées sur les sites, soit il n'est iren marqué, dans ce cas il serait judicieux de leur demander l'autorisation.

Mais pourquoi ne pas fait un lien direct vers ces webcams ? Ca serait le plus simple en fait...

vosgesfreeride · 20 Janvier 2007

oui, j'ai déjà mis les liens directs, mais j'aimerais bien que l'on puisse voir les images en direct, c'est plus classe quand même non? merci quand même.

Sarc · 20 Janvier 2007

C'est bien sûr plus classe, mais ces images ne t'appartiennent pas, donc il n'est pas certain que tu aies le droit de les utiliser sur ton site ! Il faut donc demander au propriétaire de ces images si tu as le droit de les utiliser, avant toute chose...

Une fois que tu auras l'utilisation, il faudra faire un script PHP pour calculer l'heure de la dernière photo prise, et en analysant les adresses des images, tu pourras deviner facilement qui correspond à quoi :

20070120.1430.jpg

2007/01/20 à 14:30 par exemple...

Mais ne le fais pas sans son autorisation, ça serait un risque inutile...

vosgesfreeride · 20 Janvier 2007

je ne sais absolument pas ce qu'est un script php!!!! eh oui je suis un débutant, pouvez-vous me rédiger un code complet à titre d'exemple? où l'insérer exactement? (oui je sais j'en demande beaucoup...mais j'essaie quand même!)

xgamer · 20 Janvier 2007

si tu est débutant tu ne pourra pas le faire .

fait le faire par quelqu'un qui s'y connait en devellopement web

Loupilo · 20 Janvier 2007

je ne sais absolument pas ce qu'est un script php!!!! eh oui je suis un débutant, pouvez-vous me rédiger un code complet à titre d'exemple? où l'insérer exactement? (oui je sais j'en demande beaucoup...mais j'essaie quand même!)

Sur le Hub, on aide les gens à chercher et à trouver, mais on n'écrit pas des scripts pour faire plaisir, comme ça !

Pas bénévolement en tout cas : si tu y tiens, tu peux poster une demande de service commercial dans le forum adéquat. Mais je doute que ce soit ce que tu désires, je t'invite donc à te renseigner, à apprendre/comprendre les bases si tu souhaites réellement intégrer cette fonctionnalité. On n'est jamais mieux servi que par soi même

ludo88 · 21 Janvier 2007

Moi à mon avis le mieux serait de demander à ton administrateur de plateforme (le contact de zeblog) ce qui pourrait etre fait.

Je suis sur que tu as un forum ou au moins un formulaire de contact, il répondra à tes demandes et peut etre meme mettra en place un outil pour le faire si les demandes sont nombreuses. Lui, il est surement développeur web ou en a un dans son equipe ...

Connexion

insérer une webcam externe dans un blog

Sujets conseillés

vosgesfreeride

Sarc

vosgesfreeride

Sarc

vosgesfreeride

xgamer

Loupilo

ludo88

Veuillez vous connecter pour commenter

Parcourir

Activité