Responsive web design

• El modo dispositivo de Google Chrome

• meta viewport

• box-sizing

• Layout fijo vs elástico
  

• Proporciones
  

• Versiones para móvil

Media queries

• Breakpoints

• Distintas maneras de incluirlas

• Conflictos

• Media queries en el device mode de Chrome

• html5shim y respond.js

Imágenes responsive

• Imágenes de fondo

• Los atributos srcset y sizes

• El elemento picture

Bootstrap

• Cargar Bootstrap

  • <link>

  • npm bootstrap-sass

• Breakpoints

• Las zonas xs, sm, md y lg

• La grid

  • 12 columnas

  • Gutter

  • .container > .row > .col-*

  • .col-*-offset-*

• Cambiando los breakpoints, el container o los gutters

Bootstrap - clases útiles

• hidden-*, visible-*, hidden, show

• pull-left y pull-right

• text-left, text-center, text-right

• list-unstyled, list-inline

• clearfix

• img-responsive, img-circle, img-thumbnail

• text-primary, text-success, text-info, text-warning, text-danger

• bg-primary, bg-success, bg-info, bg-warning, bg-danger

• center-block

Bootstrap - formularios

• .form-group

• .form-control

• .btn, .btn-default, .btn-primary, etc.

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?

• 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

• Difícil encontrar código no usado (menos difícil que antes)
• Colisiones de nombres
• Muchas peticiones HTTP
• El orden importa: dependencias

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?

• ¡TypeScript!

• TS -> ES5 -> webpack -> bundle -> browser

TypeScript

• Superconjunto de JavaScript

• Transpila a ES5

• Tipado

• Errores en tiempo de compilación

• tsc

• tsconfig.json

TypeScript

• let y const

• Tipos básicos:

  • number

  • string

  • boolean

  • Array

  • any

  • void

• Enum

• Union types

TypeScript

• Funciones

• Arrow function

• Clases

  • Visibilidad de los miembros

  • Getters y setters

  • Herencia

  • Interfaces

• Objetos sin clase

• Template literals

• Módulos

TypeScript

• for...of, forEach

• map, filter, reduce

• find, indexOf

knockout.js

• Data binding

• Observables

• observable(), observableArray(), computed()

Bindings y estructuras de control

• text, html

• css, style, visible

• attr

• foreach

• if

• with

• $parent

Formularios

• click

• event

• submit

• enable / disable

• value

• textInput

• hasFocus

• checked

• options

• selectedOptions

• uniqueName

Comunicación con el servidor

• jQuery $.getJSON y $.post

• ko.toJSON

AngularJS

• Data binding

• No apto para aplicaciones grandes: Angular

• Permite modificar el HTML

AngularJS

• Aplicación mínima: módulo y controlador
• Directivas
  • ng-app
  • ng-controller
  • ng-bind
  • ng-repeat
  • ng-show
  • ng-if
  • ng-model

AngularJS

• Directivas propias:
  app.directive(() => ({
      template: '<strong>test</strong>',
      restrict: 'E'
  })

Formularios

• ng-model
• ng-click
• Estados del formulario y los campos:
  • pristine / dirty
  • untouched / touched
  • valid / invalid

Filtros

• En la expresión
• En la directiva
• lowercase / uppercase
• date
• number
• orderBy
• filter
• Filtros propios