Le pingouin des @lpes

La coloration syntaxique

Patrice Blondel Webmaster codage Aucun commentaire

La coloration syntaxique améliore la lisibilité du code en formatant chacun des éléments du texte affiché en utilisant une couleur caractéristique de son type.

Pour Pluxml

Pour Pluxml, il existe un plugin : syntaxhighlighter.
Une fois téléchargé, placé dans le répertoire plugins et activé dans l'interface d'administration, il ne reste plus qu'à ajouter à la balise <pre> class="brush :php" (si c'est du php) pour obtenir la coloration syntaxique.

Exemple

<pre class="brush: html; highlight: [5, 10];"> Une page html </pre>
Ici j'ai ajouté l'option highlight sur les lignes 5 et 10 pour les mettre en valeur.
Par défaut, les numéros des lignes sont affichés. Si vous ne souhaitez pas les voir, ajoutez l'option gutter: false; .
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  ...
  <!-- Le reste du contenu -->
  ...
</body>
</html>

Les options « langage »

html, css, text, php, xml, javascript, perl, python ou shell sont les options à placer après "brush: ... ;"

Les thèmes

7 thèmes sont proposés ; vous pouvez les visualiser ici.
Dans Pluxml, vous pouvez les modifier en changeant le nom du thème sur la page /plugins/syntaxhighlighter/syntaxhighlighter.php.


En modifiant le nom du thème (Midnight dans ce cas) vous changez l'apparence de la coloration.
Vous pouvez également modifier ce thème ou même en créer un. (ils se trouvent dans le répertoire styles.

Astuce

Si vous souhaitez démarrer la numérotation des lignes de code à la ligne 10, ajoutez first-line: 10 à la classe.

Rafraîchir une « iframe »

Patrice Blondel Webmaster iframe, javascript Aucun commentaire

Il est parfois utile de rafraîchir une <iframe> dans une page web.
Cela permet par exemple de recentrer une « Google Maps » après avoir affiché une infobulle.
Dans l'exemple, je vais placer un bouton juste au dessus de l'<iframe> pour la recharger.

Comment faire ?

Créer le bouton

Une classe reload_iframe est déclarée pour le css
<div class="reload_iframe"><input type="button" id="btn" value="Rafraîchir" /></div>

Le script

<script>
	function reload() {
	    document.getElementById('iframeid').src += '';
	} btn.onclick = reload;
</script>

Le css

À adapter selon votre site.
	#btn {
		border-radius:0.5em 0.5em 0 0;
		border: 2px solid #ccc;
		font-size: .9em;
		padding: .4em;
		background: transparent;
	}
	.reload_iframe {
		text-align:center;
		margin-bottom: -2px;
	}
Il suffit maintenant d'intégrer l'iframe à la page web sous la forme :
 <iframe id="iframeid" src="url_iframe"></iframe>

Exemple


Un blog statique avec Hugo

Patrice Blondel Webmaster blog, hugo Aucun commentaire

Pour la documentation debian, j'utilisais un blog statique : Utiliser Debian.
J'ai souhaité faire de même pour me doter d'une documentation « webmaster ».
Cette fois-ci, j'ai choisi Hugo.

Installation

# apt-get install hugo git python-pip

Création d'un nouveau site

Pour créer un nouveau site dans un répertoire “pingouin” à l’aide d’Hugo, tapez dans un terminal :
$ hugo new site ~/public/pingouin

Hugo va générer automatiquement une arborescence de fichiers et de dossiers qui constituera un squelette vide de votre environnement de travail.
Le fichier config.toml est le fichier de configuration.
Nos contenus, sous forme de fichiers Markdown, seront stockés dans le répertoire /content.
Pour plus de détails, consultez la documentation officielle ou visitez mon site.

Le nouveau blog

Nota

J'en profite pour expliquer comment on insère une iframe responsive :
Il suffit de donner une « class » au <div> et de bien renseigner le css :
<div class="site">
		
</div>


Responsive StreetView

Patrice Blondel Webmaster javascript, streetview, google Aucun commentaire

Une Street View qui s'adapte à tous les écrans

Explications

Création d'une classe streetview pour renseigner le css

Le css


Affichage de la StreetView

<div class="streetview">
 <iframe src="url_streetview" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Street View sur ma famille

Patrice Blondel Webmaster google, streetview Aucun commentaire

Lors de l'affichage dune carte Google Maps, il peut être intéressant de placer dans l'infobulle du marqueur une iframe.
Cela permet d'afficher une page web.
Dans l'exemple, je vais afficher une streetview pour chacun des membres de ma famille.
Le code sera écrit dans un fichier nommé famille.html que je place dans un répertoire googlemaps à la racine de mon site.

Le script

Début du script et création de la carte :
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=CLÉAPI'></script>
<script>
	function initCarte(){

Définition des variables :

les variables (Lat, Lng correspond à la position : latitude et longitude)
	
var locations = [
	['marqueur3', Lat, Lng , 3],
	['marqueur2', Lat, Lng , 2],
	['marqueur1', Lat, Lng , 1]
	];
	var noms = [
	['nom3', 3],
	['nom2', 2],
	['nom1', 1]
	];
	var descriptif = [
	['descriptif3', 3],
	['descriptif2', 2],      		
	['descriptif1', 1],
];
Création de la carte (carte_famille) :
var carte_famille = new google.maps.Map( document.getElementById( 'div_carte'),{
	'center' : new google.maps.LatLng(Lat,Lng), 
	'zoom' : 6,			     
	'mapTypeId' : google.maps.MapTypeId.ROADMAP, 
	'zoomControl' : true,              
	'scrollwheel' : true,             
	'disableDoubleClickZoom' : true    
});
Intégration des marqueurs, de leur titre (nom), des infobulles avec leur contenu (descriptif) et fin du script :
var infowindow = new google.maps.InfoWindow();	    	
var marker, i;
	for (i = 0; i < locations.length; i++) {  
	var nom = noms[i];
	marker = new google.maps.Marker({
	position: new google.maps.LatLng(locations[i][1], locations[i][2]),
	title: nom[0], 
	map: carte_famille 
        });
	google.maps.event.addListener(marker, 'click', (function(marker, i) {
	return function() {
	infowindow.setContent(descriptif [i][0]);
	infowindow.open(carte_famille, marker);
	}
	})(marker, i));
	}
}
google.maps.event.addDomListener( window, 'load', initCarte);
Structure des infobulles, de leur contenu avec les *iframes* (à placer dans var descriptif) :
	['

titre

' + '', 1],
Vous pouvez définir la hauteur, la largeur et les bordures de l'iframe.
width="largeur" height="hauteur" frameborder="0" style="border:0" allowfullscreen
Affichage de la carte (dans *<body>*) :

Le résultat