17nov

Les bases du html

Le html est la base d’un site web internet. C’est avec ce code que vous allez créer le squelette de vos pages web.

Le code html est composé de balise aussi appelé “tag” ou “commande” qui seront interprétées par le navigateur. La plupart du temps, on doit ouvrir une balise (ex: <html>) et la fermer (ex: </html>)

Voici la structure de base d’une page html:

  1. <html>
  2. <head>
  3. <title>Titre de la page</title>
  4. <style type="text/css">
  5.  
  6. </style>
  7. </head>
  8. <body>
  9.  
  10. </body>
  11. </html>

La balise <html>: Indique au navigateur qu’il doit afficher du code html.

La balise <head>: Donne des informations sur le contenu de la page. Voir l’article sur les META

La balise <title>: Indique le nom de la page. Cette information est affiché dans la barre du navigateur.

la balise <style type=”text/css”>: C’est dans cette balise qu’il faut écrire le code CSS. Ce code permet de mettre en forme votre page interne.

La balise <body>: C’est la partie que le navigateur affiche.
16nov

Photoshop en ligne et en flash

Non ce n’est pas Adobe Photoshop mais un site internet qui a créé une application plutôt impressionnante, un éditeur d’image en ligne et en flash.

Ce site, c’est Pixlr. Pour accéder à l’éditeur d’image, cliquez sur le drapeau de votre choix. Vous pourrez enregistrer votre création en JPG ou PNG.

Une petite astuce: Pour revenir en arrière, le “ctrl-z” fonctionne !

Quand on observe ce genre de web-appli, on se demande si le logiciel sur PC a encore beaucoup de jour devant lui !

Le site internet: Pixlr
16nov

Une façon originale pour présenter ses photos

Flashmo propose des applications flash gratuites pour présenter des images ou photos à vos visiteur d’une façon très originale.

L’utilisation est trés simple car les applis Flashmo utilisent un fichier xml pour intégrer vos images à l’animation Flash.

Il suffit donc de copier vos images dans un dossier (par défaut, il se nomme thumbnails) et d’indiquer le chemin dans le fichier XML.

Pour télécharger les différentes applis flash et avoir plus d’infos, rendez-vous sur Flashmo
16nov

Ajouter un formulaire de recherche web 2.0 sur votre blog

Sikbox, c’est le nom de ce nouveau service trés web 2.0. Sikbox permet d’intégrer à son blog un formulaire de recherche qui fonctionne comme “Google Suggest”.

Oui mais c’est quoi “Google Suggest” ?

“Comme Google Suggest” veut dire que les résultats s’affichent juste en dessous du formulaire sans recharger la page !

L’avantage du service Sikbox réside dans le fait qu’il n’y a aucune connaissance  à avoir pour l’utiliser.

Vous indiquez votre nom de domaine, vous choisissez le style de formulaire et le nombre de réponses à afficher. Suite à ces renseignement, vous recevez un script à placer dans vote site et c’est fini !

Rendez sur Sikbox pour tester…
16nov

Choisir une feuille de style pour IE avec les commentaires conditionnels

Les commentaires conditionnels permettent de choirsir une feuille de style précise en fonction de la version d’Internet Explorer.

Le principe est simple. Il suffit de placer ce code entre les balises <head> et </head> de votre code html:

  1. <!--[if IE]>
  2. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  3. <![endif]-->

Ce qui se traduit par: Si le navigateur est Internet Explorer, il faut utiliser cette feuille de style. On peut bien sûr utiliser une autre fonction entre les balises comme par exemple: indiquer au visiteur qu’on sait qu’il utilise Internet explorer !

Syntaxes et options possible pour les commentaires conditionnels:

  • if IE 5 : Pour toutes les versions d’Internet Explorer 5 (5.0 – 5.5)
  • if IE 6 : Pour la version 6 d’Internet Explorer
  • if IE 7 : Pour la version 7 d’Internet Explorer
  • lt : Pour toute les versions inférieurs à … (ex: if lt IE 6 –> Le code sera éxécuté par Internet Explorer 5 et 5.5)
  • lte : Pour toute les versions inférieurs ou égales à … (ex: if lte IE 6 –> Le code sera éxécuté par Internet Explorer 5, 5.5 et 6)
  • gt : Pour toute les versions supérieurs à … (ex: if gt IE 6 –> Le code sera éxécuté par Internet Explorer 7 et 8 )
  • gte : Pour toute les versions supérieurs ou égales à … (ex: if gte IE 6 –> Le code sera éxécuté par Internet Explorer 6, 7 et 8 )

Voici un exemple de code que j’utilise régulierement:

  1. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  2. <!--[if lt IE6]>
  3. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  4. <![endif]-->
  5. <!--[if lt IE7]>
  6. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  7. <![endif]-->
  8. <!--[if gte IE7]>
  9. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  10. <![endif]-->

Dans cet exemple, la première ligne sera utilisé par firefox (Safari su mac). Il faut donc construire le CSS autour de ce navigateur.

Ensuite pour les feuilles de styles spécifiquent aux versions de IE, il suffira de modifier les lignes qui provoquent une mauvaise mise en page.
15nov

Sélectionner un code CSS en fonction du navigateur

Un des plus gros soucis pour un développeur est de rendre sa page web identique sur tous les navigateurs. La méthode décrite ci-dessous permet de détecter 14 navigateurs et 3 OS.

Liste des navigateurs compatibles:

  • ie – Internet Explorer (toutes versions)
  • ie8 – Internet Explorer 8.x
  • ie7 – Internet Explorer 7.x
  • ie6 – Internet Explorer 6.x
  • ie5 – Internet Explorer 5.x
  • gecko – Mozilla, Firefox (toutes versions), Camino
  • ff2 – Firefox 2
  • ff3 – Firefox 3
  • opera – Opera (All versions)
  • opera8 – Opera 8.x
  • opera9 – Opera 9.x
  • konqueror – Konqueror
  • webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • chrome – Google Chrome

Liste des OS compatibles:

  • win – Microsoft Windows
  • linux – Linux (x11 and linux)
  • mac – Mac OS

Pour bénéficier de cette fonction, il suffit de télécharger ce fichier javascript (moins de 1Ko):

Placer ce fichier entre les balises <head> et </head> à l’aide du code suivant:

<script src=”css_browser_selector.js” type=”text/javascript”></script>

Une fois ces opération effectué, il ne vous reste plus qu’à compléter votre code CSS comme indiquer dans l’exemple qui suit:

  1. .ie .example {
  2. background-color: yellow
  3. }
  4. .ie7 .example {
  5. background-color: orange
  6. }
  7. .gecko .example {
  8. background-color: gray
  9. }
  10. .win.gecko .example {
  11. background-color: red
  12. }
  13. .linux.gecko .example {
  14. background-color: pink
  15. }
  16. .opera .example {
  17. background-color: green
  18. }
  19. .konqueror .example {
  20. background-color: blue
  21. }
  22. .webkit .example {
  23. background-color: black
  24. }
  25. .example {
  26. width: 100px;
  27. height: 100px;
  28. }
  29.  
  30. html.gecko div#header {
  31. margin: 1em;
  32. }
  33.  
  34. .opera #header {
  35. margin: 1.2em;
  36. }
  37.  
  38. .ie .mylink {
  39. font-weight: bold;
  40. }
  41.  
  42. .mac.ie .mylink {
  43. font-weight: bold;
  44. }
  45.  
  46. .[os].[browser] .mylink {
  47. font-weight: bold;
  48. }
  49.  
  50. -> pas d'espace entre .[os] et .[browser]

Source: Rafael Lima
14nov

Combien de visites font les sites internet ?

www.statbrain.com

Statbrain.com est le site parfait pour se dire qu’on est loin de l’audience des sites connus !

En effet, Statbrain.com permet de s’informer sur le nombre de visites des sites internet. Bien sûr, c’est une valeur approximative qui est calculée en fonction de différents paramètres comme le score Alexa, le nombre de liens sur les moteurs de recherche, ou bien encore l’emplacement du serveur.

j’ai fait quelques tests sur des sites bien connus:

N’oubliez pas d’envoyer votre feedback…
13nov

Mise à jour de Google Analytics

Un des meilleurs services de Google, si ce n’est le meilleur a été mis à jour.

La page d’accueil de Google Analytics propose maintenant des informations intéressantes comme le nombre de visites par Jour, Semaine, Mois ou Année des différents sites inscrits.

On peut aussi remarquer la progression des visites en pourcentage.

Petite mise à jour mais quel confort de ne plus avoir à rentrer dans les stats de chaque site pour avoir ces informations !

Page d'accueil google analytics

N’oubliez pas que Google Analytics est un service gratuit !
13nov

Afficher du code html dans Wordpress

A la création d’un article pour woodiv, je me suis rendu compte que le code html était interprété au lieu d’être affiché !

La première solution que j’ai trouvée est d’inclure le code dans une citation. Cette solution a l’avantage d’être rapide à utiliser mais pour la lecture d’un langage de programmation, c’est un peu limite !

Suite à quelques recherches sur le sujet, je me suis arrêté sur le plugin Code Viewer

télécharger

Exemple d’affichage:

  1. ligne 1 du code
  2. ligne 2 du code

Pour installer le plugin:

  1. Transférer le fichier code-viewer.php dans le dossier /wp-content/plugins/
  2. Ouvrir le fichier et renseigner la ligne suivante

    /* Configuration Settings */
    $default_path = “Indiquer le lien pointant vers le dossier qui contiendra vos fichiers textes”

  3. Activer le plugin dans Wordpress

Pour utiliser le plugin:

  1. Créer un fichier texte comportant le code que vous voulez afficher dans l’article
  2. Transférer ce fichier sur votre serveur dans le dossier indiqué pendant l’installation
  3. Insérer ce code dans l’article: <viewcode src=”fichier.txt” /> (remplacer fichier.txt par le nom de votre fichier)
13nov

Créer un bouton à l’aide de CSS

Le terme rollover indique le changement d’état d’une image au passage de la souris. Dans cet exemple, nous allons utiliser cette fonction pour créer un bouton.

En CSS, il existe plusieurs façons de créer cet effet mais dans cet article je ne détaillerai que la méthode que j’utilise régulièrement.

Elle présente 3 avantages:

  • Les deux images sont chargées à l’ouverture de la page (pas d’attente pendant le changement d’image)
  • pas de JavaScript
  • W3C valide

Présentation du code: (voir l’exemple)

La partie HTML:

  1. <a class="bouton" href="lien.html"><img border="0" src="bouton.jpg" alt="bouton" /></a>

La partie CSS:

  1. a.bouton {
  2. display:block;
  3. width:XXpx;
  4. height:XXpx;
  5. background-image:url("bouton_hover.jpg");
  6. }
  7. a.bouton:hover {
  8. visibility:visible;
  9. }
  10. a.bouton:hover img {
  11. visibility:hidden;
  12. }

Remplacer les XX dans width et height par les dimensions de votre image !

L’exemple en téléchargement:

télécharger