Overblog Suivre ce blog
Administration Créer mon blog
8 mars 2012 4 08 /03 /mars /2012 17:04

 

http://www.scyvius.com/14-62-large/installation-prestashop.jpg

 

Il est possible qu'avec la dernière version (1.4.7.0) de Prestashop le Panier ait un soucis. Enfin c'est principalement l'Ajax qui a un problème.

 

Il vous est, comme ça l'était pour moi, impossible d'ajouter un produit dans le panier ? La solution est simple.

 

Dans le fichier de classe classes/FrontController.php, il vous suffit de remplacer cette ligne :
'content_dir' => $protocol_content.Tools::getServerName()._PS_BASE_URI_,

Par celle-ci :
'content_dir' => $protocol_content.Tools::getHttpHost()._PS_BASE_URI_,

 

En gros cette méthode allait chercher le nom du serveur, qui n'est parfois pas forcément le chemin tout à fait exact. ALors que la méthode getHttpHost() va elle chercher l'adresse exact de l'host. 

 

 

Par exemple, mon serveur WAMP tourne sur le port 81 (j'ai un serveur IIS qui fonctionne également à côté, voilà pourquoi). Du coup l'adresse renvoyée était http://localhost/ plutôt que http://localhost:81/ forcément mon Ajax retournait une erreur due au fait qu'il ne trouvait pas le fichier correspondant :).

Repost 0
Published by AtChA - dans Programmation
commenter cet article
23 janvier 2012 1 23 /01 /janvier /2012 11:43

 

Bien le bonjour chers lecteurs.

 

Ce billet est spécialement dédié aux petits Web Designer que nous sommes.

 

Dans notre quête habituelle de design non-convetionnels, de créativité et autres détails graphiques, il m'arrive souvent d'être attiré par des  fonds transparents contenant du texte quant à lui opaque.

 

Etant dans une optique d'optimisation des performances Web, j'en arrive souvent a essayer d'éviter les PNG (les images sont la sources la plus importante de chargement des pages). 

 

Je viens donc en cette fin de matinée vous apporter une petite solution pour créer des fonds transparents avec l'aide de mon ami CSS.

 

Here we are !

 

 

 .alpha60 {
/* Si le navigateur ne supporte pas le RGBa */
background-color: rgb(0, 0, 0);
/* RGBa avec une opacité de 0.6 */
background-color: rgba(0, 0, 0, 0.6);
/* Pour IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* Pour IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

 

Voila ce que ça donne au passage de ma souris sur un produit :

 

Exemple background opacity mouse outexemple_background_opacity

 

Bien sur vous allez me dire, "Mais IE7 !". Et oui ! Effectivement cela ne fonctionnera pas sur IE7 à mon grand regret.


Mais j'ai envie de vous dire ! D'une part IE7 perd de la part de marché, une bonne partie étant transférée vers I8 voir 9 et de deux, si on veut que ça évolue, il faut bien obliger l'utilisateur à changer ses habitudes :).


Repost 0
Published by AtChA - dans Programmation
commenter cet article
8 juin 2011 3 08 /06 /juin /2011 20:03

http://t2.gstatic.com/images?q=tbn:ANd9GcR25lkVDvLcB6pF_X057xIalEJbbLUm5iZvF_zSsOOsWEDqON3Yxw

 

Il est encore en développement, mais vu qu'il commence à ressembler à quelque chose et vu qu'il est déjà fonctionnel, je vous le mets en démo et en download afin que vous puissiez vous faire une idée.

 

PlugIn SlideShowImg :

 

Il va vous servir à faire bouger une image à l'intérieur d'une div.

 

Pour celà rien de plus simple.

 

Explications :

 

  • - commençons d'abord par l'html :

 

 

<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">

    <meta charset="utf-8">

    <title>Plugin Slideshowimg</title>

    <link rel="stylesheet" href="css/styles.css" type="text/css">

    <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>

    <script type="text/javascript" src="js/slideshowimg.js"></script>

    <script type="text/javascript" src="js/scripts.js"></script>

    <section id="wrapper">

        <header><h1>Plugin Slideshowimg</h1></header>

        <article>

                <div id="slideimg">

                    <img src="img/image_slider_2.jpg" alt="img2"/>

                </div>

        </article>

    </section>

</html>

 

 

Il vous suffit de mettre l'image à faire bouger (slider) dans une div qui a une id.

 

  • - Deuxième étape le javascript :

 

 

$(document).ready(function(){

    $("#slideimg").slideshowimg({direction:"left"});

});

 

 

Il faut appeller dans votre page html votre script jquery et celui du plugin (voir en rouge plus haut).

Dans votre script il vous suffit d'appeller la fonction slideshowimg() sur votre div #slideimg créée précédement.

 

Les options du plugin :

 

Elles sont peu nombreuses pour l'instant vu que j'ai juste commencé à travailler dessus.

 

 

- width (définit la largeur d'affichage), 200 automatique (en px) ;

- height (définit la hauteur d'affichage), 200 automatique (en px)  ;

- tempoBefore  (définit le temps pour le premier passage de l'image), 5000 automatique (en ms) ;

- tempoAfter (définit le temps pour le retour de l'image), 5000 automatique (en ms) ;

- direction (définit la direction de défilement de l'image).

 

 

Améliorations futures possibles : 

 

- Ajout d'un paramètre position, effectuera surement soit un centrage de l'image en fonction de la direction soit un crop de l'image ;

- Ajout d'une div de description de l'image (facultative bien évidemment) qui sera soit bloqué soit s'affichera au passage de la souris ;

- Ajout d'une gestion multi-images ;

- Ajout d'une gestion de différents easing (effets de transitions).

 

 

démo et download

Repost 0
Published by AtChA - dans Programmation
commenter cet article
3 juin 2011 5 03 /06 /juin /2011 21:34

Hiérarchisation de l'information :

Bon la semaine dernière on a vu la première étape de la création. L'analyse des besoins, la recherche d'idées, l'organisation de celles-ci et le classement par thèmes.

 

Il est important à présent d'organiser les différents thèmes de façons hiérarchisée.

Il faut donc définir des rubriques principales :

 

  • - Chacun des thèmes représentera une rubrique du site et chacune de ces rubriques doit contenir assez d'informations pour pouvoir être disposées de façons logique sur des pages inférieures.

 

  • - Il faut également hiérarchiser les informations à l'intérieur des rubriques principales, chaque groupe représentera une sous-rubrique. Faites tout de même attention à ne pas avoir trop de sous-rubriques (max six ou sept je pense).

 

On appel cette hiérarchisation une arborescence. Retenez bien ce nom, il est partout quand on commence à travailler dans le média numérique.

Vous devez élaborer cette arborescence en vous basant sur les informations receuillies précédemment sur la cilbe (l'utilisateur, client potentiel). Il faut être logique, soit vous suivez le sens de lecture, soit vous avez un but dans la façons de placer vos menu etc. Le but étant de guider l'utilisateur où bon vous semble.

 

Une chose importante (c'est de la théorie hein, mais bon), il est bien de respecter la règle des trois clicks. Effectivement, je ne pense pas que vous et moi restions très longtemps sur un site où il faut passer par trois pages différentes pour trouver les informations.

 

Création de votre arborescence :

 

L'arborescence est donc un schéma simple qui va donner la forme de votre site. C'est un peu comme un plan à suivre.

 

Maintenant qu'on est à cette étape. Prenez une feuille de papier et faites le schéma le plus logique possible en suivant les rêgles énoncées ci-dessous.

 

  • - Niveau 1 : Le sommet de votre hiérarchie commence par la page d'accueil.
  • - Niveau 2 : Présentation vos rubriques principales d'une manière générale et un sommaire interne à la rubrique. Ce sont des pages d'orientation.
  • - Niveau 3 : Présentation détaillée de vos rubriques principales. Ces sous-rubriques sont exclusivement des pages d'informations.
  • - Niveau 4 : Présentation des sous-sous-rubriques. A prévoir si les pages de niveau 3 sont trop denses en informations.

Vous pouvez également mettre les différents modules qui seront présents sur la page d'accueil au niveau 1.

 

Vous êtes un peu perdu ? Bon ok je vais imager tout ça.

Prenons l'exemple d'une galerie d'art :

 

arborescence-copie-1.jpg

 

Posez-vous un peu à présent et réfléchissez à ce que penserait l'utilisateur ou à ce qu'il voudrait. Par exemple il est peut être bien d'avoir l'accès au contact dès la page d'accueil. Vous pouvez donc mettre en place d'autres liens sur la page d'accueil.

Sachez qu'il est important d'être près à remanier assez régulièrement cette arborescence en fonction de différents facteurs, le client et oui c'est quand même lui qui décide, vous même, ça arrive souvent de changer d'idée et de trouver que ce placement est meilleur qu'un autre etc, les autres, et oui les autres ont la capacités de vous faire changer d'avis (et c'est souvent pas plus mal) car ils ont une vision différente de la votre.
Tout ça pour dire que vous pouvez rajouter des liens, mais faites ATTENTION !!!, ne partez pas dans une usine à gaz avec des liens vers toutes les pages dans tous les sens, ça serait dommage qu'on se perde dans les méandres de votre site ^^.

arborescence2.jpg

 

Il existe d'autres techniques pour améliorer votre arborescence et vous pouvez en créer d'autres afin de mieux vous repérer. Par exemple, vous pouvez entourer d'une manière particulière les pages qui seront administrables, ou encore les pages qui auront un formulaire , vous pouvez faire tellement de variante, le tout étant que vous vous retrouviez et que votre client aussi :D.

 

L'aborescence de votre site est très importante. C'est elle qui va déterminer la cohérence de celui-ci, la façons de naviguer et la gestion des informations.

Je l'ai déjà dis mais il est vital de faire en sorte que l'utilisateur ait le plus de facilité à trouver les informations, à surfer sur votre site (si vous voulez qu'il revienne c'est un des meilleurs moyen).

 

Sur ce je vous laisse réfléchir à l'organisation de votre site et je vous dis à la semaine prochaine pour le prochain épisode de comment créer son site internet intelligement ou la création de site Web "pour les nuls".

Repost 0
Published by AtChA - dans Programmation
commenter cet article
1 juin 2011 3 01 /06 /juin /2011 13:13

html5_en_CSS3.jpg

 

Il y a bien longtemps j'avais fais un article sur comment faire un menu css 2 niveaux. Forcément maintenant il est complètement dépassé, les standards ayant évolués et ma technique également.

 

Je vous présente donc la refonte. Ce menu est fait en HTML5 et CSS3.

Je pense par la suite l'agrémenter avec un peu de JQuery afin de le rendre un peu plus dynamique. Je ferais surement un tuto pour expliquer comment j'ai fais. Je vous laisse déjà voir ce qu'il en est.

 

LE HTML

 

Bien évidement ce menu ne passe que sur les navigateurs de dernière génération. Je l'ai testé sur Chrome, FF et IE9.

 

[Edit] : je viens de mettre à jour avec le JQuery, maintenant ça donne quelque chose de plus sympathique.

Le tutoriel expliquant ma démarche viendra dans le courant de la semaine prochaine ou peut-être ce week end si j'arrive à trouver du temps :p.

Repost 0
Published by AtChA - dans Programmation
commenter cet article
27 mai 2011 5 27 /05 /mai /2011 13:19

Main création de site internet

 

Dans notre ère du numérique, le web est devenu un acteur incontournable. Que ce soit dans la communication, la vente, l’information, la création, on ne peut plus faire quelque chose sans penser au facteur internet.

               

                Qu’on soit professionnel ou particulier, la création d’un site Web est devenue quelque chose d’une importance cruciale (bien que parfois, on puisse se demander de la pertinence de certains).

Au vu de la profusion des sites internet et des média numériques interactifs, on pourrait se dire ; « pas de problème je vais créer mon site Web tout seul » (bien que je n’y connaisse rien).

Hélas ce n’est quand même pas aussi simple (il faut bien sur relativiser pour un particulier). La création de site est un (plusieurs) métier. Vous croyez être capable de fabriquer une tronçonneuse à la maison ? Personnellement j’en suis incapable.

 

Alors, comment faire un site ? Comment captiver les internautes ? Comment être vu et revu sur la toile ?

 

Dans cette optique. Je me suis lancé un petit (grand) défis. Réaliser des tutos, études sur la création d’un site Web, de la recherche d’idée, compréhension du milieu etc, à la réalisation de celui-ci.

Chaque semaine je réaliserais donc une partie de cette étude afin d’aider les novices, les entrepreneurs et toute autre personne qui ne s’y connaitrait pas. Je précise tout de suite que je n’approfondirais pas énormément le côté technique de la chose. Je ne vais pas faire un manifeste sur comment utiliser une librairie Javascript par exemple.

 

On commence donc cette semaine par :

 

I - Mieux vaut une réflexion approfondie qu’un total gâchis

II - Après la réflexion la hiérarchisation

Repost 0
Published by AtChA - dans Programmation
commenter cet article
9 mai 2011 1 09 /05 /mai /2011 19:08

Aujourd'hui un collègue est venu me voir en me demandant, tu sais si je peux rediriger tout ce site vers un autre en laissant quand même l'accès à la partie admin ?

 

Je me suis dis hum, j'en sais rien du tout j'ai jamais fais ça, mais avec une bonne regex ça doit être facile ! 

FAUX !

 

J'ai donc cherché et après essouflement j'ai réussis à trouvé cette réponse que je vais vous partager.

 

Je travail sur IIS7 donc je vais d'abord vous expliquer pour IIS et après je vais quand même mettre la solution sur Apache :

 

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Redirection globale" stopProcessing="true">
<match url="^(.*)$" ignoreCase="false" /> 
<conditions logicalGrouping="MatchAll">
<add input="{URL}" pattern="^/admin" ignoreCase="false" negate="true" />
</conditions>
<action type="Redirect" url="http://monurl.fr/" appendQueryString="true" redirectType="Permanent" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

 

C'est finalement assez simple. 

D'une part vous redirigez tout avec cette regex :

^(.*)$

 

Ensuite vous faites une condition juste en dessous et enfin on indique que c'est une redirection avec l'url du site vers lequel on veut rediriger.

C'est casiment la même chose sur Apache (on accordera que c'est beaucoup plus lite :p)

 

fichier .htacces:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^/admin

 

RewriteRule ^(.*)$ http://monurl.fr/$1 [R=301,L]

      Et voila rien de plus simple. Finalement il fallait savoir qu'il fallait poser une condition et non tout faire directement dans la Regex.

Repost 0
Published by AtChA - dans Programmation
commenter cet article
24 mars 2009 2 24 /03 /mars /2009 02:31



O
n a toujours lorsque l'on travail sur une intégration de design quelques petits problèmes avec certains points du css.
J'en ai eu quelques uns sur ce petit menu (il faut dire que je me remettais dans le bain), mais je n'ai pas trouvé beaucoup de ressources sur des menus horizontaux avec sous niveau également horizontal ou horizontaux.

Voilà pour vous :


Le html


Le CSS


B
on c'est un exemple assez simple, qui est bien sur énormément personnalisable, que ça soit graphiquement ou encore via du javascript (n'oubliez pas mootools est votre amie :D) pour plus de dynamisme.
Maintenant vous avez plus qu'à pomper et comprendre le code. Amusez vous bien et changez moi ça à volonté je l'ai refait rapidement (sans test sur IE donc ^^) afin de le poster.



D'ici quelques temps, je vais regrouper mes deux blogs sur un seul site que j'aurai programmé via un framework et oui il faut que je test ça quand même. Il me faut encore décider lequel, donc si vous avez des suggestions, des préférences, des idées bonnes ou inutiles (c'est pas grave on vous en voudra pas hein), faites, exprimez vous :).


Repost 0
Published by AtChA - dans Programmation
commenter cet article
17 mars 2009 2 17 /03 /mars /2009 23:09


L
e web est en constante évolution et bien sur les développeurs sont les instigateurs de cette évolution. On a vu il y a de ça quelque temps un engouement pour ruby on rail grâce à son architecture MVC et c'est là que les développeurs PHP se sont rendu compte qu'il fallait s'adapter et se mettre également à ce genre de système très pratique côté serveur.
Ce soir on va donc parler de Symfony, un framework basé sur les mêmes principes que rail.

On parle donc ici de MVC, c'est à dire que ce que nous allons créer est répartit en différentes vues.
Ici le principe est de créer un projet, dans ce projet une application, composée de modules, qui effectuent des actions et gères des composants, puis enfin le dernier niveau, la gestion du template.

Dans Symfony, tout est géré ou presque grâce à des fichiers de type yaml, une sorte de XML spécifique et plus pratique à mon gout.
Pour en savoir plus et bien sur s'y mettre, je vous laisse un petit lots de liens très pratiques et intéressants :

Documentation sur Symfony :
http://www.symfony-project.org/doc/

Article sur Symfony :
http://www.journaldunet.com/developpeur/tutoriel/php/061108-php-symfony-framework/0.shtml

Un petit tutoriel bien sympa sur la bête :
http://c-maneu.developpez.com/tutorial/web/php/symfony/intro/

Un blog avec des news sur une future communauté FR :
http://www.experimental-symfony.com/

et pour finir une présentation vidéo de Symfony sur PHPEdit :


Je n'utilise pas personnellement PHPEdit pour développer et je n'inscite personne à le faire, mais par contre la vidéo permet d'en apprendre plus.
Bonne chance à vous et bon développement web :).


 
Repost 0
Published by AtChA - dans Programmation
commenter cet article
15 mars 2009 7 15 /03 /mars /2009 11:39


J
e reviens aujourdhui avec un peu de programmation. Il faut peut être redevenir sérieu de temps en temps.
Je viens donc vous parlez d'une librairie Javascript très très pratique pour faire des sites plus chiadés qui ont du chien !!! (ça c'est de la phrase incompréhensible non ?) En gros c'est une vrai mine d'or, vous pouvez faire tellement de chose avec si peu de code, car tout est géré via de la POO!!! Oui de la vraie POO :D. Tout le monde sait que l'on aime la POO du côté de chez moi, j'en ai tané plus d'un :).
Cette librairie peut vous permettre donc de faire tellement de chose, allant d'effets sur des menus, de gestions de contrôles de saisies simples, d'Ajax, de gestion d'images, de fichiers et j'en passe.
Vous pouvez la download à cet endroit, c'est gratuit et vous ne vous ferrez pas taper sur les doigts par les gens d'hadopi :).

Pour voir quelques exemples, allez par ici.

Repost 0
Published by AtChA - dans Programmation
commenter cet article

 395149_10150485772854288_664024287_8595839_1160149945_n.jpg

Bonjour et bienvenue.

Je mé présente AtChA.

Je suis Web designer, développeur front end, community manager, gamer et donc forcément geek. Je suis basé à Poitiers.

Né dans les années 80, j'ai grandis avec la nouvelle technologie et ce blog est là pour apporter des connaissances et de la distractions aux âmes qui s'aventurent par ici.

Recherche

Catégories