Analyse & Gestion de projet web

Transcription

1 Analyse & Gestion de projet web

2 Sommaire Contenu du cours...4 La législation...4 La Cnil...4 L accessibilité, une obligation légale...4 Google images...5 Mentions légales...5 Les conditions générales de ventes dans le cas d'un E-commerces...6 Fabriquer l'arborescence de votre site...7 Comment faire un devis ou un cahier des charges...8 Les règles de base du graphisme...0 Les couleurs...2 Flat design...5 La règle du nombre d'or...6 Règle de base de la photographie...7 Conseils de professionnels pour la photographie dans vos sites ou réseaux sociaux...8 Les logos...20 QR CODE...2 Règle de base pour la conception de son LOGO...22 Les images et le Web...24 Le cas du point.tel...25 Avoir son Gravatar...26 Créer et lire un QRcode...26 Gestion du contenu de votre projet de site web...27 Le flux RSS...28 Faire de la veille technologique...29 Les outils du webmaster...30 Notepad Quelques CMS...33 Base de donnée Mysql...34 Type d'hébergements en ligne de sites Internet...34 Les noms de domaines...36 Comment choisir son nom de domaine

3 Sites marchands liste des VADs...39 Faire un Favicon dans votre site...4 Annexe exemple de réalisation d'un cahier des charges web...42 Présentation du projet du site...42 La cible :...42 Nom de domaine...42 Hébergement...43 Outils préconisés pour la réalisation du site...43 Arborescence...43 Menu horizontal...43 Menu vertical gauche ou droit...43 Menu horizontal bas de page...43 Couleurs...44 Favicon...44 Polices...44 Logo...44 Mots-clefs métiers...45 Flux et partage d informations...45 Réseaux sociaux Entreprises...45 Exemple d'extensions du site :...45 Séo & Référencement Google et autres moteurs...45 Liste des pages...46 Maquette du site...46 Les rôles de chacun...46 formation pour la prise en main de l'alimentation du site...46 Maintenance...46 Référencement...46 Sécurité...46 A PROPOS DE L'AUTEUR...47 Son site : Sa page Facebook : Remerciement & sources

4 Contenu du cours Webmaster & webdesigner c'est un métier, dans ce cours vous allez voir les fondamentaux du métier. La législation, la préparation d'un projet web est la base d'une réalisation web sans soucie. Connaitre les outils savoir en parler, préparer un devis ou un cahier des charges, voila en quelques mots se que vous allez voir. La législation La Cnil La Commission nationale de l'informatique et des libertés (CNIL) est une autorité administrative indépendante française. La CNIL est chargée de veiller à ce que l informatique soit au service du citoyen et qu elle ne porte atteinte ni à l identité humaine, ni aux droits de l homme, ni à la vie privée, ni aux libertés individuelles ou publiques. Elle exerce ses missions conformément à la loi n 78-7 du 6 janvier 978 Droit à l image Le droit à l'image des personnes en France repose sur plusieurs textes législatifs ; la jurisprudence y tient une place importante. Le principe de droit général est qu'il n'est possible de diffuser une photographie représentant une personne reconnaissable qu'avec son autorisation. Plusieurs exceptions notables existent toutefois. L accessibilité, une obligation légale En France, la loi du février 2005 en faveur de l égalité des chances fait de l accessibilité une obligation pour tous les services de communication publique en ligne de l Etat, des collectivités territoriales et des établissements publics qui en dépendent. Loin de se limiter à une obligation légale, l accessibilité numérique est un levier puissant qui permet de faciliter le quotidien des personnes en situation de handicap mais aussi d améliorer l ergonomie, l utilisabilité des sites web. Une telle démarche permet ainsi de rationaliser les coûts et d anticiper les usages et d offrir à ces utilisateurs la meilleure navigation possible. 4

5 Google images Google image vous permet de faire des recherches sur le thème des images, attention toute images ne sont pas toute libre de droits ces Mentions légales Tous les sites internet édités à titre professionnel, qu'ils proposent des ventes en ligne ou non, doivent obligatoirement indiquer les mentions légales suivantes : pour un entrepreneur individuel : nom, prénom, domicile pour une société : raison sociale, forme juridique, adresse de l'établissement ou du siège social (et non pas une simple boîte postale), montant du capital social adresse de courrier électronique et numéro de téléphone pour une activité commerciale : numéro d'inscription au registre du commerce et des sociétés (RCS) pour une activité artisanale : numéro d'immatriculation au répertoire des métiers (RM) numéro individuel d'identification fiscale : numéro de TVA intracommunautaire pour une profession réglementée : référence aux règles professionnelles applicables et au titre professionnel nom et adresse de l'autorité ayant délivré l'autorisation d'exercer quand celle-ci est nécessaire nom du responsable de la publication coordonnées de l'hébergeur du site : nom, dénomination ou raison sociale, adresse et numéro de téléphone pour un site marchand, conditions générales de vente (CGV) : prix (exprimé en euros et TTC), frais et date de livraison, modalité de paiement, service après-vente, droit de rétractation, durée de l'offre, coût de la technique de communication à distance numéro de déclaration simplifiée Cnil, dans le cas de collecte de données sur les clients Avant de déposer ou lire un cookie, les éditeurs de sites ou d'applications doivent : informer les internautes de la finalité des cookies, obtenir leur consentement, fournir aux internautes un moyen de les refuser. Le manquement à l'une de ces obligations peut être sanctionné jusqu'à un an d'emprisonnement, d'amende pour les personnes physiques et pour les personnes morales. 5

6 6

7 Les conditions générales de ventes dans le cas d'un E-commerces Obligatoires, elles doivent contenir les dernières modifications concernant la loi "Hamon" Contenir les mentions légales Les modalités de paiement Les conditions de garanties L'expédition et le délai de livraison Le délai de rétractation Les bases de calcul des frais de ports Un document détaillé sur les conditions générales de vente est disponible à l'adresse: 7

8 Fabriquer l'arborescence de votre site Voilà un outil intéressant qui va vous permettre de réaliser l'arborescence de votre site, ainsi vous pourrez le faire valider par votre client. Write Map (gratuit pour trois plans de site) 8

9 Comment faire un devis ou un cahier des charges Tout vrai professionnel se doit de faire un cahier des charges ou un devis, pour éviter de se tromper. Il doit se poser les bonnes questions: La cible? (des particuliers, des professionnelles? ) les mots le langage sera différant Le nombre de pages? (pensez que Google considère un site de qualité à partir de 5 pages) Le contenu? (est-il fourni) ou faite vous appel à un rédacteur Les images? (sont-elles fournies), une banque d'images comme "fotolia" peut vous rendre service, pensez à rajouter les crédits photos dans les mentions légales. L'arborescence du site? (faite la valider, si elle n'est pas fournie) Charte graphique? (les codes couleurs, le logo, la forme ) Un template? (vous fournit-on une maquette) Un nom de domaine? existe il, réservez le dans le cas contraire Un hébergeur? (prendre en considération la taille le nombre de visite, un e-commerce, une association ou professionnel) Les langues? le site à t'il des langues complémentaire ( Français/Anglais) E-commerce? le client veut il une boutique, peut être que juste un bouton d'achat "Paypal" suffit. Le référencement? trop souvent oublié lors de la conception, posez la question à votre client E-communication? à ce jour un site professionnel doit partager ses informations aux travers des réseaux sociaux. Formation client? votre client sera t'il autonome pour la gestion du contenu, lors de la livraison de votre site? Assistance? les mises à jours, les versions du CMS, les sauvegardes, qui fait quoi 9

10 Exemple de modèle de calcul d'un devis pour un site sous le CMS Joomla Description prestation Création de site Nom de domaine Hébergement Installation Cms Joomla Installation & paramétrage Galerie photo Installation & paramétrage VirtueMart Installation & paramétrage Akeeba backup Installation & paramétrage Editeur JCE Installation & paramétrage Proformbasic Installation & paramétrage Xmap Création Template graphique Création des menus Création des articles de pages (pres-rempli) Création des liens de menu Création des catégories de la boutique Création des produits Création des liens de menus de la boutique Installation du module "panier" Installation du module "likebox" Installation du module "map" Installation du module "type personnalisé" Création d'un blog Description prestation Référencement Paramétrage SEO partie configuration Paramétrage SEO partie Alias menu Paramétrage SEO partie Alias article Paramétrage SEO partie article page Paramétrage SEO partie article produits Paramétrage SEO partie template Paramétrage SEO Google plus Paramétrage SEO Facebook Paramétrage SEO Xmap Inscription Google Inscription Yahoo Bing Branchement Google analitycs Formation Une journée de formation sur site Assistance Un an er niveau Qté Qté Temps heure --- heure heure 4 heures heure heure 4 heures heure 8 heures heure heure 2 heures heure 2 heures heure heure heure heure heure heure Temps heure 4 heures 4 heures 2 heures heure heure 2 heures 2 heures heure 2 heures 2 heures 4 heures Prix Prix Total 0 Oui/non Oui/non

11 Les règles de base du graphisme La règle du nombre d'informations : Ne dépassez pas 9 informations par interface, en effet c'est le nombre maximum que le cerveau peut enregistrer à la fois. Règle sur les polices: Ne dépassez pas trois polices différentes sur un site, exemple une pour le titre du site, une pour le titre des pages, une pour le texte Dafont.com est un des sites intéressant pour trouver et télécharger des polices pour votre site. Attention si dans votre site vous avez une police "non standard" elle ne sera pas lue et elle se verra remplacée par une autre police, dans ce cas prévoyez plutôt une image ou insérez une police Google Font.

12 est l'adresse d'un site qui peut vous rendre service. Il suffit de choisir une police de copier le code et de le mettre dans le fichier CSS de votre site. Exemple de code généré par Google font à insérer dans votre site Comment reconnaitre une police sur une image Sur ce site vous pouvez uploader une image, elle reconnaitra la police dessinée sur cette image. 2

13 Les couleurs La règle des trois couleurs: La règle des trois couleurs est un commandement sacré. Ne dépassez pas trois couleurs pour un site, toutefois il existe des cas particuliers dans le cas des teintes. le noir et le blanc sont des teintes alors que le rouge, le bleue sont des couleurs. Symbolique des couleurs Le noir et le blanc ne sont pas considérés comme des couleurs. Ils sont très peu présents dans la nature à l état pur. On peut donc facilement les associer avec n importe quelle couleur. Le gris, très neutre, s accorde aussi avec beaucoup de couleurs. Privilégier toujours les couleurs plus sombres pour le bas. Un site intéressant pour aller plus loin sur les couleurs : 3

14 Tableau récapitulatif sur la symbolique des couleurs ROUGE BLEU VERT JAUNE BLANC Force Passion Puissance Interdiction Danger Virilité Courage Action Force Paix Vertu Immatérialité Méditation Sagesse Rêverie Confiance Bonté Calme Sécurité Foi Féminité Espérance Nature Immortalité Repos Foi Jeunesse Fécondité Satisfaction Calme Science Conscience Idéalisme Action Luminosité Orgueil Jalousie Calme Sécurité Pureté Innocence Chasteté Richesse Silence OR/ARGENT Immortalité Richesse Gloire (or) Respect (argent) Dignité (argent) ORANGÉ VIOLET Energie Ambition Enthousiasme Imagination Richesse Honneur Politesse Jalousie Mystère Spiritualité Mélancolie Tristesse Modestie Religion Inconscient Secret Ténèbres Mort Piété Noblesse GRIS NOIR Sobriété Tristesse Modernisme Peur Monotonie Mort Deuil Nuit Mystère Monotonie Tristesse Détresse Angoisse Noblesse Distinction Élégance Silence Symbolique des couleurs par civilisations ROUGE BLEU VERT JAUNE BLANC Chine Joie Mariage Paradis Légèreté Dynastie Ming Paradis Légèreté Naissance Santé Force Mort Pureté Egypte Mort Méchanceté Désert Vertu Vérité Fidélité Immortalité Fertilité Force Islam Joie Prospérité Joie Fête Etatsunis Danger Masculinité Sécurité Lâcheté Pureté France Anarchisme Communisme Liberté Paix Royauté Criminalité Temporalité Monarchie Neutralité Inde Vie Créativité... Prospérité Fertilité Succès Mort Pureté Japon Colère Danger Méchanceté Bassesse Futur Jeunesse Énergie Grâce Noblesse Mort Source : CRIM formation - Ecole polytechnique de Montréal 4

15 Association des couleurs Le cercle chromatique correspond au dégradé des couleurs. Les couleurs primaires : bleu, rouge magenta, jaune. Les couleurs secondaires : vert, orange et violet qui résultent du mélange des trois couleurs primaires. Les couleurs tertiaires : pourpre, écarlate, indigo, turquoise, vert chartreuse, doré. Le contraste de couleur revient à associer deux couleurs opposées sur le cercle chromatique. Les associer : c est risqué! Se servir du site "Colourlover" pour associer des couleurs Vous pouvez aussi vous servir du site " pour vous aider à choisir les couleurs de vos interfaces. Connectez vous sur ce site, cliquez sur la loupe du moteur de recherche interne, dans le formulaire cidessous saisissez un code couleur ou un mot-cles, le site vous fera des propositions de couleurs. 5

16 Flat design Définition du flat design A ce jour tout deviens Flat design, plus qu'une mode on le retrouve partout, un exemple regardez vos smartphones. Le flat design est un style graphique associé au design de sites internet, c est un sous-genre du courant minimaliste. Il se caractérise par des formes simples, sans textures, ni effets de volumes. Les couleurs, souvent vives sont utilisées en aplats. Certains éléments récurrents sont caractéristiques à cette tendance comme les icônes dessinées sous forme synthétique et l utilisation de polices de caractères non standards, notamment dans les titrages, qui peuvent être de taille importante. Si le style flat fait beaucoup parler de lui en ce moment, il n en reste pas moins que le graphisme épuré et minimaliste en web design n est pas nouveau. Flat ou pas flat design Site responsive Le responsive web design site responsive est un site qui s'adapte aux formats des smartphones et tablettes, pour information Google prends en compte ce critère pour l'indexation des sites dans son moteur de recherche. Le responsive web design ou site adaptatif, qui permet d adapter un site à la taille d un écran, rentre de plus en plus dans les habitudes de conception web. Beaucoup de designers intègrent même cette fonctionnalité par défaut dans tout leur site, considérant, à raison, qu il s agit d un devoir d accessibilité. Les contraintes du responsive imposent des éléments graphiques permettant une certaine 6

17 souplesse d utilisation, pour pouvoir facilement les modifier selon la taille de l écran, sans alourdir le site. Ce qui veut dire que les composants vectoriels sont préférés aux images bitmap, plus rigides. Et pour ce genre d image, le flat design est très approprié. Le flat a l air donc bien parti pour s attirer les faveurs des développeurs allergiques aux images complexes, issues des esprits torturées des designers! Un bon exemple qui montre que design et développement peuvent faire bon ménage! La règle du nombre d'or La règle du nombre d'or fait partie des programmes de formations pour les écoles d'arts, les architectes, les décorateurs. En respectant la règle du nombre d'or vous mettrez votre logo au bon endroit, respecterez la bonne taille d'image, positionnerez le sujet de votre photo correctement Définition : Le nombre d'or est une proportion, définie initialement en géométrie comme l'unique rapport a/b entre deux longueurs a et b telles que le rapport de la somme a + b des deux longueurs sur la plus grande (a) soit égal à celui de la plus grande (a) sur la plus petite (b) c'est-à-dire lorsque (a + b)/a = a/b. Le découpage d'un segment en deux longueurs vérifiant cette propriété est appelé par Euclide découpage en «extrême et moyenne raison». Le nombre d'or est maintenant souvent désigné par la lettre φ (phi).ce nombre irrationnel est l'unique solution positive de l'équation x2 = x +. Il vaut exactement : soit approximativement, Nombre d'or dans la peinture ou dans la photographie Vous allez voir des exemple plus concrets dans les exemples ci-dessous. 7

18 Règle de base de la photographie La règle des tiers (ou règle d'or), les lignes de force La règle des tiers, aussi appelée règle d'or, c'est la règle des règles en photo... Tout le monde la connaît, peu de gens la respectent. Le principe est très simple : pour bien cadrer, cherchez toujours à placer le sujet de votre photo (ce que vous souhaitez que le lecteur regarde en priorité) sur un point fort de l'image.. Les points de croisement des lignes rouges sont les points forts de l'image. Dans la majorité des cas, placer le sujet principal de la photo sur un de ces points est une bonne chose. Remarque importante La règle des tiers s'applique également au ciel dans vos compositions! Sauf cas de ciel très joli et chargé de beaux nuages, il est donc inutile de présenter une surface énorme de ciel pour un tout petit bout de terre, surtout si votre sujet est à terre! C'est une «erreur» très classique.. 8

19 Conseils de professionnels pour la photographie dans vos sites ou réseaux sociaux Vous photographiez un objet, utilisez un trépied pour éviter les photos floues Vous photographiez des petits objets, utilisez un objectif de type "Macro" Pour éviter les images floues, en plus d un pied utilisez un retardateur ou un déclencheur à distance Photographiez en musique pour décontracter votre personnage. Faites assoir votre personnage Coupez le haut de la tête pour faire ressortir les informations essentielles «.2.3 souriez» à proscrire, pas de décompte Resserrez la cadre autour du sujet 9

20 Photographiez les profils horizontalement Le format vertical est le format des pros Le sourire n'est pas une obligation 20

21 Ne photographiez pas un portrait les épaules en face de l'appareil Photographiez de trois quarts vos sujets (nombre d'or) Les logos On retrouve le logo sur l ensemble des supports Carte de visite papier 2

22 Carte de visite CD et CD ROOM QR CODE Moyens de communication dans lesquels apparaissent vos logos Les Pages jaunes, Le point tel, Site Internet, E-commerce, QR CODE, Carte de visite, Affiche, Plaquette. Un dénominateur commun le LOGO 22

23 Règle de base pour la conception de son LOGO Règle n : votre logo sera simple. La sobriété du design d un logo inspire confiance aux utilisateurs. Plus votre logo est simple, plus il reste en mémoire. De multiples exemples viennent à l esprit: Apple, Nike, VW, CNN, Bayer, etc. Quel que soit le domaine d activité, des sociétés mondialement connues ont choisi des logos simples et facilement reconnaissables partout dans le monde. Pensez-y si vous songez à développer votre activité internationale et assurez-vous que votre nom logo soit compréhensible dans toutes les langues. Règle n 2: votre logo sera équilibré. Les proportions d un logo sont d autant plus importantes que l esprit perçoit un design harmonieux comme naturellement agréable et attrayant. Pour atteindre une telle harmonie, votre logo doit miser sur l équilibre entre graphisme, couleurs, typographie. Les dimensions de votre logo importent également: n oubliez pas de tester la lisibilité de votre logo dans différentes tailles. Le nom et les détails graphiques doivent rester visibles et compréhensibles même si vous réduisez votre logo (pensez à son utilisation sur des enveloppes, votre papier à entête, etc.). Pensez également aux restrictions propres à certains médias ou aux réseaux sociaux (qui réclament souvent un affichage dans un carré). Règle n 3: votre logo maîtrisera ses couleurs. La théorie des couleurs est fort complexe mais si vous appliquez quelques règles de base, vous minimiserez les risques d erreurs : les couleurs évoquent des sentiments et des humeurs et elles n ont pas forcément la même signification d un pays à l autre le choix d une palette de couleurs (chaudes ou froides) est important car il reflète l esprit de votre marque le choix d une couleur particulière ou d une association de couleurs «innovante» peut devenir un signe distinctif (ex:, le rouge Coca Cola.) Attention: votre logo doit pouvoir se décliner en noir & blanc, en niveaux de gris, voire en deux couleurs et rester toujours agréable à regarder! Règle n 4: votre logo se choisira une typo exclusive. Le choix d une typographie est plus subtil qu il n y paraît. Que la typo soit inclue dans le logo ou en «accroche», vous devrez tester un certain nombre de typos avant d en trouver une qui s intègre parfaitement au design. Trois points à considérer : 23

24 Evitez les typographies banales (Arial, Times New Roman, etc.), trop ornementales ou artisanales. Préférez une typo exclusive (quelques exemples marquants: Twitter, Google, Coca Cola, Walt Disney). Assurez-vous que la typo est toujours lisible, même lorsque vous réduisez votre logo à la taille d un timbre poste. Choisissez une seule typo, deux au grand maximum. Règle n 5: votre logo sera original Rappelez-vous, le but premier de votre logo n est pas de décorer mais bien de construire votre notoriété. Il doit donc être unique et facile à mémoriser! Les grandes marques l ont tellement bien compris qu un seul élément de leur logo permet de reconnaître la marque (on songe à Windows, Nike, Mac Donald, Caterpillar, et bien d autres). Règle n 6 Votre logo doit être utilisable sur tous types de support Le déploiement identitaire d une marque ne se réduit plus qu à la simple présence d un logo sur une en-tête de lettre. Une entreprise a aujourd hui les moyens de communiquer sur toutes sortes de supports, print ou multimédias, et son logo doit être travaillé en conséquence. Garder ces questions en tête vous évitera beaucoup d erreurs. Règle n 7. Votre logo devrait être imprimable en noir et blanc. Graphisme et logo, cette règle est une invitation à la simplicité, pour que ce soit le concept lui-même qui fasse la différence, et non la façon dont il est rendu. Règle n 8. Les formes du logo. Les formes arrondies correspondent à la créativités Les formes carrées correspondent au sérieux 24

25 Les formes triangulaires correspondent aux danger Les images et le Web Les images: règles de nommage Vous allez très probablement insérer des images dans votre site, pour la bonne marche de votre projet il faut respecter quelques règles. Retaillez vos images afin qu'elles ne dépassent pas une largeur de 800 pixels Renommez-les avec des noms de mots clés afin de vous donner plus de chance à votre futur référencement. Evitez les majuscules Evitez les espaces entre les mots Evitez les caractères spéciaux Séparez les mots par des tirets Mon-image.jpg mon image.jpg Image-métier.jpg dsc000.jpg mon-image.jpg : oui 25

26 Formats d images recommandés pour vos sites internet Jpg Oui Standard Png Oui Si vous voulez gérer des fonds transparents gif Oui Si ce n est pas une photo Tif Non AI Non SVG Oui EPS Non BMP Non Trop lourd Le cas du point.tel Le.tel est un "annuaire unique mondial".tel permet de stocker, publier et de gérer en ligne toutes vos coordonnées et vos mots-clés, sous un nom de domaine unique, sans avoir besoin de site Web. Un point tel acheté chez Ovh coute une dizaine d'euros par an. L interface de saisie de vos informations 26

27 Avoir son Gravatar Un Gravatar est une image qui vous suit d'un site à l'autre, apparaissant à côté de votre nom quand vous postez un commentaire ou un article sur un blog. Les avatars favorisent l'identification de vos messages sur les blogs et les forums, alors pourquoi pas sur tous les sites? Pour créer son Gravatar : Créer et lire un QRcode Pour créer votre Qrcode, je vous invite à aller sur le site suivant : Choisissez votre type de Qrcode, saisissez vos informations, votre Qrcode est généré Saisissez simplement les informations suivantes : 27

28 Puis téléchargez-le Pour lire un Qrcode depuis un Smartphone, il existe une multitude d'applications gratuites, en voici quelques une : Gestion du contenu de votre projet de site web Ecrire en langage Google Je rédige des contenus rédactionnels adaptés au web et répondant à différentes lignes rédactionnelles. Les règles d écriture web diffèrent de celles de la presse écrite : l écriture doit être concise, rapidement compréhensible et le style dynamique. Oubliez les textes ennuyants à saveur générique et développez la confiance de votre marché d affaires grâce à un contenu de qualité concis, attrayant et accessible! Mes textes sont pensés pour le référencement naturel et optimisés pour vous apporter une plus grande visibilité sur les moteurs de recherche tels que Google. Car l écriture web doit prendre en compte les exigences des moteurs de recherche (densité de motsclés, liens hypertextes ) pour vous offrir des messages qui informent, convainquent et que les moteurs de recherche apprécient! 28

29 Structurer l'information Première étape importante pour un site web accessible, il faut offrir un contenu structuré sur chaque page web avec des titres, paragraphes, listes à puces et autres éléments de marquage sémantique. Décrire les images et les vidéos Il est nécessaire d'ajouter une alternative textuelle à tous les contenus multimédias porteurs d'informations utiles pour les internautes. Si ces contenus sont purement décoratifs, inutiles de les décrire, cela pourrait nuire à la compréhension globale du site. Proposer des tableaux accessibles et agréables Les tableaux sont souvent oubliés dans l'accessibilité d'un site et ils s'avèrent généralement peu lisibles pour les personnes en situation de handicap. Pour des tableaux accessibles, vérifiez que vous pouvez facilement ajouter un titre et un résumé à votre tableau dans votre CMS. Il vous faut aussi identifier clairement les cellules d'entête. Proposer des formulaires en lignes accessibles Autre type de contenus souvent peu accessibles, les formulaires en lignes sont pourtant très utilisés pour tout type de projet web. Le flux RSS Essentiel à ce jour, un site qui fournit du flux rss à plus de chance que les autres d'être bien positionné que les autres dans les résultats de moteurs de recherches. RSS (sigle venant de l'anglais «Really Simple Syndication») est une famille de formats de données utilisés pour la syndication de contenu Web. Un produit RSS est une ressource du World Wide Web dont le contenu est produit automatiquement (sauf cas exceptionnels) en fonction des mises à jour d un site Web. Les flux RSS sont des fichiers XML qui sont souvent utilisés par les sites d'actualité et les blogs pour présenter les titres des dernières informations consultables. On emploie parfois à tort le terme RSS pour désigner le format concurrent Atom. 29

30 Exemple de flux provenant de Facebook Exemple de flux provenant du site Flash-comet Faire de la veille technologique Essentiel dans ce métier. Chez IBM on nous disait une année web est égale à cinq ans. Méthode pour faire de la veille Créer des alertes : vous ajoutez des mots-clés ( par exemple "référencement") et à chaque fois qu'il se passe quelque chose en rapport a ces mots vous recevez un mail. Google Alerte : Méthode 2 pour faire de la veille C'est le même principe que la méthode à la différence que le résultat apparait dans Google actualités. Google actualités : 30

31 Les outils du webmaster Outils Ftp (filezilla) Le File Transfer Protocol (protocole de transfert de fichiers), ou FTP, est un protocole de communication dédié à l échange de fichiers sur un réseau. Il permet, depuis un ordinateur, de copier des fichiers depuis ou vers un autre ordinateur du réseau, d administrer un site web, ou encore de supprimer ou modifier des fichiers sur cet ordinateur. Protocole applicatif pour le transfert de fichiers sur Internet. Le recours à ce protocole est nécessaire pour transférer son site Web d une machine locale au Web mondial. Associer un programme 3

32 Les droits d'écriture Le navigateur Mozilla Les outils de Mozilla: Firebug: permet de gérer son code et votre fichier CSS 32

33 MeasureIt : permet de mesurer en pixel des parties de votre site ColorZilla : permet de connaitre le code couleur hexadécimal de votre site 33

34 Notepad ++ Ce logiciel, basé sur la composante Scintilla, a pour but de fournir un éditeur léger (aussi bien au niveau de la taille du code compilé que des ressources occupées durant l exécution) et efficace. Il est également une alternative au bloc-notes de Windows (d où le nom). Le projet est sous licence GPL. Quelques CMS Joomla Wordpress Prestashop Spip Drupal CMS Made simple 34 Gestion de contenus Gestion de contenus E-commerce Gestion de contenus Gestion de contenus Gestion de contenus

35 Base de donnée Mysql La majorité des CMS sont écrits en langage " PHP", le contenu des pages n'est pas présent dans les pages mais dans une base de données nommée "MSQL" MySQL est un système de gestion de bases de données relationnelles (SGBDR). Il est distribué sous une double licence GPL et propriétaire. Il fait partie des logiciels de gestion de base de données les plus utilisés au monde, autant par le grand public (applications web principalement) que par des professionnels, en concurrence avec Oracle, Informix et Microsoft SQL Server. Type d'hébergements en ligne de sites Internet Un hébergement est un espace disque sur une machine (serveur) connectée 24h/24 à internet, de telle manière que toutes les personnes désirant voir votre site puissent le faire depuis n importe quel pays et à n importe quelle heure de la journée. En fait, un hébergement peut être soit un serveur dédié (pour les grandes sociétés), un serveur virtuel VPS (pour les grands sites) ou un hébergement mutualisé (pour les sites moyens et petits). L hébergement a des caractéristiques: Comme votre ordinateur, le serveur web utilise un système d exploitation, que ce soit Linux, Windows ou autre Il faut choisir le bon système d exploitation, je recommande le Linux, plus rapide, plus sécurisé. Windows, pour les sites de Microsoft :D 35

36 L espace/bande passante : Votre hébergement doit répondre aux besoins de votre site web, l espace ne doit être ni très large ni beaucoup plus petit, il doit répondre uniquement aux besoins de votre site! Si votre site n héberge aucun contenu média (Photos, audio, vidéo, ) vous n aurez pas besoin d un hébergement de plus de 00 GO, la même chose pour un site qui héberge tas de données La bande passante est la quantité des données émis par votre hébergement pendant un mois, cette dernière dépendra du trafic de votre site web, et normalement la bande passante augmente si l espace de votre hébergement augmente La vitesse/pays hébergeur : La vitesse est primordiale pour offrir à vos internautes un meilleur service, et ne pas les faire fuir Vous devez chercher l hébergeur le plus proche de votre niche de visiteurs, si vous habitez en France, et que vous ciblez des français, vous pouvez utiliser un hébergement français, pour rendre plus rapide le chargement des pages de votre site web. Côté hébergeur/support technique/service après vente : Un bon hébergeur c est celui qui offre un support technique 7/7 jrs toute la journée. Ce dernier doit vous fournir de l aide à tout moment et que ce soit vos questions Sans oublier l interface d utilisateur et services offerts Le gratuit, à éviter! Voici un conseil d or : Évitez l hébergement gratuit, c est dangereux! Si vous choisissez un hébergement gratuit, vous risquez de perdre toutes vos données, car il n existe aucun hébergeur gratuit jusqu à présent qui garanti la disponibilité de votre site web Il va venir le jour ou vous allez trouver votre site web sans hébergement 36

37 Les noms de domaines Comment choisir son nom de domaine Quel nom choisir pour vous identifier? Le choix de votre nom de domaine demande une attention toute particulière. C est en effet grâce à lui qu on vous reconnaîtra sur la Toile. Et, s il est très facile de le réserver et de le mettre en ligne, il est vraiment compliqué de changer de nom, le jour où l on n en veut plus, car il est bien ancré dans les esprits, et référencé. ou 37

38 Ou acheter votre nom de domaine? Gandi, Ovh, Amen, &, Nfrance... Le prix varie de 5 à 5 par an Vous avez un site Internet et un hébergement, sachez qu'il est possible de rattacher plusieurs nom de domaine à un hébergement, toutefois il faut respecter quelques règles. Il existe deux moyens de brancher un nouveau nom de domaine à un hébergement : le premier, faire une redirection d'un nom de domaine vers un site existant: Inconvénient :ce nom de domaine ne pourra être pris en compte pour du référencement Avantage: procédure simple et rapide Deuxième méthode, brancher votre nom de domaine via le DNS de votre hébergement (Brancher un nom de domaine supplémentaire avec un hébergement ovh ) 38

39 le principe, il faut connaitre l'adresse Ip de l'hébergement pour cela ouvrez une fenêtre de commande dos, puis tapez : ping par exemple, vous verrez apparaitre l'adresse exemple : Cette IP est gérable dans les formulaires de gestion de votre prestataire de services, ci-dessous OVH 39

40 Sites marchands liste des VADs Dans votre projet de site, vous avez un E-commerce, je vais essayer de vous faire gagner du temps, en dehors de paypal ou la configuration est enfantine, préférez un professionnel pour faire cette prestation, le prix moyen du marché tourne autour de 350 Euros. BANQUES EN LIGNE 40 Frais d ouverture Abonnement mensuel Commissions par transaction % (0,5 minimum) + 0, NC ,8% + 20 /mois (00 tr.) + 0,5 /tr.supp ,8% + 0,5 / transaction ,8 % ,33% + 0,20 / transaction ,8 % + 0, ,5 % + 0,5 53 NC NC Solutions

41 242 6 NC Systèmes alternatifs (VAD obligatoire) 235 2,50 50 transactions comprises 390-4%HT + 2,29 22 %banque + 0,063 (00/mois gratuites) 390 Systèmes bancaires alternatifs de (VAD non obligatoire) de 2,9 à 3,4 % + 0, ,50 0,25 NC

42 Faire un Favicon dans votre site L image doit avoir une taille de 6px par 6 px Il Il doit avoir un format «.ico» doit avoir le nom : favicon.ico Vous pouvez le réaliser avec Photoshop, Gimp ou des outils en ligne. Exemple de site en ligne pour réaliser votre Favicon 42

43 Annexe exemple de réalisation d'un cahier des charges web Présentation du projet du site Le site réalisé présentera les laboratoires Plantaurel: L'entreprise, sa philosophie Ses services Ses produits... Le site sera conforme ( responsive) aux médias actuels, CAD : lisible sur Smartphones et tablettes. Il sera évolutif et pourra intégrer une partie E-commerce. L'analyse du contenu prendra en compte les normes des moteurs de recherche de type "Google", les informations contenues pourront être exploitées dans les divers réseaux sociaux professionnels. Il sera possible d'exploiter les informations dans une Apps (application téléchargeable depuis Google play & Apple store). Il pourra être multi-langues. Les outils, le contenu restera la propriété de l'entreprise " les laboratoires Plantaurel". Les informations, la mise à jour du contenu du site pourront être gérées par les laboratoires Plantaurel qui détiendront tous les accès et droits de l'ensemble du site. (Les Laboratoires pourront être indépendants s'ils le souhaitent) La cible : Les professionnels de la Dermocosmétologie (Laboratoires etc...) Ce site permettra l'accès à ses clients ou prospects de bénéficier d'un accès privé. Possibilité de télécharger des documents privés etc.. Nom de domaine 2 solutions, soit : La société gestionnaire du nom de domaine actuel ( donne la possibilité de le récupérer soit, il sera crée un nom de domaine équivalent. Exemple: il est possibile d'avoir plusieurs noms de domaine attachés à site (pour information un nom de domaine coûte 0 ). 43

44 Hébergement Le site sera hébergé sur un serveur professionnel de type semi-dédié. L'hébergeur prend en charge une sauvegarde journalière sur 5 jours glissants. Une assistance téléphonique et mails est inclus dans le pack pour tout ce qui concerne les questions éventuelles d'hébergement, de sauvegarde, de nom de domaine etc...). Outils préconisés pour la réalisation du site Le logiciel Joomla 3 associé à Hikashop ou virtuel mart pour une évolution vers un e-commerce. Joomla vous permettra de saisir en ligne vos pages, leur contenu, d'effectuer vos modifications, de télécharger vos photos etc...et vopus procure une autonomie compléte. Pourquoi Joomla : Ce CMS a gagné les Owards du meilleur logiciel libre du monde depuis 5 ans, il est évolutif, conforme aux référencements et normes Google. Il existe des milliers d'extensions possibles à installer en fonction des besoins, des métiers ( galerie photo, droits d'accès, paniers, vidéo,...). Adapté à votre métier et aux besoins futurs d'évolutions de l'entreprise. Arborescence Menu horizontal Accueil Thème Thème 2 Thème Contact autant d'onglets que de rubriques et selon le nombre, il est possible d'avoir des sous menus. Menu vertical gauche ou droit Menu horizontal bas de page Mentions légales Accès clients Texte pied de page : Copyright & mentions légales 44

45 Couleurs *Exemple de base de couleurs Fond : à définir Feuille : à définir Menu: à définir Typo: à définir Favicon Polices A définir Logo 45

46 Mots-clefs métiers Cible : professionnelle Laboratoires Marque de la dermocométologie Laboratoires du Plantaurel Syndets Savon noir Base Pain surgras Etc... Flux et partage d informations Afin d'être conforme aux moteurs de recherche actuels, il est conseillé de créer un blog (différent de Forum) professionnel, il permettra le partage d informations vers les réseaux sociaux et autres sites. info par semaine conseillé. Réseaux sociaux Entreprises Un lien sera fait vers : Exemple d'extensions du site : Formulaire de contact avec Captcha Like Box Facebook E-commerce Hikashop Gestionnaire de téléchargement de documents Sécurité Mise à jour du htacces Protection du compte de connexion Mise en place d un Capcha pour le formulaire de contact Blog Avantage d'un Blog : un blog permet d'augmenter le nombre de page sur un site, critère de qualité pour le référencement Google, de plus, il très utile lorsque le nombre de rubrique est limité. Séo & Référencement Google et autres moteurs Installation d un sitemap (carte du site) Mise en place de la réécriture d URL Optimisation et description des images (taille, nom, format et description) 46

47 Optimisation du contenu par page (langage Google) Ajout du bouton Google plus, Facebook etc Liste des pages Nombre de pages à définir (5 pages minimum conseillé pour être référencés naturellement ). exemple de page : Accueil Entreprise Nos services Nos produits Notre savoir faire Nos références Galerie photo Blog Contact Mentions légales etc Maquette du site A définir Les rôles de chacun Contenu Anglais et Français (texte) fourni par le client Photographies de qualité fournis (possibilité de faire intervenir un photographe en option) Logo fourni en HD formation pour la prise en main de l'alimentation du site /2 journée sur Toulouse ou sur site (frais de déplacement en sus) Maintenance maintenance et correctifs (ne concerne pas le refonte du site) inclus pendant an. Référencement er et 2ème niveau inclus (attention, un site doit être alimenté, mis à jour régulièrement pour que le référencement soit optimum) Sécurité l'hébergeur fourni une sauvegarde journalière sur 5 jours glissants 47

48 48 Le propriétaire du site a accès à un outil automatique de sauvegarde supplémentaire qu'il devra effectuer.

49 A PROPOS DE L'AUTEUR André Debaisieux a une expérience de 5 ans dans les métiers du web. Son aventure professionnelle: il est passé par un certain nombre de SSII. Il a assuré des missions d'intégrateur, programmeur, chef de projet, analyste, et maintenant son préféré: formateur indépendant. Indépendant depuis 2008, il dispense les formations qu'il met au point et assure des conférences sur les nouvelles technologies. Spécialisé dans le Web la E-communication, les nouvelles technologies et l'impression 3D. Expert CMS Joomla, il maitrise toutefois Spip, Worpress, Prestashop, Google, les réseaux sociaux et enfin le monde des Smartphones et ses applications. Il a reçu plusieurs prix: "une mention dans la catégorie Talent de l'innovation technique et technologique", un Net d'or en 200 pour le site "patrouille de France" et un Net d'or en 2000 pour le site "Cyber bébé" Son site : Sa page Facebook : Remerciement & sources Merci à tout les stagiaires, élèves et centres de formations qui ont contribués à la réalisation de ce support. Sources: Wikipedia, le journal du net, flash-comet.com, joomla.fr André Debaisieux 205 andre@debaisieux.com 49