COLEGIO INMACULADO CORAZON DE MARIA

MISIONERAS CLARETIANAS
Bogotá D.C.

11111
ÁREA DE TECNOLOGÍA E INFORMÁTICA GRADO
MODULO DE TRABAJO Nº 1
PRIMER PERIODO - febrero 1 a abril 10
11°

ESTUDIANTE: _________________________________ CÓDIGO: ____ CURSO: _____

DOCENTE: ANDRES DIAZ PORRAS

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
1
 COMPETENCIAS INSTITUCIONALES GRADO UNDÉCIMO

NIVELES DE DESEMPEÑO DE LAS COMPETENCIAS

COMPETENCIAS COGNITIVO METACOGNITIVO

INTERPRETATIVO ARGUMENTATIVO PROPOSITIVO METACRÍTICO

CELEBRATIVA - MISIONERA Comprende los valores como Describe la forma como se ha Asume los valores de Analiza la forma como se
Utilizar responsablemente los la tolerancia, el respeto, la resignificado el sentido y uso de tolerancia, respeto, han venido pensando los
sistemas tecnológicos, la honestidad entre otros que los valores dentro de la sociedad solidaridad y honestidad conceptos del desarrollo
información y la Internet; generan un ambiente de tecnológica contemporánea. como base para vivir en social, igualdad, justicia y
demostrando actitudes de cordialidad y de paz entre la convivencia en una sociedad progreso tecnológico.
convivencia, solidaridad y respeto. comunidad. siendo un ciudadano de bien.
COMUNICATIVA Comprende lo que otras Argumenta sus exposiciones con Propone diferentes formas de Implementa y utiliza en
Aplicar e implementar tecnologías personas le expresan a través la construcción de presentaciones comunicación y expresión forma apropiada el
interactivas para colaborar, del uso de diferentes medios y el diseño páginas web ante la bajo diferentes plataformas de Internet, programas de
publicar, exponer, sustentar e
de comunicación. comunidad en general. programación de acuerdo a la presentaciones y
interactuar con compañeros,
expertos y otros auditorios. necesidad planteada. plataformas de
programación en el
desarrollo de sus
páginas web.

ECOLÓGICO - AMBIENTAL Analiza y reconoce las Comprende el daño ecológico que Propone y promueve técnicas Participa en la
Fomentar una cultura de consecuencias e incidencia se está presentando por el mal uso de conservación de los transformación positiva
pertenencia y conservación del de las nuevas tecnologías en de la tecnología. recursos naturales. del medio, vivenciando
medio ambiente utilizando la la naturaleza. los valores claretianos
tecnología para reducir al máximo que contribuyen a
la contaminación de su entorno. mejorar la calidad de
vida.
CIENTÍFICO – TECNOLÓGICA Identifica los avances, Justifica la importancia de los Considera la tecnología como Integra el saber pensar
Aplicar las bases lógicas del herramientas tecnológicas y avances científicos y tecnológicos una herramienta que facilita con el saber hacer,
conocimiento, utilizando la su aprovechamiento en las y su incidencia en el desarrollo de los procesos de construcción usando creativamente la
tecnología como una herramienta diferentes áreas y en la la vida diaria. del conocimiento para dar tecnología, en búsqueda
de apoyo que complementa el creación de sitios web. soluciones a situaciones de soluciones eficaces
proceso de formación y fomenta la presentes en la sociedad. para elevar la calidad de
interdisciplinariedad con otras vida y optimizar los
áreas. procesos y mejorar la
productividad.
CRÍTICO – CREATIVA Relaciona conocimientos Ingenia nuevas alternativas de Interioriza su papel como Desarrolla un
Comprobar, justificar y conocer la previos con los nuevos solución que permiten la agente transformador de una pensamiento divergente
variedad y diversidad de las aprendizajes para confrontar construcción del pensamiento sociedad. que le permite la
herramientas tecnológicas, para procesos y estrategias y dar lógico creativo. búsqueda de nuevas
ingeniar de manera critica e solución a los problemas alternativas y
innovadora nuevas alternativas planteados. posibilidades de solución
que permitan analizar situaciones a problemas planteados.
y problemas, hallando las causas
que los originan.
SOCIO – HISTÓRICA Comprende, interpreta y Analiza aportes y perjuicios Presenta en su proyecto final Entiende el papel que
Reconocer los cambios dentro de apropia conceptos históricos logrados por la tecnología a través el desarrollo histórico del juega el proceso
la dinámica global contemporánea, relacionados con la de los años. mismo y su incidencia en el histórico, comprendiendo
asumiendo que la sociedad es tecnología. desarrollo científico y como se ha llegado a
resultado de un proceso histórico tecnológico con los procesos conformar una sociedad
cultural y tecnológico. sociales, económicos, completamente
políticos y de nuestro país. tecnológica.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
2
 NIVELES E INDICADORES DE DESEMPEÑO DE LAS COMPETENCIAS

CONCEPTOS Y COMPETENCIAS Proceso Cognitivo: Saber y Saber Hacer Proceso

Período

CONTENIDOS BÁSICOS Metacognitivo:

Saber Ser

Interpretativo Argumentativo Propositivo Metacritico

APLICACIONES WEB II CONOCER

GENERALIDADES DE Identifica la Utiliza los applets Elabora páginas Valora los
LENGUAJES HTML5, estructura básica para aprender y sencillas recursos
• Practica web de programación poner en práctica aplicando institucionales
CSS3 Y DONDE
responsive. de páginas HTML5 la relación entre el conceptos de para un mejor
REALIZA
• Espaciados, estilos APLICATIVOS y CSS3 lenguaje JAVASCRIPT, aprendizaje de la
de texto. BÁSICOS EN ESTAS JAVASCRIPT, el HTML5 y CSS3 materia.
• Formularios. PLATAFORMAS. HTML5 y uso del
• Todos los CSS3
Primero

componentes

RECURSOS:

1. Bibliografía Libros de Referencia y Textos:

2. Bibliografía Interactiva:
• Codina, J. (2015, 27 mayo). 5 soluciones prácticas para el desarrollo de Responsive Web Design.
Blog IDA Chile | Estrategia para el éxito de tu negocio. https://blog.ida.cl/desarrollo/5-soluciones-
practicas-para-el-desarrollo-de-responsive-web-design/
• ¿Qué es el Diseño Responsive? (2015, 1 abril). 40deFiebre. https://www.40defiebre.com/que-
es/diseno-responsive
• Estilos para párrafos. (s. f.). IntroducciÃ3n a la programaciÃ3n Web. Recuperado 13 de octubre
de 2020, de
https://ajgallego.gitbook.io/web/capitulo_css/capitulo_css_estilos_basicos/capitulo_css_estilos_p
ara_parrafos
• Otto, M. J. T. (s. f.). Forms. Bootstrap. Recuperado 13 de octubre de 2020, de
https://getbootstrap.com/docs/4.0/components/forms/
• Curso de bootstrap 4 desde cero. (2020, 28 septiembre). Edutin. https://edutin.com/curso-de-
bootstrap-4-desde-cero-3724
•

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
3
 ¿Qué es una aplicación Web?

Cada vez es más común que en cualquier tipo de entidad (empresa, asociación, negocio,
autónomo, institución…) necesite una solución informática ajustada a sus necesidades. Y
cada vez es más habitual que se nombre una “Aplicación Web” como la respuesta a estas
necesidades.

Pero, ¿De qué tipo de programas informáticos estamos hablando?

El abanico es tan amplio que es difícil concretar en un

texto las infinitas posibilidades que existen. Aquí os
dejamos algunos ejemplos

•
Aplicaciones para la gestión interna y completa
de la entidad (facturación, stock, clientes,
usuarios, socios, contabilidad, fichar, gestión de
personal…),
• Herramientas de trabajo diversas para
entidades (intranets, gestión documental,
trabajo en red, herramientas compartidas
accesibles por múltiples usuarios, accesos diferenciados…)
• Servicios a usuarios (gestión de incidencias, accesos a contenidos diferenciados por permisos,
gestión de espacios…)
• Herramientas de comunicación digital (mailings, boletines digitales, comunicaciones
personalizadas a clientes o usuarios…)
• Herramientas de Control de Calidad de la empresa.
• Herramientas web (tiendas virtuales personalizadas, webs complejas con multitud de elementos
y accesos, repositorios y buscadores, gestión de ventas online…)
• Otros tipos de servicios (cualquier tipo de aplicación que se te ocurra como gestión de
inmuebles, comunidades de propietarios, turismo, mapas, formación, colegios, tiendas… y otra
muchas que están por crear)

Y ¿Qué es en realidad una aplicación web?

Una aplicación web es una aplicación o herramienta informática

accesible desde cualquier navegador, bien sea a través de
internet (lo habitual) o bien a través de una red local. A través del
navegador se puede acceder a toda la funcionalidad y tener
cualquiera de las soluciones enumeradas en el punto anterior.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
4
Tiene unas grandes ventajas:

• La primera gran ventaja es que no necesita ningún tipo de instalación, ya que se accede a
través de un navegador.
• Además, una aplicación web es multiplataforma y multidispositivo. Esto significa que nos
podemos olvidar de que software tiene cada dispositivo que accede, y que puede acceder
igualmente un ordenador, una Tablet, un smartphone…
• Y otra gran ventaja es que la potencia no está en el dispositivo que accede, por lo que, aunque
no tengamos un superordenador la aplicación puede ser muy potente, ya que el peso no lo
soporta el equipo desde el que se accede sino el servidor donde está alojada.
• La aplicación puede estar en la nube, con lo que sería accesible para cualquier ordenador con
acceso a internet (aunque también podría ser una aplicación local en una intranet)
• Y para finalizar, es muy adaptable, visualmente intuitiva y muy fácil de actualizar si fuera
necesario.

Hace unos años muchas de estas necesidades se cubrían con aplicaciones de escritorio. Pero
en este mundo conectado, las aplicaciones web tienen muchas ventajas como hemos visto.

Pero ¿Cómo funciona exactamente?

La aplicación web tiene 3 partes:

• La base de datos, que es donde se almacenan los datos de la solución (contenidos, usuarios,
permisos…)
• El código de la aplicación, es decir, la aplicación en sí, que se almacena en un servidor de
aplicaciones (normalmente en la nube, pero puede estar alojado también en un servidor local)
• El usuario, que accede con cualquier dispositivo a través de un navegador. Aquí se incluye,
dependiendo de la aplicación, tanto el administrador o gestor como el usuario final (en caso de
que se ofrezca un servicio), que accederán a diferentes secciones según sus permisos (o incluso
aplicaciones)

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
5
Hay diferentes tecnologías para el desarrollo de una aplicación, aunque actualmente las más
comunes son:

• Las bases de datos más utilizadas son SQL Server o MySql

• Para la aplicación, se utiliza normalmente ASP.NET (con diferentes lenguajes posibles) o PHP
• El navegador del usuario suele recibir la información en HTML5

Algunos ejemplos concretos de Aplicaciones web

Os contamos algunos ejemplos concretos de Aplicaciones Web desarrolladas por Neosoft,

aunque son solo un pequeño ejemplo ya que las posibilidades son inmensas:

• Aplicación Web para comunidades de propietarios: Intranet, gestión documental, tablón de

anuncios, gestión de incidencias en las comunidades, comunicación con los propietarios,
repositorio documental, estadísticas para propietarios con análisis de resultados….
• Aplicación Web para gestión de inmuebles: Alta, baja y modificación de inmuebles, estadísticas
y análisis de cambios, histórico de modificaciones, estadísticas de valores numéricos, acceso
diferenciado por permisos, cálculos de cifras globales, exportación de resultados…
• Aplicación Web de gestión de incidencias: Alta de incidencias, asignación de técnicos, control
de resoluciones, tiempos de atención, histórico de modificaciones, gestión de diferentes tipos de
contratos de clientes, gestión de clientes….

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
6
 • Aplicación Web para la gestión de ventas: Tienda virtual con pago online, gestión automática de
facturación, control interno de ventas, estadísticas por clientes, control de productos, gestión de
descuentos por producto o por cliente, diferenciación de clientes…
• Aplicación Web para fichar: Aplicación para diferentes usuarios de una entidad para fichar desde
diferentes lugares de trabajo, gestión de bajas y ausencias, estadísticas de horas de entrada,
tiempos de trabajo….
• Aplicación Web Turismo: Gestión de mapas con diferentes tipos de puntos, reservas, espacios
de información, repositorio de documentación turística, contacto….
• Aplicación Web Portal: Portal web complejo con campañas de firmas, recogida de donaciones,
múltiples elementos como emergencias, actualizaciones, noticias de diferentes tipos,
comunicaciones digitales, recogida de datos personalizados….
• Aplicación Web Comunicación: Gestión de envíos de comunicaciones a clientes, gestión de
usuarios automática con altas, bajas y modificaciones seguras por parte del propio usuario,
diferentes tipos de envíos con plantillas.

¿En qué consiste el diseño responsive?

Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho
de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario.
Se caracteriza porque los layouts (contenidos) e imágenes son fluidos y se usa código media-
queries de CSS3.

El diseño responsive permite reducir el tiempo de desarrollo, evita los contenidos

duplicados, y aumenta la viralidad de los contenidos ya que permite compartirlos de una
forma mucho más rápida y natural.

¿Qué desafíos identificamos en la etapa del diseño?

• Diseñar por porcentajes, no por pixeles. Ya no es posible seguir ocupando cajas de tamaño
único distribuidas en una pantalla de ancho fijo. El diseño responsive obliga a la utilización de
una grilla flexible, donde los elementos agrupados en ella serán medidos por porcentaje de
pantalla, no por pixeles.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
7
 • Diseñar para pantallas, no para dispositivos. El mercado tecnológico actual es
multidispositivo, sin estándares de ningún tipo. Por ello, la clave es pensar en todos los tamaños
de pantalla, no solo en aparatos, lo que dejaría al diseño obsoleto en poco tiempo.
• Diseñar para tocar, no para clicks. La interacción con los contenidos web se complejiza al
eliminar el mouse en las pantallas táctiles. Por eso, un diseño responsive también debe
contemplar el dedo como input, lo que implica mayores tamaños en botones y links, entre otras
soluciones.
• Diseñar para pantallas pequeñas primero. El concepto clave es Mobile First, porque permite
pensar desde lo más pequeño y esencial, a lo más grande y accesorio.

¿Y en el desarrollo del sitio?

En la etapa de implementación de los sitios web adaptativos nos hemos encontrado con
diversos problemas, básicamente relacionados con el manejo de HTML5, CSS3 y Javascript.
A continuación, compartimos cinco soluciones a estas dificultades.

Problema: Imágenes en dispositivos Retina Display

En dispositivos móviles con pantallas de alta definición -Retina display- las imágenes usadas
para la iconografía (PNG) se muestran pixeladas.

Solución:

Adoptamos el formato de imágenes SVG (Gráficos Vectoriales Redimensionables), que como

su nombre lo dice, son imágenes en vectores que permiten aumentar o reducir el tamaño sin
comprometer la calidad de la visualización. En comparación con los formatos JPG o PNG, el
SVG tiene un peso mucho menor y puede ser escalado a cualquier tamaño sin perder la calidad
de imagen, haciéndolo ideal para dispositivos con mayor densidad de pixeles por pulgada. Este
formato se puede utilizar perfectamente como una imagen común y corriente, insertandola
dentro del atributo “src” de cualquier etiqueta <img>.

Ejemplo:

Problema: Conexiones lentas en móviles

La mayoría de los dispositivos móviles acceden a internet a través de conexiones limitadas e

inestables, lo que ralentiza la carga del contenido de los sitios responsive.

Solución:

Los sitios web desarrollados en diseño responsive cargan todo el contenido sin discriminar
dispositivos. El problema más común sucede con las imágenes, que consideran también la
petición al servidor y la descarga. Como alternativa a esta limitante insertamos la imagen
COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS
Prohibida su reproducción total o parcial
2021
8
directamente en el documento a través de Data URIs. Básicamente es un string extenso que
contiene la información de la imagen codificada para que el navegador la interprete y la
despliegue sin necesidad de realizar peticiones al servidor o descargarlas, lo que disminuye
considerablemente el tiempo de carga del documento. Existen muchas herramientas gratuitas
para generar estos códigos, una de ellas es Data URI Generador, donde solo basta con subir la
imagen y obtenemos el código.

Ejemplo:

Estilos para párrafos

Los estilos para párrafos nos permiten cambiar propiedades de todo un párrafo o bloque de
texto, como por ejemplo el espaciado entre las líneas, la alineación, etc.

• line-height: normal | unidades CSS Ejemplos: line-height: 12px; line-height: normal; El

alto de una línea, y por tanto, el espaciado entre líneas. Es una de esas características
que no se podían modificar utilizando HTML.
• text-align: left | right | center | justify Ejemplos: text-align: right; text-align: center; Sirve
para indicar la alineación del texto. Es interesante destacar que las hojas de estilo
permiten el justificado de texto, aunque recuerda que no tiene por qué funcionar en todos
los sistemas.
• text-indent: Unidades CSS Ejemplos: text-indent: 10px; text-indent: 2in; Un atributo que
sirve para hacer sangrado o márgenes en las páginas.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
9
 Ejemplos

Para alinear el texto de un párrafo a la derecha podemos utilizar:

En este otro ejemplo vamos a colocar un texto centrado, con un interlineado mayor, con
el texto en cursiva y gris. Además, definiremos la hoja de estilo en la cabecera de la
página:

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
10
 Formulario
Configuración predeterminada de Bootstrap 4

Los controles de formulario reciben automáticamente un estilo global con Bootstrap. Todos
los elementos textuales <input>, <textarea> y <select> con la clase. form-control tienen un
ancho del 100%.

Bootstrap 4 diseños de formulario

Bootstrap 4 provee dos tipos de diseño de formularios:

• Formulario apilado (ancho completo)

• Formulario en línea

Formulario apilado (ancho completo)

El siguiente ejemplo crea un formulario apilado con dos campos de entrada, una casilla de
verificación y un botón de envío.

Agrega un elemento contenedor con. form-group, alrededor de cada control de formulario, para
garantizar los márgenes adecuados.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
11
COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS
Prohibida su reproducción total o parcial
2021
12