Tutoriels usto

Installer Symfony sous Mac OS X en utilisant MAMP

youknowriad — Sat, 16 Aug 2008 00:15:30 +0000

A mes débuts sous symfony, j’ai eut un peu de mal à l’installer pour la première fois sous MAC OS. et après avoir fait un petit tour sur le net, je me suis rendu compte qu’il n y avait pas un tutorial bien expliqué pour réaliser cette tâche correctement ( Ceux que j’ai suivi ne marchait pas dans mon cas ). C’est pour cette raison je me suis dit qu’il fallait écrire un article pour permettre aux débutants sur symfony d’effectuer cette tâche assez rapidement.

Tout d’abord, il faut savoir que pour installer Symfony, il existe plusieurs méthodes. Là je vais vous montrer une d’elle, l’installation via Pear.

a) Configuration de l’environnement (MAMP) :

1- Commencer par installer MAMP.

2- Lancer Mamp (Applications/MAMP/MAMP) puis aller “dans préférences” : Configurer le dossier dans l’onglet “Apache” comme suit : /Users/Votre-Pseudo-MAC/Sites. Réinitialiser ensuite les ports Apache et MySql avec les numéros de ports par défaut respectivement 80 et 3306 (dans l’onglet “Ports”).

3- Maintenant il faut changer la limite mémoire par défaut dans php.ini que vous trouverez dans le dossier /Applications/MAMP/conf/php5/php.ini et changer la valeur de memory_limit à 32 Mo.

4- Ensuite on doit indiquer à votre terminal que la bonne version de PHP à utiliser, comme suit :

- Ouvrez le terminal terminal (Applications/Utilitaires/Terminal).

- Taper la commande suivante (Ouvrir bash_profile, pour ajouter une variable d’environnement)

$ sudo vim .bash_profile

entrer votre mot de passe root si nécéssaire.

- Insérer ensuite cette ligne à la fin du fichier (pour entre en mode insertion taper “i”

PATH=/Applications/MAMP/bin/php5/bin:$PATH export PATH

- sauvegarder les modifs “:wq”

b) Installation de Symfony :

1- Vous êtes donc prêts à installer Symfony, redémarer votre terminal puis taper la commande suivante pour initialiser le channel de téléchargement Pear :

$ pear channel-discover pear.symfony-project.com

2- Vous pouvez maintenant lancer l’installation comme suit:

$ pear install symfony/symfony $ pear install --alldeps http://phing.info/pear/phing-current.tgz

3- Tapez “symfony” dans votre terminal pour vérifier que tout s’est bien passé, vous verrez normalement la liste de toutes les commandes de Symfony.

et naturellement pour finir, je vous faire l’équivalent du “HelloWorld” pour symfony (càd un projet vierge).

c) Création et Configuration d’un nouveau projet :

1- Aller dans le dossier /Users/Votre-Pseudo-Mac/Sites et créer un dossier pour votre projet (ça sera “MonProjet” pour le tutorial)

2-Vous devez ensuite créer un VirtualHost pour votre projet (ce n’est pas obligatoire dans une installation locale de Symfony, mais c’est conseillé pour bénéficier des modules et styles par défaut de symfony) et ceci comme suit :

- Ouvrez le fichier /Application/MAMP/conf/Apache/htpd.conf et ajouter ceci à la fin du fichier :

ServerName monprojet.Localhost.com DocumentRoot “/Users/votre-pseudo-mac/Sites/MonProjet/web” DirectoryIndex index.php Alias /sf /Applications/MAMP/bin/php5/lib/php/data/symfony/web/sf AllowOverride All Allow from All votre-pseudo-mac/Sites/MonProjet/web”> AllowOverride All Allow from All

Il reste à ajouter au fichier etc/hosts la ligne suivante :

127.0.0.1 MonProjet.localhost.com

Puisque c’est un fichier caché, vous devez le faire grâce au terminal :

$ cd /etc $ sudo vim hosts

Ensuite insérer la ligne (commande “i” pour le mode d’insertion puis sauvegarder “:wq!”)

3- Passons maintenant à “Symfony” proprement dit. Ouvrez le terminal (ou redémarrez le s’il est ouvert) et tapez la commande suivante :

$ cd Sites/MonProjet

3- Initialiser le projet Symfony, comme suit :

$ symfony generate:project MonProjet

4- Initialiser l’application Symfony, comme suit :

$ symfony generate:app frontend

Voila vous avez terminé, vous pouvez maintenant tester votre projet en accèdant à l’adresse MonProjet.localhost.com depuis votre navigateur.

Bon courage à tous.

PS: n’oubliez pas de changer mon-pseudo-mac et MonProjet avec vos propres informations.

Source : Le blog YouKnowRiad

Menu vertical en Css

noc — Sun, 15 Jun 2008 02:32:07 +0000

Salut tout le monde , dans ce nouveau tutoriel nous allons voir comment créer un menu vertical en html et css.

Comme nous l’avons déjà vu avec le menu horizontal , un menu est constitué de deux parties , une partie html et une autre Css.

La partie html :

Mon menu vertical

Élément 1

Élément 2

Élément 3

Élément 4

Élément 5

comme vous auriez du le constater , dans la partie html on a pas changé grand chose , par rapport au menu horizontal , et c’est justement la qu’on comprend que tout le travail ce fait au niveau des css.

Je vous invite quand même a voir le résultat jusque là. cliquez-ici

La partie Css :

le code suivant doit être placé entre les balises et de notre fichier html.

Si vous remarquez bien c’est dans cette partie qu’ il y a eu quelques petits changements ,

Tout d’abord dans la première ligne on enlève les puces de la liste , les marges internes et externes on les remet à zéro.

dans la deuxième ligne on enlève les marges internes et externes des éléments de la liste.

et tout le travail se fait au niveau de la balise a , alors la ce qu’on va faire , c’est lui enlevé le soulignement tout d’abord avec text-decoration:none , ensuite on va définir le lien comme étant un block avec display block , dans ce cas la , il lui faut absolument une largeur et une hauteur , c’est fait avec line-height ,et le width , ensuite on va mettre l’arrière plan en couleur grise ,et le texte en blanc.

la dernière ligne c’est pour le survole de la souris , on change la couleur d’arrière plan et voila le travail est fait

vous pouvez voir le résultat sur cette page en cliquant ici

et voici un petit exemple que j’ai fait pour vous.

j’attends vos questions avec deux-patience

Effet Matrix avec photoshop

KaTau — Thu, 06 Mar 2008 20:41:04 +0000

Mon premier tutoriel vous permettra de créer un fond effet matrix juger vous même :

étape 1:

Fichier->nouveau ou Ctrl+N

Indiquez la taille de l’image Largeur: 800px Hauteur: 600px pour un fond d’écran par exemple.

Laissez la résolution par défaut et assurez vous que le mode est “couleurs RVB”.

étape 2:

Avant de commencer réinitialiser la palette de couleur en tapant “D”

D’abord Filtre -> Textures -> Grain…

Mettez Intensité & Contraste entre 90 et 100 et type choisissez : vertical.

Allez a : Filtre -> Artistiques -> Néon…

Mettez La taille a 5 et la luminosité a environs 20 (le résultat final dépend de ces paramètres). et couleur choisissez du vert, moi j’ai pris le vert cette couleur : #05e83f

Ça y ressemble mais on y est pas encore allez a

Filtre -> Esthétiques -> Contour lumineux

épaisseur: 1, luminosité: 5, lissage: 1.

Vous pouvez modifier la valeurs de paramètres précédents pour modifier le résultat.

logo en crystal web 2.0

Astuce2mus — Mon, 03 Mar 2008 22:44:06 +0000

Salut tous le monde,

Cela fait déjà un bon moment qu’on vous a pas concocté un tutorial Photoshop. Aujourd’hui je vous montre comment créer un logo style web 2.0 très tendance. Les geeks apprécieront.

————————————————————————————————————————–

1- Pour commencer, créez un calque de degradé (arrière plan).

————————————————————————————————————————–

2- Créez un rectangle avec les parametres suivants :

> outer glow (lueur externe) : opacité 54% , spread 25% , size 2px , range 100%

> iner glow (lueur interne) : opacité 73% , choke 0% , size 32px , range 100%

————————————————————————————————————————–

3- Créez un 2ème rectangle plus petit que le premier. Ensuite, dans le panneau du style de calque (layer style), cochez la case de degradé avec : une couleur blanche dans les deux extremités, et une opacité à 80% dans la premiere extremité et 26% dans la deuxième.

————————————————————————————————————————–

4 - Pour le reflet du sol créez un rectangle et comme à l’étape 3 appliquez un dégradé avec une opacité de 0% dans la deuxième extrémité.

————————————————————————————————————————–

5- Pour l’arrière plan créez un nouveau calque et avec un pinceau (b) dessinez des petits esses de differentes tailles.

————————————————————————————————————————–

6 - Appliquez un flou directionnel (filter > blur > motion blur)(filtre > flou > flou directionnel)

————————————————————————————————————————–

7- Ajoutez votre nom au logo.
————————————————————————————————————————-

Voilà ce tutorial est terminé, j’espère que vous avez apprécié. Et n’oubliez pas de nous envoyer vos créations.

Créer un site web comme un pro de A à Z

youknowriad — Sun, 02 Mar 2008 19:07:42 +0000

Cet article se veut un guide dans la création d’un site web professionnel. Je ne vais pas vous faire un tutorial de création d’un site web mais je vais vous montrer les différentes étapes à suivre pour créer un site web professionnel de A à Z.

Avant de commencer, je suppose que vous avez déjà élaboré votre cahier de charges. C’est à dire que vous savez exactement ce que vous allez mettre dans votre site web. Maintenant on peut commencer.

1- La première chose à faire, c’est bien sur le design. Mais un bon design nécessite de l’inspiration. Donc faites un petit tour sur la toile, en visitant ici et la, les sites en rapport avec le votre pour vous faire une idée de l’organisation générale du site voulu. Vous pouvez également avoir votre propre idée, ça sera plus originale. je vous donne également une listes de sites pour vous inspirer avant de faire votre design :

2- Maintenant que vous vous êtes inspirés et que vous avez votre idée en tête, il est temps de la schématiser par un croquis sur papier (Ne m’en voulez pas si je saute des fois cette étape parce que je suis un incorrigible impatient)

3- Il est temps maintenant de créer la maquette avec notre ami photoshop bien sur. Je vous donne donc quelques liens pour apprendre à utiliser photoshop.

Photoshop school
i-liquid
Vous trouverez également quelques tutorials dans notre blog

4- Une fois que vous avez votre maquette, il est temps de créer votre site proprement dit. Des connaissances en XHTML et CSS sont nécessaires pour faire l’intégration de votre maquette selon les normes. Et pour apprendre le couple XHTML et CSS, il n y a pas mieux que le site du zero.

5- Après l’intégration de votre design, il ne reste plus qu’à remplir le contenu de votre site web. Pour des sites web plus compliqués (dynamiques) il vous faut également des connaissances en PHP/MySQL ou autre langage serveur.

Voila j’espère que vous aurez les idées clairs après ça, il ne reste plus qu’à apprendre Photoshop, XHTML, CSS, PHP, MySQL … ça fait beaucoup non. Rassurez vous, ce n’est pas aussi compliqué que ça en a l’air, il suffit juste de s’y mettre.

Source : Le blog des nomades