Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares
33
Construcción de front ends para aplicaciones web y de escritorio usando estándares Juan David Gómez Caicedo
-
Upload
juan-david-gomez -
Category
Technology
-
view
3.126 -
download
0
description
Construcción de frontend para aplicaciones web y de escritorio utilizando estandares
Transcript of Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares
Construcción de frontends
para aplicaciones web y de escritorio usando estándares
Juan David Gómez Caicedo
Agenda
1) Últimos estándares web
2) Librerías JavaScript
3) MV* (KnockoutJS, Angular)
Últimos estándares webHTML5 + CSS3 = Magic!
HTML5
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:
Porque preocuparse?
Los navegadores
se han vuelto
realmente
poderosos
Estándar significa
enfocarse en las
funcionalidades,
no en el navegador
7
Photosynth 2Hovercontre jour
Detección de rostroJuegos C/C++ compilados en JSCodepen
Visual Studio Online
Mapa de los estándares para navegadores
Estándar
Base
Construyendo con estándares
Modern.ie Can I Use Bootstrap
ModernizerCSS Resets
(Normalize.css)Html5 Rocks
13
Nuevos elementos de marcado HTML5
<div class=“header”></div>
<div class=“nav”></div>
From this:
<header></header>
<nav></nav>
To this:
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?
Canvas
• Los métodos para dibujar incluyen: caminos, cajas, círculos, texto y rasterizar imágenes
HTML 5 <video>
•El estándar es MPEG-4/H.264 video
•HTML content, images, SVG graphics
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
Acompáñanos mañana en EAFIT en el Bloque 19, Piso 4 desde las 9 a.m.
Evento de Comunidad
DemoVideo en HTML5
JavaScript
Quienes usan jQuery?
http://trends.builtwith.com/javascript/jQuery
Mas de 59 millones de
sitios
66.2% del top 10k
jQuery – porque tan popular?
Fácil de
aprenderPlugins
Potente
para
consultas
Ligero
Soporte de
una
comunidad
Entorno de jQuery
Fundamentos de jQuery
Encuentra algo, haz algo
Sintaxis funcional
Manipulamos el DOM
Generamos cambios de eventos
DemojQuery
Aplicaciones de una sola página
Comparación: Standard Page Requests
Comparación: Single Page Application
Knockout.js
DemoKnockoutJS
Resumen Últimos estándares web
Librerías Javascript
MV* (KnockoutJS, Angular)
