All posts in “Codage”

Tester une adresse e-mail en php

Posted 594 jours ago · 4 Comments
min2

Bonjour,
Aujourd’hui, nous allons voir comment vérifier qu’une adresse e-mail est valide(lors de l’envoi d’un mail, par exemple) grâce aux expressions régulières!
Déjà, « définissons » une expression régulière, ou regex : C’est une sorte chaîne de caractères qui vas servir à filtrer une chaîne de caractères, le filtre renverra « true » ou « false » lors du résultat, true signifie que la chaîne de caractères est passée au travers du filtre sans erreur, et false signifie le contraire (logique ^^ ).
Voilà, passons donc à la pratique. Durant cette partie, nous allons testé la variable $mail qui contiendra un e-mail valide du style « contact@site.fr » :

<?php
$mail = "contact@site.fr"; // Variable à tester
?>

Voilà, le code de base est posé, nous allons donc maintenant voir la regex de test du mail :

/[a-z0-9\_\.\-]+@[a-z0-9\_\.\-]+\.[a-z]{2,4}/

Expliquons cette regex (Nan, je ne parles pas chinois ):
Les « / » servent à délimiter la regex, indiquer son début et sa fin.
[a-z0-9\_\.\-] défini une plage de caractères, a-z = tout l’alphabet, 0-9 = tout les chiffres, \_\.\- = le « _ », « . » et le « - » sont autorisés, les antislashs sont les caractères d’échappement.
Les « + » signifie que la plage de caractères est répétée une ou plusieurs fois.
le @ signifie … Qu’un arobase suit cette plage de caractères, tout simplement.
Ensuite, on revient à la plage de caractères définie plus haut.
\. signifie que la plage de caractères est suivie d’un point, l’antislash étant un caractère d’échappement.
[a-z] Définie une plage de caractères, l’alphabet seulement ici.
{2,4} signifie que la plage de caractères qu’il précède peut se répéter de 2 à 4 fois (.fr, .com, .info, par exemple)
/i Ajoute la valeur d’insensibilité à la casse, les majuscules et les minuscules ne sont pas prises en comptes.
Voilà, nous avons donc expliqué cette regex. Je vais donc vous montrez comment la mettre en application :

<pre>if (preg_match("/[a-z0-9\_\.\-]+@[a-z0-9\_\.\-]+\.[a-z]{2,4}", $mail))
{
echo 'Adresse mail valide !';
}
else
{
echo 'Adresse e-mail invalide  !';
}</pre>
</pre>

Et voilà ! Magique n’est-ce pas ? Donc, vite fait pour la forme: la fonction preg_replace prend pour paramètres: 1) La regex, 2)la chaîne de caractères à tester. (cf. http://fr2.php.net/preg_replace)
Allé, si vous avez des questions ou des remarques, n’hésitez pas à commenter !
A plus !

Merci à Adrien pour l’image d’illustration

Intégration HTML-CSS d’un site web

Posted 597 jours ago · 7 Comments

http://www.dailymotion.com/videoxf089e

Note:

Le code « de base » d’un page web, le style est intégré dedans :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
</body>
</html>
Dans ce tutoriel vidéo, vous allez apprendre à créer votre site web de manière à ce qu’il soitinteractif. Si vous avez des questions, commentaires, remarques, n’hésitez pas !

Télécharger les sources

Merci à Adrien pour l’image d’illustration

@font-face: Utilisation

Posted 645 jours ago · 2 Comments
1281724271_preferences-desktop-font
download
Salut,

Je tiens d’abord à m’excuser de ne pas avoir fait d’articles pendant ces 2-3 semaines : pas d’envies, pas d’idées etc… Mais je reviens avec un mini-tuto pour vous montrer l’utilisation de @font-face. Cette propriété CSS sert à pouvoir charger une police non-standard pour l’utiliser sur votre site web.

Exemple de polices standard: Arial, serif.

Exemple de polices non-standard: segoe, N-Gage etc…

Note: Ne marche que sur des navigateurs récents, sinon, préférez Cufon, qui utilise le JavaScript

Mon but, c’est donc de pouvoir utiliser une police non-standard, ici je vais utiliser segoe, pour pouvoir styliser tout mes h1.

Je pars de ce document html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>@font-face</title>
<link  rel="stylesheet" href="style/style.css" title="style" type="text/css" />
</head>
<body>
<div><h1>Article 1</h1></div>
<div><p>Le premier article</p></div>
<div><h1>Article 2</h1></div>
<div><p>Le second article</p></div>
<div></body></div>
<div></html></div>
<div>
et de ce fichier CSS:
h1{color: blue; font-family: arial, serif;}
Maintenant, au début du css, je vais rajouter la propriété font-face, je ne vous explique pas le code, il est simple et suffisamment commenté :
@font-face {
 font-family: "segoe"; /*On appelera la police grâce à ce nom*/
src: /* Se reporter à la fin du tuto. Le lien du fichier TTF*/
}
Note : Les fichiers de font doivent être en .ttf
ça nous donne donc à la fin, un fichier css comme ça :
@font-face {
font-family: "segoe" ; /*On appelera la police grâce à ce nom*/
src: /* Se reporter à la fin du tuto .Le lien du fichier TTF*/
}

h1{color: blue; font-family: segoe, arial, serif;}
Le plugin permettant d’afficher le code à quelques problèmes à parser le code que je lui envoie, la propriété « url » de @font-face est donc comme cela: url( « segoepr.ttf » ) ; . Merci de votre compréhension.
Et voilà, vous avez appris à utiliser @font-face, à savoir, aussi,vous pouvez rajouter les propriétés suivantes dans le @font-face :
  • font-weight
  • font-style
  • etc..

A bientôt

[edit]

Dans les commentaires, Stéphane de etsionparlait et mangetamain(que je vous conseille de lire, très beau blog !) m’à fait découvrir un outil sympa: http://www.fontsquirrel.com/fontface/generator , vraiment bien foutu, gain de temps assuré !

[/edit]

Living Tuts

Posted 660 jours ago · 1 Comment
pres_livingtuts

Bonjour,

Encore une fois, je vais vous embêter  passionnés(toujours pas? :p) avec la « découverte » d’un site.

Ce site s’appelle LivingTuts, à l’origine du projet, se trouve Gaétan Weltzer (aka Design Spartan) et son ami Yoann Marie. Mais, pourquoi vous informer que ce site vient de sortir le bout de son nez? Tout d’abord, ce site regroupe(ra) un grand nombre de tutoriaux en français et en anglais, sur le matte-painting, le digital-painting, le dev’ web etc… . Ensuite, ce site semble très prometteur, déja en voyant le constat qui a lancé la création de ce site:

Gaétan Weltzer, qui a fait un mot accompagné de la plupart des rédacteurs(dont je fait partie :p), résume très bien le problème auquel nous somme confronté:

“Une idée qui a vu le jour dans ma tête il y a déjà plus de 2 ans après le triste constat que le monde francophone manque de tutoriels de haut niveau est aujourd’hui concrétisée. Ce projet me tient énormément à cœur et j’espère le voir encore grandir et évoluer avec vous.”

Voila, je vous invite donc à vous rendre sur livingTuts, et découvrir vous même ce site.

Lien: http://www.fr.livingtuts.com/

Créer des ancres

Posted 666 jours ago · 1 Comment

Salut,

on vas voir comment créer une ancre… en html, une ancre, c’est un lien qui vous amènera à un endroit précis de la page dans laquelle vous vous trouvez. Pour créer ce type de lien, nous utiliserons la balise… « a » du html, il faudra juste rajouter une petite chose, que nous allons voir tout de suite.

Mise en pratique

Pour créer ce type de lien, il vas nous falloir un code de base (je ne met que le contenu du « body » :

<div id="vide">

</div>

<div id="ancre">

</div>

Et le css:

#vide{width: 100%;
 height: 3000px;/*Une grande hauteur pour voir comment le lien vas interargir avec la page*/
 background: #000;
}
#ancre{height: 75px; 
width: 100%; 
background: red;
}

Maintenant, pour créer l’ancre à proprement parler, dans le « href » (<a href= ».. » title= »"></a>, vous mettrez le nom de la div à atteindre (ici, « ancre » après un # :

<a href="#ancre">Atteindre la div ancre</a>

<div id="vide">

</div>

<div id="ancre">
</div>

Et voilà, nous avons donc créer un lien ancre, cela peut vous permettre de réaliser des portfolios à une seule page, utiliser plus facilement le javascript etc…

A plus !

Découper un web design

Posted 679 jours ago · 8 Comments
site-waide-découpe

Salut à tous

Aujourd’hui, je vous présente le premier tuto d’une grande série: Créer son site web !(sisi!)

Je vous présente donc la vidéo, et vous donne le PSD utilisé, par la même occasion :

Ressource :

cliquez sur l’image pour télécharger le fichier psd
Je me permet juste de faire un petit rappel de ce que vous devez découper dans un design créer avec photoshop:
  • Les dégradés
  • Les ombres
  • Les lueurs
  • les images (fond, photosgraphies etc…
  • Et, plus généralement, tout ce qui n’est pas réalisable en html-css-Javascript !

Bon apprentissage !

Personnaliser l’interface de connexion de wordpress

Posted 694 jours ago · 6 Comments
wp

Bonjour tout le monde !

Aujourd’hui est un grand jour, mémoriser cette date, marquer là sur tout les murs: site-waide.fr accueil son premier tuto sur le codage !

Après ce départ pour le peu enthousiaste, abordons le sujet de ce tuto : Personnaliser la page wp-login de votre blog wordpress; En effet, on voit de plus en plus souvent des plugins fleurir sur le net vous proposant de personnaliser cette page ! Malheureusement, le code généré n’est pas toujours propre et nous ne pouvons pas personnaliser à l’extreme. Je vous propose donc de personnaliser cette page  manuellement.

Les previews ne sont pas « définitives », vous pourrez utiliser votre propre logo et votre propre fond !

Avant le tuto :

Après :

Deux petit « P.S »: 1) Je n’ai pas utilisé les mêmes sites, les plus attentifs auront remarqué que le premier est site-waide, et le deuxième, RockNweb ^^

2) Merci a designspartan pour l’idée de mettre des previews

1) Le bandeau

Tout en haut de la page, vous voyez un bandeau, bien que beau, certains voudront sûrement le changer, le modifier pour qu’il colle plus avec leur design. Pour cela, il y à plusieurs solutions :

  • La première consiste à intégrer ce bandeau directement sur le fond, que nous verront plus tard.
  • La deuxième, à le générer avec du code

Comme vous pouvez vous en doutez, nous allons utiliser la seconde

Donc, commençons!

Je précise que je ferais comme si vous utilisiez wamp et je partirai du disque C: et supposerais que votre installation wordpress se trouve dans le dossier wordpress

Donc, allez dans le fichier « C:\wamp\wordpress\wp-admin\css\login.css », chercher cela :

body{border-top-width: 30px; border-top-style:solid;}

Ceux qui connaissent un minimum le css et/ou l’anglais auront compris sur quoi nous allons toucher : Nous allons commencer par déterminer sa taille (30px) et, enfin, son type (solid). Je vous laisse changer la taille(=hauteur), mais je dois vous dire une petite chose pour le « border-top-style » : je vous conseil  de n’utiliser que la valeur solid, celle-ci étant un trait plein. Vous pouvez, autrement utiliser « dotted », qui vous fera un trait en pointillés.

Vous pouvez aussi changer la couleur (important :p) en cherchant la  propriété

body.login{border-top-color:#464646;}

dans le fichier  »C:\wamp\wordpress\wp-admin\css\colors-fresh.css », vous n’avez plus qu’a changer le code héxadécimal (#…..) par celui que vous voulez (Vous l’aurez pipeter auparavant dans votre logiciel préféré telle que photoshop, gimp etc….

2) Le logo

Le logo de cette page est un élément  primordial : Si vos utilisateurs voient cette page avec le logo de wordpress, cela ne fait pas très « pro »! Nous allons donc le changer.

Allez chercher le fichier   »C:\wamp\wordpress\wp-login.php » et chercher la ligne 81 ou faites ctrl+f et entrez « <div id= »login »><h1> ». Une fois que vous avez trouver la ligne, il vas vous falloir supprimer tout cela pour  pouvoir afficher votre propre logo :

<a href="<?php echo apply_filters('login_headerurl', 'http://wordpress.org/'); ?>" title="<?php echo apply_filters('login_headertitle', __('Powered by WordPress')); ?>"><?php bloginfo('name'); ?></a>

Je vais vous fournir le logo que nous allons utiliser, pour que vous ayez un « aperçu » de ce que cela rendra à la fin (et ça ne pénalisera pas ceux qui n’ont pas de logo :p)(oui, je ne me suis pas foulé ^^)

Donc, vous avez vu ce qu’il faut supprimer plus haut, vous n’avez plus qu’a rajouté le lien du logo avec un simple h1>img(Vous devez mettre vos images d’administration dans le dossier « C:\wamp\www\wordpress\wp-admin\images » (je suppose que vous avez appelez l’image « logo.png », vous mettez donc dans votre code:

<h1><img src="wp-admin/images/logo.png" alt="Logo de [nom du site]" /></h1>

(toujours dans la div login ).

Vous pourrez aussi ajuster sa position grâce à des margin .

Nous avons donc notre propre logo , passons au fond !

3) Le fond

Le fond, c’est (très) simple, si vous avez déjà essayé, vous avez naturellement dû appliquer un background-image a l’élément body dans le css, malheureusement, vous vous êtes retrouvé avec un grosse et moche bande blance en bas de la page. C’est tout bête, mais fallait y penser, et j’avoue avoir chercher un p’tit moment et même devoir retourner fouiller dans mes cours de débutant . Avant de renter dans le code, je vous passe le fond :

Donc, une fois téléchargé, mettez le dans le même dossier que le logo (images) et ouvrez le fichier « login.css ». Dans ce fichier, chercher la balise « html », c’est dans celle-ci que vous devrez inclure le fond d’écran; Un simple background comme ceci, et nous touchons à la fin :

html{background: url(../images/fond.png) #222120;}

Le code héxadécimal sert à indiquer quelle couleur utilisé lors de la répétition du fond ^^.

Vous voilà donc en possession d’une belle page de login wordpress, il reste le bloc de connexion, ça, c’est à vous de faire! =D, les seuls conseils que je vous donnerais sont:

  1. Pour ce type de recherche, de l’analyse de code, rien ne vaut firefox et firebug
  2. pour changer le style d’un input, utiliser la balise input[type=text] en css

Et voilà, à bientôt, n’hésitez pas à nous montrer ce que vous avez réaliser grâce au tuto

Edit: Sauvepui, dans les commentaires, m’a fait remarquer que dans la Version 3.01 de wordpress, le fichier à modifier est colors-fresh.css sur la première ligne.

Astuce CSS #3: bords arrondis

Posted 734 jours ago · 1 Comment
bords-arrondis

Bonjour, toujours dans la série des astuces CSS, je vous propose aujourd’hui une « technique » pour faire des bords arrondi sans images.

Cette technique utilise le CSS3, que IE(Internet Explorer) ne supporte pas.

Donc,  tout d’abord,  il vas nous falloir un code html de base ( je ne met pas le doctype, le html, le head et le body )

<div id="bloc">
Mon bloc
</div><

Ensuite, nous allons passer au CSS, mais avant, je voudrais juste vous faire remarquer un p’tit truc:  Dès que vous voulez utiliser une propriété CSS3, ça commence toujours par:  -lenomdumoteurderendu .

Mais, qu’est-ce qu’un moteur de rendu? Le moteur de rendu est le composant du navigateur qui fait en sorte d’afficher les éléments d’une certaine façon, et c’est bien ce point qui embête pas mal les web-designers et les web-developpeurs .Je m’explique:  le problème de ce cher IE par exemple,  qui ne supporte pas les propriétés CSS comme les autres navigateurs web, c’est à cause de son moteur de rendu (trident) qui ne tient pas compte des avancées faites en CSS .

Comme je suis de « bonne humeur », je vais vous faire une zolie petite liste de moteur de rendu, avec leurs navigateurs.

  • Gecko, le moteur de Firefox
  • Webkit, le moteur de google chrome et safari
  • Trident, moteur de IE et Flock
  • Presto, moteur d’Opera.

Maintenant, passons à notre astuce :

Le CSS:


#bloc{

border: 1px black solid; //Pour mieux remarque l'arrondi

-moz-border-radius: 10px; /* le degré d'arrondi en px, pour firefox*/

-webkit-border-radius: 10px; /* pour chrome et safari.*/

}

Voila, vous avez donc un bloc arrondi , mais, on peut « améliorer » ce système en donnant a la valeur quelle côté(s) arrondir(s):


-moz-border-radius: 5px 10px 0 5px;

ça donne dans l’ordre: top, right, bottom, left .

Il ya juste un problème avec webkit, la succession de valeurs ne marche pas, donc vous devez faire comme ça:


-webkit-border-top-right-radius: 10px; /*le bord haut droit*/

-webkit-border-top-left-radius: 10px;/*le bord haut gauche*/

-webkit-border-bottom-right-radius: 10px;/*le bord bas droit*/

-webkit-border-bottom-left-radius: 10px;/*le bord bas gauche*/

Voila donc, n’hésitez pas à faire des remarques/suggestions dans les commentaires

Astuces CSS #2 : Bordure avec un effet morph

Posted 739 jours ago · 5 Comments
miniature

Bonjour ! Aujourd’hui je vais vous apprendre a faire un effet simple mais très jolie ! Nous allons réaliser une bordure sur une image qui au passage de la souris changera de couleur avec un effet « Morph » ! Pour ça, nous allons utiliser le CSS3.

Continue Reading

Astuces CSS #1: le reset

Posted 761 jours ago · 5 Comments

Bonjour!

J’ai décidé de faire une « suite » d’articles dans laquelle vous apprendrez à mieux utiliser le css et le html (pour les curieux, une suite d’article PHP est prévu ) .

J’ai donc décidé de commencer avec une technique que j’utilise très souvent (pour ne pas dire tout le temps) : le reset CSS!

Tout d’abord, qu’est-ce que le reset css?

C’est une « technique » qui vous permet de remettre a zéro les paramètres du navigateur. C’est en fait un « morceau de code » que voici:


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
 text-align: center;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}

/* remember to define focus styles! */
:focus {
 outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: collapse;
 border-spacing: 0;
}

La technique en elle même.

Cette technique étant un morceau de code, il faut l’inclure, et il y a plusieurs façon (3 au total )!

Première technique:

Elle consiste à copier le CSS du reset dans le css principal:


/*Votre reset css*/

...

/*Votre css*/

...

Autant dire que je ne conseille pas du tout cette méthode!

Deuxième méthode:

Vous pouvez importer votre css dans le HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
 <head>
<link rel="stylesheet" href="style/style.css" type="text/css" />
<link rel="stylesheet" href="style/reset.css" type="text/css" /><!-- importation du reset !!! -->

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- la suite de votre code -->

celle-ci est pas mal, mais on verra comment l’améliorer plus bas.

La 3eme et dernière technique, l’import dans le css:


/*importation du reset*/

@import url(reset.css);

/* suite de votre css */

Voila, c’est cette dernière technique que je vous conseille, elle est plus simple à gérer, moins de feuille de styles à gérer, tout est inclus dans une seule

Optimisation

Alors, quand je dis optimisation, ce n’en est pas vraiment une, mais plutôt comment éviter d’avoir de mauvaises surprise sur IE6, IE7 et inférieur.

Comme, dans un souci de netteté et de  légèreté du site nous n’allons pas copier le reset dans le css, nous allons voir une petite astuce: les commentaires conditionnels

Je vais juste vous donner le code et l’expliquer, les commentaires conditionnels seront revus dans un autre article.

Donc, nous y voici:

Le problème est qu’IE6, IE7 et inférieur ne prenne pas en compte @import, nous devons donc faire en sorte que si c’est IE qui passe sur le site, le reset soit chargé dans le html, voici comment faire:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
 lang="fr">
 <head>
 <link rel="stylesheet" href="style/style.css" type="text/css" />

<!--[if gte IE 6]> <link rel="stylesheet" href="style/reset.css" type="text/css"
/> <![endif]--> <!-- importation du reset !!! -->

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"  /><!-- la suite de votre code -->

Voila donc, je conclus sur cette phrase: si vous avez une question, une remarque ou autre, postez un commentaire!

← Older Entries
Newer Entries →