Post on 27-Dec-2019
transcript
Desarrollo de aplicaciones web (RIA)
basadas en HTML y JavaScript
TemarioHTML5CSSJavaScriptjQueryHerramientas de soporte y depuración (ChromeDeveloper Tools, Firefox Developer Tools)
Conceptos generales
Conceptos generales
Rich Internet ApplicationsSingle Page ApplicationsA JAXSeparación entre contenido y estilosHerramientas de desarrollo
Web
¿Qué es una web?
Medio de transmitir informaciónInformación = "contenidos"Contenidos vs propiedades visualesEl contenido debe tener sentido por sí solo
¿Cómo me envía el servidor una web?
Peticiones del cliente, respuestas del servidorVarias peticiones de varios recursos, cada uno con suURLWaterfall<script>, defer y async
Motores derenderizado
Motores de renderizado
Gecko: FirefoxWebkit: Chrome y SafariTrident: IEEdgeHTML: Edge
Introducción aHTML y CSS
HTML
Lenguaje de marcas (etiquetas)Cada etiqueta marca el inicio y el fin de un elementoHTML estructura el texto y le da significadoHTML 5
CSS
Lenguaje que define cómo se presentan los elementosdel HTMLSepara contenido de propiedades visualesCSS 3
HTML
HTML
Apertura y cierreAtributosAnidaciones (sangrado)DOMEsqueleto mínimoEmmetComentarios
Elementos HTML del <head>
TítuloEtiquetas meta
meta charsetmeta viewport
CSSJavaScriptFavicon ( )generador
Elementos HTML del <body>
Elementos de bloque vs. elementos en líneaElementos para el layout:
divsectionmainarticleasidenavheaderfooter
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 autorReglas CSS
Selectores
Por etiquetaPor clasePor idPor parentesco:
descendientehijo directohermanosiguiente hermano
Selectores
Por pseudoclase::hover:visitedfirst-child, last-child, nth-child(n)first-of-type, last-of-type, nth-of-type(n):focus
Por atributoMezcla
Box model
Box model
Contenido + padding + borde + margenMedidas totalesLa propiedad box-sizing
Unidades CSS
Unidades en CSS
px%calc()em
Flow
Flow
El flujoCambiar entre block e inline: la propiedad displayRompiendo el flujo: position
relativeabsolutefixed
Elementos flotantesClearfixFlexbox
SASS
SASS
Código fuente -> código compiladoModularización con @importAnidacionesVariablesMixins
Sin argumentosCon argumentos obligatoriosCon argumentos opcionales
Entorno dedesarrollo
Entorno de desarrollo
IDE: (Atom, Angular IDE...)
y npm
Visual Studio CodeGitNodeJS
NodeJS y npm
npm
Instalar última versión después de instalar nodeJSRepositorio de módulos distribuiblesMódulos globales y módulos localesLa carpeta node_modulesEl archivo package.jsonnpm initnpm install (--production)
JavaScript
JavaScript
Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JSEstandarización: ECMAScriptLa versión ES6 o ES2015Transpiladores: Babel, TypeScript
Organización del código JavaScript
Ejemplo de uso clásico de JS: utilizar un plugin dejQuery en nuestra web, o implementar algunainteracción con el usuarioPocas 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/entenderDifícil de mantenerPoca reusabilidadDifícil encontrar código nousadoColisiones de nombres
Una sola peticiónHTTP
Organización del código JavaScript
Optimización: dividir el código en variosarchivos/módulos
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombresMuchas peticiones HTTPEl orden importa:dependencias
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamos
Organización del código JavaScript
Dependencias: es difícil asegurar el orden, y no esposible tener dependencias circulares
Organización del código JavaScript: módulos
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (browserify,webpack)
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?¿AMD, CommonJS, UMD, ES6?WebpackES6 -> Babel -> ES5 -> webpack -> bundle -> browser
ES6
let y constTemplate literalsfor ... ofFuncionesArrow functionClasesMódulos
Iterables
Propiedad lengthMétodos:
forEachmapfilterreducefindindexOf
Encadenamiento
Webpack
Webpack
Module bundlerPaquete npmPresetswebpack.config.jswebpack-dev-serverLoaders:
css-loader, style-loadersass-loaderfile-loaderbabel-loader (con babel-core)raw-loader
jQuery
jQuery
Framework JSManipulación del DOMEl objeto jQueryEvento DOMContentLoadedHTMLElement
Seleccionando
Selectores CSSNavegando por el DOM
prev(), next(), siblings()parent(), closest()children(), find()first(), last(), eq()
Manipulando el DOM
Crear elementos e insertarlos en el DOMappend(), 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
Playground de BabelConfiguración de WebpackDocumentación sobre todas las API de JavaScriptJSON Server APIDocumentación sobre métodos para navegar por elDOM con jQuery