Note de rappel sur la parution des articles

    Note de rappel sur la parution des articles

    Bonjour,

    Ceci est une note de rappel dont je vous invite à prendre connaissance.
    Les articles seront modifiés régulièrement 
    Surtout si je veux qu'ils soient à jour et corrects.

    Je souhaite que ce site devienne un site de référence.
    Je ferais de mon mieux pour y apporter le meilleur.

    Je vous invite à consulter ce site régulièrement.
    Revenez sur les articles après leur parution.
    Ils pourront avoir subis des modification.

    Cordialement,

    Arnaud L => administrateur de Coding-Less.com

Consultation du site sur tablette/Téléphone

    Consultation du site sur tablette/Téléphone

    Bonjour,

    J'ai tout fais pour rendre le site disponible sur tablette et téléphone.

    Le site peut être consulté en mode portrait (écran du téléphone à la verticale) et paysage (écran du téléphone à l'horizontal).
    Un texte trop long est coupé et il faut glisser le texte vers la gauche ou la droite dans les encarts pour le consulter.

    j'ai volontairement cloisonné le texte pour parvenir à un résultat décent et consultable.
    Le responsive (site qui s'adapte normalement à tous les périphériques de consultations (pc, tablette, téléphone)) à ses limites.

    Bonne consultation 

    Arnaud L => Administrateur de Coding-Less.com 

La programmation

    La programmation

    La programmation est une suite de mots (instructions ou fonctions),
    qui vont générer un programme (après compilation ou interprétation du code).

    Pour faire un programme il faut:
    - Ecrire un code (plein de texte) que l'on appelle (code source).	

    Nous allons voir une exemple de code dans le chapitre suivant.

    Exemple de code une boucle for en langage C, qui affiche 10 fois bonjour

    for(int i = 0; i<= 10; i++)
    {
        print("bonjour");
    }

    Ne retenez pas ces lignes c'est juste pour l'exemple

    Vous utilisez tous les jours des programmes

    Exemple pour un ascenseur:

    - Vous appuyez sur le bouton d'appel de l’ascenseur.
    - La porte s'ouvre.
    - Vous entrez dans l’ascenseur.
    - Vous appuyez sur le bouton de l'étage.
    - L’ascenseur monte (si vous êtes au rez de chaussé ou à la cave) 
    ou descend (si vous êtes au dernier étage ou sur le toit).
    - La porte s'ouvre.
    - Vous descendez de l’ascenseur.
    vous avez donc utilisé le programme ascenseur sans vous en rendre compte.


    Fonctions utilisées par le programme ascenseur (simplifiées)
    ---------------------------------------------------------------------
    fonction appel_Ascenseur();
    fonction ouvrir_Porte_Ascenseur();
    fonction sélectionner_Etage_Ascenseur();
    fonction vérifier_Etage_Ascenseur();
    fonction aller_Etage_Sélectionner_Ascenseur();
    fonction ouvrir_Porte_Ascenseur();

    Quand on entre dans un ascenseur tout ce qu'on lui demande c'est de monter ou descendre

    Vous utilisez tous les jours des programmes

    Exemple pour la télécommande et la télévision:

    - Vous prenez la télécommande.
    - Vous appuyez sur le bouton marche de la télécommande.
    - La télécommande allume la télévision.
    - Vous appuyez sur la chaine 10 de la télécommande.
    - La télévision affiche la chaine 10.
    - Une fois votre  série ou manga (ou jeu si vous êtes un gamer) terminé.
    - Vous appuyez sur le bouton arrêt de la télécommande.
    - La télécommande éteint la télé.

    Vous avez donc utilisé les programmes 
    télécommande
        + 
    télévision
    sans vous en rendre compte.


    fonctions utilisées par le programme télécommande + télévision (simplifié)
    ---------------------------------------------------------------------
    fonction Télécommande_Appuis_Bouton_Marche_Télévision();
    fonction Télévision_Allumer();
    fonction Télécommande_sélectionner_Chaine_Télévision();
    fonction Télévision_Aller_Chaine_Sélectionner_Par_Telecommande();
    fonction Télécommande_Appuis_Bouton_Arrêt_Télévision();
    fonction Télévision_Éteindre();

    Tout ce que l'on demande à la télécommande c'est d'allumer la télé pour se faire un bon FIFA !!!

    A retenir 

    Derrière ces actions (fonctions en programmation).
    Se cache un programme qui exécute le code.
    Ce programme est écrit dans un langage (C, C++, C#, JAVA, PYTHON, JS et j'en passe ... ).
    Et sera exécuter par un device (appareil, pc, télécommande, ascenseur, ...).
    Pour produire le résultat demandé.

    Arnaud => Administrateur de Coding-Less.com

Compilateur VS Interpreteur

    Qu'est qu'un compilateur?

    Imaginez deux personnes qui se parlent:
    - un  humain, qui parle le langage humain avec des mots bien humain: 
        (table, chaise, vélo, etc)
    - un ordinateur qui ne parle qu'en langage binaire: 
        (un mélange de zéros et de un).


    Cela donnerait
        l'humain dirait: "fais moi un café ordinateur"
        L'ordinateur répondrait: "11101111 0111 1111000000100010" 
    

    Si une 3ème personne à coté écouterait la conversation, 
        Elle dirait: "hein? qu'est ce qui dit l'ordinateur"?


    La solution le compilateur:
        Un compilateur et une personne qui va prendre un bloc note 
        Ré-écrire le langage humain en langage ordinateur.
        En passant par un autre langage (langage intermédiaire).
        Puis une fois ce langage intermédiera écrit.
        Il va traduire ce langage intermédiaire en langage ordinateur.


    Humain et ordinateur vont alors se comprendre.
        - humain dirait: "ordinateur fais moi un café".
        - compilateur écrirait: "ordinateur fais moi un café"
            en langage intermédiaire pour que ordinateur comprenne la demande de humain.
        - ordinateur répondrait:"11101111 0111 1111000000100010é"
        - Humain aurait son café (programme exécuté).


    Un compilateur et un programme.
        Qui va réécrire le code source écrit par l'humain.
        Pour le rendre compréhensible pour votre ordinateur).

        Les langages de humain et ordinateur ne changent pas
        On a fait appel à un traducteur (Le compilateur).

        Un peu comme on voudrait parler à un anglais
        Et que l'on ne le comprenait pas.
        On ferait appel à la petite sœur qui est en 6ème
        Qui fait de l'anglais depuis 1 an pour faire la traduction.
        - Je sais j'ai vachement imagé la chose .

    Le langage entre humain et pc n'étaitt pas compréhensible avant le compilateur.

    Qu'est qu'un interpréteur?

    On reprend la même situation, imaginez deux personnes qui se parlent
    - un  humain, qui parle le langage humain avec des mots humain:
        (table, chaise, vélo, etc)
    - un ordinateur qui ne parle qu'en langage binaire 
        (un mélange de zéros et de un).

    Cela donnerait:
    humain: "fais moi un café ordinateur".
    L'ordinateur répondrait: "M voici votre café". 

    L'ordinateur comprend tout de suite le langage humain
    Il sait le traduire sans qu'une autre personne traduise
        Ni la petite sœur qui est toujours en 6ème.

    On dit qu'il interprète les mots de humain sans aide extérieure
    (compilateur ou petite sœur) supplémentaire.

    On apprend de mieux en mieux à comprendre l'ordinateur (vive le progrès Hi HA !!!).
        Attention au jeu mot caché !!!

    Compilateur VS Interpréteur
    Exemples de langages utilises par les 2

    Exemple de langage qui nécessite un compilateur
    C, C++, C#, JAVA, etc...

    Exemple de langage qui nécessite un interpréteur
    JAVASCRIPT, CSS, HTML, PYTHON, etc...

    Arnaud => Administrateur de Coding-Less.com

Laissez un commentaire

    Votre avis m’intéresse

    Bonjour,

    N'hésitez pas à me faire part de vos remarques avis suggestions mécontentement.
    Que je les prennent en considérations, pour améliorer le site

    J’essaie de rendre ce site le plus humain possible.
    Je ne m'adresse pas spécialement aux informaticiens et/ou développeurs, d’où la légèreté de certains articles.

    Ce site est votre mémo interactif, il est la pour rappeler des informations en découvrir certaines et qui sait en approfondir d'autres.
    Si certains sujets vous taraudes l'esprit, n'hésitez pas à m'en faire part, qui sait comme la fée(line, stin, tide) je pourrais me pencher sur le sujet et en faire un article.

    Cordialement

    Arnaud L => Administrateur de Coding-Less.com

Les commentaires en programmation

    Commentaires:

    Dans tous les langages de programmation.
    On peut commenter ou cacher un bout ou un bloc de code.

    On ajoute un commentaire dans le code source.
    Et toute la ligne ou toute la partie du code entre Commentaire sera ignorée.
    Lors de la génération du programme.

    Un commentaire peut s'écrire sur une ligne.
    Un commentaire peut s'écrire sur plusieurs lignes.
    On peut également cacher du code sur une ou plusieurs lignes.

    Le code commenté ne sera ni lu ni interprété 
    par le compilateur.
    Par l’interpréteur.

    A qui le code sera caché:

    -Au compilateur 
        - Si c'est un langage compilé (ex: C, C++, C#, JAVA, etc...).

    - A l'interpréteur de code
        - Si c'est un langage de script (JAVASCRIPT, CSS, HTML, etc...).

    Note a moi même:  Quand on dit que le commantaire ne sera pas lu ni interprété par le compilateur  ou l'interpreteur.
    Quelque part je me dis que c'est faux car comment on veut qu'il sache ou commence et ou fini un commentarie si il ne le lit pas ???).

    Exemple de codes ou commentaires cachés au programme

    EN DEBUT DE LIGNE [sur 1 ligne]
    -----------------------------------------
    //ceci est un commentaire sur une ligne
    // 2 slashs(//) pour commencer le commentaire en début de ligne
    Puis ajouter la description de votre commentaire.


    EN FIN DE LIGNE [sur 1 ligne]
    -----------------------------------------
    let i = "toto 	//déclaration et affection de la variable i
    //le commentaire se trouve après la portion de code 
    Et commence par les 2 slashs(//) suivi du commentaire sur une ligne.


    SUR PLUSIEURS LIGNES [sur x lignes]
    ATTENTION un commentaire sur plusieurs lignes 
    commence par /* et se fini par */
    -----------------------------------------
    /*
    Commentaires 
    sur plusieurs lignes pour commenter ou cacher du code

    for (let i = 0; i <= 10; i++)
    {
    document.write("bloc de code caché à l’interpréteur de script);
    }
    */


    mixe des 3 exemples précédents
    EN DEBUT DE LIGNE [sur 1 ligne]
    EN FIN DE LIGNE [sur 1 ligne]
    SUR PLUSIEURS LIGNES [sur x lignes] 
    -----------------------------------------
    for (let i = 0; i <= 10; i++)
    //début de la boucle for <= commentaire sur 1 ligne pas de code avant
    {
            print("bloc visible dans le programme");
            /*
                document.write("
                                bloc de code caché au programme
                            ");
            */

    }//fin de la boucle for <= commentaire en fin de ligne après du code pour délimiter le for

    
    A retenir
    Tout langage de programmation contient des commentaires
    Certains seront communs, d'autres vont différés.


    Cela dépendra du langage.
    Ci dessous quelques exemples:
        en bourn shell(linux) : un commentaire commence par #
        en lua: un commentaire commence par --
        en bash(windows): un commentaire commence par rem

    Arnaud => Administrateur de Coding-Less.com

Windows

    Définition de Windows

    Windows est un système d'exploitation développé par Microsoft, 
    Conçu pour gérer les ressources matérielles et logicielles d'un ordinateur.
    Il fournit une interface graphique conviviale et prend en charge une large gamme d'applications.

    En gros il gère ton pc (clavier, wifi, souris, écran) 
        et tes programmes (jouer à des jeux, voir un film, écouter des mp3, ...).

    Historique et principales versions

    - 1985 : Windows 1.0 – Première version avec interface graphique.
    - 1995 : Windows 95 – Introduction du menu Démarrer et de la barre des tâches.
    - 2001 : Windows XP – Stabilité et interface améliorée.
    - 2009 : Windows  7 – Performance et compatibilité accrues.
    - 2021:  Windows  8 - Un bref passage dans le monde des OS
    - 2015 : Windows 10 – Intégration du cloud et mises à jour continues.
    - 2021 : Windows 11 – Design modernisé et nouvelles fonctionnalités.

    Et bientôt Windows 12

    Avantages

    - Interface intuitive et facile à utiliser.
    - Large compatibilité avec les logiciels et matériels.
    - Support étendu et mises à jour régulières.

    Tu clique et ça marche !!!

    Inconvénients

    - Vulnérabilité aux virus et malwares.
    - Coût élevé des licences.
    - Consommation importante de ressources.

    Tout à un prix financier ou ressources !!!

    Usages courants

    - Bureautique : traitement de texte, tableurs, présentations.
    - Jeux vidéo : compatibilité avec DirectX.
    - Développement logiciel : outils et environnements variés.
    - Navigation Internet et communication.

    Arnaud => Administrateur de Coding-Less.com

HTML

    HTML pour Hypertext Markup language 
        (à la William Shakespeare)
    HTML pour Langage de balisage hypertexte 
        (à la Molière)

    HTML? Quest ksé ksa?
    HTML est utilisé pour la création de site internet.
    HTML est le corps de votre page et peut être complété par d'autres langages qui viendront enrichir son contenu
    JavaScript, CSS, PHP, pour le rendre dynamique et j'en passe ...

    Alors à vos clavier, à vos souris ...
    Allez c'est parti pour la visite guidée on se HTMLise !!! !!! !!!

    Html Mode d'emploi

    Voici le contenu d'un site internet sans fioritures

    <html>
        <head>
        </head>
        <body>
            Mon beau site internet
        </body>
    </html>

    Si je vous fais une capture d'écran du rendu, ça fait ça ...

    

    Si si je vous jure, ça c'est un site internet.

    La vérité est encore pire
        (ou ailleurs pour ne citer personne !!!).

    Je vais vous dire la vérité
    Un site internet pur et dur c'est ça

    <html>
    </html>

    Le contenu qu'il y a entre les balises <html> et </html>
    C'est à dire:
        <head>
        </head>
        <body>
        </body>
    C'est déjà du complément

    

    Heureusement qu'on peut le compléter 
    Parce que la qui viendrait sur coding-Less.com si le site ressemblait à ça

    Allez on ajoute un peu de contenu
    Avant de vous dire comment ça marche

    <!doctype html>
    <html lang="fr">
        <head>
            <meta charset="utf-8">
            <title>Coding-Less.com</title>
            <link rel="stylesheet" href="style.css">
            <style>
                body
                {
                    background-color: black;
                    color: white;
                }
            </style>
            <script src="script.js"></script>
        </head>
        <body>
            Votre Mémo interactif
            <img src="./monimage.png" />
        </body>
    </html>

    

    C'est quand même déjà plus classe? non?

    Jouons les Scientifiques
    Disséquons les balises vues ci-dessus

    <html>
        <head>
        </head>
        <body>
        </body>
    </html>

    Le site ou la page si vous en avez plusieurs
    (Oui il faut plusieurs pages pour faire un site c'est mieux)

    Est contenu entre les balises <html> et </html>

    Les balises <head> et </head>
    Sont la pour intégrer les contenus dans la page
    Script css externes (entre autre) bout de scripts CSS interne, JavaScript, ...

    Les balises <body> et </body>
    Affichent le contenu visible par le navigateur internet de votre site.

    Arnaud => Administrateur de Coding-Less.com

Raccourcis Claviers Windows

    Raccourcis Claviers Windows

    Pour A....R <= je ne cite pas de nom volontairement mais il se reconnaitra.
    Chose promise chose due, un article sur les raccourcis claviers. 

    Allez on ouvre les fenêtres (Windows pour les intimes) et on commence à scruter l’horizon.

    Touche Windows
    La touche qui ressemble à une fenêtre en bas à gauche du clavier.
     + quequchose (CTRL, ALT, TAB, ALT GR...)...

    Gestion des fenêtres:
        Win + D : Afficher ou masquer le bureau.
        Win + E : Ouvrir l'Explorateur de fichiers.
        Win + L : Verrouiller la session.
        Alt + Tab : Basculer entre les fenêtres ouvertes.
        Win + Tab : Afficher la vue des tâches.
        Win + Flèche gauche/droite : Ancrer la fenêtre à gauche ou à droite.

    Capture d'écran:
        Win + Impr. écran : Capturer tout l'écran et enregistrer.
        Win + Shift + S : Outil de capture d'écran.

    Divers:
        Win + R : Ouvrir la boîte de dialogue Exécuter.
        Win + I : Ouvrir les paramètres.
        Win + P : Projeter l'écran.
        Win + Pause : Afficher les informations système.

    Après ça, on est des Win(ners)!!!.

    Touche CTRL (contrôle gauche)
    La touche en bas à gauche du clavier.
     + quequchose ...

    Gestion du texte:
        Ctrl + C : Copier
        Ctrl + X : Couper
        Ctrl + V : Coller
        Ctrl + Z : Annuler
        Ctrl + Y : Rétablir
        Ctrl + A : Tout sélectionner

    Raccourcis Bureautiques:
        Ctrl + C : Copier
        Ctrl + V : Coller
        Ctrl + X : Couper
        Ctrl + Z : Annuler
        Ctrl + Y : Rétablir
        Ctrl + B : Mettre en gras (Word)
        Ctrl + I : Italique (Word)
        Ctrl + U : Souligner (Word)
        Ctrl + N : Nouveau document (Word)
        Ctrl + P : Imprimer
        Ctrl + S : Enregistrer
        Ctrl + F : Rechercher
        Ctrl + H : Remplacer
        Ctrl + T : Insérer un tableau (Word)
        Ctrl + E : Centrer le texte (Excel)
        Ctrl + K : Insérer un lien hypertexte (PowerPoint)

    Raccourcis pour Développeurs!
        Ctrl + ` : Ouvrir le terminal intégré (VS Code)
        Ctrl + Shift + P : Palette de commandes (VS Code)
        Ctrl + P : Ouvrir un fichier rapidement (VS Code)
        Ctrl + / : Commenter/Décommenter la ligne (VS Code)
        Ctrl + Shift + F : Rechercher dans tout le projet (VS Code)
        Ctrl + Shift + N : Nouvelle fenêtre (VS Code)
        Ctrl + Shift + T : Rouvrir l'onglet fermé (VS Code)
        Ctrl + C / Ctrl + V : Copier/Coller dans le terminal
        Ctrl + L : Effacer la ligne dans le terminal
        Ctrl + D : Dupliquer la ligne (VS Code)
        Ctrl + Tab : Basculer entre les fichiers ouverts

    On garde le Contrôle.

    Touche ALT: (touche alternative)
    La touche en bas à gauche du clavier.
     + quequchose ...

    Capture d'écran:
        Alt + Impr. écran : Capturer la fenêtre active.
    Gestion des fenêtres:
        Alt + Tab : Basculer entre les fenêtres ouvertes.

    Raccourcis Bureautiques:
        Alt + = : Insérer une formule (Excel)

    Raccourcis pour Développeurs!
        Alt + Flèche Haut/Bas : Déplacer la ligne (VS Code)

    Alt qui va la?

    D'autres raccourcis à hiérarchiser plus tard    

    Raccourcis Bureautiques:
        F2 : Modifier la cellule active (Excel)
        F5 : Démarrer le diaporama (PowerPoint)

    Raccourcis pour Développeurs!
        F12 : Aller à la définition (VS Code)
        Shift + Alt + F : Formater le code (VS Code)
        Shift+Tab : Désindenter le code (VS Code)

    on ajoutera les catégories F et shift plus tard

    Arnaud => Administrateur de Coding-Less.com

CSS

    CSS pour Cascading StyleSheet 
        (à la William Shakespeare)
    CSS pour Feuille de Style en Cascade 
        (à la Molière)

    CSS? Quest ksé ksa?
        Une feuille de style css permet de décorer votre site internet.

    Un peu comme si on ajouté une plante à la maison.
        Oui ça fait déjà plus joli un peu de vert dans une pièce peinte en blanc.

    Un site internet n'est ni plus ni moins qu'un pièce blanche
    A laquelle vous aller ajouter de la décoration (un style).
        Un tapis, un canapé, des tableaux, de la peinture, etc ...
    
    En HTML CSS, ça donne
        Affiche une image tapis. 
        Redimensionne une Div à telle taille.
        Ajoute un fond d'écran en telle couleur.
        Hyperlien survole change de couleur ou pas, 
        Etc ...
    
    Les propriété CSS s'appliquent sur les balise HTML
    Quelques exemples de balises HTML:
        Un paragraphe <p></p>
        Une div <div></div>
        Un lien hypertexte (plus communément appelé lien HTML)<a></a>
        Etc ...

    Les balises sont invisibles dans la page web
        Ainsi que tout le code CSS qui se trouve à l'intérieur.

    Pour voir le style d'un site il faut soit:
        Appuyer la Touche F12 de son navigateur internet
        Activer les outils de développement dans son navigateur internet

    Alors à votre papier peint, à votre peinture, à vos clavier, à vos souris ...
    Allez c'est parti pour la visite guidée on se CSSexpertise !!! !!! !!!

    3 façon d'utiliser du CSS dans son site

    - 1 ajouter le code directement dans une balise HTML (un span ici pour l'exemple).
        <span style="color: rgb(0 162 232);font-weight:bold; float:left;">Les</span>


    - 2 mettre le code CSS entre les balises <style></style>
        - soit dans le header de la page HTML
        - soit n'importe ou dans le body de la page HTML
        <html>
            <head>
                <style>
                    html
                    {
                        color: red;
                        background-color: rgb(255 255 255 );
                    }
                </style>
            </head>
            <body>
                <style>
                    body
                    {
                        color: red;
                        background-color: rgb(255 255 255 );
                    }
                </style>
            </body>
        </html>


    - 3 Dans un fichier externe qui porte l’extensivement .CSS
        <link rel="Stylesheet" href="dossierDeMonFichierCss/nomDeMonFichier.css" />

        le lien peut être renseigné:
        - soit dans le header de la page HTML.
        - soit n'importe ou dans le body de la page HTML.
    
        <html>
            <head>
                <link rel="Stylesheet" href="dossierDeMonFichierCss/nomDeMonFichier.css" />
            </head>
            <body>
                <link rel="Stylesheet" href="dossierDeMonFichierCss/nomDeMonFichier.css" />
            </body>
        </html>
        
        Attention dans un fichier externe le code CSS est écrit directement sans les balises <style></style> 

        html
        {
            color: red;
            background-color: rgb(255 255 255 );
        }

    Arnaud => Administrateur de Coding-Less.com