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)

ContactoJuan David Gómez

judavi@judavi.com

@judavi

www.judavi.com