Desarrollo de aplicaciones web (RIA) basadas en HTML y JavaScript

Licencia de Creative Commons mario@mariogl.com

Temario

  • HTML5
  • CSS
  • JavaScript
  • jQuery
  • Herramientas de soporte y depuración (Chrome Developer Tools, Firefox Developer Tools)

Conceptos generales

Conceptos generales

  • Rich Internet Applications

  • Single Page Applications

  • AJAX

  • Separación entre contenido y estilos

  • Herramientas de desarrollo

Web

¿Qué es una web?

  • Medio de transmitir información

  • Información = "contenidos"

  • Contenidos vs propiedades visuales

  • El contenido debe tener sentido por sí solo

¿Cómo me envía el servidor una web?

  • Peticiones del cliente, respuestas del servidor

  • Varias peticiones de varios recursos, cada uno con su URL

  • Waterfall

  • <script>, defer y async

Motores de renderizado

Motores de renderizado

  • Gecko: Firefox

  • Webkit: Chrome y Safari

  • Trident: IE

  • EdgeHTML: Edge

Introducción a

HTML y CSS

HTML

  • Lenguaje de marcas (etiquetas)

  • Cada etiqueta marca el inicio y el fin de un elemento

  • HTML estructura el texto y le da significado

  • HTML 5

CSS

  • Lenguaje que define cómo se presentan los elementos del HTML

  • Separa contenido de propiedades visuales

  • CSS 3

HTML

HTML

  • Apertura y cierre

  • Atributos

  • Anidaciones (sangrado)

  • DOM

  • Esqueleto mínimo

  • Emmet

  • Comentarios

Elementos HTML del <head>

  • Título

  • Etiquetas meta

    • meta charset

    • meta viewport

  • CSS

  • JavaScript

  • Favicon (generador)

Elementos HTML del <body>

  • Elementos de bloque vs. elementos en línea

  • Elementos para el layout:

    • div

    • section

    • main

    • article

    • aside

    • nav

    • header

    • footer

Elementos HTML del <body>

  • Encabezados (h1-h6)

  • Párrafos (p)

  • Saltos de línea (br)

  • Listas (ul, ol, li)

  • Hiperenlace (a)

  • Imagen (img)

  • Icono (i)

  • Importante (strong)

  • Elemento de texto sin semántica (span)

CSS

Hojas de estilos

  • ¿Qué es una hoja de estilos?

  • ¿Dónde se cargan las hojas de estilos?

  • Hojas de estilo de navegador, de usuario y de autor

  • Reglas CSS

Selectores

  • Por etiqueta

  • Por clase

  • Por id

  • Por parentesco:

    • descendiente

    • hijo directo

    • hermano

    • siguiente hermano

Selectores

  • Por pseudoclase:

    • :hover

    • :visited

    • first-child, last-child, nth-child(n)

    • first-of-type, last-of-type, nth-of-type(n)

    • :focus

  • Por atributo

  • Mezcla

Box model

Box model

  • Contenido + padding + borde + margen

  • Medidas totales

  • La propiedad box-sizing

Unidades CSS

Unidades en CSS

  • px

  • %

  • calc()

  • em

Flow

Flow

  • El flujo

  • Cambiar entre block e inline: la propiedad display

  • Rompiendo el flujo: position

    • relative

    • absolute

    • fixed

  • Elementos flotantes

  • Clearfix

  • Flexbox

SASS

SASS

  • Código fuente -> código compilado

  • Modularización con @import

  • Anidaciones

  • Variables
  • Mixins
    • Sin argumentos
    • Con argumentos obligatorios
    • Con argumentos opcionales

Entorno de desarrollo

Entorno de desarrollo

NodeJS y npm

npm

  • Instalar última versión después de instalar nodeJS

  • Repositorio de módulos distribuibles

  • Módulos globales y módulos locales

  • La carpeta node_modules

  • El archivo package.json

  • npm init

  • npm install (--production)

JavaScript

JavaScript

  • Interpretado, compilado y ejecutado en el navegador

  • Cada navegador programa su propio motor de JS

  • Estandarización: ECMAScript

  • La versión ES6 o ES2015

  • Transpiladores: Babel, TypeScript

Organización del código JavaScript

  • Ejemplo de uso clásico de JS: utilizar un plugin de jQuery en nuestra web, o implementar alguna interacción con el usuario

  • Pocas líneas de código, todas en un mismo archivo

Organización del código JavaScript

  • Programar toda la UI de una página

  • ¿2000 líneas en un solo archivo?

Ventajas

Inconvenientes

  • Difícil de leer/entender
  • Difícil de mantener
  • Poca reusabilidad
  • Difícil encontrar código no usado
  • Colisiones de nombres
  • Una sola petición HTTP

Organización del código JavaScript

  • Optimización: dividir el código en varios archivos/módulos

Ventajas

Inconvenientes

  • Difícil encontrar código no usado (menos difícil que antes)
  • Colisiones de nombres
  • Muchas peticiones HTTP
  • El orden importa: dependencias
  • Legible e inteligible
  • Fácil de mantener
  • Reutilizable
  • Cargamos sólo lo que necesitamos

Organización del código JavaScript

  • Dependencias: es difícil asegurar el orden, y no es posible tener dependencias circulares

Organización del código JavaScript: módulos

  • Module loaders: ellos gestionan las dependencias y cargan los módulos (RequireJS, SystemJS)

  • Module bundlers: además de lo anterior, generan un solo código encadenado y minificado (browserify, webpack)

Organización del código JavaScript: módulos

  • ¿Puedo escribir mis módulos como yo quiera? ¿hay un estándar?

  • ¿AMD, CommonJS, UMD, ES6?

  • Webpack

  • ES6 -> Babel -> ES5 -> webpack -> bundle -> browser

ES6

  • let y const

  • Template literals

  • for ... of

  • Funciones

  • Arrow function

  • Clases

  • Módulos

Iterables

  • Propiedad length

  • Métodos:

    • forEach

    • map

    • filter

    • reduce

    • find

    • indexOf

  • Encadenamiento

Webpack

Webpack

  • Module bundler

  • Paquete npm

  • webpack.config.js

  • webpack-dev-server

  • Loaders:

    • css-loader, style-loader

    • sass-loader

    • file-loader

    • babel-loader (con babel-core)

    • raw-loader

jQuery

jQuery

  • Framework JS

  • Manipulación del DOM

  • El objeto jQuery

  • Evento DOMContentLoaded

  • HTMLElement

Seleccionando

  • Selectores CSS

  • Navegando por el DOM

    • prev(), next(), siblings()

    • parent(), closest()

    • children(), find()

    • first(), last(), eq()

Manipulando el DOM

  • Crear elementos e insertarlos en el DOM

    • append(), appendTo()

    • prepend(), prependTo()

    • after(), insertAfter()

  • Acceder al nodo de texto ( text() )

  • Acceder a la cadena HTML ( html() )

Accediendo a los atributos

  • attr()

  • addClass(), removeClass(), hasClass()

  • css()

Templates

  • lodash ( _ )

  • <script type="text/html"></script>

  • _.template()

  • <%= %>

  • <% _.each(datos, function(dato, i) { }) { } %>

  • Variables en forma de objeto

Links

mario@mariogl.com

@marioglweb