5 points importants
- nom de domaine
- Titre de la balise title
- description de 160 caractères
- h1 pertinent
- contenu pertinent (long contenu)
Sur youtube vous pouvez accéder a Adword University
http://www.youtube.com/universiteadwords?hl=fr_CA#p/c/3/TjAbcftFzWA
pour en savoir plus sur le réseau display de Google vous pouvez consulter le vidéo suivant:
http://www.youtube.com/universiteadwords#p/c/1/NHvXNxSAc4c
Seule les blagues doivent être faites avec le plus grand des sérieux
0 Comments Published by admin October 26th, 2011 in HumourZen coding – Facilitez vous la vie !
Zen coding est une extension que l’on peut installer sur la presque totalité des éditeurs de texte (comme Dreamweaver, Notepad++ ou KomodoEdit).
C’est sans l’ombre d’un doute un des outils les plus utile que j’utilise.
Son fonctionnement
Son fonctionnement de base est très simple, en utilisant des sélecteurs CSS avancés, on écrit une ligne directement dans notre code HTML, par exemple:
table>tr>td
(notez que le sélecteur css “>” sélectionne l’enfant direct d’un élément)
En appuyant sur la touche tab (ou le bouton relatif à l’extension Zen coding sur votre propre éditeur), la ligne précédente produira le code suivant :
<table>
<tr>
<td></td>
</tr>
</table>
Zen coding pour faire un peu plus
Et évidemment, nous pouvons créer de réels structures complexes:
- “()” les parenthèses servent à délimiter un bloc de balises
- “*” L’étoile sert à multiplier l’élément (ou le bloc) par le nombre de fois précisé
- “+” définie une relation de frère
- “>” définie que l’élément est compris directement dans la balise précédente
- “#” assignera un ID à l’élément
- “.” assignera une classe à l’élément
Et ainsi, le code suivant produira
div#page>div.logo+ul#navigation>li*5>a
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
Ne pas se casser la tête sur la structure de base
Et une dernière astuce, l’utilisation de cette ligne
html:5
Vous produire une template de page de base complète et valide sans tracas. (cela dit, n’oubliez pas de changer la valeur de l’attribut lang pour la langue propre à votre site !)
Aller plus loin
Cet outil permet de faire encore de nombreuses choses:
- Ajouter une classe numérotée à vos éléments (sur li par exemple)
- Générer des commentaires conditionnels
- Balises scripts, links et bien d’autres
Pour en voir plus, je vous renvoie vers ces autres ressources:
Article sur Zen coding de SmashingMag (en anglais)
Et ce vidéo de démonstration :
Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.
Notre dernière Réalisation : Chiropractic Speakers Event
0 Comments Published by Simon August 10th, 2011 in Nos RéalisationsNous avons mis en ligne la semaine dernière le dernier projet sur lequel nous avons travaillé, le site du « Chiropractic Speakers Event ».
Le design du site a été réalisé par Catherine Brunet, et nous nous sommes chargé de son intégration sur WordPress.
De même, pour faciliter la promotion de cet évènement, nous avons géré la campagne d’infolettre relié à la promotion de la conférence, ainsi que réalisé une infolettre sur mesure d’après le design de Catherine.
(P.S.: S’il prenait à quelqu’un l’intérêt de regarder le code source de l’infolettre, l’utilisation des tableaux de positionnement est la seule technique de postionnement viable des infolettres puisque les CSS sont tout simplement ignoré sur la majorité des clients de messagerie et des webmails – Je vous ferai un article à ce sujet éventuellement)
Ainsi, nous souhaitons le meilleur succès au Chiropractic Speakers Event, entre temps nous continuons de traquer les résultats de l’infolettre et des visistes sur le site afin d’ajuster nos stratégies SEO et marketting pour l’avenir.
[HTML] L’importance du Doctype et le modèle des boîtes
0 Comments Published by Simon August 9th, 2011 in CSS, HTML, WebQu’est-ce que le Doctype ?
Le doctype est la balise déclarant le type du document qui précède chaque page HTML. Par exemple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Son utilité
La présence du Doctype est obligatoire selon les normes du W3C. Si vous souhaitez que votre page puisse être valider, il faudra l’inclure. En même temps, selon le choix du langage (xhtml, html4, html5) le validateur s’ajustera et corrigera votre document en conséquence.
Jusque là, son utilité ne semble pas primordiale. Cependant, si vous n’incluez pas de Doctype, vous risquez d’encourir de nombreux problème d’affichage sous Internet Explorer puisque son omission fait passer ce dernier en mode “Quirks”.
Qu’est-ce que le mode Quirks ?
Le modèle des boites est la norme du W3C (suivie par tous les navigateurs) qui définie la manière dont sont déclarés et appliqués différentes propriétés CSS (notamment margin, padding, border, width et height).
Pour ainsi dire, tout ce qui attrait au dimensionnement de ces dernières.
Selon ces normes, les valeurs CSS de width et de height définissent respectivement la largeur et la hauteur du bloc de contenu. À cette taille s’ajoutera l’espacement entre le contenu et la bordure (padding), la bordure (border) et la marge (margin).
Ainsi, selon les règles CSS suivantes:
div {
width: 200px;
padding: 10px;
border: 1px solid #000;
}
La largeur totale de div sera de 222px (200px + (20px * 2) + (1px * 2)).
Le modèle de boîte est généralement peu connu des débutants en CSS et est souvent la cause des blocs flottants s’empilant au lieux de se suivre sur une même ligne. Ces derniers croyant que le padding et la bordure sont comprises au sein de la largeur définie.
Le mode Quirks (uniquement sous IE) quant à lui modifiera le modèle des boîtes. Sous ce mode, IE incluera le padding et la bordure à la valeur de with. Et ainsi, le code précédent génèrera une largeur totale de seulement 200px puisque la largeur du padding et de la bordure seront incluse au sein de la largeur du bloc.
Ceci semble pour plusieurs être plus intuitif, mais est un comportement actuellement strictement réservé à IE.
Nouvelle propriété pour le modèle des boîtes en CSS 3
La troisième version des CSS actuellement en cours de réalisation prévoit une valeur CSS spécifique qui permettra aux intégrateurs de spécifier le modèle des boîtes qu’ils souhaitent utiliser. Ainsi, le mode quirks pourra être utilisé via cette propriété :
div {
box-sizing: border-box /* valeurs possibles: content-box | border-box | padding-box */
}
Actuellement cette propriété est comprise par Mozilla, Webkit, Opera 9 et IE 8. Mais pour l’instant, notamment dû à la présence des anciennes versions de ces navigateurs, il sera mieux dans la majorité des cas de se contenter du modèle de boîte original.
Annexe: Différents Doctype
HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
xHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5 (utilisable aujourd’hui sans aucun problème)
<!DOCTYPE html>
Le réseau collégial, porteur de solutions par le rehaussement nécessaire des compétences essentielles en littératie des adultes en formation et en emploi au Québec. L’objectif compétence niveau 3 en littératie.