Loïc T.

Loïc T.

Pas Encore D'avis

Clock 5 heures de cours
Free session Premier Cours Gratuit

Présentation

Créateur et consultant en communication visuelle, web

J'accompagne au quotidien des dirigeants d'entreprises et sociétés dans la création de leur communication, partout en France. Par passion professionnelle et plaisir de partager mon expérience, je vous suis comme « mentor » que vous soyez un particulier ou un professionnel, pour vous former sur les outils, techniques et méthodes liés à la communication visuelle et à l'utilisation des logiciels,

  • Photoshop
  • Illustrator
  • Dreamweaver (html/css)

ainsi qu'à la création de sites internet et blogs personnels et professionnels avec le gestionnaire de contenu WordPress. Vous pouvez découvrir mes références sur http://www.f4-design.fr

Quelques détails sur mes formations :

Je propose des ateliers de formation pour s'initier et/ou réaliser des projets finalisés sur Photoshop et Illustrator notamment orientés en communication visuelle et web mais aussi artistique, graphique et multimédia. Je propose d'apprendre à créer des logos identitaires ainsi que différents supports de communication tels que des cartes de visite, des flyers et des plaquettes commerciales, etc.... Je vous apprends si vous le désirez aussi, comment mettre en place votre premier site internet avec ou sans connaissance technique en suivant mes conseils et en utilisant uniquement les possibilités de WordPress avec des outils annexes. Ou bien, à approfondir pour créer des sites aux designs sur mesure, optimiser vos sites pour le référencement naturel avec des outils, techniques et méthodes SEO, etc... Même pour des besoins professionnels.

Outre l’initiation aux logiciels et la technique, je vous apprends à développer vos idées créatives, aller à l'essentiel pour vos supports de communication mettre en cohérence votre communication et comprendre comment relier l'ensemble à vos projets ou entreprises.

Les plus de mes formations :

Chaque formation est composée de mes méthodes, trucs et astuces de professionnel pour trouver des idées, gagner du temps en utilisant correctement les bons outils, ajouter des effets à vos créations, utiliser des outils pratiques pour vos projets, etc…

Je propose toujours un premier cours gratuit pour faire découvrir à mes élèves le système de cours en ligne et réaliser un bilan pédagogique pour connaître leur niveau et leur besoin.

J'enregistre et diffuse en option et sur demande uniquement, les vidéos de vos cours particuliers pour vous permettre de revoir l'intégralité de votre formation à tout moment en ligne, sur un accès privé !

Selon votre niveau, je vous donne accès à certaines ressources qui me servent ou m'ont servi pour me développer en tant que professionnel (fichiers sources, gabarits, liens web, etc...)

Plus d'informations :

Gérant de 2 activités professionnels, j'ai peu de temps. Je sélectionne mes élèves en fonction de leur motivation et ne peux pas former plus de 5h par semaine. J'adapte donc certains ateliers de formation longue en conséquence sur plusieurs jours à définir avec l’élève. Je préfère suivre 1 à 2 élèves maximum chaque semaine pour les faire progresser au mieux.

Faisons connaissance, parlons de votre ou vos projets ! Pour cela, il vous suffit de me contacter sur Livementor.

Cursus académique

  • diplômé de ETPA
  • Bac L mention Bien

Questions et Réponses

Pourquoi l'ajout d'un doctype casse-t-il mon design ?

CSS / HTML / Généralités en CSS

Le doctype est une balise de déclaration de type de document et donc de son type d'écriture du code HTML et du rendu des CSS. Il permet notamment de définir de quelle manière le HTML et CSS du site est codé et donc sera interprété par les navigateurs. Cela permet aussi de voir si le site est codé à l'ancienne sans respecter de règles, de façon plus "transitionnel" ou en respectant "strictement" des règles notamment par rapport aux règles de codage HTML / CSS proposées par les normes w3c. Le doctype "HTML5" est une révolution dans sa souplesse, ces balise très simplifiés et proposants des innovations d'affichages et d’interprétations avec les navigateurs modernes mais aussi c'est possibilités d’interprétation rétrocompatible. Mais il faudra veiller aux affichages sur les anciennes versions des navigateurs qui n'interprètent pas les nouveautés du HTML5 / CSS 3 et donc souvent proposer des alternatives en fonction des versions des navigateurs si nécessaires. Encore aujourd'hui dans certains projets il sera indispensable de réaliser certaines parties en HTML 4 d'autres html 5 , etc... par exemple pour des particularités d'affichages imbriqués dans le design, superpositions, etc... non pris en charge par les anciens navigateurs ou des besoins très particuliers mise en page qui nécessitent des connaissances très avancés pour respecter des règles strictes et donc des connaissances poussés en HTML/CSS. Si vous n'avez pas un niveau très avancées en HTML 5 par exemple, ou si le projet ne le permet pas à cause de particularités qui s'annonce difficiles à intégrer, Il sera alors fortement conseiller d'utiliser un doctype "html 4.01 transitionnal" pour la plupart des projets de sites internet afin de palier à toutes éventualités et pouvoir transgresser certains règles/normes sans trop de problèmes afin d'afficher le résultat souhaité sur la plupart des navigateurs. Avec une peu plus de niveau en HTML, je recommande d'utiliser le doctype "xhtml 1.0 transtitionnal" qui a des règles de syntaxe différentes et plus stricte que html 4.01 transitionnal" mais reste une approche propre et souple. Il faut savoir que les navigateurs modernes interprètes bien le HTML5. Si la cible de votre site utilise principalement des navigateurs modernes et que vous êtes prêt à investir du temps utiliser le potentiel HTML5/CSS3 pour réaliser vos intégrations, vous pourrez partir sur un doctype HTML5. Il faudra par contre aux affichage en fonction des versions des navigateurs plus anciennes mais encore utilisées sous peine d'avoir de nombreux problèmes d'affichages. Voici 2 liens très détaillés et intéressants sur les doctypes et leur utilisation : http://www.alsacreations.com/article/lire/560-dtd-doctype-html-xhtml-comment-choisir.html http://www.alsacreations.com/article/lire/1374-html5-structure-globale-document.html

Comment utiliser les identifiants en CSS ?

CSS / HTML / Généralités en CSS

En CSS on distingue les sélecteurs identifiants et classes. Les identifiants sont intégrables ainsi "id="nomDeVotreId"" dans vos balises HTML et appelées depuis votre script CSS via la syntaxe "#nomDeVotreId". Le "#" définissant un identifiant. L'identifiant sert comme son nom l'indique indiquer une balise HTML qui sera afficher sur votre page toujours au même endroit. La différence majeur avec le sélecteur de classe c'est qu'il vous faut normalement définir strictement chaque identifiant une seule fois dans chaque page. Voici un exemple de balise HTML avec un identifiant que j'ai nommé "header" : <div id="header"> mon contenu </div> En html 5 on utiliserai cette balise avec la syntaxe appropriée ainsi : <header id="header"> mon contenu </header> Voici un exemple de code CSS avec le sélecteur ID : #header { width:100%; min-height:80px; } Si je veux également paramétrer directement ma balise en HTML 5 je pourrais utiliser sans le sélecteur d'identifiant "#" : header { width:100%; min-height:80px; } Néanmoins cela ne sera pas interpréter par les anciens navigateurs. Il vos mieux donc bien veiller à l'affichage sur les anciens navigateurs et si besoin utiliser un identifiant, donc "#" pour cette balise. Il est toujours possible dans le doute de cumuler les deux possiblités, soit : #header, header { width:100%; min-height:80px; } Pas de problème ainsi, vous réduisez les problèmes de compatibilité. C'est pour cela qu'on utilise d’avantage des identifiants pour la structure d'une page, que pour les autres mises en formes. Surtout si les mise en formes sont susceptibles d'être répéter dans une page et peuvent être amenées à changer ou/et être personnalisées en fonction des pages de votre site ou projet web. Le nom contenu dans un "id" en HTML peut être interpréter également dans javascript. Il peux aussi servir d'ancre. Une ancre va permettre de définir une action spécifique sur une balise HTML comportant un identifiant. Par exemple si j'indique l'attribut "id="header"" dans la balise HTML principal qui englobe le haut de page et que je créer un lien du type "<a href="#header">Remonter en haut de page</a>" alors en cliquant sur ce même lien, le navigateur affichera le haut de page. Pratique et facile non ?! Surtout dans le cas de page longue où pour naviguer dans des endroits spécifiques dans le contenu d'une page longue.

Comment insérer un commentaire dans une feuille de style ?

CSS / HTML / Généralités en CSS

Pour insérer un commentaire dans une feuille de style CSS il suffit d'utiliser l'ouverture du commentaire /* et la fermeture */ . Se qui donne : /* mon commentaire dans un feuille de style css ici */ L'utilisation des commentaires est vivement conseiller pour documenter vos css à la fois pour rapidement vous y retrouver, mais également pour facilement intervenir a plusieurs ou faire intervenir une professionnels externe si besoin. Vous gagnerai du temps quand vous reviendrai sur la lecture de vos css pour faire des ajouts/modifications/correctifs grâce à cela et dans leurs compréhension. A vous de trouver l'organisation de vos commentaires pour vous simplifier la tâches. Me concernant, j'utilise toujours les commentaires pour structurer les parties du css en fonction de la structure du projet. Exemple tous simple de commentaires pour structurer un projet de site internet : /* Reset CSS proposé par Eric Meyer pour avoir une base de code propre */ ... /* Structure globale */ ... /*haut de page*/ ... /* contenu */ ... /* pied de page*/ ... /* css spécifiques à la partie Blog */ ... /* barre latérale Blog */ ... /* Media queries tablettes/smartphones/imprimantes */

Pourquoi faut-il ajouter une famille de police générique avec la propriété font-family ?

CSS / HTML / Techniques en CSS

Dans la propriété font-family on ajoute toujours une police générique en plus de notre éventuelle police particulière ou originale pour au moins 2 raisons : 1-Si la police particulière ou originale que vous avez choisi n'est pas sur la machine du visiteur, son navigateur web chargera automatiquement la police générique. 2-Si pour une autre raison X ou Y (faute de frappe sur le nom de la police, chargement des fichiers de polices interrompus, fichiers de la police oublié, etc...) , votre police n'as pas été chargée par le navigateur de la personne qui visite votre site, blog ou page web... La police générique le sera et permettra une lecture simple et sobre sans encombres. Vous pouvez contrôler l'affichage facilement : 1-Utilisez par exemple le Web Developer Toolbar de Firefoxe ou l'inspecteur d'éléments de Google Chrome ou encore l'affichage du code source de la page dans vos navigateurs, pour vérifier le chargement des codes css. 2-Si vous connaissez visuellement le rendu de la police originale ou particulière (utiliser par exemple le fichier image de la maquette graphique), vous verrez directement que c'est la police générique qui s'affiche lors d'un aperçu sur le navigateur. Il vous suffit donc de rectifier le tire dans votre feuille de style.

Matières enseignées et méthodologie

CSS / HTML niveau Formation Professionnelle

J'aborde le html / css en fonction du projet, comme en entreprise. Pour des raisons de comptabilité il sera parfois nécessaire d'utiliser du html 4, du html 5 ou css 1, 2 ou 3. Nous verrons donc en plus de l'aspect technique, pourquoi et comment utiliser html et css dans des projets théoriques et concrets. Je suis un adèpte de l'utilisation du css à la place du javascript quand c'est possible pour des questions de simplicité et d’optimisation. Je vous indiquerai donc parfois les faisabilités et limites de mises en page, interactivités et animation en css en fonction de vos projets.

Les formations html / css proposées :

  • -Initiation au html / css (Comprendre et utiliser html/css . Principe du html5 et css3) (8h)
  • -Découper et intégrer une maquette graphique d'un site internet non dynamique en html / css (8h)
  • -Créer un thème graphique de site internet dynamique compatible avec Wordpress (8h)(Requière Initiation au html / css + Initiation Wordpress + Initiation Photoshop ) 
  • -Sur mesure en fonction de vos besoins

SEO niveau Formation Professionnelle

Je suis chargé d'optimiser et référencer une 10 ène de sites de petites et moyennes entreprises ou sociétés au quotidien seule ou avec des collaborateurs externent depuis 2009. Je me ferai donc un plaisir de vous dévoiler mes méthodes, outils et techniques pour vous aider dans le référencement naturel de vos sites.

Plusieurs objectifs principaux :

  • -Positionner les pages d'un site en 1er page notamment sur Google voir dans les 3 premières positions en référencement naturel.
  • -Apporter de l'accessibilité et de l'attractivité à son site avec des principes liées au html, aux images, aux vidéos, au web design,aux Microformats et une pincé de marketing.
  • -Adopter des bases stratégiques de référencement naturel pour référencer un site internet.

Les formations SEO proposées :

  • -Initiation au référencement naturel (4h) (requière la formation initiation html/css)
  • -Optimiser un site internet vitrine pour le référencement naturel (4h) (requière la formation d’initiation ci-dessus)
  • -Optimisation d'un site internet e-commerce (4h ou 2h si vous avez suivi la formation précédente)

WordPress niveau Formation Professionnelle

Wordpress est un gestionnaire de contenu très populaire et pour cause ! Il permet vraiement de faire un grand nombre de type de site (vitrine, e-commerce, blog, social, page de vente, etc...) avec un peux de créativité et davantage de techniques. Je vais donc vous montrer comment faire votre premier site vitrine avec blog intégré sans connaissance techniques. Si vous êtes très motivés ou que avez des connaissances en web design et intégration html/css nous verrons alors comment créer des sites de A à Z avec wordpress et les rendre professionnels. Je propose par ailleurs des formations en web design et html / css pour cela.

Les formations Wordpress proposées :

  • -Initiation à l'utilisation du gestionnaire de contenu Wordpress
  • -Créer son premier site internet sans connaissances techniques avec Wordpress et un thème graphique gratuit
  • -Créer un thème graphique de site internet compatible avec Wordpress à partir d'une maquette graphique (Requière initiation wordpress + initiation Photoshop + initiation html/css)
  • -Sur mesure en fonction de vos besoins

Adobe Illustrator niveau Design

Concernant Abode illustrator, je vous accompagne pour mettre en oeuvre des projets graphique et dynamiques sur tous supports imprimés, web et multimédia. De la création d'une illustration, en passant par la création de supports de communication visuelle, ou des éléments graphiques qui auront pour but d'être utiliser dans des animations ou interactivités de sites internet, CD-rom, DVD-rom, vidéos animés en pré-calculé ou temps réelle depuis un logiciel de traitement vidéo comme after effect ou 3D, etc...

En fonction de votre niveau et des formations j'intègre parfois des principes et notions nécessaires à la maîtrise des logiciels Adobe Photoshop et Illustrator tel que la mise en page, la lumière, la perspective, la 3D, la typographie, l'harmonie des couleurs, etc... pour vous permettre de comprendre qu'au delà de l'utilisation d'un logiciel, il y a des principes créatifs et techniques pour atteindre vos objectifs. J'ajoute si nécessaire des interconnexions avec d'autres outils et logiciels pour les projets qui le nécessitent.

Les formations Illustrator proposées :

  • -Initiation à Illustrator
  • -Créer un logo comme un pro
  • -Créer des éléments graphiques (icônes, illustrations, personnages, machines, etc.. selon votre projet et/ou éléments découpés pour pouvoir le animer en 2D dans des animations sous flash, ou after effect, etc...)
  • -Créer une carte de visite unique comme un pro
  • -Créer un flyer comme un pro (requière initiation photoshop)
  • -Créer sa plaquette commerciale comme un pro (requière initiation photoshop)
  • -Sur mesure en fonction de vos besoins

Adobe Photoshop niveau Design

Concernant Abode Photoshop, je vous accompagne pour aller au delà des besoins artistiques pour mettre en pratique en fonction de vos besoins réels, comme par exemple la préparation d'images et photomontages pour un flyer, une plaquette commerciale, une jaquette de CD-rom ou DVD, le design d'interfaces multimédia, réaliser des textures, optimiser votre logiciel pour votre configuration, utiliser Photoshop dans des projets graphiques divers,  etc...

En fonction de votre niveau et des formations j'intègre parfois des principes et notions nécessaires à la maîtrise des logiciels Adobe Photoshop et Illustrator tel que la mise en page, la lumière, la perspective, la 3D, la typographie, l'harmonie des couleurs, etc... pour vous permettre de comprendre qu'au delà de l'utilisation d'un un logiciel il y a des principes créatifs et techniques pour atteindre vos objectifs. J'ajoute si nécessaire des interconnexions avec d'autres outils et logiciels pour les projets qui le nécessitent.

Les formations Photoshop proposées :

  • -Initiation à Photoshop
  • -Créer un flyer comme un pro (peut être couplé avec Illustrator)
  • -Créer sa plaquette commerciale comme un pro (peut être couplé avec Illustrator)
  • -Créer son affiche comme un pro (peut être couplé avec Illustrator)
  • -Créer la maquette du design d'un site internet (peut être couplé avec Illustrator)
  • -Créer une maquette de design de site pour ordinateur, tablettes et smartphones (peut être couplé avec Illustrator)
  • -Sur mesure en fonction de vos besoins

Camtasia Studio niveau Édition Vidéo

Option : La vidéo de votre cour particulier en ligne enregistrée et diffusée sur un accès privé

  • -Enregistrement en direct de l'écran du formateur et des conversations audio.
  • -Mise en ligne illimité de votre cour en vidéo sur un accès privé qui vous est dédié, accessible en ligne via ma chaîne Youtube https://www.youtube.com/user/f4lcosolo

Formation Professionnelle

Design

Édition Vidéo



Vous avez une question ? Contactez sans hésiter, 7j/7 un membre de l'équipe LiveMentor par mail à l'adresse contact@livementor.com.


Logo emblem Connexion

Logo emblem Inscription (1er cours gratuit !)