devcamps 2014 construcción de frontends para aplicaciones web y de escritorio usando estandares
DESCRIPTION
Construcción de frontend para aplicaciones web y de escritorio utilizando estandaresTRANSCRIPT
![Page 1: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/1.jpg)
Construcción de frontends
para aplicaciones web y de escritorio usando estándares
Juan David Gómez Caicedo
![Page 2: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/2.jpg)
Agenda
1) Últimos estándares web
2) Librerías JavaScript
3) MV* (KnockoutJS, Angular)
![Page 3: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/3.jpg)
Últimos estándares webHTML5 + CSS3 = Magic!
![Page 4: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/4.jpg)
HTML5
![Page 5: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/5.jpg)
Que es HTML5?
Un nuevo estándarpara una nueva web
Un lenguaje con soporte para variedad de dispositivos
Concepto purista: HTML4+1, CSS, ECMAScript
Marketing:
![Page 6: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/6.jpg)
Porque preocuparse?
Los navegadores
se han vuelto
realmente
poderosos
Estándar significa
enfocarse en las
funcionalidades,
no en el navegador
![Page 7: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/7.jpg)
7
![Page 8: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/8.jpg)
Photosynth 2Hovercontre jour
![Page 9: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/9.jpg)
Detección de rostroJuegos C/C++ compilados en JSCodepen
![Page 10: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/10.jpg)
Visual Studio Online
![Page 11: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/11.jpg)
Mapa de los estándares para navegadores
Estándar
Base
![Page 12: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/12.jpg)
Construyendo con estándares
Modern.ie Can I Use Bootstrap
ModernizerCSS Resets
(Normalize.css)Html5 Rocks
13
![Page 13: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/13.jpg)
Nuevos elementos de marcado HTML5
<div class=“header”></div>
<div class=“nav”></div>
From this:
<header></header>
<nav></nav>
To this:
![Page 14: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/14.jpg)
Nuevos elementos de marcado HTML5
Eliminar el
etiquetado
“genérico”
El análisis de
etiquetas nativas es
mas rápido que la
búsqueda de clases
AccesibilidadEstandarizar
etiquetas
Porque?
![Page 15: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/15.jpg)
Canvas
• Los métodos para dibujar incluyen: caminos, cajas, círculos, texto y rasterizar imágenes
![Page 16: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/16.jpg)
HTML 5 <video>
•El estándar es MPEG-4/H.264 video
•HTML content, images, SVG graphics
![Page 17: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/17.jpg)
HTML 5 <video> Atributos
• src – De donde obtendremos el recurso
• autoplay – Si empieza una vez este listo
• controls – Si mostramos controles
• preload – Si el video se carga en la carga de la página
• loop – Si se repetirá una vez finalice
![Page 18: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/18.jpg)
Acompáñanos mañana en EAFIT en el Bloque 19, Piso 4 desde las 9 a.m.
Evento de Comunidad
![Page 19: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/19.jpg)
DemoVideo en HTML5
![Page 20: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/20.jpg)
JavaScript
![Page 21: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/21.jpg)
Quienes usan jQuery?
http://trends.builtwith.com/javascript/jQuery
Mas de 59 millones de
sitios
66.2% del top 10k
![Page 22: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/22.jpg)
jQuery – porque tan popular?
Fácil de
aprenderPlugins
Potente
para
consultas
Ligero
Soporte de
una
comunidad
![Page 23: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/23.jpg)
Entorno de jQuery
![Page 24: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/24.jpg)
Fundamentos de jQuery
Encuentra algo, haz algo
Sintaxis funcional
Manipulamos el DOM
Generamos cambios de eventos
![Page 25: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/25.jpg)
DemojQuery
![Page 26: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/26.jpg)
Aplicaciones de una sola página
![Page 27: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/27.jpg)
Comparación: Standard Page Requests
![Page 28: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/28.jpg)
Comparación: Single Page Application
![Page 29: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/29.jpg)
Knockout.js
![Page 30: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/30.jpg)
DemoKnockoutJS
![Page 31: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/31.jpg)
Resumen Últimos estándares web
Librerías Javascript
MV* (KnockoutJS, Angular)
![Page 33: Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares](https://reader034.vdocuments.mx/reader034/viewer/2022052623/5599294d1a28ab4a298b4713/html5/thumbnails/33.jpg)