mgea · angelrobp · May 2, 2018 · May 2, 2018 · May 2, 2018 · May 4, 2018
diff --git a/P4_UsabReport_BlueDiamond_doneby_A2_Terangago.pdf b/P4_UsabReport_BlueDiamond_doneby_A2_Terangago.pdf
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
 # DIU18
 Prácticas Diseño Interfaces de Usuario 2017-18 (Agenda cultural)
 
+Enlace a la web (Visionar en versión móvil preferiblemente >400px ancho) ==> https://angelrobp.github.io
+
 En esta práctica vamos a analizar el uso de herramientas para el diseño del IU en Web. 
 Para ello usaremos los bocetos de la práctica anterior. Vamos a considerar los siguientes aspectos: 
 
@@ -22,3 +24,4 @@ Pasos:
 * Publicar en GitHub haciendo un FORK de este proyecto. 
 
 
+
diff --git a/assets/styleguide/cover_1.jpg b/assets/styleguide/cover_1.jpg
diff --git a/assets/styleguide/cover_2.jpg b/assets/styleguide/cover_2.jpg
diff --git a/assets/styleguide/cover_3.jpg b/assets/styleguide/cover_3.jpg
diff --git a/assets/styleguide/cover_4.jpg b/assets/styleguide/cover_4.jpg
diff --git a/assets/styleguide/people_1.jpg b/assets/styleguide/people_1.jpg
diff --git a/assets/styleguide/people_2.jpg b/assets/styleguide/people_2.jpg
diff --git a/assets/styleguide/people_3.jpg b/assets/styleguide/people_3.jpg
diff --git a/assets/styleguide/people_4.jpg b/assets/styleguide/people_4.jpg
diff --git a/assets/styleguide/people_5.jpg b/assets/styleguide/people_5.jpg
diff --git a/assets/styleguide/people_6.jpg b/assets/styleguide/people_6.jpg
diff --git a/blank.html b/blank.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+  <link rel="stylesheet" href="theme.css" type="text/css"> </head>
+
+<body>
+  <nav class="navbar navbar-expand-md bg-secondary navbar-dark">
+    <div class="container">
+      <a class="navbar-brand" href="#">Brand</a>
+      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item">
+            <a class="nav-link" href="#">Features</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Pricing</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">About</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link text-white" href="#">Contact us</a>
+          </li>
+        </ul>
+        <form class="form-inline m-0">
+          <input class="form-control mr-2" type="text" placeholder="Search">
+          <button class="btn btn-primary" type="submit">Search</button>
+        </form>
+      </div>
+    </div>
+  </nav>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+  <pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:250px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo Free&nbsp;&nbsp;
+    <img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
+  </pingendo>
+</body>
+
+</html>
diff --git a/busqueda.html b/busqueda.html
@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!-- PAGE settings -->
+  <link rel="icon" href="img/logo-ugr.png">
+  <title>Agenda UGR</title>
+  <meta name="keywords" content="Agenda universidad de granada bootstrap example template">
+  <meta name="author" content="Angel">
+  <!-- CSS dependencies -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+  <link rel="stylesheet" href="theme.css"> </head>
+
+<body>
+  <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-info">
+    <div class="container">
+      <a class="" href="index.html">
+        <img class="img-responsive" alt="UGR" width="150" src="img/agenda_ugr.png"> </a>
+      <!--<button class="navbar-toggler navbar-toggler-right collapsed custom-toggler" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation">-->
+      <button class="navbar-toggler navbar-toggler-right collapsed custom-toggler" type="button" data-toggle="collapse" data-target="#navbarAgenda">
+        <span class="navbar-toggler-icon"></span>
+        <span class="mx-1 cerrar">
+          <i class="fa d-inline fa-lg fa-times"></i>
+        </span>
+      </button>
+      <div class="collapse navbar-collapse text-center justify-content-between" id="navbarAgenda">
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a class="nav-link mx-2" href="#">Información Contacto
+              <i class="ml-1 fa d-inline fa-lg fa-envelope"></i>
+            </a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle text-white" href="#" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" id="loginDropdown"> Log in </a>
+            <div class="dropdown-menu">
+              <form class="px-4 py-3">
+                <div class="form-group">
+                  <label for="loginDropdown">Email address</label>
+                  <input type="email" class="form-control" id="loginDropdown" placeholder="[email protected]"> </div>
+                <div class="form-group">
+                  <label for="loginDropdown">Password</label>
+                  <input type="password" class="form-control" id="loginDropdown" placeholder="Password"> </div>
+                <div class="form-check">
+                  <input type="checkbox" class="form-check-input" id="dropdownCheck" value="on">
+                  <label class="form-check-label" for="dropdownCheck"> Remember me </label>
+                </div>
+                <button type="submit" class="btn btn-primary">Sign in</button>
+              </form>
+              <div class="dropdown-divider"></div>
+              <a class="dropdown-item" href="#">New around here? Sign up</a>
+              <a class="dropdown-item" href="#">Forgot password?</a>
+            </div>
+          </li>
+        </ul>
+        <div class="form-inline">
+          <div class="form-group">
+            <input class="form-control" type="text" placeholder="Buscar..." style="margin-right: 0px !important; border-bottom-right-radius: 0;
+                                                                                     border-top-right-radius: 0;"> </div>
+          <a href="busqueda.html">
+            <button class="btn my-2 my-sm-0 search" type="submit">
+              <i class="fa d-inline fa-lg fa-search"></i>
+            </button>
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>
+  <div class="text-center pt-4 d-block">
+    <div class="destacado">
+      <p> Destacado </p>
+    </div>
+    <div data-interval="4000" data-ride="carousel" id="carousel-2" class="carousel slide">
+      <ol class="carousel-indicators">
+        <li data-target="#carousel-2" data-slide-to="0" class="active">&nbsp;</li>
+        <li data-target="#carousel-2" data-slide-to="1">&nbsp;</li>
+        <li data-target="#carousel-2" data-slide-to="2">&nbsp;</li>
+      </ol>
+      <div class="carousel-inner" role="listbox">
+        <div class="carousel-item active">
+          <img class="imagen-carrusel d-block" src="img/expo_italia2.jpg" data-holder-rendered="true">
+          <div class="carousel-caption">
+            <spam style="font-size:15px;">Fecha: 20 de Mayo</spam>
+            <p class="lead"> Exposición bibliográfica Tutta l’Italia </p>
+          </div>
+        </div>
+        <div class="carousel-item">
+          <img class="d-block imagen-carrusel" src="img/auladelmar.jpg" data-holder-rendered="true">
+          <div class="carousel-caption">
+            <spam style="font-size:15px;">Fecha: 15 de Mayo</spam>
+            <p class="lead">Jornadas Ecocampus: Revalorización y limpieza de fondos marinos</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="m-0 mt-4 bg-primary" style="text-align:center">
+    <ul class="filtros list-inline border border-primary">
+      <li class="list-inline-item">
+        <a class="nav-link text-white" href="index.html">Todo</a>
+      </li>
+      <spam style="margin:0 auto; vertical-align:center; font-size:20px;">|</spam>
+      <li class="list-inline-item dropdown ">
+        <a class="nav-link dropdown-toggle text-white" href="#" id="categoriaDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Fecha </a>
+        <div class="dropdown-menu text-white" aria-labelledby="categoriaDropdownMenuLink">
+          <a class="dropdown-item" href="busqueda.html">Hoy</a>
+          <a class="dropdown-item" href="busqueda.html">Esta semana</a>
+          <a class="dropdown-item" href="busqueda.html">Este mes</a>
+        </div>
+      </li>
+      <spam style="margin:0 auto; vertical-align:center; font-size:20px;">|</spam>
+      <li class="list-inline-item dropdown ">
+        <a class="nav-link dropdown-toggle text-white" href="#" id="categoriaDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lugar </a>
+        <div class="dropdown-menu text-white" aria-labelledby="categoriaDropdownMenuLink">
+          <a class="dropdown-item" href="busqueda.html">ETSIIT</a>
+          <a class="dropdown-item" href="busqueda.html">Facultad de Ciencias</a>
+          <a class="dropdown-item" href="busqueda.html">Hospital Real</a>
+        </div>
+      </li>
+      <spam style="margin:0 auto; vertical-align:center; font-size:20px;">|</spam>
+      <li class="list-inline-item dropdown ">
+        <a class="nav-link dropdown-toggle text-white" href="#" id="categoriaDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Categorias </a>
+        <div class="dropdown-menu text-white" aria-labelledby="categoriaDropdownMenuLink">
+          <a class="dropdown-item" href="busqueda.html">Teatro</a>
+          <a class="dropdown-item" href="busqueda.html">Exposición</a>
+          <a class="dropdown-item" href="busqueda.html">Taller</a>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div class="p-2">
+    <div class="container py-1">
+      <div class="row justify-content-md-center my-3">
+        <div class="bg-dark p-1" style="width:20%">
+          <div class="date ">
+            <span class="dia"> 20 de </span>
+            <span class="mes"> MAYO </span>
+          </div>
+          <div class="reserva">
+            <a href="evento.html"> Reservar&gt;</a>
+          </div>
+        </div>
+        <div class="bg-primary p-1" style=" background-size: cover; background-image: url(&quot;img/expo_italia2.jpg&quot;); width:80%">
+          <div class="informacion" style="background-color: #000000a3;">
+            <a href="evento.html"> Exposición bibliográfica Tutta l’Italia </a>
+            <span> Biblioteca Universitaria, Hospital Real. </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="container">
+    <div class="row justify-content-md-center my-3">
+      <div class="col-12 ">
+        <ul class="pagination justify-content-center" style="margin:0 auto;">
+          <li class="page-item">
+            <a class="page-link" href="#" aria-label="Previous">
+              <span aria-hidden="true">«</span>
+              <span class="sr-only">Previous</span>
+            </a>
+          </li>
+          <li class="page-item active">
+            <a class="page-link text-white" href="#">1</a>
+          </li>
+          <li class="page-item">
+            <a class="page-link text-white" href="#">2</a>
+          </li>
+          <li class="page-item">
+            <a class="page-link text-white" href="#">3</a>
+          </li>
+          <li class="page-item">
+            <a class="page-link text-white" href="#">4</a>
+          </li>
+          <li class="page-item">
+            <a class="page-link" href="#" aria-label="Next">
+              <span aria-hidden="true">»</span>
+              <span class="sr-only">Next</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="bg-light py-3">
+    <div class="container">
+      <div class="row d-flex justify-content-center">
+        <div class="col-7">
+          <div class="container opciones">
+            <div class="row">
+              <div class="col-5">
+                <a class="text-dark" style="font-weight:bold" href="#">Contacto</a>
+                <a class="text-dark" style="font-weight:bold" href="#">Politica</a>
+              </div>
+              <div class="col-2">
+                <span>|</span>
+                <span>|</span>
+              </div>
+              <div class="col-5">
+                <a class="text-dark" style="font-weight:bold" href="#">Trabaja con nosotros</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row d-flex">
+      <div class="col-5">
+        <a class="" href="#">
+          <img class="img-responsive" alt="UGR" width="150" src="img/agenda_ugr.png"> </a>
+      </div>
+      <div class="col-5">
+        <div class="row text-center mt-2">
+          <div class="col-2 col-3">
+            <a href="#" target="_blank">
+              <i class="fa fa-facebook text-primary fa-2x"></i>
+            </a>
+          </div>
+          <div class="col-md-2 col-3">
+            <a href="#" target="_blank">
+              <i class="fa fa-twitter text-primary fa-2x"></i>
+            </a>
+          </div>
+          <div class="col-md-2 col-3">
+            <a href="#" target="_blank">
+              <i class="fa fa-instagram text-primary fa-2x"></i>
+            </a>
+          </div>
+          <div class="col-md-2 col-3">
+            <a href="#" target="_blank">
+              <i class="fa text-primary fa-2x fa-pinterest-p"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row ">
+      <div class="col-12">
+        <p class="text-dark mt-2 mb-0">Copyright © Ángel Robledillo Perea &amp; Jorge Juan Ñiguez Fernandez</p>
+      </div>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+</body>
+
+</html>