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
Zen 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 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>
Et évidemment, nous pouvons créer de réels structures complexes:
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>
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 !)
Cet outil permet de faire encore de nombreuses choses:
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.
Nous 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.
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">
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”.
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.
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!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.
Voici une liste simple de chose à valider pour le bon référencement d’un site Web
Le niveau de contraste d’une page Web est important au delà du look il est important d’avoir des contenus facilement lisible. On peut avoir un joli site facile à lire si on se donne la peine d’avoir un bon contraste et des teintes qui s’agencent bien (kuler). Pour ce qui est des contrastes, vous pourrez sans peine les évaluer avec ce petit sélecteur de couleur que vous pouvez télécharger.