Tu sociedad

A lo largo de esta sección encontraras una guía para el desarrollo de un contenido multimedia, presupone que tienes un conocimiento básico de HTML5 y de jQuery. En caso contrario puedes remediarlo en este mismo sitio.

Sistema de retícula

Bootstrap 3 incluye un sistema responsivo, este sistema de fluido se escala de manera apropiada hasta 12 columnas de acuerdo al tamaño del dispositivo o ventana gráfica.

En Bootstrap 3 el sistema de retícula aplica claramente el concepto el celular es primero. Cuando se declara una rejilla de tamaño específico, este actua en cascada para tamaños superiores. Esto puede ser un poco difícil de entender al principio, así que aquí está un ejemplo.

<!doctype html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'> 
  <title>Sistema de retícula</title>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
 <div class='container'>
   <div class='row'>
     <div class='col-md-1'>.col-md-1</div>
     <div class='col-md-1'>.col-md-1</div>
     <div class='col-md-1'>.col-md-1</div>
     <div class='col-md-1'>.col-md-1</div>
     <div class='col-md-1'>.col-md-1</div>
     <div class='col-md-1'>.col-md-1</div>
     <div class='col-md-1'>.col-md-1</div>
     <div class='col-md-1'>.col-md-1</div>
     <div class='col-md-1'>.col-md-1</div>
     <div class='col-md-1'>.col-md-1</div>
     <div class='col-md-1'>.col-md-1</div>
     <div class='col-md-1'>.col-md-1</div>
   </div>
   <div class='row'>
     <div class='col-md-8'>.col-md-8</div>
     <div class='col-md-4'>.col-md-4</div>
   </div>
   <div class='row'>
     <div class='col-md-4'>.col-md-4</div>
     <div class='col-md-4'>.col-md-4</div>
     <div class='col-md-4'>.col-md-4</div>
   </div>
   <div class='row'>
     <div class='col-md-6'>.col-md-6</div>
     <div class='col-md-6'>.col-md-6</div>
   </div>
 </div>
</body>
</html>

Tamaños de retícula

Usted podría tener su sitio que en la práctica muestre una cuadrícula diferente en 4 diferentes tamaños de navegador. A continuación se muestra el desglose de los diferentes tamaños.

.col-xs-$ Extra Small Phones Less than 768px
.col-sm-$ Small Devices Tablets 768px and Up
.col-md-$ Medium Devices Desktops 992px and Up
.col-lg-$ Large Devices Large Desktops 1200px and Up

Ejemplo: Observe que el resultado depende del tamaño de su dispositivo

<!doctype html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'> 
  <title>Sistema de retícula</title>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
 <div class='container'>
<div class='row'>
    <div class='col-sm-6 col-lg-3'>
        Esto es parte de la rejílla.
    </div>
    <div class='col-sm-6 col-lg-3'>
        Esto es parte de la rejílla.
    </div>
    <div class='col-sm-6 col-lg-3'>
        Esto es parte de la rejílla.
    </div>    
    <div class='col-sm-6 col-lg-3'>
        Esto es parte de la rejílla.
    </div>    
</div>
 </div>
</body>
</html>

Utilidades Responsive

Bootstrap 3 aporta utilidades responsive para ocultar (hiding) y mostrar (showing) elementos basado en el tramaño del navegador. Estas son una buena contribución a nuestro sistema de rejilla.

Visible Hidden
.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

Large Desktop vs Mobile

<!doctype html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'> 
  <title>Sistema de retícula</title>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
 <div class='container'>
    <div class='row'>
      <div class='col-md-6 col-lg-3'>
        <div class='visible-lg text-success'>Large Devices!</div>
        <div class='visible-md text-warning'>Medium Devices!</div>
        <div class='visible-xs visible-sm text-danger'>Extra Small and Small Devices</div>
      </div>
      <div class='col-md-6 col-lg-3'>
        <div class='visible-lg text-success'>Large Devices!</div>
        <div class='visible-md text-warning'>Medium Devices!</div>
        <div class='visible-xs visible-sm text-danger'>Extra Small and Small Devices</div>
      </div>
      <div class='col-md-6 col-lg-3'>
        <div class='visible-lg text-success'>Large Devices!</div>
        <div class='visible-md text-warning'>Medium Devices!</div>
        <div class='visible-xs visible-sm text-danger'>Extra Small and Small Devices</div>
      </div>    
      <div class='col-md-6 col-lg-3'>
        <div class='visible-lg text-success'>Large Devices!</div>
        <div class='visible-md text-warning'>Medium Devices!</div>
        <div class='visible-xs visible-sm text-danger'>Extra Small and Small Devices</div>
      </div>    
    </div>
 </div>
</body>
</html>

Barra de subnavegación

La barra de subnavegación es un componente que podrá contener encabezados de navegación en su aplicación o sitio para un uso muy particular. En vistas de móviles están expandidos, y se vuelven horizontales cuando aumenta el ancho de la ventanilla disponible. En caso de utilizar, se deberá de crear justo después de que se haya abierto la etiqueta <body>

.
<!doctype html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'> 
  <title>Menú</title>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
<nav class="navbar navbar-inverse sub-navbar navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
              data-target="#subenlaces">
        <span class="sr-only">Interruptor de Navegación</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Mi Sitio</a>
    </div>
    <div class="collapse navbar-collapse" id="subenlaces">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Enlace</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
             aria-expanded="false">Desplegable <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Acción</a></li>
            <li><a href="#">Otra acción</a></li>
            <li><a href="#">Algo más aquí</a></li>
            <li class="divider"></li>
            <li><a href="#">Enlace separado</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
 </div>
</body>
</html>

Carrusel de imagenes

Un carrusel es una forma elegante y fácil de implementar fotos con algunos efectos. Hay sin duda multiples estilos de estos en la red tanto de pago como gratis. Bootstrap nos proporciona uno gratis.

Se usa como framework de diseño Bootstrap 3 y jQuery.

La sintaxis básica es la siguiente

<div id='carrusel' class='carousel slide' data-ride='carousel'>
    <ol class='carousel-indicators'>
      <li data-target='#carrusel' data-slide-to='0'></li>
      <li data-target='#carrusel' data-slide-to='1'></li>
      ... Otras diapositivas 
    </ol> 
 
    <!-- Wrapper for slides -->
    <div class='carousel-inner'>
      <div class='item active'>
        <img alt='' src='url'>
        <div class='caption'>
          <h3>Texto descriptivo</h3>
        </div>
      </div>

      <div class='item'>
        <img alt='' src=''>
        <div class='caption'>
          <h3>Texto descriptivo</h3>
        </div>
      </div>
	  
      <!-- Controls -->
          <a class="carousel-control left" href="#carrusel"  data-slide="prev">‹</a>
          <a class="carousel-control right" href="#carrusel" data-slide="next">›</a>
    </div> <!-- Carousel -->  
  </div>
</div>

Ejemplo: Las Joyas del Pescador


<!doctype html>
<html lang='es'>
<head>
  <meta charset="utf-8">
  <title>Las Joyas del Pescador</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <meta name='Author' content='M.C. Jose Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Abril 1, 2016' />
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'> 
  <link href='joyas.css' rel='stylesheet'>
</head>
<body>
  <div class='container'>
    <div class='galeria'>
      <div id='carrusel' class='carousel slide' data-ride='carousel'>
        <ol class='carousel-indicators'>
          <li data-target='#carrusel' data-slide-to='0' class='active'></li>
          <li data-target='#carrusel' data-slide-to='1'></li>
          <li data-target='#carrusel' data-slide-to='2'></li>
          <li data-target='#carrusel' data-slide-to='3'></li>
          <li data-target='#carrusel' data-slide-to='4'></li>
        </ol> 
 
        <!-- Wrapper for slides -->
        <div class='carousel-inner'>
          <div class='item active'>
            <img alt='' src='joyas/brazalete.jpg'>
            <div class='caption'>
              <h3>Brazalete</h3>
            </div>
          </div>
          <div class='item'>
            <img alt='' src='joyas/caballeroAguila.jpg'>
            <div class='caption'>
              <h3>Caballero Águila</h3>
            </div>
          </div>
          <div class='item'>
            <img alt='' src='joyas/chimalli.jpg'>
            <div class='caption'>
              <h3>Chimalli</h3>
            </div>
          </div>

          <div class='item'>
            <img alt='' src='joyas/laOllita.jpg'>
            <div class='caption'>
              <h3>La ollita</h3>
            </div>
          </div>
          <div class='item'>
            <img alt='' src='joyas/Joyas.png'>
            <div class='caption'>
              <h3>Las Joyas del Pescador</h3>
            </div>
          </div>

          <!-- Controls -->
          <a class="carousel-control left" href="#carrusel"  data-slide="prev">‹</a>
          <a class="carousel-control right" href="#carrusel" data-slide="next">›</a>
        </div> <!-- Carousel -->  
      </div>
    </div>
  </div>
  
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>
body {
  padding-top: 60px;
  padding-bottom: 20px;
}

.carousel-control {
  position: absolute;
  top: 40%;
  left: 15px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  font-size: 60px;
  font-weight: 100;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
  background: #222222;
  border: 3px solid #ffffff;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  border-radius: 23px;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.carousel-control.right {
  left: auto;
  right: 15px;
}
.carousel-control:hover,
.carousel-control:focus {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}

 .item > img{
    max-width:100%;
}

div.galeria {
    margin: 0 auto;
    width: 50%;
}

Videos

Bootstrap tiene un buen conjunto de clases para incrustar vídeos de respuesta y su correspondiente relación de aspecto en mútiples tamaños de dispositivos

Embedded 4:3 Responsive Aspect Ratio (YouTube video)


<!doctype html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>4:3 RA</title>
  <meta name='Author' content='M.C. Jose Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Marzo 10, 2016' /> 
  <meta name='Description' content='Relacion de aspecto en video youtube 4:3 con Bootstrap'>
  <meta name='Keywords' content='bootstrap, relacion, aspecto, jquery video' />
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='../../images/favicon.ico' type='image/x-icon' rel='shortcut icon' />
  <link href='../../images/favicon.ico'  rel='icon' />
</head>
<body>
<div class='container'>
  <div class='row'>
    <div class='col-md-8 col-md-offset-2 '>
      <h4>4:3 Responsive Aspect Ratio</h4>
      <div class='embed-responsive embed-responsive-4by3'>
        <iframe class='embed-responsive-item' src='https://www.youtube.com/embed/egOn6_vs7W8'></iframe>
     </div>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

Embedded 16:9 Responsive Aspect Ratio (YouTube video)


<!doctype html>  
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>4:3 RA</title>
  <meta name='Author' content='M.C. Jose Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Marzo 10, 2016' /> 
  <meta name='Description' content='Relacion de aspecto en video youtube 16:9 con Bootstrap'>
  <meta name='Keywords' content='bootstrap, relacion, aspecto, jquery video' />
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='../../images/favicon.ico'  type='image/x-icon' rel='shortcut icon' />
  <link href='../../images/favicon.ico'  rel='icon' />
</head>
<body>
<div class='container'>
  <div class='row'>
    <div class='col-md-8 col-md-offset-2 '>
      <h4>4:3 Responsive Aspect Ratio</h4>
      <div class='embed-responsive embed-responsive-16by9'>
        <iframe class='embed-responsive-item' src='https://www.youtube.com/embed/egOn6_vs7W8'></iframe>
      </div>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

Pero si usted no está usando un <iframe> de YouTube, etc ... ? No te preocupes sustituye iframe por el tag <video>.

Embedded 4:3 Responsive Aspect Ratio (your MP4 video)


<!doctype html> 
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>4:3 RA</title>
  <meta name='Author' content='M.C. Jose Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Marzo 10, 2016' /> 
  <meta name='Description' content='Relacion de aspecto en video youtube 4:3 con Bootstrap'>
  <meta name='Keywords' content='bootstrap, relacion, aspecto, jquery video' />
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='../../images/favicon.ico' type='image/x-icon' rel='shortcut icon' />
  <link href='../../images/favicon.ico'  rel='icon' />
</head>
<body>

<div class='container'>
  <div class='row'>
    <div class='col-md-8 col-md-offset-2 '>
      <h4>4:3 Responsive Aspect Ratio MP4</h4>
      <div class='embed-responsive embed-responsive-4by3'>
        <video controls> 
          <!--replace this sample with your video-->    
          <source src="https://videoteca.uv.mx/video/uploads/1440546883videoregver2015.mp4" type="video/mp4">
        </video>
      </div> 
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

Insertar mapas

La inserción de mapas con la dirección (localización) de tu empresa o casa de google maps es muy común hoy en las páginas de contacto de muchos sitios web, muchos clientes o usuarios los requieren para brindar la dirección exacta. Si los usuarios inician sesión en Google, también podrán ver su casa y su trabajo, sus sitios guardados y otra información en el mapa.

Obtener el código

  1. Abre Google Maps.
  2. Asegúrate de que el mapa o la imagen de Street View que quieras insertar aparezca en el mapa.
  3. En la esquina superior izquierda, haz clic en el menú principal​.
  4. Haz clic en Compartir o insertar el mapa.
  5. En la parte superior del cuadro que aparece, selecciona la pestaña Insertar mapa.
  6. Selecciona el tamaño que quieras y, a continuación, copia el código y pégalo en el código fuente de tu sitio web o blog.

Nota: Si estás usando Maps en el modo básico, no podrás insertar un mapa. Ten en cuenta que es posible que en el mapa insertado no se incluya información de tráfico ni de Maps. Para evitar esto usa tu cuenta Google


<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>San Juan de Ulúa</title>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='mapa04.css' rel='stylesheet'>
</head>
<body>
<div class='row'>
  <div class='col-md-8 col-md-offset-2'>
  <div class="embed-responsive embed-responsive-4by3">
  <iframe   class="embed-responsive-item"  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d36968.4377583447!2d-96.1637004731094!3d19.209038784307814!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85c34694b349c04b%3A0x5ecb68a25668966a!2sSan+Juan+de+Ul%C3%BAa!5e0!3m2!1ses-419!2smx!4v1459656351642"></iframe>
  </div>
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</body>
</html>
body {
  padding-top: 60px;
}	
.map-responsive{
  height:0;
  overflow:hidden;
  padding-bottom: 56.25%;
  position:relative;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}


El clima

En la red encontraremos una gran cantidad de widgets y gadgets que realizan actividades específicas que regulamente se usan para ser empotradas dentro de otras aplicaciones. Ejemplo de estos pequeños programas es el pronostico del clima presentado por meteoRed.mx el cual es altamente configurable


<div id="cont_b15cf075cead3c30732af5ac3e7d0a1a">
<span id="h_b15cf075cead3c30732af5ac3e7d0a1a">Clima
<a id="a_b15cf075cead3c30732af5ac3e7d0a1a"
href="http://www.meteored.mx/clima_Veracruz-America+Norte-Mexico-Veracruz-MMVR-1-22291.html"
target="_blank" rel="nofollow"
style="color:#00ABEB;font-family:Roboto;font-size: 13px; text-decoration: none;">
Veracruz</a></span>
<script async src="http://www.meteored.mx/wid_loader/b15cf075cead3c30732af5ac3e7d0a1a"></script>
</div>

DatePicker

Es un componente estándar para proporcionar un calendario y facilitar el manejo de fechas. Es un componente útil y muy configurable

<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Bootstrap Validator</title>
  <link href='http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker.min.css'
        rel='stylesheet'>
</head>
<body>


<div class="container">
     <div class='row'>
        <label class='col-xs-2 control-label'>Fecha</label>
        <div class="col-xs-3 date"> 
          <div id='Fechas' class='input-group input-append date'>
            <input class='form-control' name='fecha' type='text' >
            <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
          </div>
        </div>
</div>

 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js'></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/locales/bootstrap-datepicker.es.min.js'></script>
 <script>
     $('#Fechas') .datepicker({
      autoclose: true,
      clearBtn: true,
      format: 'yyyy/mm/dd',
	  language: 'es',
      todayHighlight: true,
      toggleActive: true
   }); 
 </script>
</body>
</html>