Cours Web Design & Infographie PDF

Preview

Summary

Cours Web Design & Infographie - licence 1 Infocom / mineure journalisme / Jérémy Chouet...

Description

1. Web Design / Infographie Infographie : Application de l'informatique à la représentation graphique et au traitement de l'image. Web Design: Discipline consistant à structurer les éléments graphiques d'un site web afin de traduire, à travers une dimension esthétique, l'identité visuelle de la société. Mais la définition peut varier en fonction des pays et des cultures. Dans le Web Design, il y a 2 grandes parties: 1 – La partie codage: a) Intégration (Front-end (intégrateur)) b) Développement (Back-end (développeur)) 2 – La partie graphique a) Le UI Design (User interface): Le UI est la partie dite graphique (couleur, effets, typographie…). Le UI est basé sur l'esthétique. b) Le UX Design (User experience): Le UX est basé sur «l'émotion», sur le côté pratique et structurel (ergonomie, accessibilité, technologies, wireframing, arborescence…) Wireframing: Schéma utilisé lors de la conception d'une interface pour définir les zones et composants qu'elle doit contenir.Structure du site web ou de la page. Arborescence: Tout ce qui permet d'accéder au site plus facilement Format «One Page»: Tout sur une seule page (navigation scrolling, transition dans les pages, interaction, où la plage de l'image est très importante, au détriment du texte. Responsive Web Design: Le principe d'avoir un seul site internet compatible sur tous les supports possibles (ordinateur, tablette, smartphone…). Cela a un avantage financier important, un entretien pour simple, mais cela prend du temps à faire et le nombre de support ne cesse d'augmenter. Styles graphiques: - Flat Design: Minimaliste, épuré, coloré, contrasté, sans effet, iconographie… - Material Design: Flat Design + ombrages et action de l'utilisateur - Mobile First: Tout est consacré aux smartphones et objets connectés - Data Design: Illustration de données - Gamification: Accumulation de points, de badges, de succès qui nous incitent à revenir sur le site Cours n°2 Évaluation: Faire un site web sur nous même · · · ·

Faire une plan d'inspiration (à donner le jour de l'évaluation) : repérer des sites qui nous plaisent Répondre à l'objectif commercial donné Créativité et cohérence graphique (couleurs normales) Interactivité

· · ·

Techniques utilisées Respect du wireframe Organisation du ficher dans sa globalité

Internet est né aux USA en 1969, crée par la DARPA, dans le contexte de GF. Le nom d'origine d'Internet est l'Arpanet, pour créer des réseaux liés entre eux par des ordinateurs. Internet est donc un réseau informatique. Le web est un langage qui permet de communiquer et transmette des informations. Crée en 1990 par Tim Berners-Lee (Londonien) en Suisse, soit 20 ans après l'ARPANET. Internet est US, Web est Européen. Le Web utilise le réseau Internet. Un site Web est un ensemble de données informatique structurées, composées de textes, images, caractérisé par une mise en page, ergonomie, design… Le tout est regroupé dans des pages HTML, avec du CSS, du Javascript, et du PHP (script qui rend dynamique un site web). On va chercher un site web sur Internet. Le site est hébergé sur un ordinateur quelque part sur Internet.On appelle cet ordinateur un serveur. Aujourd'hui, on devient acteur avec des renseignements personnalisés, avec l'aide d'une communauté, on fournit du contenu. Aide des réseaux sociaux. La nouvelle façon d'utiliser Internet par l'interactivité. C'est le Web 2.0 Le Web 3.0 est l'ère des objets connectés. 3 milliards de personnes connectés, 1 milliard de site web, 1, 3 milliards d'utilisateur FB, 239 millions de twits envoyés chaque jour. L'adresse d'un site Web est consitué par HTTP (Hypertext Transfert Protocol), WWW, puis le label (le nom du site), puis l'extension (en fonction de la géolocalisation). .com est utilisé pour les sites commerciaux (aspect historique). L'extension d'un site a un impact sur le SIO. URL: Adresse d'un site Internet. CMS: Content Magagement System HTML: Langage permettant l'affichage de texte, images, blocs CSS: Style, mise en page PHP: Script permettant le traitement d'informations côté navigateur/client JavaScript: Langage permettant des interactions (diapo…) Serveur: Ordinateur distant où est stocké le site Internet. Une base données est un conteneur permettant de stocker et de retrouver l'intégralité des informations en rapport avec une activité, présentée sous forme de tableau. CNIL: Commission nationale de l'informatique et des libertés. Elle veille au respect des libertés pour l'informatique et Internet. Internet a une origine militaire, on le doit au Département de la défense US. Son ancien nom est ARPANET. Internet est le réseau permettant de relier entre eux tous périphériques de la planète (ordinateurs, tablettes, téléphones…).

Le terme Web fait référence aux pages des sites que nous visitons. Le web est diffusé grâce à Internet, mais les 2 ne sont pas la même chose. Le FAI nous permet de nous connecter à Internet.

Le site WEB contient 3 éléments différents : 1. 2. 3.

Le client, navigateur WEB : Il renseigne une adresse (http.www.facebook.com) le serveur Le base de données

DNS: Il transforme les adresses classiques en adresse IP jusqu'au serveur. Le serveur n'a qu'un langage PHP. Il effectue une requête sur la base de données avec le langage SQL. Client au serveur: http Serveur traite la demande en PHP Serveur à la base de données: SQL De la base de données au serveur : PHP Du serveur au client : HTML, CSS, JavaScript, Multimédia… Un navigateur ne comprend que du HTML, CSS, JavaScript, Multimédia… Un serveur ne comprend que du PHP Une base de données ne comprend que du SQL HTML : Contenu sémantique CSS : Design Entre HTML et CSS, on a des sélecteurs. HTML 5: • • • • • • • • • • • • • • •

1ère ligne: est le doctype, le type de document, important car il permet de définir qu'il s'agit bien d'un document HTML. L'en tête donne les informations sur la page (titre, encodage…) L'encodage: La balise: permet de définir le titre de la page, du document , permet de gérer des commentaires non affichés sur la page Les textes commence par et se termine par . Les retours à la ligne se font avec la balise Les titres sont font par niveaux 1 à 6: , , … permet de mettre «un peu» de valeur (gras faible) permet de mettre beaucoup de valeur (gras fort) est une liste à puce, contenue dans un conteneur ul. Dans ces listes, on place de pour mettre des éléments. c'est comme des ul, mais des chiffres. Faire des liens:...