-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
278 lines (247 loc) · 17.4 KB
/
index.html
File metadata and controls
278 lines (247 loc) · 17.4 KB
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!DOCTYPE html>
<html lang="en">
<head>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68883515-1', 'auto');
ga('send', 'pageview');
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SkipQueues</title>
<link rel="shortcut icon" type="image/x-icon" href="./img/coffee.ico" />
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/grayscale.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-coffee"></i> <span class="light">Skip</span>Queues
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li >
<a style="color: rgb(239,71,58);" href="./index.html">Home</a>
</li>
<li>
<a href="./service-design.html">Service design</a>
</li>
<li>
<a href="./product-design.html">Product design</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<br class="visible-xs"><br class="visible-xs">
<div class="row">
<div class="col-md-8" id="headerIntro">
<h1 class="brand-heading hidden-xs" id="titleIndex"><span class="light">Skip</span>Queues</h1>
<p class="intro-text" id="descriptionIndex" style="text-shadow: 1px 1px 15px rgba(0, 0, 0, 1);" >
<span class="light">Skip</span>Queues is an application developed <a href="http://ionicframework.com/" class="light" style="color:white;">for Android with Ionic framework</a> that allows to order cafeteria products from
anywhere and anytime and skip queues. This project is the summary of the steps followed for the UC3M cafeteria service redesign.
</p>
</div>
<div class ="col-md-3 text-center">
<!-- <img class="img-responsive visible-xs" style=" margin: 0 auto; width:70%; height:auto;" src="img/appMenu.JPG" alt="">
<div class="div-for-video hidden-xs" id="videointro">
<video src="video/app2.mp4" id="glass" height="400px" autobuffer autoplay loop></video>
</div>-->
<div class="hidden-xs" style="margin-top:130px; height:368px; width:259px; overflow: hidden;">
<video src="video/videoApp2.mp4" id="" height="400px" autobuffer autoplay loop muted></video>
</div>
</div>
</div>
<div class="row">
<a href="#about" class="btn btn-circle page-scroll" id="buttonIntro">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2 style="margin-top:30px;">About the project</h2>
<p>This project is the result of our work in the course of <a href="http://www3.uc3m.es/reina/Fichas/Idioma_2/218.13891.html">Design of Interactive Systems</a> for the Bachelor Degree in Computer Science and Engineering.</p>
<p>The aim of the course was to learn the way of applying user-centered design approaches to address the design and development of interactive systems.</p>
<p><a href="./process.html">Here</a> you can read about the theoretical foundations followed in this project.</p>
</div>
</div>
</section>
<!-- Download Section -->
<section id="download" class="content-section text-center">
<div class="download-section1 contrast">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h2 style="text-shadow: 2px 2px 50px rgba(0, 0, 0, 0.9);">Service design</h2>
<p style="text-shadow: 2px 2px 50px rgba(0, 0, 0, 0.9);"><b>Service design</b> is <i>"the activity of planning and organizing people, infrastructure, communication and material components of a service in order to improve its quality and the interaction between service provider and customers."</i></p>
<p style="text-shadow: 2px 2px 50px rgba(0, 0, 0, 0.9);">The purpose of service design methodologies is to redefine services according to the needs of customers and the capabilities of service providers, so that the service is user-friendly, competitive and relevant to the customers, while being sustainable for the service provider.</p>
<p style="text-shadow: 2px 2px 50px rgba(0, 0, 0, 0.9);"><a href="./service-design.html">Discover</a> how we redefine the food & beverage service at <br>Universidad Carlos III de Madrid (UC3M).</p>
<a href="./service-design.html" class="btn btn-default btn-lg" style="text-shadow: 2px 2px 50px rgba(0, 0, 0, 0.9);">Service Design Phase</a>
</div>
</div>
</div>
<br>
<div class="download-section2">
<div class="container contrast">
<div class="col-lg-8 col-lg-offset-2">
<h2 style="text-shadow: 2px 2px 50px rgba(0, 0, 0, 0.9);">Product design</h2>
<p style="text-shadow: 2px 2px 50px rgba(0, 0, 0, 0.9);"><b>Product design</b> is <i>"the process of creating a new product to be deployed in a real setting."</i></p>
<p style="text-shadow: 2px 2px 50px rgba(0, 0, 0, 0.9);">The main insight of the first phase of the project was the need of avoiding queues at peak times. This goal requires not only reorganizing the food & beverage service, but also developing interactive tools that support new features. Accordingly, the second phase of the project is oriented to design a smartphone application.</p>
<p style="text-shadow: 2px 2px 50px rgba(0, 0, 0, 0.9);"><a href="./product-design.html">Learn</a> more about the design of a mobile ordering application <br>to avoid queues at peak times.</p>
<a href="./product-design.html" class="btn btn-default btn-lg" style="text-shadow: 2px 2px 50px rgba(0, 0, 0, 0.9);">Product Design Phase</a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="container content-section text-center">
<div class="row">
<div class="col-lg-12">
<h2>Who made this?</h2>
<div class="col-lg-3 col-md-6">
<img class="img-circle profile-img" src="img/contact/jenn.jpg" alt="">
<h4 style="margin-bottom:10px;margin-top:15px;">Jennifer Azaña</h4>
<p style="font-size:16px; margin-bottom:10px;">Computer Science student </p>
<p style="font-size:16px; font-style:italic; margin-bottom:10px;">"I've always felt technology must adapt to human, opposite to the traditional conception. That's why I'm deeply interested in UX and human centred design. It's time to make some changes!"</p>
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://www.linkedin.com/pub/jennifer-aza%C3%B1a-p%C3%A9rez/b5/9b3/256/en" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> </a>
</li>
<li>
<a href="https://github.com/jenniferAz" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> </a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6">
<img class="img-circle profile-img" src="img/contact/david.jpg" alt="">
<h4 style="margin-bottom:10px;margin-top:15px;">David Ortiz-Vallejuelo</h4>
<p style="font-size:16px; margin-bottom:10px;">Computer Science student</p>
<p style="font-size:16px; font-style:italic; margin-bottom:10px;">"Passionate about UX and Artificial Intelligence; thrilled to make the most of both fields. I'm always in the middle of building something new"</p>
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://es.linkedin.com/pub/david-ortiz-vallejuelo/b2/77/5bb/en" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> </a>
</li>
</ul>
<br class="hidden-lg visible-md"> <br class="hidden-lg visible-md"> <br class="hidden-lg visible-md">
</div>
<div class="col-lg-3 col-md-6">
<img class="img-circle profile-img" src="img/contact/javier.jpg" alt="">
<h4 style="margin-bottom:10px;margin-top:15px;">Javier Honduvilla</h4>
<p style="font-size:16px; margin-bottom:10px;">Computer Science student</p>
<p style="font-size:16px; font-style:italic; margin-bottom:10px;">"Backend engineer in the making."</p>
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://twitter.com/javierhonduco" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> </a>
</li>
<li>
<a href="https://github.com/javierhonduco" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> </a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6">
<img class="img-circle profile-img" src="img/contact/miren.jpg" style="height:250px; width:250px;" alt="">
<h4 style="margin-bottom:10px;margin-top:15px;">Miren Sainz</h4>
<p style="font-size:16px; margin-bottom:10px;">Computer Science student</p>
<ul class="list-inline banner-social-buttons">
<li>
<!--<a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> </a>-->
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Acknowledges Section -->
<section id="contact" class="container content-section text-center">
<div class="row">
<div class="col-lg-12">
<h2 id="acknowledgments">Acknowledgements</h2>
<div class="col-lg-6 col-md-6 ">
<img class="img-circle profile-img" src="img/contact/DavidDiez.jpg" alt="">
<h4 style="margin-bottom:10px;margin-top:15px;">David Díez</h4>
<p style="font-size:16px; margin-bottom:10px;">Ph.D. in Computer Science</p>
<p style="font-size:16px; font-style:italic; margin-bottom:10px;">"I define myself as a human-centred software engineer. I have a software engineering background and a human-centric mindset."</p>
<a style="font-size:16px; margin-bottom:15px;" href=http://daviddiezcebollero.es/>daviddiezcebollero.es</a>
<ul class="list-inline banner-social-buttons" style="margin-top:10px;">
<li>
<a href="https://www.linkedin.com/pub/david-d%C3%ADez-cebollero-phd-csm/a5/5b7/49b" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> </a>
</li>
</ul>
</div>
<div class="col-lg-5 col-md-5">
<p style="font-size:20px; font-style:italic; margin-top:25px; margin-bottom:30px; font-weight:normal; font-family:Corbel;">Because of their collaboration in the project development:</p>
<h4 style="font-size:15px; margin-bottom:10px;margin-top:15px;">Álvaro Cáceres</h4>
<h4 style="font-size:15px; margin-bottom:10px;margin-top:15px;">Álvaro Rubio</h4>
<p style="font-size:20px; font-style:italic; margin-top:25px; margin-bottom:30px; font-weight:normal; font-family:Corbel;">Because of their collaboration in the evaluations:</p>
<h4 style="font-size:15px; margin-bottom:10px;margin-top:15px;">Francisco Javier del Álamo</h4>
<h4 style="font-size:15px; margin-bottom:10px;margin-top:15px;">Kenji Muro</h4>
<h4 style="font-size:15px; margin-bottom:10px;margin-top:15px;">Roberto Gutiérrez</h4>
<h4 style="font-size:15px; margin-bottom:10px;margin-top:15px;">Pedro Sanz</h4>
<h4 style="font-size:15px; margin-bottom:10px;margin-top:15px;">Daniel Brinzei</h4>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container text-center">
<p id="footerText">© 2015 SkipQueues</p>
</div>
</footer>
<!-- jQuery -->
<script defer src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script defer src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script defer src="js/jquery.easing.min.js"></script>
<!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
<!--<script defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>-->
<!-- Custom Theme JavaScript -->
<script defer src="js/grayscale.js"></script>
<script>
/*var video = document.getElementById('glass');
video.addEventListener('click',function(){
video.play();
},false);*/
window.onload = function() {
var video = document.getElementById('glass');
video.play();
};
</script>
</body>
</html>