Perso Web PMI Prog Réseaux sociaux Développement Etudes OS Sécurité Infographie Mobiles Référencement iPhone Apple Scrum

03 janv. 2009

Connaissez-vous toutes les balises HTML et propriétés CSS ?

Par Jean-Christophe Duvivier à 21:18

Mots Clés CSS, HTML, Internet, Nerds, Web,

Deux petits tests pour savoir si vous êtes un vrai nerd du développement web. Just Say Hi propose une multitude de tests en ligne, sur différents sujets. J'ai choisi pour vous le test de connaissance des balises HTML, et des propriétés CSS. Vous avez respectivement 5, et 7 minutes pour en restituer un maximum. Voici mes résultats, j'espère que vous viendrez poster les vôtres ici et que vous en trouverez autant, si ce n'est plus que moi ^^

Just Say Hi

En attendant, ça se passe ici pour le test HTML : Just Say Hi - Test HTML

Et ici pour le test CSS : Just Say Hi - Test CSS

02 déc. 2008

Envoyer des emails de type texte et HTML avec pièces jointes en PHP

Par Jean-Christophe Duvivier à 19:13

Mots Clés HTML, Mail, PHP,

Le but de ce tuto est de vous donner toutes les cartes afin que vous puissiez envoyer des emails de type "texte" ou "HTML" via PHP. Il ne se veut pas exhaustif, mais suffisamment complet pour répondre à la demande d'au moins 90% d'entre vous. J'estime que seules les personnes expérimentées auront besoin de créer des applications plus complexes (je généralise, mais c'est majoritairement le cas).

Ce tuto se veut succin mais pertinent. J'irai droit au but. L'envoi de Mail requiert la connaissance de paramètres, d'une syntaxe particulière... Soit vous l'apprenez par cœur, soit vous mettez ce tuto en marque page, il se révélera très pratique ;) Trêve de blabla. On y va.

1. Envoi de mail texte

L'envoi de mail se fait grâce à la fonction mail(). Elle prend au minimum 3 paramètres : le destinataire, le sujet et le message.

<?php
/*---- Déclaration des paramètres ----*/
$destinataire = "destinataire@gmail.com"; // Pour plusieurs destinataires, les séparer par une virgule
$sujet = "Tuto - Envoi de mail";
 
/*---- Déclaration du message ----*/
$message = "Mon Message";
 
/*---- Envoi du mail ----*/
mail($destinataire, $sujet, $message);
?>

Grâce à un 4ème paramètre (optionnel), l'entête, il vous est possible de renseigner davantage d'informations, tels que l'adresse email de l'expéditeur, ou encore la priorité du mail.

<?php
/*---- Déclaration des paramètres ----*/
$destinataire = "destinataire@gmail.com"; // Pour plusieurs destinataires, les séparer par une virgule
$expediteur = "contact@jchristophe.fr";
$sujet = "Tuto envoi de mail";
 
/*---- Déclaration de l'entête ----*/
$entete = "From: $expediteur \n"; // Adresse de l'expéditeur
$entete .= "Reply-to: $expediteur \n"; // Adresse de réponse
$entete .= "Cc: destinataire1@gmail.com \n"; // Destinataire(s) en copie cachée
$entete .= "Bcc: destinataire2@gmail.com \n"; // Destinataire(s) en mode caché
$entete .= "X-Priority: 1 \n"; // Priorité du mail. 5 = basse, 3 = normal, 1 = urgent
 
/*---- Déclaration du message ----*/
$message = "Mon Message"; // Pour sauter une ligne, écrire : \n
 
/*---- Envoi du mail ----*/
mail($destinataire, $sujet, $message, $entete);
?>

2. Envoi de mail html

Pour envoyer un mail au format HTML, il suffit de déclarer le Content-Type du mail dans son entête. Vous pourrez ensuite utiliser toutes vos balises HTML dans votre message.

<?php
/*---- Déclaration des paramètres ----*/
$destinataire = "destinataire@gmail.com"; // Pour plusieurs destinataires, les séparer par une virgule
$expediteur = "contact@jchristophe.fr";
$sujet = "Tuto envoi de mail";
 
/*---- Déclaration de l'entête ----*/
$entete = "From: $expediteur \n"; // Adresse de l'expéditeur
$entete .= "Reply-to: $expediteur \n"; // Adresse de réponse
$entete .= "Cc: destinataire1@gmail.com \n"; // Destinataire(s) en copie cachée
$entete .= "Bcc: destinataire2@gmail.com \n"; // Destinataire(s) en mode caché
$entete .= "X-Priority: 1 \n"; // Priorité du mail. 5 = basse, 3 = normal, 1 = urgent
$entete .= "Content-Type: text/html \n"; // Type du mail : HTML
 
/*---- Déclaration du message ----*/
$message = "<html><body>";
$message .= "<strong>Mon Texte Gras</strong><br />";
$message .= "<font color=\'#ff0000\'>Mon Texte Rouge</font>";
$message .= "</body></html>",
 
/*---- Envoi du mail ----*/
mail($destinataire, $sujet, $message, $entete);
?>

Concernant l'affichage des images, n'oubliez pas de renseigner l'url complète de votre image, que vous avez, au préalable, hébergé sur un serveur ;)

3. Envoi de mail avec pièce(s) jointe(s)

<?php
/*---- Déclaration des paramètres ----*/
$destinataire = "contact@jchristophe.fr"; // Pour plusieurs destinataires, les séparer par une virgule
$expediteur = "contact@jchristophe.fr";
$sujet = "Tuto envoi de mail";
 
$delimiteur = md5(uniqid(rand())); // Création d'un numéro unique, qui délimitera les différents blocs du mail
 
$piecejointe = "candidat.pdf"; // Déclaration du fichier à envoyer en tant que pièce jointe
$contenupiecejointe = file_get_contents($piecejointe); // Récupération du contenu du fichier
$contenupiecejointe = chunk_split(base64_encode($contenupiecejointe)); // Conversion du fichier : respect du format RFC 2045
$typepiecejointe = filetype($piecejointe); // Récupération du type du fichier
 
/*---- Déclaration de l'entête ----*/
$entete = "From: $expediteur \n";
$entete .= "Reply-to: $expediteur \n";
$entete .= "Cc: destinataire1@gmail.com \n";
$entete .= "Bcc: destinataire2@gmail.com \n";
$entete .= "X-Priority: 1 \n";
$entete .= "MIME-Version: 1.0 \n";
$entete .= "Content-Type: multipart/mixed; boundary=\"$delimiteur\" \n"; // Déclaration du type du mail et du délimiteur
$entete .= " \n";
 
/*---- Déclaration du message ----*/
$message = "--$delimiteur \n"; // Séparation du bloc "entete" et du bloc "message" par notre délimiteur
$message .= "Content-Type: text/html; charset=\"iso-8859-1\" \n"; // Déclaration du type du message ainsi que la charte de codage
$message .= "Content-Transfer-Encoding:8bit\n"; // Déclaration du type de codage
$message .= "\n";
$message .= "<strong>Mon Texte Gras</strong><br />";
$message .= "<font color=\"#ff0000\">Mon Texte Rouge</font>";
$message .= "\n";
 
/*---- Insertion de la pièce jointe ----*/
$message .= "--$delimiteur \n"; // Séparation du bloc "message" et du bloc "pièce jointe" par notre délimiteur
$message .= "Content-Type: $typepiecejointe; name=\"$piecejointe\" \n"; // Déclaration du type et du nom de la pièce jointe
$message .= "Content-Transfer-Encoding: base64 \n"; // Déclaration du type de codage
$message .= "Content-Disposition: attachment; filename=\"$piecejointe\" \n"; // attachment = pièce jointe = fichier à sauvegarder
$message .= "\n";
$message .= $contenupiecejointe." \n"; // Insertion du fichier
$message .= "\n";
$message .= "--$delimiteur"; // Délimitation de la fin de la pièce jointe, et du mail
 
/*---- Envoi du mail ----*/
mail($destinataire, $sujet, $message, $entete);
?>

Et voilà ! Je pense avoir été assez précis, explicite et pertinent. Cependant, si vous avez des questions sur des éléments relatifs à l'envoi de mail en PHP présents, ou pas, dans ce tuto, je me ferai un plaisir de répondre dans la limite de mes compétences ;)

N'hésitez pas à réagir ;)

23 oct. 2008

Plugins et outils indispensables aux développeurs web

Par Jean-Christophe Duvivier à 11:08

Mots Clés Ajax, CSS, DOM, Firefox, HTML, IE, JavaScript, Outils, Plugin, SeaMonkey,

Je vais vous présenter les Outils et les Plugins que j'utilise quotidiennement et qui représentent pour moi, le minimum vital à tout développeur web. Sans plus attendre, les voici :

1. Plugin Web Developer

S'il n'y en avait qu'un, ce serait celui-ci. Ce Plugin Firefox (également développé sur SeaMonkey) est une mallette à Outils très complète qui permet de répondre à nos besoins les plus récurrents. Voici les grands axes :

  • CSS : Possibilité de voir, désactiver et modifier les CSS d'un site web etc.
  • Formulaire : Possibilité de voir les mots de passe, de convertir la méthode de traitement etc.
  • Image : Possibilité de désactiver les images, d'afficher leurs dimensions, leur poid etc.
  • Informations : Possibilité de voir les id, les classes, les codes couleurs etc.
  • Et d'autres fonctionnalités : outils de validation, de redimensionnement etc.

Pour le télécharger en français, rendez-vous ici : Plugin Web Developer - Fr
Et pour la version anglaise c'est ici : Plugin Web Developer - En

2. Plugin Firebug

Logo Firebug

S'il y en avait un deuxième, ce serait celui-ci. Ce Plugin est un débuggeur évolué pour Firefox . Je vais reprendre la présentation de Geckozone :

FireBug vous permet d'explorer par clavier ou souris les coins les plus reculés du DOM. Tous les Outils dont vous avez besoin pour fureter, produire et controler votre JavaScript, CSS, HTML et Ajax sont rassemblés ensemble à travers une seule extension, incluant un débuggeur, une console d'erreur, une ligne de commande, et une variété d'inspecteurs intéressants…

Un rapide aperçu des fonctionnalités de FireBug :

  • Un débuggeur JavaScript pour naviguer pas à pas dans le code une ligne à la fois,
  • Un icône de barre d'état qui permet de voir rapidement s'il y a une erreur dans la page web,
  • Une console qui montre les erreurs JavaScript et CSS,
  • Messages de Log de JavaScript dans votre page web sur la console
  • Une ligne de commande JavaScript
  • Un espion du trafic XMLHttpRequest,
  • Un inspecteur de source HTML, styles associés, évenements, mise en page et le DOM.

Pour le télécharger en anglais, rendez-vous ici : Plugin Firebug - En

3. Plugin IE Tab

Une harmonisation de l'interprétation du code entre les différents navigateurs étant loin d'être prévue, ce petit outil devient indispensable. Il vous permet d'ouvrir une page IE dans un onglet Firefox.

Pour le télécharger en anglais, rendez-vous ici : Plugin IE Tab - En

4. Plugin Colorzilla

Ce petit plugin servira surtout aux designers web étant donné qu'il permet de récupérer le code hexadécimal d'une couleur par simple survol du curseur. Ça évite la manipulation contraignante du PRINTSCREEN > CTRL + V > PHOTOSHOP.

Pour le télécharger en anglais, rendez-vous ici : Plugin Colorzilla - En

5. Logiciel Multiple IE

Logo Internet Explorer

L'interprétation du code entre les différentes versions de IE étant sensiblement différente, il est souvent utile de contrôler ses applications sur différentes version de IE (la 6.0 et la 7.0 par exemple), ce qu'il implique qu'il faille contrôler son application sur 2 ordinateurs différents. Ce petit logiciel vous permet d'installer 5 versions de IE (IE3, IE4.01, IE5, IE5.5 et IE6) en plus de celle que vous possédez déjà (dans l'idéal : la 7.0).

Pour le télécharger en anglais, rendez-vous ici : Logiciel Multiple IE - En

Si vous vous servez d'autres plugins/outils/logiciels/sites web qui vous semblent utiles pour les développeurs web, n'hésitez pas à les citer à la suite de cet article ;-)

Propulsé par Dotclear - Hebergé par PlanetHoster - Thème Green Mantis par jchristophe
© jchristophe.fr 2008 - 2009
Valide CSS 2.1 CSS 2.1 Valide XHTML 1.0 XHTML Strict 1.0 Flux RSS RSS