SEMANA 8 – PROGRAMACIÓN WEB I

PROGRAMACIÓN WEB I
IIASIGNATURA
SEMANA 8

Diseño adaptable (responsive). Parte II

Reservados todos los derechos Instituto Superior de Artes y Ciencias de la Comunicación S.A. No se permite copiar, reproducir, reeditar, descargar,
publicar, emitir, difundir, de forma total o parcial la presente obra, ni su incorporación a un sistema informático, ni su transmisión en cualquier
forma o por cualquier medio (electrónico, mecánico, fotocopia, grabación u otros) sin autorización previa y por escrito de Instituto Superior de
Artes y Ciencias de la Comunicación S.A. La infracciónIACC-2020
de dichos derechos puede constituir un delito contra la propiedad intelectual.
1
SEMANA 8 – PROGRAMACIÓN WEB I

APRENDIZAJES ESPERADOS
El estudiante será capaz de:

 Realizar diseño HTML adaptable

(responsive), incorporando imágenes, clases
de ayuda y utilidades en distintos medios.

IACC-2020
2
SEMANA 8 – PROGRAMACIÓN WEB I

APRENDIZAJES ESPERADOS ................................................................................................................. 2

INTRODUCCIÓN ................................................................................................................................... 4
1. DISEÑO HTML ADAPTABLE (RESPONSIVE) EN DISTINTOS MEDIOS............................................. 5
1.1. IMÁGENES ....................................................................................................................... 5
EJEMPLO DE GALERIA DE IMÁGENES EN BOOTSTRAP ................................................................ 6
1.2. CLASES DE AYUDA Y UTILIDADES .................................................................................... 7
1.3. BORDES............................................................................................................................ 7
EJEMPLO DE BORDES EN BOOTSTRAP ........................................................................................ 8
EJEMPLO DE GALERIA DE IMÁGENES EN BOOTSTRAP .............................................................. 10
1.4. FLOAT Y CLEARFIX.......................................................................................................... 11
EJEMPLO DE USO DE LAS CLASES FLOAT Y CLEARFIX EN BOOTSTRAP ...................................... 12
1.5. RESPONSIVE FLOAT ....................................................................................................... 13
1.6. RESPONSIVE MARGEN ................................................................................................... 13
1.7. SHADOW........................................................................................................................ 15
1.8. RESPONSIVE EMBEDS .................................................................................................... 16
COMENTARIO FINAL.......................................................................................................................... 19
REFERENCIAS………………………………………………………………………………………………………………………………..20

IACC-2020
3
SEMANA 8 – PROGRAMACIÓN WEB I

INTRODUCCIÓN

En el presente contenido se revisará la Adicionalmente, se verán las clases de ayuda

continuación del diseño HTML adaptable o
RWD (de las siglas en inglés, responsive web
design).
Para ello, se estudiará el manejo de
imágenes bajo el concepto denominado
single page aplication (SPA) que propone la
unificación del acceso de los usuarios
independientemente del dispositivo desde el
cual acceden al contenido y procesando todo
lo que se muestra en una única página.
y otras utilidades disponibles con los que se
complementará la base técnica necesaria
para lograr el desarrollo de contenidos
adaptables y eficientes.
De esta manera, se logrará consolidar los
aprendizajes esperados en el curso de
programación web I.

IACC-2020
4
SEMANA 8 – PROGRAMACIÓN WEB I

1. DISEÑO HTML ADAPTABLE (RESPONSIVE) EN DISTINTOS

MEDIOS
Recordemos que el diseño HTML adaptable o responsive fue desarrollado como una técnica que
permite la creación de un mismo sitio web orientado a diversos medios, de tal manera que, hay
que construir un único código para la página a publicar, pudiendo adaptarse al dispositivo desde el
cual se accede al contenido. Veamos entonces a continuación, otro conjunto de elementos
asociados a esta metodología y que se encuentran enmarcados en el concepto single page
aplication (SPA).

 El término single page aplication (SPA) se refiere a un formato de

aplicaciones web muy popular en la actualidad, ya que mejora y unifica
la experiencia de usuario, independientemente del dispositivo de
acceso. Su nombre deriva de su principal característica en la que todo lo
que se muestra y se procesa está dentro de la misma página.

1.1. IMÁGENES
El manejo de imágenes se realiza con clases que permitan adaptar el modo de visualización de las
mismas, pudiendo lograr un aspecto con esquinas redondeadas, circulares, tamaños miniatura,
entre otros. Veamos las diferentes clases a utilizar en la siguiente tabla:

Clase Descripción Ejemplo

rounded Clase que permite redondear <img src="foto.jpg"
las esquinas de las imágenes. class="rounded" alt="Foto">
rounded-circle Permite la visualización en <img src="foto.jpg"
forma de un círculo de la class="rounded-circle"
imagen especificada. alt="Foto">
.img-thumbnail Muestra la imagen en <img src="foto.jpg"
miniatura. class="img-thumbnail"
alt="Foto">
.img-fluid Ajusta la imagen de manera <img src="foto.jpg"
automática al tamaño de la class="img-fluid" alt="Foto">
pantalla del dispositivo en el
que se visualiza.
Tabla de clases para el manejo de clases con diseño adaptable. Fuente: w3schools.com (2019)

IACC-2020
5
SEMANA 8 – PROGRAMACIÓN WEB I

Veamos ahora un ejemplo que nos permita entender la disposición de una galería de fotos
mediante imágenes miniaturas (thumbnail), dentro de una estructura de rejilla:

EJEMPLO DE GALERIA DE IMÁGENES EN BOOTSTRAP

…
<body>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="pastel.jpg">
<img src="pastel.jpg" alt="pastel de choclo" style="width:100%">
<div class="caption">
<p>Pastel de choclo</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="empanada.jpg">
<img src="empanada.jpg" alt="Empanada de horno" style="width:100%">
<div class="caption">
<p>Empanada de horno</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="pebre.jpg">
<img src="pebre.jpg" alt="Pebre" style="width:100%">
<div class="caption">
<p>Pebre</p>
</div>
</a>
</div>
</div>
</div>
</body>
</html>

IACC-2020
6
SEMANA 8 – PROGRAMACIÓN WEB I

La visualización del ejemplo anterior, se aprecia en la siguiente imagen:

Visualización de ejemplo de galeria de imágenes

1.2. CLASES DE AYUDA Y UTILIDADES

Las utilidades del diseño adaptativo permiten diseñar más rápidamente sitios web móviles, dado
que muestran u ocultan elementos según el tipo de dispositivo desde el cual se accede al
contenido, por medio de clases usadas para mostrar/ocultar elementos, las que solo funcionan
dentro de bloques o tablas. A continuación, se presenta una tabla con el resumen de las clases:

Clase Teléfonos Tabletas Computador Computador

grande
.visible-xs Visible Oculto Oculto Oculto
.visible-sm Oculto Visible Oculto Oculto
.visible-md Oculto Oculto Visible Oculto
.visible-lg Oculto Oculto Oculto Visible
.hidden-xs Oculto Visible Visible Visible
.hidden-sm Visible Oculto Visible Visible
.hidden-md Visible Visible Oculto Visible
.hidden-lg Visible Visible Visible Oculto
Tabla de clases utilitarias para ocultar o visualizar contenidos. Fuente: Otto y Thornton(2016)

1.3. BORDES
Para mostrar fragmentos de código, en el contenido de una página con Bootstrap, se utiliza el
elemento <code>, con el objeto de que se diferencie del resto del texto. Existen clases que
ayudan a proporcionar estilos a los elementos sin necesidad de usar hojas de estilos CSS. La
primera de ellas es usada para proporcionar o eliminar bordes a un elemento, de tal manera, se

IACC-2020
7
SEMANA 8 – PROGRAMACIÓN WEB I

debe especificar con un 0 si lo que se requiere es eliminar algún borde. Veamos el siguiente
ejemplo para comprender mejor:

EJEMPLO DE BORDES EN BOOTSTRAP

<!doctype html>
<html lang="en">
<head>
<title>Ejemplo de bordes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.border {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>Bordes</h2>
<p>Uso de la clase borde en un elemento:</p>
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
</div>
</body>
</html>

IACC-2020
8
SEMANA 8 – PROGRAMACIÓN WEB I

La visualización del ejemplo anterior se puede apreciar en la siguiente imagen:

Visualización del ejemplo de bordes

También es posible modificar el aspecto de las esquinas de los bordes para que se visualicen
redondeados, por medio de la clase rounded. Observemos el siguiente ejemplo:

IACC-2020
9
SEMANA 8 – PROGRAMACIÓN WEB I

EJEMPLO DE BORDES REDONDEADOS EN BOOTSTRAP

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo de Bordes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #555;
}
</style>
</head>
<body>
<div class="container">
<h2>Bordes</h2>
<p>Ejemplos de redondeo de esquinas con las clases rounded</p>
<span class="rounded-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
</div>
</body>
</html>

IACC-2020
10
SEMANA 8 – PROGRAMACIÓN WEB I

Visualización de redondeos de bordes con la clase rounded

 Los contenidos de esta semana contemplan clases y utilidades

incorporadas en la versión 4 de Bootstrap, cuya librería se
encuentra disponible para descarga desde el siguiente enlace.
También es válido usarlo directamente en el atributo href del
código (como aparece en los ejemplos entregados).

https://bit.ly/2VbawbY

1.4. FLOAT Y CLEARFIX

Boostrap define, mediante la clase float, la posibilidad de hacer flotar a la izquierda o hacia la
derecha un elemento usando .float-left o .float-right, así como también, borrar dichas
especificaciones por medio de la clase .clearfix.

Veamos un ejemplo:

IACC-2020
11
SEMANA 8 – PROGRAMACIÓN WEB I

EJEMPLO DE USO DE LAS CLASES FLOAT Y CLEARFIX EN BOOTSTRAP

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo de Clases float y clearfix</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.
css">
<style>
span {
display: inline-block;
background-color: #567;
}
</style>
</head>
<body>
<h2>Uso de las clases Float y Clearfix</h2>
<p>Se usa para asignar un elemento para que flote a la izquierda o
derecha.</p>
<div class="clearfix">
<span class="float-left">Flota hacia la izquierda</span>
<span class="float-right">Float hacia la derecha</span>
</div>
</body>
</html>

IACC-2020
12
SEMANA 8 – PROGRAMACIÓN WEB I

En el ejemplo anterior se observa el uso de ambas clases, en el que dentro de la clase clearfix, se
detallan los elementos hacia la izquierda y derecha del contenedor. Observemos el resultado de
dicho código en la pantalla del navegador:

Visualización de ejemplo de uso de las clases float y clearfix

1.5. RESPONSIVE FLOAT

También es posible que se adapte la flotación de los elementos, dependiendo del tamaño del
dispositivo desde el cual se visualiza el contenido, usando las siguientes clases:

Clase Teléfonos
float-sm-right Flota a la derecha en pantallas pequeñas.
float-md-right Flota a la derecha en pantallas medianas.
float-lg-right Flota a la derecha en pantallas grandes.
float-xl-right Flota a la derecha en pantallas extragrandes.
.float-none Anula flotación del elemento.
Tabla de clases para responsive float. Fuente: w3schools.com (2019)

1.6. RESPONSIVE MARGEN

Al igual que la clase anterior, para el margen también es posible que se adapten los márgenes
según el tamaño del dispositivo desde el cual se accede, usando clases cuyos nombres se
establecen mediante el patrón: m{lado}-{tamaño}, donde lado puede tomar los siguientes valores:

IACC-2020
13
SEMANA 8 – PROGRAMACIÓN WEB I

t • Asigna margen a la parte superior (top).

b • Asigna margen a la parte inferior (bottom).

l • Asigna margen al lado izquierdo (left).

• Asigna margen al lado derecho (right).

r
• Asigna el margen a ambos lados (izquierda y derecha).
x
• Asigna el margen a la parte inferior y superior.
y
Blan • Asigna el mismo valor a los cuatro lados.
co

Y tamaño podrá tomar los siguientes valores:

0 • Asigna 0 al margen.

1 • Asigna 4 px al margen.

• Asigna 8 px al margen.
2

• Asigna 16 px al margen.
3

• Asigna 24 px al margen.
4

• Asigna 48 px al margen.
5

• Asigna el valor automático.

auto

IACC-2020
14
SEMANA 8 – PROGRAMACIÓN WEB I

Entonces, según lo anterior, para establecer un margen de 8 px superior, se deberá especificar así:

<div class="mt-2">Este párrafo tiene 8 px de margen superior</div>

De igual manera, para establecer un margen automático para todos los lados se deberá especificar
así:

<div class="m-auto">Este párrafo el mismo margen automático para los

cuatro lados</div>

1.7. SHADOW

Para incorporar sombras a los elementos se utiliza la clase shadow, de la siguiente manera:

Para no fijar
none
sombra

Sombra
-sm
pequeña
shadow
Sombra
-lg
grande

En blanco para sombra por defecto

Observemos los siguientes ejemplos:

<div class="shadow-none mb-4 bg-light">sin sombra</div>

<div class="shadow-sm mb-4 bg-white">Sombra pequeña(small shadow</div>
<div class="shadow mb-4 bg-white">Sombra por defecto</div>
<div class="shadow-lg mb-4 bg-white">Sombra larga(large shadow</div>

IACC-2020
15
SEMANA 8 – PROGRAMACIÓN WEB I

Visualización de diversos tipos de sombras usando la clase shadow

1.8. RESPONSIVE EMBEDS

Para crear videos o presentaciones embebidas o incrustadas en la página web, y que a su vez se
adapten al ancho del dispositivo desde el cual se accede, se utiliza la clase embed-responsive-item,
la cual se debe agregar a cualquier elemento incrustado (iframe o video), siempre y cuando
pertenezcan a un elemento padre especificado con la clase embed-resposive, especificando a su
vez, la relación de tamaño entre ambos mediante un atributo que puede tomar los siguientes
valores:

Atributo Descripción
embed-responsive-21by9 Proporciona una relación 21:9 entre el elemento padre y el
elemento hijo.
embed-responsive-16by9 Proporciona una relación 16:9 entre el elemento padre y el
elemento hijo.
embed-responsive-4by3 Proporciona una relación 4:3 entre el elemento padre y el
elemento hijo.
embed-responsive-1by1 Proporciona una relación 1:1 entre el elemento padre y el
elemento hijo.
Atributos para establecer relación de elementos embebidos. Fuente: w3schools.com (2019)

IACC-2020
16
SEMANA 8 – PROGRAMACIÓN WEB I

 Los conjuntos de marcos corresponden a un tipo especial de

etiqueta denominada <iframe>, que es utilizada para incrustar
contenido externo a la página. Este servicio es proporcionado
por empresas como Youtube y otras similares, quienes
entregan, por medio de un enlace o contenido especial, la
posibilidad de obtener videos, audios o imágenes en formatos
que sean reconocidos por los navegadores.

Por ejemplo, el siguiente código muestra dos visualizaciones del mismo video incrustado en la
página, tanto para la relación 16:9 como la relación 21:9:

<div class="container mt-3">

<h2>Responsive Embed</h2>
<h3>Relación 16:9</h3>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/Imeq3GeRttw"></iframe>
</div>
<h3>Relación 21:9</h3>
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/Imeq3GeRttw"></iframe>
</div>
</div>

Así se visualiza este código en el navegador:

IACC-2020
17
SEMANA 8 – PROGRAMACIÓN WEB I

Visualización de diversos modos de responsive embed

IACC-2020
18
SEMANA 8 – PROGRAMACIÓN WEB I

COMENTARIO FINAL
En este contenido, hemos revisado un conjunto de elementos complementarios para el desarrollo
de contenidos web, bajo el diseño web adaptativo, con el propósito de fortalecer las técnicas
fundamentales para una correcta construcción de contenidos, permitiendo su visualización desde
diferentes dispositivos.

Además, se revisaron aspectos importantes como el uso de imágenes desde la metodología

adaptable, el conocimiento de nuevas clases y utilidades adaptables a diversos medios, junto a la
incorporación de la clase responsive embeds para la incrustación de contenidos de procedencia
externa al sitio. De esta manera se consolida el conocimiento que permitirá atender la necesidad
del entorno actual de una manera eficiente y sin complicaciones.

IACC-2020
19
SEMANA 8 – PROGRAMACIÓN WEB I

REFERENCIAS
w3schools.com (2019).Boostrap tutorial. Recuperado de:

https://www.w3schools.com/bootstrap4/

Otto, M y Thornton, J. (2016). Bootstrap 3, el manual oficial. Uniwebsidad.com.

Recuperado de: https://uniwebsidad.com/libros/bootstrap-3

PARA REFERENCIAR ESTE DOCUMENTO, CONSIDERE:

IACC (2019). Diseño adaptable (responsive). Parte II. Programación Web I. Semana 8.

IACC-2020
20
SEMANA 8 – PROGRAMACIÓN WEB I

IACC-2020
21