Desarrollo de aplicaciones web (RIA) basadas en HTML y JavaScript
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
- Sin argumentos
Entorno de desarrollo
Entorno de desarrollo
-
IDE: Visual Studio Code (Atom, Angular IDE...)
-
NodeJS y npm
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
Desarrollo de aplicaciones web (RIA) basadas en HTML y JavaScript
By mariogl
Desarrollo de aplicaciones web (RIA) basadas en HTML y JavaScript
Curso RIA basadas en HTML y JavaScript Lleida 6-10 septiembre 2017
- 1,310