Prises de note

15/11/18

A.

Mise en place de Shaarli : https://www.shaarli.fr/my/link/?

Système qui va permettre de regrouper des liens utiles sur le wiki.

https://jqueryui.com/draggable/

B.

Présentation d'un traceur de route : https://ping.eu/traceroute/

Il nous montre le trajet effectué pour atteindre le lien demandé.

C.

Retour rapide sur l'exercice qui a été réalisé au cours lors de la date précédente.

Quelques termes :

Javascript : 3 mots pour définir = Boucle - Inconditionnel - Variable.

—- typographie

Google Font : @import (chercher sur un site mais attention pas toutes les fonts)

transforme une typo pour le web. https://www.fontsquirrel.com/tools/webfont-generator

Utiliser @font-face = https://developer.mozilla.org/fr/docs/Web/CSS/@font-face

25/10/18

Rem. : Ne pas mettre d'accent et de majuscule lors de l'enregistrement.

Lexique

Algorithme : ensemble de règles pour obtenir un résultat, suite d'opérations, système mathématique m(

W3C : Organisme qui vise à normaliser et promouvoir les technologies du World Wide Web m( :-\

FTP : File Type Protocole, Type de communication, transfert de fichier à un autre endroit qui est le serveur distant data center (centre de données). Protocole / type de communication qui sert d'intermédiaire pour les serveurs distants, permet de transférer des fichiers.

HYPERLIEN : un lien hypertexte ou un hyperlien est un lien qui permet en cliquant dessus d'atteindre un autre endroit de la page ou une autre page. Créé par Ted Nelson.

WWW : système hypertexte public.

VALEUR BOOLEENNE : valeur soit vraie, saut fausse.

Différence entre un serveur local et un serveur distant : qui est sur l'ordinateur et distant = besoin d'internet, intermédiaire= FTP 8-o

OS: ensemble de programmes grâce auxquels l'ordinateur va fonctionner. Exemple: iOS, Windows.

Langages Web: HTML - CSS - JS - PHP

  • html: langage descriptif. Balises avec du contenu. Structural
  • css: habillage, style
  • js: animation, fluidité. + bibliothèques –> Jquery
  • php: contenu modulable, s'intègre au html

Exercice :

Après avoir ouvert Atom, on ouvre le dossier correspondant. (Open a Project)

On a besoin de créer 2 fichiers:

1) Hmtl 2) Css

  • index.html
  • style.css
  • Créer un dossier css
  • glisser le style.css
  • Créer un dossier img
  • Il va falloir se rappeler de quelque nom de balise.

Vérifier que l'on travaille bien sur : index.html 

  Taper html + entrer afin d'inclure le code. 
  On lui indique donc que l'on va travaillé en html et qu'on travaille en balise. Car on met toujours des <blabla> </blabla>
  On met entre le <title>site de la classe </title>
  Dans body on met : 
  <h1> rofjjskd </h1>
  <h2>dfdfgdgf </h2>
  <p>le text dsjnjnfd</p>
  <ul>
  <li>fdkjd</li>
  <li>dffdg</li>
  </ul>
  • on va rajouté une image, pour cela une fois l'image choisis, on peut ou bien la glissé directement dans le fichier mère dans le dossier img
  • ensuite dans img on sélectionne le dossier img ensuite on tape la barre de code suivante: <img src=“” alt=“”>
  • On ajoute entre les “” le nom du fichier image .jpg ou .png etc.
  • Pour le alt=“” = Créer pour les non voyant, sur le navigateur.
  • il permet aux personnes non voyantes une description faite par le navigateur.
  • Internet Archive : Des archives sur les anciennes versions de site. Permet de voir son évolution.
  • On tape link entre le <meta …> & le <title>, on sélectionne le link ainsi le code se met automatiquement. Cela donne : <link rel=“stylesheet” href=“/css/<style.css”>
  • On peut décaler l'onglet style.css à droite du index.html afin de pouvoir travaillé en alternance.
  • On ajoute dans l'onglet style.css :

body { background: red; color:green; ); h1{ font-size: 20px; ); img{ );

Séance d'introduction

  • Présentation du cours Outils numériques et Culture Numérique
  • Présentation des pratiques de chacun et de son appréhension du numérique.
  • Défrichage de quelques notions importantes:
    • Navigateur - moteur de recherches / Web - Internet
  • Explication Wiki / Sharlii
    • Prise de note sur le wiki
    • Travail de lexique
    • Test de shaarli pour récupérer des liens.
    • Présentation du sujet First style
    • Début du dossier de travail + test HTML/CSS

Pour commencer nous allons essayer de faire une page web présentant notre cours. Chacun doit tester a styliser une page Html.