GESTIÓN DE FORMACIÓN PROFESIONAL INTEGRAL

PROCEDIMIENTO DESARROLLO CURRICULAR

GUÍA DE APRENDIZAJE

1. IDENTIFICACIÓN DE LA GUIA DE APRENIZAJE

 Denominación del Programa de Formación: Tecnólogo en Análisis y Desarrollo de Sistemas de

Información

 Código del Programa de Formación: 228106

 Nombre del Proyecto (si es formación Titulada): Diseño y desarrollo de sistemas informáticos
orientados a las pymes del departamento del Tolima.

 Fase del Proyecto ( si es formación Titulada): Desarrollar

 Actividad de Proyecto(si es formación Titulada): Desarrollo del sistema de información

 Competencia: Construir el sistema que cumpla con los requisitos de la solución informática

 Resultados de Aprendizaje Alcanzar: Realizar la codificación de los módulos del sistema y el

programa principal, a partir de la utilización del lenguaje de programación seleccionado, de
acuerdo con las especificaciones del diseño.

 Duración de la Guía: 6 HR

2. PRESENTACIÓN

El aprendiz con los conocimientos en HTML, CSS, JQuery, van a incluir a sus páginas web Bootstrap a
cada una de sus páginas asignadas. Bootstrap es un framework de diseño web, una librería con código
CSS, HTML y Javascript para crear interfaces de usuario y layouts de páginas que nos permite
resultados profesionales sin tener que conocer cómo se hacen ciertas cosas de diseño.

3. FORMULACION DE LAS ACTIVIDADES DE APRENDIZAJE

 Descripción de la(s) actividad(es)

3.1 Actividades de Reflexión inicial

Analice cada una de las frases, tendrá 5 minutos para interiorizar y así poder realizar la
socialización.

GFPI-F-019 V3
SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE
 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

3.2 Actividades de Contextualización e identificación de conocimientos necesarios para el

aprendizaje

BOOTSTRAP, EL FRAMEWORK HTML5 PARA DISEÑO WEB RESPONSIVE (I)

A nadie creo que le quede duda de que actualmente es casi obligatorio desarrollar sitios web que estén
totalmente adaptados a su utilización desde múltiples dispositivos (tabletas, móviles, portátiles, PCs…).
Este post es el arranque de una colección de ellos en los que haremos un recorrido sobre BOOTSTRAP que
pretender ser a la vez sistemático y práctico .

Qué es Bootstrap 3

BOOTSTRAP es uno de los principales frameworks de desarrollo de entornos web “responsive” (es decir,
que se adaptan automáticamente al tamaño de pantalla que utiliza cada usuario), y no entraremos aquí a
debatir sobre si es mejor o peor que BoilerPlate o cualquier otro. Ambos son geniales, e infinitamente
superiores a no usar ningún framework para tu front-end responsive.

Esencialmente Bootstrap (y su versión 3 que es la que utilizaremos) está formado por una colección de
hojas de estilo y funciones javascript auxiliares que permiten construir muy rápidamente un front-end
responsive. Está pensado para trabajar bajo el concepto “mobile first”, es decir, diseñar pensando ante
todo en los dispositivos móviles. La razón de este enfoque es bastante obvia: un dispositivo móvil tiene
una pantalla mucho más pequeñita, y un uso táctil más limitado que un ordenador con su ratón y su
pantalla de 17 pulgadas en adelante. Así que es buena idea trabajar pensando en la situación
desfavorable, pues luego nos será fácil adaptarnos a la más favorable. Bastante más fácil que al contrario.
 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

Cuánto cuesta aprender Bootstrap

Cuesta MUY POCO empezar a trabajar con él y obtener resultados más que curiosos. Obviamente con
unos conocimientos de base en HTML y CSS. En un par de horas puedes tener tus primeros resultados
esperanzadores, y en el primer proyecto terminar con la sensación de que ya llevas las riendas. Ahora
bien, no nos engañemos, hablamos de una hoja de estilos de unas 6000 líneas, y con mucho más grano
que paja. Dominarlo verdaderamente, como toda disciplina, cuesta lo suyo. EMPEZAMOS?

Desplegando Bootstrap

Como artículo introductorio, nos vamos a limitar a desplegar un Bootstrap estándar en nuestro equipo, de
la forma más básica. Para ello:

 Entramos a www.getboostrap.com y lo descargamos. Es simplemente un zip de unos 200Kb

 Lo descomprimimos donde vayamos a trabajar, y encontramos 3 carpetas (css, fonts, js) y unos
cuantos archivos dentro de cada una de ellas. Por si a alguien se le ocurre que no necesita más fuentes
puesto que ya tiene muchas, avisar que esas fuentes son en realidad iconos (glyphs) que nos serán
útiles en muchas ocasiones, así que resistamos la tentación de borrar la carpeta de fuentes.

Vamos a crear nuestro primer archivo con estructura básica. Sería algo así como esto:

01<!DOCTYPE html>

02<html lang="es">

03<head>

04<meta http-equiv="content-type" content="text/html; charset=UTF-8">

05<meta charset="utf-8">

06<title>TITULO PÁGINA</title>

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

08<link href="css/bootstrap.min.css" rel="stylesheet">

 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

09<link href="css/misestilos.css" rel="stylesheet">

10</head>

11<body>

12...

13</body>

14</html>

Sí, es una estructura HTML 5. A pocos se les ocurrirá trabajar con Bootstrap en XHTML o similar. Se supone
que estamos avanzando con Bootstrap, y no al contrario. No nos vamos a detener ahora en etiquetas
sobre HTML 5 ni en aquellas que tendrían relación con el tema responsive como el viewport. Estamos en
un arranque práctico, y vamos a lo práctico.

Sobre el patrón HTML mostrado arriba, lo único que tendremos que tener en cuenta es:

1. Recordar que estamos trabajando en UTF-8 y guardar nuestro archivo como UTF-8, puesto que
algunos editores de texto / código tienen tendencia a guardar en formato ANSI si no especificamos
otra cosa.
2. Referenciar adecuadamente las rutas de las hojas de estilos.
3. Separar en dos hojas los estilos nativos de bootstrap (bootstrap.css que es la hoja de estilos
normal y bootstrap.min.css que es lo mismo pero sin espacios para ahorrar tamaño de archivo) y
aquellos que vamos a definir nosotros para nuestro proyecto. Que podrán ser totalmente nuevos o
modificaciones a los nativos de bootstrap, pero vamos a dejarlos siempre en una hoja aparte. Eso nos
permitirá actualizar bootstrap en el futuro sin problemas (o con muchos menos problemas en el peor
de los casos).

Ya tenemos Bootstrap en funcionamiento.

 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

El siguiente paso es darse una vuelta por la sección componentes de getbootstrap.com y copiar y pegar en
nuestro ejemplo unos cuantos componentes, para ponernos los dientes largos y ver cuántas cosas
podemos hacer y qué monas quedan con sólo copiar y pegar.

3.3 Actividades de Apropiación del Conocimiento

Taller

Realice el siguiente taller de forma individual y digital en este mismo documento debajo de cada uno de
las preguntas. Luego de realizar el taller por favor deben subirlo a las Bb, Actividades de Proyecto,
Desarrollo de Sistema de Información, Evidencias Taller Bootstrap. Fecha 01/10/2018, hora: 10:00 am

Responda las siguientes preguntas:

a) ¿Qué es responsive?

El Responsive web Design es una técnica de diseño y desarrollo web que se ha convertido en una
de las tendencias más populares de los últimos años: cada día son más los usuarios que se
conectan desde distintas plataformas.

b) ¿Qué es Bootstrap?

Bootstrap es un framework desarrollado y liberado por Twitter que tiene como objetivo facilitar el
diseño web. Permite crear de forma sencilla webs de diseño adaptable, es decir, que se ajusten a
cualquier dispositivo y tamaño de pantalla y siempre se vean igual de bien.

c) ¿Cuál es la funcionalidad de Boostrap en una PW?

Particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se
visualice. Es decir, el sitio web se adapta automáticamente al tamaño de una PC, una Tablet u otro
dispositivo. Esta técnica de diseño y desarrollo se conoce como “responsive design” o diseño
adaptativo.

d) ¿Cuáles son los conocimientos básicos que debe tener para trabajar Bootstrasp?

- Pensamiento estratégico: tener presente los objetivos y cometidos empresariales. Adecuar el

trabajo propio en beneficio de la visión y misión empresarial.
 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

- Aptitud de análisis: dentro del entorno de las tareas que corresponde realizar, al momento de
usar o descartar la información demandada para el acatamiento de ellas.
- Compromiso: ser comprometido e incitar el compromiso de los demás con el trabajo, con la
visión, misión, objetivos grupales y empresariales. Incitar el trabajo en equipo, y así conseguir
mejores resultados de la interacción grupal.
- Lidiar con conflictos: enfrentar conflictos tanto personales como grupales. Saber tratar con
compañeros dificultosos, y transformar el conflicto grupal en una disputa de la cual se
consigan resultados positivos y beneficiosos. Alentar el diálogo.

e) ¿Qué ventajas ofrece Bootstrap en el diseño responsive?

Entre las utilidades de Bootstrap, encontramos la creación de todo tipo de interfaces de usuario
para páginas web, desde simples elementos como o iconos hasta componentes de interfaz gráfica
avanzados como tips, tabs, desplegables, etc.

f) Qué Facilidades tiene para layouts responsive

Entre las utilidades que nos ofrece Bootstrap encontramos la posibilidad de crear layouts,
plantillas o simplemente maquetar contenidos, colocando elementos allá donde deseemos. La
gracia de todo es que está pensado para el desarrollo adaptable, conocido generalmente como
Responsive Web Design, y del que ya hemos hablado en numerosas ocasiones

g) Desventajas de Bootstrap:

Optimización. Bootstrap contiene mucho código para componentes, iconos, rejillas, etc. Si solo
vamos a usar una pequeña parte del framework no tiene sentido cargar todas sus utilidades.
Código HTML complejo. Nuestro código HTML tendrá que ser modificado para crear los
contenedores tal como Bootstrap necesita para cargar en ellos ciertos componentes. A veces las
soluciones HTML no son las más sencillas y nos obliga a generar código mayor del que sería
necesario si lo hiciéramos a mano.
Diseños muy similares entre sí. Si no personalizamos el diseño de nuestro sitio y no
personalizamos el tema gráfico de Bootstrap, obtendremos un diseño bastante aparente, pero
infelizmente parecido a otros millares de sitios de Internet

3.4 Actividades de transferencia de conocimiento:

a. En grupos (empresas asignadas), aplicar todos los conocimientos adquiridos (Bootstrap). Y

preparar una presentación de 10 minutos para sustentar. Se escogerá 1 y/o 2 integrantes del
grupo para realizar cambios en el código de la PW.
 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

4. ACTIVIDADES DE EVALUACIÓN

La evaluación se realizara en el día viernes 05/10/2018, a las 10:00 am. Por equipo de trabajo completo
(sustentar página de la empresa). Pero se evaluara de forma individual. Para ellos todos los integrantes
deben conocer el código de la página web de la empresa asignada.

Evidencias de Aprendizaje Criterios de Evaluación Técnicas e Instrumentos de

Evaluación

Evidencias de Conocimiento : Desarrolla adecuadamente el Utilización de las normas en el

informe sobre sobre la documento Entregado –
metodología y técnicas de desarrollo de la evaluación
recolección de información
Exposiciones y participación en
Participa activamente en los
foros haciendo uso de la Foros
Rúbrica TIGRE

Evidencias de Desempeño Participación activa y Lista de chequeo previamente

constructivamente en las definida Exposiciones y Foros
actividades planteadas
Evidencias de Producto: Trabajo escrito, mapas
Presenta el informe de
conceptuales, fotos y
recolección de información de
presentaciones de los temas
acuerdo a unos parámetros
vistos
definidos y hacer agenda de
trabajo y gestionarla

5. GLOSARIO DE TERMINOS

Cada aprendiz debe construir su propio glosario con las palabras desconocidas

PW: Páginas Web

PWE: Páginas Web Estáticas

PWD: Páginas Web Dinámicas

 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

Código embebido: En programación o desarrollo de páginas web, embeber significa insertar (incrustar)
código de un lenguaje dentro de otro lenguaje. ... Por ejemplo, las páginas web se desarrollan en lenguaje
HTML, pero puede embeberse códigos JavaScript o PHP para aumentar las posibilidades.

HTML: sigla en inglés de HyperText Markup Language

CC3: Cascading Style Sheets, es el lenguaje utilizado para describir la presentación de documentos HTML

JS: JavaScript, lenguaje de programación (HTML y CSS ), es interpretado, ligero, orientado a objetos y
permite que nuestro sitio web sea dinámico.

6. REFERENTES BILBIOGRAFICOS

http://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/

https://www.youtube.com/watch?v=nug1pMke-
y4&list=PLhSj3UTs2_yWTKvu1Aq3xUhzIJNBZ3MFW&index=1

https://www.youtube.com/watch?v=4gch7gnnRRs&list=PLhSj3UTs2_yWTKvu1Aq3xUhzIJNBZ3MFW&inde
x=3

https://www.youtube.com/watch?v=m-
fc3DgJ6C8&list=PLhSj3UTs2_yWTKvu1Aq3xUhzIJNBZ3MFW&index=4

https://www.youtube.com/watch?v=cIa7mYadCTo&index=5&list=PLhSj3UTs2_yWTKvu1Aq3xUhzIJNBZ3M
FW

https://www.youtube.com/watch?v=m-
fc3DgJ6C8&index=4&list=PLhSj3UTs2_yWTKvu1Aq3xUhzIJNBZ3MFW

https://www.youtube.com/watch?v=-
9NXJtE1bzI&index=6&list=PLhSj3UTs2_yWTKvu1Aq3xUhzIJNBZ3MFW

https://www.youtube.com/watch?v=7jxwf6gsk0Q&index=7&list=PLhSj3UTs2_yWTKvu1Aq3xUhzIJNBZ3MF
W

https://www.youtube.com/watch?v=nGXDzgX_WxI&index=8&list=PLhSj3UTs2_yWTKvu1Aq3xUhzIJNBZ3
MFW
 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

https://www.youtube.com/watch?v=WQb4eFIewGU&list=PLhSj3UTs2_yWTKvu1Aq3xUhzIJNBZ3MFW&in
dex=9

https://www.youtube.com/watch?v=25Pyem9Ls4w&list=PLhSj3UTs2_yWTKvu1Aq3xUhzIJNBZ3MFW&ind
ex=10

https://www.youtube.com/watch?v=VyzFp8c3JGo&list=PLhSj3UTs2_yWTKvu1Aq3xUhzIJNBZ3MFW&index
=12

https://www.cubicfactory.com/bootstrap-framework-html5-para-diseno-web-responsive-i/

https://www.arsys.es/blog/programacion/diseno-web/bootstrap-responsive/

http://www.ebooks7-24.com.bdigital.sena.edu.co/?il=682

Whitten, J. (2008). Análisis de sistemas diseño y métodos. Biblioteca Sena: McGraw-Hill Interamericana.

http://site.ebrary.com.bdigital.sena.edu.co/lib/senavirtualsp/reader.action?docID=10491474

Senn, J. A. (1992). Análisis y diseño de sistemas de información. McGraw-Hill Interamericana.

https://desarrolloweb.com/manuales/63/

http://iknaciotest.blogspot.com/p/pagina-web-dinamica.html

https://ebookcentral-proquest-
com.bdigital.sena.edu.co/lib/senavirtualsp/reader.action?docID=3214795&query=javascript

https://www.youtube.com/watch?v=36lQIPsfACM
https://www.ciudadano2cero.com/como-crear-una-pagina-web-en-html/

https://www.w3schools.com/

https://www.fotonostra.com/

7. CONTROL DEL DOCUMENTO

Nombre Cargo Dependencia Fecha

 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

Autor (es) YINA PAOLA TRUJILLO INSTRUCTOR COMERCIO Y 29/09/2018

MATIZ SERVICIOS

8. CONTROL DE CAMBIOS (diligenciar únicamente si realiza ajustes a la guía)

Nombre Cargo Dependencia Fecha Razón del Cambio

Autor (es) JUAN DAVID GUZMAN APRENDIZ COMERCIO Y 01/10 SOLUCIÓN

SALCEDO SERVICIOS