INGENIERÍA EN DESARROLLO DE SOFTWARE

PROGRAMACIÓN WEB II

UNIDAD 3

Actividad 1

Importancia del diseño responsivo.

Estudiante: LCI Alejandro Rivera Olaiz

Matrícula: ES162013405

Docente: Lic. Angélica Cruz Caloch

UNIVERSIDAD ABIERTA Y A DISTANCIA DE MÉXICO

Hermosillo, Sonora.

02 de septiembre de 2019
Unidad 3.

Actividad 1: Importancia del diseño responsivo.

Introducción.

En la actualidad es indispensable que un desarrollo web esté diseñado de tal forma que el contenido
sea adaptable a cualquier dispositivo que intente desplegarlo los cuales cuentan con pantallas de
diferentes tamaños. Es muy importante que la información llegue completa hasta el receptor para
poderle hacer llegar el mensaje completo.

Existen muchas herramientas de diseño o frameworks que nos dan la facilidad de desarrollar los
sitios de una mejor manera, sencillo y rápido. Tal es el caso de Bootstramp del cual analizaremos un
poco más en la presente actividad.

Diseño web responsivo.

La historia del diseño web y HTML comienza desde inicios de la década de los 90 en donde se
incorporaban técnicas de diseño que estaban enfocadas a un diseño web estático debido a que no
se utilizaban diferentes tipos de dispositivos para visualizar contenidos. Se utilizaba en la gran
mayoría de los casos las computadoras.

Según la obra “Desarrollo Web Front-End utilizando Diseño Adaptativo” de Henry Llanos, fue hasta
los años 2000 – 2003 cuando se realizaron acciones por el problema de diseños diferentes, que
comenzó con la diferencia del diseño web contra el impreso y la llegada de la llamada web 2.0. En
los años siguientes existió una invasión al mercado de diferentes tipos de dispositivos que tenían la
necesidad de que los contenidos se adaptaran a estos.

En 2009 se pasó a un entorno de diseño web llamado Diseño fluido en donde para adaptarse a las
diferentes pantallas se utilizaban medidas relativas en términos de porcentaje. Para 2010 surge
HTML5 en donde Jeremy Keith plantea una única web que se debe de adaptar a cada dispositivo, lo
cual pasó a ser una necesidad en el año 2012.

“Técnica de diseño y desarrollo web que, mediante el uso de estructuras e imágenes fluidas, así
como d emedia-queriesen la hoja de estilo CSS, consigue adoptar el sitio web al entorno del
usuario”. Labrada, Esther & Salgado, Cristina (1 de enero de 2013).

No nomas se tratan de hacer pequeños los contenidos, sino que debe de cambiar la distribución,
tomando en cuenta la parte grafica y la funcional del diseño. En este punto existen dos caminos que
se pueden utilizar para el desarrollo. El primero es el desarrollo de sitios web por medio de código
puro en el desarrollo de la interfaz; y el otro es el desarrollo por medio del apoyo de frameworks
como Bootstrap, HTML5 Boilerplate, Foundation, Yahoo Pure, etc.

De acuerdo a Henry Llanos, las herramientas que permiten el desarrollo de un sitio web responsivo:

1. HTML+CSS en sus versiones más recientes.

2. Twiter Bootstrap
 3. HTML5 Boilerplate
4. Foundation
5. Yahoo Pure
6. HTML Kickstart
7. Skeleton
8. Less Framework
9. Gridless
10. Angular JS
11. Zebra
12. 52 Framework
13. Layer CSS

Respaldo de sitio web desarrollado en las unidades anteriores:

Capturas de pantalla sobre la instalación de Bootstrap.

Bootstrap (síntesis).

Existe una filosofía llamada Mejora progresiva establecida por Steven Champeon citado en Labrada,
Esther & Salgado, Cristina (1 de enero de 2013), que promueve hacer mejoras técnicas cada vez que
se presentan actualizaciones en los navegadores, garantizando que el sitio se mantenga
técnicamente a la vanguardia.

“Bootstramp comenzó como un proyecto interno de Twitter que posteriormente decidieron

publicar totalmente abierto a toda la comunidad web y se define asimismo como un front-end
limpio, intuitivo y con gran poder para aportar rapidez y facilidad al desarrollo web.” Alonso (2013).

El uso de estructuras es muy importante ya que ayuda a que los sitos sean fácilmente legibles e
identificables de sus partes principales. Lo anterior debido a la premisa de la adaptabilidad intuitiva
que se nos ha creado para el manejo de sitios web en términos de encabezados, pies de página,
menús, etc.

Es aquí en donde entra Bootstrap con sus características y herramientas que aportan widgets y
estilos para desarrollar con agilidad el front-end de las aplicaciones web.

Las características principales de Bootstramp son:

 Permite el diseño y desarrollo web de manera rápida.

 Permite crear interfaces limpias y simples.
 Framework para diseño adaptativo.
 Utiliza media queries HTML5 y sistema de rejillas
 Integración con componentes y comportamientos Javascript
 Compatibilidad con la mayoría de los navegadores.
 Plantillas predefinidas.

Código de Bootstramp que debe contener una plantilla HTML.

Se debe anexar en una META la etiqueta viewport para definir medidas y escala sobre el área del
navegador.

<meta name=”viewport” content =”width=device-width”, user-scalable = no”>

Se debe de hacer referencia al archivo CSS.

<link rel=”stylesheet” href=”css/bootstramp.min.css”

Mínimamente esa es la sintaxis que debe de contener.

Conclusión.

Uno de los frameworks de desarrollo de interfaz gráfica web más completos y fáciles de usar es
Bootstramp, si como desarrollador de software aprovechamos este tipo de herramientas
ganaremos tiempo e invertiremos menos esfuerzo en el diseño, permitiéndonos concentrarnos en
mejorar el back-end.
El hecho de ajustar el diseño a los términos del diseño responsivo ayudará a que la información que
queremos ofrecer a los usuarios en el sitio llegue de forma completa y limpia.

Bibliografía.

Aubry, Christophe (2014). HTML5 y CSS3 para sitios con Diseño Web Responsive. Ediciones ENI.
Barcelona, España.

Labrada, Esther & Salgado, Cristina (1 de enero de 2013). Diseño web adaptativo o responsivo.
UNAM Revista Digital Universitaria. Recuperado de:
http://www.revista.unam.mx/vol.14/num1/art07/art07.pdf

Llanos, Henry. Desarrollo Web Front-End utilizando Diseño Adaptativo. Cibertec. Recuperado de:
https://my.laureate.net/Faculty/webinars/Documents/Serie%20de%20CIBERTEC/Webinar%20201
5%20I%20-%20Ing.%20Henry%20LLanos%20Carranza.pdf

Alonso, Adrián (2013). Responsive web design: Interfaces Web Adaptables al dispositivo empleando
HTML5 y CSS3. Universidad De Alcalá. España.

Unidad 3. Programación web II. Diseño web profesional. UNADM. 2019.