COLEGIO INMACULADO CORAZON DE MARIA

MISIONERAS CLARETIANAS
Bogotá D.C.
ÁREA DE ÉNFASIS

ASIGNATURA DE ÉNFASIS EN INFORMÁTICA GRADO

MÓDULO DE TRABAJO N° 2
SEGUNDO PERIODO – Abril 12 a Junio 19 8°

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 OCTAVO

NIVELES DE DESEMPEÑO DE LAS COMPETENCIAS

COMPETENCIAS COGNITIVO METACOGNITIVO

INTERPRETATIVO ARGUMENTATIVO PROPOSITIVO METACRÍTICO

CELEBRATIVA - MISIONERA Reconoce en la tecnología e Comprende y expresa los motivos Ayuda a los integrantes de la Demuestra sentimientos
Entender como la tecnología e informática una herramienta por los que un elemento, una comunidad a crear ambientes de alergia, solidaridad y
informática puesta al servicio de para el desarrollo de su vida y acción, una persona o una más ricos de trabajo con el respeto y analiza con
los demás se vivencia en los la de los demás respetando situación benefician o perjudican uso de la TICS. sentido crítico la
valores claretianos, formando los deberes y derechos los principios humano cristiano utilización de la
personas comprometidas con el claretianos. claretianos tecnología dentro de la
entorno y con sigo mismo. comunidad.
COMUNICATIVA Reconoce la necesidad de Explica las repercusiones del Lidera y formula conjeturas a Analiza los procesos y
Usar los lenguajes de mantenerse en continua lenguaje de programación en el través de formas creativas operaciones realizadas y
programación para interactuar con comunicación por medio de mundo actual e infiere los posibles utilizando lenguaje es capaz de reconocer
el computador, enviar y recibir los artefactos tecnológicos y efectos e impacto como medio de informático. las fallas que presente y
información, crear interfaces para interactuar con los comunicación con el computador. solucionarlas en las
gráficas y comunicarlas con bases demás en la comprensión de operaciones de sistemas
de datos. la simbología y terminología tecnológicos
de la tecnología e informática.
ECOLÓGICO - AMBIENTAL Identifica los problemas Comprende y explica los motivos Propone alternativas de Inspeccionar sobre sus
Comprender los problemas éticos, éticos, culturales y por los cuales se debe o no se solución creativamente, a acciones y puede corregir
culturales y ambientales ambientales relacionados con debe realizar una acción, problemas éticos, culturales y o establecer sus aciertos
relacionados con la tecnología. la tecnología. involucrarse o involucrar a otras ambientales relacionados con frente a problemas
personas en situaciones no la tecnología. éticos, culturales y
adecuadas desde el punto de vista ambientales relacionados
ético y ambiental en temas con la tecnología.
relacionados con la tecnología
CIENTÍFICO – TECNOLÓGICA Comprende que la tecnología Explica los procesos, operaciones, Propone soluciones a partir Revisa procesos,
Usar la tecnología para localizar, e informática contribuyen en y demás procedimientos del análisis de situaciones autoanaliza
recoger y evaluar información de el desarrollo adecuado del ser involucrados en la localización, para el buen uso de la procedimientos, para
una variedad de fuentes y para humano. recolección y evaluación de tecnología. determinar mejores
construir aplicaciones que suplan información. soluciones o corregir sus
las necesidades del medio. posibles errores en la
localización, recolección
y evaluación de
información.
CRÍTICO – CREATIVA Elige entre diferentes diseños Analiza, discierne, expone, y Articula soluciones como Discierne sobre sus
Sustentar argumentar y verificar experimentales o realiza propuestas innovadoras y / resultado del análisis de una propuestas y puede
resultados de un proceso y planteamientos teóricos los o críticas frente a procesos situación problema enfocada entender las falencias y
explorar nuevos caminos que más adecuados para abordar tecnológicos. hacia el diseño de proyectos, aciertos de las mismas y
contribuyan al mejoramiento de una situación específica en el animaciones y sitios web. presentar posibles
estrategias utilizadas. contexto científico o soluciones para corregir
tecnológico. los errores presentados.
SOCIO – HISTÓRICA Comprende, interpreta y Comprende y explica cómo se ha Construye propuestas de Entiende el papel que
Entender como la tecnología e apropia conceptos históricos suscitado el avance tecnológico, trabajo con acciones juega el proceso
informática a través de la historia relacionados con la entiende que son los derechos de dinámicas para las histórico, comprendiendo
ha evolucionado, contextualizando tecnología. autor, las marcas y es capaz de situaciones cambiantes de su como con su actitud y el
situaciones que se han suscitado discernir el papel que estos entorno. manejo de la tecnología
como consecuencia de los elementos juegan en la sociedad puede modificar el futuro
avances tecnológicos. de hoy y del futuro. mismo de la sociedad.

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

IDENTIFICAR LAS Relaciona las Aplica los Propone hojas Participa en la

ETIQUETAS DEL diferentes conceptos de estilo en creación de
CONSTRUCCIÓN DE LENGUAJE HTML5 formas y básicos de CSS3 cascada tanto proyectos como
PAGINAS WEB CON herramientas en la creación de externas como páginas web y
Y UTILIZARLOS
HTML5 Y CSS3 que existen para páginas web. internas y las animaciones
DE MANERA la construcción aplica al con diferentes
Segundo

CORRECTA EN LA de una página desarrollo de tecnologías

 Introducción a HTML5 ELABORACIÓN DE Web cumpliendo sus páginas. informáticas y
 HTML5 Doctype PAGINAS WEB con el estándar los
Construcción de páginas web CUMPLIENDO CON W3C. autoevaluación
con HTML5 Y CSS3 LOS ESTÁNDARES y socializa junto
con los
Y NORMAS
compañeros.
PERTINENTES.

RECURSOS:

1. Bibliografía Libros de Referencia y Textos:

 Montaño, J. F. A. (2020). INFORMATICA EN EL AULA 9. Prentice Hall.

 Heller, E. (2004). Psicología del color: Cómo Actúan Los Colores Sobre Los Sentimientos
Y La Razón (0 ed.). Editorial Gustavo Gili.

2. Bibliografía Interactiva:
 Introducción al diseño web. (s. f.). DesarrolloWeb.com. Recuperado 17 de octubre de
2020, de https://desarrolloweb.com/manuales/33
 E. (2018, 16 julio). La teoría del color | estudio de arte collado mediano. escuela de arte
collado mediano. http://www.escueladeartecollado.com/un-repaso-a-la-teoria-del-color/

 Cañuelo, L. (2019, 17 octubre). Los 7 conceptos básicos que debes saber de HTML.
Leonor Cañuelo – Diseñadora web freelance, especializada en Wordpress.
https://leonorcanuelo.com/conceptos-basicos-html/

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

Prohibida su reproducción total o parcial
2021
3
 Los elementos de la estructura en HTML5
1. Los nuevos elementos de la estructura

Con el HTML5 llegan nuevos elementos de estructura semántica. Estos nuevos elementos han
sido definidos y se les ha asignado un nombre tras un largo análisis de los nombres más
usados en las cajas <div>.

2. El elemento <header>

El nuevo elemento <header> permite insertar una zona de visualización para las cabeceras.
Puede definirse esta cabecera para toda la página o para una zona determinada: artículo, menú
lateral...

Debemos considerar que este elemento se puede usar desde dos puntos de vista:

 a nivel de la página: es la típica cabecera de la página, que a menudo aparece en lo alto

de la pantalla, con un logotipo, un eslogan, un menú de navegación principal...
 a nivel del contenido: permite disponer de una zona de introducción del contenido que se
incluya a continuación.

Esta es la definición del W3C para el elemento <header> .

Ejemplos de estructura en HTML5

1. Una estructura simple

Si volvemos a tomar como ejemplo la estructura de página que usamos al principio de este
capítulo, podremos modificarla para adaptarla al HTML5.

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

Prohibida su reproducción total o parcial
2021
4
En el elemento <header> encontraremos los elementos del encabezado de la página, como el
logotipo y el eslogan, por ejemplo.

En el elemento <nav>, situado a la izquierda, encontraremos los vínculos que nos permitirán
navegar por ese sitio web.

Todos los artículos del blog estarán colocados, por supuesto, dentro de los elementos
<article>.

Por último, el pie de página, <footer>, podrá contener las menciones legales o los vínculos de
contacto, por ejemplo.

2. Una estructura más elaborada

Veamos ahora la estructura de un sitio web un poco más elaborado.

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

Prohibida su reproducción total o parcial
2021
5
Encontramos de nuevo el elemento <header>, que ya todos conocemos.

Debajo tenemos el primer elemento <nav>, para el menú de navegación general del sitio web,
que nos permitirá navegar por las distintas páginas.

A la izquierda tenemos una segunda caja <nav>, para la navegación secundaria, que contiene
los vínculos relacionados directamente con el contenido de la página en cuestión.

A la derecha encontramos el elemento <aside>, que muestra información relacionada con el

contenido de la página, como los vínculos promocionales o los contenidos relacionados, por
ejemplo.

El contenido de la página...

Qué significa CCS3

CSS3 es una tecnología que ha tenido una evolución en el tiempo, que actualmente se encuentra
en su versión 3, como su propio nombre indica.

Sus siglas corresponden a “Cascading Style Sheets”, que tiene el siguiente significado:

 Cascading, que significa que los estilos que aplicamos a los elementos de una página web se
propagan a los elementos que contiene, se propagan en cascada.
 Style, porque mediante CSS lo que hacemos es aplicar estilos visuales a los distintos
elementos de nuestra página web.
 Sheets, que significa hojas, porque los estilos de una página web se añaden en ficheros
aparte, en ficheros con la extensión .css de manera general.

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

Prohibida su reproducción total o parcial
2021
6
CSS ha ido evolucionando desde hace 25 años a la versión actual, que es CSS3, pero su
función es la misma, sirve para dar estilos visuales a las páginas web.
Definición de CSS3

Una definición más formal de CSS sería la siguiente que aparece en Wikipedia:
CSS es un lenguaje de diseño gráfico que permite definir y crear la presentación de un documento
estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el diseño visual de los
documentos web e interfaces de usuario escritas en HTML.

En la propia definición de CSS vemos que está muy ligado desde su nacimiento a HTML.
Desde que nació, el objetivo de CSS fue poner un poco de orden a la hora de aplicar los
estilos a las páginas web.
Funcionamiento

Vamos a ver en un pequeño esquema qué es lo que sucede desde que se solicita una página
web hasta que se le aplica el estilo. El proceso es el siguiente:

Cuando desde un navegador, por ejemplo Chrome, solicitamos una página a través de una
dirección, por ejemplo http://..../index.html, esta petición va a un servidor web, que nos devuelve la
página que se ha solicitado.

Para aplicar estilos en las páginas HTML, se utiliza un fichero aparte, una hoja de estilos con
la extensión .css, por lo que cuando estos dos documentos llegan al navegador, va a leer el
documento HTML, le aplica los estilos CSS y lo muestra.

Si quieres profundizar mucho más en CSS3, puedes hacer el Curso de HTML5 y CSS3. En este
curso aprenderás a crear paso a paso páginas Webs profesionales.

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

Prohibida su reproducción total o parcial
2021
7
 Actividad interactiva de CSS3

EVALUACIÓN

1. ¿Crees qué es importante del diseño web en la vida actual? ¿Por qué?

____________________________________________________________________
____________________________________________________________________
____________________________________________________________________

2. ¿Qué aplicaciones les puedes dar a la creación de estilos y animaciones en el

diseño web?

____________________________________________________________________
____________________________________________________________________
____________________________________________________________________

3. ¿Cómo fue su disposición en el trabajo en las clases presenciales y no

presenciales?
____________________________________________________________________
____________________________________________________________________

4) ¿Cuál debe ser su juicio de valor?, ¿Por qué?

Superior Alto Básico Bajo

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

Prohibida su reproducción total o parcial
2021
8