Retrouvez toute l’actu des Women@Nantes, nos rencontres et les membres à la une !

Compte-rendu atelier : « Les bases de la création d’un site web » par Pierre Facq Le Wagon Nantes

Mercredi 28 juin nous avons eu la joie d’être accueillies au DOJO Nantes par Le Wagon qui propose des formations de développeurs web à Nantes, rapides (9 semaines!), efficaces, comme on aime !
Le thème de l’atelier était : « Les bases d’un site Web » par Pierre Facq.

Alors pour poser le décor, Pierre nous annonce que pour construire un site Web, il faut maîtriser 5 ou 6 compétences ! Rien que ça !

  • UX
  • UI
  • CMS
  • Développement
  • Hébergement
  • Analytics

De quoi parle – t-il ?

1- UX pour User expérience :

c’est l’histoire que je veux raconter, c’est le pitch (sans photo ni DA ni couleur !). C’est un travail dans une logique de wireframes : cela permet d’exprimer la représentation du site avant de rentrer dans la décoration (UI). C’est moche mais efficace !

wireframe

wireframe

2- UI pour User Interface :

c’est le design visuel du site, c’est à dire la couleur, la typographie et la mise en page. L’UI est construit autour de 5 à 10 composants : images, avatars, boutons, formes, chat, box, barre de menu, cards, dropdown …
Une fois que ces briques applications sont conçues, on pourra les réutiliser dans différentes pages. Quelques ressources intéressantes pour construire votre site :

  • Dribbble : c’est la référence en termes d’ UI. On y trouve des éléments d’inspiration visuels, formulaires, loader…
    Calltoidea inspiration
  • Codepen.io
    Awwwards.com : tendances sur typo couleur
    Coolors.com
    Producthunt.com : outils de développement et de design très puissant comme support
    Medium : vrai effort design, ils ont même créé leur police ce qui rend le site attractif notamment en termes d’UX.
    Baladez vous ! Vous ne serez pas déçus !

3- CMS :

Il en existe plusieurs dont :

  • WordPress : pas besoin de savoir coder (80% du marché)
  •  Joomla
  • Drupal : il faut savoir coder

Ce sont des environnement opensource
Pour personnaliser Wordrepress, vous pouvez partir des thèmes pré-defini ou bien en trouver d’autre sur themeforest.net. Ils sont pour la plus part payant mais leur personnalisation est bluffante !
Exemple de WordPress : ce CMS suffit si vous trouvez votre thème et que vous n’avez pas besoin de modification.

4- Hébergement :

on l’a déjà vu dans d’autres ateliers, il en existe beaucoup dont OVH à titre d’exemple.

5- Développement

C’est là que cela se complique !
Il existe plusieurs languages dont Html, CSS, javascrip…

Pour faire du développement Html, il faut un bon navigateur chrome ou Firefox plus un éditeur de texte de type sublimtext. Il faut créer un fichier Html (hypertext markup language – language avec des balises) « index.html », et un fichier CSS (Cascading Style Sheets – des feuilles de styles en cascade), « style.CSS » 
On aime les analogies chez les W@n : en fait l’HTML permet de construire la maison, les murs, le toit et ensuite, on pose la déco et le design avec le CSS ! C’est simple 😉

Les incontournables du fichier html sont :

  • la balise <head> : les éléments d’intelligence que je ne veux pas afficher mais qui servent aux autres sites (titre, compatibilité, mot clés…)
  • la balise <body> qui représente le corps du site les éléments que je veux afficher

Le browser (chrome, firefox, IE) interprète les balises html en regroupante les informations par bloc d’information  d’une manière qui peut être modifiée par le CSS.
Le principe est simple : une balise ouvrante, une balise fermante, le contenu au milieu ! Associé à ces éléments on rajoute des éléments de style grâce au CSS

L’API est une interface utilisée par des programmes pour agir avec une application : pas faite pour l’humain mais pour le programme. Beaucoup des sites utilisent des API. L’intérêt est que cela structure la donnée qui peut ensuite être lue par les moteurs de recherches. Les performances du sites sont accrues grâce aux API.

Exemples d’applications téléchargeables pour enrichir votre site :

  • Formulaire Html : formkeep wufoo.com
  • Newsletter : mailchimp
  • Sondage : typeform, formulaire pour poser plusieurs questions utile pour l’acquisition
  • Suivi de l’échange avec l’utilisateur et interaction : Intercom
  • outil de paiement en ligne : Stripe
  • Github : c’est une plateforme de développement très utilisée par les développeurs pour travailler : s’inspirer, gérer des projets, trouver des réponses…

6-Mesure de performance :

On parle d’analyse de trafics sur un site : les outils les plus courants sont Google Analytics et mixpanel.

Pour terminer : Le Wagon organise des Meetup réguliers (sur inscriptions) et propose une plate-forme en ligne gratuite avec le programme fullstack en 9 semaines.
Si vous êtes intéressée pour apprendre à coder alors RDV sur : https://www.lewagon.com/fr

Divers tableaux de motivation au Dojo Nantes

les messages de motivation du Dojo Nantes

comment un site web est construit

Comment marche un site web

Les CMS les plus répandues

Les CMS les plus connus

Exemples d'API

Exemples d’API

La syntaxe du code en CSS

la syntaxe de code CSS

La syntaxe du code en html

la syntaxe de l’html

La base d'un fichier html

Les bases d’un fichier html

Principe d'un site dynamique

Atelier : « Les bases de la création d’un site web »

Dernier atelier de la saison  !

WWW, HTML/CSS/JS, CMS, API : le Web ressemble parfois à un concours d’acronyme. Et si on expliquait la magie derrière les sites web, comment fonctionne un site web statique et un site dynamique ?

Nous vous proposons 1h30 d’atelier avec Pierre Facq, responsable Le Wagon Nantes, pour découvrir les mécanismes basiques du Web et les questions à se poser avant de lancer son site web. 

Envie de venir ?

Cet atelier se déroulera le mercredi 28 juin à 19h au Dojo Nantes, 26 boulevard de Stalingrad – 44000 NANTES.

Pour participer, l’inscription est obligatoire. Choisissez le type de billet qui vous concerne ci-dessous :

Préparez votre billet électronique ou papier le jour J, nous le scannerons à l’entrée. Dans le cas d’un imprévu, pensez à annuler votre réservation sur Eventbrite (Billets > Gérer la commande > Annuler la commande).

A l’issue, nous vous proposerons notre petit pot habituel 🍸 .

D’ici là, nous vous souhaitons une belle semaine ensoleillée ☀️ !

Déjeuner networking Vendredi 2 Juin

Et voilà, …bientôt le mois de Juin ! Plus que quelques semaines avant l’été, les apéros au soleil, les bikinis et les transats 🙂 .
Mais avant de partir en vacances, venez déjeuner avec nous une dernière fois ! Rendez-vous le vendredi 2 Juin à partir de 12h30 à la crêperie Just Bigoud’ pour le dernier déjeuner networking mensuel des Women@Nantes avant le break estival.

Déjeuner networking

Déjeuner-Networking-W@N-Mai-2017

À quoi servent les déjeuners networking ?

Les déjeuners networking des Women@Nantes s’adressent à toutes les personnes qui s’intéressent au secteur du numérique. Que vous soyez professionnel du secteur, novice mais attiré par le monde digital ou bien tout simplement à la recherche d’un réseau sympa et pas prise de tête : ces déjeuners sont faits pour vous ! Pour permettre un maximum d’échanges entre les participants, nous limitons les places aux 20 premiers inscrits. Nous avons également mis en place une formule « speed dating » afin que vous puissiez discuter avec un maximum de personnes. Pensez à prendre vos cartes de visite !

Où se passe le déjeuner networking ?

Nous vous donnons RDV à la crêperie Just Bigoud’, sur l’ile de Nantes au 26 rue Louis Blanc. La salle du bas nous est réservée 🙂 . En ce qui concerne le menu : c’est simple mais efficace ! Des galettes, des crêpes, des tartines ou encore des œufs cocotes… vous devriez pouvoir trouver votre bonheur.

NB : les consommations seront à votre charge.

Comment m’inscrire ?

Les billets pour le déjeuner networking sont disponibles dès maintenant sur Eventbrite – vous pouvez réserver directement ci-dessous :

N’oubliez pas de de vous désinscrire directement sur Eventbrite en cas d’empêchement afin de permettre à quelqu’un d’autre de participer. Et n’oubliez pas qu’il n’y a que 20 places disponibles… alors pas une minute à perdre 🙂 !

Atelier « Échange de compétences entre Women@Nantes »

Ne dit-on pas : « En mai, fais ce qu’il te plaît » ? Alors justement, si vous faites ce qui vous plaît, l’atelier du mois est pour vous ! En effet, ce mois-ci, nous vous proposons de faire un échange de compétences.

Atelier "Échange de compétences entre Women@Nantes"

 

Lors de cet atelier, l’idée est de partager votre talent, votre savoir-faire. Cela sera l’occasion de parler de votre activité, de ce qui vous fait vibrer. A l’inverse, peut-être êtes-vous en recherche d’une compétence pour vous aider dans votre quotidien, pour compléter votre offre de service, ou simplement pour votre information personnelle ?

En groupe ou en 1 to 1, cette soirée sera l’occasion de nombreux échanges !

Comment participer ?

-> Inscrivez-vous ci-dessous :

Une participation symbolique est demandée aux non-adhérents. Vos billets électroniques vous seront demandés à l’entrée.

 

-> Complétez ce document pour nous faire part de vos compétences et celles recherchées. Merci d’indiquer vos compétences principales.

N’oubliez pas vos cartes de visites le jour J !

 

A l’issue, nous vous proposerons un pot networking.

 

D’ici là, nous vous souhaitons un bon week-end 🙂 !