Studio Web

Saint-Luc

secondaire Bruxelles

Technicien(ne) en Infographie

Cours

Portfolio

Le matériel

Une Clef USB – Une farde pour ranger le cours.

La matière à aborder

Apprendre à utiliser et à créer, à communiquer avec les outils du web (exemple : création et réalisation d’un site web) ainsi que les outils informatiques (PC, scanner, imprimante...).

Les Formats

Pour bien comprendre la différence entre internet et le prépresse, il faut changer sa vision du format.

Hauteur x largeur

Lorsqu’on produit un document en prépresse, on définit un format papier (A4, A3, affiche, revue, etc.) Le format ne changera pas une fois publié.

Or pour le web, le format ne dépend pas de la production, mais de la manière dont l’utilisateur accède au produit (le site web). Le site peut-être consulté sur des écrans qui ont des résolutions différentes. On peut consulter des pages web sur des écrans PC-Mac, fixes ou portables, mais aussi sur des tablettes ou des Smartphones. On parlera de site web adaptatif ou responsive web design.

Pixels et résolutions

On ne parle plus en cm, mais en pixels. La résolution des images est de 75 ppi et non plus de 300ppi, trop lourd pour le web.

Format des fichiers

Le format des fichiers web est l’HTML et le CSS pour les pages et les PNG, GIF ou JPG pour les images. Il existe aussi différents formats pour les vidéos.

Couleurs

Les couleurs ne s’expriment plus en CMYK, mais en RVB ou en hexadécimal.

Back-up

Toujours sauvegarder ses données. Si les fichiers sont sur un ordinateur et une clef USB, ne pas les transporter ensemble. Utiliser les solutions telles que OneDrive, Google Drive ou iCloud. Ce réseau de serveurs qui permet de stocker des données s’appelle le « Cloud computing ». Ces services proposent également un versioning des fichiers.

Technologie

  • Le design du site et de ses pages se fera dans Photoshop, parfois dans Illustrator (ex : pour les pictogrammes).
  • L’optimisation des images se fera également dans Photoshop.
  • Connaître les langages web permet de réaliser des designs plus appropriés au médias concernés sans pour autant en être tributaire.
  • Les langages à apprendre sont l’HTML et le CSS, en code pur ou pouvant être codés automatiquement via un logiciel WYSIWYG comme Dreamweaver qui permet de composer visuellement le résultat voulu.
  • Apprendre l’interface de Dreamweaver.
  • Se familiariser avec l’arborescence des fichiers. Ne pas tomber dans les pièges des liens brisés.

Les browsers comme outils de développement

La plupart des navigateurs web possèdent un outil de développement, qui permet de consulter le code source et d’y apporter des modifications temporaires très utiles aux designers pour corriger les bugs ou pour faire des tests.

grille de mise en page

Pour offrir plus de structure visuelle à un site, on choisira une grille flexible qui alignera les différents éléments du site.

Typographie

Le web impose des règles techniques concernant la typographie. Pour les pavés de texte, on privilégiera les polices standards qu’on retrouve sur la plupart des ordinateurs. Les polices « décoratives » choisies pour les titres devront être « chargées » sur le site au même titre que les images ou les vidéos, ce qui peut entraîner un ralentissement du chargement de la page. Certaines applications permettent de choisir, ou de convertir des polices pour le web.
http://www.fontsquirrel.com/ ou https://www.google.com/fonts.

Métier du web

Il existe de plus en plus de métiers du web regroupés en catégories.
http://fr.wikipedia.org/wiki/Métiers_du_web.

On en distinguera 3: le designer, l’intégrateur, et le développeur.

Gestion des fichiers

Les fichiers (pages, images, vidéos ...) ainsi que les dossiers sont liés entre eux, selon une arborescence bien précise. Il va de soi que si un lien est brisé, les images ou les pages n’apparaîtront pas.

Lexique

Section TI

La section TECHNICIEN EN INFOGRAPHIE offre une formation sur les outils numériques et axe son apprentissage sur la communication visuelle.

Les cours d’option :
  • analyse de l’image
  • création
  • studio

permettent d’acquerir les compétences propres aux métiers de l’infographie. L’élève apprend à travailler à la main et sur logiciel. Il apprend également à être autonome et à répondre à un cahier des charges bien précis.

Modules :

Il y a trois modules à acquérir durant ces deux années :
- 1 module prépresse (images fixes en 2D) en TI5.
- 1 module 3D et 1 module web en TI6.
Pour acquérir ces modules l’élève devra passer une série de 4 SIPS tout au long de ces 2 années (situation d’intégration professionnellement significative).

Cette section débouche sur :

un certificat d’études secondaires supérieures CESS. C’est le diplôme nécessaire pour s’inscrire en supérieur. Un jury, présenté devant des professionnels extérieurs à l’école, permettra à l’élève d’acquérir un certificat de qualification, diplôme officiel reconnu par la Fédération Wallonie-Bruxelles.

La section a pour but de former l’élève aux différents domaines de la communication visuelle tels que la publicité, le graphisme, le cinéma, le multimédia, l’animation, le web, 3D…

Il n’est pas nécessaire de savoir dessiner pour s’inscrire dans cette section (l’apprentissage du dessin et des outils se fera sur 2 ans). Les élèves arrivant en 5 TI n’ont pas absolument besoin d’un ordinateur personnel, il y en a à l’école mis à leur disposition. Des heures de remédiation sont mises à la disposition des élèves, pour leur permettre d’avancer dans leurs projets ou de rattrapper leur retard. Par contre ils doivent se munir d’une clef USB.

Programmes utilisés :
5TI:
  • photoshop
  • illustrator
  • in design
6TI :
  • photoshop
  • illustrator
  • dreamweaver
  • programme 3D (blender)

Objectifs

DOCUMENT D’INTENTIONS PÉDAGOGIQUES

OBJECTIFS DE COURS :

L’objectif général du cours de Studio est de rendre l’élève capable de concevoir des projets graphiques et des mises au net statiques ou animées par l’utilisation des outils informatiques, de les soumissionner et d’évaluer leur qualité. Cet objectif est traduit en pratique par l’acquisition de plusieurs compétences.

Compétences :

Définition : Aptitude à mettre en oeuvre un ensemble organisé des savoirs, de savoir-faire et d’attitudes permettant d’accomplir un certain nombre de tâches.

  1. Explorer - Analyser
  2. Imaginer
  3. Concevoir - Communiquer
  4. Utiliser
  5. Réaliser - Produire

L’élève devra également se montrer capable de respecter des consignes, des délais, de fournir un travail régulier, de tenir à jour son cahier de notes, d’assurer une présence au cours et d’afficher un comportement positif, volontaire et actif.

MOYENS D’ÉVALUATION :

Les exercices réalisés par l’élève seront régulièrement notés et auront une valeur certificative. Ces notes seront reportées dans le bulletin pour chaque période.

Deux SIPS (situation d’intégration professionnellement significative) auront lieu en décembre et en juin. Les travaux que l’élève aura produits lors de ces SIPS, seront présentés à un jury. En décembre, ce jury sera composé des professeurs graphiques de la section. En juin le jury sera composé des professeurs graphiques de la section ainsi que de professionnels extérieurs à l’école.

Les SIPS permettront à l’élève d’acquérir un module prépresse en fin de 5 ème et un module webdesign et 3D en fin de 6 ème.

À la fin de ses deux années d’étude dans la section infographie l’élève obtiendra son CESS ainsi que son certificat de qualification.

REMÉDIATION :

L’élève peut se rendre en remédiation sur le temps de midi afin de terminer son travail ou de se faire aider en cas de difficulté.

Télécharger le document complet :
Document d'intentions pédagogique