-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathresponsive.html
121 lines (109 loc) · 5.8 KB
/
responsive.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
<!DOCTYPE HTML>
<!--
Todos los derechos reservados (C) Notiur 2015. Gracias html5up.net por la licencia de uso de 'Escape Velocity' (CCA 3.0 license).
-->
<html>
<head>
<title>Notiur · Diseño Responsivo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<link href="assets/css/lightbox.css" rel="stylesheet">
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<link rel="icon" type="image/png" href="/favicon.png">
<meta name="description" content="Página oficial de Notiur. Notiur es una herramienta cuyo objetivo es eliminar la barrera de comunicación entre una institución y sus alumnos utilizando la tecnología web y móvil para que profesores, preceptores y otras autoridades puedan comunicarse con los alumnos en forma rápida, fácil y sencilla." />
</head>
<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header-wrapper" class="wrapper">
<div style='padding:6em 0;'>
<!-- Nav -->
<nav id="nav">
<ul>
<li class="current"><a href="/#demos">Volver</a></li>
<li class="current" style='border-left: 1px solid rgba(255, 255, 255, 0.25);'><img src='images/small.png' style='vertical-align:middle;margin-left:20px;border-radius:3px;height:30px;'/></li>
</ul>
</nav>
</div>
</div>
<!-- Main -->
<div class="wrapper style2">
<div class="title">Interfaz Principal</div>
<div id="main" class="container">
<!-- Content -->
<div id="content">
<article class="box post">
<header class="style1">
<h2>Una mirada más interna a la interfaz de Notiur</h2>
<p>Diseño Responsivo</p>
</header>
<!--<a href="#" class="image featured">
<img src="images/pic01.jpg" alt="" />
</a>-->
<p class='justify'>Una interfaz totalmente adaptable. Fue algo fundamental que se tuvo en cuenta al realizar el diseño base de la aplicación web. Notiur está basado en <a href='http://getbootstrap.com/'>Bootstrap 3</a> un Framework HTML 5 y CSS 3 para crear un estilo responsivo. De esta forma no importa desde que dispositivo se intente acceder a la aplicación web de Notiur. <b>Siempre se tendrá la mejor experiencia posible</b>.</p>
</article>
<div class="row 150%">
<div class="4u 12u(mobile)">
<section class="box">
<header>
<h2>Pantallas Grandes (Desktop)</h2>
</header>
<a href="images/captura_1.PNG" class="image featured" data-lightbox="capturas" data-title="Notiur en Pantallas Grandes de más de 10 pulgadas"><img src="images/captura_1.PNG" alt="" /></a>
<p class='justify'>Este es un ejemplo de vistas en pantallas grandes de alta resolución. Todos los controles están visibles y son fáciles de acceder. Sin embargo, nunca se pierde la sencillez y simplicidad necesaria.</p>
</section>
</div>
<div class="4u 12u(mobile)">
<section class="box">
<header>
<h2>Pantallas Medianas (Tablets)</h2>
</header>
<a href="images/captura_4.png" class="image featured" data-lightbox="capturas" data-title="Notiur en Pantallas Medianas de menos de 10 pulgadas"><img src="images/captura_4.png" height='229px' style='width:auto;margin: 0 auto;' alt="" /></a>
<p class='justify'>En este caso todo el modelo es adaptado al tamaño de la pantalla del dispositivo desde el cual se está accediendo. Los controles son ubicados en un menú desplegable manteniendo una interfaz sencilla, limipia y fácil de utilizar.</p>
</section>
</div>
<div class="4u 12u(mobile)">
<section class="box">
<header>
<h2>Pantallas Pequeñas (Celulares)</h2>
</header>
<a href="images/captura_5.jpg" class="image featured" data-lightbox="capturas" data-title="Notiur en Pantallas Pequeñas de menos de 7 pulgadas"><img src="images/captura_5.jpg" height='216px' style='width:auto;margin: 0 auto;' alt="" /></a>
<p class='justify'>La interfaz móvil de Notiur no es diferente a las anteriores. Mantiene un diseño responsivo heredado de las Pantallas Medianas, sumado a una funcionalidad especial que permite recorrer los diversos cursos simplemente con deslizar hacia los costados.</p>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer-wrapper" class="wrapper">
<div class="title">Gracias</div>
<div id="footer" class="container">
<header class="style1">
<h2>Gracias por interesarte en más aspectos de Notiur</h2>
<p>
Hacé click <a href='/#demos'>aquí</a> para volver a la página principal
</p>
</header>
</div>
<div id="copyright">
<ul>
<li>© Notiur 2015. Todos los derechos reservados.</li>
<li><a href="http://matiascorridoni.com">Matías Mendez Corridoni</a></li>
<li>Gracias <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="js/lightbox.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/skel-viewport.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>