Introducción

Objetivos del curso

• Configurar entornos reales de trabajo para desarrollo web

  • Editor de código
  • Control de versiones
  • Automatización de tareas

• Desarrollo Web actual

  • Páginas adaptables
  • Criterio Mobile First
  • Frameworks de CSS: Bootstrap y Material Design
  • Frameworks de JavaScript: React.js

• Conocer arquitecturas de desarrollo de software

  • MEAN stack
  • Real time
  • Aplicaciones híbridas para móviles
  • Web Components

• Apreciar la evolución en el desarrollo del software

  • Tests: Mocha, Code coverage, Travis...
  • CSS -> Preprocesado de CSSS -> Frameworks de CSS -> CSS Modules...
  • Uso de transpilers y evolución actual de JavaScript

Conocimientos previos

• html, css y js básico
• Puedes seguir este tutorial para html y css básico
• Empezaremos con un ejercicio práctico:
  • Nos familiarizamos con Sublime Text
  • Practicamos con Emmet
  • Repasamos Chrome Developer Tools
  • Repasamos etiquetas html5 y css

Relación con el currículo de DAW

Sistemas informáticos

• Utilizaremos comandos de consola de Linux
• Ejecución de servicios
• Añadir repositorios e instalar paquetes

Bases de datos

• Utilizaremos una base documental MongoDB (la opción más extendida)
  • ¡¡¡No aparece en el currículo!!!
• Quizá algún ejercicio con MySql y phpMyAmin

Lenguaje de marcas

• Crear y validar documentos en html

Programación

• Utilizaremos elementos y estructuras propias de los lenguajes de programación, mediante JavaScript

Entornos de desarrollo

• Arquitectura de aplicaciones Web
  • Api REST
  • Aplicaciones para móviles
• Instalación y uso de entornos de desarrollo
  • Configuración y uso de Sublime Text
  • Otras opciones
  • Entornos de optimización y automatización de tareas mediante con node.js
• Pruebas mediante Mocha
• Integración continua mediante Travis CI
• Code Coverage con istanbul
• Control de versiones con Git y GitHub

Despliegue y aplicaciones Web

• Instalación de un servidor Web
  • Express y node.js
• Control de versiones con Git y GitHub

Desarrollo Web en entorno Servidor

• Arquitectura de aplicaciones Web
• Api REST
  • Soluciones híbridas
  • Soluciones en tiempo real
  • ¡Nada de etiquetas embebidas: asp, php...!

Desarrollo Web en entorno Cliente

• Repaso general de todo el temario

Diseño de interfaces Web

• Repaso general de todo el temario

Cómo trabajar

Roles

• ¿Quién es el profesor?
  • Persona con conocimientos límitados
  • Tiempo de respuesta: ¿horas? ¿días?
  • Buen orientador

• ¿Quién es stackoverflow?
  • Multitud de personas con múltiples conocimientos (ver tags)
  • Tiempo de respuesta: ¿minutos?
  • La mejor herramienta junto con GitHub para ir haciendo curriculum

Trabajo por proyectos

• Complicado con los módulos si los hacemos "estancos"
• Fomenta la creatividad y el trabajo en equipo
• Que trabajen los alumnos. Es más interactivo y menos cansado :-)
• Los controlamos mediante GitHub o Bitbucket
  • Repositorios privados o públicos
  • PR en vez de copiarse del compañero
  • Tiene que estar claro como funciona desde 1º y no hay otra forma que haciendo código

Otras ideas

• Servidor en la nube
  • So You Start con Vesta
  • Primer portfolio del alumno
  • Entorno real
• Virtualiza con Docker
  • Más rápido
  • Se puede montar un servidor de imágenes Docker en el propio centro
• Uso de gestores de contenidos (Wordpress, Joomla, Magento, Prestashop)...

Documentación

• Generada con Gitbook

• Para generar las slides, pdf, epub o mobi

  • Es necesario tener instalado calibre

  git clone [email protected]:juanda99/curso-webapps.git
  cd curso-webapps
  gitbook install
  npm install -g gitbook-cli
  npm install
  npm run slides
  npm run pdf
  npm run epub
  npm run mobi
  

• Libro online con generación de pdf, epub y mobi