On peut lire sur le site internet de l’église de google :

“Nous, membres de l’Église de Google, croyons que le moteur Google est la forme humaine la plus proche que l’on ait jamais connu d’un vrai Dieu (comme il est généralement défini). Nous croyons qu’il y a plus de preuves de la divinité de Google qu’il n’y en a pour les dieux plus traditionnels.”

Les googlistes on ainsi rédigés 10 commandements que les fidèles se doivent de suivre à la lettre :

1. Thou shalt have no other Search Engine before me, neither Yahoo nor
   Lycos, AltaVista nor Metacrawler. Thou shalt worship only me, and come to
   Google only for answers.
   
2. Thou shalt not build thy own commercial-free Search Engine, for I am a
   jealous Engine, bringing law suits and plagues against the fathers of the
   children unto the third and fourth generations.
   
3. Thou shalt not use Google as a verb to mean the use of any lesser Search Engine.
   
4. Thou shalt remember each passing day and use thy time as an
   opportunity to gain knowledge of the unknown.

5. Thou shalt honor thy fellow humans, regardless of gender, sexual
   orientation or race, for each has invaluable experience and knowledge to
   contribute toward humankind.
   
6. Thou shalt not misspell whilst praying to me.
   
7. Thou shalt not hotlink.
   
8. Thou shalt not plagiarise or take undue credit for other's work.

9. Thou shalt not use reciprocal links nor
   link farms, for I am a vengeful but fair engine and will diminish thy
   PageRank. The Google Dance shall cometh.
   
10. Thou shalt not manipulate Search Results. Search Engine
    Optimization is but the work of Microsoft.

Mais ce n’est pas tout, les googlistes ont aussi accumulés bon nombre de preuves prouvant que Google est ce qui se rapproche le plus de Dieu :

1. Google est la chose la plus proche d’une entité omnisciente qui peut être scientifiquement prouvée.
2. Google est partout en même temps (il est donc omniscient).
3. Google répond aux prières.
4. Google est potentiellement immortel.
5. Google est infini.
6. Google se souvient de tout.
7. Google ne “peut pas faire le mal”.
8. Selon les statistiques de Google, le mot Google est recherché plus souvent que les mots “Dieu”, “Jésus”,”Allah”, “Bouddha”, “Chrétienté”,”Islam”, “Bouddhisme” et “Judaïsme” combinés.
9. Les preuves de l’existence de Google sont très nombreuses.

On croit nager en plein délire, mais non, ces faits rapportés sont authentiques !

Finalement on a trouvé plus fort que M.vendetta et Chuck Norris réunis

via : yahoo actualité

Et toujours plus de contenu percutant sur calii.fr

• [Webdesign] back in the 90’s ou le retour aux débuts du webdesign ! (1)
• Vis ma vie de googler ! (15)
• Steve Jobs ! (0)
• Quand Web rime avec Energie renouvelable. (0)
• Photoshop c’est gratuit ! (0)

Cette année nous aurons donc le droit à une série de minis clips de 30 secondes mettant en scène les désormais célèbres personnages des publicités comparatives d’Apple, à savoir le PC bedonnant avec ses lunettes face au jeune et espiègle Mac branché à souhait !

Grosse nouveauté, ces personnages ne sont plus joués par des acteurs comme c’était le cas jusqu’à présent, mais animés en 3D et comme vous pouvez le voir sur ces vidéos, le résultat n’as rien à envier aux studios Pixar !

Via : apple.com

Et toujours plus de contenu percutant sur calii.fr

• Un Mac n’est plus forcement un Apple ! (3)
• Les nouveautés attendues au Macworld ! (0)
• Exemple de Marketing Viral : apple évolution. (2)
• [Webdesign] back in the 90’s ou le retour aux débuts du webdesign ! (1)
• [video] Diesel , la fausse pub porno bien virale ! (1)

Dans la 6eme partie de ce tutoriel, nous allons nous attaquer à une étape au combien importante, la struccture CSS.

J’ai choisi de bien dissocier la partie structure css de la partie style/couleur css, pour pouvoir par la suite modifier plus facilement l’apparence du thème.

Voici l’apparence actuelle de notre blog :

Et voici ce que nous obtiendrons à la fin de cette étape :

Nous ouvrons donc logiquement notre fichier style.css dans notre éditeur de texte.

Styles généraux

Je commence toujours par régler les styles de textes, pour cela je “bride” la taille, la famille et l’interligne des textes dans la balise “body”.

/* typo */
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:82.5%;
	line-height:1;
	}

Ensuite je supprime les styles de listes, ordonnées ou pas.

/* liste */
ol, ul {
	list-style: none;
	}

Puis je défini un style global pour les titres.

/* titres */
h1, h2, h3, h4, h5, h6 {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	margin: 0 0 5px 0;
	}
 
h1 {
	font-size: 2.7em;
	letter-spacing:-0.04em;
	line-height: 1.05em;
	}
 
h2, h3 {
	font-size: 1.8em;
	line-height: 0.85em;
	}
 
h4 {
	font-size: 1.6em;
	line-height: 23px;
	}

Et déjà le changement est bien visible :

Les billets (la boucle)

Ensuite nous attaquons directement le billet, en utilisant les class et ID définis dans notre index.php

/* les billets */
div.post {
	padding:5px;
	}
 
h3.post-title {
	display:block;
	border-bottom:1px solid;
	}
 
small.meta {
	display:block;
	text-align:right;
	margin-bottom:10px;
	}
 
div.post-content {
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:1px solid;
	}
 
div.post-content p {
	margin:5px 0 10px 0;
	text-align:justify;
	}
 
div.comment-link {
	display:block;
	text-align:right;
	margin-bottom:10px;
	}

Ce qui nous donne :

Tout de suite mieux

La sidebar

Encore une fois nous allons utiliser les class et ID définis dans notre index.php

/* la sidebar */
div.sidebox {
	padding:5px;
	margin-bottom:10px;
	}
 
div.sidebox h2 {
	display:block;
	border-bottom:1px solid;
	padding-bottom:5px;
	}
 
div.sidebox ul li {
	display:block;
	padding:3px 0;
	}
 
div.sidebox ul li a {
	display:block;
	}
 
div.sidebox ul li a:hover {
	font-weight:bold;
	}
 
/* la recherche */
div#search label {
	display:block;
	border-bottom:1px solid;
	padding-bottom:5px;
	margin-bottom:5px;
	}
 
input#searchform {
	border:1px solid #bbb;
	padding:3px;
	background:#eee;
	width:249px;
	}
 
input#searchsubmit {
	width:25px;
	padding:2px 3px;
	border:1px solid;
	}
 
/* archives */
select#archive {
	width:290px;
	border:1px solid #bbb;
	padding:3px;
	background:#eee;
	}

J’ai un peu modifié le fichier index.php, veuillez voir ci-dessous.
Merci.

A la ligne 51, remplacez :

<div class="sidebox" id="search">
   <label for="search">Rechercher sur le blog</label>
   <form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
        <input type="text" name="searchform" id="searchform" size="15" />
        <input type="submit" value="Ok" />
    </form>
 </div>

par :

<div class="sidebox" id="search">
   <label for="search">Rechercher sur le blog</label>
   <form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
        <input type="text" name="searchform" id="searchform" class="myinput" size="30" />
        <input type="submit" id="searchsubmit" class="mysubmit" value="Ok" />
    </form>
 </div>

et à la ligne 79, remplacez :

<select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'>

par :

<select name="archive-dropdown" id="archive" onChange='document.location.href=this.options[this.selectedIndex].value;'>

J’ai en fait juste précisés des class et ID sue les éléments des formulaires.

Le résultat en image :

Le footer

Pour commencer, à la ligne : 50 du fichier style.css, il faut enlever la hauteur par défaut que l’on avait attribué à lors de l’étape 1.

div#footer {
	background: #fff;
        height:250px; <-- Supprimez cette ligne
	}

Puis toujours en utilisant nos class et ID nous allons mettre en forme le contenu du footer :

/* le footer */
div.footerbox-wrapper {
	overflow:hidden;
	padding:5px;
	margin-bottom:5px;
	}
 
div.footerbox {
	display:block;
	width:430px;
	padding:10px;
	background:#eee;
	}
 
div.footerbox h3 {
	display:block;
	border-bottom:1px solid;
	padding-bottom:5px;
	}
 
div#dernierscom {
	float:left;
	}
 
div#authordesc {
	float:right;
	}
 
div.footerlinks {
	clear:both;
	text-align:right;
	line-height:20px;
	background:#eee;
	height:20px;
	padding:5px 10px;
	margin:0 5px 5px 5px;
	}

Ce qui nous donne :

La hauteur du footer dépendra du contenu qu’on y affichera. Pour modifier le texte de la description, rendez-vous sur la page d’édition de votre profil.

Résultat final

Voila pour cette 6eme étape, notre thème ressemble de plus en plus à quelque chose, dans la prochaine étape nous verrons comment scinder le fichier index.php afin de d’utiliser les modèles de page.

Téléchargement

mytheme_etape6.zip (5)

N’hésitez pas à poser vos questions ou nous faire part de vos réactions en utilisant les commentaires, si nous le pouvons, nous vous aiderons.

Et toujours plus de contenu percutant sur calii.fr

• [Tuto] Réaliser son propre thème wordpress partie 5, Le footer (1)
• [Tuto] Réaliser son propre thème wordpress partie 4, la sidebar (2)
• [Tuto] Réaliser son propre thème wordpress partie 1 la structure HTML/CSS (6)
• [Tuto] Réaliser son propre thème wordpress partie 3, la boucle (the loop) (1)
• [Tuto] Réaliser son propre thème wordpress partie 2, les templates tags. (6)

Le blog de démo illustrant cet article se trouve à cette adresse : étape 5.

Dans cette cinquième partie nous allons nous occuper du pied de page, plus communément appelé “footer”.

Nous n’allons pas le surcharger d’information, plus précisément nous allons y placer :

• La description de l’auteur
• les derniers commentaires (plugin)
• un lien vers le haut de page et un lien vers la page d’accueil

Je ne pense pas qu’il faille surcharger les footers des blogs, c’est pourquoi nous allons partir sur quelque chose d’assez simple.

Donc on reprends l’édition de notre fichiers index.php, on descend tout en bas jusqu’à isoler cette partie du script :

<!-- footer(pied de page) -->
	<div id="footer" class="padding">footer</div>
	<!-- fin footer -->

Nous allons donc placer les conteneurs ou viendront ensuite se loger nos éléments. J’ai opté pour un structure que je connais bien et qui à l’avantage de bien passer à travers la plupart des navigateurs web, à savoir de scinder mon footer en 2 parties horizontales, puis de diviser la première partie en 2 cases côte à côte.

Une image valant toujours mieux que de grandes phrases, voici ce dont je parle :

Pour obtenir ce résultat, nous allons utiliser des “div” positionnés en float et en display block.

<!-- footer(pied de page) -->
	<div id="footer" class="padding">
    	<div class="footerbox-wrapper">
            <div class="footerbox" id="dernierscom">
            	ici on trouvera les derniers commentaires
            </div>
            <div class="footerbox" id="authordesc">
            	ici on trouvera la description de l'auteur
            </div>
            <div class="footerlinks">
            	ici on trouvera les liens du footer
            </div>
        </div>
    </div>
	<!-- fin footer -->

La description de l’auteur

Pour afficher la description de l’auteur, ou pourrait l’écrire directement dans le div prévu pour ça, mais ça serait à l’encontre des principes de wordpress, très intrusif et de plus ce serait une vraie galère pour modifier cette description.

La meilleure solution reste d’utiliser le marqueur de modèle prévu pour ça, à savoir :

<div class="footerbox" id="authordesc">
            	<?php the_author_description(); ?> 
            </div>

On peu facilement agrémenter le tout avec un titre personnalisé en utilisant le nom et le prénom de l’auteur dans ce cas on rajoute :

<?php the_author_firstname(); ?>

et

<?php the_author_lastname(); ?>

Ce qui nous donne une fois en place :

<!-- footer(pied de page) -->
	<div id="footer" class="padding">
    	<div class="footerbox-wrapper">
            <div class="footerbox" id="dernierscom">
            	ici on trouvera les derniers commentaires
            </div>
            <div class="footerbox" id="authordesc">
            	<h3>&Agrave; propos de <?php the_author_firstname(); ?>  <?php the_author_lastname(); ?></h3>
            	<?php the_author_description(); ?> 
            </div>
            <div class="footerlinks">
            	ici on trouvera les liens du footer
            </div>
        </div>
    </div>
<!-- fin footer -->

Vous trouverez toutes les informations requises à propos des marqueurs de modèles de l’auteur sur la page dédiée du codex wordpress.

Les derniers commentaires

Pour afficher les derniers commentaires, j’ai pour habitude d’utiliser un plugin que je trouve assez bien foutu, le plugin get recent comments(télécharger).
Je ne vais détailler ici son installation, elle ne diffère en rien d’une installation de plugin standard, mais si vous ne savez pas comment faire, vous trouverez toutes les infos nécéssaires sur la page du plugin.

Une fois le plugin installé, nous allons placer l’appel de la fonction dans le div prévu pour ça.

Ce qui nous donne :

<?php if (function_exists('get_recent_comments')) { ?>
   <h3>Derniers commentaires</h3>
       <ul>
         <?php get_recent_comments(); ?>
      </ul>
   <?php } ?>   
</div>

J’aurai pu utiliser le widget de base de wordpress pour afficher les derniers commentaires, mais ce plugin propose plus d’options de configuration et d’affichage.

Un widget est aussi inclus à l’installation du plugin, mais à plusieurs reprises j’ai pu observer des bugs d’affichage dans le titre c’est pourquoi je préfère appeler la fonction du plugin en dur, en utilisant tout de même une condition, pour ne pas éclater le thème en cas de désactivation du plugin.

Les liens du footer

Manipulation plutôt simple, on place juste 2 liens classiques le premier vers la page d’accueil du blog :

<a href="<?php bloginfo('url') ?>/" title="retour a l'accueil">Page d'accueil</a>

Le second pointant sur le header fera remonter l’affichage en top de page :

<a href="#header">Remonter</a>

Ce qui nous donne au final :

Comme je vous le disais, c’est assez simpliste.

Screenshot

Notre footer est maintenant terminé, il nous reste bien sur à le mettre en forme grâce à notre feuille de style.

Fichier index.php modifié

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
 
	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
 
	<style type="text/css" media="screen">
		@import url( <?php bloginfo('stylesheet_url'); ?> );
	</style>
 
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />
 
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>
</head>
<body>
<!-- conteneur général -->
<div id="conteneur">
	<!-- header(en-tete) -->
	<div id="header" class="padding">
	<h1 id="blog-title"><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
	<h3><?php bloginfo('description') ?></h3>
	</div>
	<!-- fin header -->
	<!-- contenu -->
	<div id="content">
		<!-- colonne de gauche -->
		<div id="left" class="padding">
			<?php if (have_posts()) : ?>
                <?php while (have_posts()) : the_post(); ?>    
                   <div class="post" id="post-<?php the_ID(); ?>">
                   		<h3 class="post-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
                        <small class="meta">le <?php the_time('j F y'); ?> cat&eacute;gorie : <?php the_category(','); ?></small>
                        <div class="post-content">
                        	 <?php the_content(__('lire la suite')); ?>
                        </div>
                        <div class="comment-link">
                            <?php comments_popup_link(__('Pas de commentaire'), __('1 commentaire'), __('% Commentaires')); ?>
                        </div>
                   </div>
                <?php endwhile; ?>
            <?php endif; ?>
        </div>
		<!-- fin colonne de gauche -->
		<!-- colonne de droite -->
		<div id="right" class="padding">
        	 <div class="sidebox" id="search">
               <label for="search">Rechercher sur le blog</label>
               <form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
                    <input type="text" name="searchform" id="searchform" size="15" />
                    <input type="submit" value="Ok" />
                </form>
             </div>
             <div class="sidebox" id="syndication">
             	<h2>Syndication</h2>
                <ul id="rsslinks">
                	<li><a href="<?php bloginfo('rss_url'); ?>" title="rss 0.92">Rss 0.92</a></li>
                    <li><a href="<?php bloginfo('rss_url'); ?>" title="rss 2.0">Rss 2.0</a></li>
                    <li><a href="<?php bloginfo('atom_url'); ?>" title="Flux atom">Flux atom</a></li>
                    <li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="Flux rss des commentaires">Flux rss des commentaires</a></li>
                </ul>
             </div>
             <div class="sidebox" id="categories">
                <ul>
                	<?php wp_list_categories('title_li=<h2>Categories</h2>'); ?> 
                </ul>
             </div>
             <div class="sidebox" id="blogoliste">
                <ul>
                	<?php wp_list_bookmarks(); ?> 
                </ul>
             </div>
             <div class="sidebox" id="archives">
             	<h2>Archives</h2>
                <select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'> 
  					<option value=""><?php echo attribute_escape(__('choisir un mois')); ?></option> 
 					<?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?>
                </select>
             </div>
        </div>
		<!-- fin colonne de droite -->
	</div>
	<!-- fin conteneur -->
	<!-- footer(pied de page) -->
	<div id="footer" class="padding">
    	<div class="footerbox-wrapper">
            <div class="footerbox" id="dernierscom">
            <?php if (function_exists('get_recent_comments')) { ?>
            	<h3>Derniers commentaires</h3>
                <ul>
               		<?php get_recent_comments(); ?>
                </ul>
            <?php } ?>   
            </div>
            <div class="footerbox" id="authordesc">
            	<h3>&Agrave; propos de <?php the_author_firstname(); ?>  <?php the_author_lastname(); ?></h3>
            	<?php the_author_description(); ?> 
            </div>
            <div class="footerlinks">
            	<a href="<?php bloginfo('url') ?>/" title="retour a l'accueil">Page d'accueil</a>
                <a href="#header">Remonter</a>
            </div>
        </div>
    </div>
	<!-- fin footer -->
</div>
</body>
</html>

Téléchargement

Téléchargez le thème utilisé dans cette partie du tutoriel.

mytheme_etape5.zip (4)

Et toujours plus de contenu percutant sur calii.fr

• [Tuto] Réaliser son propre thème wordpress partie 1 la structure HTML/CSS (6)
• [Tuto] Réaliser son propre thème wordpress partie 6, La structure CSS. (2)
• [Tuto] Réaliser son propre thème wordpress partie 4, la sidebar (2)
• [Tuto] Réaliser son propre thème wordpress partie 3, la boucle (the loop) (1)
• [Tuto] Réaliser son propre thème wordpress partie 2, les templates tags. (6)

On commence par le plus dégoutant: les Excréments occupent la 3ème place du podium avec un street-marketing hors du commun. Menée par l’association suisse Helvetas, cette opération visait à informer les habitants de la ville de Lausanne, sur le fait qu’un tiers de la population mondiale, n’a pas accès à des toilettes, et souffre de problème d’hygiènes

Pour cela, l’association non-gouvernementale a placé dans les rues de Lausanne, plein d’excréments en caoutchouc. On ne pouvait pas louper cette opération. Mais son efficacité laisse à désirer: Aucun panneau, aucune pancarte…. Pour connaître le but de cette opération, il fallait retourner les excréments et lire en dessous, chose que rare ont fait !

La deuxième place est attribuée aux portefeuilles égarés du roi du burger. Opération réalisée à Orlando et Chicago entre autres, dont l’efficacité est sans égal, mais dont l’idée est malheureusement déjà vue. 5.000 portefeuilles égarés dans les rues des grandes villes. On retrouve à l’intérieur des portefeuilles, des cartes prépayées pour manger gratuitement au Burger King, un peu de cash, (jusqu’à 100 dollars parfois) et puis un petit mot du King qui nous dit gentiment qu’on peut garder le tout.

Et le grand vainqueur de notre top 3, est une maladie. Une maladie qui touche plus de 24 millions de personnes dans le monde, j’ai nommé l’alzheimer. Ça se passe en Nouvelle Zélande, et c’est L’agence BBDO qui s’est chargée de cette opération.

Pour toutes photos développées chez un partenaire de l’agence, le client recevait son pack de photos, précédé de quelques photos tout en blanc. Au bout d’un moment, un carton expliquera que “Vos premières pertes seront vos souvenirs”.

Opération de Marketing viral très intéressante, qui allie le coté alternatif et le coté de sensibilisation, le tout avec une efficacité infaillible. Le mélange idéal pour se retrouver en tête de notre classement.

Source: Quietglover, DirectDaily et Lapubelle

Bonne semaine à tous, Bon Marketing et à très bientôt.
RaDe

Et toujours plus de contenu percutant sur calii.fr

• Réinventons notre métier, Axa nous donne une leçon de marketing (5)
• [Video] Apple vous souhaite un joyeux noël ! (1)
• Toujours plus de Publicité ! (1)
• Sélection : Publicité créative 02, trompes l’œil et autres mises en scènes (1)
• Sélection : publicité créative 01, les bus. (4)

Et comme tous les ans, le but est me même, récolter des dons, ou des promesses de dons pour pour aider les malades atteints de myopathies.

Les modes de collecte et de communication étaient déjà bien développés, mais cette année, un autre type de collecte de don s’invite à la fête, ça se passe sur la toile, le concept n’est pas nouveau et à déjà rapporté beaucoup d’argent, il s’agit de la page web à 1 million.

En gros vous achetez des espaces publicitaires au prix de 1 € le pixel pour afficher votre logo, un slogan ou même une photo.

Pour l’instant la page est encore bien vide, donc si vous êtes en manque de visibilité, vous pouvez vous afficher sur la page à 1 million du téléthon, pour 1 an et pour quelques euros, mais toujours pour la bonne cause

Visiter la page à 1 million du téléthon

Et toujours plus de contenu percutant sur calii.fr

• HooSeek : un moteur de recherche solidaire (0)