BOOSTRAP COMO HERRAMIENTA PARA DISEÑO RESPONSIVO EN APLICACIONES WEB

INSTITUTO DE EDUCACION SUPERIOR TECNOLOGICO PÚBLICO

“TUPAC AMARU”

PROGRAMA DE ESTUDIOS

 COMPUTACION E INFORMATICA

[pic 2]

TRABAJO DE APLICACIÓN PROFESIONAL

[pic 3]

 “BOOSTRAP COMO HERRAMIENTA PARA DISEÑO RESPONSIVO EN APLICACIONES WEB”

PRESENTADO POR:

• MARISOL RUTMERI CHOQUE COLQUE
• NOHEMI PILLCO LAIME

PARA OPTAR AL TITULO DE PROFESIONAL TÉCNICO EN COMPUTACIÓN E INFORMÁTICA

ASESOR:

Lic. MILTON EUSEBIO ESCOBAR CONTRERAS

                                        CUSCO – PERU

                                     2019

PRESENTACIÓN

Señor Director del Instituto Superior Tecnológico Público Túpac Amaru del Cusco, Señor Coordinador del Programa de Estudios de Computación e Informática, Señores Miembros del Jurado, en cumplimiento con el reglamento de grados y Títulos considerados por el instituto de Educación Superior Tecnológico Público Túpac Amaru del Cusco, ponemos a consideración vuestra éste TRABAJO DE APLICACIÓN PROFESIONAL denominado “BOOSTRAP COMO HERRAMIENTA PARA DISEÑO RESPONSIVO EN APLICACIONES WEB”, con el fin de Optar el Título de Profesional Técnico en Computación e Informática.

        El presente trabajo de aplicación profesional es investigar y dar a conocer los conceptos relacionados al Diseño Web Responsivo y Adaptativo de páginas web haciendo uso de etiquetas HTML 5, CSS y diversos frameworks CSS o conjunto de librerías de hojas de estilos, siendo uno de los principales: Bootstrap. Estos conjuntos de librerías denominados también marcos de trabajo, proveer módulos CSS 3 que facilitan el diseño responsivo o adaptativo de una página web haciéndolo capaz de adaptarse casi a cualquier tamaño de dispositivo,

.

Las egresadas.

INTRODUCCION

El desarrollo de una página Web, implica etapas como la planificación, el diseño, la implementación y el mantenimiento de la página web, en el que la etapa más importante es el diseño de la página web ya que implica realizar un diseño visual de la estructura, la distribución de los elementos que formarán parte de la página web y los vínculos entre los diversos documentos que la conformarán. En los inicios del desarrollo web, éste diseño visual comprendía la distribución de los diversos elementos utilizando básicamente tablas HTML, luego aparecieron las hojas de estilo CSS, los frames que facilitaban el diseño y la distribución de contenidos y proveían un diseño más elegante a las páginas web, se empezó a utilizar lenguajes script, por ejemplo, javascript y animaciones en flash, luego apareció PHP como lenguaje para el desarrollo de páginas web dinámicas, y todas estas herramientas fueron evolucionando, facilitando y mejorando el diseño web.

El diseñador web de hoy, dispone de todo un conjunto de herramientas que facilitan el diseño web y lo hacen adaptativo para cualquier dispositivo o equipo desde donde el usuario acceda a la aplicación web, herramientas tales como CSS 3, HTML 5, Framework de Estilos y gestión de componentes para páginas web.

INDICE

PRESENTACIÓN        2

INTRODUCCION        3

INDICE DE TABLAS Y FIGURAS        6

I.        TITULO DE LA APLICACIÓN PROFESIONAL        7

II.        IDENTIFICACION DEL PROBLEMA        7

III.        OBJETIVOS        7

3.1         OBJETIVO GENERAL        …………………………………………………………..7

3.2        OBJETIVOS ESPECIFICOS…………………………………………………….7

IV.        MARCO REFERENCIAL        8

4.1.         MARCO CONTEXTUAL        ………………………………………………………...8

4.1.1        LAS EMPRESAS Y SU POSICIONAMIENTO EN LA WEB        ………………………..8

4.1.2        RECURSOS TÉCNICOS Y TECNOLÓGICOS        …………………………………………………………8

4.2        MARCO TEÓRICO        ……………………………………………………………..12

4.2.1   PAGINA WEB        ……………………………………………………………………………………………………………..12

4.2.2        TIPOS DE PÁGINA WEB        ……………………………………………………………………………………….13

4.2.3        ELEMENTOS PRINCIPALES DE UNA PÁGINA WEB        ………………………………………..13

4.2.4        VARIABILIDAD EN LAS RESOLUCIONES DE PANTALLA        ……………………………..14

4.2.5        EL DISEÑO WEB        ………………………………………………………………………………………………..….15

∙        Características del Diseño Web Móvil        ……………………………………………………………………………...25

4.2.6        EL DISEÑO WEB RESPONSIVO        …………………………………………………………………………..26

a)        Fluid Grids y Diseño fluido        …………………………………………………………………………………………….......28

b)        Imágenes flexibles …………………………………………………………………………………………………………..…29

...