Cahier des charges HTML/CSS/Javascript/jQuery

Etapes à réaliser pour une prise en main HTML, CSS, Javascript, jQuery

, par clem

HTML :

  • Créer une page "Typo" qui regroupe les différents types de balises de base :
    • niveaux de titres
    • texte et mise en forme
    • listes
    • tableaux
    • liens
  • Créer une page "Accueil (Home)" : avec 1 bloc principal et 2 blocs secondaires
  • Créer une page "Contenus" : modèle pour l’affichage des "articles", avec un bloc latéral "Table des matières"
  • Créer une page "Médias" : avec affichage en blocs "vignettes" pour photos/vidéos
  • Créer une page "Données" : avec affichage d’un (gros) tableau de données en lignes
  • Créer une page "Inscription" : avec un formulaire demandant des informations de tout type et envoyé par mail
  • Créer une page "Whaou !" : avec un bloc unique centré et une image en background "étiré"
  • Créer un "Header" (barre de navigation) et un "Footer" (mentions légales, plan compact...) sur la page "Typo", l’intégrer dans toutes les pages

CSS :

  • Styler la page "Typo" en ciblant les balises, passer ces styles sur toutes les pages
  • Créer 2 ou 3 layouts pour la page "Sommaire" sur la base d’un HTML commun : disposition fixe/fluide
    • pour les layout de la page "Sommaire" positionner les blocs pour 3 largeurs d’écran (ordi / tablette / smartphone)
    • choisir un layout et le passer sur toutes les pages
  • Créer un affichage en liste pour la page "Médias" (sans toucher au HTML)
  • Récupérer deux polices sur un site de polices libres et les intégrer dans toutes les pages

Bootstrap :

  • Créer une page "Accueil" alternative en Bootstrap 4 avec les caractéristiques suivantes :
    • barre de navigation au sommet de la page (sans être "fixed"), faisant toute la largeur (= fluide), qui se compacte pour donner un "hamburger" dépliable au clic en vue téléphone
    • 1 bloc principal et 1 bloc secondaire, rapport de largeur 2/3 1/3, qui se superposent en vue téléphone (dans l’ordre : principal > secondaire)
    • titre de la page + slogan en "jumbotron" (= gros bloc) centré
    • trouver les modifications permettant d’avoir un layout fluide pour l’ensemble de la page
    • dans la barre de navigation, ajouter un sous menu dépliable
    • faire un menu en accordéon dans le bloc secondaire
    • dans le jumbotron ajouter un bouton qui lance une "modal box" (= boite popin) qui affiche un formulaire d’inscription à la newsletter. Sur le bouton, ajouter un "tooltip" (= bulle d’aide) qui incite à ouvrir la modale et s’incrire
  • Sur ce modèle créer une page alternative pour la page "Médias" avec :
    • 6 blocs utilisant les "Cards" chacun ayant un bandeau de titre et un lien en bouton. Leur disposition sera "harmonieuse" sur la largeur
    • sous le titre de page un slider (= carrousel) de 3 images avec titre et descriptif + indicateur de position
  • Sur ce modèle créer une page alternative pour la page "Données" avec :
    • l’en-tête du tableau en blanc sur fond noir
    • les lignes paires et impaires alternativement grisées/blanches

Javascript / jQuery :

  • Créer une bascule d’affichage entre liste/vignette pour la page "Médias"
  • Faire défiler l’image background de la page "Whaou" pour faire un effet de slider
  • Gérer le "retour" de la page "Inscription" en interceptant la validation : afficher la synthèse des infos et créer des interactions différentes en fonction des réponses
  • Générer la table des matières automatiquement (y compris les ancres) dans la page "Contenus"
  • Créer un script qui importe en ajax "Header" et "Footer" dans n’importe quelle page
  • Créer un formulaire qui permet de saisir une liste de termes, à la validation le traiter pour :
    • générer un Json utilisable dans auto-complete
    • l’enregistrer en "local storage" (en remplaçant l’existant si besoin)
    • édition de l’existant : si il existe déja une liste stockée, au chargement du formulaire la récupérer pour l’intégrer dans le champ de saisie
  • Créer un calculateur de droits des fichiers Unix/Linux : explications et cahier des charges

jQuery UI et autres plugins / widgets

Utiliser les jQuery UI et widgets pour réaliser les éléments suivants :

  • page "Inscription" :
    • ajouter 4 blocs ayant chacun un mot à l’intérieur + 1 cadre vide (plus grand que les blocs). Créer le javascript permettant de :
      • faire un drag’n drop d’un bloc-mot dans le cadre vide
      • récupérer le mot du bloc choisi et le stocker dans un champ "hidden" du formulaire
      • ajouter un bouton pour vider le cadre
      • si le cadre contient déja un bloc-mot le supprimer lorsqu’un nouveau bloc est glissé dedans
    • ajouter un sélecteur de couleur et un sélecteur de date
    • ajouter une auto-complétion dans un champ texte à partir d’une liste pré-établie de mots
  • page "Contenus" :
    • découper la page "Contenus" en onglets correspondant aux différentes parties
    • passer la table des matières en menu accordéon
  • page "Données" :
  • Intégrer le plugin DataTable dans la page "Données"