Formation Web technologie Analyse & Gestion de projet web

Formation Web technologie Analyse & Gestion de projet web Flash-comet.com Cours version 2015 1

Sommaire Contenu du cours... 4 La législation... 4 La Cnil... 4 Droit à l image... 4 L accessibilité, une obligation légale... 5 Google images... 5 Mentions légales... 6 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... 10 Les couleurs... 12 Flat design... 15 Site responsive... 16 La règle du nombre d'or... 17 Règle de base de la photographie... 18 Conseils de professionnels pour la photographie dans vos sites ou réseaux sociaux... 19 Les logos... 22 Règle de base pour la conception de son LOGO... 23 Les images et le Web... 26 Le cas du point.tel... 27 Avoir son Gravatar... 29 Créer et lire un QRcode... 30 Gestion du contenu de votre projet de site web... 32 Le flux RSS... 33 Faire de la veille technologique... 34 Les outils du webmaster... 35 Notepad ++... 37 Quelques CMS... 37 Base de donnée Mysql... 37 Type d'hébergements en ligne de sites Internet... 38 Les noms de domaines... 39 Comment choisir son nom de domaine... 39 Sites marchands liste des VADs... 42 Faire un Favicon dans votre site... 44 Flash-comet.com Cours version 2015 2

Annexe exemple de réalisation d'un cahier des charges web... 45 Présentation du projet du site... 45 La cible :... 45 Nom de domaine... 45 Hébergement... 46 Outils préconisés pour la réalisation du site... 46 Arborescence... 46 Menu horizontal... 46 Menu vertical gauche ou droit... 46 Menu horizontal bas de page... 46 Couleurs... 47 Favicon... 48 Polices... 48 Logo... 48 Mots-clefs métiers... 48 Flux et partage d informations... 48 Réseaux sociaux Entreprises... 48 Exemple d'extensions du site :... 49 Séo & Référencement Google et autres moteurs... 49 Liste des pages... 50 Maquette du site... 51 Les rôles de chacun... 51 formation pour la prise en main de l'alimentation du site... 51 Maintenance... 51 Référencement... 51 Sécurité... 51 Remerciement & sources... 52 Flash-comet.com Cours version 2015 3

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-17 du 6 janvier 1978 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. Flash-comet.com Cours version 2015 4

L accessibilité, une obligation légale En France, la loi du 11 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. Google images Google image vous permet de faire des recherches sur le thème des images, attention toute ces images ne sont pas toute libre de droits Flash-comet.com Cours version 2015 5

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, 75 000 d'amende pour les personnes physiques et 375 000 pour les personnes morales. 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" http://www.flash-comet.com/astuces-de-webmaster/virtuemart/163-loi-hamon-sur-l-e-commerce 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: http://www.flash-comet.com/support-de-cours-gratuit-webmaster Flash-comet.com Cours version 2015 6

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 http://writemaps.com/ (gratuit pour trois plans de site) Flash-comet.com Cours version 2015 7

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 15 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 Flash-comet.com Cours version 2015 8

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

Les règles de base du graphisme La règle du nombre d'informations : Ne dépassez pas 19 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, un des sites de ressources de "polices" Flash-comet.com Cours version 2015 10

Comment reconnaitre une police sur une image Sur ce site vous pouvez uploader une image, elle reconnaitra la police dessinée sur cette image. https://www.myfonts.com/whatthefont/ Flash-comet.com Cours version 2015 11

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 : http://www.code-couleur.com/ Flash-comet.com Cours version 2015 12

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 ORANGÉ VIOLET GRIS NOIR Immortalité Richesse Gloire (or) Respect (argent) Dignité (argent) Chine Egypte 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 Sobriété Tristesse Modernisme Peur Monotonie Symbolique des couleurs par civilisations Mort Deuil Nuit Mystère Monotonie Tristesse Détresse Angoisse Noblesse Distinction Élégance Silence ROUGE BLEU VERT JAUNE BLANC Joie Mariage Mort Méchanceté Désert Paradis Légèreté Vertu Vérité Fidélité Immortalité Dynastie Ming Paradis Légèreté Fertilité Force Islam Naissance Santé Force Joie Prospérité Mort Pureté Joie Fête Etats-unis Danger Masculinité Sécurité Lâcheté Pureté France Inde Japon Anarchisme Communisme Vie Créativité... Colère Danger Liberté Paix Royauté Criminalité Temporalité Méchanceté Bassesse Prospérité Fertilité Futur Jeunesse Énergie Succès Grâce Noblesse Monarchie Neutralité Mort Pureté Mort Source : CRIM formation - Ecole polytechnique de Montréal Flash-comet.com Cours version 2015 13

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 " www.colourlovers.com" 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 ci-dessous saisissez un code couleur ou un mot-cles, le site vous fera des propositions de couleurs. Flash-comet.com Cours version 2015 14

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 Flash-comet.com Cours version 2015 15

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 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! Flash-comet.com Cours version 2015 16

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 x 2 = x + 1. Il vaut exactement : soit approximativement 1 1,6180339887. Nombre d'or dans la peinture ou dans la photographie Vous allez voir des exemple plus concrets dans les exemples ci-dessous. Flash-comet.com Cours version 2015 17

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.. Flash-comet.com Cours version 2015 18

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 «1.2.3 souriez» à proscrire, pas de décompte Resserrez la cadre autour du sujet Flash-comet.com Cours version 2015 19

Photographiez les profils horizontalement Le format vertical est le format des pros Flash-comet.com Cours version 2015 20

Le sourire n'est pas une obligation Ne photographiez pas un portrait les épaules en face de l'appareil Photographiez de trois quarts vos sujets (nombre d'or) Flash-comet.com Cours version 2015 21

Les logos On retrouve le logo sur l ensemble des supports Carte de visite papier Carte de visite CD CD ROOM Flash-comet.com Cours version 2015 22

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 Règle de base pour la conception de son LOGO Règle n 1: 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. Flash-comet.com Cours version 2015 23

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 : 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 Flash-comet.com Cours version 2015 24

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 Les formes triangulaires correspondent aux danger Flash-comet.com Cours version 2015 25

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 dsc0001.jpg mon-image.jpg : oui Flash-comet.com Cours version 2015 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. Flash-comet.com Cours version 2015 27

L interface de saisie de vos informations Flash-comet.com Cours version 2015 28

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 : https://fr.gravatar.com/ Flash-comet.com Cours version 2015 29

Créer et lire un QRcode Pour créer votre Qrcode, je vous invite à aller sur le site suivant : http://goqr.me/ Choisissez votre type de Qrcode, saisissez vos informations, votre Qrcode est généré Saisissez simplement les informations suivantes : Puis téléchargez-le Flash-comet.com Cours version 2015 30

Pour lire un Qrcode depuis un Smartphone, il existe une multitude d'applications gratuites, en voici quelques une : Flash-comet.com Cours version 2015 31

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! 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. Flash-comet.com Cours version 2015 32

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. Exemple de flux provenant de Facebook https://www.facebook.com/feeds/page.php?format=rss20&id=140620886021373 Exemple de flux provenant du site Flash-comet http://www.flash-comet.com/astuces-de-webmaster?format=feed&type=rss Flash-comet.com Cours version 2015 33

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 1 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 : https://www.google.fr/alerts Méthode 2 pour faire de la veille C'est le même principe que la méthode 1 à la différence que le résultat apparait dans Google actualités. Google actualités : https://news.google.fr/news Flash-comet.com Cours version 2015 34

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. Connexion Associer un programme Les droits d'écriture Flash-comet.com Cours version 2015 35

Le navigateur Mozilla Les outils de Mozilla Firebug: permet de gérer son code et votre fichier CSS MeasureIt : permet de mesurer en pixel des parties de votre site ColorZilla : permet de connaitre le code couleur hexadécimal de votre site Flash-comet.com Cours version 2015 36

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 Gestion de contenus Gestion de contenus E-commerce Gestion de contenus Gestion de contenus Gestion de contenus 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 monde1, autant par le grand public (applications web principalement) que par des professionnels, en concurrence avec Oracle, Informix et Microsoft SQL Server. Flash-comet.com Cours version 2015 37

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 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 100 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 Flash-comet.com Cours version 2015 38

Les noms de domaines Comment choisir son nom de domaine Bien choisir son nom de domaine Un site web, ça a un 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é. www.formation-cms.fr ou www.flash-comet.com Flash-comet.com Cours version 2015 39

Ou acheter votre nom de domaine? Gandi, Ovh, Amen, 1&1, Nfrance... http://www.ovh.com/fr/index.xml Le prix varie de 5 à 15 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 https://www.ovh.com/fr/g1332.mise-en-place-multidomaine ) Flash-comet.com Cours version 2015 40

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

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 Frais d ouverture Abonnement mensuel Commissions par transaction Solutions 200 23 1% (0,15 minimum) + 0,17 389 30 NC 300 15 125 15 0,8% + 20 /mois (100 tr.) + 0,5 /tr.supp. 0,8% + 0,15 / transaction 150 15 0,8 % + 0.20 150 8 0,33% + 0,20 / transaction 150 15 0,8 % + 0,15 300 15 1,5 % + 0,15 153 NC NC 242 16 NC Flash-comet.com Cours version 2015 42

Systèmes alternatifs (VAD obligatoire) 235 12,50 50 transactions comprises 390-4%HT + 2,29 390 22 %banque + 0,063 (100/mois gratuites) Systèmes bancaires alternatifs de (VAD non obligatoire) - - de 2,9 à 3,4 % + 0,25 235 9,50 0,25 NC Flash-comet.com Cours version 2015 43

Faire un Favicon dans votre site L image doit avoir une taille de 16px par 16 px Il doit avoir un format «.ico» Il 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 Flash-comet.com Cours version 2015 44

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 (http://www.laboratoires-plantaurel.com/) donne la possibilité de le récupérer soit, il sera crée un nom de domaine équivalent. Exemple: http://www.laboratoires-plantaurel.fr/ http://www.laboratoires-du-plantaurel.com/ http://www.laboratoires-plantaurel-dermocosmetologie.com il est possibile d'avoir plusieurs noms de domaine attachés à 1 site (pour information un nom de domaine coûte 10 ). Flash-comet.com Cours version 2015 45

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 15 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 1 Thème 2 Thème 1 Contact autant d'onglets que de rubriques et selon le nombre, il est possible d'avoir des sous menus. Menu vertical gauche ou droit Autre thème 1 Autre thème 2 Autre thème 3 Autre thème 4 Autre thème 5 Menu horizontal bas de page Mentions légales Accès clients Texte pied de page : Copyright & mentions légales Flash-comet.com Cours version 2015 46

Couleurs *Exemple de base de couleurs Fond : à définir Feuille : à définir Menu: à définir Typo: à définir Flash-comet.com Cours version 2015 47

Favicon Polices A définir Logo 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. 1 info par semaine conseillé. Réseaux sociaux Entreprises Un lien sera fait vers : https://www.facebook.com https://plus.google.com/https://www.linkedin.com Flash-comet.com Cours version 2015 48

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) Optimisation du contenu par page (langage Google) Ajout du bouton Google plus, Facebook etc Flash-comet.com Cours version 2015 49

Liste des pages Nombre de pages à définir (15 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 Flash-comet.com Cours version 2015 50

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 1/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 1 an. Référencement 1er 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 15 jours glissants Le propriétaire du site a accès à un outil automatique de sauvegarde supplémentaire qu'il devra effectuer. Flash-comet.com Cours version 2015 51

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 2015 andre@debaisieux.com Flash-comet.com Cours version 2015 52

Flash-comet.com Cours version 2015 53