Atelier Silex 2/3 à Silicon Banlieue : Apprenez à faire votre site CV

Il n’est plus possible d’effectuer une recherche d’emploi sans savoir utiliser les TIC. Valoriser et savoir diffuser son CV devient aujourd’hui indispensable. Autour de la technologie libreSilex qui ne nécessite aucun prérequis de programmation, nous vous invitons à apprendre à réaliser votre site web CV pour mieux vous valoriser sur le web.

Ces ateliers entrent dans le cadre du projet “Le tour du Web en 50 ateliers” qui propose des ateliers d’initiation aux métiers du numérique par la pratique, pour permettre aux personnes éloignées du numérique de mieux comprendre ce secteur et de s’initier à ses métiers.

Programme des ateliers

Cette session de formation comprend 3 ateliers de 2H organisés dans les locaux de Silicon Banlieue à Argenteuil

Le premier atelier a eu lieu le jeudi 15 octobre et a permis de faire une présentation de l’interface et des fonctions de bases du logiciel

• Atelier #2

  mercredi 4 novembre  de 10H00 à 12H00

Fonctions avancées

Mode appolo et Html Box

• Atelier #3

  mardi 10 novembre de 10H00 à 12H00

Publication et utilisation de templates

À la fin de cette session vous serez capable de créer votre CV en ligne mais aussi de former de nouveaux utilisateurs !!

À propos de SILEX

Silex est un logiciel libre et gratuit qui vous permet de réaliser vos sites internet en toute liberté et de garder le contrôle total de vos données (interopérabilité, pas de “lock-in”, pas de freeware, propriété des données)

qui permet de réaliser des sites internet sans avoir besoin de savoir coder. Mais il permet aussi de commencer facilement à mettre les doigts dans le code de façon ludique.

Silex est un éditeur de sites web en ligne, libre et gratuit qui compte des milliers d’utilisateurs dans le monde.

Quelles que soit votre niveau vous pourrez réaliser un site internet Il permet de réaliser des sites internet sans avoir besoin de savoir coder. Mais il permet aussi de commencer facilement à mettre les doigts dans le code de façon ludique.

Silex est fait pour vous quelles que soient vos compétences

• si vous ne savez pas coder le mode wysiwyg (what you see is what you get) vous permettra de faire votre site sans écrire une ligne de code.
• si vous êtes designers vous pourrez facilement faire du prototypage et vous serez libre pour designer en partant d’une page blanche
• si vous voulez vous mettre code silex vous offre des éditeurs Html, CSS ou javascript pour commencer à coder petit à petit
• si vous êtes développeur vous pourrez ajouter vous même de nouvelles fonctionnalités au code source disponible sur github.

Date / Lieu / Inscription

: 9 rue de Calais, 95100 Argenteuil.

Pour vous inscrire gratuitement pour cet atelier envoyez un mail à contact(at)siliconbanlieue(point)fr

Cible

tout public

Intervenant

Linkedin

**Exercice Récapitulatif

**

• Créer un dossier dans votre dropbox

(File / New File)

• Nommer ce site

(File / Settings / Website Title)

• Enregistrer le fichier html dans le dossier ad hoc de votre dropbox

(File /Save file )

_Commentaires

Nommez sans accents sans espaces sans caractères spéciaux :_ é è ! ç ” ’ / ; ?  etc….

_Pensez à sauver à nouveau le fichier après chaque étape !! (Ctrl S)
_

• Définir la résolution de son site

Sélectionner le metacontainer

choisir dans Properties / Position and size la largeur

W et la hauteur

H

(conseil W

960 H

800)

• Changer la couleur du background

cliquer sur le fond gris foncé

(Properties / Background Color)

(vous pouvez aussi insérer une image de fond Properties / Background image)

• Créer 1 page supplémentaire

(Insert / New Page)

• Renommer les pages

(cliquer sur le nom de la page dans le rail à gauche, exemple Accueil et CV)

NAVIGATION

• Insérer un container et le placer en haut

  on appellera ce container le “header“

(Insert / Container)

Commentaires :

redimensionner le container pour qu’il soit aligné en haut à gauche

X

0 ; Y

0

• Afficher le “header” sur toutes les pages

(Properties / Show only on

decliquer toutes les cases)

• Changer la couleur du container

(Properties / Background Color)

• Insérer 2 boîtes de texte alignées dans ce container, y mettre le nom des 2 pages

(Insert / Text Box)

Commentaires :

Utilisez les coordonnées (X;Y) dans Properties (mettre le même Y pour aligner horizontalement au pixel près)

• Créer des liens sur chaque boîte de texte vers la page associée

(Properties / Link)

DESIGN PAGE ACCUEIL

• Insérer un container

Insert / Container

• Redimensionner le container pour pouvoir y insérer une image et un bloc texte

• Insérer une Text Box dans le container

Insert / TExt Box

• Editer et mettre en forme le texte

double cliquer dans la texte box (mise en forme)

insérer du faux texte (Lorem)

• Importer une photo dans votre dropbox
• Insérer la photo dans votre page d’accueil

Insert / Image

• Afficher la photo uniquement sur la page d’accueil

(Properties / Show only on

cliquer la case “accueil”)

• redimensionner la photo à la taille voulue (maj + souris pour garder les proportions de l’image)

(Properties / Show only on

cliquer la case “accueil”)

si vous avez besoin de redimensionner votre image de manière importante il vaut mieux modifier l’original de la photo dans PIxlr

• Modifier votre image dans Pixlr

(Edit / Edit image with Pixlr)

Dans pixlr

Image / Taille de l’image

Fichier / Enregistrer (Référent) (attention cela va écraser l’original de votre photo)

• Insérer à nouveau la photo redimensionnée dans le container de votre page d’accueil

DESIGN PAGE CV

• Télécharger les icones Fbk Twitter Linked In dans votre dropbox
• Insérer ces images dans votre page
• Insérer un lien vers ces réseaux sociaux

selectionner l’image

Properties / Link / External LInk (copier coller l’adresse du site adhoc)

• Insérer une Html Box avec une vidéo Youtube sur la page 2

(Insert / Html Box)

Dans youtube

Cliquer sur partager / intégrer

copier et coller le code iframe dans la Html Box

dans la Html box modifier le height et width à 100% pour pouvoir redimensionner la vidéo avec la souris

• Créer un lien sur cette image vers une page externe

(Properties / Link / external link)

• Afficher le résultat en html dans une nouvelle fenêtre

(View / View in a new window)

**RESSOURCES IMAGES À TÉLÉCHARGER
**

Clic droit enregistrer l’image sous