Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Presentación Web II
Presentación Web II
Programación Web II
SEMANA 1
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:
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 desarrollo de sistemas web, los cuales pueden
utilizan más su dispositivo móvil que un visualizarse en cualquier tipo de dispositivo,
ordenador para acceder a internet y desde una computadora de escritorio hasta
solucionar un buen porcentaje de sus un dispositivo móvil inteligente.
necesidades en el día a día. Debido al auge y
Ahora bien, en esta oportunidad se
evolución de la tecnología en cuanto a
emplearán tanto el lenguaje HTML como la
smartphones y tablets existen varios tipos de
formatos de pantalla, lo que obliga a adaptar tecnología CSS para incorporar imágenes y
estilos en diferentes medios o contenedores,
los formatos y estructuras a estos nuevos
es decir, crear una página o sistema web
dispositivos con sistemas inteligentes que se
capaz de adaptarse a cualquier dispositivo. El
adapten a todos ellos.
sistema detecta el ancho o formato de la
En este orden de ideas, emerge el diseño pantalla y a partir de allí adapta cada uno de
HTML adaptable o responsive, el cual los elementos que el contiene a ese formato.
corresponde a una tendencia mundial para el
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.
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
IACC-2020
5
SEMANA 1 – PROGRAMACIÓN WEB II
PREGUNTAS GATILLANTES
• ¿Qué es el Diseño HTML adaptable o responsive?
• ¿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
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
2.1. PASO 1
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).
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:
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.
<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:
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.
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
IACC-2020
15
SEMANA 1 – PROGRAMACIÓN WEB II
IACC-2020
16