SEMANA 1 – PROGRAMACIÓN WEB II

Programación Web II

SEMANA 1

Diseño HTML adaptable (Responsive), Bootstrap

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ón de dichos derechos puede constituir un delito contra la propiedad intelectual.
IACC-2020
1
SEMANA 1 – PROGRAMACIÓN WEB II

APRENDIZAJES ESPERADOS
El estudiante será capaz de:

• Emplear Diseño HTML adaptable (Responsive)

Incorporando Imágenes y CSS en Distintos Medios

IACC-2020
2
SEMANA 1 – PROGRAMACIÓN WEB II

APRENDIZAJES ESPERADOS.................................................................................................................. 2
INTRODUCCIÓN .................................................................................................................................... 4
RESUMEN ............................................................................................................................................. 5
PALABRAS CLAVE.................................................................................................................................. 5
PREGUNTAS GATILLANTES ................................................................................................................... 6
1. DISEÑO HTML RESPONSIVE EN SINGLE PAGE APLICATION ......................................................... 7
2. PASOS PARA DESARROLLAR UN DISEÑO ADAPTABLE (RESPONSIVE).......................................... 8
2.1. PASO 1 .................................................................................................................................. 8
2.2. PASO 2 .................................................................................................................................. 9
3. IMÁGENES .................................................................................................................................. 10
4. BORDES ...................................................................................................................................... 11
5. VIEWPORT .................................................................................................................................. 12
COMENTARIO FINAL .......................................................................................................................... 14
REFERENCIAS ...................................................................................................................................... 15

IACC-2020
3
SEMANA 1 – PROGRAMACIÓN WEB II

INTRODUCCIÓN
Actualmente la mayoría de las personas
utilizan más su dispositivo móvil que un
ordenador para acceder a internet y
solucionar un buen porcentaje de sus
necesidades en el día a día. Debido al auge y
evolución de la tecnología en cuanto a
smartphones y tablets existen varios tipos de
formatos de pantalla, lo que obliga a adaptar
los formatos y estructuras a estos nuevos
dispositivos con sistemas inteligentes que se
adapten a todos ellos.
En este orden de ideas, emerge el diseño
HTML adaptable o responsive, el cual
corresponde a una tendencia mundial para el
desarrollo de sistemas web, los cuales pueden
visualizarse en cualquier tipo de dispositivo,
desde una computadora de escritorio hasta
un dispositivo móvil inteligente.
Ahora bien, en esta oportunidad se
emplearán tanto el lenguaje HTML como la
tecnología CSS para incorporar imágenes y
estilos en diferentes medios o contenedores,
es decir, crear una página o sistema web
capaz de adaptarse a cualquier dispositivo. El
sistema detecta el ancho o formato de la
pantalla y a partir de allí adapta cada uno de
los elementos que el contiene a ese formato.

"Tú no decides qué aparato utiliza la gente para acceder a tu página.

Tus usuarios sí”
Karen McGrane.

IACC-2020
4
SEMANA 1 – PROGRAMACIÓN WEB II

RESUMEN
En este encuentro se desarrolla la temática relacionada con el diseño HTML adaptable (responsive)
incorporando imágenes y CSS en distintos medios, para esto se combinarán códigos o etiquetas de
HTMLcon la tecnología CSS para dar formatos y estilos al contenido de la página o sistema web.

La combinación de estas herramientas le permite a diseñadores y programadores la correcta

visualización de un sistema web en distintos dispositivos, elimina el riesgo de crear contenidos
duplicados y se crean paginas o sistemas para todas las resoluciones de pantalla, navegadores,
motores de búsqueda y velocidades de conexión

Por otra parte, las hojas en estilo cascada o CSS es el formato que permite aplicar estilos a elementos
que están dentro de un documento HTML, por ejemplo, aplicar un tipo de fuente o color, aplicar
imágenes o color de fondo, bordes, entre otros.

PALABRAS CLAVE

CSS Responsive Source

HTML Viewport Picture

IACC-2020
5
SEMANA 1 – PROGRAMACIÓN WEB II

PREGUNTAS GATILLANTES
• ¿Qué es el Diseño HTML adaptable o responsive?

• ¿Se puede modificar de manera independiente el contenido de un sitio web?

• ¿De qué manera HTML se combina con la tecnología CSS para lograr funcionalidad, diseño
y organización estructura dentro de un website?

IACC-2020
6
SEMANA 1 – PROGRAMACIÓN WEB II

1. DISEÑO HTML RESPONSIVE EN SINGLE PAGE APLICATION

Actualmente, es posible acceder a un
sitio web desde cualquier tipo de
dispositivo, computadores de
escritorio, tablet, smartphones, entre
otros, manteniendo el formato y
tamaño de la pantalla donde se
visualiza la información. Esta
característica se acredita al empleo del
diseño adaptable o Responsive Web
Design.

Técnica Adaptable o Responsive

Fuente: https://lenguajecss.com/

Responsive, es un conjunto de técnicas que permiten hacer un diseño web adaptable a las
dimensiones del dispositivo desde donde se está accediendo, específicamente al tamaño de la
pantalla. Esto surge debido a las condiciones actuales de la web, anteriormente, solo se tenía acceso
a contenidos de internet desde los ordenadores, hoy en día se puede hacer desde cualquier medio
o dispositivo y los desarrolladores web deben ocuparse en que los sitios se vean bien en cualquiera
de estos.

Responsive se enfoca en

Todos los
Todas las Todas las
navegadores
resoluciones y velocidades
y motores de
formatos de conexión
búsqueda

IACC-2020
7
SEMANA 1 – PROGRAMACIÓN WEB II

Por otra parte, el diseño adaptable se caracteriza por:

Utilizar una única

Atender las
URL que permita
Mejor navegación, necesidades actuales
compartir el
permitiendo que los y estar preparados
contenido de una
usuarios tengan una para el futuro, con la
manera práctica y
mayor visualización finalidad de cubrir
sencilla, debido a
de los sitios web y nuevas necesidades y
que se utiliza un solo
encuentren darles respuestas
diseño en cualquier
rápidamente lo que inmediatas aplicando
tipo de dispositivo y
buscan. tecnologías existentes
por ende se vincula
o nuevas.
un solo enlace.

2. PASOS PARA DESARROLLAR UN DISEÑO ADAPTABLE

(RESPONSIVE)
Se debe recordar que: antes de comenzar a desarrollar se debe tener el objetivo del website, esto
es haber realizado un prototipo en papel donde, tanto el desarrollador como el cliente han llegado
a un acuerdo sobre los elementos y contenidos que debe contener la web.

2.1. PASO 1

Crear un HTML con el contenido que se desea mostrar

Para comenzar a desarrollar el diseño se debe escribir el contenido con HTML, este debe ser igual
para todos los dispositivos donde se visualizará la información, en esta fase el lenguaje CSS mediante
la aplicación de reglas, permitirá aplicar el formato adecuado para mostrar el contenido, dando
como resultado que el diseño sea adaptativo.

IACC-2020
8
SEMANA 1 – PROGRAMACIÓN WEB II

En tal sentido, este código debe contener tanto las interfaces necesarias para su funcionalidad como
la información completa de website, es decir, contenidos reales en cuanto a texto, imágenes tales
como barras de navegación, iconos de redes sociales, logo corporativo, entre otros.

2.2. PASO 2

Aplicar CSS
Como se ha descrito anteriormente, además de organización estructural, la web demanda
funcionabilidad y diseño, para esto se presenta un nuevo paradigma donde se presentan HTML, CSS
y Javascript como una herramienta integrada.

En sus inicios el lenguaje HTML contenía limitaciones y complejidades, existían atributos dentro de
las etiquetas que se encargaban de darle un estilo a cada elemento, esto trajo como consecuencia
una escritura de códigos compleja a medida que el lenguaje iba evolucionando, lo cual no pudo
satisfacer las demandas de los desarrolladores. En tal sentido, emerge la tecnología CSS como una
forma de separar la presentación del contenido. Desde ese momento se desarrolla en paralelo
cubriendo las necesidades de los diseñadores.

Respecto a la combinación de los lenguajes, Gauchat (2012, p. 31) en su libro de HTML 5, CSS3 y
Javascript, dice que la especificación de HTML 5 fue desarrollada considerando CSS a cargo del
diseño. Debido a esta consideración, la integración de HTML y CSS es ahora vital para el desarrollo
web y esta es la razón por la que cada vez que se menciona HTML 5 también se hace referencia a
CSS3, aunque oficialmente se trate de tecnologías completamente separadas.

Se debe recordar que: el contenido se refiere a que es lo que se desea mostrar y se escribe en HTML
(Barras de navegación, banners, imágenes, formularios, textos) mientras que la presentación es
como se mostrará (fondos, tipografías, colores, medidas entre imágenes).

Estilos y estructuras CSS

El lenguaje CSS trabaja en conjunto con HTML para incorporar estilos visuales a los elementos del
documento como bordes, tamaños, colores, fondos, entre otros. Existen algunas técnicas básicas
para definir la estructura de un documento, tales como:

IACC-2020
9
SEMANA 1 – PROGRAMACIÓN WEB II

Elementos block
Cada navegador de acuerdo a su tipo, ordena por defecto la forma en que los elementos son
mostrados en la pantalla, estos pueden ser: block (bloque) o inline (en línea).

block inline
Posicionado uno sobre otro hacia abajo en la Posicionado lado a lado en la misma línea, sin
página. ningún salto de línea, a menos que no exista
ningún salto horizontal para ubicarlos.

Actualmente los navegadores tratan los elementos estructurales de las páginas como block por
defecto, es decir, cada etiqueta HTML (˂section˃ ˂nav˃ ˂header˃ ˂footer˃ ˂div˃ entre otras), que
representa una parte de la organización visual estará posicionado debajo del anterior.

Modelos de caja
Una página web es un grupo de cajas ordenadas siguiendo ciertas reglas. Estas reglas son
establecidas por estilos provistos por los navegadores o por los diseñadores usando CSS. Gauchat
(2012).

La tecnología CSS contiene unas características predeterminadas, las cuales al combinarse forman
un conjunto de reglas que se utilizan para agrupar cajas y obtener la organización de la información
deseada en la pantalla. Generalmente a esta combinación de reglas se le llama sistema de
disposición o modelo de caja.

3. IMÁGENES
Este es un elemento que requiere tratamiento especial para producir sitios adaptables, en la
mayoría de los casos se le asigna con CSS una anchura relativa, de esta manera la imagen aumenta
si el tamaño del dispositivo es más grande. La esencia del responsive es poder asignar imágenes
acordes con el tamaño de la pantalla del dispositivo donde se visualice el contenido, esto se realiza
con una etiqueta llamada PICTURE.

La etiqueta PICTURE se emplea como un contenedor donde se escriben varias imágenes para que
luego el navegador seleccione la apropiada para cada dispositivo. Dentro de esta etiqueta se
escriben varias etiquetas SOURCE. Además, como modo de emergencia o de fallback en caso de que
el navegador no implemente HTML 5 PICTURE se debe escribir una imagen corriente con la etiqueta
IMG.

IACC-2020
10
SEMANA 1 – PROGRAMACIÓN WEB II

Para que cada navegador pueda seleccionar la imagen o el archivo gráfico correspondiente se debe
insertar un atributo de tipo “media” escribiendo una media query CSS, estas son unas herramientas
del diseño adaptativo o responsive web design, las cuales sirven para definir estilos en los diferentes
tamaños de los dispositivos, en líneas generales es una estructura condicional en la tecnología CSS.
Ejemplo:

˂picture˃
˂source media=”(min-width: 600px)” srcset=”archivogrande.png”˃
˂source media=”(min-width: 480px)” srcset=”archivomediano.png”˃
˂img src=”archivopequeño.jpg”˃
˂/picture˃

De este modo el navegador que implemente la etiqueta PICTURE seleccionará la imagen para cada
caso, de lo contrario, mostrará la imagen que se encuentre en el tag IMG.

4. BORDES
Con la tecnología CSS es posible modificar el aspecto de los cuatro bordes de la caja que contiene
cada elemento (superior, izquierdo, derecho e inferior), las características de estos aspectos son:

Características Valor Especificación

border-style: None (estilo de borde) Estilo de borde
border-width: Tamaño Tamaño concreto del ancho del borde
border-width: Thin / medium / thick Tamaño predefinido del ancho del borde
border-color: Color Color que se usará en el borde

Los valores utilizados para cada tipo de borde son: hidden, dotted, dashed, solid, double, groove,
ridge, inset, outset, a continuación, se presenta un ejemplo:

div {
border-color: blue;
border-width: 1px;
border-style: double;
}

IACC-2020
11
SEMANA 1 – PROGRAMACIÓN WEB II

Se debe recordar que: un borde se muestra sí y solo si se especifican estas tres características (color,
estilo y ancho o grosor), en caso de no establecer un estilo, el navegador no mostrará el borde,
tomará la opción none por defecto.

El código que se muestra a continuación es parte de un ejemplo con bordes responsive.

<div class="responsiveBorderContainer1">
<div class="responsiveDiv"></div>
<div class="responsiveDiv"></div>
<div class="responsiveDiv"></div>
</div>
<style>
.responsiveBorderContainer1 {
width:100%;
height:100px;
background:rgb(224,127,122)
}
.responsiveBorderContainer1 .responsiveDiv {
float:left;
width:30.33%;
height:80px;
background:rgb(109,112,127);
margin:10px 1.5%
}
</style>

5. VIEWPORT
Este término se refiere a la parte visible de la página web en el navegador, este varía según el
tamaño del dispositivo y será más pequeña en un teléfono móvil que en la pantalla de una
computadora. HTML5 introdujo un método para permitir que los diseñadores web tomen el control
del viewport, a través de la etiqueta <meta> antes del elemento </head>. Ejemplo:

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

Donde el elemento <meta> proporciona al navegador instrucciones sobre cómo controlar las
dimensiones y la escala de la página.
Width se refiere al ancho de la página, este puede establecerse como device-with para que use al
ancho del dispositivo o en pixeles.

IACC-2020
12
SEMANA 1 – PROGRAMACIÓN WEB II

La parte initial-scale 1.0 establece el nivel de zoom inicial cuando el navegador carga por primera
vez la página.

IACC-2020
13
SEMANA 1 – PROGRAMACIÓN WEB II

COMENTARIO FINAL
El diseño de un website debe adaptarse a todas las condiciones donde pueda ser buscado y
visualizado, es decir, en cada navegador, motor de búsqueda, sistema operativo del ordenador y
pantallas, para cubrir esta necesidad se tienen las técnicas adaptables o responsive, las cuales
engloban tecnologías y prácticas que van evolucionando a través de tiempo.

En la medida que van surgiendo necesidades de desarrollo en cuanto a nuevos dispositivos y

sistemas, se van creando las respuestas implementando tecnologías existentes, técnicas
reformuladas o empleando estándares nuevos.

IACC-2020
14
SEMANA 1 – PROGRAMACIÓN WEB II

REFERENCIAS
Gauchat, J. (2012). El Gran libro de HTML 5, CSS y Javascript, 1ra edición. Barcelona.
Marcombo S.A

LaGrone, B. (2013). HTML5 and CSS3 Responsive Web Design Cookbook

Álvarez, M. (2001). Manual de JavaScript. [Web]. Recuperado de:

https://desarrolloweb.com/home/diseno-web

IACC-2020
15
SEMANA 1 – PROGRAMACIÓN WEB II

IACC-2020
16