WebDesign Blog

Migrate Joomla! Of php4 towards php5

2010-09-23T02:10:00.000-07:00

Often nowadays in the use of Joomla! Someone modulate or someone template raise problems with regard to the version php installed by base.

It can entrainez of the errors during the display of articles for example.

Of base Joomla! Is configured php4 there and more and more one needs a version php5.

To migrate it is very simple!

- Connect you on your server via your customers ftp.

- Get back in a file on your computer the htaccess.txt file in the root of the site.

- Open in the block note and to add the line: SetEnv PHP_VER 5

- Register(record).

- Go back on your customer ftp and reappoint the file .htaccess

- Copy to your server, and delete the file maintaining too: htaccess.txt

Voila you have just migrated your site towards php5!

Installez pour la première fois Joomla! : Partie 2, qu'est ce qu'un template Joomla! ?

2010-09-21T02:46:00.001-07:00

Installez pour la première fois Joomla! : Partie 2, qu'est qu'un template Joomla! ?
Dans la partie 1 nous avons installé la base de joomla, donc le cms et le les templates de bases.
Nous allons maintenant passer à l'installation d'un template.
D'abord qu'est ce qu'un template ?
Un template joomla,...

Un template joomla, est la configuration générale autant au niveau du design que de la construction de la structure html (donc de l'emplacement des menus, du logo, des modules etc..).

Mais que trouve t'on principalement dans le dossiers d'un template?

- Des fichiers de configurations

- Des fichiers css

- Des images

Qu'est ce qui nous intéresse ?

Au niveau de la construction du template, et de la places des modules, principalement le fichiers appelé:

-> index.php

Dans ce fichiers si nous l'ouvrons nous pourrons découvrir toute la construction html du site / template.

Pour plus de comprehension, je vous ferai un article dédié qui sera join ici prochainement.

Ensuite si nous prennons les fichiers css.

De par mon experiences l'on retrouve toujours un fichiers template.css, et un fichier pour le template du style : nomdutemplate.css.

Dans des templates joomla plus avancé l'on peut retrouvé des déclinaisons de thème; ce qui donne par exemple par exemple une structure du type:

Ce qu'il faut savoir c'est qu'en règle générale le design css d'un template se partage entre les deux fichiers css cités ci dessus (donc dans le screen au-dessus: template.css et par exemple style1.css).

Après principalement nous trouvons un dossier avec toute les images du sites.

Maintenant comment l'installer ?

Pour installer un nouveau template joomla ce n'est pas difficile retournez sur votre console d'administration.

-> Cliquez sur "Extention"

-> Installer / Desinstaller

Et chargé par une des trois méthodes proposé le fichier compresser du template.

Ensuite pour l'activé faite

-> "Extentions" / "Gestionnaire des templates "

Selectionner par la puces à gauche le template nouvellement installé et faite défaut en haut a droite.

Retourné sur votre site, le template est maintenant celui par défauts.

Pour installez un modules le principes est le même mais j'y reviendrai en détail dans un autre articles :p

Installez pour la première fois Joomla! : Partie 1, installation et configuration de base.

2010-09-20T03:36:00.000-07:00

Installez pour la première fois Joomla! sur un serveur peut se révéler problématique lorsque l'on ne connait pas la démarche nécessaire.

Pour ceci vous aurez besoin :

-    D’un hébergement (type OVH) avec un nom de domaine
-    De pouvoir créer une base de données via votre hébergeur.
-    D’un clients FTP (logiciel qui vous permettent d’accéder au dossiers de votre site du type FileZilla )

Concrètement la démarche est la suivante :

-      On copie les fichiers d’installation de Joomla! sur le serveur.
-      On crée la base de données.
-      On joins les deux ensemble .

A)Installation des fichiers et création de la base de donnée.

-Récupérer les fichiers d’installation sur le site de joomla.fr

-Dezipper l’archive dans un fichier (avec un logiciel du type 7-Zip ou Winrar).

Pour cela créer un nouveau dossier à cote de votre dossier compressé Joomla! et copié collé l’ensemble du fichier dans le nouveau dossier.

Télécharger un client ftp (j’utilise pour ma part FileZilla), vous pouvez le télécharger ICI.

Lancer le téléchargement et installez-le sur votre ordinateur.
Lancez FileZilla, vous arrivez sur l’interface du logiciel.(voir image ci-dessous)

Pour installez le site vous allez devoir dans un premier temps vous connectez sur votre serveur.
Cliqué sur le petit bouton en dessous du menu « fichier » (voir image)

Vous arrivez sur la fenêtre de connexion où vous allez rentrer les informations relatives à votre site.

La démarche est la suivante :
- Faite nouveau site
- Renseignez l’hôte qui est l’adresse ftp de votre site
- Sélectionnez le type d’authentification en mode « normale »
- Entrez votre Identifiant et le mot de passe de connexion.

Puis validez en bas.

Le client ftp se connecte sur le serveur de votre site. Suivant votre hébergeur vous aurez alors un fichier « www », « web », « public_html », ou vous tomberez directement dans l’espace de votre site (Voir image ci-dessous).

A ce moment là vous avez :
- Votre client ftp connectez sur votre serveur
- Les fichiez Joomla! décompresser dans un dossier.

Il ne vous reste plus qu’a copié les fichiers sur votre site.
Dans FileZilla la partie gauche de l’interface concerne votre disque dur et la partie droite le serveur de votre site (qui se présente de la même manière sous forme de dossier et de fichier).

Ouvrez dans la partie gauche le dossier contenant l’archive Joomla! dézipper et dans la partie droite l’intérieur du dossier « www » (ou autre cité ci-dessus) qui correspond à la racine de votre site (si des fichiers / dossier sont présent vous pouvez tout supprimer). Sélectionner l’ensemble des fichiers et dossiers Joomla! et faite « entrée » ou un glissé déposée dans la fenêtre du coté gauche vers le dossier « www » (ou autre).

Voila la copie des fichiers Joomla! est en route!

Pendant la copie des fichiers, vous allez vous occuper de crée votre base sql nécessaire au fonctionnement de Joomla!. Pour cela il vous faut vous connectez sur votre espace manager sur le site de votre hébergeur. Pour ma part je suis chez OVH et je me connecte via le « Manager OVH ».

Choisissez votre nom de domaine et rendez vous dans l’onglet hébergement.

Cliquez sur « Gestion SQL ».

Cliquez sur « Nouvelle base » (voir images ci-dessous).

Donnez lui un nom (qui sera certainement un suffixe à une base fixe), du type « joom ».

Validez, la base est ensuite en cour de création vous recevrez normalement l’ensemble des informations sur votre boite mail relié à votre compte chez l’hébergeur.

Voila vous avez crée votre base de données !

Une fois la copie sur votre serveur achevée, la base de données crée et les informations de connexions de celle-ci récupérer. Nous allons pouvoir terminer l’installation sur le site lui-même.

Connectez-vous via votre navigateur internet à votre site internet, tapé juste l’adresse que vous avez sélectionné lors de la création et la réservation de votre nom de domaine et de votre hébergement du type : www.monsite.com

Vous accédez ainsi à un écran comme ci-dessous.

Choisissez la langue dans laquelle vous souhaitez installez Joomla !

Faite suivant

Ensuite vous arrivez sur la page de vérification des conditions nécessaire au développement de Joomla! sur votre serveur(normalement chez un hébergeur classique toutes les conditions principales sont réuni pour la pleine expansion de Joomla!).

Faite suivant si votre serveur rempli les conditions.

Dans cette nouvelle page, vous vous trouvez sur la page de la licence d’utilisation de Joomla!

Faite suivant.

Vous voici arrivé sur la page qui va reliez votre site à votre base de donnée. Normalement la base devrait être crée et les informations de connections reçu sur votre messagerie internet.

Rentrez les informations reçus lors de la création de la base de données (si vous l’installez en local rentrez les informations telles qu’ils apparaissent sur la copie d’écran ci-dessus avec le nom de la base tel que vous l’avez choisi précédemment), renseignez les champs (chez OVH tout se trouve dans le mail) :
-    Nom du serveur
-    Nom d’utilisateur
-    Mot de passe
-    Nom de la base de données

La page suivante qui propose d’activé la couche FTP, ceci vous donne la possibilité de se connecter à partir d’internet à votre serveur (sauf erreur de ma part), personnellement je ne l’utilise pas préférant passer par des clients ftp tels que Filezilla.

Choisissez ce que vous souhaitez faire.

Faite suivant

Sur cette page vous rentrerez les informations relatives à votre futur site.

Premièrement le nom de votre futur site web (il pourra être modifié par la suite).

Ensuite l’email du futur administrateur, et le mot de passe d’accès à la console d’administration.

Une option très pratique consiste à intégrez un contenue d’exemple. Si vous ne connaissez pas Joomla!, je vous conseil de l’utiliser cela vous permettra de remplir les différentes parties du site pour que vous puissiez vous y retrouvez plus facilement ensuite.

Faite suivant

Maintenant retournez sur votre client ftp, et supprimez le fichier se nommant « installation ».

Maintenant retournez sur votre client ftp, et supprimez le fichier se nommant « installation ».

Voila Joomla! est installez !

Pour vous connecter sur le panneau administrateur de votre site, rentrez dans la barre d’adresse de votre navigateur :   www.votresite.com/administrator

Par default l’identifiant est admin et le mot de passe celui que vous avez choisi précédemment pendant l’installation de Joomla!.

CSS3, partie 1 : Découverte par l’exemple, construire un bouton en CSS3.

2010-09-20T03:33:00.000-07:00

J’entame par cet article une série complète qui sera développé autour du CSS3.

En effet, sont implémentation dans les différents moteurs de recherches devenant plus satisfaisant, je me lance à l'assault de cette nouvelle version!

Déjà commençons par le plus intéressant : l’ensemble du codes css3 téléchargeable sur le site de Veign.

Sur lequel d’ailleurs nous pouvons aussi retrouver un guide du css2.

Alors pour découvrir autant se jeter dedans, c’est un peu rapide mais c’est un bon exemple pour en découvrir la richesse et se faire une première idée.

Cas pratique: un bouton en css3

Lien web

Donner une class ou un id à votre lien web et direction la feuilles de style css, où nous allons lui donner un fond, une taille, une couleur pour la typo et une bordure.

.cssbouton{

background-color: #2b2b2b;
padding-top: 10px;
padding-bottom:10px;
padding-left: 10px;
padding-right: 10px; border: 1px thin solid;border: 1px thin solid;
color:#fff
}

Ce qui nous donne:

Lien web

Voila une base de travail pour travailler le design maintenant.
Continuons notre cheminement, et ajoutons une bordure arrondi avec le code suivant.

-moz-border-radius
Au niveau du code, et avec une valeur de 10px :
.cssbouton{
background-color: #2b2b2b;
padding-top: 10px;
padding-bottom:10px;
padding-left: 20px;
padding-right: 20px;
border: 1px thin solid;
-moz-border-radius: 5px
}
Ce qui nous donne:

Lien web

Histoire de s'amuser un peu nous allons choisir notre typo:
@font-face {
font-family: Bebas;src: url(../fonts/Bebas.eot);
}

@font-face {
font-family: "Bebas";src:local("Bebas"), url(../fonts/Bebas.ttf) format("truetype");
}
Pour cela, il faut donc upload votre typo sur votre ftp dans un fichier et en indiqué le chemin dans le css.
Ici nous avons donc chargé la typo par css pour le navigateur.
Pour l’appeler pour le bouton rien de plus simple !

font-family:'Bebas',Helvetica,Sans-Serif;
Au niveau du code nous en arrivons à
.cssbouton{

background-color: #2b2b2b;
padding-top: 10px;
padding-bottom:10px;
padding-left: 20px;
padding-right: 20px;
border: 1px thin solid;
-moz-border-radius: 5px;
font-family:'Bebas',Helvetica,Sans-Serif;

}
Ce qui nous donne visuellement:

Lien web

Nous allons maintenant ajouter une ombre portée au bouton avec la propriété:
-moz-box-shadow
Ce qui nous donne implementé dans le code:
.cssbouton{

background-color: #2b2b2b;
padding-top: 10px;
padding-bottom:10px;
padding-left: 20px;
padding-right: 20px;
border: 1px thin solid;
-moz-border-radius: 5px;
font-family:'Bebas',Helvetica,Sans-Serif;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.5);

}

Lien web

Nous allons maintenant ajouté l'effet de roll over en changeant les couleurs entre les deux:
.cssbouton{

background-color: #2b2b2b;
padding-top: 10px;
padding-bottom:10px;
padding-left: 20px;
padding-right: 20px;
border: 1px thin solid;
-moz-border-radius: 5px;
font-family:'Bebas',Helvetica,Sans-Serif;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.5);

}
.cssbouton:hover{

background-color: #fff;
color:#2b2b2b;
padding-top: 10px;
padding-bottom:10px;
padding-left: 20px;
padding-right: 20px;
border: 1px thin solid;
-moz-border-radius: 5px;
font-family:'Bebas',Helvetica,Sans-Serif;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.5);

}

Lien web

Vous pouvez maintenant vous faire plaisir, changer les paramètres, couleur and co :p
Par contre attention, ne marche pas sur l'ensemble des navigateurs, mais cela sera étudié dans un autre article que l'on retrouvera bientôt en lien ici.

2010-09-20T03:30:00.001-07:00

La typographie en design est un des piliers pour une bonne construction et un bon rendu. Je vais ainsi vous listez une superbe sélection de jolies typographie gratuite et libre de droit.

Comfortaa, une typo simple, moderne aux formes arrondies, avec 466 caractères différents ! Disponible en 3 graisses: Regular, Bold et Thin. Désigné par Johan Aakerlund, Danemark. Téléchargement gratuit ICI (.zip)

Chunk, ultra-bold slab serif, Désigné par Meredith Mandel, OpenType. Téléchargement gratuit ICI

Titillium, une superbe typo pour tout vos sites webs, vos magazines ! Téléchargement gratuit ICI

Nilland, slab-serif. Lagnifique Typo pour toutes créations, disponible en 6 graisses: regular, bold, extra bold, black, small caps et small caps bold. Téléchargement gratuit ICI

Aller sans, sans-serif Aller Sans, dessiné par Dalton Maag design team. Téléchargement gratuit ICI

Vegur, humanist sans-serif, disponible en 3 graisses: ExtraLight, Regular et Bold. Téléchargement gratuit ICI

Goudy Bookletter 1911, serif old-style OpenType font. Telechargement gratuit ICI

Bienvenu sur mon blog !

2010-09-20T03:29:00.000-07:00

Je partagerai ici les contenues intéressant que je trouverai sur les web à travers mes recherches pour mes sites :)
J’espère que cela vous plaira !

Admin