Communication visuelle & web Module sur trois journées 1, 5 jour : communication print & visuelle 1.5 jour : communication web mise en pratique evaluation sur QCM Vous serez en mesure participer à la conception d'une communication visuelle et oral participer à la conception d'un projet web intervenir dans la mise à jour 1 2 Pao Principes fondamentaux Qu est-ce la micro-édition ou plublication assisté par ordinateur? traitement de texte mais plus encore processus sophistiqué impliquant texte, les graphismes utilisation des polices de caractères respect de plusieurs principes graphiques dans un but de communiquer un message application : print, web, présentation multimédia Comportement de lecture balayer action en grande partie inconsciente survoler quand la page stimule les yeux, la porte de l esprit est ouverte parcourir le contenu du corps du texte est lu 3 4 La mise en page Les six principes de base Permet de véhiculer une information Le contraste cible et objectifs prendre en compte taille forme de la composition occuper l'espace de manière optimale exemple 1 : connaître la taille des enveloppes exemple 2 : connaître la résolution d écran 5 6 test 1
Les six principes de base Les six principes de base L équilibre Proportion Équilibre FORMEL Équilibre INFORMEL Monotone Structuré 7 8 Rythme Les six principes de base Espace blanc Principes fondamentaux Élément dominant Concentration altérée Lecture simplifiée 9 10 Unité Principes fondamentaux Les typographies Polices avec ou sans empattement Désoriente Élément dominant Times news roman Century Arial Helvetica 11 12 test 2
Les typographies Les typographies Polices avec empattement Polices sans empattement 13 14 Les typographies Les typographies Polices ornementales Quelques conseils à suivre Décoration Utilisation des Majuscules titre en majuscule, un message important expressions courtes ne pas dépasser cinq mots consécutifs 15 16 Symbolique des couleurs Les couleurs Le mode RVB destiné à l écran informatique Le Mode CMJN destiné à l'impression 17 18 test 3
Les couleurs Les illustrations Les couleurs pantone Les différentes illustrations couleur unique et standardisé schémas, diagrammes dessins photographie 19 20 Les formats d images Résolution Format d image TIFF JPG ou JPEG GIF PNG EPS Bitmap ou bmp Définition Excellente prévisualisation à l écran Bonne qualité d impression Format de compression très efficace mais avec perte de qualité Format adapté aux photographies Format qui utilise une compression sans perte de qualité. Le format GIF supporte la transparence et il permet également de créer des animations : les GIFs animés. Les fichiers PNG sont généralement plus légers que les GIF, par contre le PNG est moins performant que le JPEG pour la compression des photographies. Format très lourd mais gère les transparences. Qualité médiocre pour la prévisualisation à l écran Ne gère pas les niveaux de gris Mesurée en dpi (point par pouce) résolution idéale pour l impression 300 dpi résolution idéale pour le web 72 dpi 21 22 Conclusion le monde graphique a beaucoup d impact sur la façon dont les gens reçoivent et gère l information la conception graphique représente un outil puissant permettant d améliorer la communication définissez des objectifs modestes pour commencer apprenez votre logiciel 23 24 test 4
Communication print Communication print Outils Professionnels Outil Publisher Quark Xpress Indesign Difficilement accessible et coût élevé Microsoft Office Publisher 2010 permet de créez des publications de qualité professionnelle 25 26 Communication print Méthodologie Outil Scribus Scribus est un logiciel«open source» (libre) de PAO Pour commencer, la théorie -Avoir la bonne approche comment il sera imprimé, comment il sera utilisé : flux de production prenez une feuille de papier et un crayon et esquissez votre maquette rassemblez vos images, préférablement à 300 dpi ou plus, en TIFF ou PNG rédigez le texte dans un traitement de texte. Corrigez les fautes et révisez la grammaire rassemblez tous ces documents dans un répertoire 27 28 Communication print Communication print Mise en pratique (durée environ 1h30) sur un cas pratique mener une réflexion et créer un document de communication avec le logiciel Publisher. travail en binôme et sur un thème non imposé esquissez une maquette, rassemblez vos images et rédigez le texte mise en page avec l'outils publisher Créez des blocs titres, textes et images Intégrer des habillages graphique afin de personnaliser votre document Mise en pratique (durée environ 1h30) enregistrez votre travail et envoyer un fichier pdf à l'adresse suivante lcongras@gmail.com objet du mail : travail communication print merci de préciser vos noms et prénoms 29 30 test 5
Exemple de présentation Un diaporama sert à appuyer un discours 31 32 Autre exemple PowerPoint logiciel de création de présentations édité par Microsoft outil essentiel pour tout communiquant 33 34 ImPress, équivalent de PowerPoint logiciel open source de création de présentations édité par OpenOffice libre et gratuit Méthodologie reflexion avoir en tête le déroulement de la présentation tenir compte du temps de présentation global outil essentiel pour tout communiquant préparer tous les éléments à intégrer dans la présentation (les images, graphiques, sons etc..) 35 36 test 6
Une présentation efficace contenu deux ou trois points principaux graphisme lisibilité, texte contrasté présentation disposition Conseils à prendre en compte ne mettre qu une à trois idées par diapositive ecrire peu de texte ne pas mettre (ou peu) de mots en majuscules user avec parcimonie des couleurs la taille du texte est primordiale utiliser des éléments graphiques adaptés 37 38 Conseils à prendre en compte intégrer des sons uniquement si nécessaire utiliser la même transition pas trop d'effet accompagner la progression de l oral attention au rythme pensez à tester avant la présentation Mise en pratique (durée environ 2 h) mener une réflexion et créer un document de communication visuel avec PowerPoint travail en binôme intégrez des visuels, du texte, des graphiques des transitions entre 10 et 15 diapositives personnaliser un thème graphique de votre choix document à envoyer au format pdf ou ppt à lcongras@gmail.com 39 40 Internet International Network ou réseau international Ordinateurs connectés les uns aux autres 1960 : ARPANET et MILNET 41 42 test 7
Protocoles HTTP internet TCP / IP permet d exploiter des données courrier électronique transfert de fichiers World Wide Web (www) ou la toile, ou le web Réseau et hypertextes Création du protocole en 1993 Transfert des fichiers hypertextes Conventions URL langage mise en forme insertion de sons, vidéos, animations langages tiers Php -Asp - JavaScript 43 44 Un site web Conception projet web Pages web hyperliées accueil : index pages stockées sur un serveur Navigateur interpréte Etape 1 -Définition du projet quelle sera ma cible? quel sont les objectifs et enjeux? quel sera le contenu? 45 46 Conception projet web Conception projet web Etape 2 - structure et organigramme organisation des contenus liens principes généraux de navigation fonctionnalités Etape 2 -scénario règles de nommages penser au référencement extension html et htm gabarit différentes zones de contenu agencement 47 48 test 8
Exemple de gabarit Conception projet web Etape 3 conception graphique aspect général et ergonomie du site rappel des objectifs adéquation avec la cible Composants essentiels de la charte dimensions zones de contenu de navigation couleurs et typographie visuels VALIDATION 49 50 Exemple de charte graphique Conception projet web Etape 4 Développement objectif : tester le site décliner la charte créer toutes les pages tests techniques visiteurs Livraison 51 52 Conception projet web Régles d'écriture multimédia Etape 5 Lancement et maintenance objectif : traçabilité transfert de compétences stratégie d'annonce de lancement plan de maintenance fréquence de mise à jour projet d èvolution statistiques Lecture à l'écran différent du support papier contraignante lecture dite de survol recherche rapide lecture Format écran horizontal (paysage) Pyramide inversée message essentiel attaque liens hypertextes 53 54 test 9
Régles d'écriture multimédia Le référencement En résumé Objectif simplifier la présentation structurer autour du lien hypertexte un titre explicite un chapeau complétant le titre des inter-titres phrases courtes (20 mots maxi) rythmé par des liste à puces choisir une police sans empattement Annuaires et moteurs soumettre auprès d une annuaire soumettre auprès d'un moteur Stratégie annuaires site stabilisé pas de site en construction préparer url, titre, descriptif, catégorie 55 56 Le référencement Le référencement Stratégie moteurs de recherche Fonctionnement d un moteur à partir du lien "soumettre un site" communiquer l url balises d'en tête de vos pages robots appelés spiders mission d'indexation délai de plusieurs semaines 57 58 Le référencement Le référencement Optimiser vos contenus Popularité du site mission d'indexer 500 mots par page utiliser des balises html de titre H utiliser des balises html gras ou bold mise à jour très régulière images et animations, les noms! Attribult ALT des balises images mon site est-il populaire? pas de popularité artificielle pertinence des liens connaitre son PageRank http://www.pagerank-direct.fr/ 59 60 test 10
La mise en ligne Les hébergeurs Hébergement Hébergement mutualisé comparer les offres les services estimer vos besoins technologies taille de votre site médias espace disque partagé idéal pour débuter Hébergement dédié client indépendant réservé aux sites à forte audience nécessite des compétences coût plus élevé 61 62 Transférer votre site Le web analytics Protocole de communication FTP Le suivi statistique File Transfer Protocol échange de fichiers sur un réseau Logiciels clients FTP logiciels libres Filezilla pour windows, Fetch pour Mac OS X Solution de votre hébergeur Exemple Solution Google analytics leader mondial et gratuit système d'analyse de trafic d'urchin objectif : AdWords 63 64 Le web 2.0 Le web 2.0 Le blog Le forum Avantages Peu onéreux Facile et rapide à mettre en place Notions de partage et d'échange Le blog expert Le blog évenementiel Le blog de marque Le blog d'actualités lieu d'échange commentaires archivés et accessibles le modérateur La newsletter projet global de communication objectifs notoriété, image produit, service fidéliser trafic 65 66 test 11
Objectifs Mise en page Contenu Hypertextes Tester avant envoie newsletter Le flux RSS? Le web 2.0 Diffuser ses actualités Really Simple Syndication Fichier au format XML (Extensible Markup Language) <?xmlversion="1.0" encoding="iso-8859-1"?> <rssversion="2.0"> <channel> <title>mon site</title> <description>ceci est un exemple de flux RSS 2.0</description> <link>http://www.example.org</link> </channel> </rss> 67 68 Le web 2.0 Widget Le widget Wise et gadget mini application système d exploitation blog 69 70 Développement de site CMS Principes de base Content managment system Gratuit WordPress - Joomla facile et rapide à mettre en place demande pas de connaissance technique connaissance du langage et un + Derrière une page web Le code source Html instructions placées entre < > Exemple 01 <title> le titre de mon site </title> balise title dans la balise <head> voyons sa structure 71 72 test 12
Structure d'une page web Les balises exemple <b>texte en gras</> Balise de début et de fin <b> b pour bold, ce qui signifie gras <i> i pour italic, ce qui signifie italique <p> p pour paragraphe, ce qui signifie paragraphe Balise dites uniques <br> <img> Pas de balise de fermeture </img> ou </br> 73 74 Les lettres accentuées et caractères spéciaux à sera noté à é sera noté é Les balises de mise en forme body un exemple simple <body bgcolor= #4E6DDA > couleur de l'arrière plan de la page web Créer votre premier document html Ouvrir NotePad éditeur html de windows insérer le code suivant et enregistrer index.htm <html> <head> <title>page d accueil</title> </head> <body> Mon premier exercice pratique! <font color="#ff0000">texte rouge</font> </body> </html> 75 76 Organisation d'un site web Les titres Améloire le référencement IMPORTANT <html> <head> <title>page d accueil</title> </head> <body> <H1> TITRE PRINCIPAL </H1> <H2> TITRE SECONDAIRE </H2> <H3> Paragraphe principale</h3> <H4> Paragraphe secondaire</h4> <H5> titre Paragraphe 1 secondaire</h5> <H6> texte1, texte1, texte1, texte1 </H6> </body> </html> 77 78 test 13
Imbrication des balises Balises de mise en page pas correct : <a><b> texte </a></b> correct : <a><b> texte </b></a> saut de ligne : balise unique <br /> paragraphe : <p> un texte assez long </p> Alignement à gauche <p align = left > paragraphe aligné à gauche </p> 79 80 Insertion d une image Liens hypertextes vers une page html enregister une image Code html <img src="logo.jpg"> faites le test çà marche pas? Normal! <a href="contact.htm">contacter notre service</a> Liens hypertextes vers un mail <a href="mailto:lcongras@gmail.com"> contact</a> 81 82 Les tableaux en html <table>. </table> <table> <tr>..</tr> </table> Éditeur html Permet de créer des pages html Bloc note (que du code) <table> <tr><td>.. </td></tr> </table> Dreamweaver (payant, professionnel) assitant, plus facile à prendre en main convivial Kompozer (open source) assitant, plus facile à prendre en main moins profesionnel que dreamweaver 83 84 test 14
Conclusion Communication visuelle & web Reflexion, analyse, Définir les cibles et objectifs Stratégie de communication globale Ne vous laisser pas dépasser par la technique Informez-vous documentez-vous veille concurrentielle sens critique avec justification Bilan de ces trois jours? 85 test 15