index.php

Les menus horizontaux sont monnaies courantes sur les sites. Mais le problème avec un menu dynamique, c’est que sa taille varie (par définition) en fonction du nombre d’onglets.

Pour que votre menu reste toujours adapté au design de votre site, HorizontalNav permet d’ajuster la largeur de votre menu à son conteneur. C’est un plugin très pratique et qui évite de passer des heures à faire de l’adaptation. En plus, il est compatible avec notre ami IE 7.

Ci-dessous l’exemple d’un menu, avec et sans l’utilisation du plugin :

Pour le mettre en place, rien de plus simple. Il faut déjà avoir le code HTML :

<ul>
	<li><a href="#">Navigation Item</a></li>
	<li><a href="#">Work</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

Et appliquer le style du menu :

.horizontal-nav{ background: #efefef; border-radius: 6px; }
.horizontal-nav ul {
	background: #128F9A;
	float: left;
	text-align: center;
	border-radius: 6px;
	border: 1px solid #0e7079;
}
.horizontal-nav ul li{ float: left; border-left: 1px solid #0e7079; }
.horizontal-nav ul li:first-child{ border-left: 0 none; }
.horizontal-nav ul li a {
	display: block;
	padding: 10px 20px;
	color: #fff;
	border-top: 1px solid rgba(255,255,255, 0.25);
	border-left: 1px solid rgba(255,255,255, 0.25);
}
.horizontal-nav ul li:first-child a{ border-left: 0 none; }
.horizontal-nav ul li a:hover{ background: #12808a; }
.horizontal-nav ul li:first-child a{ border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.horizontal-nav ul li:last-child a{ border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

Et enfin, on appelle le plugin pour qu’il fasse son travail :

$(document).ready(function() {
	// Call horizontalNav on the navigations wrapping element
	$('.full-width').horizontalNav({});
});

Et voilà qui devrait vous faciliter la vie et vous faire gagner du temps !

Source

Google Analytics et WordPress

Pour installer le code de Google Analytics sur WordPress, on peut le faire directement dans son thème, placé en haut de page, juste avant .

Voici le code de base de GA, où XXX est l’identifiant de votre profil :

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXX']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Minifiez votre thème

Pour minifier vos fichiers, copier/coller le contenu de vos fichiers dans ces deux outils, et le tour est joué :

Ajouter des boutons de partage

Pour ajouter facilement des fonctions de partages sur les réseaux sociaux, utilisez tout simplement les codes suivants (il ne vous restera que la mise en page à faire).

Partager sur Facebook

<a href="http://www.facebook.com/share.php?u=" target="blank" rel="nofollow" title="Partagez cet article sur Facebook">Partager sur facebook</a>

Partager sur Twitter

<a href="http://twitter.com/home?status=" target="blank" rel="nofollow" title="Partagez cet article sur Twitter">Partager sur Twitter</a>

(suite…)

L’autre jour j’ai eu à réaliser un site mobile j’ai donc cherchée les médias queries, ils sont regroupé ici.

Iphone 3 portrait :

@media all and (min-device-width: 320px) and (max-width: 480px) and (orientation: portrait) {
	#header{
		background: url(images/css3.png) no-repeat;
	}
}

Iphone 3 paysage :

@media all and (min-device-width: 320px) and (max-width: 480px) and (orientation: landscape) {
	#header{
		background: url(../images/css3.png) no-repeat center top;
	}
}

Iphone 4 (Retina) :

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 1.5), screen and (max--moz-device-pixel-ratio: 1.5) {
	 #header{
		background-image: url(images/css3n@2x.png);
		background-size: 30px 30px; /* nouvelle image de 60px par 60px */
	}
}

Pour designer pour les écrans retina, il faut créer deux versions des images que vous voulez optimiser pour les écrans à grosses résolutions. Créez une première image avec la taille réelle utilisée dans votre design, dans mon exemple : « css3.png ». Exportez ensuite une deuxième image en multipliant les dimensions par 2… Utilisez idéalement des éléments vectoriels pour ne pas avoir de perte de qualité ou refaite le même élément avec une taille deux fois plus grande. L’idéal est d’adopter une convention pour nommer vos images, personnellement j’utilise la même convention que dans le language IOS à savoir « nom-de-image@2x.png » donc ici ce sera « css3@2x.png ».
(suite…)

Les imprimantes 3D pourraient selon certains observateurs devenir LA chose à avoir pour les accros à la technologie, qui rêvent de voir naître devant leurs yeux l’incarnation matérialisée de leurs créations graphiques.

L’application à laquelle ils n’avaient pas pensé : imprimer du chocolat. C’est ce que propose ce projet de recherche de l’université d’Exeter en Angleterre, qui a développé la première imprimante à chocolat en 3D.

Le principe de l’impression 3D par strates de résine est ici appliqué, sauf que le chocolat remplace le plastique, et qu’il est donc possible de créer toutes formes possibles et imaginables conçues à partir d’un logiciel de 3D et de les mouler pour en faire les chocolats originaux.
(suite…)