Aller au contenu. | Aller à la navigation

Outils personnels

Navigation

tst2corrSpe

HTML icon tst2spe.html — HTML, 12 ko (12688 bytes)

Contenu du fichier

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="Bertrand Emery" /> <!-- on ajoute son nom dans le fichier - Cours 1,2 -->
		<title>Epreuve du second semestre</title>
		<style>
		* {
	margin:0; 
	padding:0;
} /* on remet à 0 les préférences du navigateur, comme indiqué dans le cours 9 -- ceci n'est pas forcément obligatoire, mais évite de mauvaises surprises. */

/* On cable la nouvelle police, on lui donne un nom et on indique l'url où la télécharger. Cours 9 */ 
@font-face {
	font-family:'NewFont'; 
	src:url('http://themes.googleusercontent.com/static/fonts/fruktur/v1/wW9QEJ2KEYS75opRHz2YTg.woff');
}

/* On définit la couleur de fond de toute la page - Cours 3 */	
body {
	padding:2em; 
	background-color:yellow;
	min-width:850px;
}

/* On indique la nouvelle police pour les titre et on ajoute l'ombrage. On déclare cela pour les 2 types de titre d'un coup. - cours 3 et 4b */
h1, h2 {
	color:red; 
	margin-bottom:0.5em; 
	text-transform:uppercase; /* Transforme le texte en lettre capitale - cours 9 */
	font-family:'NewFont'; 
	text-shadow: 0.1em 0.1em 0.2em rgba(30,30,30,0.6);
}
	
header, footer {text-align:center;} /* On centre le texte du header, et on profite de le faire aussi pour le footer - Cours 3 */

small span {color:blue;}

aside {height:2em; overflow:hidden;} /* on fixe une hauteur et l'overflow pour éviter que le texte complet s'affiche - Cours 9 */
aside:hover {height:100%;} /* On utilise le hover pour afficher les consignes sans utiliser de JS - Cours 4 */

aside ul {
	margin-bottom:1em;
	padding-left:3em;
}

aside h2:after {content:" +";} /* On utilise la pseudo classe :after et la propriété "content" pour afficher le + - Cours 9 */
aside:hover h2:after {content:"";} /* Que l'on fait disparaitre lorsque les consignes sont affichée */

article {
	border:1px black solid; 
	background-color:lightgrey;
	padding:2px; 
	border-radius:1em;/* On arrondi les bords du cadre - Démo du cours 9 (site présentant vos projets) */
}

/* root element for scrollable */
.vertical {

    /* required settings */
    position:relative;
    overflow:hidden;
	margin:auto;
    height: 300px;
    width: 800px;
    border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
}

/* root element for scrollable items */
.items {
    position:absolute;

    /* this time we have very large space for height */
    height:20000em;
    margin: 0px;
}

/* single scrollable item */
.item {
    padding:15px;
    font-size:0.75em;
    height:300px;
	background-color:rgba(255,255,255,0.5); /* j'utilise ici un blanc semi-transparent, mais on aurait pu utiliser une couleur opaque. */
}

/* elements inside single item */
.item img { /* On redimensionne les images pour qu'elles aient toutes la même dimension en utilisant et on les positionnes rapidement à l'aide d'un float - Cours 4,9 */
    float:left;
    max-height:200px;
    max-width:200px;
}

.item h3 {
    margin-bottom: 5px;
}

.item p {font-weight:700; text-align:right;}
.item p i {font-weight:normal;}

/* the action buttons above the scrollable */
#actions {
    width:800px;
    margin:auto;
}

#actions a {
    font-size:1em;
    cursor:pointer;
    color:#666;
}

#actions a:hover {
    text-decoration:underline;
    color:#000;
}

.disabled {
    visibility:hidden;
}

.next {
    float:right;
}


/* Le nom et la date étant dans une autre couleur et en italique, on déclare tout cela - Cours 3 */
/* On colore les liens - Cours 3 */

/* On retire du flux la balise aside pour pouvoir la positionner "après" l'article et au-dessus de celui-ci - Cours 9 */			
 /* On ajoute la bordure noire - Cours 3 */
 /* On retire du flux et on la fixe pour l'avoir toujour à l'écran (pratique durant le travail), mais on peut également règler cela sur "absolute" - Cours 9 */
 /* Comme on veut que les consignes cache le reste, on lui donne une valeur z-index supérieure - Cours 9 */ 
 /* Comme précédement, on fixe la largeur pour que cette boite s'encastre à la droite de l'article - Cours 4 */
 /* On positionne la boite - Cours 9 */
/* On cache ce qui déborde, mais c'est étrange, les ... n'aparaissent pas. Normale, cette balise ne contient pas du texte en soit mais d'autres balises - Cours 9 */
/* Pour la transparence, on applique celle-ci au fond, sinon la police est également impactée et cela devient nettement moins visible. Mais nous n'avons pas vu cette astuce, donc j'attendais la déclaration "opacity:0.92;" - Cours 9 */
}

/* Comme nous l'avons vu avant, la gestion des "..." ne fonctionne pas si on la déclare avant, du coup il faut le faire sur les balises qui contienne du texte. On utilise ici la valeur inherit pour pouvoir la modifier au survol du bloc aside - Cours 9 */

/* On espace un peut les boites du bord pour l'aspect cosmetique - Cours 4b */

/* On gère le survol de la souris avec un :hover, on modifie donc la largeur, l'overflow et l'espace. Il n'est pas nécessaire de modifier text-overflow puisque celle-ci sera automatiquement invalidée par les deux autres - Cours 9 */

/* On positionne le texte avec une marge et on le souligne - Cours 3 et 4b */




		</style>
	</head>
	<body>
		<header>
			<h1>Epreuve du second semestre</h1>
			<p><time datetime="2014-03-04">4 mars 2014</time><!-- On oublie pas d'ajouter le time correctement formaté --></p>
		</header>
		<aside>
			<h2>Consignes</h2>
			<ul>
				<li>Vous avez accès à tous les documents situés sur votre clé <abbr title="Universal Serial Bus">USB</abbr> et au site internet <a href="http://jquerytools.org">jQuery Tools</a>. Tout échange de fichier entre élève est par contre considéré comme fraude.</li>
				<li>Vous devez faire ressembler le plus possible votre travail au modèle présenté durant l'épreuve. Tout élément coloré doit avoir une couleur, mais vous pouvez choisir celle qui vous plait.</li>
				<li>Vous avez le droit de modifier ce fichier <abbr title="HyperText Markup Language">HTML</abbr> en <strong>ajoutant des balises et/ou des attributs</strong>. Chaque ajout et modification effectué doit être accompagné d'un <strong>commentaire</strong>.</li>
				<li><strong>Vous n'êtes pas autorisé à supprimer, remplacer ou permuter des balises existantes</strong>. Le non respect de cette règle entrainera des pénalités.</li>
				<li>Les instructions <abbr title="Cascading Style Sheet">CSS</abbr> que vous devez ajouter doivent être situées dans un <strong>fichier externe</strong>. Les quelques instructions <abbr title="JavaScript">JS</abbr> peuvent cependant rester dans ce fichier.</li>
				<li>Ce fichier ainsi que votre fichier <abbr title="Cascading Style Sheet">CSS</abbr> doivent contenir <strong>votre nom dans leur titre</strong>.</li>
				<li>La <em>bibliothèque jQuery</em> à utiliser est <a href="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js">celle-ci</a>, et la police des titres est située <a href="http://themes.googleusercontent.com/static/fonts/fruktur/v1/wW9QEJ2KEYS75opRHz2YTg.woff"> ici (format <abbr title="Web Open Font Format">WOFF</abbr>)</a>.</li>
				<li>A la fin des 100 minutes, vous devez déposer vos fichiers dans l'espace Menkar "Rendu" approprié. L'enseignant peut vous montrer comment faire.</li>
			</ul>
		</aside>
		<article>
			<header>
				<h2>Les différents langages que nous utilisons :</h2>
			</header>
			<section class="scrollable vertical"> <!-- on ajoute les bonnes classes à ce qui suit pour utiliser le "scrollable" de jQuery Tools -->
				<ul class="items">
					<li id="html5" class="item">
						<h3>Le HTML5</h3>
						<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/HTML5-logo.svg/200px-HTML5-logo.svg.png" alt="Logo HTML5" title="Logo HTML5" />
						<blockquote cite="http://fr.wikipedia.org/wiki/HTML5">
							HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version est en développement en 2012. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie. Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de la spécification en 2014, et encourage les développeurs Web à utiliser HTML 5 dès maintenant.
						</blockquote>
						<p>Source : <i>Wikipedia</i></p>
					</li>
					<li id="css3" class="item">
						<h3>La CSS3</h3>
						<img src="http://bemery.ch/calvin/css3.png" alt="Logo CSS3" title="Logo CSS3" />
						<blockquote cite="http://fr.wikipedia.org/wiki/CSS3#CSS3">
							Le développement du troisième niveau des feuilles de styles en cascade commence dès 1999, parallèlement à celui de CSS 2.1.<br />
							CSS3 devient « modulaire », afin de faciliter ses mises à jour, mais aussi son implémentation par des agents utilisateurs aux capacités et aux besoins de plus en plus variés (navigateurs graphiques, navigateurs pour mobiles, navigateurs vocaux). Les navigateurs peuvent ainsi implémenter des sous-ensembles de CSS3.<br />
							Dès lors, le degré d'avancement de CSS3 varie selon les modules et le degré de priorité qui leur a été donné par le groupe de travail CSS. En 2007, les modules les plus avancés (recommandations candidates) concernent la mise en forme des annotations ruby, la négociation de style entre serveurs et agents utilisateurs (« Media Queries »), le rendu web TV, la gestion des couleurs ou encore la prise en compte de la configuration de l'interface utilisateur. Dans d'autres cas, des modules peuvent atteindre le stade de recommandation candidate, mais être par la suite ramené au stade de document de travail en raison des difficultés mises à jour suite à l'appel à implémentation. C'est par exemple le cas du module de typographie « CSS Text ».
						</blockquote>
						<p>Source : <i>Wikipedia</i></p>
					</li>
					<li id="js" class="item">
						<h3>Le Javascript</h3>
						<img src="http://ocpsoft.org/wp-content/uploads/2013/01/javascript_logo_unofficial-300x300.png" alt="Logo JS" title="Logo JS" />
						<blockquote cite="http://fr.wikipedia.org/wiki/JavaScript">
							JavaScript (souvent abrégé JS) est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi côté serveur.<br />
							C’est un langage orienté objet à prototype, c’est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de créer leurs propriétés, et notamment une propriété de prototypage qui permet d’en créer des objets héritiers personnalisés. En outre, les fonctions sont des objets de première classe.<br />
							Le langage a été créé en 1995 par Brendan Eich (Brendan Eich étant membre du conseil d'administration de la fondation Mozilla) pour le compte de Netscape Communications Corporation. Le langage, actuellement à la version 1.8.2, est une implémentation de la 3<sup>e</sup> version de la norme ECMA-262 qui intègre également des éléments inspirés du langage Python. La version 1.8.5 du langage est prévue pour intégrer la 5<sup>e</sup> version du standard ECMA.
						</blockquote>
						<p>Source : <i>Wikipedia</i></p>
					</li>
				</ul>
			</section>
			<nav id="actions"> <!-- on ajoute les bonnes classes à ce qui suit pour utiliser le "scrollable" de jQuery Tools -->
				<a class="prev">&laquo; Précédent</a>
				<a class="next">Suivant &raquo;</a>
			</nav>			

		</article>
		<footer>
			<small>Réalisé par <span>Bertrand Emery</span>. <!-- il est nécessaire d'ajouter un span pour impacter la couleur du nom - cours 2 --> </small>
		</footer>
		<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> <!-- on cable la librairie JS - cours 10 -->
		<script> <!-- les instructions spécifique pour lancer le scroll doivent être dans une balise script séparée de la précédente -->
			 $(".scrollable").scrollable({ vertical: true });
		</script>
	</body>
</html>