Archive pour la catégorie ‘Développement’

09 juil

Développer en php en local et online plus simplement

6

Si comme moi vous développez un site en php pas trop complexe (ou pas, c’est selon) en local et que vous faites régulièrement des mises à jour en ligne, vous avez forcément ce problème (sauf si vous vous débrouillez autrement) : sur votre site en local (http://localhost/dossier/site…) vous spécifiez un chemin absolu dans vos appels de feuilles css, vos javascripts, vos images… ? Un truc semblable à :

<script src="/site/dossier/js/fonctions.js" type="text/javascript"></script>

Ce qui est très contraignant puisqu’il faut changer le chemin sans arrêt (sauf si le chemin sur votre serveur est le même, mais c’est très rare… !) en mettant des / au lieu du chemin absolu d’avant… Bref, une catastrophe si on ne connais pas de méthode pratique pour éviter cette corvée ! Vous pourriez bien faire une simple variable PHP en y mettant le chemin absolu, ce qui réduirait considérablement la tâche, mais j’ai une astuce encore plus commode !

Il suffit de récupérer l’adresse du serveur et de la stocker dans une variable, c’est bête, mais il fallait y penser ! L’astuce est très simple : on définie la variable $server avec l’adresse du serveur, si celle-ci est égale à localhost (cas général) ou mamp (si vous avez changé le nom de votre localhost par exemple) on créer une variable valant le chemin absolu que l’on souhaite afficher en local. Sinon, le chemin absolu sera /, c’est à dire, à la racine, ce qui est généralement le cas des sites publiés online.

Un petit plus consiste à définir en même temps l’adresse des images, en reprenant le chemin du site et en y intégrant tout simplement le chemin où les images sont stockées… !

<?php
   $server = $_SERVER['HTTP_HOST'];
   $server = $server[0];
   // $server = explode(':',$_SERVER['HTTP_HOST']);
   // La ligne ci dessus contient un explode pour les utilisateurs de MAMP sous Mac, où l'adresse locale est localhost:8888 par défaut.
 
   if ($server == 'localhost' or $srv == 'mamp') {
      $path = '/site/dossier/';
   }
   else {
      $path = '/';
   }
   $pathImg = $path.'img/';
?>

Ce code est tel que je l’utilise. Bien entendu, pour qu’il convienne à votre cas de figure, il vous faudra modifier les chemins et le nom du localhost si il est différent. Ensuite, et c’est là que c’est un peu contraignant par contre, on insère les chemins définis plus haut, mais sans se soucier du chemin ! Voici quelques exemples, respectivement, une feuille de style css, un fichier javascript, une image et un lien.

<link rel="stylesheet" type="text/css" href="<?php echo $path; ?>style.css" media="screen" />
<script src="<?php echo $path; ?>" type="text/javascript"></script>
<img src="<?php echo $pathImg; ?>image.jpg" alt="" />
<a title="Ma page" href="<?php echo $path; ?>page.html">Contenu du lien</a>

A vous d’être créatif et malin pour rendre cette fonction encore plus pratique, peut-être en spécifiant une variable pour le css, le javascript etc !

Par Flayks le 9 juillet 09 à 11:07

08 juil

Des outils CSS bien pratiques !

1

Après une petite initiation à jQuery, voici quelques ressources CSS bien commodes lorsque l’on fait de l’intégration (ou du développement, c’est au choix). On a toujours besoin d’optimiser son code, de savoir si le code que l’on produit est valide sur tous les navigateurs, ce qui pose problème dans le code actuel… Parmi quelques nombreux sites similaires, je vous propose quelques outils assez indispensables :

csspropertiesindex

CSS Properties Index — Une véritable mine d’or pour en savoir plus sur les compatibilités entre les versions CSS (en sachant telle version de tel navigateur introduit telle version de CSS (1, 2, 2.1, 3…), vous saurez les compatibilités entre les navigateurs) ! Vous aurez en un clin d’œil (et en un paquet de temps à charger la page aussi) quelle propriété CSS va avec quelle version !

csscompressor

CSS Compressor (Avancé) — Un outil à utiliser sans modération, puisqu’il réduira et optimisera un minimum votre code css jusqu’à une lisibilité définie. Pour ma part je m’en suis servi de nombreuses fois pour supprimer des espaces près de de fermetures d’accolades ou pour uniformiser les /* commentaires */, par exemple. Depuis, j’ai acquis cette convention de programmation, et je ne m’en sers presque plus, mais il est bien utile et rend beaucoup de services !

cleancss

Clean CSS — Un autre outil similaire à celui cité plus haut, qui permettra d’approfondir dans l’optimisation du code css. L’utiliser avec précaution tout de même, sans quoi vous ne sauriez pas ce qui à posé problème lors de l’opération… Regardez bien le descriptif généré !

Reset CSS

Reset CSS — On ne le présente plus, le reset CSS d’Eric Meyer permet de régler un tas de problèmes d’affichage. Ce n’est pas forcément un « outil » proprement dit, mais, comme le dit Eric Meyer, une « remise à zero » (reset) du style css de la page par défaut. Généralement (ce n’est pas le cas de tout le monde évidemment), quand on fais de l’intégration, on annule tous l’affichage de son code HTML à la volée (par exemple) :

*{margin:0; padding:0;}

Le reset CSS permet de partir sur une bonne base, où d’emblée, tous les éléments, selon les navigateurs, s’afficheront (plus ou moins bien) à l’identique : ce n’est pas le cas natif des navigateurs (Internet Explorer 7 n’affiche pas de la même façon une balise <pre></pre> que sous Opéra ou Firefox, voir même Safari). Il suffit donc de lier la feuille de style à votre page html comme ceci :

<link rel="stylesheet" type="text/css" href="reset.css" />
 
ou
 
@import url(reset.css);

C’est un choix à faire quand on intègre, mais pour ma part je l’insère d’office dans mes intégrations CSS, par sureté de produire un projet plus ou moins bien débuté, et par rapidité ! On insère la feuille de style et on passe directement à la suite sans se soucier du reste !
Il faut noter que ce n’est pas un produit miracle ! Ça ne règlera pas tous les problèmes de compatibilités entre les navigateurs, mais ça apportera une grande aide et un gain de temps non négligeable (pour quelques kilos) !

Par Flayks le 8 juillet 09 à 10:07

04 juil

Petite introduction à jQuery

0

jQuery

Pour démarrer Dev’nsound, je propose un billet plus ou moins technique. Vous vous en douterez (au vu de l’image ci-dessus), je vais parler de la célèbre et extrêmement puissante -pour un poids minime-, jQuery ! De part la simplicité du code produit et la facilité à apprendre, la librairie javascript jQuery connait un fort succès. Mais il est bien beau de la connaître et savoir ce qu’elle fait, il faut aussi des ressources, pour pousser plus loin sa créativité et ses fonctionnalités.

Je vous propose donc plusieurs sites de ressources, à savoir :

  • jQuery Style — Un merveilleux site sous forme de galerie de sites utilisant jQuery, avec le type de fonctionnalité utilisée, une capture d’écran et un lien vers le site concerné. Une excellente source d’inspiration pour ceux et celles qui ne savent pas trop comment rendre interactif son site, ou tout simplement être curieux et voir les différentes techniques d’utilisation.
  • UseJquery — Un peu comme son camarade d’en haut, une autre galerie de site (showcase) mais cette fois ci avec des options déjà plus intéressantes. En effet, il indique la liste des plugins éventuels utilisés pour réaliser les effets produits sur les sites, propose de voir le nombre de lignes présentes dans le code source javascript utilisé par jQuery et même, consulter la source du code utilisé, afin de ne pas chercher le ou les fichiers utilisés sur le site.
  • jQuery List — jQuery List rentre plus dans le cœur du problème en listant un nombre considérable de plugins développés par des contributeurs externes. Nous aurons droit à plus de 200 plugins comme des slideshows, des slides, des rollovers, des formulaires, des systèmes de vote, des onglets, des infobulles, des bords arrondis… Une véritable mine d’or pour les plugins jQuery ! C’est aussi une très bonne solution pour avoir un aperçu rapide de ce qu’on peut faire avec jQuery : à peut prêt tout.
  • jQuery sur Delicious – Le simple fait de chercher sur Delicious le tag jQuery vous offrira une source de liens, de plugins et de tout un tas de choses. Un bon départ pour s’initier à la librairie, soit plus de 700 000+ liens bookmarkés !

Sans pousser dans l’initiation à jQuery, voici un exemple d’événement jQuery.

$(document).ready(function(){ // On vérifie que jQuery est bien chargé
 
 $('a.link').click(function(){
 //Si on clique sur un lien de classe "link"
 
 $(this).animate({marginTop:'15px', marginLeft:'8px'}, 600).fadeTo(1200, 0.25)
 //On fait une translation pendant 0,6sc, puis un fondu vers une opacité de 0,25% pendant 1,2sc
 return false; // On annule le lien vide
 
 });
 // On clôt l'évènement
});
// On clôt le tout

Demo

Mon exemple n’est pas complexe, mais vous remarquerez qu’avec seulement ~55ko de javascript et quelques lignes de code, on peut produire des effets très simplement !

Je sens déjà que vous aimez… ou que vous allez aimer ! Ce premier billet n’est qu’une introduction au parcours que le blog aura concernant jQuery, étant donné que je suis le premier fan de ce blog à aimer, utiliser, et développer (avec)  cette librairie. Bien entendu, si vous voulez vous informer un peu plus sur le propos, je vous invite à consulter le (très beau) site officiel, qui liste plugins, démos, bugs, documentation complète, blog, forums… etc !

Par Flayks le 4 juillet 09 à 13:07