Guía Didáctica
Construcción de
Elementos de Software Web 1
Intensidad Horaria: 72 horas
Media Técnica en Programación de Sistemas de Información
Politécnico Jaime Isaza Cadavid - 2020
Objetivo General
Crear aplicaciones web orientadas al desarrollo del lado del cliente, donde se evidencie el consumo de servicios desde el lado del servidor usando las tecnologías HTML, CSS, JavaScript, ReactJS
Objetivos Específicos
•
Desarrollar una aplicación web frontend de forma iterativa e incremental.•
Desarrollar aplicaciones que utilicen patrones de arquitectura cliente servidor.•
Utilizar HTML como lenguaje de estructura para identificar los elementos claves dentro de una aplicación web.•
Crear hojas de estilos de cascada para realizar la presentación de las páginas de un sitio web.•
Desarrollar scripts en JavaScript que validen formularios y provean interactividad al usuario.•
Utilizar ReactJS como librería frontend, diseñando aplicaciones de tipo SPA (Single Page App).Competencias Generales
•
Crear el contenido de páginas web usando HTML.•
Hacer la presentación y mejoras la apariencia de páginas web usando CSS.•
Realizar validaciones de formularios e interación usando JavaScript•
Implementar el marco de trabajo ReactJS para generar SPA (Single Pages Apps)•
Desplegar y llevar a producción un desarrollo del lado del clienteCompetencias Básicas y Transversales
•
Escucha activa•
Observación•
Relaciones interpersonales•
Trabajar en equipo•
Trabajar en forma autónoma•
Desarrollar abstracción, análisis y síntesis•
Identificar, plantear y resolver problemas•
Generar control de versiones de código•
Interpretar requisitos y trabajar bajo metodologías ágiles de desarrolloSemana Uno
Fundamentos del desarrollo Web
• Introducción al internet y como funciona
• Introducción al desarrollo web , estructura de una página web
• Principales lenguajes en el desarrollo web
• Herramientas para el desarrollod e un producto web
Semana Dos
HTML – Lenguaje de Marcas de Hipertexto
• Definición de HTML y HTML5 - ¿Qué es el DOM?
• Definición de etiquetas y etiquetas básicas
• Etiquetas Estructurales y semánticas
• Formularios en HTML
Semana Tres
CSS – Hojas de Estilo en Cascada
• Definición de CSS y CSS3
• Hojas de estilo externas, incrustradas y en línea
• Estructura de una regla: selector, declaración, propiedad, valor
• Reglas para aplicar estilos: orden de prioridad
• Tipos de Selectores
• Modelo de caja: contenido, padding, border, margin
Semana Cuatro
Diseño Responsivo – Media Queries
• ¿Qué es el diseño responsivo?
• Creación de sitios web responsive – Mobile First
• Fijar el viewport para diseño responsivo
• Imágenes responsivas
• Media Queries
Semana Cinco
Propiedades responsivas : Flex - Grid
• Definición de la propiedad flex y su funcionamiento
• Ejemplos de implementación haciendo uso de Flex
• Definición de la propiedad grid y su funcionamiento
• Ejemplos de implementación haciendo uso de grid
Semana Seis
Marco de Trabajo CSS : Bootstrap
• Definición de los marcos de trabajo
• Opciones de marcos de trabajo CSS
• Introducción a Bootstrap como marco de trabajo CSS
• Componentes de Boostrap
• Sistema de “grillas” en Boostrap
Semana Siete
Fundamentos de JavaScript – Conceptos Básicos
• Definición de JavaScript y principales características
• Variables, sentencias de decisión, asignación e iteración
• Funciones y arreglos
• Integrando Javascript en una página web - Eventos
Semana Ocho
Fundamentos de JavaScript – Nuevas Funcionalidades
• Declaración de variables let, const
• Implementando funciones flechas
• Introducción a P.O.O – Clases
• Arreglos de Objetos – JSON (Notación Objetual de JavaScript)
• Entrega y seguimiento del proyecto pedagógico integrador
Semana Nueve
ReactJS – Librería Frontend para interfaces de usuario
• Definición de ReactJS y virtual DOM
• Programación Declarativa – JSX (Javascript XML)
• Definición de Componentes y tipos de componentes en ReactJS
Semana Diez
Componentes, props (propiedades) y estilos en ReactJS
• Desacoplando una página web en componentes haciendo uso de ReactJS
• Definición de props (Propiedades) y ejemplos prácticos
• Implementando Bootstrap en ReactJS
Semana Once
Estados y Eventos en ReactJS
• Definición de state y setState
• Implementación de eventos
• Levantamiento del estado
Semana Doce
Taller Práctico: Desarrollo FrontEnd
• Taller práctico de los temas abordados
• Entrega y seguimiento del proyecto pedagógico integrador
Semana Trece
Ciclo de vida de un Componente
• Definición del ciclo de vida de un componente en ReactJS
• Montaje: Ejemplos y métodos involucrados
• Actualización: Ejemplos y métodos involucrados
• Desmontaje: Ejemplos y métodos involucrados
Semana Catorce
Enrutamiento en ReactJS
• Diferencia entre una MPA (Multi Page App) y una SPA (Single page App)
• Instalación y configuración de react-router-dom
• Implementación de BrowserRouter, Switch, Link, Route y Redirect
• Ejemplos y ejercicios de enrutamiento con ReactJS
Semana Quince
Hooks
• Definición de Hooks en ReactJS
• Implementación y uso de useState
• Implementación y uso de useEffect
• Ejemplos y ejercicios prácticos haciendo uso de Hooks
Semana Dieciséis
Peticiones a un servidor con ReactJS – Introducción
• Definición de petición a un servidor
• Métodos de petición HTTP Y códigos de respuesta HTTP
• Estados de una petición
• Instalación e implementación de axios
Semana Diecisiete
Peticiones a un servidor con ReactJS – Profundización
• Peticiones tipo GET haciendo uso de AXIOS
• Peticiones tipo POST haciendo uso de AXIOS
• Peticiones tipo PUT haciendo uso de AXIOS
• Peticiones tipo DELETE haciendo uso de AXIOS
• Entrega y seguimiento del proyecto pedagógico integrador
Semana Dieciocho
Buenas prácticas y puesta en producción de una aplicación en ReactJS
• Arquitectura de un proyecto en ReactJS
• Implementación e minima responsabilidad, escalabilidad, divide y venceras
• Introducción a Vezel – now.sh
• Desplegando nuestra aplicación ReactJS en la nube.
Bibliografía Básica
•
Felke-Morris, T. (2012). Basics of web design: HTML, XHTML & CSS3. Boston:Addison-Wesley.
•
McFarland, D. S. (2012). CSS3: The missing manual. Sebastopol, CA: O'Reilly.•
Miller, B. D. (2014). Above the fold: Understanding the principles of successful web site design. Blue Ash, Ohio: How Books, an imprint of F+W Media.•
Robbins, J. N. (2012). Learning Web Design. Oreilly & Associates Inc.•
Felke-Morris, T. (2019). Web development and design foundations with HTML5.•
Beaird, J. (2014). The principles of beautiful web design. Collingwood, Victoria:SitePoint.
•
Samara, T. (2017). Making and Breaking the Grid: A Graphic Design Layout Workshop. Rockport, UNITED STATES: Rockport Publishers.•
Crawford, C. (2017). React. JS fundamentals to advanced: LiveLessons.•
Fhala, B. (2017). Learning path: React : make stunning React websites.•
Bugl, D., & Safari, an O'Reilly Media Company. (2019). Learn React Hooks.•
Kroonenburg, B. R. (n.d.). Udemy Online Courses - Learn Anything, On Your Schedule. Retrieved September 29, 2016, from https://www.udemy.com/•
Khan Academy. (n.d.). Retrieved February 07, 2018, from https://www.khanacademy.org/•
Online Book. (n.d). Retrieved January 17, 2016, fromhttp://hectorip.github.io/Eloquent-JavaScript-ES-online/
