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.
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 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.
Wow! La réalité augmentée cette nouvelle façon de donner de l’information supplémentaire en 3d via votre Web cam. Tout d’abord votre caméra doit reconnaitre un logo, code bar et ensuite ajoute sur ce qui est filmer des éléments supplémentaire la plupart du temps en 3d.
Plusieurs exemples intéressant sont disponible sur le Web tel :
http://ge.ecomagination.com/smartgrid/#/augmented_reality
http://2009.max.adobe.com/MAXar/
il peuvent aussi être utiliser pour des livres dont voici un exemple tout a fait génial
http://www.ologyworld.com/Default.aspx?referrer=3Ddragon
Vous pouvez aussi profitez de plusieurs éléments de réalité augmentée grâce à l’application de Google : Goggles qui permet d’avoir de l’information sur les code bar QR que vous scanner ou de toutes autre images ou environnement qui sera automatiquement Googlé…
http://www.la-realite-augmentee.fr/actualite/google-realite-augmentee-goggles-android
Un dossier a suivre!
Il y a plus de 177 application Google de disponible en voici la liste :
voici un lien pour plus d’information sur les applications Google
Le QR est un type de code bar très utile pour les adeptes de téléphone intelligent. Il permet d’accéder rapidement a des page web, à de l’information supplémentaire sans à voir à taper d’interminable adresse. Il permet aussi d’activer des animations avec de la réalité augmentées. Il permet aussi de stocker vos billets de spectacle sur votre téléphone intelligent sous forme de code bar qui sera à son tour scanné lorsque vous irez voir votre chanteur favoris…bref, je ne sais pas vraiment comment j’ai pu faire pour être heureux avant ça!
ci-dessous un exemple de code bar qui vous permettra de vous inscrire à notre info-lettre
Voici un modèle pour vos pages HTML
Page Type (à compléter)
<HTML>
<HEAD>
<TITLE> titre composer du sujet de votre page </TITLE>
<meta name="keywords" content="quelques mot clé">
<meta name="description" content=" 150 caractères décrivant le contenu de votre page">
<meta name="revisit-after" content=" ">
<meta name="doc-publisher" content=" ">
<meta name="copyright" content=" ">
<meta name="verify-v1" content="a completer avec votre code de google pour webmestre" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "<a href="https://ssl">https://ssl</a>." : "<a href="http://www">http://www</a>.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("inscrire ici votre code UA ou GA");
pageTracker._trackPageview();
</script>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</HEAD>
<body>
<h1>sujet de votre page </h1>
</br>
<IMG SRC="images/a_haut_avec_logo.jpg" WIDTH=505 HEIGHT=319 ALT=" description de votre image ">
Textes pertinents
</body>
</HTML>