Menú

Existen varios diseños de menú en Bootstrap, la selección de este depende en mayor parte de sus preferncias personales y la aplicación. Usaremos una forma rápida de implementarlo

See the Pen wMQNeO by JOSE (@albatros) on CodePen.

Servicios multimedia

Muchos servicios multimedia, como YouTube o SoundCloud, utilizan el elemento <iframe> para insertar el contenido en otras webs. Presentamos aquí una versión de diseño adaptativo basada en Bootstrap.

Básicamente la solución consiste en poner el <iframe> dentro un div contenedor y posicionar el iframe de forma absoluta respecto a este contenedor.

La relación de aspecto de una pantalla de televisión tradicional es de 4:3, que también se puede expresar como 1.33:1, que a simple vista parece cuadrada, pero no lo es. Los televisores panorámicos (incluyendo los de alta definición) suelen tener una relación de aspecto de 16:9 ( 1.77:1 es decir 1,77 veces más ancho que alto). Esta es la relación utilizada por los DVD, lo que en una pantalla tradicional deja dos franjas negras arriba y abajo de la imagen.

En el cine las relaciones de aspecto más usadas son 1.85:1 y 2.39:1.

En fotografía, en cambio, las proporciones más usadas son 4:3 y 3:2, aunque también encontramos 5:4, 7:5 y 1:1 (cuadrado).

Los monitores de escritorio habitualmente usan la relación de aspecto 16:9, 4:3 o 16:10.

Para mantener el aspect ratio usaremos una de las dos siguientes propuestas.

See the Pen bEJONb by JOSE (@albatros) on CodePen.

Aunque he utilizado como ejemplo el <iframe> de un vídeo de YouTube, puedes utilizarlo para cualquier otro servicio que utilice iframes para insertar contenido, como SoundCloud, Google Maps y, en general, cualquier iframe cuyo contenido necesite mantener un aspect ratio fijo.

Video en formato mp4

<!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>mp4</title>
  <meta name='Author' content='M.C. Jose Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Agosto 18, 2016' /> 
  <meta name='Description' content='Relacion de aspecto en video youtube 4:3 con Bootstrap'>
  <meta name='Keywords' content='bootstrap, video, mp4' />
  <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-8 col-md-offset-2 '>
      <h3>MP4</h3>
      <div class='embed-responsive embed-responsive-4by3'>
        <video controls> 
          <!--replace this sample with your video-->    
          <source src='mcvideo.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>

Video en formato wmv

Formato no compatible con Android, algunos navegadores como Chrome no lo soportan si el uso de plugin


<!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>wmv</title>
  <meta name='Author' content='M.C. Jose Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Agosto 18, 2016' /> 
  <meta name='Description' content='Relacion de aspecto en video youtube 4:3 con Bootstrap'>
  <meta name='Keywords' content='bootstrap, video, mp4' />
  <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-8 col-md-offset-2 '>
      <h3>WMV</h3>
      <div class="embed-responsive embed-responsive-16by9 , embed-responsive embed-responsive-4by3">
        <embed src='MUSEONAVAL_FINAL.wmv'  type="video/WMV" autostart="True"></embed>
      </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>

Si bien no encontraste aquí un manual de html5 y Bootstrap con los pocos o muchos elementos presentados puedes construir sitios con detalles interesantes.

Travias

Travias Jarochos un recuerdo de nuestro pasado

Conoceme

Zona Arqueológica Edzná

Un sitio maya fuera de serie

Visitame