13 Jan2016

EFM - Programmation web coté client - 2014-2015

SAOUD |  Examens TDI | Programmation web coté client | 2014-2015 |  48316 visites |  Corrigé

I)Partie Théorique (20pts)

A) HTML5 (7pts)

  1. Comment peut-on définir un encodage UTF-8 dans un document html.
  2. Etant donné la liste de définition suivante : 
    <dl>

  <dt>Germinal</dt>

  <dd>Livre écrit par Emile Zola</dd>

  <dt>Du contrat social</dt>

  <dd>Écrit par Jean-Jacques </dd>

</dl>

     Donner le rendu correspondant .

  3. Compléter par la balise la plus pertinente : 
    <p>Participez à l’événement ce soir à partir de <.............>20:00</............>.</p>

  4. A quoi servent les balises sémantiques (header , nav , section, article ,aside  ,footer..)?

    Compléter le code en bas par les balises sémantiques appropriées:

    <........>

<ul>

<li>lien1</li>

<li>lien2</li>

</ul>

</.........>

<article>
                <............>
                     <h2>Java</h2>
                      <p>Langage plus récent, créé en </p>
                </...........>
<p> Java est un langage créé par Sun Microsystems </p>
</article>

  5. Soit le code html :

    <p contenteditable="true" spellcheck="true">This is a paragraph.</p>

<input type="text" spellcheck="true">

     Quels sont les rôles des attributs : "contenteditable" et "spellcheck"

  6. Rédiger en html les éléments du formulaire suivant :

    formulaire-html5

  7. En utilisant l'attribut "pattern"  créer un Input qui accepte seulement les valeurs composées de 4 alphabets suivis de 2 nombres (ex : ATRF24).

 B) CSS3 (5pts)

  1. Compléter le code css en précisant la propriété css qui permet de cacher le contenu qui dépasse un élément (voir exemple ) . 
    div {

    background-color: #00FF00;

    width: 100px;débordement-de-texte

    height: 100px;

    ....................: ........................;

}

  2. Comment on peut afficher un paragraphe en 3 colonnes : p{................................. : ....... ;}

  3. Préciser le style qui permet de faire une rotation à un élément de la manière suivante : rotation

    div
    {
    .......................: ..................(30......);

    }

  4. Déterminer parmi les propositions la cible du sélecteur suivant : 
    h1[class~=title] + p:first-letter

{color: #c00;}

     

    a)Les titres h1 et de la première lettre des paragraphes .

    b)  la première lettre des paragraphes qui suivent immédiatement un titre h1 qui possède la classe "title" .

    c) La première lettre des paragraphes et de la première lettre des titres h1 qui possède la classe "title" .

  5. Préciser les valeurs de la propriété "float" pour chaque bloc afin d'obtenir le rendu suivant:
    exemple-float
  6. Même question mais cette fois ci avec la propriété "display".positionnement-display

C) Javascript et Jquery (8pts)

  1. Quel est le résultat su script suivant : 
    var number1 = "2", number2 = "3", resultat;

resultat = number1 + number2;

alert(resultat);

    o   -1

    o   5

    o   23

    o   erreur

  2. Rédiger le script qui permet de changer l'image <img src="/first.jpg" id="im1" /> par "second.jpg".
    En javascript ..........................................................................................
    En Jquery ...............................................................................................

  3. Soit A et B deux objets , compléter le script qui permet d'indiquer que B hérite de

    var A = function(){       this.name="Romain";       };    

 A.prototype.sayHello = function(){return "Hello "+this.name;       };  

var B = function(){  this.age=25;       };

B.prototype = ..................;  
B.prototype.constructor = ......;
  4. Rédigez les scripts jquery appropriés à chaque cas des  situations suivantes :

    a. Augmenter la taille du premier titre h1 dans le document .

    b. Souligner la première li de chaque ul .

    c. Cacher tous les éléments vides .

    d. Ajouter les valeurs d’un tableau T comme des options d’une balise  "select" identifié par  "S1" .

  5.  Créer "accordion" en précisant le document html et le script en JqueryUI convenables .

II)Partie Pratique (40pts)

  1. Créer le document illustré par  la  figure en bas qui se compose des éléments suivants :

    • Un menu avec l’effet marqué sur l’item « About us » au survol de la souris . (2pts)
    • Prenez trois photos et réaliser le slideshow en utilisant des animations (4pts)
    • Ajouter 4 articles et utiliser un script jquery pour ajouter  l’effet survol  sur un article (voir image en bas) .  (4pts)
    • Utiliser les balises de structure sémantiques (1 pts)
      maquette
      maquette
  2. Le clic sur le lien contact amène au formulaire « Contact » ci-dessous (6 pts). Cette page doit être  affiché dans un dialog (Jquery UI)  avec un effet overlay.
    formulaire-contact
    formulaire-contact
  3. Rendez votre page "responsive" en utilisant les média queries (3pts)
    • Afficher le menu en bloc
    • Cacher le slideshow
    • Afficher les articles en bloc

I)Partie Théorique (20pts)

A) HTML5 (7pts)

  1. La déclaration de l'encodage UTF-8 dans un document html5  : 
    <meta charset="UTF-8">

     et en xhtml ressemble à :

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  2.  Le rendu de la liste de définition :

    Germinal
               Livre écrit par Emile Zola
    Du contrat social
               Écrit par Jean-Jacques

  3. Ici la balise la plus pertinente à utiliser est la balise sémantique "time" : 
    <p>Participez à l’événement ce soir à partir de <time>20:00</time>.</p>
  4. Les balises  (header nav section...) permettent de bien structurer un document html en portions significatifs et renforce leurs sémantisme.
    Dans cet exemple on va utiliser la balise "nav"  pour regrouper les liens de navigation et la balise header comme introduction de l' article. 
    <nav>

<ul>

<li>lien1</li>

<li>lien2</li>

</ul>

</nav>

<article>
                <header>
                     <h2>Java</h2>
                      <p>Langage plus récent, créé en </p>
                </header>
<p> Java est un langage créé par Sun Microsystems </p>
</article>
  5. l'attribut  "contenteditable" : indique si l'élément peut être édité par l'utilisateur.

    l'attribut "spellcheck" : définit si le contenu de l'élément doit être vérifié en termes d'orthographe.

  6. Le  formulaire se compose d'un input de type "time" et un autre de type "range". 
    <form>
    <p><label>Select a time</label> <input type="time" name="time" /></p>
    <p><label>Points</label><input type="range" name="point"/></p>
</form>
  7. On peut spécifier une expression régulière pour le champs comme suit : 
    <input type="text" pattern="[A-Za-z]{4}[0-9]{2}">

  B) CSS3 (5pts)

  1. La propriété css qui permet de cacher le débordement de texte est : overflow :hidden; 
  2. On peut utiliser la propriété  "column" pour afficher un paragraphe sur 3 colonne comme suit :  
    p{
          -webkit-columns:3; /* Chrome, Safari, Opera */
          -moz-columns:3; /* Firefox */
          columns:3;
     }

     

  3. Pour appliquer une rotation à l’élément div on utilise la propriété "transform" : 
    transform:rotate(30deg);
  4. Réponse b :Le sélecteur  
    h1[class~=title] + p:first-letter

    cible la première lettre des paragraphes qui suivent immédiatement un titre "h1" ayant  la classe "title" .

  5. Le style  approprié en utilisant la propriété "float" : (ici on se contente de rédiger les propriétés de positionnement) 
    .bloc2{
float:right;
}
.bloc3{
clear:both;
}
  6. Dans cet exemple les blocs sont alignés en haut donc on va leurs appliquer le style suivant : 
    .bloc{
    display: inline-block;
    vertical-align: top;
    width: 200px;
}

C) Javascript et Jquery (8pts)

  1. Le script affichera : 23 puisque les deux valeurs sont de type chaîne de caractère , l'opérateur "+" ici concatène les deux chaines.
  2. On peux changer une image dynamiquement avec les script suivants :  
    //en javascript
document.getElementById("im1").src="second.jpg";
//en jquery
$("#im1").attr("src","second.jpg");
  3. on applique l’héritage en javasript de cette façon : 
    var A = function(){       this.name="Romain";       };    

 A.prototype.sayHello = function(){return "Hello "+this.name;       };  

var B = function(){  this.age=25;       };

B.prototype = new A();  
B.prototype.constructor = B;
  4. les scripts jquery :

    a. Augmenter la taille du premier titre h1 dans le document .

    $("h1:first").css("font-size","2em");

    b. Souligner la première li de chaque ul .

    $("ul li:first-child").css("text-decoration","underline");

    c. Cacher tous les éléments vides .

    $(":empty").hide();

    d. Ajouter les valeurs d’un tableau T dans les options d’une balise  "select" identifié par  "S1" .

    $.each( T, function( key, value ) {
    $("S1").append("<option>"+value+"</option>");
});
  5. Premièrement on doit construire un document html qui respecte la structure d'un "accordion": 
    <div id="accordion">
<h3>Section 1</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
<h3>Section 2</h3>
<div>Phasellus mattis tincidunt nibh.</div>
<h3>Section 3</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>

     il ne reste qu'appeler  le plugin jqueryUi "accordion" par l'instruction :{adselite}

    $( "#accordion" ).accordion();

       

II)Partie Pratique 

  1. On commence à construire le document html suivant : 
    <!doctype html>
<html>
<head>
	<title>EFM 2015</title>
	<meta charset="utf-8">
</head>
<body>
	<div class="content">
	<header>
		    <div class="logo">
				<img src="/images/logo.png">
			</div>
			<nav class="nav">
				<ul class="nav-list">
					<li><a href="#">About us</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Publication</a></li>
					<li><a href="#" id="btn-overlay">Contact</a></li>
				</ul>
			</nav>
			<div class="clear"></div>
	</header>
	<div class="slidshow" id="slidshow">
		        <div class="slide" id="slide-1">
		        	<h2>Contribuez à la protection de votre environnement</h2></div>
				<div class="slide" id="slide-2">
					<h2>Projet en faveur de l'environnement</h2>
				</div>
				<div class="slide" id="slide-3">
					<h2>Conférences sur les risques </h2>
				</div>
				
				
			    <div class="list-btn">
					
						<a id="list-btn-1" href="#slide-1"></a>
						<a id="list-btn-2" href="#slide-2"></a>
						<a id="list-btn-3" href="#slide-3" name="slide"></a>
					
				</div>
				
	</div>
	<section>
		<article class="article">
			<h3 class="article-title"> Vocabulaire officiel de l'environnement</h3>
			<div class="article-content">
				<img src="/images/content/cnt-2.jpg" />
			</div>
			<div class="article-footer">
				<span class="article-date">21 janvier 2015</span>
				<span class="article-category">Rapport</span>
			</div>
		</article>
		<article class="article">
			<h3 class="article-title">Conférence internationnale </h3>
			<div class="article-content">
				<img src="/images/content/cnt-1.jpg" />
			</div>
			<div class="article-footer">
				<span class="article-date">10 janvier 2015</span>
				<span class="article-category">Actualités</span>
			</div>
		</article>
	
		
	</section>
  </div>
</body>
</html>

     et on applique les styles pas à pas :

    •  Le conteneur global va prendre 80% de largeur et un "margin: auto" pour le  centrer.
    • Le logo flotte à gauche quant au menu flotte à droite.
    • le "div .clear" pour annuler le flottement.
    .content{
		
		width: 80%;
		margin: 0 auto;
	}
	.logo{
		float: left;
	}
    .nav{
    	
    	float: right;
    	
    }
    .clear{
    	clear: both;
    }

     Pour le menu : on va utiliser la propriété "display:inline-block;" pour  afficher les items en ligne.

      .nav-list{
      list-style-type:none;
    }
    .nav-list>li{
      display: inline-block;
      margin: 5px;

    }
    .nav-list>li>a{
      display: inline-block;
      text-decoration: none;
      color:rgba(0,0,0,0.5);
      padding: 10px;
      line-height: 2em;
      font-size: 1.5em;
    }
    .nav-list>li>a:hover{
      border-bottom: 2px #37A10C solid;
      color:#37A10C;
    }

     On positionne les slides par rapport à leurs conteneur "slidshow" en utilisant la propriété "position"  et on va jouer sur l'opacité pour  les afficher  en animation :

     .slidshow{
    	position: relative;
    	height: 300px;
    	padding-top: 20px;

    }
    .slide{
    	position: absolute;
    	top:0;
    	left:0;
    	width: 100%;
    	height: 100%;
    	text-align: center;
    	opacity: 0;
    	transition: all ease 2s;

    }
   #slide-1{
   	background:url('images/slider/slider-1.jpg'); 
    opacity: 1;
   }
   #list-btn-1{
   	background: green;
   }
   #slide-2{
    	background: url('images/slider/slider-2.jpg');
   }
   #slide-3{
    	background: url('images/slider/slider-3.jpg');	
    }
    .slide h2{
    	margin-top: 30px;
        color: #fff;
    }
    
    .list-btn{
    	width: 150px;
	    margin: 20px auto;
	    position: absolute;
	    bottom: 10px;
	    left: 45%;
    }
    .list-btn a{
       display: inline-block;
       border-radius: 100%;
       border: 5px solid #fff;
       background:#fff;
       width: 15px;
       height: 15px;
       margin:5px;
    }

     on intègre  la bibliothèque jquery à notre script  afin de l'utiliser pour animer les slides.

    Le clic sur un lien ".list-btn a" affiche le "slide" qui lui correspond. Et avec la fonction "setInterval" on fait appel à l'action clics des 3 liens d'une façon successive .

    <script type="text/javascript" src="/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="/jquery-ui/jquery-ui.min.js"></script>
  <script type="text/javascript">
   $(".list-btn a").click(function(){
     var j= $(this).attr("href");
   	 $(".slide").css("opacity",0);
   	 $(".list-btn a").css("background","white");
   	 $(j).css("opacity",1);
   	 $(this).css("background","green");

   });
   var i=1
   setInterval(function(){
   	i=i%4;
   	$("#list-btn-"+i).trigger("click");
   	i++;
   },3000);

     Enfin le style des articles :

    section{
   	text-align: center;
   }
   .article{
   	display: inline-block;
   	width: 450px;
   	margin: 10px;
   	padding: 10px;
   	vertical-align: top;
   }
   .article-title{
   	float: left;
   }
   .article-content img{
   	width: 100%;
   	height: 250px;
   }
   .article-footer{
   	color:grey;
   	margin-bottom: 30px;
   }
   .article-date{
   	float: left;
   }
   .article-category{
   	float: right;
   }

     et le code jquery qui ajoute l'effet d'ombre au survol de la souris  :

    $(".article").hover(
   	function(){
   	$(this).css({
			boxShadow: '0px 0px 10px #333'
			
		});
	}, 
	function() {
		$(this).css({
			boxShadow: 'none'
			
		});
   });
  2. Dans cette partie on va utiliser le plugin "dialog" et l'effet overlay de la bibliothèque jqueryUi :  D'abord on rajoute le formulaire  avec un "display:none" après le conteneur ".content" . 
      <!--page contct-->
<div style="display: none;">
	
  <form id="form" action="">
  	<h3>Contact</h3>
    <input type="text" name="" id="" placeholder="Nom"><br>
    <input type="email" name="" id="" placeholder="Email"><br>
	<textarea name=""placeholder="Message"></textarea>
    <input type="submit" name="" value="Envoyer">
  </form>
</div>

    sans oublier  un peu de style :

    #form input, #form textarea{
	border-radius: 8px;
	padding: 3px;
	margin: 10px;
	color: #666;

}

     Enfin le code jquery qui affiche le formulaire au clic sur le lien "Contact" avec l'effet overlay .

    $('#btn-overlay').click(function(event) {

		var overlay = $('<div class="ui-overlay "><div class="ui-widget-overlay"></div></div>').hide().appendTo('body').fadeIn('slow');
		var cnt = $('<div></div>');
		$('#form').appendTo(cnt);


		cnt.dialog({
			close: function() {
				overlay.hide();
			}
		});


	});

     

  3. Pour rendre notre page un peu adaptative "responsive" on se sert des média queries comme suit : 
    @media (max-width: 600px) {
	.nav-list li{
		width: 90%;
		text-align: center;
		 
	}
	
	.nav{
		float:none;
	}
	

	.logo{
		float: none;
      
	} 
	.slidshow{
		display: none;
	}

	.content{
		width: 100%;
	}
	.article{
		width: 90%;
		
	}

	
	.nav-list li a:hover{
		background-color: #ddd;
		text-decoration: none;
		color: #37A10C;
		font-weight: bold;
		border-bottom: none;
		width: 100%;

	}
	
	
}

     

  • Evaluez cet article :
    Note moyenne
    6 votes
  • Tags : css | Examen | html | javascript | jquery
  • Ajoutez aux favoris :
    Ajouter à vos favoris
    Cliquez pour ajouter cet article à vos favoris
  • Dernière modification :
    12-02-16 20:09

Nouveaux Exercices

Exercices populaires

Nouveaux Examens

Examens populaires