Universidad de Costa Rica
Escuela de Ciencias de la Computación e Informática
San Pedro, Montes de Oca
Grupo 01: L 9-12 / J 10-12

Jeisson Hidalgo-Céspedes
Consulta: L 16-17 / J 15-16
Asistente: Gustavo Jiménez Hernández
Recurso Peso Descripción

Carta al estudiante

 — 

Contrato sobre el curso entre la universidad, los profesores, y estudiantes

Ejemplos de clase

 — 

Código de ejemplo realizado durante las lecciones

Material del curso

 — 

Material de apoyo del curso

Ejercicios

50%

Tareas/ejercicios a resolver

Proyecto

50%

Juego de mesa distribuido

Introducción

Historia de la web

L05-abr

  1. Presentación. Carta al estudiante

  2. Historia de la web

  3. Sesión del juego de mesa Hoot Owl Hoot!

  4. Proyecto del curso. Ideas de adaptaciones al juego original

  5. Repositorio de git individual y de proyecto

  6. Ejercicios sobre crear servidor web propio

  7. Arquitectura web. El servidor web

  8. El cliente web: agente de usuario

Arquitectura web

J08-abr

  1. Configurar máquina virtual en la ECCI

  2. Wrapper de red en C++

  3. Arquitectura web. Identificador uniforme de recursos (URI)

  4. Estructura de los mensajes de solicitud y respuesta HTTP

L12-abr

  1. 🗎 Código ejemplo de buenas prácticas en C++

  2. Línea de solicitud HTTP. Codificación de un URI

  3. Encabezado de los mensajes HTTP (parejas atributo: valor)

  4. La línea vacía (separador). El cuerpo del mensaje HTTP

  5. Mensaje de respuesta HTTP. Línea de estado. Códigos de estado

  6. Tipo (MIME) y tamaño del contenido del cuerpo de los mensajes HTTP

  7. Anuncio de la tarea02

  8. Ejemplo de una sesión HTTP

  9. Sugerencias de implementación para las tareas 1 y 2

  10. Linting. Google cpplint

  11. Manejo de señales (Ctrl+C). Patrón Singleton

  12. Detección de errores de memoria (Google Sanitizers)

Contenido

XML

J15-abr

  1. Tarea01: diagrama de secuencia

  2. Tarea01: pregunta del público

  3. Historia de XML

  4. XML vs bases de datos

  5. Elementos XML

L19-abr

  1. Elementos vs atributos XML

  2. Ejemplo: fechas de nacimiento y direcciones

  3. Relaciones no jerárquicas entre elementos: ids e idrefs

  4. Definición de tipo de documento (DTD). Tipos de elementos

  5. Documento válido (xmllint). Definición de tipos de elementos

  6. Colisiones de nombres de elementos. ID e IDREF. Limitaciones de los DTD

  7. Entidades XML y referencias de entidad

  8. Analizador XML y sus interfaces: SAX y DOM (document object model)

(X)HTML

J22-abr

  1. Contenido, presentación, comportamiento. El equipo web

  2. Historia de HTML, XML y XHTML

  3. Diferencias entre HTML y XHTML

  4. Estructura global XHTML, DTD, elemento raíz, atributos comunes

  5. Encabezado del documento XHTML. Metadatos

  6. Cuerpo del documento XHTML. Seccionamiento del contenido

  7. Web semántico. Accesibilidad

  8. Pregunta sobre la tarea02. Ejemplo con http-server

L26-abr

  1. Repaso de web semántico y seccionamiento de contenido

  2. Seccionamiento y encabezados del ejemplo de hobbies

  3. Elementos de texto: párrafos. Elementos de bloque y de línea

  4. Elemento address

  5. Secciones CDATA en XHTML. Texto preformateado

  6. Elementos de frase: em, i, strong, b, time

  7. Listas ordenadas, no ordenadas, y de definiciones

  8. Enlaces vs hiperenlaces. Anclas

  9. URL absolutos y relativos. Ventana destino

  10. Imágenes. Formatos (svg, png, jpg, gif). Figuras

  11. Icono de favoritos. Editar SVG con Inkscape

  12. Tablas (resumen): filas, celdas, encabezado, cuerpo, pie

  13. Documentos válidos: el validador el Consorcio Web

Diseño del sitio: mapa y wireframes

J29-abr

  1. Mapa de un sitio web documental

  2. Mapa de un sitio una aplicación web

  3. Ideas para el mapa del sitio para el proyecto

  4. Esquemas de página (wireframes)

  5. Metodología sugerida para los esquemas del proyecto. Protipado (Figma)

  6. Modelos de comportamiento: wirestate, wireflow

Presentación (CSS)

J29-abr (cont.)

  1. Presentación. Hojas de estilo en cascada (CSS)

  2. Reglas en el elemento mismo con el atributo style

J06-may

  1. Repaso de contenido y presentación

  2. CSS en línea: en el atributo style del elemento

  3. CSS interno: en el encabezado del documento

  4. CSS externo: en un archivo .css

  5. Principio de especificidad

  6. Principio de ubicación

  7. Principio de herencia y de cascada

  8. Dominios comunes de valores de propiedades CSS

  9. Módulos CSS (modelos)

  10. Modelo de caja: margen, borde, relleno

L10-may

  1. Aplicar modelo de caja para el encabezado y pie del sitio

  2. El navegador como herramienta de desarrollo. Seleccionar elementos por ID

  3. Pseudoelementos: decoración de enlaces debajo del puntero del ratón

  4. Eliminar las viñetas de una lista

  5. Despliegue de bloque y de línea. Vendor prefixes (mala práctica)

  6. Flujo normal de elementos

  7. Posicionamiento relativo

  8. Posicionamiento absoluto. Capas (z-index)

  9. Flexbox: conceptos y playground

  10. Encabezado del sitio con flexbox

  11. Menú del sitio con flexbox. Elementos div para presentación

  12. Elementos en línea reemplazados y no reemplazados. Propiedades width y height

  13. Diseño adaptativo (responsive). Media queries

  14. Controlar el viewport con metadatos

  15. Linter de CSS: stylelint. Validador de estilos de w3C: Unicorn

J13-may

  1. Cómo trabaja un linter. Corregir diagnósticos de stylelint

  2. Modelo de tipografía. Fuentes de Google. Espaciado de líneas y caracteres

  3. Anonimizar datos. Imágenes ficticias de personas: ThisPersonDoesNotExist

  4. Filtros en CSS. Texto alternativo en imágenes

  5. Transformaciones CSS: manipular la geometría de los elementos

  6. Transiciones CSS: animaciones sencillas

  7. Animaciones CSS: animaciones complejas. Animista.net

  8. Grid layout: posicionamiento como en tablas

  9. Preprocesadores CSS. SASS. Variables en CSS

Comportamiento (JavaScript)

JavaScript: lugares y herramientas

L17-may

  1. Comportamiento: el tercer componente de la tripleta

  2. JavaScript: historia, ECMAScript, TypeScript

  3. El pseudoprotocolo JavaScript

  4. JavaScript en los eventos intrínsecos

  5. Elementos script. document.write(). console.log()

  6. La consola de JavaScript. Propiedad innerHTML

  7. JavaScript externo. Atributos defer, async

  8. Historia de Node.js y Deno

  9. Diferencias entre el navegador, Node.js, y Deno

  10. Correr JavaScript externo en Node.js y Deno

  11. Instalar y configurar ESLint con la guía de estilo de AirBnB

Tipos de datos primitivos

J20-may

  1. Repaso de comportamiento

  2. Tipos de datos primitivos. Números

  3. Cadenas de caracteres

  4. Variables vs valores. Declaraciones var, let y const

  5. Conversiones de tipos

  6. Booleanos. Operador de igualdad (==) vs identidad (===)

Intérprete, objetos, arreglos

L24-may

  1. Construir un intérprete hipotético. La clase Variant

  2. Interpretar operador de igualdad e identidad

  3. Tipos de datos compuestos en JavaScript: funciones, arreglos, y objetos

  4. Objetos en JavaScript: arreglos asociativos de string con Variant

  5. Objetos en el intérprete. Acceso a propiedades

  6. Objetos literales (JSON). Conversión y comparación de objetos: toString() y valueOf()

  7. Arreglos son objetos. Arreglos dispersos. Propiedad length

  8. Operaciones con arreglos. Recorrer arreglos

Funciones

J27-may

  1. Repaso del intérprete hipotético de JavaScript

  2. Funciones son objetos

  3. Funciones flecha

  4. Argumentos por defecto. Cantidad arbitraria de argumentos. Propiedad length

  5. Conversión implícita de primitivos a objetos Boolean, Number, String

  6. Necesidad de clases. Ejemplo de objetos Fraction

  7. Funciones constructoras de objetos

Pseudoclases y clases

L31-may

  1. Repaso de la función constructora Fraction

  2. Función constructora que genera redundancia

  3. Herencia basada en prototipos

  4. El operador new

  5. Clases en ECMAScript 6

  6. Layout de los elementos globales con FlexBox

  7. Darle estilo global al tablero del juego

  8. Estilos de las celdas del tablero

  9. Eventos en JavaScript del lado del cliente

  10. Clases y objetos en JavaScript del lado del cliente

JavaScript del lado del cliente

J03-jun

  1. Paradigma de programación orientada a eventos

  2. Eventos y objetos. Encapsulación

  3. Posicionamiento absoluto y relativo. Estilos computados

  4. Atributos de datos en HTML. Manipular estilos desde JS. getComputedStyle()

  5. Aplicar transiciones a una propiedad cambiada con JS

  6. Cambiar la clase de un elemento con JS. Temporizadores con setTimeout()

  7. Mostrar/ocultar (toggle) un elemento de ayuda

Eventos y máquinas de estados

L07-jun

  1. Proyecto: entregables JS cliente y diseño paso de mensajes

  2. Concepto de máquina de estados

  3. Máquinas de estados para diseñar en programación orientada a eventos

  4. Máquina de estados del ejemplo del tablero por ingeniería inversa

  5. Instrucciones para la actividad de diseño del paso de mensajes

  6. Diseñar una máquina de estados para la aplicación del proyecto

  7. Pregunta: cantidad esperada de estados en diseño de proyecto

  8. Implementar una máquina de estados. Getters y setters en ES6

Módulos en ES6

J10-jun

  1. Modularización en JS (historia). CommonJS vs módulos de ES6

  2. Exportar e importar múltiples símbolos en ES6

  3. Otras formas de exportar e importar en ES6

  4. Módulos en navegadores. Limitación de WebKit en XHTML

  5. Política del mismo origen. Comando http-server

  6. Rodeo para XHTML en WebKit (enlace simbólico)

  7. Modularizar el código del ejemplo del board game

  8. Modelo de objetos del documento (DOM). La pseudoclase Node

Manipulación del DOM

L14-jun

  1. Repaso del DOM

  2. Permitir al usuario establecer filas y columnas del tablero

  3. Eliminar nodos hijos de un elemento

  4. clase Node: crear elementos, agregar hijos y atributos

  5. innerHTML y outerHTML de Element

  6. La interfaz de Element. Las jerarquías de Node y Element

(continúa en el próximo título)

Comportamiento del lado del servidor

L14-jun

  1. Lenguajes de programación del lado del servidor

  2. Crear un proyecto de Node: npm init

  3. Un servidor web mínimo con Node.js

Módulos en Node.js

J17-jun

  1. Servir una página 404 Not Found. npm start. Nodemon

  2. Módulos CommonJS: module.exports, require

  3. Módulos de ES6 en Node.js

  4. Sevir archivos estáticos (públicos). Módulo path

  5. Concurrencia por eventos: Entrada/salida sincrónica y asincrónica

  6. io.readFile(). Metáfora del mesero

  7. Implementación de servir archivos estáticos (públicos)

Express.js framework

L21-jun

  1. Callback functions y el paradigma de programación orientado a eventos

  2. Más detalles sobre retrollamadas de funciones (callback functions)

  3. Obtener MIME type a partir de la extensión de archivo

  4. Proyectos con NPM (Node Package Manager). Instalar Express.js como dependencia del proyecto

  5. Significado de los números de versión. Instalación limpia vs actualización con NPM (archivo package-lock.json)

  6. Una aplicación web mínima con Express.js

  7. Express middleware functions. Cadena de funciones intermedias

  8. Enrutamiento en Express de acuerdo al método HTTP

  9. Servir archivos estáticos públicos

Modelo-vista-controlador (MVC) con Express

J24-jun (edición pendiente)

Plantillas con Express

L28-jun (edición pendiente)

Web sockets (parte 1)

J01-jul (edición pendiente)

JavaScript asincrónico

L05-jul

  1. Motivación. Problema de calcular subtotal de carro de compras

  2. Código sincrónico (serial/secuencial) con manejo de erores

  3. Solución sincrónica al problema del subtotal

  4. Ejecución asincrónica con callback functions

  5. Solución al problema del subtotal con callback functions

  6. Limitaciones de los callback: anidamiento y manejo de errores

  7. Concepto de promesa (Promise objects). Crear promesas

  8. Uso de las promesas. Encadenar promesas

  9. Cómo funcionan las promesas

  10. Solución al problema de subtotal con promesas en serie

TypeScript

J08-jul (edición pendiente)

Programación web móvil (ionic)

L28-jul (edición pendiente)

Web sockets (parte 2)

J15-jul (edición pendiente)

Administradores de contenido (CMS)

L19-jul (edición pendiente)

J22-jul (edición pendiente)