Joomladay francophone 2018 à Paris 18 et 19 mai

Outils pour Transformer une Charte Graphique PSD ou PNG en Template Joomla

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Outils pour Transformer une Charte Graphique PSD ou PNG en Template Joomla

    Bonjour à toutes et à tous,

    dans le cadre de la réalisation de projets de type création de site Internet, j'ai besoin de transformer des chartes graphiques réalisées par un professionnel sous forme d'image (PNG ou PSD) en templates Joomla (v1.5).

    Pour l'instant, je les découpe avec Paint Shop Pro (équivalent de Photoshop mais que je maîtrise mieux), puis je crée l'arborescence Joomla à la main (css/template_css.css, template_details.xml, index.php...). Ensuite j'édite le(s) fichier(s) css et php à la main en les visualisant en local grace à une installation de Joomla de test et à EasyPHP qui permet d'avoir un serveur http avec base PHP/MySQL. Pour le css, j'ai récemment récupéré SimpleCSS et csstool que je n'ai pas encore évalués.

    Je suis donc à la recherche d'outils (si possible freeware) permettant d'automatiser le processus et de le rendre un peu plus WYSIWYG.
    J'ai même pensé à développer un outil maison en C# ou en Java qui ferait exactement ce dont j'ai besoin mais je voudrais déjà être sûr que cela n'existe pas.

    Donc, en résumé, j'aurai besoin d'un ou plusieurs outils qui permettraient :
    - de découper la charte graphique de départ
    - de créer automatiquement la structure de template Joomla de départ
    - de définir des paramètres comme taille fixe ou non
    - d'affecter les blocs div
    - d'éditer les styles des différentes zones CSS
    - de visualiser le tout sans avoir besoin d'installer un serveur http en local
    ...

    Les outils suivants ne répondent pas à mon besoin car ils permettent de créer des templates Joomla mais from scratch (à moins que j'ai raté quelque chose ?) :
    - Artisteer
    - Joomla Tiger

    Je cherche plutôt un IDE dans lequel on pourrait réaliser toutes ou une bonne partie des opérations citées précédemment
    - NVU ?
    - WebExpert (payant) ?

    Bref, quels outils me conseillez vous pour réaliser ce genre de travail ?
    J'imagine que certains d'entre vous sont expert dans la réalisation de templates Joomla ?

    Merci d'avance pour toute aide !
    Dernière édition par ideoservo à 29/03/2010, 20h41
    Ideoservo - Développement logiciel et création de sites Internet sur mesure

  • #2
    bonsoir
    permettez moi d'apporter ces modeste solutions

    - de découper la charte graphique de départ
    photoshop, fireworks ou autres deverai faire l'affaire.

    - de créer automatiquement la structure de template Joomla de départ
    la solution la plus simple et rapide c'est d'installer esay creator mvc ( c'est composant qui permet de creer la structur d'un template , module, composant , plugin
    http://easy-joomla.org/

    - de définir des paramètres comme taille fixe ou non
    la je pense qu'il faut un parametrage avec des variantes sur votre ficihier templateDetails.xml
    comme exemple je vous suggere le template par defaut joomla rhuk_milkyway
    templates/rhuk_milkyway/

    - d'affecter les blocs div
    - d'éditer les styles des différentes zones CSS
    vous devriez utliser un editeur html ,dreamweaver ou autre, meme le bloc note fait l'affaire vous permettons de liée vos differents feuilles de style
    pour les class css de base joomla voila
    http://www.lanatz.info/astuces/jooma...ur-joomla.html
    - de visualiser le tout sans avoir besoin d'installer un serveur http en local
    la je ne sais pas?
    l'affichage et le dynamiqme de joomla repose sur l'affichage des différents module et l'execution de ces script, qui sont ne s'excute que sur un serveur
    merci et bonne chance
    Connaitre son ignorance est la meilleure part de la connaissance.

    Commentaire


    • #3
      Bonjour,
      merci beaucoup pour votre réponse.

      Dans un premier temps, je cherchais plutôt des outils freeware (or Dreamweaver et Fireworks sont payants). Dreamweaver est par ailleurs très cher je trouve (575 euros) par rapport à mon besoin.
      Connaissez vous des outils à peu près équivalents mais Open Source ou inférieurs à 150 euros ?

      Par ailleurs, je travaille avec Joomla 1.5. Il semble que le lien fourni (http://www.lanatz.info/astuces/jooma...ur-joomla.html) soit pour Joomla 1.0.
      Est-ce que les codes css de base Joomla 1.0 sont tous compatibles avec Joomla 1.5 ?

      Encore merci pour votre aide !
      Ideoservo - Développement logiciel et création de sites Internet sur mesure

      Commentaire


      • #4
        gimp, notepad++, firebug et un petit passage sur http://www.siteduzero.com/tutoriel-3...-site-web.html quand tu auras besoin de quelques notion d'html et css.

        Ancien pseudo : Fleuve Blanc

        Commentaire


        • #5
          Merci pour vos réponses. A la place de Notepad++ j'utilise actuellement Scintilla Text Editor (wscite) gratuit aussi. Notepad++ a l'air équivalent.

          Le lien sur le CSS du siteduzero est effectivement intéressant même (si comme son nom l'indique) il part vraiment de zéro.

          Pour la découpe :
          Gimp: gratuit effectivement mais je ne l'aime pas trop (comparé à Paint Shop Pro - question d'habitude).

          Pour l'édition CSS, j'évalue également Rapid CSS Editor 2008. A vrai dire je le trouve pas trop mal pour l'instant. J'arrive à visualiser ma page et le css en direct (j'ai mis tout le contenu html du php dans un fichier index.html). Il n'est pas trop cher en plus (de 30 à 40$). On peut éditer le php (mais ça ne marche pas avec mon template joomla à cause des liens relatifs).
          Ideoservo - Développement logiciel et création de sites Internet sur mesure

          Commentaire


          • #6
            salut , artisteer 2 passe du html au joomla
            http://lavalisedutechnicien.free.fr

            Commentaire


            • #7
              je ne pense pas qu'il y ait d'outil magique, ce que tu utilises est déjà pas mal.
              Perso je travaille beaucoup avec Gimp pour la partie graphique, et Context pour l'édition HTML et CSS (c'est un équivalent de Notepad++).
              Pour l'édition tu peux aussi utiliser Htmlkit qui a des atouts
              http://www.htmlkit.com/
              Il existe aussi des éditeurs CSS qui te proposent des fonctionnalités avancées avec la suggestion des éléments par exemple. Il faut faire le tour pour trouver ce qui te correspond mieux.

              Sinon coté tuto, il y a aussi l'excellent W3schools que j'aime beaucoup en plus du siteduzero.

              En ce concerne le rendu de ton template, il faut passer par un serveur et une insallation de joomla!, mais tu peux utiliser un serveur local portable comme Movamp.

              EDIT : je pense à une chose pour la visualisation de ton template, n'oublies pas de le tester sur les navigateurs les plus courants ! Firefox, IE8, IE7, IE6 (hé oui !!), Opera, Safari, Chrome...
              Pour les vesrions d'IE tu peux opter pour IEtester qui tourne sous Vista contrairement à MultipleIE
              Dernière édition par ced1870 à 24/07/2009, 13h15
              Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
              http://www.template-creator.com Outil de création de templates
              Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

              Commentaire


              • #8
                Envoyé par ced1870 Voir le message
                je ne pense pas qu'il y ait d'outil magique, ce que tu utilises est déjà pas mal.
                Perso je travaille beaucoup avec Gimp pour la partie graphique, et Context pour l'édition HTML et CSS (c'est un équivalent de Notepad++).
                Pour l'édition tu peux aussi utiliser Htmlkit qui a des atouts
                http://www.htmlkit.com/
                Il existe aussi des éditeurs CSS qui te proposent des fonctionnalités avancées avec la suggestion des éléments par exemple. Il faut faire le tour pour trouver ce qui te correspond mieux.

                Sinon coté tuto, il y a aussi l'excellent W3schools que j'aime beaucoup en plus du siteduzero.

                En ce concerne le rendu de ton template, il faut passer par un serveur et une insallation de joomla!, mais tu peux utiliser un serveur local portable comme Movamp.

                EDIT : je pense à une chose pour la visualisation de ton template, n'oublies pas de le tester sur les navigateurs les plus courants ! Firefox, IE8, IE7, IE6 (hé oui !!), Opera, Safari, Chrome...
                Pour les vesrions d'IE tu peux opter pour IEtester qui tourne sous Vista contrairement à MultipleIE
                Bonjour. Encore merci à toutes et à tous.
                @ced1870: je viens de voir que vous proposez un tutoriel Joomla 1.5 sur votre site. Je vais donc profiter pour y jeter un coup d'oeil.
                Sinon je viens de télécharger htmlkit...
                Ideoservo - Développement logiciel et création de sites Internet sur mesure

                Commentaire

                Annonce

                Réduire
                1 sur 2 < >

                C'est [Réglé] et on n'en parle plus ?

                A quoi ça sert ?
                La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                Comment ajouter la mention [Réglé] à votre discussion ?
                1 - Aller sur votre discussion et éditer votre premier message :


                2 - Cliquer sur la liste déroulante Préfixe.

                3 - Choisir le préfixe [Réglé].


                4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                2 sur 2 < >

                Assistance au forum - Outil de publication d'infos de votre site

                Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                UTILISER À VOS PROPRES RISQUES :
                L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                Problèmes connus :
                FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                Installation :

                1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                Archive zip : https://github.com/AFUJ/FPA/zipball/master

                2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                et remplacer www. votresite .com par votre nom de domaine


                Exemples:
                Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                Télécharger le script fpa-fr.php dans: /public_html/
                Pour executer le script: http://www..com/fpa-fr.php

                Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                Télécharger le script fpa-fr.php dans: /public_html/cms/
                Pour executer le script: http://www..com/cms/fpa-fr.php

                En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                Voir plus
                Voir moins
                Travaille ...
                X