Outils pour utilisateurs

Outils du site


cours2012:concepts_et_outils_pour_internet:twintowers_page_type

Twin Towers - Page Type

Sur la base d'un projet de Tony Coelho.

Matériel de départ

Maquette Axure et son export.

Le code HTML du contenu de la page type :

<h2>Les attentats du 11 septembre 2001</h2>
 
<p>Le 11 septembre 2001, quatre avions de la compagnie
Américain Air Line ont été détournés par Al-Qaïda, deux de ces avions ont
percuté les tours du World Trade Center.</p>
 
<img src="images-contenu/11_sep_theo.png" alt="le World Trade Center en feu"
 width="218" height="149">
 
<p>Quatre avions ont été détournés ce jour par des membres d'<a
href="glossaire.html#al-qaida">Al-Qaïda</a>, 2 de ces avions ont été projetés
contre les <a href="glossaire.html#twin-towers">Twin Towers</a>. Un autre de
ces avions a été envoyé sur le pentagone, quant au dernier avion il a échoué
en Pennsylvanie. Cet attentat a été l'attentat le plus médiatisé au monde, les
tours jumelles représentaient par leur hauteur, la puissance américaine.</p>
 
<p>C’était le symbole du capitalisme de la plus grande nation du monde. Elles
représentaient également la réussite, car de nombreux avocats, médecins,
architectes y étaient installés.</p>
 
<h3>Un Bilan terrifiant</h3>
 
<p>Le bilan humain s'élève à 2977 personnes et 19 terroristes.
 Dans ce bilan
passagers des avions, membres d'équipage, pompiers, policiers et 2763
personnes présentes dans les tours sans compter le nombre de personnes
disparues sous les décombres.
 C'est un constat épouvantable, reporté par
l'Agence Associated Press. Des milliers de familles ont alors perdu, ce jour,
une ou plusieurs personnes de leur entourage. Dans ces attentats les bâtiments
3,4,5,6 et 7 du <a href="glossaire.html#world-trade-center">World Trade
Center</a> ont été détruits à cause de l'effondrement des tours jumelles.
 Et
48 autres immeubles autour du <a
href="glossaire.html#world-trade-center">World Trade Center</a> ont été
endommagés par ces attentats du 11 septembre.</p>
 
<h3>Des circonstances aggravantes</h3>
 
<p>C'est presque 1 heure après avoir été percuté par un des avions, que le
tour sud s’effondre créant la panique complète dans les rues de New-York.

L'affolement, la bousculade, inconsciemment tout le monde court dans la même
direction afin d'éviter d'être enseveli sous la poussière causée par
l'effondrement. À cause de l'effondrement, la poussière empêche les pompiers
d'agir donc cela prend plus de temps pour soigner les blessés et évacuer les
citoyens new-yorkais. Une demi-heure après l'effondrement de la tour sud,
c'est la tour nord qui s'effondre, ce qui ne laisse aucune chance aux pompiers
et aux personnes qui étaient pris au piège dans les étages. Suite aux
effondrements le silence total, et un nuage de poussière prennent place dans
les rues de New-York.</p>
 
 
<h2>L'incompréhension engendre la terreur </h2>
 
<p>Le 11 septembre2001 les New-Yorkais ont assisté au plus
terrifiant des attentats, suite au crash des avions la panique et
l'incompréhension la plus totale se sont installées au sein de la
population.</p>
 
<img src="images-contenu/11_sep_sent.png" alt="foule fuiant le World Trade
Center" width="218" height="155">
 
<p>Le 11 septembre au matin, comme tous les jours à New-York les rues sont
bondées. Personnes n'auraient pu prévoir qu’à une heure aussi matinale le plus
grand massacre de toute l'histoire allait se produire ?</p>
 
<p>Il est 8h46 minutes, un bruit assourdissant retentit dans les rues du <a
href="glossaire.html#world-trade-center">World Trade Center</a>, la tour nord
du <a href="glossaire.html#world-trade-center">World Trade Center</a> vient de
se faire percuter, par un des avions détournés par les terroristes. À ce
moment même, c'est l'incompréhension et la panique totale au sein de la
population new-yorkaise. Ils ne comprennent pas pourquoi un avion vient de
s'écraser sur une des tours jumelles et ensuite ils réalisent l’ampleur des
dégâts et pensent aux personnes travaillant dans cette tour. À 9h03 minutes,
c'est la tour sud qui se fait percuter à son tour, c'est à ce moment que les
New-yorkais comprennent que c'est un attentat contre les États-Unis. À ce
moment l'incompréhension laisse place à la terreur.</p>
 
<h3>La terreur</h3>
 
<p>Suite au crash du deuxième avion sur la tour sud, les New-yorkais
comprennent qu'ils assistent à un attentat. La terreur s'installe, la
population court dans tous les sens, pour fuir le plus loin possible du World
Trade Center. Quelques minutes après le crash des avions sur les tours, les
personnes qui occupent les étages se précipites aux fenêtres pour appeler au
secours. Voyant qu'ils se trouvent dans une situation désespérée certains se
jettent depuis les fenêtres des tours. Les New-yorkais sont spectateurs des
suicides de ces personnes qui sont peut-être leurs proches sont tétanisés et
se sentent impuissants. Certaines images de ces attentats resteront gravées à
jamais dans les mémoires.</p>
 
<h3>Des moyens mis en place pour éviter la récidive</h3>
 
<p>La commission nationale sur les attaques terroristes contre les États-Unis
a été créée en 2002, pour expliquer aux monde entier comment ces attentats ont
pu se produire. Aussi pour éviter une récidive de ces attentats et permettre
aux autres pays de pouvoir se défendre, face à ce type d'attaque. En août
2004, la commission a publié un rapport, où elle établit la responsabilité du
réseau d’<a href="glossaire.html#al-qaida">Al-Qaïda</a>. En affirmant que les
dix-neuf terroristes, auteurs de ces attentats en étaient membres, et que le
commanditaire de ces attentats était Oussama Ben Laden, qui les a revendiqués
à plusieurs reprises.</p>
 
 
<!-- Annexes -->
 
 
<h3>Bloc Réferent</h3>
 
<img src="images-contenu/ref2.png" alt="crash avion" width="111" height="164">
 
<p>Les attentas du 11 septembre 2001, ce jour le World Trade Center était la
cible d'Al-Qaïda. Le crash du premier avion a engendré une réaction en
chaîne.</p>
 
<a href="http://fr.wikipedia.org/wiki/Attentats_du_11_septembre_2001">En
savoir plus</a>
 
 
<h3>Bloc Autres Projets</h3>
<ul>
  <li><a href="https://src-projet.pu-pm.univ-fcomte.fr/etudiants/SRC1_2011_2012/Lahemade_Felix/projet-individuel-S1/site/index.html">
    La route 66</a></li>
  <li><a href="https://src-projet.pu-pm.univ-fcomte.fr/etudiants/SRC1_2011_2012/Lamy_Alexandre/projet-individuel-S1/site/index.html">
    Les près de vaux</a></li>
  <li><a href="https://src-projet.pu-pm.univ-fcomte.fr/etudiants/SRC1_2011_2012/Ridey_Lola/projet-individuel-S1/site/index.html">
    Le lac de fuhlinger</a></li>
  <li><a href="https://src-projet.pu-pm.univ-fcomte.fr/etudiants/SRC1_2011_2012/Vannier_Sandrine/projet-individuel-S1/site/index.html">
    New delhi</a></li>
  <li><a href="https://src-projet.pu-pm.univ-fcomte.fr/etudiants/SRC1_2011_2012/Dufey_Axel/projet-individuel-S1/site/">
    Caserne pompier belfort</a></li>
  <li><a href="https://src-projet.pu-pm.univ-fcomte.fr/etudiants/SRC1_2011_2012/Pairis_Virginie/projet-individuel-S1/site/index.html">
    Times square, la ville qui ne dort jamais</a></li>
  <li><a href="https://src-projet.pu-pm.univ-fcomte.fr/etudiants/SRC1_2011_2012/Morin_Etienne/projet-individuel-S1/site/index.html">
    Varsovie</a></li>
  <li><a href="https://src-projet.pu-pm.univ-fcomte.fr/etudiants/SRC1_2011_2012/Jouffroy_Justine/projet-individuel-S1/site/index.html">
    Hintertux ville de montagne</a> </li>
  <li><a href="https://src-projet.pu-pm.univ-fcomte.fr/etudiants/SRC1_2011_2012/Paris_Clement/projet-individuel-S1/site/index.html">
    Welcome to london</a></li>
  <li><a href="https://src-projet.pu-pm.univ-fcomte.fr/etudiants/SRC1_2011_2012/Petracca_Victor/projet-individuel-S1/site/index.html">
    Rio, la ville des extrêmes</a> </li>
  <li><a href="https://src-projet.pu-pm.univ-fcomte.fr/etudiants/SRC1_2011_2012/Viala_Valentin/projet-individuel-S1/site/index.html">
    Le site des eurockéennes</a> </li>
  <li><a href="https://src-projet.pu-pm.univ-fcomte.fr/etudiants/SRC1_2011_2012/Drissi_Marine/projet-individuel-S1/site/index.html">
    Londres un melting-pot d'émotions</a></li> 
</ul>

Code HTML du contenu de la page de glossaire :

<h2>Définitions</h2>
 
<dl>
 
  <dt id="world-trade-center">World Trade Center</dt>
  <dd>Le centre des affaires de Manhattan.</dd>
 
  <dt id="twin-towers">Twin Towers</dt>
  <dd>Tour 1 et tour 2 du World Trade Center.</dd>
 
  <dt id="complexe">Complexe</dt>
  <dd>Ensemble de bâtiments groupés en fonction de leur utilisation.</dd>
 
  <dt id="puissance-economique">Puissance économique</dt>
  <dd>La puissance économique d'un pays est classé en fonction de son produit national brut.</dd>
 
  <dt id="serenite">Sérénité</dt>
  <dd>Grande tranquillité de l'esprit. </dd>
 
  <dt id="ground-zero">Ground zero</dt>
  <dd>point zéro) est un terme anglais utilisé pour indiquer l'endroit précis sur le sol où a lieu n'importe quelle explosion.</dd>
 
  <dt id="al-qaida">Al-Qaïda</dt>
  <dd>Est un mouvement islamiste.</dd>
 
  <dt id="jumper">Jumper</dt>
  <dd>Personnes qui se sont suicider lors des attentes, en sautant par les fenêtres des tours du World Trade Center.</dd>
 
</dl>

Travail

Faire la page et compléter les CSS pour obtenir :

Techniques spéciales

Flèches et triangle en CSS

http://css-tricks.com/snippets/css/css-triangle/

.bloc_referent h3:after {
  content:" ";
  display:block;
  position:absolute;
  width:0;
  height:0;
  bottom:-2em;
  left:1em;
  border-width:1em;
  border-style:solid;
 
  border-color:transparent;
 
  border-top-color:black;
}

Un caractère spécial comme style graphique

http://css-tricks.com/snippets/css/common-unicode-icons/

.bloc_autres_projets li a:before {
font-family: arial;
content: "►\0000A0\0000A0";
}

Explication :

  • Prendre la table de caractères (Windows) ou la fenêtre des caractères spéciaux (Mac) et choisir ici : “►”.
  • \0000A0 c'est une séquence Unicode ici pour un espace insécable.

Vous pouvez utiliser les caractères que vous voulez en les incluant directement dans votre texte ou en utilisant leurs références “Unicode”.

cours2012/concepts_et_outils_pour_internet/twintowers_page_type.txt · Dernière modification: 2012/10/21 22:00 (modification externe)