Avec Bootstrap, il est facile de rendre certains élements responsives.
Il est important de bien réfléchir à comment les éléments font s'afficher selon les différentes tailles d'écran et d'adapter cet affichage à chaque fois en fonction du contexte.
Certains éléments moins importants peuvent disparaitre, avec certains affichages trog large, il est nécessaire d'ajouter des "offset"...
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
class='col-lg- col-md- col-sm- col-xs-'
En vous inspirant de la fonction suivante, créer votre propre fonction d'animation lors du lancement de la page; l'animation doit être pensée et adpatée pour mettre au mieux votre contenu en avant .
function anime()
{
var _nb= $("#billets").children().length;
$(".billet").css("display","none");
for (var i=0; i <_nb+1 ; i++)
{
$(".billet:nth-child("+i+")").delay(i*500).fadeIn(1000);
}
}
Ici vous pourrez écrire la première partie de la description de votre projet.
Ici la seconde partie. Avec plus de détail.
Ici la troisième. Toujours de nouveaux détails, etc..
Retour à l'accueil
En cliquant sur le projet sélectionné par l'étuditant pour être mis en avant, l'utilisateur voit une nouvelle page apparaitre avec un effet de son choix (slideDown dans notre exemple).
Il faut créer une première fonction pour faire apparaitre la page et une autre pour retourner à l'accueil en s'inspirant de celles proposées ci-dessous et qui sont données en exemple précédemment.
function monProjet()
{
$("#grille .billet").css("display","none");
//$("#projet").fadeIn();
$("#projet").slideDown(1000);
}
function grilleDisplay(){
$("#projet").css("display","none");
$("#grille .billet").css("display","none");
$("#grille .billet").fadeIn();
}
L'étudiant choisit un projet qu'il veut particulièrement mettre en avant.
Ce projet est présenté par le biais d'un démonstrateur. Le démonstrateur doit être finalisé, c'est à dire sans bug et montrant les potentiels du projet.
Commencer à proposer une description commentée du projet pour la fiche projet qui accompagnera le prototype.
Résumer votre projet. Penser à une présentation avec une mise en page dynamique et claire pensée pour la lecture sur écran. Soigner le style, l'orthographe...
Cette dernière partie "aller plus loin" sera vue plus en détail lors des deux séances suivantes.
Seuls les étudiants ayant déjà réalisés les étapes précédentes peuvent s'y atteler.