Web Basics

Primer Ciclo de Secundaria | Years: 7-8-9 | Edades: 11-14
Segundo Ciclo de Secundaria | Years: 10-11-12 | Edades: 14-18

Índice:

Enfoque

Certificación

Contenidos y Habilidades

WEB BASICS 01

WEB BASICS 02

WEB BASICS 03

La serie “Web Basics” del Digital Skills Diploma reúne los contenidos recomendados por Digital House Schools para el primer ciclo de secundaria secundaria (years 7, 8 y 9 del K12) y que también pueden ser abordados en el segundo ciclo (years 10, 11 y 12 del K12).

Se compone de tres niveles o cursos anuales: Web Basics 01, Web Basics 02 y Web Basics 03. Cada uno tiene una duración de entre 30 y 35 clases.

A lo largo de esta serie se abordan contenidos de programación y diseño web (lenguajes HTML, CSS y JavaScript) y se desarrollan habilidades generales de comunicación digital, organización de información, pensamiento computacional y pensamiento crítico.

Cada nivel otorga su propia certificación, y al completar la serie exitosamente se alcanza el certificado:

DIGITAL SKILLS - WEB BASICS CERTIFICATE

Enfoque

Al igual que las series “Kick Off” y “Senior Tracks”, la propuesta se alinea al “Marco de Habilidades para el Siglo XXI”. Puedes leer más sobre este enfoque en la sección general sobre el Digital Skills Diploma.

Nuestra mirada: ¿por qué enseñamos HTML, CSS y JavaScript?

Desde Digital House Schools creemos que el aprendizaje de estos lenguajes es especialmente importante para la alfabetización digital que se requiere para desenvolverse en la sociedad actual, y para el desarrollo del pensamiento computacional. Además, pensamos que estos aprendizajes se apoyan sobre habilidades transversales de gran importancia para la educación secundaria.

Alfabetización Digital desde el Desarrollo Web

Todos los sitios webs (y una parte de las aplicaciones) que usamos hoy en día están construidos usando HTML, CSS y JavaScript. En la mayoría de los casos, esos proyectos se apoyan en frameworks o marcos de trabajo que suman y complementan con otras librerías y herramientas. Pero, en el fondo, o en la base, siempre están esos tres lenguajes: HTML, CSS y JavaScript.

Comprender cómo funcionan y cómo se integran entre sí (HTML para el contenido, CSS para el diseño, y JavaScript para la interacción y dinamicidad) es fundamental para tener un entendimiento general de cómo se componen y cobran vida gran parte de los contenidos digitales que consumimos día a día. Conocer los tipos de archivos en los que se basa la web es conocer cómo se implementa una parte fundamental de la comunicación vía internet.

Habilidades Transversales desde el Desarrollo Web

Más allá del aprendizaje de la sintaxis de HTML y CSS, nuestra currícula hace un foco especial en el desarrollo de habilidades generales para la estructuración y organización de la información o contenido. Estas habilidades, entre las cuales se encuentran el pensamiento crítico y el reconocimiento analítico de elementos y partes de un texto (o pieza de comunicación), sus jerarquías temáticas, sus patrones estructurales y de diseño, etc., son habilidades transversales y aplicables a otras áreas del aprendizaje.

Desde ese punto de vista, una propuesta pedagógica basada en estos lenguajes no concibe a la programación como una mera herramienta (instrumental), sino que pone en el centro de la escena y problematiza estos desafíos y competencias, que son especialmente importantes en el marco de la educación secundaria. Esto es, fundamentalmente, porque preparan al estudiante para la producción exitosa de piezas propias y novedosas (eje creativo) o accesorias (resúmenes, cuadros sinópticos, etc.) en múltiples formatos.

Así, las nociones de diseño que se introducen a lo largo de estos contenidos no tienen una finalidad únicamente estética o experiencial. Al contrario, el pensamiento de diseño entra en juego como parte de una estrategia comunicacional, que también incorpora nociones básicas del marketing digital, de la segmentación de audiencias y las metodologías de trabajo ágiles.

Pensamiento Computacional desde el Desarrollo Web

Como todo lenguaje de programación, JavaScript parte de nociones comunes de lógica y programación estructurada: variables, condicionales, funciones, bucles, etc. En las clases de la serie Web Basics los alumnos pondrán en práctica estas herramientas fundamentales para la programación en cualquier lenguaje.

A la hora de programar para sitios web, JavaScript permite poner el foco en una parte fundamental de todos los sistemas informáticos que utilizamos hoy en día: las interfaces. Las herramientas de creación y diseño de contenido que los alumnos incorporan en HTML y CSS se aplican en función de la creación de interfaces gráficas.

A medida que se suman nuevas herramientas de JavaScript, los alumnos podrán explorar ejemplos en nuestra plataforma y luego experimentar con la lógica del lenguaje en actividades de coding y cuestionarios. A la hora de crear sus propios proyectos, los nuevos conceptos se integran en una lógica de eventos que permite configurar interfaces (un usuario hace click en un botón para comprar un producto o enviar un formulario, contesta una pregunta, etc).

Así, más allá de aprender sobre variables, funciones y condicionales, los alumnos analizan problemas complejos como la interacción entre usuarios y sistemas, descomponiendo la dinámica en eventos, reacciones, procedimientos, mecanismos de entrada y salida, etc.

Desde Digital House Schools creemos que la capacidad de reconocer estas partes del proceso son fundamentales para responder de forma crítica a la pregunta:

"¿Cómo interactuamos con los sistemas con los que interactuamos?".

Certificación

Al finalizar cada año de cursada, el estudiante obtendrá un certificado de realización del curso detallando el nivel abordado. Para alcanzar el certificado, deberá haber completado un mínimo de 24 clases de ese nivel (varía ligeramente en cada nivel o versión).

Aquellos estudiantes que completen la totalidad de las clases recibirán un certificado “EXTENDED”, mientras que si sólo cumplen los requisitos mínimos, será un certificado “CORE”.

Al completar los tres niveles de la serie, el estudiante podrá obtener un certificado global de toda la serie ("DIGITAL SKILLS - WEB BASICS CERTIFICATE").

Correlatividad con otras Series

Es obligatorio haber completado los tres niveles de la serie “Web Basics” para obtener el certificado general “Digital Skills Diploma” en caso de que los estudiantes continúen con la serie “Senior Tracks”.

Para poder realizar los módulos de la orientación en Advanced JavaScript de la serie “Senior Tracks”, es obligatorio haber completado los tres niveles de la serie “Web Basics”.

No es obligatorio contar con la certificación de la serie “Kick Off” para realizar la serie “Web Basics”, pero es recomendable porque los contenidos pensados para primaria sientan las bases del pensamiento computacional.

De todas formas, en “Web Basics”, partimos siempre desde las nociones fundamentales de algoritmos y programación, para garantizar que todos los alumnos puedan sumarse al recorrido sin importar conocimientos previos.

Contenidos y Habilidades

Puedes conocer más detalles consultando cada uno de los niveles de la serie.

WEB BASICS 01

Hacer cosas con palabras: crear contenido programando.

En este nivel se introduce el aprendizaje de dos lenguajes indispensables para el diseño de páginas web: HTML y CSS. Estos son abordados en proyectos de complejidad incremental en cuanto al uso de herramientas de diseño web y comunicación digital, en muchos casos basados en temáticas de cultura digital. A lo largo de las clases, los estudiantes aplican los conocimientos adquiridos para crear sus propios sitios web, reconociendo y sumando distintos tipos de piezas de comunicación.

Ejemplos de proyectos:

Muro de publicaciones de una red social.
Landing page para un evento.
Sitio web informativo para promoción de un emprendimiento u organización.

¿Qué se logra con HTML y CSS?

Con las herramientas del lenguaje HTML, los estudiantes aprenden a estructurar sitios web y generar contenido semánticamente diferenciado (encabezados, pies de página, distintos niveles de títulos y subtítulos, párrafos, listas, imágenes, etc).

Con CSS, aplican distintos estilos a los elementos creados. Por ejemplo, a través de un patrón de diseño en cajas o distintos estilos de posicionamiento, organizan el contenido de sus sitios de forma coherente y fácil de reconocer, asegurando la accesibilidad de los usuarios. En ese sentido, el diseño visual se pone al servicio del objetivo de la comunicación y la coherencia del mensaje.

WEB BASICS 02

One, two, JavaScript: la página cobra vida.

En este nivel se incorporan herramientas más sofisticadas para el desarrollo de sitios web. Nuevas etiquetas semánticas de HTML y propiedades de estilo en CSS mejoran el nivel de los contenidos creados. Además, los alumnos dan sus primeros pasos de programación en JavaScript con nociones básicas (variables, funciones, botones) permitiendo la interacción.

Ejemplos de proyectos:

Página informativa estilo “wiki” con navegación hipertextual.
Sitio de noticias (portada de un diario digital).
Calculadora online.

¿Cómo se articulan estos contenidos?

Al maquetado básico que se trabaja en Web Basics 01, se suman nuevas etiquetas semánticas para la estructura lógica y jerárquica de los documentos: secciones y artículos.

Además de nuevos elementos de HTML y propiedades de CSS, este nivel suma nuevas nociones de marketing digital, como SEO (Search Engine Optimization), que hace referencia al posicionamiento de los sitios en los principales motores de búsqueda, y que permite referenciar páginas con etiquetas metatextuales. Junto con una profundización del posicionamiento con CSS Grid, se trabaja en la experiencia general del usuario creando barras de navegación con enlaces internos (anclas) y externos.

Finalmente, los alumnos pueden empezar a dar sus primeros pasos con funciones de JavaScript. En principio, a partir de la noción de algoritmo, trabajan con actividades lúdicas cercanas a la programación por bloques para familiarizarse paulatinamente con la sintaxis de este nuevo lenguaje. Luego, a partir de un modelo sencillo de input-process-output (variables, datos, diálogos), y una lógica de eventos basada en botones, crean distintas interfaces interactivas para los usuarios de sus páginas, como calculadoras, mensajes y preguntas simples, etc.

En los últimos módulos del curso, algunas nuevas nociones de CSS como animaciones y transiciones permiten trabajar proyectos integradores que aprovechan todas las herramientas de los tres lenguajes vistas hasta el momento.

WEB BASICS 03

En este nivel se profundizan los conocimientos en JavaScript con funcionalidades del Document Object Model (DOM) para manipular dinámicamente los contenidos de las páginas en interfaces gráficas que incorporan formularios. Además, se suman las estructuras condicionales para refinar el procesamiento de la información.

Ejemplos de proyectos:

Calculadora geométrica.
Formularios interactivos (simulación de apps de delivery).

¿De qué se trata el DOM? ¿Cómo se integra JavaScript a HTML y CSS en los proyectos?

Los alumnos egresados de Web Basics 02 llegan a este nuevo nivel con una base sólida de maquetado web (elementos típicos de contenido, layout en grillas, etc.), y con nociones fundamentales de JavaScript (variables, funciones, operaciones matemáticas y diálogos. Con eso pueden crear interfaces elementales a partir de mensajes, preguntas y alertas en ventanas emergentes sin diseño.

A lo largo de las clases de Web Basics 03 los estudiantes logran integrar todo su conocimiento de maquetado en HTML con los principios de lógica y eventos que comenzaron a descubrir en el nivel anterior. Esto es gracias a dos nuevas herramientas que se suman desde los primeros módulos.

Formularios

Las etiquetas para creación de formularios (campos de entrada, menús de opciones desplegables, etc.) permiten diseñar interfaces gráficas agradables y que tienen en cuenta la experiencia del usuario.

Document Object Model (DOM)

En segundo lugar, las funciones propias del DOM permiten que los programas creados en JavaScript realicen dos grandes acciones: capturar la información ingresada por los usuarios en campos de formularios y modificar el contenido que se muestra al usuario luego de procesar la información.

Condicionales

Gracias a las estructuras condicionales, los alumnos pueden crear programas que toman decisiones, es decir, que tienen un flujo controlado según distintas circunstancias. Así, el procesamiento de la información adquiere una nueva capa de complejidad y refinamiento, más allá de operaciones aritméticas típicas o concatenaciones.

DOM y Estilos

Hacia el final del curso, en clases dedicadas a funciones específicas del DOM para estilos, la apariencia de las páginas creadas cambia dinámicamente en función de las interacciones, agrandando secciones, ocultando contenidos, cambiando gamas de colores, etc.

Todas estas nuevas funcionalidades se aplican en distintos tipos de actividades, cuestionarios y proyectos integradores. Los proyectos finales tienen en cuenta también nociones del desarrollo de productos digitales (audiencias, business canvas), y están estructurados en etapas que buscan reflejar las instancias típicas de las metodologías de trabajo ágiles.