NSI : à la découverte de la programmation Front End

Activité : Héros et vilains

On se propose de faire un site contenant une série de page web dédiées à des personnages de fiction. Ce site aura une présentation cohérente (toutes ses pages suivront la même charte graphique)

Phase 1 : le contenu structuré

La classe NSI sera répartie en deux équipes, super héros (protagoniste) et super vilains (antagonistes). Certains personnages moralement ambigus seront classables dans les deux catégories (Magneto (X-men), Catwoman (Batman), Severus Snape (Harry Potter), L (Death Note), Sasuke Uchiha (Naruto), Endeavor (My Hero Academia), l’équipe de « The boys », Dr House, Dexter,…) , à vous dans votre présentation de justifier leur appartenance à la catégorie dans laquelle vous avez choisi de les mettre.

Vous allez créer une page web contenant la fiche d’un personnage de livre ou de bande dessinée qui a connu au moins une adaptation sur le petit ou le grand écran.

La page sera structurée de la manière suivante :

La page commencera par un menu de liens internes permettant d’accéder à n’importe quelle partie de la page en cliquant sur un des items du menu. Le menu est une liste de liens. La page contiendra des photos toutes trouvées sur internet, et non chargée sur le site, pour les faire afficher sur votre page il vous faudra donc utiliser des liens pointant sur les pages où vous les avez trouvés.

A la suite du menu il y aura :

I Présentation synthétique

Photo à gauche et contre la photo, à la droite de celle-ci le nom, les alias, la taille, le poids et les éventuels pouvoirs (vous pourrez éventuellement utiliser un tableau aux lignes invisibles).

II Bref descriptif du personnage

avec son origine, ses buts, ses faiblesses, et l’histoire pour laquelle il est le plus connu. Vous indiquerez dans quel œuvre/maison d’édition/marque il est apparu.

III amis et ennemis

Comme le nom l’indique. Ça sera présenté sous la forme d’un tableau à deux colonnes, une pour ses alliés et une pour ses ennemis.

IV interprétations

Vous allez y mettre une petite galerie de photos d’interprétations diverses du personnage que ce soit par des acteurs, des dessins animés, du fan art, des illustrations officielles

V liens externes

Vous mettrez une liste de sources extérieures, comme une page wikipedia, un fan club, une page imdb.com , senscritique.com etc

Balises utilisées

Pour permettre d’avoir un chapitrage cohérent entre les différentes pages créées par les élèves de la classe, et faciliter la création du menu vous encapsulerez chaque partie de votre page par une balise de section avec comme attribut classe « partie » et comme attribut identité le numéro de la partie encapsulée

Par exemple toute la partie IV sera contenue dans un bloc <section id="4" class="partie" > … </section>

Chaque titre de partie sera proposé dans un bloc

<h2> … </h2>

Les liens vers des pages extérieures les ouvriront dans de nouveaux onglets. Pour cela, dans la balise <a> on rajoutera le paramètre target="_blank"



Rendu des élèves




 

Phase 2                charte graphique

 

A retenir :

Les détails de mise en forme peuvent être introduites de manière spécifique à l’intérieure de la balise contenant la zone sur laquelle vous voulez agir à l’aide de du paramètre style qui sera égal à une liste de binômes séparés par des points virgules chacun constitué du nom du paramètre et de sa valeur séparés par « : ».

Par exemple : style="text-align: center ; background-color: Red; color: Blue;" qui associé à un texte, le centrera et l’écrira en bleu sur un fond rouge.

 

Quand on veut appliquer une charte à un document voir à plusieurs on peut regrouper toutes les indications de mise en page dans un fichier externe : un fichier CSS (Cascading Style Sheets).

Dans la page html, dans le bloc <head> … </head> on indiquera un lien vers ce fichier pour que le navigateur puisse l’utiliser, par exemple on écrira : <link rel="stylesheet" href="fichestyle.css">

Les informations de mise en page seront associées à un style de balise, à une classe, ou à une identité comme dans les exemples suivants :

 

 

 

Vous remarquerez que pour le choix des couleurs au lieu de les nommer on a donné leur code hexadécimal #E4EFFF veut dire : Intensité de rouge : E4=14x16+4=228, intensité de vert EF=14x16+15=239 et intensité de bleu : 15x16+15=255              

Pour visualiser les codes et leurs couleurs associées : https://www.hexcolortool.com/

 

L’exercice :

C’est une compétition, avec deux gagnants, la meilleure charte des héros « hero.css » et la meilleure charte des vilains « vilains.css ». On veut faire une présentation agréable à l’œil, lisible et en rapport avec le thème (du sombre et sinistre pour les vilains, du lumineux/ joyeux/patriotique pour les héros)        

Avant de commencer à faire de la mise en page, on va consolider et préciser le code HTML de la page que nous venons de créer. Regardez un peu les sites que vous appréciez pour voir comment ils sont présentés :couleurs, organisation dans l’espace du texte et des éléments les uns par rapport aux autres, cadre, polices, tailles de caractères.

Vous pouvez faire quelque chose de basique pour avoir la moyenne ou pour viser les notes les plus hautes aller aussi loin que vous voulez, en introduisant des images de fond, des animations, des menus déroulants. Seule contrainte : pas de JavaScript pour l’instant, votre feuille sera 100% en CSS.  

Si vous ne savez pas comment faire un effet, vous pouvez chercher sur internet des tutos et des articles détaillant les astuces et méthodes.

 

 



Formulaires

 

Dans la première activité nous avons travaillé avec des pages statiques dont la seule interactivité se limite à des liens internes et externes. La plupart des sites trouvables sur la toile bénéficient d’une interactivité plus avancée. Interagir ça veut dire que le client autrement dit l’ordinateur de l’utilisateur va récupérer de l’information offerte par ce dernier la transmettre via un protocole http au serveur (un ordinateur distant) qui va la traiter et qui en retour offrira une réponse adaptée qui sera traduite par le navigateur de l’utilisateur.

 

La partie serveur sera couverte l’année prochaine lorsqu’on verra comment les programmer avec un dérivé de Python : Lamp ou un dérivé du JavaScript, qui permettrons de travailler les bases de données les bases de données présentes sur le serveur avec un langage MySQL. Pour l’instant on va rester côté Client.

 

Il a deux manières de récupérer des informations proposées dans un formulaire. 

La méthode GET qui va récupérer les données et les passer en argument dans la barre d’adresse.

 

    <form method="GET" action="www.adressebidon.com">

       Nom :   <input name="Nom" type="text">

       Prénom :<input name="Prenom" type="text">

              <input type="submit" value="Envoyer">

     </form>

 

Si je rentre mon nom et mon prénom dans le formulaire et que j’appuie sur le bouton, on part de la page pour aller ici : www.adressebidon.com?Nom=Kergot&Prenom=Julien 

Heureusement que le formulaire ne m’a pas demandé mon mot de passe !!

La méthode POST permet de récupérer les informations et de les transmettre de manière invisible pour un utilisateur extérieur et même un pirate (de bas étage), toute fois visible dans la console développeur dans l’onglet réseau.

Le problème c’est qu’avec l’absence de serveur pour héberger nos pages web, et notre niveau de maitrise la méthode POST est un véritable casse-tête à mettre en place comme le PHP, donc on attendra d’arriver en terminale pour utiliser ces possibilités.

 

Remarque : 

si on n’indique pas d’action, la page se relance avec dans la barre d’adresse un ? qui va s’afficher suivi de tous les paramètres du formulaire activé et des valeurs proposées par l’utilisateur. 

En dehors des zones textes, un formulaire peut contenir des cases à cocher, des boutons radios, des champs de texte, des champs occultés (mot de passe)…

la liste est longue cf : https://www.javatpoint.com/html-form-input-types  

 

pour revenir sur l’exemple : 

Tous les boutons associés aux réponses d’une question donnée doivent avoir le même nom (ici couleur). L’attribut « checked » permet d’avoir déjà un des choix cochés. Si je coche vert, et que j’appuie sur le bouton « envoyer » je vais voir apparaitre à la suite de ma barre d’adresse : ?couleur=green

            fieldset permet de faire un joli cadre autour du formulaire, la légende sera placée au-dessus du cadre. 

 

Exercices :

On va créer un certain nombre de pages html incomplètes, elles vont contenir des formulaires, et elles vont récupérer des données avec la méthode GET mais elles n’auront pas la possibilité de traiter les données recueillies. Ces programmes seront complétés lors du prochain chapitre dédié aux bases de JavaScript.

Une attention toute particulière sera attendue à la présentation (CSS)

  1. Faire une page d’identification (qui pourrait servir pour rentrer dans la parte individualisée d’un site. Elle demandera un alias, une adresse et un mot de passe.

 

  1. Faire une page de création de profil : nom, prénom, sexe, adresse mail, deux champs de mot de passe occultés qui permettent de vérifier que l’utilisateur a bien écrit deux fois la même chose et un bouton d’envoi.

 

 

  1. Un simulateur de couleur : elle demandera l’intensité du rouge, du vert et de bleu (il faudra préciser que ce sont des valeurs entre 0 et 255) et affichera un bouton d’envoi.

 

  1. Une page création personnage pour un jeu de rôle , elle demandera à l’aide de boutons radio le sexe du personnage, sa race (elf, orque, humains, …), type de profil (guerrier, mage, voleur, soignant, …) , à l’aide d’un champ texte son nom, à l’aide de cases à cocher, les langues parlées et pour finir deux boutons : un pour envoyer et un autre pour réinitialiser les valeurs des différents champs (faites une recherche sur input et reset en html)

 

  1. une page nommée Météo Gadget, qui affichera une mosaïque de quatre images représentant 4 saisons dans quatre continents. Puis présentant deux formulaires : 
    1. Premier pour convertir des températures : dans un tableau deux colonnes, cinq lignes, on aura : première ligne deux cases fusionnées contenant un champ texte pour récupérer la valeur numérique de la température à convertir, ligne deux « unité départ » « unité arrivée » et pour le reste du tableau les deux colonnes sont identiques et contiennent sur leur trois lignes les trois unité de température :°C , °K et °F. Sous ce tableau il y aura un bouton d’envoi
    2. Premier pour avoir les prévisions météos d’un endroit : il y aura un formulaire contenant deux champs textes demandant les latitudes et longitudes décimales 

 



 

Résumé de cours sur le JavaScript (+Bonus Python 3)

Premiers pas 

Pour exécuter du code en JavaScript, on peut dans le cas d’une commande isolée utiliser la console du dev tool kit de Chrome (F12 puis onglet « console »)

La plus part du temps on voudra exécuter un programme et dans ce cas-là on sera obligé de passer par un fichier intermédiaire en HTML

page.html                                                          hello.js

<html>                                                                document.write("coucou les geeks!") ;

    <body>

        <script  src="hello.js"></script>       ou 

    </body>

</html>                                                              alert("coucou les geeks!") ;

 

Ici write est une méthode qui agit sur l’objet « document » autrement dit la page qui est affichée dans la fenêtre chrome exécutant le fichier page.html

En JavaScript chaque commande se termine par un point-virgule.

 

Python : là c’est bien plus simple le programme sera : print("coucou les geeks!")

 

Commenter un programme

Très rapidement les programmes deviennent conséquents et il devient impératif de les commenter. Ça permet d’expliquer vos intention et votre logique à la personne qui va lire votre code :un camarde, le prof, ou tout simplement vous-même dans une semaine, alors que vous aurez oublié le contexte et votre raisonnement.

Pour que l’interpréteur ne mélange pas votre code et vos commentaires on utilisera les notations suivantes.

HTML : < !--commentaire -->                                                                     /* commentaire 1

JavaScript : // commentaire        ou s’il y en a plusieurs lignes :    commentaire 2

Python : # commentaire                                                                              commentaire 3 */

 

Variables

Elles sont les noms d’espaces mémoires dans lesquels on stockera de l’information.

Quand on fera une première assignation en JavaScript on écrira var devant le nom de la variable, par exemple :                 var nombre = 5

Si on veut changer la valeur de la variable nombre on écrira par ex : nombre = 17

En python pas besoin de « var »   

Les variables peuvent être de plusieurs types : entier, réels, listes, chaines de caractère. Ça a une influence sur la mémoire prise par la variable et la manière dont les opérations vont agir. Par exemple :

Si on écrit a= 5 et b = 7                 alors quand on écrit c=a+b,        c vaudra 12

Si on écrit a= "5" et b="7"            alors quand on écrit c=a+b,        c vaudra "57"

+ est l’addition pour les nombres, mais pour les chaines de caractère ce symbole fait référence à la concaténation.                        parseInt("5") donnera 5

On pourra convertir d’un genre à l’autre              parseFloat("5") donnera 5.0

réciproquement si  alors :                                           a.toString() donnera "5"

 

Quelques opérations :

 

 

Listes

Une liste peut contenir des éléments hétéroclites liste1=[« truc »,5,[7,9],3.1,-1]

liste1[0] correspond à « truc », liste1[2] correspond à la liste [7,9]

liste1[2][1] correspond à 9          liste1[1 :3] donne une sous liste allant des elts 1 à

 

Chaines de caractère

Elle peut être considérée comme une liste de lettres.

Quand on veut créer des pages web on peut être amené à utiliser toute sorte de caractères spéciaux et d’effets de mise en page. Une partie sera gérée par les balises html comme <br/> (retour à la ligne) (qui correspond à \n  en python) mais on doit être à même d’écrire et de récupérer toute sorte de chaines de caractères sans provoquer de plantage.                    \\ donne :  \       \’ donne : ‘         

 

Python n’apprécie généralement pas les caractères accentués et a tendance à les modifier à moins qu’on n’écrive en début de programme :  #- *- coding: utf-8 -*-

Booléens

On utilisera souvent des comparaisons, deux résultats seront possibles true(5>4)  et false (x==3).                            Attention double égal pour parler d’une égalité de sens, triple égal pour une égalité exacte et un seul égal pour une assignation.

 

 

Conditions

Exemple :              JavaScript                                                                             Python

x = 5;                                                                                     x = 5

if (x <5 &&x>3))    {                                                             if x<5 and x>3 :

document.write("3<x<5") ; }                                                            print("3<x<5")

else {                                                                                     else :

document.write("x>=5 ou x<=3") }                                                 print("x>=5 ou x<=3")

En JavaScript les blocs sont délimités à l’aide d’accolades en Python ils sont repérés grâce à l’indentation.

 

Boucles

Pour répéter une série d’action tant qu’une condition est réalisée on utilise while

Exemple :              JavaScript                                                                             Python

…                                                                                           …

while (c < 10){                                                                     while (c < 10)

document.write("valeur de c"+ c + "<br />");                               print(« valeur de c »,c)

c++;}                                                                                                     c+=1

Ce petit programme affiche toutes les valeurs de c à partir de sa valeur initiale jusqu’à 9

Comme on ne connait pas la valeur initiale de c(définie dans une partie non écrite du programme) on ne peut prévoir le nombre de fois où la boucle va tourner.

On a un peu plus de maitrise avec les boucles for

Exemple :              JavaScript                                                                             Python

var somme =0 ;                                                                  somme=0

for(var i =1 ; i<50 ;i++) {                                                    for(i in range(1,50) :

somme += i*i;}                                                                                   somme+=i*i

document.write("la somme vaut"+ somme);                print(« la somme vaut »,i)

i prend la valeur 1 , puis augmente de 1, encore et encore jusqu’à valoir 49.

 

On peut se servir de boucles pour parcourir des listes :

JavaScript                                                                             Python

var cars = ["BMW", "Volvo", "Saab"];                             cars = ["BMW", "Volvo", "Saab"]

var i = 0;  var text = "";                                                      text = “”

for (;cars[i];) {                                                                      for (voiture in cars) :

text += cars[i] + "<br>";         i++; }                                                 text += voiture + “\n”

document.write(text)                                                          print(text)

 

Fonctions

Quand certaines actions sont utilisées de manière récurrente dans le code, plutôt que de recopier autant de fois les blocs d’instructions correspondants on utilisera des fonctions.

Exemple :              JavaScript                                                                             Python

function toCelsius(fahrenheit) {                                       def toCelsius(fahrenheit) :

var tempC = (5/9) * (fahrenheit-32);                                              tempC=(5/9)*(fahrenheit-32)

return tempC;}                                                                                   return tempC

 

var C=toCelsius(77)                                                            C=toCelsius(77)

document.write(" 77°F correspond à  "+C+" C ")        print(" 77°F correspond à  ",C, " °C ")

 

Si on tape tempC après l’exécution de la fonction on aura un message d’erreur, cette variable n’existe que lors de l’exécution après elle est détruite (ce qui libère de la mémoire) c’est une variable locale certaines fonctions ne génèrent pas de résultat, certaines n’utilisent pas de paramètres.

 

Exemple :              JavaScript                                                                             Python

var nombre=17 ;                                                                nombre=17

function quadruple() {                                                       def quadruple() :

nombre*=4 ;}                                                                                      nombre*=4

quadruple() ;                                                                       quadruple()

ici nombre est une variable globale, elle est utilisée par la fonction quadruple() qui n’a pas d’argument ni de sortie mais elle existe en dehors de cette fonction.

 



Chapitre 6 : JavaScript (approche graphique)

 

base de javascript 

quelques exemples pour démarrer : présenté au tableau , avec des formulaires et un template   

devoir maison pour le 18 octobre 2019 

liste des exposés(phase 1 : faire la recherche et présenter l'ensemble dans un fichier word ou open office avec un répéretoire dédié aux pièces annexes. Phase 2 : avec sublime text créer une page web présentant votre exposé) n

cours et documents sur le DOM   ici 



https://wordtohtml.net/ truc