Archive pour la catégorie 'Code'
Quelques tips en CSS
Mardi 23 mars 2010Bonjour, aujourd'hui je vous ai préparé un article sur le CSS (Cascading Style Sheet).
3 méthodes pour ajouter le CSS dans vos pages :
En inline qui consiste a ajouter le CSS directement dans vos balises HTML (pas propre mais utile pour faire des tests rapides)
<a href="http://www.point2zero.net" style="font-size:1.2em;">Point2Zero</a>
Avec le CSS entre les balises <head> et du type :
<html> <head> <title>Ma Page Web</title> <style type="text/css"> /* Votre css ici */ </style> </head> ...
Ou en utilisant une feuille de style externe par exemple : style.css que l'on inclus dans notre <head> soit avec :
<html> <head> <title>Ma Page Web</title> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> </head> ...
Ou avec ce code :
<html> <head> <title>Ma Page Web</title> <style type="text/css" media="all"> @import "style.css"; </style> </head> ...
Comment centrer un élément dans une page web en CSS ?
Nous avons une page web avec une balise <div> qui se trouve dans la balise <body>. Le but étant de centrer la balise <div> quoi qu'il se passe.
Dans un premier temps nous allons ajouter des "background" a nos balises <body> et <div> pour les différencier.
Mettre la balise <body> avec un fond gris #AAA et la balise <div> avec un fond blanc #FFF.
body{
background-color:#AAA;
}
div{
background-color:#FFF;
}
Jusque là rien de trés difficile. Maintenant ajoutons une taille à notre <div> pour pouvoir le centrer en fonction de sa taille.
body{
background-color:#AAA;
}
div{
background-color:#FFF;
width:960px;
}
Et ajoutons une marge sur notre <div>
body{
background-color:#AAA;
}
div{
background-color:#FFF;
margin:0 auto;
width:960px;
}
Petite explication : j'utilise un racourcis pour la marge. Normalement j'aurai du faire :
margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;
Le racourci permet d'écrire beaucoup moins de texte (chargement plus rapide, css moins lourd etc...).
J'ai une margin en haut et en bas à 0 donc pas de marge et a gauche et a droite en auto. Donc en fonction de la place disponible à droite et a gauche de l'élément il centrera le contenu.
Autres choses :
- Triez les propriétés dans l'ordre alphabétique.
- N'indiquez pas l'unité quand la valeur est 0. 0px = 0% = 0 
Avant :
body{
border:0px;
margin:0%;
padding:0;
background:#FFF;
outline:0;
}
Apres :
body{
background:#FFF;
border:0;
margin:0;
padding:0;
outline:0;
}
Facile non ?
Voici quelques liens de Framework CSS pour construire vos pages facilement :
- 960grid.
- Elasticss.
IE6 meurt petit a petit...
Lundi 15 mars 2010Depuis Janvier 2010 j'avais annoncé que je ne faisait plus de developpement pour IE6.
Car il y a 2 nouvelles versions du navigateur :
- la 7 sortie depuis maintenant 3 ans et 6 mois.
- la 8 sortie depuis bientôt 9 mois.
Pourquoi de plus en plus de sites apparaissent contre la version 6 du navigateur de Microsoft ? Le navigateur ne supporte pas les PNG avec de la transparence, les feuilles de styles CSS doivent contenir des hacks ou etre completement réécrite pour ce navigateur. La tâche n'est pas si simple pour un developpeur web. Une solution existe en jQuery pour proposer la mise à jour du navigateur a vos visiteurs : ie6update. Ce site propose d'ajouter un code jQuery sur votre site qui affichera (comme l'affichage d'un direct x ou autre) une barre en haut du navigateur disant que celui-ci n'est pas à jour.
D'autres sites tel que ie6nomore ou ripie6 l'ajoute au coté du défunt Nescape.
Microsoft aretera le support de son navigateur le 13 juillet prochain vous pouvez suivre le décompte sur isie6dead.
En attendant j'ajoute souvent le script proposé par ie6update.com 
Le Fieldset peut être utile en jQuery
Samedi 13 mars 2010Pendant mes cours de xHTML, CSS, Javascript cette semaine j'ai expliqué l'utilisation de la balise html fieldset.
J'utilise un plugin jQuery qui permet grâce à l'utilisation des balises fieldset d'avoir un formulaire qu'on remplis pas à pas.
Prenons un exemple de code tel que :
<!-- N'oubliez pas d'ajouter ici le doctype et les balises html, head etc... -->
<body>
<div id="page">
<form action="submit.php" method="post">
<fieldset>
<legend>Informations Personnelles :</legend>
<label for="nom">Nom :</label>
<input id="nom" name="nom" type="text" />
<label for="prenom">Prénom :</label>
<input id="prenom" name="prenom" type="text" />
<label for="sexe">Sexe :</label>
<input id="sexem" name="sexe" type="radio" value="m" />M
<input id="sexef" name="sexe" type="radio" value="f" />F
</fieldset>
<fieldset>
<legend>Domicile :</legend><label for="adresse">Adresse :</label>
<textarea id="adresse" cols="50" rows="3" name="adresse"></textarea>
<label for="cp">Code Postal :</label>
<input id="cp" name="cp" type="text" />
<label for="ville">Ville :</label>
<input id="ville" name="ville" type="text" />
</fieldset>
<fieldset>
<legend>Compte :</legend>
<label for="identifiant">Identifiant :</label>
<input id="identifiant" name="identifiant" type="text" />
<label for="mdp">Mot de passe :</label>
<input id="mdp" name="mdp" type="password" />
<label for="confirm">Confirmation :</label>
<input id="confirm" name="confirm" type="password" />
</fieldset>
<p>
<input id="submit" name="submit" type="submit" value="Envoyer" />
</p>
</form>
</div>
</body>
</html>
Les trois parties du formulaire : Informations Personnelles, Domicile et Compte seront découpé en 3 étapes sur 3 pages avec une navigation "etape précédente" et "étape suivante".
L'utilisateur peut donc voir qu'il y a 3 étapes pour valider le formulaire, je trouve que le formulaire est plus clair quand il est fait étape par étape.
Voir la démo. Télécharger le plugin.
Pour en savoir plus rendez vous sur la page FormToWizard plugin
Quelques plugins jQuery utiles
Dimanche 24 janvier 2010Voici trois plugin jQuery que j'utilise relativement souvent :
- Time ago
Permet de modifier un timestamp en : "Il y a 4 minutes" ou "Il y a 8 jours", "Il y a un mois" comme ce qu'on peut voir dans les timeline de Twitter ou Facebook.
- jQuery Validation
Permet la validation des champs d'un formulaire avant d'être envoyé.
- jCrop
Permet de retailler une image sur un site internet. J'avais fait ce genre de code en javascript + php (sur le site de Live9 pour l'envoi des pochettes) avant de trouver ce plugin jQuery.
N'hésitez pas a partager vous aussi les différents plugins que vous utilisez régulièrement.
Envoi de mail avec CodeIgniter plain/text [edit ET text/html]
Lundi 4 janvier 2010Nous allons aujourd'hui envoyer un mail grâce à CodeIgniter.
Pour cela il faut créer un fichier email.php dans le répertoire application/config/
Dans ce fichier plusieurs méthodes pour envoyer un mail soit via "mail", "sendmail" ou via "smtp".
Nous allons utiliser un compte mail donc le SMTP.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
$config['protocol'] = 'smtp';
$config['smtp_host'] = 'smtp.domaine.com';
$config['smtp_port'] = 25;
$config['smtp_user'] = 'mail@domaine.com';
$config['smtp_pass'] = 'motdepasseducomptemail';
Créer ensuite un contrôleur par exemple controllers/home.php
Dans votre home vous allez créer la méthode "send" qui permet l'envoi du mail.
<?php
class Home extends Controller {
function Home()
{
parent::Controller();
}
function index()
{
// On charge la vue index
$this->load->view('index');
}
function mail()
{
$this->load->library('email');
$this->email->set_newline("\r\n");
$this->email->from('email@domaine.com', 'Prénom NOM');
$this->email->to('destinataire@domaine.com');
$this->email->subject('Titre du mail');
$this->email->message('Contenu du mail.');
if($this->email->send()) {
echo 'E-mail envoyé !';
} else {
echo 'Oup\'s ! Il y a eu un soucis lors de l\'envoi !';
}
}
}
Ce code fonctionne parfaitement en "plain/text".
Pour envoyer un mail au format html modifier votre fichier config/email.php :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
// Ajout du format html (mail en html)
$config['mailtype'] = 'html';
// Ajout de l'encodage du mail
$config['charset'] = 'iso-8859-1';
$config['protocol'] = 'smtp';
$config['smtp_host'] = 'smtp.domaine.com';
$config['smtp_port'] = 25;
$config['smtp_user'] = 'mail@domaine.com';
$config['smtp_pass'] = 'motdepasseducomptemail';
Et dans votre contrôleur modifier le contenu du message par un contenu avec des balises html comme ceci par exemple :
$this->email->message('<p>Contenu du mail <b>en gras</b>.</p>');
Impossible pour nous d'envoyer un mail au format HTML avec CodeIgniter pour l'instant !
J'ai laissé un message sur le forum de Code Igniter pour voir si ça vient pas du framework directement ou moi qui ai mal compris un truc
Edit : Il fallait ajouter le type d'encodage du mail pour pouvoir envoyer au format HTML
Nouveautés 2010 !
Vendredi 1 janvier 2010Cette année quelques choses changeront :
Le support d'IE6 ne sera plus pris en compte quel que soit le projet. Internet Explorer 7 et 8 étant en place depuis déjà pas mal de temps.
Dates de sortie :
- Le 18 Octobre 2006 pour Internet Explorer 7 (soit 3ans et 3mois)
- Le 11 Juin 2009 pour Internet Explorer 8 (soit 6mois)
Il est donc temps je pense d'abandonner Internet Explorer 6 qui a eu 8ans en Octobre dernier !
Sur le blog faire de plus en plus d'articles techniques sur des frameworks tel que : jQuery et CodeIgniter et des tips sur CSS3...
Et d'autres points sur lesquels nous travaillons : le développement d'applications (pc, mac, mobile), d'interfaces et de site web, l'hébergement, l'infogérance, la téléphonie et les cours également (les cours de développement d'application Twitter, Facebook, jQuery etc...).
Dans les cartons pour le début de l'année la sortie d'un Scheduler Radio !
N'hésitez pas a prendre contact avec nous si vous avez des questions ou besoin d'informations.
Meilleurs Vœux pour l'année 2010 !
jQuery + CodeIgniter + Référencement
Jeudi 31 décembre 2009Sur un site j'utilise CodeIgniter et un plug in jQuery pour la navigation (sans recharger tout le contenu).
La navigation comme ça c'est bien mais ça ne fonctionne pas partout et pour le référencement c'est pas terrible.
Donc je vais vous expliquer les différentes modifications que j'ai fait dans mon code source de base pour pouvoir référencer correctement le site avec la navigation en "AJAX".
Dans un premier temps j'ai utiliser le Framework PHP CodeIgniter : http://www.codeigniter.com
Ensuite j'ai téléchargé la librairie jQuery : http://www.jQuery.com ainsi que le plugin jQuery.History disponible ici : http://www.mikage.to/jquery/jquery_history.html
Par défaut les adresses de Code Igniter sont du genre : /index.php/class/méthode etc... ce qui est vraiment pas optimum pour le référencement j'ai donc décidé de supprimer le "index.php/" pour cela j'utilise un fichier .htaccess avec les paramètres suivants :
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php?/$1 [L]
Ce qui me permet d'avoir : /accueil/login à la place de : /index.php/accueil/login
Ou d'avoir /accueil à la place de : /index.php/accueil
J'ai créer dans /application/controllers un contrôleur que j'ai nommé "page". Ce contrôleur appellera la page demandé avec un header et un footer.
class Page extends Controller {
function Page()
{
parent::Controller();
}
function index()
{
// Charge la page : /application/views/accueil.php
$data['main_content'] = 'accueil';
$this->load->view('includes/template', $data);
}
function contact()
{
// Charge la page : /application/views/contact.php
$data['main_content'] = 'contact';
$this->load->view('includes/template', $data);
}
}
Ensuite dans le dossier /application/views j'ai un dossier "includes" qui contient :
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> </head> <body>
template.php
// Header du site
<?php $this->load->view('includes/header'); ?>
// Vue chargé par la variable $main_content
<?php $this->load->view($main_content); ?>
// Footer du site
<?php $this->load->view('includes/footer'); ?>
footer.php
</body> </html>
Ajouter dans votre htaccess une ligne par page que vous voulez créer à noté on appel toujours "page" qui est notre contrôleur et "accueil" qui est notre méthode
RewriteRule ^accueil$ /index.php/page/accueil/ [L] RewriteRule ^contact$ /index.php/page/contact/ [L]
Donc on peut créer un menu dans /application/views/includes/header.php
<div id="navigation">
<ul>
<li><a href="/accueil">Accueil</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
Ce menu fonctionnera parfaitement avec tous les navigateurs par contre il rechargera a chaque fois tous les éléments : header.php template.php et footer.php
Pour ne pas recharger a chaque fois tous les éléments on peut utilise le plugin jQuery.History. Ce plug in fonctionne avec des liens avec l'attribut rel="history" et avec des ancres donc des liens avec des #page etc...
J'ai donc fait un petit code en jQuery qui modifie le menu précédent par le code :
<div id="navigation">
<ul>
<li><a rel="history" href="#accueil">Accueil</a></li>
<li><a rel="history" href="#contact">Contact</a></li>
</ul>
</div>
Le script jQuery qui permet de modifier le menu a la volée est le suivant :
$(document).ready(function() {
/* Pour chaque element a qui se trouve dans un li dans un ul dans un element id="navigation" */
$("#navigation ul li a").each(function(){
/* On recupere le href et on coupe le slash */
var ancre = $(this).attr("href").split('/');
/* On ajoute l'attribut rel avec la valeur history */
$(this).attr("rel","history");
/* On modifie l'attribut href par le nouveau avec le # a la place du slash */
$(this).attr("href","#" + ancre[1]);
});
});
Si le navigateur accepte jQuery et le Javascript alors les liens seront de la forme #lien et chargé grâce au plugin jQuery History sinon les liens seront de la forme /lien
A l'an prochain bon réveillon
CodeIgniter
Dimanche 20 décembre 2009Depuis quelques temps je me suis mis à utiliser CodeIgniter, un framework PHP.
Pour utiliser CodeIgniter vous devez avoir :
- PHP version 4.3.2 ou supérieur.
- Une base de donnée (optionnel) mais utile lors de la création d'applications ou de sites web tel que : MySQL 4.1 ou supérieur, MySQLi, MS SQL, Postgres, Oracle, SQLite, ou ODBC.
Pour utiliser CodeIgniter télécharger la dernière version sur le site officiel. (Actuellement c'est la version : 1.7.2)
Ensuite décompressez les fichiers et placez les dans le répertoire de votre serveur web. Puis ouvrir le fichier de configuration qui se trouve dans application/config/config.php avec un éditeur de texte pour définir l'url de base de votre site. Vous pouvez également définir votre clé de chiffrement pour vos sessions.
Si vous voulez utiliser les bases de données éditer également le fichier application/config/database.php et définir les différents paramètres de connexion à votre base.
CodeIgniter utilise le modèle MVC "Model View Controler" et il est sous licence BSD.
Je vous invite a voir les différents Cheasheets qui vous permettrons de vous y retrouver au début, ainsi que d'utiliser la documentation disponible en ligne.
Pour commencer également n'hésitez pas a faire un tour dans la rubrique "VideoTutorial" pour voir des tutoriels (dont un qui permet la création d'un blog).
N'hésitez pas a ajouter des commentaires si vous avez des questions ou nous contacter via twitter @point2zero à bientôt !
Protéger un répertoire grâce à un htaccess
Mercredi 4 novembre 2009Aujourd'hui j'ai voulu protéger un répertoire grâce a un fichier htaccess.
Il y a des centaines de sites qui indiquent comment faire ça de façon simple "créer votre fichier .htpasswd, coller ceci, créer votre htaccess et coller ceci..."
Je créer très souvent des fichiers htaccess / htpasswd de la manière suivante (en ligne de commande) :
Pour savoir ou je me trouve par rapport a la racine de mon serveur j'utilise "pwd" :
$ pwd /home/sites/www.point2zero.net/exemples
Ensuite je créer mon fichier .htaccess
$ vi .htaccess
Dedans j'ajoute (grâce à la touche i pour passer en mode insertion) :
AuthName "Point2Zero" AuthType Basic AuthUserFile "/home/sites/www.point2zero.net/exemples/.htpasswd" Require valid-user
Le texte de la première ligne sera le message affiché dans ma fenêtre de login.
Dans le AuthUserFile nous allons spécifier le chemin (grâce a la commande précédente pwd) et nous ajoutons à la fin un /.htpasswd qui sera le fichier avec les identifiant et mot de passe.
Sauvez et quitter votre fichier grâce à ":wq"
Maintenant créons le fichier ".htpasswd" grâce à la commande htpasswd :
$ htpasswd -bcm .htpasswd login p4ssw0rd
Détail de la commande :
l'option "b" : permet d'utiliser un fichier pour sauvegarder les informations
l'option "c" : permet de créer le fichier (a enlever lors du 2eme ajout si on veut ajouter plusieurs utilisateurs dans le même fichier)
l'option "m" : permet d'encrypter le mot de passe en MD5
ensuite on indique le fichier, le login et le mot de passe.
Voilà vous savez maintenant sécuriser un dossier grâce à deux fichier htaccess et htpasswd !
Débuter avec Vi, Vim, Gvim
Samedi 24 octobre 2009Certaines personnes savent que j'utilise très souvent l'éditeur de texte Vim.
Cet éditeur très puissant (a mon goût) permet de faire tout un tas de choses, sur divers systèmes d'exploitations (Windows, Linux, Mac Os...).
Au début, l'utilisation n'est pas facile mais au fil du temps, on peut se retrouver a faire du copier coller de certains fichier dans d'autres dans une fenêtre (en ssh par exemple).
Facilement on peut "découper" notre fenêtre en deux par exemple l'une au dessus de l'autre avec la commande ":new"
Pour la "découper" dans l'autre sens pour en avoir deux l'une a côté de l'autre il suffit d'utiliser la commande ":vsplit"
Avec la commande ":vsplit" si un fichier est déjà ouvert il sera ouvert deux fois, tandis qu'avec la commande ":new" une fenêtre vide sera créé.
Pour ouvrir un fichier dans une des fenêtre vide il suffit d'utiliser ":e chemin/fichier" par exemple ":e /home/choiz/fichier.txt".
Pour passer d'une fenêtre a une autre utilisez "ctrl + w, w" ou "ctrl + w, une flèche" pour désigner la fenêtre du haut du bas droite ou gauche.
Pour fermer une fenêtre allez dans celle-ci et utiliser ":q" ou ":wq" si vous voulez sauvegarder le fichier
Plus d'informations sur "le guide de survie VI" et n'hésitez pas a télécharger et ajouter mon fichier de configuration .vimrc à la racine du répertoire utilisateur par exemple /home/choiz
