INSTITUCIÓN EDUCATIVA LICEO ANTIOQUEÑO CÓDIGO: FPR.

Versión:1.0
Gestión académica Fecha:12-03-20

GUÍA DE APRENDIZAJE FLEXIBLE

ÁREA Informática y programación GRADO: 11° PERÍODO: 1 Guía Nº 1

y Práctica – Media Técnica de
Sistemas.
Profesor: Jhon Anderson Estudiante: Grupo: Teléfono
Hernández Arango 11°5 y 11°6
ESTRUCTURA:
 Lenguaje de programación
 Programación WEB HTML5, CSS3
 Procesador de texto, hoja de cálculo.

LOGRO DE PROMOCIÓN: Muestra agrado y disfrute por la informática e investiga por su cuenta lo que le causa
inquietud o expectativa y lo comparte con sus demás compañeros.
NÚCLEOS TEMÁTICOS INDICADORES DE DESEMPEÑO

 Base de datos, conexiones entre bases de datos y
lenguaje de programación.
 Lenguaje de programación Web.
 Normas APA en trabajos de Investigación.
 Identifica las técnicas y estándares para el proceso
de desarrollo de páginas Web.
 Identifica las técnicas y estándares para el proceso
de desarrollo de trabajos escritos con normas
APA.

Instrucciones:

Esta guía está diseñada para trabajar 6 semanas, desde 01 de Marzo hasta el 09 de abril.

Resuélvala siguiendo las indicaciones que aquí se dan y entregue las actividades pedidas, en las
fechas que se indican. Presente sus inquietudes, en los encuentros sincrónicos que tiene con su
docente.
Debe disponer de Office 2013 o superior, en su PC o Android, (Versión de edición, No sirve las
versiones de Visualización).

Programación de entregas en la plataforma licant: https://licant.milaulas.com/

1. Actividad N°1 fecha máximo de entrega el 12 de marzo
2. Actividad N°2 fecha máximo de entrega de 29 de marzo

Encuentros Virtuales en el horario de clases: marzo 02, 03 según horario de grupos.

Revisa en la plataforma licant las actividades propuestas (Foro, Clase Online BigBlueButtonBN,
Chat)

Desarrollo de la guía de trabajo

 INSTITUCIÓN EDUCATIVA LICEO ANTIOQUEÑO CÓDIGO: FPR.
Versión:1.0
Gestión académica Fecha:12-03-20

EXPLORACIÓN
Aprende los fundamentos del Desarrollo Web Frontend

En esta guía, el docente Anderson Hernández te enseñará a crear páginas web con las
herramientas más fundamentales: HTML y CSS. Aprenderás a escribir tu propio código y cambiarás
tu forma de ver (y de diseñar) la web, entendiendo cómo funciona por dentro y cómo diseñar una
web responsive para que sea más efectiva. Y si el diseño no es lo tuyo, este curso puede suponer
una buena base para comenzar en el mundo del Desarrollo Web Front-end.

Esta guía parte desde un conocimiento cero de HTML y CSS. Incluye las etiquetas fundamentales
de HTML y propiedades de CSS tipográficas, herramientas de layout como Floats o Position,
fondos, bordes, esquinas redondeadas, sombras, Web Fonts y herramientas fundamentales de
Desarrollo Responsive como las Media Queries.

LA SIGUIENTE INFORMACION ES NECESARIA TODO EL PERIODO

¿Qué incluye esta guía?

TABLA DE CONTENIDOS DE LAS GUÍAS PRIMER PERIODO

 U1

Introducción

 U2

Estructura HTML

 U3

Empezando con CSS

 U4

Estructuras en CSS

 U5

Decoración en CSS

 U6

Técnicas responsive
 INSTITUCIÓN EDUCATIVA LICEO ANTIOQUEÑO CÓDIGO: FPR.
Versión:1.0
Gestión académica Fecha:12-03-20

LOS SIGUIENTES CONCEPTOS Y DEFINICIONES SERÁN NECESARIAS DURANTE TODO EL PRIMER

PERIODO

¿Qué es la programación web y para qué sirve?

La programación de los sitios web es una de las disciplinas dentro del mundo de Internet que más
se ha desarrollado y no deja de sorprender día a día con las posibilidades que abre y genera, ya
que no sólo consigue satisfacer necesidades que se generan, sino que sin la generación de
necesidades ofrecen servicios a los usuarios que éstos no habían imaginado.

Definición de desarrollo web

El desarrollo web es un término que define la creación de sitios web para Internet o una intranet.
Para lograr esto, la tecnología de software se usa en el lado del servidor y del lado del cliente, lo
que implica una combinación de procesos de base de datos utilizando un navegador para realizar
ciertas tareas o mostrar información.

Para que nos sirve la programación

En principio, el gran desarrollo de Internet se fundamentó en la posibilidad de enlazar a través de
hipervínculos diferentes páginas web lo que generó la enorme interconexión que es hoy Internet.
Esta base que inició esta red, fue desarrollada y generó el lenguaje ícono de las páginas web que
es HTML.

Pero, como decíamos, la creatividad humana no tiene límites y lejos de contentarse con el
desarrollo del lenguaje HTML, enriqueciéndolo en su sintaxis, aparecieron otros lenguajes, que a
su vez desataron una reacción en cadena con respecto a las operaciones que se podían lograr en
un sitio web.

De esta forma, apareció el lenguaje Java, que mejoró sustancialmente la interacción con el
usuario, de manera que éste anexó una sensación de amigabilidad y usabilidad en Internet,
contribuyendo a que su utilización sea mayor.

Gracias a la programación web en internet, los servidores, que son los vinculantes, entre nuestro
sitio web y los usuarios, comenzaron a adaptarse a estas nuevas tecnologías y lenguajes y mejorar
sus servicios, permitiendo que a través de programas se pudieran generar un diálogo on line con
los usuarios de forma de que éstos recibieran la información que buscaran más rápido y de forma
más eficiente.

De esta manera de Java nació Java Script, que a su vez incentivó a la creación de otros lenguajes
que apuntaron a el mismo objetivo como PHP, y así constantemente se están buscando mejoras y
nuevas alternativas, todas que apuntan a la interacción del usuario con el sitio.
 INSTITUCIÓN EDUCATIVA LICEO ANTIOQUEÑO CÓDIGO: FPR.
Versión:1.0
Gestión académica Fecha:12-03-20

Por todo esto que estamos indicando antes, la programación del sitio web tiene la misma
importancia que el diseño web, no se trata de poner uno por encima de otro, los dos se
complementan y hacen que la eficiencia del sitio web sea importante.

Está demostrado que los sitios más visitados son los que brindan un servicio más «personalizado»
al usuario y esto se logra pura y exclusivamente a través de la programación web, que, a través de
conocer los gustos y tendencias del usuario, utiliza estos datos para proporcionarle a la misma
información que más le interesa.

Temas 1, 2 y 3

1. Recibo de caja: Programación WEB HTML5, CSS3

Como ya venimos trabajando en las anteriores guías 2020, seguiremos utilizando el mismo archivo
de página web para continuar su desarrollo esta vez aplicando los siguientes tutoriales HTML y
CSS3.

Lenguajes de etiquetas

Uno de los retos iniciales a los que se tuvo que enfrentar la informática fue el de cómo almacenar
la información en los archivos digitales. La solución que se emplea para guardar la información con
formato es sencilla: el archivo electrónico almacena tanto los contenidos como la información
sobre el formato de esos contenidos. Si por ejemplo se quiere dividir el texto en párrafos y se
desea dar especial importancia a algunas palabras, se podría indicar de la siguiente manera:

<parrafo> Contenido de texto con <importante>algunas palabras</importante>

resaltadas de forma especial. </parrafo>

El principio de un párrafo se indica mediante la palabra <parrafo> y el final de un párrafo se indica

mediante la palabra </parrafo>. De la misma manera, para enfatizar ciertas palabras del texto, se
encierran entre <importante> e </importante>. El proceso de indicar las diferentes partes que
componen la información se denomina marcar (markup en inglés). Cada una de las palabras que se
emplean para marcar el inicio y el final de una sección se denominan etiquetas.

Aunque existen algunas excepciones, en general las etiquetas se indican por pares y se forman de
la siguiente manera:

Etiqueta de apertura: carácter <, seguido del nombre de la etiqueta (sin espacios en blanco) y
terminado con el carácter > Etiqueta de cierre: carácter <, seguido del carácter /, seguido del
 INSTITUCIÓN EDUCATIVA LICEO ANTIOQUEÑO CÓDIGO: FPR.
Versión:1.0
Gestión académica Fecha:12-03-20

nombre de la etiqueta (sin espacios en blanco) y terminado con el carácter >.

Así, la estructura típica de las etiquetas HTML es:

<nombre_etiqueta> ... </nombre_etiqueta>

HTML es un lenguaje de etiquetas (también llamado lenguaje de marcas) y las páginas web
habituales están formadas por cientos o miles de pares de etiquetas. De hecho, las letras "ML" de
la sigla HTML significan markup language, que es como se denominan en inglés a los lenguajes de
marcas. Además de HTML, existen muchos otros lenguajes de etiquetas como XML, SGML,
DocBook y MathML.

La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir por
parte de las personas y de los sistemas electrónicos. La principal desventaja es que pueden
aumentar mucho el tamaño del documento, por lo que en general se utilizan etiquetas con
nombres muy cortos.

INTRODUCCIÓN A CSS3

El CSS3 es el lenguaje utilizado para definir los estilos de los documentos HTML o XML. Su
desarrolló partió de la idea de separar la estructura de un documento de su presentación,
haciendo así mucho más fácil su mantenimiento.

La información de los estilos puede ser definida en el mismo HTML con el elemento <style> o en
un archivo separado con la terminación .css. Evidentemente, este último es el utilizado a día de
hoy, precisamente aprovechando el fin para el que fue creado CSS, no mezclar el HTML con los
estilos en un mismo documento y que resulte mucho más fácil su mantenimiento.

El funcionamiento de CSS consiste en definir, mediante su propia sintaxis, el formato de

presentación que se aplicará a un sitio web completo, una página o documento HTML, a una parte
de un documento HTML o a una etiqueta en concreto.

Para escribir un CSS, al igual que en HTML, te bastará con un simple editor de texto plano como
por ejemplo Gedit.

¿CUÁLES SON LAS NOVEDADES DE CSS3?

Tal vez, la principal y más importante es la separación de la especificación en módulos, al contrario

que en CSS2 donde se definía toda la especificación en un solo documento. Cada módulo añade
nuevas funcionalidades a las especificaciones de CSS2, de esta forma se mantiene la
compatibilidad.

Algunas de las novedades mas importantes respecto a CSS2 son:

 INSTITUCIÓN EDUCATIVA LICEO ANTIOQUEÑO CÓDIGO: FPR.
Versión:1.0
Gestión académica Fecha:12-03-20

 Esquinas redondeadas
 Sombras
 Transparencias de color
 Texto en varias columnas
 Nuevo modelo de cajas flexibles
 Nuevos selectores
 Nuevas pseudo-clases
 Animaciones

ESTRUCTURACIÓN - PROCESAMIENTO

Posteriormente a disponer del software y archivos anteriormente mencionados, remítase a los

siguiente video-tutoriales:

1. Introducción a HTML5 básico desde Cero - Parte 5, https://www.youtube.com/watch?

v=kZFQRetPfFE&list=RDCMUC3mOfIKkCJtlSdhsU9y77DA&index=4
2. Introducción a CSS3 básico desde Cero - Parte 1, https://www.youtube.com/watch?
v=DHLGYuR9N8o&list=RDCMUC3mOfIKkCJtlSdhsU9y77DA&index=16

3. Introducción a CSS3 básico desde Cero - Parte 2, https://www.youtube.com/watch?

v=wtmb_2NmqIE&list=RDCMUC3mOfIKkCJtlSdhsU9y77DA&index=17

4. Introducción a CSS3 básico desde Cero - Parte 3, https://www.youtube.com/watch?

v=KUqykXlCtMY&list=RDCMUC3mOfIKkCJtlSdhsU9y77DA&index=18

Socializaremos esta actividad y contenidos en las clases respectivas de la semana del 01 al 05 de

febrero a través de Sesión online.

Transferencia y Aplicación
Actividad N°1
 INSTITUCIÓN EDUCATIVA LICEO ANTIOQUEÑO CÓDIGO: FPR.
Versión:1.0
Gestión académica Fecha:12-03-20

1. Introducción a CSS3 básico desde cero - Parte 3.

Poner en práctica, desarrollar tal cual lo hace el Youtuber y posteriormente subir los archivos a
la plataforma, (si posee conectividad).
Para los estudiantes que no poseen conectividad hacer la actividad que se encuentre resaltada
en Negrita

Notas:

1. Los videos también los podrán encontrar en la plataforma.

2. Basándose en los videos 1 y 2 de introducción al HTML5 parte 5 CSS3 parte 1 llevar a la
práctica como lo indica el Youtuber, utilizamos los mismos archivos de la guía pasada.
3. Los archivos resultantes los guardas en una carpeta, debes comprimir esta o subirla al
drive y desde allí compartirla para relacionarla en la plataforma licant.
4. El resultado de los primeros 2 Videos debe entregarse en la plataforma Licant, a más
tardar el 12 de marzo.

(para estudiantes sin conectividad hacer la siguiente actividad basándose en toda la información
de esta guía desde el momento de exploración hasta el tema 1:

 Hacer una investigación completa sobre el origen del HTML5 y su integración con CSS3.
 Hacer un análisis de los contenidos del Tema 1, HTML5 y CSS3, trabajo escrito.
 Debe presentar los trabajos en físico o escaneados a la institución o al docente.

Actividad N°2
Poner en práctica, desarrollar tal cual lo hace el Youtuber y posteriormente subir los archivos a la
plataforma, (si posee conectividad).
Para los estudiantes que no poseen conectividad hacer la actividad que se encuentre resaltada en
Negrita

1. Los videos también los podrán encontrar en la plataforma.

2. Basándose en los videos 3 y 4 de introducción al CSS3 llevar a la práctica como lo indica el
Youtuber utilizamos los mismos archivos de la actividad # 1 pasada.
3. Los archivos resultantes los guardas en una carpeta, debes comprimir esta o subirla al
drive y desde allí compartirla para relacionarla en la plataforma licant, se trabajará
siempre sobre los mismos archivos para seguir la secuencia y ver los resultados del trabajo
en la página que estamos creando.
 INSTITUCIÓN EDUCATIVA LICEO ANTIOQUEÑO CÓDIGO: FPR.
Versión:1.0
Gestión académica Fecha:12-03-20

4. El resultado de los últimos 2 Videos debe entregarse en la plataforma Licant, a más tardar
el 26 de febrero.

(Para los estudiantes sin conectividad hacer una consulta completa utilizando los medios que
posean acerca de:

 Sublime Text, qué es, para qué sirve y cuáles son sus características
 Dreamweaver, qué es, para qué sirve y cuáles son sus características
 Diagramar en un mapa conceptual la estructura básica de una página html5, (sus
etiquetas según su jerarquía).
 Debe presentar los trabajos en físico o escaneados a la institución o al docente.