Universidad de Costa Rica
Escuela de Ciencias de la Computación e Informática
San Pedro, Montes de Oca
Grupo 01: L 13-15:50 / J 13-14:50

Jeisson Hidalgo-Céspedes
Braulio José Solano-Rojas
Consulta: L 16-17 / J 15-16
Asistente: Pendiente
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

50%

Ejercicios a resolver

Proyecto

50%

Hey! Yo lo vi primero

Lecciones

Arquitectura web [L10-ago]

  1. Historia de la web

  2. ¿Cómo hacen dinero los navegadores si son gratis?

  3. El paradigma de computación distribuida

  4. Arquitectura de la web: un modelo distribuido cliente-servidor

  5. El servidor web

  6. El agente de usuario: el cliente o navegador web

  7. Identificador de recursos (URI, URL). Estándares de internet (RFC)

Protocolo HTTP [J13-ago]

  1. Protocolo HTTP. Mensajes de solicitud y respuesta

  2. RFC. Mensaje de solicitud: transformar un URI. Línea solicitud. Métodos

  3. Mensaje de solicitud: Versión HTTP. Campos del encabezado. Línea vacía

  4. Sesión HTTP con nc/telnet. Problema de los cambios de línea

  5. El mensaje de respuesta HTTP. Campos del encabezado. Cuerpo

  6. Análisis HTML. Solicitud de un URI relativo

  7. Sesión HTML detallada. Diagrama de secuencia

  8. Servidor web en máquina virtual: student_production_site

XML [L17-ago]

  1. Necesidad de XML

  2. Representación de datos: documentos vs. bases de datos

  3. Elementos XML

  4. Atributos de los elementos XML

  5. Prólogo XML. Codificación Unicode

  6. Elementos vs. atributos. El árbol de nodos (DOM)

  7. Semántica de los elementos y atributos XML

  8. Realimentación de los documentos hechos en equipos (parte 1)

  9. Elementos XML vistos como objetos en C++

  10. Realimentación de los documentos hechos en equipos (parte 2)

  11. Ejercicio DOM

(X)HTML [J20-ago]

  1. HTML vs XHTML

  2. Validar un documento (X)HTML

  3. Prólogo de un documento (X)HTML

  4. El elemento documento. Extensión .xhtml

  5. Atributos generales: id, class

  6. Encabezado (X)HTML. Metadatos

  7. Cuerpo (X)HTML. Elementos de seccionamiento

  8. Web semántico

  9. Rutas relativas/absolutas

  10. Errores y validación de un archivo (X)HTML

  11. Elementos de texto: títulos, párrafos, listas, elementos de línea

  12. Hiperenlaces. Anclas

  13. Imágenes. Figuras. Favicon

CSS: principios [L24-ago]

  1. Contenido, presentación, y comportamiento

  2. Estilos no controlados por el autor

  3. Estilo en el elemento con el atributo style

  4. Estilo en el encabezado del documento. Selectores

  5. Estilos en una hoja externa

  6. Principio de cascada: herencia, especificidad, ubicación

  7. Módulos CSS. Especificaciones del W3C

  8. Selectores. Prefijos del navegador. Secciones CDATA

  9. Selector de ID (#). Selector de clase (.)

  10. Resumen del análisis del sitio web

  11. Mapa del sitio web del proyecto

  12. Esquemas de página para el proyecto

  13. Método sugerido de diseño de esquemas para el proyecto

Diseño de sitios web (Braulio Solano) [J27-ago]

  1. Propósito del diseño de sitios web

  2. Diseño visual

  3. Diagramación y composición: Proceso de diseño. Grids. Balance. Unidad. Énfasis. Navegación. Tamaño

  4. Color: Psicología. Temperatura. Valor cromático. Teoría. Paletas

  5. Textura: Punto. Línea. Figura. Volumen. Patrón

  6. Texto: Tamaño. Resaltado. Tipografía. Espaciado. Alineamiento. Familias

  7. Imágenes, gráficos, animaciones. Formatos

  8. Consistencia. Página inicio. Navegadores. Estructura del sitio

CSS: modelo de caja, posición [L31-ago]

  1. Módulos CSS. Especificaciones del W3C. MDN

  2. Vendor prefixes

  3. Obtener imágenes para el proyecto. SVG. Inkscape

  4. Modelo de caja. Herramientas de desarrollo del navegador. Estilos computados

  5. Leer las especificaciones W3C. Valores relativos y absolutos

  6. Relleno. Margen

  7. Bordes

  8. Aplicar el modelo de caja al sitio web

  9. Modelo de posicionamiento. Flujo normal. Despliegue de bloque/línea

  10. Posicionamiento estático, relativo, absoluto

  11. Flexbox: Display. Dirección

  12. Flexbox: estilos del contenedor

  13. Flexbox: estilos de los ítems

  14. Elementos div y span para presentación

CSS: color, animaciones, responsive design [J03-set]

  1. Modelo de color. Modelo de variables

  2. @import. !important

  3. Filtros

  4. Pseudoclase :hover. Modificar .css con navegador. text-decoration

  5. Transformaciones

  6. Transiciones

  7. Animaciones

  8. Diseño adaptativo (responsive). Pseudoelementos. Media queries

Formularios web, tablas, JavaScript [L07-set]

  1. Problema de convertir bytes

  2. Diseño de interfaz del convertidor (wireframe)

  3. Controles disponibles para formularios web (MDN)

  4. Formulario web para el convertidor de bytes

  5. Tablas (X)HTML. border-collapse. colspan

  6. Ancho/alto mínimo/máximo (min-width, max-width)

  7. Comportamiento. Historia de JavaScript. ECMAScript

  8. Pseudoprotocolo JavaScript

  9. Atributos de manejo de eventos (intrínsecos)

  10. Elemento <script>. Embedded JS. DOM query methods. defer-async

  11. La consola de JavaScript. document.write()

  12. JavaScript en un archivo externo

  13. La consola de JavaScript en el navegador

  14. Node.js. Linting

  15. Evento onload. addEventListener()

Linting. Tipos de datos. Números [J10-set]

  1. Anuncio: Avances de proyecto. Div-span.

  2. Configuración de Airbnb para el linter

  3. Repaso del Byte Converter

  4. Referencia vs invocación de función. console.dir(). DOM en el MDN

  5. Corregir los diagnósticos del linter. Puntos y comas en JS

  6. Declaraciones var, let, const

  7. Variables y tipos de datos en JS. Documentación del linter

  8. Paradigmas de programación: funcional, procedimental, orientado a objetos

  9. Manejadores de eventos

  10. Números en JavaScript

  11. Textos. innerHTML. Inyección de código. document.createElement/appendChild(). backticks

Textos. Conversión de tipos. Funciones [L14-set]

  1. Textos literales multilínea

  2. Expresiones regulares. Texto preformateado

  3. Interpolación de cadenas de caracteres

  4. Operaciones con textos. Split. Grupos en expresiones regulares

  5. Conversiones de datos implícitas. Libro del rinoceronte (Flanagan)

  6. Conversión explícita de números a textos

  7. Conversión explícita de textos a números

  8. Diseño de una solución funcional para el Byte Converter

  9. Explorar el DOM con el navegador y el MDN

  10. Recorrer las filas de una tabla. Operadores de igualdad == y ===

  11. Implementación del modelo funcional

  12. Errores en la consola. Depuración en el navegador

Manipulación de estilos [J17-set]

  1. Repaso. Corregir los diagnósticos del linter

  2. Reporte en el DOM en lugar de la consola. textContent innerText outerText innerHTML outerHTML

  3. Manipular estilos con JS. className. classList

  4. Elementos div y span para comportamiento. Burlar el linter

  5. Refactoring: Evitar reporte de mensajes repetidos

  6. Supuestos (asserts). Evento click. Conectar varios eventos a un mismo manejador

  7. Campo de decimales. parseInt(). toFixed(). Evitar variables globales

  8. Diseño de convertir a bytes (a la representación intermedia)

  9. Booleanos en JavaScript

  10. Formas de declarar funciones en JS

  11. Funciones flecha (lambda)

  12. Funciones como objetos. Argumentos por defecto. Múltiples parámetros (variadic). Variables estáticas

[L21-set]

Protocolo de paso de mensajes, módulos JS [J24-set]

  1. Protocolo de paso de mensajes, máquina de estados, y algoritmos para proyecto

  2. Importar/exportar módulos JavaScript en el navegador