A l’origine j’avais prévu de mettre ces thèmes à disposition dès le mois de janvier, me disant que deux mois et demi auraient suffit pour proposer déjà un premier thème, d’ailleurs celui-ci est prêt, en tout cas en ce qui concerne la maquette Photoshop. Concernant l’intégration de celui-ci, c’est Nicolas Candelon qui s’en est occupé et s’il m’a permis de prendre un peu d’avance sur mon retard, il faut tout de même que je regarde si tout colle bien (oui, j’y pense Nico ).

Le premier thème à paraître : "Curriculum", conçu pour les sites one-page de type CV.

Pendant que je terminais la maquette Photoshop, j’ai réalisé que la structure actuelle du blog ne convenait plus pour mettre en avant les thèmes proposés gratuitement, il a donc fallu que je retravaille la chose. C’est là qu’est intervenu Nicolas Candelon, qui cherchait à ce faire la main. J’avais besoin d’aide, il avait besoin de pratiquer l’intégration : chacun est gagnant. Je lui ai donc proposé d’intégrer Curriculum, pendant que je me penchais sur mon problème.

À la mi-décembre, la maquette du blog est terminé, je m’apprête à passer à l’intégration, tout est parfaitement dans les temps.

Le blog, version 2012, en cours développement.

Et puis, un mail d’une certaine Stéphanie Guillaume, redac-chef du magazine Web Design arrive dans ma boîte mail, me proposant d’écrire  un tutoriel + interview pour le prochain hors série Photoshop pour les Webdesigners…

La deadline était au 2 janvier, mais pourquoi refuser ?! J’ai donc laissé tout ça de côté pour me concentrer sur ce tutoriel. Vous pouvez d’ailleurs le trouver chez votre marchant de journaux, il est bourré de tutoriels super intéressants.

Webdesign Magazine HS n°13

Parallèlement à ça, mes compères et moi travaillions toujours sur notre projet Webdesign Friday, cherchant à lui donner un nouvel élan pour 2012.

Pas mal de boulot donc.

La bonne nouvelle, c’est que maintenant tout c’est relativement calmé, l’intégration du blog avance très bien. Tout ça devrait donc être en ligne d’ici fin mars (oui, je me prend une belle marge, on ne sait jamais) !

Attention, l'article est un chouilla trop long (beaucoup de lignes de code).

Mes fonctions de CRUD

Ajouter un enregistrement dans une table

/***
 *	insert des données dans la table en paramètre
 *	@datas	tableau des données à insérer dont la clé et le nom du champs dans la table
 *	@table	table dans laquelle insérer les données
 */
function add($datas, $table){
	$bdd = db(); //on ouvre la connexion à la base de données
	foreach($datas as $key => $value){
		$keys[] = $key;
		$values[] = $value;
	}
	$strSQL = "INSERT INTO ".$table." (";
	foreach($keys as $ky => $k){ $strSQL .= $k . ","; }
	$strSQL = substr($strSQL,0,-1) . ") VALUES(";
	foreach($values as $vl => $v){ $strSQL .= "?,"; }
	$strSQL = substr($strSQL,0,-1) . ")";
	$query = $bdd->prepare($strSQL);
	if($query->execute($values)) return $bdd->lastInsertId();
	else return false;
}

$datas = array(
	'nom' => $nom,
	'email' => $email,
	'commentaire' => $commentaire
);
if(add($datas,'comments')) {
	return "cool";
} else return "pas cool";

Mettre à jour les informations d'un enregistrement

/***
 *	met à jour les données de l'ID dans la table en paramètre
 *	@id	identifiant de la ligne à modifier
 *	@datas 	tableau des données à insérer dont la clé et le nom du champs dans la table
 *	@table 	table dans laquelle insérer les données
 */
function update($id, $datas, $table){
	$bdd = db();
	foreach($datas as $key => $value){
		$keys[] = $key;
		$values[] = $value;
	}
	$strSQL = "UPDATE ".$table." SET ";
	foreach($datas as $key => $value){
		$strSQL .= $key . " = ?,";
	} $strSQL = substr($strSQL,0,-1) . " WHERE id = ?";
	$values[] = $id;
	$query = $bdd->prepare($strSQL);
	if($query->execute($values)) return true;
	else return false;
}

Supprimer un enregistrement

/***
 *	supprime les données correspondant à l'ID dans la table en paramètre
 *	@id		identifiant de la ligne à supprimer
 *	@table	table sur laquelle on applique la suppression
 */
function delete($id, $table){
	$bdd = db();
	$strSQL = "DELETE FROM ".$table." WHERE id = ?";
	$query = $bdd->prepare($strSQL);
	//print_r(array($id));
	if($query->execute(array($id))) return true;
	else return false;
}

Retourner une liste d'enregistrements

/***
 * 	retourne le resultat d'un select
 *	@columns 	colonnes à selectionner pour la requête (ex: array('champ1','champ2') ou '*')
 *	@table 		nom de la table sur laquelle faire la requête
 *	@where 		champs sur lequels appliquer des conditions ( ex: array( 'champ1 =' => 'valeur', 'champ2 LIKE' => 'valeur%') )
 *	@concats 	[ AND | OR ]
 *	@order 		champs sur lequels appliquer le tri, et l'ordre pour chaque champs (ex: array('champ1' => 'ASC','champ2' => 'DESC') )
 *	@limit 		limit[0] => debut de la liste, limit[1] => nombre d'éléments dans la liste retournée (ex: array('0','20') )
 *
 *	return @retour	: tableau contenant la requête executée, les éventuelles erreurs et le resultat de la requête
 */
function get($columns = null, $table = null, $where = null, $concats = "AND", $order = null, $limit = null){
	$bdd = db();
	$retour = array(); //variable de type tableau, retournée par la fonction
	$rows = "";
	$clause = "";
	$sort = "";
	$limitStr = "";
	if(!is_null($columns) && !is_null($table)){
		// si $rows est un tableau ou égale à * tout va bien.
		if(is_array($columns)){
			foreach($columns as $column) { $rows .= $column .', '; }
			$rows = substr($rows,0,-2);
		} elseif($columns == '*'){
			$rows = '*';
		} else {
			$retour['erreur'] = "Les champs selectionné doivent être appelé depuis une variable Tableau";
		}
		if(!in_array(strtolower($concats),array('and','or'))){
			$retour['erreur'] = "<strong>".$concats."</strong> n'est pas une valeur autorisée pour concaténer des conditions. Utilisez 'OR' ou 'AND'.";
		}
		/*
		si @where est renseigné, on filtre les résultats grâce au tableau @where construit comme suit :
			array ('colname operateur' => 'valeur');
			ex: array('page_id =' => 5);
		sinon, on ne filtre pas les résultats
		*/
		if(!is_null($where) && is_array($where)){
			foreach($where as $k => $v){
				$clause .= $k." ? ".$concats." ";
				$values[] = $v;
			}
			$clause = " WHERE ".substr($clause,0,(-(strlen($concats)+2)));
		} elseif(!is_null($where) && !is_array($where)){
			$retour['erreur'] = "La clause WHERE doit être construite via une variable Tableau";
		} else {
			$clause = "";
		}
		//si $order est un tableau et n'est pas null
		if(!is_null($order) && is_array($order)){
			foreach($order as $k => $v){ $sort .= $k." ".$v.", "; }
			$sort = " ORDER BY ".substr($sort,0,-2);
		} elseif(!is_null($order) && !is_array($order)) {
			$retour['erreur'] = "ORDER BY doit être construit via une variable Tableau";
		} else {
			$sort = "";
		}
		if(!is_null($limit) && is_array($limit) && is_numeric($limit[0]) && is_numeric($limit[1])){
			$debut = $limit[0];
			$nbRows = $limit[1];
			$limitStr = " LIMIT " . $debut . "," . $nbRows;
		} elseif(!is_null($limit) && !is_array($limit)){
			$retour['erreur'] = "LIMIT doit être construit via un tableau de deux entiers";
		} else {
			$limitStr = "";
		}
		// on construit la requête
		$strSQL = "SELECT ".$rows." FROM ".$table.$clause.$sort.$limitStr;
		if(empty($retour['erreur'])){
			$query = $bdd->prepare($strSQL);
			$query->execute(@$values);
			$retour['requete'] = $strSQL;
			$retour['reponse'] = $query->fetchAll(PDO::FETCH_ASSOC);
			$sqlTotal = "SELECT COUNT(*) as total FROM ".$table.$clause.$sort;
			$q = $bdd->prepare($sqlTotal);
			$q->execute(@$values);
			$tot = $q->fetchAll(PDO::FETCH_ASSOC);
			$retour['total'] = $tot[0]['total'];
		}
	} else {
		$retour['erreur'] = "Impossible de créer la requete, les champs à selectionner et la table sont vide";
	}
	return $retour;
}

$champs = array('id','titre','nom','contenu');
$conditions = array(
	'nom =' => 'nighcrawl',
	'date < =' => date('Y-m-d H:i:s'),
	'titre LIKE' => '%framework%'
);
$trier = array('date' => 'DESC');
$limite = array(0, 5);
$resultat = get($champs,'articles',$conditions,"AND",$trier,$limite);
if(isset($resultat['reponse'])){
	foreach($resultat['reponse'] as $row){
		echo "<article>
		<header>
			<h1>".$row['titre']."</h1>
		</header>
		<div>".$row['contenu']."</div>
		<footer>Auteur : ".$row['nom']."</footer>
		</article>";
	}
}
else echo $resultat['erreur'];

Mettre en place un système de pagination

/***
 *	génère des liens de pagination : numeros de pages, 'suivants', 'précédents'
 *	@total	nombre total d'enregistremnts à paginer
 *	@nbpp	nombre d'enregistrements à afficher par page
 *	@link	chaine qui servira à construire les liens vers les différentes pages
 */
function pagination($total, $nbpp, $link){
	echo"<div class='pagination'>";
		/** Pagination **/
		//calcul du nombre de pages
		$nbLiens = ceil($total/$nbpp);
		if($nbLiens > 1){
			/** précédents **/
			if(isset($_GET['d']) && $_GET['d'] > 0){
				echo "<a href='".$link.($_GET['d']-$nbpp)."'>« Précédents</a>";
			} else {
				echo "<span>« Précédents</span>";
			}
			/** pages ***/
			for($i = 0; $i < $nbLiens; $i++){
				if($_GET['d'] == ($i*$nbpp)){
					echo "<span class='active_pagi'>".($i+1)."";
				} else {
					echo "<a href='".$link.($i*$nbpp)."'>".($i+1)."</a>";
				}
			}
			/** suivants **/
			if(isset($_GET['d']) && $_GET['d'] >= 0 && $_GET['d'] < ($total-$nbpp)){
				echo "<a href='".$link.($_GET['d']+$nbpp)."'>Suivants »</a>";
			} else {
				echo "<span>Suivants »</span>";
			}
		}
	echo "</div>";
}

$nbpp = 5; //5 articles par page
$limite = array(intval($_GET['d']),$nbpp);
$resultat = get($champs,'articles',$conditions,"AND",$trier,$limite);
if(isset($resultat['reponse'])){
	foreach ($resultat as $row) {
		//affichage des articles
		...
	}
	pagination($resultat['total'],$nbpp,'index.php?parametre=valeur&d=');
} else echo $resultat['erreur'];

Fin !

PHP se suffit à lui-même pour effectuer du templating, en déclarant toutes les variables dans un fichiers de traitement, et en les appelant dans un fichier d’affichage inclus à la fin du traitement. Pourquoi les développeurs utilisent-ils alors une surcouche ?

Mauvaises excuses

J’ai souvent entendu « pour que celui qui s’occupe de l’affichage n’aie pas besoin de connaissances en PHP » ou « pour appliquer simplement un cache par fichier « parsé » (inclus et interprété) ».

Effectivement la plupart de ces moteurs recréent une syntaxe simplifiée qui raccourcis le temps de codage et permettent une meilleur lisibilité du code telle que :

{variable}

au lieu de :

<?php echo $variable; ?>

La faiblesse d’un tel procédé

« Parser », c’est consommer. Pour pouvoir interpréter correctement la syntaxe il faut utiliser des procédés de réécriture qui pèsent au chargement. Heureusement, lorsque le script est bien conçu, on n’effectue cette réécriture (compilation) qu’une seule fois après chaque modification du fichier template. Cela dit pour celui sur qui ça tombe, un mauvais « parseur » peut entraîner un lourd ralentissement pour une simple page.

Les programmeurs aimant bien s’inventer leur propre syntaxe et l’optimiser pour leur utilisation, ils sont parfois trop gourmands et confèrent à celle-ci bien plus de portée qu’elle ne devrait en posséder.

En effet certains ont tendance à vouloir appliquer des fonctions (date(), htmlspecialchars_decode(), nl2br()) au moment de l’appel de la variable. Hors il s’agit de traitement, et le traitement des données doit s’effectuer avant l’affichage.

Plus la syntaxe est développée, moins elle a d’intérêt, puisque son seul but est de diminuer le temps de codage et de gagner en lisibilité. J’ai souvent vu des moteurs utiliser une syntaxe XML telle que :

<foreach nom="nom_du_bloc">
    <var nom="variable" />
</foreach>

qui possède un rapport performance/confort relativement faible par rapport à la syntaxe native :

<?php foreach ($nom_du_bloc as $row) : ?>
    <?php echo $row['variable']; ?>
<?php endforeach; ?>

A noter que la syntaxe PHP permet bien plus de souplesse dans la déclaration d’une boucle (concaténation, et « variable double » ($$variable) autorisées).

De plus, le cache peut être totalement indépendant. Il n’est donc pas nécessaire de passer par un moteur de templates pour pouvoir en appliquer un.

Les bonnes pratiques

On utilise un tel outil pour séparer le traitement de l’affichage, et optionnellement pour minimiser son code et le rendre plus clair.

Plusieurs approches sont alors pertinentes face à la question des performances. C’est certain, regrouper ses variables dans une « boîte noire », loin des variables servant uniquement au traitement, est dans une certaine mesure très agréable. Mais avant de se jeter sur un moteur de templates, rélféchissez à quelle quantité de performance vous êtes prêt à céder.

Un moteur sans syntaxe personnalisée

C’est la solution la moins onéreuse. Le fameux framework CodeIgniter y a établi son camp. Pour gagner en confort, il est conseillé de trouver une solution pour séparer ses variables d’affichage à celles de traitement. L’une d’entre elles est de stocker ses variables dans un objet et inclure le fichier template dans une méthode en utilisant la fonction extract().

Un moteur à syntaxe

Prudence. Assurez-vous d’avoir une syntaxe suffisamment légère, et peu de fonctionnalités. Un moteur mettant à disposition l’appel de fonctions dans sa syntaxe doit être scrupuleusement analysé avant d’être employé. Le minimum nécessaire ? Appel de variables, boucles (appel de blocs) et conditions. Vérifiez que preg_replace(), preg_replace_callback() et preg_match_all() sont utilisées avec parcimonie car ils consomment des quantités astronomiques de performances.

Conclusion

Je ne me veux pas exhaustif sinon préventif quant à l’optimisation des performances. Avouez qu’écrire autant de code aussi complexe et moins souple que PHP pour perdre en performance est dénué de sens. Il est préconisé de chercher l’équilibre entre la performance et le confort, et enfin de garder en tête que le traitement n’est pas du ressort de l’affichage.

Ces derniers mois (cette dernière année ?), mon gros side-project a été de concevoir la charte graphique du Webdesign Friday et son intégration — aidé par Matthieu Bué, Clément Roy, Christophe Béghin et Nicolas Birckel notamment, le tout supervisé par l’ami Francis Chouquet — et quand on bosse sur un projet aussi énorme et surtout avec des gens comme eux, ça te fais prendre conscience de ce que tu aimes vraiment dans la conception de site Web. Moi c’est tout cette partie brainstorming, recherche de pistes graphiques, design et intégration, qui m’a vraiment plu.

Aussi, ces dernières années on a vu de nombreux sites proposant des templates de site Web « prêts-à-porter », notamment les thèmes payants pour le CMS WordPress – n’hésitez d’ailleurs surtout pas à aller jeter un oeil chez Peaxl (ça parle anglais mais c’est des p’tits francophones qui gèrent la boutique ! )

Ok, WordPress c’est cool, mais trouver de bons templates qui se soient pas spécifiques à un CMS, j’ai l’impression que c’est un mission impossible dès que tu sort du très populaire ThemeForest… Et encore, les templates qu’ils vendent se ressemblent tous à bien y regarder. Un peu comme sur Dribbble, où lorsque tu sort des plates-bandes, t’es bof.

Mon idée

Proposer des templates conçus en HTML5 et CSS3, adaptatifs et gratuits.

Pourquoi gratuit ? Tout simplement parce que je ne souhaite pas entreprendre cette démarche pour m’en mettre plein les poches, je ne courrai pas non plus dernière le nombre de téléchargement des templates proposés.

Cette démarche, bien qu’elle soit là pour vous rendre service, est purement et simplement égoïste. L’argent ne m’intéresse pas ici, j’ai déjà un salaire, ce que je veux c’est simplement pouvoir pratiquer, expérimenter et m’améliorer pendant que je vous rend service.

Que pensez vous de ma démarche ? Quel type de template souhaiteriez vous voir, Pour quelle utilisation ? Portfolio, carte electronique, Curriculum Vitae, etc…?

J’attend vos retours sur le sujet !

On le sait tous, préparer nos images pour nos boutons de formulaire, que l’on va potentiellement utiliser un peu partout sur un site, c’est chiant. CSS3 nous sauve un peu la vie, les jolis boutons qu’on claque dans nos maquettes, c’est parfois pas la joie à intégrer.

Alors pourquoi ne pas créer ces boutons, fourrés aux dégradés et autres joyeusetés top-tendance,  directement avec CSS3, sans passer pas Photoshop ? Vous avez demandé un générateur qui vous mâche  les déclarations CSS? tant mieux!

Aujourd’hui, voilà pour vous une nouvelle ressource pour pouvoir servir vos vidéos YouTube, Dailymotion, Vimeo, etc. avec une largeur « responsive », s’adaptant à la taille de la fenêtre. Vous n’avez plus d’excuse pour passer au RWD !

La petite trouvaille d’aujourd’hui, est un diaporama utilisant le principe du responsive design! Vous pourrez donc vous la péter en gardant vos sliders dans les versions pour mobiles. #youpi!