Content System Manager (C.M.S.)

[Entreprise] Pourquoi créer un Blog ?

Eloha — Wed, 12 Nov 2014 16:03:45 GMT

Bonjour, intéressons-nous à cette question : Pourquoi créer un blog ? Eh oui, pourquoi ? La seule bonne raison ? Pour accroitre le trafic !

Et oui, dans une entreprise, quand vous avez un site web, c'est pour présenter, donne un moyen de contact et/ou vendre un produit et bien le blog vous permettra de rajouter du contenu qui attirera des visiteurs et peut-être en feront des lecteurs réguliers ! (si le contenu est intéressant bien sûr)

Si vous écrivez régulièrement des articles intéressants, votre blog sera très vite bien référencé par les mot clés que vous inclurez naturellement en écrivant un article.

Vous inclurez l'activité de votre société dans ce blog, cela permettra évidemment de donner plus de vivant et vous pourrez même présenter des produits (plus généralement les vôtres ^_^ ) , découvertes, ou astuces pour ainsi, pas qu'attirer le lecteurs mais lui faire partager ce billet d'article sur les réseaux sociaux par exemple !

Les blogs vous permettront d'inclure plus de "social" et si vous êtes à l'écoute des lecteurs en répondant à leurs questions par exemple, vous aurez tout gagner, votre entreprise paraîtra plus conviviale. C'est ainsi que les lecteurs vous seront fidèles :wub: . (et ça accroitra votre trafic ! :ph34r: )

Un autre bon coté, c'est que le blog donne un autre visage à votre entreprise, ce que je veux dire par là ? Tout simplement que les visiteurs ne verront plus le côté Business mais aussi un coté amicale, car vous écrivez des articles et le visiteurs le voient ça ! Du coup, une atmosphère chaleureuse s'instaure entre le visiteur et l'entreprise. :wub:

De plus, vous pouvez même publiez des articles faisant abord à votre commerce qui pourra développer des partenariats avec d'autre entreprise. (comme le fait Openclassrooms )

[Flyspray] BugTracker

FaKe77 — Fri, 31 Oct 2014 18:10:04 GMT

Salut à tous,

Je me permet de poster pour vous présenter ce ptite BugTracker surement connu par certains d'entre vous.

Flyspray, c'est quoi ?

Flyspray est un bugtracker/gestionnaire de ticket. C'est un CMS qui s'installe sur un hébergeur web (comme un forum phpBB) et qui sert à gérer les différentes tâches au sein d'une équipe. OVH l'utilise aussi pour tenir ses utilisateurs au courant des travaux en cours (http://travaux.ovh.net/) ; il s'agit d'une ancienne version.

Je vais essayer de vous présenter brièvement ce système, sans rentrer dans les détails. C'est vraiment pas compliqué à utiliser.

Comment ça fonctionne ?

En bref, Flyspray permet de créer des tâches, de les assigner aux personnes responsables et d'en suivre l'évolution. Chaque utilisateur dispose d'un compte et peut-être placé dans des groupes en fonction desquels il dispose de droits.

Ces tâches se présentent sous la forme de tickets. Un ticket = un truc à faire. Et chacun d'eux a différentes caractéristiques prédéfinies lors de la configuration (et en fonction de vos besoins) :

Un résumé (un titre) et une description qui expliquent concrètement la tâche
Un type de tâche : bug, mise à jour, demande, etc.
Une catégorie : serveur, site, forum, etc.
Un état : Nouveau, en cours, à tester, besoin d'info, etc.
Une sévérité (c'est grave, docteur ?) et une priorité (c'est urgent ?)
Une assignation pour qui doit faire la tâche (utilisateur ou groupe d'utilisateur).
D'autres petits détails.

Tous les tickets (en cours ou fermés) peuvent être listés, ce qui vous donne un aperçu du travail à faire et vous permet d'avoir une trace de ce qui a été fait. Chaque utilisateur peut aussi voir ce qu'il a à faire.

Depuis la dernière version, il est aussi possible de lier des tâches entre elle, ce qui permet de les hiérarchiser et de dire dans quel ordre doivent être exécutés les tickets.

Avantages/Inconvénients

Flyspray n'est pas un outil qui conviendra à tout le monde parce qu'il implique une certaine façon de travailler. Il faut qu'il y ait une répartition du travail où les gens sont complémentaires. Celui qui ouvre le ticket n'est pas celui qui le ferme. Par exemple, celui qui décide des MAJ ne sera pas celui qui les faits ou celui qui traque et qui test les bugs ne sera pas celui qui les réglera. C'est une façon de travailler qui fait gagner du temps aux personnes "qualifiées" ; quelqu'un qui sait scripter a mieux à faire que du travail que quelqu'un d'autre qui ne sait pas scripter pourrait faire. C'est un système qui implique aussi une certaine confiance au sein de l'équipe.

Il faut aussi que les gars du staff le consultent régulièrement et prennent le temps de faire les tickets. C'est con à dire, mais si vous savez que vous ne l'utiliserez pas beaucoup, ne perdez pas temps à l'installer.

Conseils d'utilisation

Adaptez le système à vos besoins. L'objectif, c'est quand même d'avoir un outil simple et efficace. Avant de vous lancer là dedans, prenez le temps de réfléchir à ce que vous voulez en faire.
Pas de doubles usages. Le Flyspray ne doit pas coexister avec un autre système. Soit vous mettez toutes les tâches dessus, soit vous n'en mettez aucune. Mais ça ne sert à rien de partager le boulot entre un forum et un bugtracker.
Des règles d'utilisation prédéfinies. C'est important que tous les utilisateurs soient d'accord et respectent entre eux une série de conventions. Par exemple, vous pouvez discuter de savoir qui attribue les tâches ; il ne s'agira pas nécessairement de la personne qui créera le ticket.
Tout ce qui est sur le flyspray est à faire et ne doit pas être discuté. Un Flyspray, c'est pas un forum. L'idée, c'est que quand vous ouvrez votre liste de ticket, vous n'ayez pas à vous poser trop de question sur ce qu'il y a à faire. Un bon ticket contient toutes les infos nécessaires clairement exprimées. Et le ticket concerne quelque chose qui doit être fait. Et en plus, la tâche doit concerner un problème ou une mise à jour "réelle". Par exemple, si les joueurs signalent des bugs via le forum et que les modos les retranscrivent sur Flyspray, il faut d'abord que le modo ait vérifié que le bugs existait et qu'il était reproductible. Autrement, il ferait perdre son temps aux codeurs.

Infos complémentaires/téléchargement

Le site de Flyspray : Cliquez ici !
Le bugkiller de Flyspray (demo) : Cliquez ici !

Crédits: Moathib - http://forum.sa-mp.com/showthread.php?t=494038

Cordialement,

Antoine.

[Optimisation] Tester votre site : Google.

Azad — Mon, 28 Jul 2014 14:37:05 GMT

PageSpeed Insights

Bonjour, comme j'en avais parlé dans un autre sujet dans le webmastering, je vous présente un outil développé par Google qui vous permet de rentrer votre URL chez Google, le robot va se charger d'aller sur votre site et analyser les temps de chargement afin de vous donner des conseils sur une optimisation possible.

Liens : http://developers.google.com/speed/pagespeed/insights/

Vous aurez une analyse de votre page web directement après ça.

Interface de départ :

Après avoir entré l'URL :

(Oui, je devrais me plaindre auprès d'IPB )

Voilà !

[SEO] Outils d'analyses

Azad — Thu, 24 Jul 2014 12:56:40 GMT

Le site seochat propose un pannel assez vaste (mais limité si on est pas inscrit) pour analyser votre site en tirer les bonnes analyses et savoir quoi améliorer : Free SEO tools !

Ces outils vous permettront de générer des sitemap de vos sites, d'analyser vos META TAG pour savoir ce qu'il manque, etc...

Voici un aperçu du site :

[Webmail] RAINLOOP

Azad — Thu, 24 Jul 2014 12:31:28 GMT

/applications/sslimageproxy/interface/image.php?url=http://rainloop.net/static/img/logo-256x256-tiny.png"/>

RAINLOOP

Aujourd'hui je viens vous parler d'un CMS Webmail que j'ai découvert, qui est juste fabuleux, et que certains connaissent peut-être déjà.
Pour les CMS Webmail, on connaissait Squirrel ou Roundcube, mais désormais RainLoop commence à prendre ses marques.

Il a pour avantage d'être très souple, performant, rapide et très bien réalisé. Voici ses caractéristiques (en anglais) :

Features

Modern user interface.
Complete support of IMAP and SMTP protocols including SSL and STARTTLS.
Minimalistic resources requirements.
Direct access to mail server is used (mails are not stored locally on web server).
Allows for adding multiple accounts to primary one, simultaneous access to different accounts in different browser tabs is supported. Additional identities.
Administrative panel for configuring main options.
Really simple installation and update (the product is updated from admin panel).
Integration with Facebook, Google, Twitter and Dropbox.
Managing folders list.
Simple look'n'feel customization.
Configurable multi-level caching system.
Extending functionality with plugins installed through admin panel.
Perfect rendering of complex HTML mails.
Drag'n'drop for mails and attachments.
Keyboard shortcuts support.
Autocompletion of e-mail addresses.

Il comprend notamment la double authentification, chiffrage PGP, intégration Facebook / Twitter / Dropbox, et l'ajout de domaine personnalisé.
Le CMS est gratuit pour une utilsation personnelle et non-commerciale, vous pouvez le télécharger ici.
Ou même l'essayer ici.

Voilà, je pense l'adopter pour mon usage quotidien.

[SEO] Utilisation de Ping-O-Matic

Azad — Wed, 23 Jul 2014 14:23:53 GMT

http://www.pingomatic.com/

Pingomatic est un site web spécialisé dans ce qu'on appelle le "ping" de moteur de recherche.
Concrétement, ce site a développé une API permettant de communiquer avec les moteurs de recherche et des informer des mises à jour à effectuer sur certains sites.
Par exemple, vous venez de faire une mise à jour et vous souhaitez que cela soit considéré par les moteurs de recherche : plutôt que d'attendre le passage des bots sur votre site, rendez-vous sur pingomatic.com :

L'image parle d'elle-même : vous rentrez le nom de votre site web, l'URL de ce dernier, et les services à notifier. Pingomatic va se charger de les contacter pour les informer qu'il y a des nouveautés sur votre site web, et qu'il faut aller indexer ça.

Pour informations, Melinyel a investit un peu d'argent pour qu'un ping soit fait quotidiennement vers ses sites webs : Google ne ratera plus rien !

Re-écrire des adresses grâce à un fichier .htaccess

mars073 — Tue, 22 Jul 2014 15:47:29 GMT

Bonjour à tous,

Je vais vous expliquer comment faire plusieurs redirection interne grâce à un fichier .htaccess car oui on peut faire beaucoup de chose avec ce petit fichier (comme gérer les accès).

On va commencer par quelque de simple: faire une page d'erreur, LA célèbre page "404 Not Found" (400 est le numéro de l'erreur, et "Not Found" signifie "non-trouvé").

# Contexte: Notre gentil admin nous offre un accès pour faire notre site dans mon cas nous allons dire qu'il s'agit de "mars073.melinyel.net" mais lorsque l'on fait un lien vers un fichier inexistant (ex: [url=http://mars073.melinyel.net/monFichier.txt]http://mars073.melinyel.net/monFichier.txt[/url]) la redirection se fait sur [url=]"http://melinyel.net/error"[/url] alors je crée un fichier error.php et je veux que lorsque l'on veut afficher un fichier inexistant.
#Syntaxe: ErrorDocument [n°erreur] [fichier]
ErrorDocument 404 ./error.php

/!\ Attention : l'url du client ne va pas changer donc si vous avec un fichier à charger (ex: ou le css) et que le mauvais lien est "http://mars073.melinyel.net/ecrits/monFichier.txt" l'image sera cherché dans http://mars073.melinyel.net/ecrits/_uploads/123.gif. (à titre informatif l'erreur 403 est lorsque l'accès est refusé)

Maintenant nous allons faire un peut plus compliqué, comme vous le voyez sur pas mal de boutique en ligne ou autre vous avez souvent des liens comme "http://mars073.melinyel.net/article-9986.html" mais pourtant si vous accédez aux dossiers vous ne verrez pas le fichier "article-9986.html", c'est normal, enfaite l'adresse que vous avez cherchez vous a envoyé une réponse en réécrivant l'accès en son entre.

Dans mon cas (car mon cas est très intéressant

#Syntaxe: RewriteRule [lien_d'origine/regex] [lien_à_charger]
#On autorise les liens symboliques:
Options +FollowSymlinks
#On active la réécriture de l’accès:
RewriteEngine on
#On donne notre regex et sa redirection:
RewriteRule ^article-([0-9]+).html$ ./engine/shop.php?id=$1

Petite explication sur ce qu'est un regex (REGular EXpression ou expression régulière en français), c'est enfaite un motif, c'est à dire que l'on cherche une certaine syntaxe, dans l'exemple que j'ai donné au dessus on peut décomposer les élèments ainsi:

- ^article- : celà commence par "article-"

- () : récupérer la valeur entre les parenthèses qui est retourné dans $n (n = n^éme récupération)

- [0-9]+ : celà contient des caractères de 0 à 9, le "+" symbolise que le caractère doit-être présent au moins une fois.

- .html$ : celà termine par ".html"

Nous allons monter d'un cran, cette fois-ci à la place d'avoir un nom.

# premier cas nous n'autorisons que les caractères alphanumériques (a à z et 0 à 9) et le caractère "" et nous allons le mettre insensible à la case ( ne pas faire la différence entre majuscule est minuscule).
RewriteRule (?i)^article-([a-z0-9_]+).html$ ./engine/shop.php?name=$1
deuxième cas nous autorisons tout les caractères même si il y en a aucun et nous rendons le caractère "-" qui se trouve juste avant
RewriteRule (?i)^article?-(.).html$ ./engine/shop.php?name=$1

le "(?i)" devant symbolise donc que la chaîne est insensible à la case.

Vous voulez faire un système de page et donc vous écrivez

Rewrite (.) ./index.php?p=$i

Et surprise: 500 internal error

En réalité le serveur va faire:

#requête de base: http://mars073.melinyel.net/Accueil
#première réécriture:
http://mars073.melinyel.net/index.php?p=Accueil
#deuxième réécriture:
http://mars073.melinyel.net/index.php?p=index.php
#troisième réécriture:
http://mars073.melinyel.net/index.php?p=index.php
...

car comme vous l'avez spécifié que ça pouvait être une chaîne de n'importe quel caractère de n'importe quelle longueur donc "index.php" (les variables GET ne sont pas prissent en compte dans la réécriture) est une chaîne correct pour réécriture donc il va pas arrêter de la réécrire et vous afficher un message d'erreur comme quoi il s'agit d'une boucle infinie

Il existe plusieurs solutions:

#première solution: mettre un page/ en premier
RewriteRule (?i)^page/(.+)$ ./index.php?p=$1
#deuxième solution: mettre les différentes pages existantes séparé par une barre ("|")
RewriteRule (?i)^page/(accueil|boutique|contact)$ ./index.php?p=$1
ou
RewriteRule (?i)^(accueil|boutique|contact)$ ./index.php?p=$1
#troisième solution vous testez si le fichier existe et si ce n'est pas le cas il fait la redirection
RewriteCond %{REQUEST_FILENAME} !-f #il ne faut pas que ça soit un fichier existant
RewriteCond %{REQUEST_FILENAME} !-d #il ne faut pas que ça soit un dossier existant
RewriteRule (.) ./index.php?p=$1

Dans la dernière solution vous voyez "REQUEST_FILENAME" qui est une des nombre variable que l'on peur utiliser dans mon cas (en local) elle restourne "C:/xampp/htdocs/" puis le fichier/répertoire que j'ai entré dans l'url, vous pouvez aussi utiliser "REQUEST_URI" qui ne retourne que le répertoire/fichier entré dans l'url.

Imaginons que maintenant vous voulez faire un système de sous page dedans donc page 1, 2, 3, 4, ... et vous mettez ce paramètre dans l'url donc http://.../ Accueil?page=2 (attention si vous mettez "p" comme non vous allez réécrire sur la variable faite dans le htaccess enfin vous pouvez toujours changer son nom pour une meilleur esthétique côté client)

Comme vous le constaterez la variable n'est pas déclaré sur votre page après la réécriture, c'est normal vous devez ajouter un flag lors de la réécriture pour dire qu'il faut aussi donner les variable GET, il s'agit du flag ("drapeau" en français) QSA, ce qui va donner dans votre htaccess:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.) ./index.php?p=$1 [QSA]

Je pense que j'ai dis le principal à connaître si vous désirez faire un peu compliqué ou si vous cherchez plus d'info voici de la doc:

- RewriteRule

- Les flags/drapeaux

J'espère que mon tutoriel sera utile à quelqu'un,

Bonne programmation à tous,

Cordialement,

Mars073.

Concevoir et créer un site web

Anaeria — Wed, 02 Apr 2014 18:18:33 GMT

Nous allons nous plonger dans la création complète d’un site web. De la conception jusqu’à la mise en ligne, nous allons explorer chaque aspect de cette aventure. N’hésitez pas à me faire part de vos retours.

Ce post est à voir comme une grande introduction à une série de tutoriel consacré à la création de site web.

Il ne s’agira pas d’apprendre à programmer, ni à dessiner ou à communiquer. Mais de voir comment conjuguer ses trois aspects dans la création d’un site.

Pour la petite histoire, dans mon métier (chef de projet web), j’ai rencontré pas mal de bons programmeurs, quelques bons graphistes et certains communicants plutôt compétents. Ce qui est plus rare, c’est de rencontrer quelqu’un qui maîtrise suffisamment tous ces domaines pour les harmoniser au service du web.

Avant de rentrer dans le vif du sujet, je tiens à préciser que j’ai choisie l’ordre des étapes tel qu’il est pour une personne seule. Dans le cas d’un travail à plusieurs, il peut y avoir des choses faîtes en parallèles, mais cela rajoute une dimension : de la gestion de tâches que l’on n’abordera pas ici !

I. Le concept

1. Etablir le concept (Qui ?)

Tout commence par une idée. Cette idée doit être la plus clair et complète possible avant d’envisager quoique ce soit d’autre.

Un concept de base bien établi repose sur plusieurs points fondamentaux :

Il doit permettre de déterminer un public cible
Ainsi que déterminer les technologies à utiliser
Enfin, permettre de communiquer sur le site

Avoir un public cible est essentiel pour ne pas se tromper dans les choix technologies et esthétiques. Exemple d’erreur courante : faire un site à destination d’un public de jeune adulte et ne pas prévoir une compatibilité avec les appareils mobiles.

Pour ce le dernier point cité, la raison est simple : établir un concept fourni, réfléchit et maîtrisé c’est pourvoir facilement communiquer sur le sujet et cela évitera de se perdre dans les étapes futurs.

Exemple :

Un site communautaire à destination des jeunes adultes leurs permettant d’échanger librement leurs idées, savoirs et cultures. L’accent est mis sur l’attrait aux nouvelles technologies d’information et sur l’informatique en générale.

2. Définir les fonctionnalités de base (Quoi ?)

Maintenant que l’on sait ce que l’on va faire, nous pouvons réfléchir aux fonctionnalités maîtresses.

L’important ici, comme pour l’étape précédente est de bien détailler les fonctionnalités et déjà réfléchir à leurs possibles évolutions.

Exemple non détaillé :

Forum public / privé
Système d’inscription
Gestion de profil des membres
Préférences des membres
Shoutbox
Messagerie membre à membre
Systèmes de notifications
Système de newsletter
Système de ranking
Système de réputation
Système de modération
Gestion & Administration

3. Définir les scénarios de navigations (Comment ?)

Maintenant nous savons qui va faire quoi. Nous devons donc déterminer comment.

Cette étape peut se révélé être très simple comme devenir un véritable casse-tête. Tout dépend de ce que l’on souhaite faire. Il s’agir d’imaginer et de concevoir comment un utilisateur lambda va réaliser des actions et utiliser les fonctionnalités décrites plus haut.

Le mieux pour s’organiser est d’écrire des scénarios généraux, puis de détailler chaque fonctionnalité à part.

Etablir un nombre important de scénarios permettra de faciliter le design et le développement du site. Cela permet de mettre en évidence quels fonctionnalités / outils / contenus sont à mettre en évidence ou à rendre discret dans certaines situations.

Exemples :

De n’importe où sur le site : accéder en clic à sa messagerie personnelle.

Arriver sur site, consulter un sujet, allez sur la page d’inscription du site, remplir le formulaire et validez. Attendre le mail de confirmation. Activer son compte et consulter sa page de profil.

Toutes mes félicitations : votre projet est né ! Il est temps de le baptiser !

II. Le design

1. Définir un thème graphique

La première étape de design consiste à définir l’esthétique générale du site. Cette esthétique doit être en adéquation avec le public visé.

Par exemple, il faut éviter de choisir un thème gothique pour un magazine d’informations générales pour la ménagère de moins de 50 ans.

Plus le public cible est large est varié, moins l’esthétique doit être forte et prononcée. Par contre, si la cible est une catégorie de personnes bien précises, il est quasiment indispensable de marquer l’esthétique.

Exemple : un site d’actus pour les geekettes, il doit être un minimum girly et marquer l’appartenance à la technologie.

2. Conceptualiser les étapes des scénarios

Grâce à notre thème graphique, nous allons enfin pouvoir mettre en image les fonctionnalités du site.

Ici, il s’agit d’établir de manière schématique les différentes actions possibles pour les utilisateurs.

3. Rédiger les principaux textes

Il est important de rédiger les textes les plus importants assez tôt ; désignations des boutons, titres des encarts, labels des champs et autres textes de fronts (accueil, messages d’informations, accroches).

Ceci pour éviter d’être confronter à des problèmes d’intégrations et de devoir revoir certains concepts ou propriétés ou parce qu’un texte ne rentre pas. Mais si dans l’absolu, tout l’art du webdesigner consiste à concevoir des sites qui s’adapte au contenu, mieux vaux savoir quels seront les impératifs à respecter en termes d’adaptabilité.

4. Faire une maquette graphique

Une maquette graphique consiste en une représentation idéaliste du projet de site dans un état donné. C’est-à-dire que vous devez représenter dessus ce qu’un utilisateur pourra voir en prenant un cas particulier.

Aujourd’hui, il est souvent nécessaire de faire plusieurs maquettes graphiques des sites. En raison de la grande diversité des supports et notamment de résolutions d’écrans, il faut prévoir à quoi noter site ressemblera sur ces supports.

Plus la maquette graphique est détaillée et complète, plus le développement et surtout l’intégration sera facilité.

III. Le développement

Que votre site soit en PHP, Ruby, ASP ou n’importe quel autre langage. Une bonne conception de site passe par une conception Modèle / Vue / Contrôleur (MVC).

Il s’agit de séparer le code définissant les modèles de données, celui effectuant des contrôles et de la gestion sur les modèles et celui dédié à l’affichage et aux interactions avec l’utilisateur.

Cette séparation ne doit pas uniquement être physique (dans des fichiers séparés), mais aussi logique (du point de vue de l’exécution du code). Concrètement, le code des modèles, des contrôleurs et des vues ne doivent pas être dépendent les uns des autres.

En pratique ça donne quoi ?

Pour les modèles : ceux-ci doivent pouvoir être utilisé dans n’importe quel contexte (autres sites, autres environnement)
Pour les contrôleurs : ils doivent avoir une exécution ininterrompue. C’est-à-dire qu’ils doivent gérer tous les cas d’erreurs et d’exceptions et fournir une réponse voulue. En clair, ils ne doivent pas planter, même si le code des modèles ou des vues à côté fait n’importe quoi.
Pour les vues : ici, le but est d’avoir un affichage indépendant du contexte. A savoir, en fonction du résultat d’un contrôleur, elles doivent toujours offrir un résultat cohérent.

1. Concevoir les modèles de données

La première étape de la programmation d’un site consiste à concevoir les modèles de données. Pour faire simple : majoritairement il s’agit de concevoir la base de données qui sera interfacée avec le site.

Celle-ci peut s’avérer très simple dans le cas d’un site de type blog (une suite d’article daté). Mais dans le cas de sites offrants des fonctionnalités plus complexes, la conception de la base de données n’est pas à négliger. Que ce soit aux niveaux des performances du site ou de la facilité de maintenance, des modèles bien réfléchis, optimisés et intégré c’est déjà un bon départ pour assurer une longue vie au site.

Cette conception ce fait avec un Modèle logique de données (MLD) qui est indépendant d’un langage de programmation.

2. Développer les modèles

Une fois la base de données en place, il est temps de passer à la programmation… enfin !

La programmation débute par créer les modèles de données et à les interfacer avec la base de données. Ceci peut être réalisé avec l’aide d’un ORM (Object-Relationnal Mapping) qui permettra de d’interfacer directement les modèles crées avec la base de données.

L’avantage d’un ORM est qu’il permet de lier de manière logique les modèles entre eux par des contraintes.

Par exemple, un article de blog possède du contenu une date et un auteur. Il s’agit donc d’un modèle, mais un auteur d’article est lui aussi un modèle (pseudo, email, date d’inscription, ….).

Un ORM permettra de lier ses modèles en disant, qu’un article est toujours lier à un et un seul auteur. De même un auteur peut avoir aucun, un ou plusieurs articles.

3. Développer les contrôleurs

Une fois les modèles en place, il est désormais possible de développer les différents contrôleurs. C’est-à-dire tous ce qui permettra de gérer et de travailler avec les modèles.

Un exemple simple en lecture : avoir une liste d’articles de tel auteur trié par date. Le contrôleur va vérifier que les articles sont bien affichable (pas de modération, contenu non masquer, …) et que l’utilisateur à le droit de les consulter (utilisateur non banni, article dans la bonne langue, …).

Un autre exemple en écriture : lors de l’inscription d’un utilisateur, vérifier le pseudo, le mot de passe, l’email, ….

IV. L’intégration

Dans le modèle MVC on a fait le M puis le C, il nous reste donc le V. Les vues, il s’agit donc bien sur des pages vues par les utilisateurs, mais aussi les pages d’administration jusqu’aux résultats de scripts console se lançant directement sur le serveur (même en ASCII ça reste une vue J).

1. Intégrer le design

Dans les vues, je conseille de commencer par intégrer le design du site. Cela permet de vérifier assez rapidement que le design convient et de faire des retouches au besoin.

Pour bien intégrer un design, il est nécessaire de maîtriser le CSS. Le but de l’intégration est transcrire un dessin en page web dynamique, il va donc falloir traduire des éléments graphiques de base en éléments web.

Tout l’art de l’intégration constant à recourir à un minimum d’images et de règles CSS pour un maximum de respect de dessin original.

2. Intégrer les textes

Une fois le design en place, vous pouvez insérer dans les pages, tous les textes fixes.

Ces textes sont particulièrement importants. Ce sont eux qui vont être repérer en priorité par les moteurs de recherche et également ceux qui vont renseigner les nouveaux utilisateurs sur le site.

Bien intégré c’est texte en utilisant tous les moyens possibles (couleurs, gras, italique, taille, …) permet de capter facilement l’attention et d’informer efficacement sans gêner la lecture pour l’utilisateur.

Ensuite, vous pouvez vous assurer que les textes dynamiques s’intègre bien dans le design. Notamment les infobulles, les menus, et les principaux titres dynamiques.

3. Intégrer les médias

Si votre site comporte des médias riches (animations, sons, vidéos, …), leur intégration doit être particulièrement soignée. En effet, la plupart des utilisateurs trouvent les médias riches envahissants et dérangeants.

Donc, les animations doivent rester discrètes, les sons doivent pourvoir facilement être coupés et les vidéos ne devrait pas se déclencher automatiquement. Sauf, dans des cas exceptionnel et évidant, comme une page qui intègre uniquement un lecteur vidéo et une playlist, par exemple.

Dans tous les cas, l’accent doit être mis pour mettre en avant l’information recherchée par l’utilisateur.

4. Enrichir l’expérience utilisateur

Votre site est presque fini, il ne manque plus que les finitions. Et c’est peut-être là le plus important, tous ces petits détails qui font que l’utilisateur se sente bien, et que les moteurs de recherches lisent correctement les pages.

Enrichir un site peut être fait d’une multitude de manière.

Parmi les plus « vielles » méthodes : la newsletter, le flux RSS, les notifications en espace membre, etc. Mais il faut penser aussi, aux réseaux sociaux, aux sitemaps, aux micro-données, aux retours participatifs (les utilisateurs eux-mêmes qui enrichissent le contenu), et la liste est longue.

Voilà ! Votre site est prêt à être diffusé !

V. La production

La mise en production d’un site rassemble toutes les dernières étapes qui ne peuvent être correctement faîtes que si site fonctionne en condition réelle.

1. Mise en ligne

Une mise en ligne réussie est une mise en ligne qui ne se voir pas !

Afin d’éviter de crée des erreurs d’entrée de jeu sur votre site, il convient de préparer la mise en ligne. En effet, une mise en ligne prend du temps (configurations, upload, …). C’est un laps de temps ou le site est accessible via son URL mais où il n’est pas totalement prêt à accueillir les visiteurs.

Le plus simple est de rediriger l’ensemble du trafic sur une simple page d’explication le temps de la mise en ligne. Le but étant au final de pourvoir activer le site en une seule action brève.

2. Tester le site

Une fois en ligne, vous pouvez tester l’ensemble de votre et notamment les fonctionnalités spécifique à une exécution sur un serveur distant. A savoir, les systèmes d’upload, de mailing, ou toute action nécessitant des extensions particulière sur le serveur web.

Le mieux étant d’avoir un environnement de développement avec un accès restreint, mais ce n’est pas toujours possible ni forcément nécessaire (dans le cas d’un petit site relativement fixe).

3. Intégrer les ressources externes

Ça y est ! Tout fonctionne enfin ! Le dernier coup d’éponge consiste à intégrer toutes les ressources des services extérieurs.

Les services de statistiques, comme Google Analytics et New Relic, les services de publicités ou encore l’intégration des réseaux sociaux (de type flux des posts, partage rapide, …).

Avec tout ça en place vous êtes on ne peut plus prêt alors c’est parti !

Ouverture du site !

4. Ouvrir le site

Vous pouvez rendre le site accessible au public, et là, il ne faut pas oublier le plus important : prévenir tout le monde !

Si votre site rencontre suffisamment de visiteurs, le travail ne fait que commencer et il faudra maintenir le site et adapter des fonctionnalités et/ou en apporter de nouvelles.

Plus vous avez soigné votre création de base et plus la maintenance et l’ajout de fonctionnalité sera facilité.

Merci d'avoir suivi jusqu'au bout !

Implémenter Google Universal Analytics

Anaeria — Thu, 27 Mar 2014 17:24:06 GMT

Nous allons voir comment intégrer efficacement Google Analytics sur les pages web.

Il s'agira d'intégrer la version Universal Analytics (par défaut) en version asynchrone. Le tutoriel se fera en 2 parties, premièrement les étapes d'administration dans l'interface de Google Analytics, puis l'intégration du code de suivi.

I - L'interface de Google Analytics

1. Ajouter un site

Une fois sur le tableau de bord (disponible ici : https://www.google.com/analytics/web/?authuser=0)

Allez dans l'onglet "Admin" tout en haut de la page sur la gauche.

Vous arrivez sur une vue à 3 colonnes : Compte, Propriété et Vue.

Vous pouvez posséder plusieurs comptes; chaque compte contient des propriétés (plus ou moins un "site", mais cette notion peut-être beaucoup plus fine que cela).

Enfin chaque propriété contient des vues, a savoir des accès rapides a des données filtrées. Par exemple, une vue par sous-domaine.

Ici, ce qui nous intéresse c'est d'ajouter un site. Nous allons donc crée une propriété. Pour cela, dans le menu déroulant de la colonne "Propriété", sélectionnez "Créer une propriété".

2. Configurer le site

Nous avons plusieurs options :

Le premier choix consiste à sélection un site web ou une application mobile.
En suite, nous devons choisir entre "Universal Analytics" et "Classic Analytics". Dans ce tutoriel, je montrerai l'intégration de la version "Universal Analytics", plus complète.
Ensuite donner un nom a votre site web
Renseignez le nom de domaine (Attention : de préférence ne pas mettre de "www" sauf dans le cas ou l'on souhaite gérer les sous-domaines séparément)
Sélectionnez la catégorie sectorielle. Ici, c'est en fonction du type de site web à suivre, au pire on peut choisir "Autre".
Enfin choisissez votre fuseaux horaire préféré

Cliquez sur "Obtenir un ID de suivi" et voilà !

Google va vous proposer un code d'intégration, mais je préfère en fournir un autre qui présente plein d’avantages !

Pour poursuivre il faut juste retenir l'ID de suivi généré sous la forme : UA-XXXXXX-X

La première partie sera toujours identique pour votre compte et le derniers chiffre s'incrémente à chaque propriété crée.

II - Intégrer le code dans une page

La première partie s’intègre dans le header de votre page. C'est à dire entre les balises et :

Alors, c'est quoi ce machin et comment ça marche ?

Cette syntaxe permet de charger Google Analytics de manière asynchrone, c'est à dire que sont chargement ne perturbera pas l'exécution de votre page.

Concrètement ce script déclenche une fonction anonyme qui va rajouter des balises

Une fois ce script mis en place, il reste deux petits bout de code à intégrer.

Dans le corps de la page, idéalement juste après le

Remplacer l'identifiant, par celui fourni par Google.

Et enfin en toute fin de page juste avant le , on va pouvoir déclencher le script. Vous devez reprécisez les informations sur suivi dans cet appel : le code de suivi et le nom de domaine. C'est également ici que s'intégreront diverses options au besoin.

Une fois tout ça intégré, le script prends effet immédiatement et vous pouvez consulter le résultat dans la section "Temps réel" de l'onglet "Création de rapport" et voir que tout marche.

Un éditeur de texte modulable et simple

Abraham — Thu, 13 Mar 2014 22:48:31 GMT

Salut à tous,

Je viens vous présenter ce soir un éditeur de texte (pas vraiment un IDE) multi-langages que j'apprécie particulièrement pour sa sobriété, sa modularité et sa puissance.
Je ne vais pas vous en faire l'éloge pendant des lignes et des lignes, puisque après tout les goûts de chacun sont déterminants dans le choix d'un environnement de travail.

Sans plus attendre, voici le lien de téléchargement : Sublime Text

Je vous conseille de télécharger la version 2 qui est plus aboutie et plus stable que la 3ème.
Je rajouterai à la suite de ce topic quelques rapides tutoriels pour vous expliquer comment modifier l'environnement à votre guise à l'aide de différents plugins.

Bonne soirée à tous.

Introduction aux sites web

Soulalex — Thu, 13 Mar 2014 20:09:47 GMT

/applications/sslimageproxy/interface/image.php?url=http://www.gouffaprod.com/wp-content/uploads/2011/02/site_internet.jpg"/>

Un site web est dans la plupart des cas très complexe en réalité. En effet, lorsque vous cherchez à accéder à une page d'un site, vous envoyez une requête à l'hébergeur avec les informations que vous voulez obtenir à la fin. L'hébergeur va traiter cette requête en fonction des critères puis il vous enverra un code HTML que le navigateur sera capable de traduire.

Fonctionnent d'un site web :

Lorsque vous naviguer sur une page internet, vous êtes amené, sans le savoir, à envoyer une requête voir plusieurs au serveur du site en question. Le serveur va traiter cette requête et gérera la page en fonction des critères de celle-ci avant de vous l'envoyer.

Schéma d'une requête à un serveur dans le cas d'une site statique. OpenClassrooms

Selon le type de site que vous voulez réaliser plusieurs langages vont s'ouvrir à vous. Un site statique est principalement codé en HTML et CSS, donc le webmaster doit modifier le code source à chaque mise à jour du site. Au contraire, un site dynamique aura des fonctions beaucoup plus avancées grâce notamment au PHP et au SQL qui permettront, combiné ensemble, de créer des interface ajoutant dynamiquement via un formulaire du contenu sur le site.

Schéma d'une requête à un serveur dans le cas d'une site dynamique. OpenClassrooms

Ainsi, les langages HTML et CSS sont conçus pour mettre en forme le site tandis que le PHP et le MySQL sont conçus pour dynamiser le site. Ces quatre langages ne sont pas les seuls bien sûr, il en existe bien d'autres comme le JavaScript permettant l’exécution de scripts par le navigateur chez l'internaute ou bien encore le ASP .NET et le Django.

Schéma d'une requête à un serveur dans le cas d'une site contenant un script JavaScript. OpenClassrooms

Programmer son site web :

Pour réaliser un site web complet, vous aurez besoin de nombreux outils et surtout de beaucoup de temps. Pour commencer, un serveur web : Apache vous permet de créer et d'héberger votre propre site. Combiné à Apache, PHP vous permettra d'utiliser le langage PHP dans tous vos scripts réaliser sur votre serveur web. Enfin, PHP ne sort jamais sans bases de données, je vous propose donc le célèbre système de gestion de base de données (SGBD) MySQL qui vous permettra de stocker des données de votre site dans les bases de données de MySQL. Pour coder votre site web, je vous laisse le choix entre plusieurs outils : le Bloc-notes (classique mais fonctionne très bien), Notepad++ (bien mieux que le bloc note) ...

Ça fait beaucoup de logiciels à installer, heureusement, des logiciels regroupent ces trois logiciels (Apache, PHP, MySQL) et vous permettent de contrôler votre serveur web bien plus facilement. Notamment Xampp compatible avec Windows et Linux, Wamp compatible avec Windows ou encore Lamp.

De nombreux guides existent vous permettant d'apprendre à créer un site web de A à Z :

Cours OpenClassroom sur le HTML/CSS : Cours très instructif pour concevoir un site statique et élégant.
Cours OpenClassroom sur le PHP/MYSQL : Cours très instructif pour concevoir un site dynamique.
Cours OpenClassroom sur le PHP orienté objet : Cours très instructif pour utiliser les objets en PHP.
Documentation officiel PHP : Très utile quand vous recherchez des fonctions ou pour connaitre l'utilité d'une d'entre elles.