Notre plateforme pédagogique :

Cet espace vous permet de suivre la progression de nos cours, de retrouver les exercices, et leurs corrections en ligne.
Vous pouvez consulter vos réalisations dans votre dossier de travail personnel accessible via un client FTP (Filezilla ou autre).
Différentes ressources et supports pédagogiques vous permettront d’approfondir vos connaissances et votre culture Web.
L’ensemble des modalités de la formation sont disponibles dans notre contrat pédagogique.

C’est avec beaucoup de plaisir que je vous accompagne dans l’apprentissage de la conception de supports de communications orientés pour le web.

Si vous avez des questions, vous pouvez me joindre sur cette adresse mail : raphael.giovannetti@univ-montp3.fr

Who am I?

I am a website designer and developer, starting from the demand analysis of the client up to the final achievement of the Internet communication tool, integrating, according to the requirement complementary communication products development.

My training is dual, combining Management sciences (Technological Institute of Management, Nîmes) and Communication sciences, with a specific training in Multimedia development (University of Montpellier). I have a joined Master degree with Montpellier University and the French High University of “Ecole des Mines”.

My professional activity is dual. Firstly, I am assuming a part time teaching activity at the University of Montpellier 3, Paul Valéry, for students up to the Master degree. Secondly, acting as a website designer and developer, I have my own Company. I try to combine, in my portfolio, clients with liberal activities (Architects, Doctors, Artists, Trainers, etc.) and activities with Corporations such as EDF (French electrical national company), Magimix... Doing that, I am facing an important diversity of a request, which develops my creativity and enables me to enrich my teaching activities at the University.

I am delighted to be with you today, and I would like to highlight my full availability for any request you may have, through an open dialogue : raphael.giovannetti@univ-montp3.fr

La formation :

1. Comprendre le protocole internet et les principes de publication de supports de communication pour le Web.

2. Analyser les principes ergonomiques d'une interface numérique et acquérir les principes fondamentaux de l'expérience utilisateur.

3. S'initier à la conception de Wireframe et au prototypage d'applications.

4. Acquérir les principes fondamentaux de programmation informatique afin de développer un site web statique en langage HTML et CSS.

5. Créer un portfolio qui puisse appuyer vos projets de candidatures profesionnels et universitaires.

L’objectif de ce cours est d’acquérir les bases qui permettent de concevoir un Site Internet. Il s’agit de concilier l’aspect purement technique, lié à l’apprentissage des langages de programmation, avec une démarche de réflexion autour de la méthodologie de conception des sites Internet, ce qui nous permettra de donner du sens à cette production et d’anticiper sa réalisation.

Le portfolio :

- Le portfolio est à rendre pour le Dimanche 17 Décembre à 23h59 dernier délais.
- Vous devrez déposer les fichiers de votre portfolio sur le FTP dans le dossier "rendu". Le nom du dossier de votre portfolio sera sous la forme "nom_prenom".
- Pensez à tester le bon fonctionnement du site, une fois les fichiers en ligne.

→ CONSIGNES de réalisation du portfolio
→ CONSEILS et exemples de portfolio
→ Code starter : Base de travail pour votre portfolio

Supports de cours CSS :

→ Typographies pour le web : liste CSS
→ Modèle et positionnement des blocks : liste CSS
→ Intégration et gestion des images fonds : liste CSS

Exercices :

“ Prenez bien le temps de lire les consignes. Chaque exercice est construit en plusieurs étapes. Dans tous les exercices lorsque le caractère «@» apparaît, cela signifie qu'un point de cours est prévu en fin d'exercice. ”

SEANCE 7 (1h30h + 2h travail personnel):

leçon → Coder plus rapidement avec des outils : Bootstrap et FontAwesome.
→ Boostrap
→ FontAwesome

Exercices : exo 15

Corrigés : exo 15

SEANCE 6 (1h30h + 2h travail personnel):

→ Portfolio numérique et présentation de soi

Exercices : exo 14

Corrigés : exo 14

SEANCE 5 (1h30h + 1h30 travail personnel):

leçon → Principes de Composition CSS avancés

Exercices : exo 12 | exo 13

Corrigés : exo 12 | exo 13

SEANCE 4 (1h30h + 1h30 travail personnel):

leçon → Hyperliens, hypertextes et principes de navigations

Exercices : exo 10 | exo 11

Corrigés : exo 10 | exo 11

SEANCE 3 (2h00 + 4h travail personnel):

leçon → Interface, Mise en page et structuration d'une application web / conception d'application mobile
PART 1 : Théorie et concepts
PART 2 : Pratique

Exercices : exo 7 | exo 8 | exo 9 (optionnel) | exo prototypage d'application mobile | exo 10 (responsive design)

Corrigés : exo 7 | exo 8 | exo 9 (optionnel) | exo Bonus 10

SEANCE 2 (3h + 2h30 travail personnel):

leçon → Structure du document HTML et conventions d'écritures

Exercices : exo 4 | exo 5 | exo 6 (optionnel)

Corrigés : exo 4 | exo 5 | exo 6

SEANCE 1 (2h + 1h travail personnel) :

leçon → Historique d'internet, principes de publications d'une page web

Exercices : exo 1 | exo 2 | exo 3

Corrigés : exo 1 | Pas de correction pour l'exercice 2 | exo 3

→ Définitions, concepts et vocabulaire Web.

Les logiciels employés dans notre cours :

- Editeur de code sous licence GNU (Windows): Notepad ++
- Editeur de code sous licence GNU (Mac): TextWrangler

- Client FTP / connexion à l'hébergement sous licence GNU (Windows): Filezilla (Windows) | Filezilla (Mac)

- Logiciel de traitement graphique sous licence GNU: Gimp (Windows) | Gimp (Mac)

- Conception de wireframe et prototypage de site : Balsamiq (Windows) | Balsamiq (Mac)