La programación al servicio del diseño web

1. Javascript y el diseño web
Álex Martín & Ángel Martín

2. www.youngle.es
escuela@youngle.es
@EscuelaYoungle
#JunglaDigital | #Aprenday
Aprende Bestialmente

3. 1. Sobre Javascript
2. Javascript in frontend
3. El debate: La delgada línea
programador vs diseñador
@Escuela Youngle / #Aprenday

4. ¿Qué es Javascript?
@Escuela Youngle / #Aprenday

5. Javascript y el diseño web
@innn / @EscuelaYoungle
Un poco de historia
Creado por Brendan Eich en 1995
para Netscape para ofrecer
dinamismo a las páginas
Su nombre original era MOCHA
Después pasó a llamarse LiveScript
Para finalmente llamarse javascript

6. Javascript y el diseño web
@innn / @EscuelaYoungle
Se lanzó oficialmente con Nestcape
navigator 3.0
Microsoft creó su copia versión JScript
para Internet explorer 3.0
En 1997 Nestcape estandarizó
Javascript por medio del orgamismo
ECMA

7. Javascript y el diseño web
@innn / @EscuelaYoungle
Evolución de las versiones
Versión EcmaScript Año
1 Junio 1997
2 Junio 1998
3 Diciembre 1999
4
5 Diciembre 2009
6 Junio 2015
7 Junio 2016

8. Javascript
Un lenguaje para dominarlos a todos
@Escuela Youngle / #Aprenday

9. Cliente
Se ejecuta en el navegador
Mejora la experiencia del usuario
Libera los servidores de procesos
@Escuela Youngle / #Aprenday

10. Servidor
En 2009 nace nodeJS que lleva la ejecución
de Javascript al servidor
@Escuela Youngle / #Aprenday

11. Móviles
Apache Cordova. Aplicaciones móviles
híbridas en HTML, CSS y Javascript
Ionic es un framework javascript que
facilita la creación de app híbridas
React-Native permite crear aplicaciones
nativas sólo con javascript
@Escuela Youngle / #Aprenday

12. Escritorio
Electron permite llevar aplicaciones con
Javascript, HTML y CSS al escritorio.
@Escuela Youngle / #Aprenday

13. Juegos
Unity permite programar tanto en c# como
en javascript
@Escuela Youngle / #Aprenday

14. IoT
CylonJS es un framework que permite
programar objetos con javascript
Algunas “cosas” soportadas:
Raspberry Pi, Philips Hue, Pebble, ARDrone, Arduino
@Escuela Youngle / #Aprenday

15. Librerías y frameworks que
deberíamos conocer
@Escuela Youngle / #Aprenday

16. jquery
@Escuela Youngle / #Aprenday
Librería JavaScript rápida,pequeña y rica en características. Hace más sencillas cosas
como recorrido y manipulación de documento HTML, manejo de eventos y Ajax
con una API fácil de usar que funciona a lo largo de una multitud de navegadores.
JQuery ha cambiado la manera en la que millones de personas escriben JavaScript.

17. Angularjs
@Escuela Youngle / #Aprenday
Lanzado en 2009 por Google y es uno de los frameworks open source más
avanzados. Si la idea es crear sitios web de una sola página con elementos
interactivos, no hay una opción mejor que Angular. Permite la actualización en
tiempo real de un sitio web desde diferentes dispositivos. Cuenta con el mayor apoyo
comunitario activo en todo el mundo. Curva de aprendizaje es muy baja.

18. Reactjs
@Escuela Youngle / #Aprenday
Dos de las aplicaciones web más utilizadas en el mundo están desarrolladas con
React.js. Facebook e Instagram. Si quieres lanzar una web robusta, dinámica y
escalable con un rendimiento fiable, React.js es una buena opción . Otra
característica a destacar es la capacidad de traer elementos reutilizables. Esto
permite a los desarrolladores reutilizar los componentes en varias aplicaciones.

19. D3
@Escuela Youngle / #Aprenday
D3 (Data-Driven Documents) es una librería JavaScript para presentar y manipular
visualmente documentos basados en datos. Con D3 podemos crear desde gráficas
sencillas como barras e histogramas, hasta visualizaciones complejas e interactivas.
D3 utiliza las tecnologías estándar como HTML, SVG y CSS, por lo que funciona en
cualquier navegador web moderno.

20. Las mejores librerías de animación
@Escuela Youngle / #Aprenday

21. Las mejores librerías de animación
@Escuela Youngle / #Aprenday

22. ¿Cómo se te queda
la cuerpa?
@Escuela Youngle / #Aprenday

23. Que comience
el debate
@Escuela Youngle / #Aprenday

24. www.youngle.es
escuela@youngle.es
@EscuelaYoungle
#JunglaDigital | #Aprenday
Gracias