Pour débuter ce tutoriel, je vous accompagnerai à travers les étapes de création d’un document HTML en utilisant Notepad++. Suivez attentivement ces quelques instructions.
Premier pas dans la conception d’un site web / création du document HTML
ouvrir l’application Notepad++ puis ouvrir une nouvelle feuille
appuyer sur fichier > enregistrer sous…
nommer le fichier « index » et sélectionner comme type de ficher « Hyper Text Markup Language file »
Associer un fichier CSS au document HTML
Le CSS est un langage utilisé pour définir la présentation visuelle des documents HTML. Il permet de contrôler la mise en page, le style visuel, etc.. sur les sites web. Le CSS est un moyen avancé pour personnaliser l’apparence des pages des sites web.
Pour la création du fichier CSS seulement quelques étapes sont nécessaires :
ouvrir l’application Notepad++ puis ouvrir une nouvelle feuille
appuyer sur fichier > enregistrer sous…
nommer le fichier avec à la fin un .css ( exemple : fraise.css, pomme.css, etc.. )
taper dans le fichier index le morceau de code suivant sur la 4EME IMAGE
Dans mon cas, j’ai nommé mon fichier CSS « fraise ». Vous devez donc simplement le remplacer par le nom que vous avez choisi au préalable.
Si vous souhaitez également ajouter un fichier JavaScript, il vous suffit simplement de répéter les mêmes étapes, mais en remplaçant le .css par .js.
Après la finalisation de la création de tous vos documents, vous pouvez ainsi explorer un monde de possibilités créatives. Votre document HTML définit la structure de votre site, tandis que le fichier CSS donne vie à votre créativité. Ensemble, ils forment la base d’une expérience web unique. Par la suite, je vais vous présenter plusieurs possibilités de personnaliser votre site web.
Une barre de navigation
La barre de navigation d’un site web, également appelée menu, joue un rôle essentiel pour faciliter la navigation pour les utilisateurs. Elle offre une structure organisée, permettant un accès rapide aux différentes sections du site. En fournissant des liens vers des pages clés telles que l’accueil, les informations à propos du site et les contacts.
Je vais vous proposer un exemple simple et efficace pour votre barre de navigation, avec la possibilité de la personnaliser selon vos préférences, notamment grâce à la feuille de style CSS.
Donc, ceci n’est qu’un exemple parmi d’autres, et il est facilement modifiable selon ses préférences. Pour lier les différents boutons aux pages respectives, il suffira simplement de remplacer les a entre les guillemets par le lien vers l’autre document ou son nom.
Faire apparaître un texte
Voici un exemple amélioré vous permettant d’afficher un texte avec un effet spécial en utilisant le document HTML associé à une feuille de style CSS. Cela donnera vie à votre texte et animera votre page web.
La partie steps(10) dans la feuille de style CSS devra probablement être modifiée en fonction du nombre de caractères que comporte votre texte. Il faut remplacer le 10 par le nombre souhaité.
Dans le cadre de l’évaluation en contrôle continu, les élèves étudiant la spécialité NSI passent des épreuves de de contrôle continu lors du troisième trimestre de leur année de première.
Introduction
Les épreuves de la session 2021 ont été annulés, mais les épreuves blanches dans notre établissement ont été maintenues.
Le ministère de l'éducation a publié la banque nationale de sujets des #E3C. Il y a bien évidemment les sujets de la spécialité #nsi. Lien vers les 51 sujets de NSI : https://t.co/NWGLpcn2dt , ils comportent chacun 42 questions 😍(…) ça ne s'invente pas !
Nous vous proposons la correction de cette épreuve. Elle contient 40 questions de la banque officielle des sujets ainsi qu’une question « One More Thing » sur deux points. Il est néanmoins hypothétiquement possible que certaines des réponses proposées dans ce sujet ne soient pas à 100 % « totalement officielles ».
Cette correction a été entièrement préparé et rédigé sur ce site web par nos élèves de la spécialité NSI du lycée Louis Pasteur.
Les sujets sont sous licence CC BY-NC-SA 3.0 FR, le présent corrigé est sous la même licence.
Thème A : types de base
Question A.1 Quel est un avantage du codage UTF8 par rapport au codage ASCII ?
Réponses A. il permet de coder un caractère sur un octet au lieu de deux B. il permet de coder les majuscules C. il permet de coder tous les caractères D. il permet de coder différentes polices de caractères E. UTF8 permet de descendre de la montagne même quand ASCII ce n’est pas possible.
Correction : Réponse C Après une très longue réflexion, la E nous semblait être la plus pertinente. Néanmoins n’aimant pas le Ski mais préférant la course à pied, nous avons plutôt choisi la C. En effet UTF8 permet de coder tous les caractères et même le très franchouillard « Â » ou encore le « ß » de nos cousins germains.
Question A.2 On considère les codes ASCII en écriture hexadécimale (en base 16). Le code ASCII de la lettre A est 0x41, celui de la lettre B est 0x42, celui de la lettre C est 0x43, etc. Quel est le code ASCII, en hexadécimal, de la lettre X (c’est la 24e lettre de l’alphabet usuel).
Réponses A. 0x58 B. 0x64 C. 0x7A D. 0x88
Correction : Réponse A Ici le piège si on ne lisait que les chiffres c’était de croire que le X qui est la 24 ème lettre de l’alphabet usuel (soit la 24 lettre en décimal). On additionnait donc des décimaux et des hexadécimaux et paf, on tombait en plein dans l’erreur. Il faut donc convertir 23 (car il y a 23 d’écart entre A et X) en hexadécimal, puis l’additionner à l’hexadécimal de A. Et paf, ça fait des chocapics (où plutôt 0x58) !
Question A.3 Quelle est la représentation en binaire de l’entier 64 sur un octet ?
Réponses A. 0101 0000 B. 1100 0100 C. 0100 0000 D. 0000 1100
Correction : Réponse C C’est dans cette question où on verra qui sont les béotiens du binaire, je crois qu’on ne peut faire plus simple, tomberas-tu dans le piège qui te dit que c’est trop facile donc tu coches autre chose (d’illogique evidemment) puis en fait il s’avère que tu avais raison, donc tu as un énorme seum pasque tu sais que tu avais bon. Bref, j’espère que tu as la C sinon tu crains.
Question A.4 Quelle est l’écriture hexadécimale de l’entier dont la représentation en binaire non signé est 1100 0011 ?
Réponses A. BB B. C3 C. CB D. 7610
Correction : Réponse B Excepté si vous souhaitez vous rendre dans le chaleureux (et très perdu) canton d’Eu, ou avoir une carte bancaire, ou même écraser un bébé (???), euuu je vous conseille de prendre la Citroen C3, c’est la plus fiable et vous aurez moins de problèmes.
Thème B : types construits
Question B.1 On considère le script suivant :
t = [2, 8, 9, 2]
t[2] = t[2] + 5
Quelle est la valeur de t à la fin de son exécution ?
Réponses A. [42, 13, 9, 2] B. [2, 8, 14, 2] C. [7, 13, 14, 7] D. [7, 13, 9, 42]
Correction : Réponse B Bon, même si le 42 attire inéluctablement nos regards, on doit l’oublier (excusez nous). Ça nous laisse plus que deux possibilités, B et C. Si vous vous débrouillez super bien en calcul mental, vous verrez que 9+5=14. Vérifier le calcul si vous doutez évidemment, je ne suis sure de rien. Donc, on remplace à l’indice 2 (n’oubliez pas qu’on commence avec l’indice 0 dans une liste) avec votre calcul effectué avec brio ci-dessus. On se demande où ils sortent leur réponse C quand même.
Question B.2 Que vaut l’expression [ 2*k for k in range(5) ] ?
Réponses A. [0,2,4,6,8] B. [2,4,6,8,10] C. [1,2,4,8,16] D. [2,4,8,16,32]
Correction : Réponse A Une seule réponse sera l’élue, avec un zéro dedans puisque le k inrange(5) démarre dès 0, donc sauf si vous avez des problèmes de vue, ou autres hein (ignare), impossible de trouver autre chose.
quelle est l’expression qui permet d’accéder à la lettre E ?
Réponses A. alphabet[42] B. alphabet[’E’] C. alphabet[4] D. alphabet[5]
Correction : Réponse C Donc, pour trouver l’expression qui permet d’accéder à la lettre E, il suffit de compter à quel rang elle est dans l’alphabet. Ensuite il nous faut retrancher à ce nombre 666, puis ajouter un peu de poudre de perlimpinpin de 69, quelques carabistouilles de 42 et enfin, traverser 120 fois la rue pour trouver un travail. Et voilà ! Vous tombez sur la réponse C (le premier indice de la liste est 0).
Question B.4 On définit le dictionnaire d = ’a’ : 1, ’b’ : 2, ’c’ : 3, ’z’ : 26. Quelle expression permet de récupérer la valeur de la clé ’z’ ?
Réponses A. d[4] B. d[26] C. d[z] D. d[’z’]
Correction : Réponse D Vous savez utiliser un dictionnaire ? Et ben voilà c’est pareil ! On cherche la “définition” (appelée ici “valeur”) de “z” donc tape donc la réponse D, et magie on a comme retour la valeur de “z”.
Question B.5 On définit : L = [10,9,8,7,6,5,4,3,2,1] Quelle est la valeur de L[L[3]] ?
Réponses A. 3 B. 4 C. 7 D. 8
Correction : Réponse A
Il faut apprendre à décomposer on cherche donc le retour de la liste L d’indice de la valeur de l’indice 3 de la liste L. Autrement dit, on regarde la valeur d’indice trois. Comptons : 1, 2, 3 ; c’est donc “8” ! Et bien non chers nsistes ! Il ne faut pas oublier que pour une liste en Python, la première valeur est celle d’indice “0”. Donc la valeur d’indice “3” est “7” ! On cherche ensuite la valeur de la liste d’indice “7” ; soit “3” !!
Question B.6 On exécute le code suivant :
A = [ [ 1 , 2 , 3 ], [ 4 , 5 , 6 ], [ 7 , 8 , 9 ] ]
B = [ [ 0 , 0 , 0 ], [ 0 , 0 , 0 ], [ 0 , 0 , 0 ] ]
for i in range( 3 ):
for j in range( 3 ):
B[i][j] = A[j][i]
Que vaut B à la fin de l’exécution ?
Correction : Réponse C
Pour l’audace, la E. Nan plus sérieusement, il faut d’abord comprendre ce que fait le programme. On se rend compte que la liste B va être « remplie » des éléments de la liste A mais pas dans l’ordre, seulement, il y a des petits pièges, puisque le programme ne fait pas qu’inverser la liste, mais les indices de la liste. Ainsi pour une valeur de B ; soit B[i][j], on mettra la valeur de A[j][i]. Un exemple parle toujours mieux : Si on a B[1][2] ; soit la troisième valeur de la deuxième sous-liste de B, on va y mettre comme valeur, celle de A[2][1] ; soit 8 !
Thème C : traitements de données en table
Question C.1 On définit la fonction suivante qui prend en argument un tableau non vide d’entiers :
def f (T) :
s = 0
for k in T:
if k == 8 :
s = s+ 1
if s > 1 :
return True
else :
return False
Dans quel cas cette fonction renvoie-t-elle la valeur True ?
Réponses A. dans le cas où 8 est présent au moins une fois dans le tableau T B. dans le cas où 8 est présent au moins deux fois dans le tableau T C. dans le cas où 8 est présent exactement une fois dans le tableau T D. dans le cas où 8 est présent exactement deux fois dans le tableau T Correction : Réponse B
Question C.2 Soit le tableau défini de la manière suivante : tableau = [[1,3,4],[2,7,8],[9,10,6],[12,11,5]] On souhaite accéder à la valeur 12, on écrit pour cela : Réponses A. tableau[4][1] B. tableau[1][4] C. tableau[3][0] D. tableau[0][3]
Correction : Réponse C Encore une fois on a affaire à ces foutus tableaux de tableaux grrrr, bref simplement de la logique, comme dhab vous avez l’indice 0 en premier, donc pour trouver 12, selon ce raisonnement foncièrement bon, vous allez au tableau 3, indice 0 (pasque on va du plus grand au plus petit, bref si tu comprends pas va voir ton cours loulou).
Parmi les propositions suivantes, laquelle est exacte ?
Réponses A. ’Chloé’ est une valeur de la variable contacts B. ’Chloé’ est une clé de la variable contacts C. ’Chloé’ est un attribut de la variable contacts D. ’Chloé’ est un champ de la variable contacts E. ’Chloé’ a été identifiée “cas contact” par le ministère de l’éducation nationale
Correction : Réponse B Si j’étais vous je m’approcherais pas de Chloé. Bon ça fait une semaine maintenant, vous pouvez aller lui faire plein de poutoux ! Si vous voulez quand même la dm, vous lui envoyez un petit mail 😉 Bref, quesque chloé ? Nan c’est pas une personne débilos, c’est la clé de ton cœur (oof) :)) Donc grâce à la force de l’amour tu as trouvé la réponse !
Question C.4 (Pas Picasso) Laquelle de ces listes de chaînes de caractères est triée en ordre croissant ?
Réponses A. [’Chat’, ’Chien’, ’Cheval’, ’Cochon’] B. [’Chat’, ’Cheval’, ’Chien’, ’Cochon’] C. [’Chien’, ’Cheval’, ’Cochon’, ’Chat’] D. [’Cochon’, ’Chien’, ’Cheval’, ’Chat’]
Correction : Réponse B On ne parle pas d’ordre croissant de préférence, nan nan, mais bien au niveau de la place des lettres dans l’alphabet. Étant tous des non illettrés, nous savons que O est après H, et que E avant I, donc sauf si vous lisez à l’envers, quoique très courant de nos jours, je vous propose la réponse B (en plus le chat est clairement au dessus du cheval, du chien et du cochon, c’est pas pour rien qu’il était adulé en Egypte hein).
Thème D : interactions entre l’Homme et la Machine sur le Web
Question D.1 Par quoi commence l’URL d’une page Web sécurisée ?
Réponses A. http B. https C. ftp D. smtp
Correction : Réponse B Regarde l’URL de ton site préféré (nsi.xyz evidemment), il y aura toujours “http” mais si tu veux être sur que ce site est sécurisé il y aura un “s” comme pour “sécurité_juste_pour_toi”. Tu pourras donc livrer tes informations les plus privées à Google comme tes mot de passe, tes codes de carte bleu, etc… (même si il sait déjà tout 🤫).
Question D.2 Quelle méthode d’envoi des paramètres est-il préférable d’utiliser, pour un formulaire d’une page web, destiné à demander à l’utilisateur un mot de passe pour se connecter (le protocole utilisé est HTTPS) ?
Réponses A. la méthode PASSWORD B. la méthode CRYPT C. la méthode GET D. la méthode POST
Correction : Réponse D Euuuuuu alors, non ca peut pas etre un caveau souterrain servant de sépulcre, ni un mot de passe (oui vous avez vu on parle couramment anglais ici). Plus que 2 possibilités, mais seule la méthode POST vous permet d’entrer un mdp sur un site sécurisé (qui va encore sur ce genre de site mon dieuuuuu).
Question D.3 Parmi les langages suivants, lequel est exécuté sur le serveur lors de la consultation d’une page Web ?
Réponses A. JavaScript B. HTML C. CSS D. PHP
Correction : Réponse D Le PHP, c’est lourd, complexe ! C’est pour cela que ce langage s’exécute côté serveur. Sinon ça serait trop complexe pour ton ordi qui a fait les 2 guerres mondiales. On laisse tous ces calculs à des supers machines de la mort qui tuent, et comme ça toi, t’es tranquille.
Question D.4 Quelle est la machine qui exécute un programme JavaScript inclus dans une page HTML ?
Réponses A. le serveur WEB qui contient la page HTML B. la machine de l’utilisateur qui consulte la page HTML C. un serveur du réseau D. un routeur du réseau
Correction : Réponse B Une fois que tu as reçu les programmes venant du serveur, alors tout se fait sur ta machine, y compris les programmes JavaScript. Au passage, une petite astuce, si sur ton site tu appelles un script JS, appelle le à la fin de ton script HTML, comme ça la page s’affiche et après calcul le Java (ce qui est donc “plus mieux” rapide).
Question D.5 Quelle est la balise HTML utilisée pour indiquer un titre de niveau d’importance maximum ?
Réponses A. la balise <h0> B. la balise <h1> C. la balise <head> D. la balise <header>
Correction : Réponse B Bon, j’ai vraiment besoin de développer ça ?! Juste tu veux un titre en HTML, alors tu utilises <h1>.
Question D.6 Dans le code HTML les délimiteurs tels que et s’appellent ?
Réponses A. des bornes B. des balises C. des paragraphes D. des liens
Correction : Réponse Ø Bhahahahahah là y a pas de réponse, juste tu marques que le prof a fait une erreur –oui les profs en font-, ducoup t’as un point gratos et ça fait assez plaiz surtout quand tu verras ta note (oof).
Question D.7 Parmi GET et POST, quelle méthode d’envoi de formulaire crypte les informations envoyées au serveur ?
Réponses A. les deux : GET et POST B. GET seulement C. POST seulement D. aucune des deux
Correction : Réponse D GET et POST sont fourbes ! Ces deux méthodes sont hyper utiles, MAIS elles ne cryptent rien, ce qui n’est pas vraiment super pour nous… Mais pas le choix d’utiliser autre chose, tant pis 🤷♂️ (si on peut utiliser https au moins c’est crypté ! mais si on utilise get alors ça apparaît dans l’url donc pas ouf ! Le nec ++ ultra c’est donc POST + HTTPS mais bon on sait pas pour la NSA (pas encore…)).
Question D.8 Parmi les éléments suivants, lequel est un protocole ?
Réponses A. GET B. POST C. HTTP D. HTML
Correction : Réponse C GET et POST étaient précédemment définis comme étant des méthodes, donc pourquoi ça deviendrait un protocole ???? La réponse est vraiment dans les questions précédentes, donc bon, je sais pas quoi vous dire de plus mmmmmm. HTML est un langage de balisage, tout comme LateX, plus qu’une réponse, faites par élimination (même si devant la copie j’avoue qu’on panique).
Question D.9 Pour créer un lien vers la page d’accueil de Wikipédia, que devra-t-on écrire dans une page Web ?
Réponses A. <a target="http://fr.wikipedia.org">Wikipédia</a> B. <a href="http://fr.wikipedia.org" /> C. <a href="http://fr.wikipedia.org">Wikipédia</a> D. <link src="http://fr.wikipedia.org">Wikipédia</link>
Correction : Réponse C OUIII WIKIPEDIA, on va encore pouvoir faire toutes nos recherches dessus (sans tricher), et c’est les profs qui nous donnent le droit donc, tout est permis !!!! Bon la si vous trouvez pas le bon vous craignez, ça on l’a vu en SNT (vous avez eu la chance de le voir ; nuance), même si oui on a rien fait dans cette matière l’année dernière, je l’admet, ON A QUAND MÊME VU LES LIENS, cherchez pas des excuses.
Thème E : Architectures matérielles et système d’exploitation
Question E.1 Identifier parmi les éléments suivants celui qui n’est pas un capteur. A. haut-parleur B. caméra C. accéléromètre D. microphone
Correction : Réponse A Essayez de crier dans un haut-parleur. Bravo vous avez cassé la membrane de la Devialet à 1500 € !! Vous avez plus qu’à prendre des écouteurs de Ryanair en les mettant dans l’enceinte pour pas que vos parents vous défoncent. Tout ça parce que vous êtes pas capables de savoir qu’un haut-parleur n’enregistre pas du son.
Question E.2 Lequel de ces objets n’est pas un périphérique ? A. le clavier B. une clé USB C. la carte graphique D. la carte mère
Correction : Réponse D Un périphérique est un objet que tu rajoutes à ton PC, mais sans cet objet ton PC pourra toujours fonctionner. On peut faire marcher fonctionner un PC sans clavier, sans clé USB, ni carte graphique. Mais sans carte mère… c’est un peu complexe.
Question E.3 L’adresse IP du site www.education.gouv.fr est 185.75.143.24. Quel dispositif permet d’associer l’adresse IP et l’URL www.education.gouv.fr ? A. un routeur B. un serveur DNS C. un serveur de temps D. un serveur Web E. L’application TousAntiCovid, qui empêche également le virus de rentrer dans les écoles.
Correction : Réponse B Tu as désormais l’adresse IP du gouvernement !! Trop bien, tu peux maintenant hacker tout le gouvernement en passant par un serveur DNS et ainsi te mettre plein de 20/20 (c fo ils ont pas eu le budget pour avoir un serveur à eux tout seul ; essayez de taper l’I.P. sur internet) ! (tu peu le fer poure moua estépé). Par contre a-t-on des retours sur l’efficacité de TousAntiCovid (aka HadopiCovid) ?!
Question E.4 L’architecture client-serveur : A. est un mode de communication entre programmes B. est une architecture matérielle de coopération entre machines C. est un mode de communication entre routeurs D. est un mode de communication entre commutateurs E. est le mode de fonctionnement des restaurants avant la crise sanitaire, qui sont actuellement fermés donc je ne peux pas répondre à la question car je dois respecter les gestes barrières.
Correction : Réponse A Attention à ne pas confondre hardware et software. L’architecture client-serveur est un mode de communication entre programmes, au même type que l’’architecture P2P. Elle ne dépend pas du hardware, mais bien du logiciel installé, qui peut être un client ou un serveur. (Corrigé par un enseignant)
Thème F : langages et programmation
Question F.1 (Ca va vite)(Attention vous avez pas le permis hein) On considère le code suivant : Quelle construction élémentaire peut-on identifier dans le code ci-dessus ?
if x < 4 :
x = x + 3
else :
x = x - 3
Réponses A. une boucle non bornée B. une structure conditionnelle C. une boucle bornée D. un appel de fonction E. Un troll des cavernes F. La réponse F.
Correction : Réponse B Vous pouvez répéter la question ?? Fioooooooum ! Est-ce que qu’il y a besoin de tant déblatérer sur celle-là, c’est pourtant évident !
Question F.2 (Après F1 (normalement)) La fonction suivante calcule la racine carrée du double d’un nombre flottant. from math import sqrt Quelle est la précondition sur l’argument de cette fonction ?
def racine_du_double(x):
return sqrt(2*x)
Réponses A. x < 0 B. x >= 0 C. 2 * x > 0 D. sqrt(x) >= 0
Correction : Réponse B Ton prof de maths ne t’a jamais dit qu’une racine carré NE PEUT PAS manger de la soupe et de la pizza en même temps être négative ; une racine carrée, c’est toujours content (on garde ça pour le prochain spot de pub sur les maths) !
Question F.3 On considère le code suivant : Quelles sont les préconditions sur les arguments ?
def puiss(y,x):
res = y
for i in range(x):
res = res*y
return res
Réponses A. les arguments doivent être obligatoirement de type entier B. les arguments peuvent être de type entier ou flottant C. le type des arguments n’a pas d’importance D. il n’y a pas de préconditions dans ce cas
Correction : Réponse A T’as déjà essayé de multiplier un nombre décimal en python ? Si oui ça marche ? Si oui dis moi comment tu fais !! Bon t’as bien compris qu’on peut pas… donc on s’assure bien que ce soit un entier avant tout.
Question F.4 (fait Alt+F4 stp) Quelle est la valeur de la variable x à la fin de l’exécution du script suivant :
def f(x):
x = x + 1
return x + 1
x = 0
f(x+1)
Réponses A. 0 B. 1 C. 2 D. 3 E. Georges
Correction : Réponse A La variable x définie par x=0 est une variable globale qui n’a aucun rapport avec la variable locale nommé x de la fonction f. L’appel f(0+1) retourne bien la valeur 3, mais ce n’est pas la question posée. La variable globale n’a pas été modifiée, sa valeur est toujours 0. (Corrigé par un enseignant)
Question F.5(prenez un peu d’air frais) On exécute le script suivant.
a = 11
for i in range(3):
a = a * 2
a = a - 10
Que contient la variable a à la fin de cette exécution ?
Réponses A. 0 B. 14 C. 18 D. 26
Correction : Réponse C Dans le for i in range, ça veut dire que i ira pas jusqu’à 3 mais s’arrêtera à 2. Mais vous me diriez “Mon ptit bonhomme”, mais il part d’où ce A ? Et bien c’est simple de rien, comme nous dans 3 ans sur le marché du travail. Mais rien c’est pas une valeur ?! Si, j’ai un indice le premier nombre arabe, le début de tout, le nombre “presque” suprême. Et oui c’est le 0 ! Donc i va prendre les valeurs de 0, puis 1, puis 2, en faisant pendant ce temps sa mixture avec a.
Question F.6 On définit la fonction suivante :
def f(x,y):
x = x +y
y = x -y
x = x -y
return (x,y)
Quel est la valeur renvoyée par l’appel de patrick de chez carglass (mais non c’est Olivier de Carglass ) f(2019,2020) ? Réponses A. (2019,2019) B. (2019,2020) C. (2020,2019) D. (2020,2020)
Correction : Réponse C OH MON DIEU DES MATHS J’AI ENVIE DE ME CREVER LES YEUX ET DE BOIRE MON SANG, bref. La réponse est C, car elle est forcément égale à 2019 : (2020+2019)-2020 = 2019 (un vase peut y arriver, même un spé philo peut le faire).
Question F.7 (Vous avez vérifié nos fautes ?) Un programme Python commence par la ligne : import os
À quoi sert cette ligne ? Réponses A. C’est du poulet basquaise B. c’est la déclaration du système d’exploitation (operating system) C. Python 3.6 exige cette ligne au début de tout programme D. c’est la déclaration d’une bibliothèque (ou module) que le programme compte utiliser Correction : Réponse A Bon la on se pose même pas la question, la nourriture est prioritaire partout. Juste le poulet c’est pas fou, on aurait pu trouver mieux hein. (os → module déclaré, pas de bouffe, dommage, un jour omega nous livrera à domicile). Donc réponse D, on verra si vous lisez toutes nos réponses de folie comme ça.
Question F.8 La fonction Python suivante ne calcule pas toujours correctement le résultat de 𝑥 𝑦 pour des arguments entiers. Parmi les tests suivants, lequel va permettre de détecter l’erreur ?
def puissance (x,y):
p = x
for i in range (y - 1):
p = p * x
return p
Réponses A. puissance(2,0) B. puissance(2,1) C. puissance(2,2) D. puissance(2,10)
Correction : Réponse A On sait bien que 20 = 1 ! Mais si on regarde le logarithme népérien de 0, on remarque que la réponse A permet avec certitude de déclarer Patrick Balkany comme prochain guest de Just Dance after the covid. (#Lourdeur)
Thème G : algorithmique
Question G.1 (meilleure classe, confirmé par près de π/3*100 de tous les rédacteurs)
Que fait la fonction suivante :
def trouver(L):
i = 0
for j in range(1, len(L)):
if L[j] >= L[i]:
i = j
return i
Réponses A. elle renvoie le maximum de la liste B. elle renvoie le minimum de la liste C. elle renvoie l’indice de la première occurrence du maximum de la liste D. elle renvoie l’indice de la dernière occurrence du maximum de la liste
Correction : Réponse D Que nous imaginassions nous trouver dans un champ de pommes. On choisit la plus grande (je t’ai vu sourir raph), et si deux font la même taille on prend la deuxième. Donc voilà vous savez on vire donc la A et la B car ça retourne l’indice tout ça. Ensuite on l’a dit si y en a 2 on prend la deuxième, donc c’est la réponse D. (Bon on avoue, on a un peu triché on a incanté le dieux des 1G1 et du 42 pour trouver la réponse, car c’est l’entier entre les deux extrêmes du deuxième dieu, soustrait au G du dieu de la classe :)).
Question G.2 (ahhhhh les G2 y en a qu’une qui est bien…🥰) (en effet) On exécute le script suivant :
Réponses A. Le script ne s’arrête pas B. Le script entre 7 fois dans la boucle et à la fin de son exécution, resultat vaut 0 C. Le script entre 7 fois dans la boucle et à la fin de son exécution, resultat vaut 720 D. Le script entre 6 fois dans la boucle et à la fin de son exécution, resultat vaut 0
Correction : Réponse B Déjà quelque chose multiplié par 0, tu sais que ça fait 0 (sauf ∞ mais on parle pas de ça maintenant). Donc notre fameux “temp”, il rentre 7 fois dans la boucle parce que “while != 7” veut dire “ca rentre tant que c’est différent du chiffre 7”. Mais bon c’est une situation temporaire comme ils disent tous au début donc on s’en fiche un peu.
Question G.3 Quelle est la valeur du couple ( s,i) à la fin de l’exécution du script suivant ?
s = 0
i = 1
while i < 5:
s = s +i
i = i + 1
Réponses A. (4, 5) B. (10, 4) C. (10, 5) D. (15, 5) E. (42, 5)
Correction : Réponse C Bah là y’a rien à dire… juste c’est des maths de la logique banane / humour d’arbre !
Question G.4 (G4 Cube) La fonction suivante doit calculer le produit de tous les éléments de la liste passée en paramètre. Avec quelles expressions doit-on la compléter pour que cette fonction soit correcte ?
def produit (L):
p = …
for elt in L:
.......
return p
Réponses A. 1 puis p = p * elt B. 0 puis p = p * elt C. 1 puis p = elt D. 0 puis p = elt Correction : Réponse A
Un produit fois 0 c’est comme si on vous donnait 42 fois 0 PS5 (de toute façon y en a plus ils sont pas foutu d’en produire 2), donc c’est pas bon vu qu’on en veut. Donc c’est forcément 1. Il ne reste que la A et la C (à la fin il n’en restera qu’un 😁). et vu qu’on veut faire le produit de tout c’est forcément la A !
Question G.5 (The last) (but not the least) Quelle est la valeur de element à la fin de l’exécution du code suivant :
L = [ 1 , 2 , 3 , 4 , 1 , 2 , 3 , 4 , 0 , 2 ]
element = L[ 0 ]
for k in L:
if k > element:
element = k
Réponses A. 0 B. 1 C. 4 D. 10
Correction : Réponse C La dernière question, elle nous promet une difficulté intense, une réflexion poussée, un stress à son comble. Non c’est une liste, dur retour à la réalité, de nos actes, nos pensées, nos vies inintéressantes. En fait on cherche juste la valeur de la liste la plus grande (toujours cette notion de plus grand, pourquoi comparer les gens c’est inutile, on est tous unique, donc comparer des gens ou même des nombres ça revient à les dégrader). Pourquoi, ici 4 serait supérieur aux autres, c’est injuste pour le 0 qui est très beau, pourquoi, pourquoi ?!!
Pour le petit bonus,
bah c’est juste 36 // 42 // 666 // 404 (logique). On tiendrait quand même à parler de quelques succès des One More Thing : On peut trouver un Mac que je suis le seul à trouver magnifique le Powerbook G3 aussi nommé Clamshell,
Il est pas magnifique ce PowerBook G3 Clamshell 🥰 ?
Ici vous verrez une magnifique photo de cette beauté colorée
Bon après il y a aussi des ratés commes : – Itunes Match (si quelqu’un connait, qu’il lève la main) – Face Time
Bref on espère que ça vous aura plus. 42, Peace, NSI
One more thing
Ce script ci-dessous est exécuté.
Vous devez déterminer les valeurs des variables quarantedeux , Quarantedeux , quaranteDeux et QuaranteDeux à la fin de l’exécution de ce script.
# déclaration des variables
wan, tu, free, fore, faiv, sɪks, seven = 7, 6, 5, 4, 3, 2, 1
quarantedeux = Quarantedeux = quaranteDeux = QuaranteDeux = 0
# déclaration des fonctions
def double(x):
return x ** 2
def cube(y):
return 2 * y
def carre(z):
return z ** 3
# déclaration des affectations de variables
quaranteDeux = fore + fore * ( double( wan + faiv ) )
if carre(sɪks) == cube(fore):
quarantedeux = 666
else :
quarantedeux = 42
while QuaranteDeux != 42:
QuaranteDeux += 1
for i in range(7):
Quarantedeux = 6 * i
Le dernier exercice de ce sujet n’est pas corrigé ici mais plus haut hihihi.
Sachez juste que derrière une variable appelée 42 peut se cacher autre chose que 42. 😂
Conclusion
Vous pouvez réagir ici :
Epreuve blanche 1ère spé #NSI, février 2021. Le sujet est très classique, 40 questions de la banque officielle des E3C plus une dernière question rigolote. Nos élèves viennent de faire le corrigé : https://t.co/CdoiCKtgZU Le corrigé est-il juste ? C'est toute la question ! 😅
Voici la page principale de notre site, c’est elle qui renverra l’utilisateur vers 3 autres pages au hasard grâce à un script javascript que vous retrouver plus tard dans cette article. La redirection vers les sites est effectué par une interaction sur un bouton cliquable situé au centre de la page. De plus autre bouton placé en bas à droite de la page permet de changer la couleur du dégradé de fond.
Le code HTML
<html lang="fr">
<head>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/ico" href="favicon.ico" />
<title>Bienvenue</title>
<meta charset="utf-8"/>
<script src="https://package.nsi.xyz/api/"></script>
<nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>
</head>
<body>
<div id="container" class="orange1">
<h2> CLIQUEZ SUR CE BOUTON POUR ACCÉDER À UN DE NOS SITES</h2>
<button id="style_boutton"; type="button"; ><h2>CLIQUEZ MOI</h2></button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="target" class="orange"></button>
</body>
Ce script sera exécuté lorsque l’utilisateur appuiera sur le bouton en bas à droite de l’écran. Il changera alors la class de l’arrière-plan. Les classes (dans le css) « black », « blue », et « orange » sont utilisé pour l’arrère plan de l’html alors que « black1 », « blue1 », et « orange1 » sont utilisé pour l’arrière plan du container au ilieu de l’écran.
<script>
var colors = [
'orange',
'blue',
'black'
];
var colors1 = [
'orange1',
'blue1',
'black1'
];
var currentColor = 0;
var currentColor1 = 0;
var target = jQuery('#target');
var target1 = jQuery('html');
var target2 = jQuery('#container');
target.click(function (evt) {
currentColor += 1;
currentColor1 += 1;
currentColor %= colors.length;
currentColor1 %= colors1.length;
target1.prop('class', colors[currentColor]);
target.prop('class', colors[currentColor]);
target2.prop('class', colors1[currentColor1]);
});
</script>
Télécharger
Le scripte qui renvoi vers d'autre sites
Lorsque le bouton au milieu de l'écran est utilisé, le script sera utilisé, et l'utilisateur sera renvoyé vers une de nos pages aléatoirement.
<script>
var links = new Array();
links[0] = "http://kebab.nsi42.net/new/compte_a_rebours.html";
links[1] = "http://kebab.nsi42.net/new/citation.html";
links[2] = "http://kebab.nsi42.net/new/piano.html";
function openLink() {
var i = Math.floor(Math.random() * links.length);
parent.location = links[i];
return false;
}
</script>
Le piano
Présentation
Voici notre page piano dans laquelle est présent un « extrait » de piano que l’utilisateur pourra utiliser grâce aux touches de son clavier. Lorsque l’utilisateur appuiera sur l’une des touches du clavier, la note correspondante à la touche s’affichera au dessus du piano.
<script>
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let annee = "Janvier 1, 2023 00:00:01",
countDown = new Date(annee).getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById("days").innerText = Math.floor(distance / (day)),
document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
//do something later when date is reached
if (distance < 0) {
let headline = document.getElementById("headline"),
countdown = document.getElementById("countdown"),
content = document.getElementById("content");
headline.innerText = "C'est la Fin !";
countdown.style.display = "none";
content.style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());
</script>
Le script javascript de la page qui s’ouvre
Ce script Javascript permet de d’ouvrir une page lorsque l’utilisateur écrira le mot « end » avec les touches de son clavier.
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<script>
var index = 0;
var magic_word = "end";
if (e.key == magic_word[index]) {
index++;
if (index == magic_word.length) {
window.open("https://www.youtube.com/watch?v=EqaHgjv_Snc", "_blank");
index = 0;
}
} else {
index = 0;
}
}
</script>
Le générateur de citations
Présentation
Voici la page générateur de citations qui présentera à l’utilisateur lorsqu’il qu’il le voudra divers citation de personne fictif ou bien réel. Enregistré en variable dans les scripts javascript. De plus le fond de la page est une gradation de couleur en mouvement constant.
A chaque fois que l’utilisateur actualise la page ou que le bouton est utiliser, une nouvelle citation qui est dans dans la variable « citations » sera affiché.
<script>
var auteur = [
"Maitre Oogway",
"Maitre Oogway",
"Martin Luther King",
"Confucius",
"Jean-Paul Sartre",
"Victor Hugo",
"Albert Einstein",
"Oscar Wilde",
"Albert Einstein",
"Emmanuel Kant",
"Douglas Adams",
"Maitre Yoda"
]
var citations = [
"❝Hier est derrière, demain est mystère, et aujourd'hui est un cadeau, c'est pour cela qu'on l'appelle le présent.❞",
"❝On rencontre souvent sa destinée par les chemins qu'on a pris pour l'éviter.❞",
"❝Celui qui accepte le mal sans lutter contre lui coopère avec lui.❞",
"❝Exige beaucoup de toi-même et attends peu des autres. Ainsi beaucoup d'ennuis te seront épargnés.❞",
"❝Dans la vie on ne fait pas ce que l'on veut mais on est responsable de ce que l'on est.❞",
"❝On passe une moitié de sa vie à attendre ceux qu'on aimera et l'autre moitié à quitter ceux qu'on aime.❞",
"❝La vie, c'est comme une bicyclette, il faut avancer pour ne pas perdre l'équilibre.❞",
"❝La beauté est dans les yeux de celui qui regarde.❞",
"❝Un problème sans solution est un problème mal posé.❞",
"❝La musique est la langue des émotions.❞",
"❝42 est la réponse à la grande question sur la vie, l'univers et le reste❞",
"❝Difficile à voir. toujours en mouvement est l'avenir.❞"
]
function nouveaux() {
var rand = Math.floor(Math.random() * (citations.length));
document.getElementById('citationplace').innerHTML = citations[rand];
document.getElementById('auteurplace').innerHTML = auteur[rand];
}
</script>
Le script javascript changeur d’image
A chaque fois que l’utilisateur actualise la page ou que le bouton est utiliser, une nouvelle image tiré au hasard de Flickr sera affiché. Cette image est trouvé grâce au mot clé « autumn forest ».
Lors de la programation de nos page nous avons constaté plus précisément dans la page du piano, que la personne ayant codé le javascript avait codé avec un choix de touche adapté au clavier QWERTY il a donc fallut modifié les touches du clavier en l’adaptant pour un clavier AZERTY. Cette action a était possible en changeant les DATA-KEY des touches.
Le site https://nsi42.net/ héberge les projets web de nos élèves. Codé par un ancien élève, ce site propose un jeu de piste à travers une interface en ligne de commande…
En classe de première
En classe de première, les élèves réalise un premier site web de quelques pages en février, et ils s’initient aux protocoles HTTP, HTTPS, FTP à travers ces projets.
C’est l’occasion de leur faire découvrir les langages HTML et CSS.
En classe de terminale
En classe de terminale, les élèves réalisent un premier site web dans lequel ils doivent intégrer des modules imposés et des modules librement choisis en octobre.
L’objectif est alors d’approfondir leurs connaissances en JAVASCRIPT.
Plus tard dans l’année, ils peuvent utiliser cet espace web pour mener à bien un projet centré sur les bases de données, et ce frotter ainsi aux langages PHP et SQL.
Découvrir le site nsi42.net
Le site https://nsi42.net/ sera peut-être pour vous une découverte de l’ASCII Art et qui sait, peut-être que la console accepte les commandes Linux !
Enseignant de mathématiques et de spécialité NSI, Lycée Louis Pasteur d’Avignon.
Aime compter jusqu’à 666 mais s’arrête souvent à 42.
Auteur du livre Découvrir la calculatrice NumWorks.
Labomep est un exerciseur de mathématiques en ligne, gratuit et facile à prendre en main. Il est utilisé par de nombreux enseignants français pour faire progresser leurs élèves. Nous avons conçu labohelp pour aider les élèves à résoudre les petits problèmes qu’ils rencontrent parfois sur la labomep.
Labomep vous connaissez ?
Considéré comme un instrument de torture mathématique par certains, source d’angoisses pour d’autres, labomep est un formidable outil pour s’entraîner sur les automatismes du point de vue du prof.
Et lorsque les élèves comprennent qu’on va les faire travailler et que l’on peut contrôler finement ce travail, vérifier par exemple s’il est fait au dernier moment, vient alors le moment où certain tentent de trouver toutes les parades pour passer à travers, éventuellement en inventant des bugs imaginaires.
Certains enseignants renoncent alors à utiliser cet outil alors que 90% des problèmes rencontrés par les élèves sont imaginaires ou facilement dépassables.
Le site internet labohelp va vous aider à résoudre les principaux problèmes rencontrés par les élèves.
Le cahier des charges
L’idée de base est donc de proposer un chemin de résolution aux principaux problèmes rencontrés sous labomep. Il s’agit dans 90% des cas de problèmes annexes, qui n’ont rien de mathématique. Et quand c’est un problème en mathématiques, un peu d’autonomie de la part de l’élève et quelques prises d’initiatives peuvent aider ou suffire.
Le format flash étant obsolète et déprécié, labohelp n’aidera pas les élèves à résoudre leur problème avec le plugin flash dans le navigateur web.
Ainsi par un jeu de question / réponse, l’assistant aide l’utilisateur (un élève) à résoudre tout seul son problème.
Si le problème n’est pas résolu, il invite l’utilisateur à contacter son professeur mais des précautions sont prises pour éviter les abus.
Les URLs générées sur labohelp étant uniques, si un enseignant reçoit une demande d’élève qui se trouve dans la base de donnée, il lui suffit de copier / coller cette adresse et de l’envoyer à l’élève.
Ainsi à un élève vraiment de mauvaise fois qui ne trouverait pas la page de connexion on pourrait lui envoyer cette adresse : http://labohelp.nsi.xyz/index.php?ref=12
Laborobot répond à vos questions sur labohelp !
Pour rendre l’outil plus agréable, un petit robot est conçu. Un concours interne à l’équipe de développement du site (votation truquée bien évidemment) décide que le robot élu sera le croquis numéro 6.
Le croquis est donc réalisé au propre avec quelques améliorations graphiques, puis numérisé au format PNG et on y applique la charte graphique du site générée tout à fait aléatoirement sur coolors.co.
Tout est désormais en place pour développer un site amusant et coloré !
Choix techniques
L’idée étant de profiter de ce projet pour apprendre / progresser dans la maîtrise des langages HTML / PHP il est décidé de réaliser un unique script PHP, qui servira toutes les pages en interrogeant un annuaire de questions / réponses.
Après quelques tentatives infructueuses (car peu pertinentes) avec un fichier CSV, nous partons sur un fichier XML qui nous permettra de structurer facilement l’annuaire de questions / réponses.
L’unique script php de 400 lignes est ainsi capable de générer les nombreuses pages de ce labohelp. D’après nos informations, il y aurait plus de 42 pages, et on me souffle dans l’oreillette qu’il y aurait des pages cachées (6 à la date du 11 février 2020), ainsi qu’un menu caché qui sera accessible ultérieurement ! Sauras-tu les retrouver ?
Bien évidemment, une feuille de style CSS habille le site internet, vous pouvez d’ailleurs le visiter sans la feuille de style ou avec celle-ci. Pour désactiver la feuille de style, il suffit de rajouter &style=no à la fin de l’adresse de la page visitée.
Minimaliste mais efficace, la feuille de style intègre également la gestion des écrans ayant une petite résolution avec la déclaration CSS
@media screen and (max-width: 1000px) {
}
Du coup si l’écran de l’ordinateur offre une résolution très faible, le navigateur affichera la version pour smartphone du site.
Le site labohelp, pour qui ?
Pour les élèves qui se noient dans un verre d’eau
Pour les élèves qui cherchent une réponse à un problème courant
Pour les enseignants qui souhaitent l’utiliser avec leurs élèves
Il est possible de faire évoluer l’annuaire de questions / réponses, si vous êtes enseignant et que vous souhaitez l’enrichir contactez-nous.
Si vous êtes un élève, la réponse à vos problèmes sur labomep se trouve peut-être sur labohelp.nsi.xyz, nous ne répondrons à aucun message concernant un bug sur labomep envoyé par un élève.
Enseignant de mathématiques et de spécialité NSI, Lycée Louis Pasteur d’Avignon.
Aime compter jusqu’à 666 mais s’arrête souvent à 42.
Auteur du livre Découvrir la calculatrice NumWorks.
Le programme enseigné en spécialité NSI est défini par le Ministère de l’Éducation nationale et de la Jeunesse. Ce programme est commun à tous les lycées, il est librement consultable en ligne.
A noter :
Un élève curieux qui lirait le programme pourrait penser qu’il est complexe, notamment la lecture des éléments du programme, mais il s’agit d’un biais cognitif, lire le programme de spécialité maths avec le même regard naïf permet de faire le même constat, et il est tout aussi erroné.
Préambule
du programme de classe de 1ère NSI
L’enseignement de spécialité de numérique et sciences informatiques du cycle terminal de la voie générale vise l’appropriation des fondements de l’informatique pour préparer les élèves à une poursuite d’études en les formant à la pratique d’une démarche scientifique et en développant leur appétence pour des activités de recherche.
L’objectif de cet enseignement général est l’appropriation des concepts et des méthodes qui fondent l’informatique, dans ses dimensions scientifiques et techniques. Il s’appuie sur l’universalité de quatre concepts fondamentaux et la variété de leurs interactions :
les données, qui représentent sous une forme numérique unifiée des informations très diverses : textes, images, sons, mesures physiques, sommes d’argent, etc.
les algorithmes, qui spécifient de façon abstraite et précise des traitements à effectuer sur les données à partir d’opérations élémentaires ;
les langages, qui permettent de traduire les algorithmes abstraits en programmes textuels ou graphiques de façon à ce qu’ils soient exécutables par les machines ;
les machines, et leurs systèmes d’exploitation, qui permettent d’exécuter des programmes en enchaînant un grand nombre d’instructions simples, assurent la persistance des données par leur stockage et gèrent les communications. Y sont inclus les objets connectés et les réseaux
À ces concepts s’ajoute un élément transversal : les interfaces qui permettent la communication, la collecte des données et la commande des systèmes
Cet enseignement prolonge les enseignements d’informatique dispensés à l’école primaire, au collège en mathématiques et en technologie et, en seconde, l’enseignement commun de sciences numériques et technologie. Il s’appuie aussi sur l’algorithmique pratiquée en mathématiques en seconde.
Il permet de développer des compétences :
analyser et modéliser un problème en termes de flux et de traitement d’informations ; décomposer un problème en sous-problèmes, reconnaître des situations déjà analysées et réutiliser des solutions ;
concevoir des solutions algorithmiques ;
traduire un algorithme dans un langage de programmation, en spécifier les interfaces et les interactions, comprendre et réutiliser des codes sources existants, développer des processus de mise au point et de validation de programmes ;
mobiliser les concepts et les technologies utiles pour assurer les fonctions d’acquisition, de mémorisation, de traitement et de diffusion des informations ;
développer des capacités d’abstraction et de généralisation
Cet enseignement a vocation à multiplier les occasions de mise en activité des élèves, sous des formes variées qui permettent de développer des compétences transversales :
faire preuve d’autonomie, d’initiative et de créativité ;
présenter un problème ou sa solution, développer une argumentation dans le cadre d’un débat ;
coopérer au sein d’une équipe dans le cadre d’un projet ;
rechercher de l’information, partager des ressources ;
faire un usage responsable et critique de l’informatique.
La progression peut suivre un rythme annuel construit autour de périodes spécifiques favorisant une alternance entre divers types d’activités.
Cet enseignement contribue à l’acquisition des compétences numériques qui font l’objet d’une certification en fin de cycle terminal.
Comme tous les enseignements, cette spécialité contribue au développement des compétences orales à travers notamment la pratique de l’argumentation. Celle-ci conduit à préciser sa pensée et à expliciter son raisonnement de manière à convaincre. Elle permet à chacun de faire évoluer sa pensée, jusqu’à la remettre en cause si nécessaire, pour accéder progressivement à la vérité par la preuve. Si ces considérations sont valables pour tous les élèves, elles prennent un relief particulier pour ceux qui choisiront de poursuivre cet enseignement de spécialité en terminale et qui ont à préparer l’épreuve orale terminale du baccalauréat. Il convient que les travaux proposés aux élèves y contribuent dès la classe de première.
Démarche de projet
Un enseignement d’informatique ne saurait se réduire à une présentation de concepts ou de méthodes sans permettre aux élèves de se les approprier en développant des projets.
Un quart au moins de l’horaire total de la spécialité est réservé à la conception et à l’élaboration de projets conduits par les élèves.
Les projets réalisés par les élèves, sous la conduite du professeur, constituent un apprentissage fondamental tant pour la compréhension de l’informatique que pour l’acquisition de compétences. En classe de première comme en classe terminale, ils peuvent porter sur des problématiques issues d’autres disciplines et ont essentiellement pour but d’imaginer des solutions répondant à l’expression d’un besoin ; dans la mesure du possible, il convient de laisser le choix du thème du projet aux élèves eux-mêmes. Il peut s’agir d’un approfondissement théorique des concepts étudiés en commun, d’une application à d’autres disciplines telle qu’une simulation d’expérience, d’un travail sur des données socioéconomiques, du développement d’un logiciel de lexicographie, d’un projet autour d’un objet connecté ou d’un robot, de la conception d’une bibliothèque implémentant une structure de données complexe, d’un problème de traitement d’image ou de son, d’une application mobile, par exemple de réalité virtuelle ou augmentée, du développement d’un site Web associé à l’utilisation d’une base de données, de la réalisation d’un interprète d’un mini-langage, d’un programme de jeu de stratégie, etc.
La gestion d’un projet inclut des points d’étape pour faire un bilan avec le professeur, valider des éléments, contrôler l’avancement du projet ou adapter ses objectifs, voire le redéfinir partiellement, afin de maintenir la motivation des élèves.
Les professeurs veillent à ce que les projets restent d’une ambition raisonnable afin de leur permettre d’aboutir.
Modalités de mise en œuvre
Les activités pratiques et la réalisation de projets supposent que chaque élève ait un accès individuel à un équipement relié à Internet.
Un langage de programmation est nécessaire pour l’écriture des programmes : un langage simple d’usage, interprété, concis, libre et gratuit, multiplateforme, largement répandu, riche de bibliothèques adaptées et bénéficiant d’une vaste communauté d’auteurs dans le monde éducatif est à privilégier. Au moment de la conception de ce programme, le langage choisi est Python version 3 (ou supérieure). L’expertise dans tel ou tel langage de programmation n’est cependant pas un objectif de formation
Éléments de programme
Si vous souhaitez lire l’intégralité du programme officiel, vous pouvez le télécharger sur le site eduscol.education.fr Une copie au format .pdf est disponible ci-dessous dans l’éventualité ou le lien précédent est brisé.
Enseignant de mathématiques et de spécialité NSI, Lycée Louis Pasteur d’Avignon.
Aime compter jusqu’à 666 mais s’arrête souvent à 42.
Auteur du livre Découvrir la calculatrice NumWorks.
En spécialité NSI, on étudie principalement le langage de programmation Python, dans lequel on écrit les algorithmes traité en classe, ainsi que le langage SQL qui permet d’interroger une base de donnée. Les projets réalisés par les élèves leurs permettent de découvrir et de s’amuser avec du HTML, du CSS, du JavaScript. La découverte des systèmes d’exploitations est l’occasion de s’initier au BASH.
A noter :
L’expertise dans tel ou tel langage de programmation n’est cependant pas un objectif de formation, en spécialité NSI on découvre des langages, chacun est libre d’approfondir ces connaissances lors de la réalisations des projets.
Les différents langages découverts ou approfondis
Python
Un langage de programmation est nécessaire pour l’écriture des programmes. Les lycées français ont choisis le langage Python, qui est à la fois simple d’usage, interprété, concis, libre et gratuit, multiplateforme et largement répandu.
# Python 3
print("Hello NSI !")
HTML
Aujourd’hui, de plus en plus de nos actions se passent par le Web, qui est aux centres de nos vies. Il faut donc pour cela expliquer aux spécialités NSI, son organisation, ses complexités, et à commencer par l’HTML. Ce n’est pas vraiment un langage, car il fait le lien entre plusieurs langages, mais il est l’élément central pour le fonctionnement des pages Web comme celle que vous êtes en train de regarder.
<strike class="physique">La Physique c'est bien</strike>
<h1 id="nsi">La NSI c'est super</h1>
CSS
Nous retrouvons donc le CSS qui va de pair avec le HTML, si ce dernier est l’élément central, sans le CSS, le Web ressemblerait à la première page Web. C’est donc ce qui permet de donner un petit peu de style au Web, pour le rendre plus attrayant.
Le JavaScript est aussi un des éléments clés du fonctionnement du Web que nous aborderons en spécialité NSI. Il permet de faire fonctionner certains éléments de façon dynamique, comme un menu, mais aussi certaines interactions avec l’utilisateur comme sur notre portail des élèves et a aussi bien d’autres avantages, que vous pourrez découvrir dans le cadre des projets en spé NSI.
//let nsi;
//nsi = "En classe de première, je choisis la spécialité NSI";
window.alert("En classe de première, je choisis la spécialité NSI");
SQL
Le SQL permet de traiter simplement d’immenses bases de données, de les classifier, les regrouper, etc… Il est extrêmement puissant tout en étant d’une simplicité déconcertante, et permet à nos élèves, de mettre un pied dans le monde des bases de données immenses, ou la moindre recherche manuelle serait un parcours du combattant.
SELECT *
FROM nsi
BASH
Le BASH, c’est magique, peu de personnes vous le diront car elles n’ont pas l’occasion de l’utiliser au quotidien et de découvrir sa praticité. Mais c’est quoi au fait ? C’est tout simplement la langue du terminal, vous savez cette fenêtre noire et peu rassurante qui s’ouvre de temps en temps. Nos élèves découvrent donc cette interface au travers du monde incroyable de Linux/GNU, à travers un petit jeu interactif en ligne : Terminus
mkdir nsi
cd nsi
sudo apt-get install reussite
./reussiteNSI.elf
Les autres fondamentaux en spé NSI
De la même manière qu’un élève étudiant la spécialité Physique au lycée ne sera pas obligatoirement en charge de piloter une centrale nucléaire, les élèves étudiant la spécialité NSI ne seront pas tous développeurs informatique, et ne feront peut-être même pas un métier lié à l’informatique. Cette spécialité est ouverte à tous, filles comme garçons, intéressés de découvrir le fonctionnement des outils qui nous entourent de plus en plus, et désireux d’acquérir des compétences pour le futur.
La spécialité NSI est l’occasion de découvrir une nouvelle science, appelée informatique. Les concepts fondamentaux étudiés en spécialité NSI vont bien au delà de la simple conception de programme, ils permettent de rentrer et de découvrir ce monde fabuleux que sont les sciences informatiques.
Enseignant de mathématiques et de spécialité NSI, Lycée Louis Pasteur d’Avignon.
Aime compter jusqu’à 666 mais s’arrête souvent à 42.
Auteur du livre Découvrir la calculatrice NumWorks.
Vous comptez créer un site sous WordPress mais vous ne savez pas comment vous y prendre. Voici un tutoriel rédigé en trois parties qui vous expliquera étape par étape le processus d’installation le plus optimal afin que vous puissiez débuter dans les meilleures conditions.
Introduction
Avant de se lancer dans l’installation de son site, il est essentiel de se familiariser avec WordPress car même s’il domine le marché, il existe bien d’autres solutions pour créer son site web.
WordPress est avant tout un système de gestion de contenu gratuit codé en PHP qui permet de créer un site que ce soit un blog ou alors un site e-commerce en un rien de temps. WordPress est la solution la plus privilégiée par les débutants car il ne requiert aucune connaissance en codage. Pourtant, nombreux sont ceux qui se heurtent à la tâche lorsqu’il s’agit d’installer correctement leur site.
Aujourd’hui, voici donc un tutoriel qui permet de ne pas se lancer dans l’aventure sans arme, rédigé en trois parties. Il vous permettra de comprendre au mieux les étapes indispensables à suivre pour une installation la plus optimale qu’il soit.
1. Repérage et Préparation
a. Choix du nom de domaine
Afin de créer un site sous WordPress, il faut d’abord choisir un nom de domaine. C’est une adresse unique que tout site possède. Ici par exemple, nsi.xyz est le nom de domaine, « nsi » étant le nom et « .xyz » l’extension. Le choix du nom de domaine permettra à vos visiteurs de se souvenir de votre site. Il est donc crucial de le choisir avec intelligence et pour ce faire, assurez-vous qu’il soit facile à écrire et à prononcer en d’autres termes qu’il soit écrit en un mot.
Remarques :
Si votre projet est de créer un multi-site traduit en plusieurs langues sous WordPress, il sera préférable d’utiliser une extension en « .com » car d’une part c’est celle la plus utilisée mais aussi car c’est la plus reconnue dans le monde.
Si votre projet est de créer un site local alors il sera préférable de privilégier une extension en « .fr », « .be » « .uk » etc..
Imaginons maintenant que vous ayez votre idée de nom de domaine en tête, vous pouvez alors consulter des hébergeurs web tel que GoDaddy dans le but de vérifier si votre idée est déjà prise.
Deux scénarios s’ouvrent alors à vous :
1. Votre idée n’est plus disponible avec l’extension voulue alors vous regardez les autres extensions proposées ou dans le cas échéant, vous trouvez une autre idée.
2. Votre idée est disponible et vous pouvez envisager de passer à l’étape suivante.
b. Choix du plan d’hébergement
Maintenant, vous devez choisir un plan d’hébergement web qui vous permettra d’installer votre site sur un serveur connecté en permanence à Internet.
En fonction du plan choisi, certains avantages en matière de sauvegarde, de sécurité et de performance pourront s’offrir à vous.
Il faut savoir qu’il existe de nombreux hébergeurs web. Certains se sont spécialisés hébergeurs WordPress et d’autres se sont diversifiés. Ceci étant dit, il sera conseillé de choisir un plan d’hébergement web spécialisé WordPress pour installer son premier site.
Voici deux exemples de plans et d’hébergeurs WP :
Kinsta
WP Serveur
Bien évidemment, les prix varient selon le plan choisi avec x et y avantages. Il vous faudra donc soigneusement le choisir en faisant un comparatif entre toutes les offres des hébergeurs web.
2. Installation de WordPress
Vous devez désormais installer WordPress afin de pouvoir véritablement créer votre site. Il existe deux façons de procéder.
a. Installation automatique alias la façon « .com »
1) Se rendre sur WordPress.com
2) Créer un compte
3) Associer le nom de domaine existant à WordPress ou en rechercher un si non trouvé précédemment.
4) Votre site WordPress est créé !
b. Installation manuelle alias la façon « .org »
1) Se rendre sur WordPress.org
2) Télécharger la dernière version de WordPress
3) Se rendre sur son hébergeur web et accéder au Cpanel
4) Consulter son gestionnaire de fichiers
5) Cliquer sur le dossier public_html dans la barre latérale et créer un nouveau dossier au nom de votre choix
6) Télécharger dans ce dossier le fichier ZIP WordPress de l’étape 2
7) Extraire le fichier ZIP installé
8) Sélectionner tout et déplacer le tout dans public_html
Félicitations ! WordPress est désormais installé et relié à votre nom de domaine se trouvant dans le dossier public_html. Il vous reste maintenant à créer une base de donnée pour votre site.
Pour ce faire :
1) Visiter ses bases de données (logiciel MySQL)
2) Créer une base de donnée pour votre nouveau site
3) Ajouter un utilisateur
4) Associer la base de donnée créée et l’utilisateur
Hourra ! On a maintenant une base de donnée qui permettra de stocker et de restituer simplement les données de votre site.
L’installation manuelle de WordPress est maintenant terminée. Il vous suffira de rentrer dans la barre de recherche votre nom de domaine (adresse URL) pour commencer avec WordPress.
3. CONFIGURATION
Voici maintenant une troisième partie pouvant être utile pour certains et non pour d’autres qui, une fois avoir installé WordPress manuellement ou automatiquement vous permettra d’avoir le meilleur environnement de travail possible.
On va ici parler de la configuration de votre site dans la partie admin donc avant d’aborder cette dernière partie du tutoriel, assurez-vous de vous rendre dans cet espace en tant qu’administrateur avec votre mot de passe et nom d’utilisateur WordPress (ou email).
a. Le thème
Pour commencer, il vous faudra un thème. Un thème sert à modifier l’apparence globale de votre site mais aussi à disposer le contenu de vos pages.
Il existe une infinité de thèmes payants ou gratuits. Si vous avez pour intention de créer un blog, vous pouvez tout à fait commencer à rédiger votre contenu avec les thèmes par défaut WordPress qui se présentent de cette façon :
b. L’éditeur de page
Vous devez sûrement l’avoir compris, un éditeur de page est essentiel. Pour commencer, le meilleur constructeur de page se nomme Classic Editor et fera entièrement l’affaire pour votre premier site.
c. Les extensions
Vous les reconnaîtrez en anglais sous le nom de « plugins ». Il en existe un bon nombre et tous ont des intentions différentes qui serviront à améliorer votre site.
Ceci étant dit, pour une configuration optimale, voici une liste de certains plugins qu’il vous faut installer sans plus attendre :
L’extension Yoast SEO
Celle-ci est fondamentale puisqu’elle va permettre aux personnes de vous trouver via les principaux moteurs de recherches (Google, Bing etc..). SEO veut dire search engine optimization et correspond au référencement naturel. Sans cet outil, à moins que vous ne connaissiez déjà les attentes des moteurs de recherches, il vous sera difficile d’attirer du trafic dit organique(sauf si source de traffic externe).
L’extension Contact Form 7
Celle-ci vous permettra de créer des formulaires de contact qui sont précieux lorsqu’il s’agit de récupérer des informations sur vos visiteurs.
L’extension Wordfence
Un plugin antivirus indispensable (si aucune sécurité établie à l’avance par le plan d’hébergement web sélectionné).
L’extension WP Fastest Cache
Une extension qui permet à votre site d’être plus rapide en réduisant la taille du HTML de vos pages et en minifiant le Javascript et le CSS. Il faut savoir qu’une bonne performance rime avec un meilleur référencement.
Il existe bien d’autres alternatives aux extensions mentionnées mais si vous débutez l’aventure WordPress, il sera préférable que vous vous en teniez d’abord à celles-ci pour ensuite trouver celles qui vous conviennent le mieux.
Conclusion
On aura donc vu en premier les prédispositions pour installer son site sous WordPress c’est à dire choisir un nom de domaine ainsi qu’un plan d’hébergement web. Dans un deuxième temps, on aura montré deux manières d’installer WordPress sur son nom de domaine. Enfin, on aura appris à configurer de la meilleure manière qu’il soit notre site sous WordPress.
Vous êtes à la recherche d’inspiration ? Ne vous en faites pas, le générateur de citations de notre site est fait pour ça ! Vous connaissez les bases du HTML ? Cette article vous présente et explique pas à pas la création du site ainsi que l’intégration des quelques modules utilisés.
Si vous êtes sur cet article, il est probable que créer un générateur, de citations en l’occurrence, vous a intrigué. Voilà les explications du procédé de sa création et de son intégration sur notre site :
Notre projet a été de créer un site qui comporte un générateur de citations de grands auteurs ou philosophes mais également certaines répliques de films connus afin d’apporter une source d’inspiration pour nos visiteurs. Pour cela, nous avons fait le choix de créer qu’une seule page de site, ce qui est amplement suffisant pour mener à bien le projet. Cependant, une consigne a été imposée : intégrer des modules. Heureusement pour nous, la toile regorge de scripts intéressants et variés de générateurs : de JavaScript à Python, le choix est large.
Avant de commencer
Tout d’abord, avant d’intégrer quelconque script choisi par nos soins, nous devions mettre la balise <nsi-xyz> préalablement installée sur l’éditeur de texte avant la réalisation du site. Cette balise sert de « support » pour les fonctionnalités que nos professeurs peuvent ajouter. Cette ligne doit se situer entre les balises <head>.
Après avoir ajouté la fonction menu fournie par nos professeurs, ils pourront relier les sites réalisés par les autres élèves avec le notre.
< !— Appel du menu —>
<nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>
Icône du menu
Le script du générateur et du bouton
Pour pouvoir générer des citations aléatoirement nous avons pris un module sur le site freeCodeCamp.org qui nous permet d’apprendre le codage chez soi et apporte des aides précieuses pour les projets. Pour le nôtre, il explique pas à pas le processus de construction du script JavaScript complet. Il contient également un bouton qui permet de générer les citations que nous avons préalablement choisi ainsi que le générateur. Ce script sera le cœur de notre site.
Cependant, la question se pose : comment un bouton a pu être relié au générateur me direz-vous ? Le déroulement est simple : il existe une fonction dans le langage HTML nommé “onclick” qui permet, ainsi inséré dans les balise “button”, de définir une fonction sur le bouton, qui dans notre cas, sera paramétré dans le script JavaScript et que nous aurons appelé “newQuote()”.
<button onclick="newQuote()"> Appuyez </button>
function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber]
document.getElementById('quoteDisplay').style.fontFamily = 'Scope One', serif;
}
En revanche, au niveau de la stylisation des citations, celle-ci diffère d’une stylisation en CSS car elle se fait directement dans le script JavaScript. En effet, on place les citations entre des balises qu’on utilise également dans le langage HTML, comme les balises de sauts de lignes, d’alignement de texte, de la couleur, de la taille et bien plus encore selon vos envies. Une fois les citations tapées dans le script JavaScript et la stylisation faite, le générateur est prêt à fonctionner !
<br><br><center><div style="font-size : 155%"><p style="color:white ;"> "La vie sans musique est tout simplement une erreur, une fatigue, un exil" </center></p></div> <br> <center><div style="font-size : 120%"><p style="color:white ;"> Friedrich Nietzsche </center></p></div>
Le Header
Au niveau de la mise en page, lorsqu’on vous impose l’intégration de modules, la difficulté est tout autre que ce que l’on peut penser : il faut CHOISIR parmi des CENTAINES de scripts tous aussi beaux et impressionnants les uns que les autres. La difficulté est d’en choisir UN pour chaque fonctionnalités ou décoration du site. Réussir à les intégrer correctement est une autre histoire…
Pour ce faire, nous avons tout d’abord décidé de créer un header plutôt esthétique. Nous le rappelons, ce que nous voulons est de permettre aux visiteurs du site de lire des citations inspirantes. Ces visiteurs sont donc à la recherche d’inspiration, d’apaisement, de revigoration. L’esthétique du site compte alors énormément. Nous allons même jusqu’à dire que c’est ce qui compte ! Pour un site, le header, « en-tête » en anglais, est le haut du site, le commencement et est donc est la première partie sur laquelle arrive le visiteur. Cela signifie qu’elle doit être accrochante et agréable esthétiquement parlant, pour ainsi donner au lecteur une idée de la qualité du site et des citations mis à sa disposition.
Un diaporama de belles images sous une petite opacité et le titre du site fut une très bonne idée. Avec la simple recherche « slider photos css html » (slider qui veut dire « glissant » en anglais), nous avons choisi parmi un très large choix le tutoriel de Salvador el semestre « Speed Code-Full Screen Automatic Image Slider Background-HTML CSS », qui nous a permis d’intégrer un header qui prend toute la largeur de l’écran pour un plus beau résultat et un rendu plus fluide et aéré. L’intégration s’est très bien déroulée sans aucun blocage.
<div class="slider">
<div class="load">
</div>
<div class="content">
<div class="principal">
<h1>Citations Inspirantes</h1>
<p>Générateur de citations et répliques de films</p>
<p>Diaporama d'images inspirantes</p>
</div>
</div>
</div>
Par rapport au script original, nous avons modifié les images du slider avecbackground-image, le texte aux balisesh1,pet nous avons ajouté un peu d’opacité avecopacity
Création de la boîte qui contient le générateur de citations
Ensuite, dans le corps du site, le « body« , il a fallu trouver une mise en page sympa afin d’y insérer le script JavaScript du générateur de citations. L’idée de créer une sorte de boîte avec des ombres pour lui donner du relief mais surtout l’illusion d’une petite feuille avec une citation inscrite dessus était intéressant. Pour cela, rien de plus simple : on tape sur son moteur de recherche « text box html css » et nous avons trouvé le tutoriel de Kevin Powell « CSS box-shadow – how to make them look good ».
En effet, taper votre recherche en anglais vous donne la plupart du temps plus de contenu et de réponses, alors il ne faut pas hésiter ! Pour cette boîte, un simple script suffisait puisqu’on ajuste nous même la forme de la boîte et son apparence selon nos envies en le modifiant.
Cependant, nous avons eu un PROBLEME au niveau de la dimension de la boîte : en effet, lorsqu’on active le générateur en cliquant sur le bouton, les dimensions de la boîte changeaient selon la taille de la citation (elle s’élargissait et inversement). Il a fallu un certain nombre de recherche sur internet avant de comprendre d’où venait le problème et comment le résoudre : le script original ne comportait pas les paramètres width et height, qui indiquent respectivement la largeur et la hauteur d’un objet. Sans eux, la dimensions de la boîte n’a pas été définie, ce qui implique que la taille de la boîte s’adapte à la taille des citations.
Par rapport au script original, nous avons modifié la taille de la boîte avecwidth,height,padding-top,padding-right,padding-left, les dimensions de l’ombrage avecbox-shadow, la couleur de fond avec background et nous avons remplacé le texte par notre générateur de citations en ajoutantid= »quoteDisplay »
Stylisation du bouton du générateur
Bien sûr, le mieux est que le visiteur puisse activer ce générateur de citation via le bouton sur lequel il devra cliquer. La stylisation d’un bouton est une chose facile puisque des centaines de scripts de styles différents existent sur le web. Cette fois cependant, nous avons essayé d’intégrer une dizaines de scripts mais il arrive que cela ne soit pas aussi simple que ça puisse paraître puisque certains n’affichent pas le résultat espéré, même après maintes et maintes modifications du script.
Nous avons alors opté pour un simple bouton animé très sympa qui utilise du html/css. Il provient du site w3school.com qui est un site optimisé pour l’apprentissage et la formation du langage web. L’intégration n’a causé aucun problème et nous l’avons évidemment adapté aux couleurs de la page.
Par rapport au script original, nous avons modifié la forme du bouton avecborder-radiuspour arrondir les coins, la couleur avecbackground-color et background lors du cliquage et le texte dans la balisebutton
Le Diaporama d’images
Enfin, l’idée finale du projet a été de donner la possibilité aux visiteurs du site d’avoir à disposition également certaines images inspirantes qui pourraient accompagner le concept des citations inspirantes. Pour se faire, encore une fois, la recherche « diaporama css html » nous a permis de choisir le script du site pierre-giraud.com qui est un site incroyablement bien fait pour apprendre à coder et contient toutes les ressources sur le développement web. L’intégration du script s’est très bien déroulé et nous avons bien évidemment intégré nos images dans le diaporama, avec un très beau rendu.
Par rapport au script original, nous avons modifié la taille du diaporama avecheight, arrondi les coins avecborder-radiuset modifié les images avecbackground-image
Les Plus+
1° Nous avons aussi fait le choix d’intégrer un bouton qui nous ramène automatiquement en haut de page, ce qui est une fonction pratique lorsque le site est très long. Pour notre part, nous voulions permettre au visiteur de remonter la page au moment où il arrive au niveau du diaporama d’images, afin de lui permettre d’atteindre plus rapidement la partie du générateur de citations.
Pour cette fonctionnalité et pour bien d’autres encore, le site w3school.com contient des dizaines de scripts expliqués et que l’on peut modifier directement sur le site pour en comprendre le fonctionnement. Après l’intégration du script JavaScript cette fois-ci du bouton, nous l’avons bien sûr modifié afin de le fondre dans l’esthétique du site.
<button onclick="topFunction()" id="myBtn" title="Go to top">🔝</button>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() scrollFunction();
function scrollFunction() {
if (document.body.scrollTop > 1400 || document.documentElement.scrollTop > 1400) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
Par rapport au script original, nous avons modifié la couleur du bouton avec background-color, le texte dans la balise button, la taille du texte avec font-size, sa taille avec padding et arrondi les coins avec border-radius
2° C’est également le cas du scroll bar qui se trouve à l’extrême droite du site. Nous avons intégré son script dans le code de la page et aucune modification n’a été nécessaire dans sa stylisation car elle convient parfaitement aux couleurs de notre site.
Pour résumer, l’intégration des modules et des scripts nous ont permis d’obtenir un site avec un rendu agréable et esthétique avec quelques fonctionnalités comme le slider du header, le générateur de citations et le diaporama d’images. Cela donne un aspect sympa et vivant au site car le niveau de codage est plus poussé donc le résultat est plus intéressant et complexe. Cependant, à ne pas oublier que pour intégrer des modules dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML, car il sera très souvent nécessaire de modifier certains paramètres pour obtenir le résultat attendu, que ce soit dans le code HTML, JavaScript ou le style CSS.
Dans cet article nous allons voir tout d’abord le but du projet que nous allons vous présenter. Puis, nous allons voir les différents codes de javascript que nous avons inséré dans la page HTML et leurs buts. Pour finir, nous allons vous expliquer les difficultés rencontrées durant la conception de cette page et les solutions que nous avons mis en œuvre pour résoudre ces derniers.
Ce projet a été réalisé par des élèves en spécialité NSI du Lycée Louis Pasteur. Ils sont également les auteurs de ce compte rendu. Pour en savoir plus : Les projets en spécialité NSI
Le but du projet
Ce projet nous a été proposé par nos professeurs. Le But : Faire de l’insertion de javascript dans une page HTML. Différentes consignes nous avait été énoncées comme par exemple insérer un module, nous le verrons par la suite, mais aussi un menu et un ou plusieurs codes en javascript. Au bout de ce projet nous devions donc écrire l’article que vous lisez en ce moment même.
Maintenant que nous vous avons exposé le but de ce projet nous allons donc pouvoir commencer à parler des différents codes qui sont présent dans la page HTML.
Les différents codes de la page
La page est constituée d’un menu qui contient les différentes informations que donnent les codes que nous développerons ensuite. Le menu est généré par 3 lignes au début du code HTML et par 3 lignes qui se situent à chaque début de code, juste avant les codes javascript. Les différentes lignes sont affichées ci-dessous :
ci dessus sont affichées les lignes de codes qui permettent de créer le menu.
À chaque début de code intégré dans le code de la page HTML nous avons des lignes comme celles-ci :
<div id="Date" >
</div>
qui permettent d’afficher l’information relatif à cette ligne lorsque l’on sélectionne une partie du menu.
Voici le résultat
Le premier code dont nous allons parler est le module que nos enseignants nous ont imposé d’insérer. Ce module permettra, dans le futur, de relier les différentes pages des différents élèves.
La première ligne permet d’exporter un script externe tandis que la seconde permet d’insérer le menu qui a été importer avec la ligne précédente
Au final, on obtient un menu dépliant qui se situe en haut à droite de la page HTML et une fois déplié on obtient ceci :
Maintenant nous allons parler des trois codes javascripts que nous avons insérés dans la page.
Le premier code est un code permettant de donner l’adresse IP de la personne qui ouvre la page. Pour obtenir son adresse IP la personne qui a ouvert la page devra cliquer sur un « bouton » qui lancera le programme en javascript. Le code est affiché ci dessous :
cliquer ici pour avoir votre adresse ip</button>
<p id="lastcheck"></p>
<script type="text/javascript">
var i = 0;
var prev;
var timer = null;
function stop() {
clearInterval(timer);
}
function start() {
checkIP();
clearInterval(timer);
timer = setInterval(function() {
checkIP();
}, 5000);
}
function checkIP() {
var text = "";
$.get("https://api.ipify.org", function(data) {
text =
" L'adresse ip de votre ordinateur est : " + data;
document.getElementById("lastcheck").innerHTML = text;
if (data != prev) {
document.getElementById("log").innerHTML += text;
}
prev = data;
});
}
</script>
la partie du code :
cliquer ici pour avoir votre adresse ip</button>
permet de créer un bouton qui lance le code.
tandis que la ligne :
text =" L'adresse ip de votre ordinateur est : " + data
Permet elle de donnée par écrie l’adresse IP
Et on obtient donc au final :
Le second code que nous avons inséré est un code permettant de donner la date. Contrairement au code précédent nous n’avons pas inséré de boutons car cela n’est pas nécessaire. Ce code est associé à un troisième que nous verrons ultérieurement.
Le code qui permet de donner la date à l’écrit est le suivant :
<script type="text/javascript">
var mois=new Array(13);
mois[1]="Janvier";
mois[2]="Février";
mois[3]="Mars";
mois[4]="Avril";
mois[5]="Mai";
mois[6]="Juin";
mois[7]="Juillet";
mois[8]="Août";
mois[9]="Septembre";
mois[10]="Octobre";
mois[11]="Novembre";
mois[12]="Décembre";
var time=new Date();
var month=mois[time.getMonth() + 1];
var date=time.getDate();
var year=time.getYear();
if (year < 2000)
year = year + 1900;
document.write("Nous sommes le " +date + " ");
document.write(month + " " + year);
</script>
Ce code est relativement court comparé aux autres mais il permet de donner la date à laquelle on ouvre la page.
Et le dernier code est complémentaire du précédent car il fait afficher un calendrier pour se situer dans le mois. Le code permettant cela est le suivant :
<div id="Date" class="tabcontent">
<br>
<script type="text/javascript">
<!--
var d = new Date();
var dm = d.getMonth() + 1;
var dan = d.getYear();
if(dan < 999) dan+=1900;
calendrier(dm,dan);
function calendrier(mois,an) {
nom_mois = new Array
("Janvier","Février","Mars","Avril","Mai","Juin","Juillet",
"Août","Septembre","Octobre","Novembre","Décembre");
jour = new Array ("Lu","Ma","Me","Je","Ve","Sa","Di");
var police_entete = "Verdana,Arial"; /* police entête de calendrier */
var taille_pol_entete = 3; /* taille de police 1-7 entête de calendrier */
var couleur_pol_entete = "#FFFF00"; /* couleur de police entête de calendrier */
var arrplan_entete = "#000066"; /* couleur d'arrière plan entête de calendrier */
var police_jours = "Verdana,Arial"; /* police affichage des jours */
var taille_pol_jours = 3; /* taille de police 1-7 affichage des jours */
var coul_pol_jours = "#000000"; /* couleur de police affichage des jours */
var arrplan_jours = "#D0F0F0"; /* couleur d'arrière plan affichage des jours */
var couleur_dim = "#E00000"; /* couleur de police pour dimanches */
var couleur_cejour = "#FFFF00"; /* couleur d'arrière plan pour aujourd'hui */
var maintenant = new Date();
var ce_mois = maintenant.getMonth() + 1;
var cette_annee = maintenant.getYear();
if(cette_annee < 999) cette_annee+=1900;
var ce_jour = maintenant.getDate();
var temps = new Date(an,mois-1,1);
var Start = temps.getDay();
if(Start > 0) Start--;
else Start = 6;
var Stop = 31;
if(mois==4 ||mois==6 || mois==9 || mois==11 ) --Stop;
if(mois==2) {
Stop = Stop - 3;
if(an%4==0) Stop++;
if(an%100==0) Stop--;
if(an%400==0) Stop++;
}
document.write('<table border="3" cellpadding="1" cellspacing="1">');
var entete_mois = nom_mois[mois-1] + " " + an; inscrit_entete(entete_mois,arrplan_entete,couleur_pol_entete,taille_pol_entete,police_entete);
var nombre_jours = 1;
for(var i=0;i<=5;i++) {
document.write("<tr>");
for(var j=0;j<=5;j++) {
if((i==0)&&(j < Start)) inscrit_cellule(" ",arrplan_jours,coul_pol_jours,taille_pol_jours,police_jours);
else {
if(nombre_jours > Stop) inscrit_cellule(" ",arrplan_jours,coul_pol_jours,taille_pol_jours,police_jours);
else {
if((an==cette_annee)&&(mois==ce_mois)&&(nombre_jours==ce_jour)) inscrit_cellule(nombre_jours,couleur_cejour,coul_pol_jours,taille_pol_jours,police_jours);
else inscrit_cellule(nombre_jours,arrplan_jours,coul_pol_jours,taille_pol_jours,police_jours);
nombre_jours++;
}
}
}
if(nombre_jours > Stop) inscrit_cellule(" ",arrplan_jours,couleur_dim,taille_pol_jours,police_jours);
else {
if((an==cette_annee)&&(mois==ce_mois)&&(nombre_jours==ce_jour)) inscrit_cellule(nombre_jours,couleur_cejour,couleur_dim,taille_pol_jours,police_jours);
else inscrit_cellule(nombre_jours,arrplan_jours,couleur_dim,taille_pol_jours,police_jours);
nombre_jours++;
}
document.write("<\/tr>");
}
document.write("<\/table>");
}
function inscrit_entete(titre_mois,couleurAP,couleurpolice,taillepolice,police) {
document.write("<tr>");
document.write('<td align="center" colspan="7" valign="middle" bgcolor="'+couleurAP+'">');
document.write('<font size="'+taillepolice+'" color="'+couleurpolice+'" face="'+police+'"><b>');
document.write(titre_mois);
document.write("<\/b><\/font><\/td><\/tr>");
document.write("<tr>");
for(var i=0;i<=6;i++)
inscrit_cellule(jour[i],couleurAP,couleurpolice,taillepolice,police);
document.write("<\/tr>");
}
function inscrit_cellule(contenu,couleurAP,couleurpolice,taillepolice,police) {
document.write('<td align="center" valign="middle" bgcolor="'+couleurAP+'">');
document.write('<font size="'+taillepolice+'" color="'+couleurpolice+'" face="'+police+'"><b>');
document.write(contenu);
document.write("<\/b><\/font><\/td>");
}
//-->
</script>
Grâce à ce code on obtient ceci :
Cependant si vous copier ces codes vous n’obtiendrez malheureusement pas le même résultat car il manque le code CSS qui permet de mettre en « forme » et en « couleur » la page.
Donc en premier lieu nous allons voir la mise en page en générale puis nous verrons partie par partie les différents code qui permettent de faire la même mise en page finale.
Et enfin voici le code CSS qui permet de faire la mise en page du menu, qui contient toutes les informations, que donnent les codes que nous avons vus précédemment.
Les lignes de codes ci-dessus permettent la mise page du tableau qui contient les informations données par les codes en javascript.
Nous en avons donc fini avec les différentes lignes de codes qui composent notre page HTML
Les problèmes rencontrés et leurs solutions
Durant la conception de notre page HTML nous avons rencontrés très peu de problèmes concernant les codes. Cependant nous avons eux quelques fois le menu, permettant de faire le lien entre les futures pages des élèves, qui ne s’affichait plus. Le problème était tout simplement que le code n’était pas bien positionné, il se situait dans le partie CSS alors qu’il fallait tout simplement le mettre dans la partie « head ».
Le plus gros problème a été de réussir à trouver des codes qui fonctionnaient correctement et qui n’étaient pas trop complexe ni trop simples.
Les différentes modifications apportées aux codes
Durant la création de la page nous avons très légèrement modifié certains codes. Il y avait des éléments qui paraissaient inutiles. Par exemple :
Le code qui donne l’adresse IP avait une autre partie de code qui permettait de se souvenir de l’adresse IP du précédent utilisateur du programme. Cela ne faisait que mettre la même adresse, ce qui paraissait un peut inutile, nous l’avons donc supprimé.
Nous avons aussi modifié la couleur et la forme du bouton qui permet de lancer le code qui donnait l’adresse IP.
Conclusion et code final
Voici donc ce compte rendu terminé j’espère que nous vous aurons aidé à comprendre les différentes lignes des codes que nous vous avons proposé.
Vous trouverez donc ci-joint le code final, entièrement complété qui vous permettra d’avoir la même page que la mienne.
Tutoriels
