-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (85 loc) · 6.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Projet de Motivation | par Ariane</title>
<meta name="description" content="Projet de Motivation par Ariane" />
<meta name="author" content="Ariane" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
<link href="css/impress-ariane.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Salsa">
<link href='http://fonts.googleapis.com/css?family=Rationale' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="favicon.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>
<body class="impress-not-supported">
<div class="fallback-message">
<p>Votre navigateur ne supporte pas ce document et la technologie qui est utilisée.</p>
<p>Pour une utilisation optimale, veuillez utiliser <b>Chrome</b>, <b>Safari</b> ou <b>Firefox</b>.</p>
</div>
<div id="impress">
<div class="step slide" data-x="-3000" data-y="-500">
<span id="title"><h1 align="center"><strong>Projet de Motivation</strong></h1></span>
<br />
<p align="center"><em>Ariane</em></p>
<br /><br /><br /><br />
<p align="center"><img src="images/interface3.jpg"></p>
<footer>Avril 2012</footer>
</div>
<div class="step slide charged" data-x="-2000" data-y="-500">
<q>Décidée, elle l’était indéniablement. Un bilan professionnel lamentable et l’approche de la trentaine contribuaient probablement à ce revirement particulièrement inattendu. <b id="pink">Interface3</b> allait lui permettre d’appréhender un tournant important de sa vie. </q>
</div>
<div class="step slide charged" data-x="-1000" data-y="-500">
<q>Elle avait déjà eu recours à diverses applications informatiques dans le cadre de ses études, notamment la suite Office et SPSS, et elle en utilisait parfois d’autres lors de ses loisirs.</q>
</div>
<div class="step" data-x="1000" data-y="-2500" data-rotate="90" data-scale="1">
<p>Sans grand <strong>talent.</strong></p>
<p id="zoom"><img src="images/crockettpourshah.png" alt="Crokett pour Shah"><br />Crokett pour Shah </p>
</div>
<div id="avec" class="step" data-x="0" data-y="-2500" data-rotate="180" data-scale="0.6">
<p>Mais toujours <b>avec</b> <span class="thoughts">imagination.</span></p>
</div>
<div id="qualite" class="step" data-x="0" data-y="-500" data-rotate="270" data-scale="0.9">
<span class="try">Il était donc plus que temps de se donner les moyens d’exploiter ses <strong>possibles</strong> qualités cachées.</span>
</div>
<div id="contraire" class="step" data-x="1000" data-y="-500" data-rotate="270" data-scale="1">
<p>Elle avait cru en ses capacités d’écoute, de compréhension et d’aide à autrui et y croyait toujours. Psychologue, elle le serait un jour. Cette formation n’était aucunement incompatible avec ses ambitions anciennes, que du <b class="scaling">contraire.</b></p>
</div>
<div id="capable" class="step" data-x="0" data-y="-1500" data-scale="1">
<p>Elle y puiserait les moyens d’innover et de se réaliser dans des domaines dont elle n’entrevoyait, jusque-là, que les prémisses. Le module d’orientation lui avait fait prendre conscience qu’elle en était tout à fait <b class="scaling">capable</b></p>
</div>
<div class="step" data-x="1000" data-y="-1500" data-rotate="20" data-scale="0.9">
<p width="500px"><span class="thoughts">Et qu’elle pouvait s’amuser en apprenant.</span></p>
</div>
<div class="step" data-x="-3000" data-y="-2500" data-scale="0.5">
Pour préciser ses attentes, elle s’était mise en quête de témoignages de webmasters.
</div>
<div id="ing" class="step" data-x="-2000" data-y="-2500" data-scale="3">
<p align="center"><b class="rotleft"><- Un programmeur</b> et <b class="rotright">un webdesigner -></b><br/>
<img align="center" width="20%" src="images/brain.jpg" alt="Brain"></p>
</div>
<div class="step" data-x="-1000" data-y="-2500" data-scale="0.5">
Dont les ressentis se sont finalement avérées plus proches qu’elle ne l’aurait cru.
</div>
<div class="step wide" data-x="2000" data-y="-500" data-scale="0.8">Outre la gestion du stress généré par la nécessité de traiter plusieurs projets de front, l’un comme l’autre se doivent d’être aptes à gérer les attentes et besoins de leurs clients. Ajoutons la nécessaire capacité d’adaptation aux mises à jours et nouvelles technologies afin d’éviter l’obsolescence, ainsi qu’une certaine liberté de création, et nous obtenons la formule de base du travail de webmaster.
</div>
<div class="step wide" data-x="-3000" data-y="-1500">Au programmeur de préciser que la programmation est une sorte de jeu dont la logique et le type de syntaxe se retrouvent d’un langage de programmation à l’autre. L’apprentissage d’un seul langage permet d'acquérir les bases pour aborder les autres.
</div>
<div id="webdesign" class="step" data-x="-1500" data-y="-1500" data-rotate-x="-40" data-rotate-y="10">Au webdesigner d’ajouter que son métier requiert de la polyvalence puisque chaque site est unique. Maîtriser Photoshop, Illustrator, Dreamweaver et Flash ne suffit pas : Il faut être capable d’avoir une vision d’ensemble pour que le résultat soit harmonieux.
</div>
<div class="step" data-x="2000" data-y="-1500" data-scale="0.9"> A priori, elle se sentait plus proche du programmeur. L’avenir lui dirait si elle avait vu juste.
</div>
<div id="overview" class="step" data-x="-550" data-y="-1500" data-scale="4">
<img width="25%" src="images/brain.jpg" alt="Brain">
</div>
<script>
if ("ontouchstart" in document.documentElement) {
document.querySelector(".hint").innerHTML = "<p>Bouton droit ou gauche pour naviguer</p>";
}
</script>
<script src="js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>