Tu ciudad

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. En caso contrerio puedes remediarlo en este mismo sitio.

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

DropBox

Dropbox es un servicio de alojamiento de archivos multiplataforma en la nube, operado por la compañía Dropbox. El servicio permite a los usuarios almacenar y sincronizar archivos en línea y entre computadoras y compartir archivos y carpetas con otros usuarios y con tabletas y móviles.


Para los fines de la presente experiencia educativa comparta una carpeta (No comprimida)con la siguiente estructura

En cada carpeta anexar el siguiente formato de evaluación

No cambie esta carpeta trabaje sobre de ella. Solo se recibirán aquellas carpetas que cumplan con este formato. Al correo evaristopacheco@hotmail.com

Básicos

Los elementos en HTML (Lenguaje de marcado para hipertextos - Hypertext Markup Language) usualmente son bien elementos "en línea" o bien elementos a "nivel de bloque".

Un elemento a nivel de bloque ocupa el espacio entero de su elemento padre (el contenedor), creando así un "bloque". Las siguientes etiquetas son elementos de bloque en html5:

Un elemento en línea ocupa sólo el espacio acotado por las etiquetas que lo definen. Las siguientes etiquetas son elementos en línea en html5:

Plantilla Base

Para los objetivos del curso usaremos Bootstrap y jQuery. Nuestros archivos tendrán la siguiente plantilla base.

<!DOCTYPE html>
<html lang='es-es'>
<head>
  <meta charset='utf-8' />
  <title>Creatividad Multimedia</title>
  <meta name='Author' content='M.C. Jose Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Febrero 12, 2016' /> 
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  
  <meta name='Description' content='' />
  <meta name='Keywords' content='creatividad, multimedia, uv, administracion' />

  <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'>
   Contenido
</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>

Nota: Modifique de acuerdo a sus necesidades, el contenido de dicha plantilla y guarde el archivo en una carpeta llamada tuciudad bajo el nombre de index.html

Observe que los script de jQuery y Bootstrap son cargados desde CDN motivo por lo cual necesitara conexión a internet. En caso contrario descargar las versiones apropiadas a su equipo local

Bootstrap es un framework basado en HTML y CSS, fue creado por Twitter. Este framework nos ayuda a agilizar la creación del interfaz de nuestra página web. Con la particularidad, que usando Bootstrap, nuestro sitio estará adaptado a la pantalla del dispositivos con el que accedemos, ya sea una computadora, tablet, smartphone, televisión.... Esto significa que tendremos una Web responsive o adaptativa, y fundamental de cara al posicionamiento en Google.

jQuery es una librería JavaScript open-source, que funciona en múltiples navegadores, y que es compatible con CSS3. Su objetivo principal es hacer la programación “scripting” mucho más fácil y rápida del lado del cliente. Con jQuery se pueden producir páginas dinámicas así como animaciones parecidas a Flash en relativamente corto tiempo.

El móvil es lo más importante

Bootstrap 3 se ha pensando en los móviles. Así que en vez de incluir algunos estilos opcionales para móviles, todo eso ya está incluido en el propio Bootstrap. Por eso nos gusta decir que para Bootstrap 3, los dispositivos móviles son lo más importante.

Para que las páginas se muestren correctamente y el zoom funcione bien en los dispositivos móviles, es importante que añadas la siguiente etiqueta dentro de la cabecera <head> de las páginas:

<meta name="viewport" content="width=device-width, initial-scale=1">

Si quieres deshabilitar el zoom en tus páginas, añade la propiedad user-scalable=no a la etiqueta anterior:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Al añadir la propiedad user-scalable=no, los usuarios ya no podrán hacer zoom en la página y solamente podrán hacer scroll en sus contenidos. El resultado es que el comportamiento de la página se parece más al de una aplicación móvil nativa. En cualquier caso, limitar las libertades de los usuarios puede ser contraproducente y por tanto, no te recomendamos que utilices esta opción en todos tus sitios. http://librosweb.es/libro/bootstrap_3/capitulo_2.html

Primeros pasos

Si observa el código de la platilla base encontrara una línea que inicia con la eqiquta div. La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.

En nuestro caso dicho contenedor tiene la siguiente notación basada en el framework antes mencionado.

   <div class="container">
         Contenido
   </div>

Ahora sustituya el contenido de dicho contenedor por su texto, Por ejempo:


Nota: Prueba tu código. ¡El texto carece de formato!.

Para definir un parrafo usamos el tag <p> y </p>.

Para dar un poco de estilo personalizado a nuestra página, usaremos hojas de estilo. La plantilla base usa Bootstrap. Observe que en el código propuesto usamos una hoja de estilo personalizada que usa un media queriy que hace que el tamaño de la letra del body cambie a 18px si la pantalla tiene un mínimo de 1024px de ancho .

Una media query consiste en un tipo de medio y al menos una consulta que limita las hojas de estilo utilizando características del medio como ancho, alto y color. Se entiende como un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo. Añadido en CSS3, las media queries dejan que la presentación del contenido se adapte a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí.

Observe el siguiente fragmento de código.


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

Para hacer esto agregar al final del <head> la siguiente línea

<link href='estilo.css' rel='stylesheet'>

Visualiza tu código en diferentes dispositivos

Imagenes

Las imagenes se pueden alinear de tres formas posibles a la izquierda, a la derecha y al centro

Alineación de imagenes en Bootstrap
Clase Descripción Ejemplo
pull-left Alinea la imagen a la izquierda, colocando el texto a la izquierda Tranvia cerrado
pull-right Alinea la imagen a la derecha, el texto se alinea a la derecha Tranvia cerrado
center-block Imagen centrada a los margenes del contenedor

Los desarrolladores generalmente presentan la misma imagen en múltiples resoluciones, sin importar la diversidad de dispositivos y sus correspondientes resoluciones. Por lo que los dispositivos de alta resolución puede obtener una imagen óptima para una resolución dada, mientras que los dispositivos de baja resolución ven reducida la velocidad de carga y consumen ancho de banda.

Si bien las tabletas y celulares pueden tener una excelemte resolución regularmente el ancho de banda que consumen es caro y limitado

Imágenes responsivas

Se trata de imágenes que se adaptan al tamaño del contenedor ocupando el 100% del mismo. Su sintaxis es:

<img alt='' class='img-responsive' src='url'>

Sólo debemos añadir la clase img-responsive y la imagen se adaptará al contenedor. Siempre podemos añadir un max-width para que no sobrepase un tamaño deseado.

La siguiente imagen representa un tranvía que recoría las calles de la ciudad de Veracruz, México. Note que la imagen se centra y se visualiza correctamente al ancho de su dispositivo

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.


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

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 IFRAME para insertar contenido, como SoundCloud, Google Maps y, en general, cualquier iframe cuyo contenido necesite mantener un aspect ratio fijo.

Travias

Travias Jarochos un recuerdo de nuestro pasado

Conoceme

Zona Arqueológica Edzná

Un sitio maya fuera de serie

Visitame