Vous êtes sur la page 1sur 12

Hola, buenas tardes...

Me llamo Vctor Aguilar y pueden seguirme a @jvacx en twiter Quiero comenzar este seminario con un par de preguntas Levanten la mano los que son desarrolladores? Levanten la mano los que son desarrolladores web?

Antes que nada dejenme decirle algo:

{++++ "Hoy no vamos a hablar de historia" ++++}

"Estan ocurriendo muchos fenomenos en el mundo, estamos viviendo en una epoca en donde la tendecia de los desarrolladores es que estan dejando de lado herramientas como dreamweaver que te generaban todo y estan pasando a codear y a programar, incluso Adobe, se dio cuenta de que el enfoque a los noobs de sus sus herramientas se esta volviendo cada vez mas obsoleto y e esta apostando de lleno a HTML5"

-->Que es un estndar Web?

Es un conjunto de reglas que describen recomendaciones que deben ser cumplidos en el desarrollo de paginas y aplicaciondes web para que estas sean: --accesibles --interoperables --eficiente --robustas Y Quiero QUE TOMEN NOTA E ESTO, Un estandar es cambiante, es dinamico... cambia con la gente y la tendencias, cambia con los desarrolladores.

Han habido muchos estandares hasta esta fecha, y hay dos organizaciones sobresalientes que han y estan desarrollando estos estandares:

W3C The World Wide Web Consortium (W3C) http://www.w3.org/standards/webdesign/

WHATWG Web Hypertext Application Technology Working Group http://www.whatwg.org/

y empresas como Apple, Microsoft, Google, Adobe, Amazon, Twitter, Facebook, Mozilla y todas las empresas grandes que tengan presencia en la Web apoyan el desarrollo de estos estandares,y son mas de 400 empresas.

-->Por qu son necesarios los estndares web?

1.Eficiencia del cdigo: Reutilizacion d codigo 2.Facilidad de mantenimiento: es consecuencia de Eficiencia 3.Accesibilidad: es hacer que los sitios web sean accesibles para todo el mundo 4.Compatibilidad con dispositivos: Garantizar que la web se vea igual en cualquier dispositivo y en cualquier plataforma. 5.Rastreadores web y motores de bsqueda: Hacer que las Web sean visibles para los buscadores SEO Search Engine Optimization

Pero entonces porque la gente no usa los estandares?

1.Falta de formacin: 2.Polticas de las empresas: 3."No necesito aprenderlos!" 4."Es muy difcil de aprender!" 5.Compatibilidad de los estndares en los navegadores: 6.Malas Costumbres

Haber levanten la mano aquellos que nunca habian oido de estas cosas...

Cuantos de Uds usan Chrome? Cuantos de Uds usan Firefox? Cuantos de Uds usan Safari? Cuantos de Uds usan IE?

La gente anticuada suele usar: --diseos basados en Tablas gigantesca --imagenes Gif transparentes para generar espacios --Desarrollan para navegadores especificos --Insertan CSS y Java Script en el archio HTML --Insertaban elementos anticuados como <FONT><B>, etc

El mundo de hoy se ha fragmentado tanto que el termino "WEBMASTER" ya no existe, el desarrollo web se ha dividido y en especialidades. Seguro se estaban preguntando, Porque el titulo del seminario es Frontend Go, y es de eso que vamos a hablar.

Ahora hay dos tipos pricipales de desarrolladores en la web. Los FRONTEND--->Que son los que maquetan las web, desarrollando HTML,CSS,Java Script y usabilidad. los BACKEND---->Que son los que desarrollan de lado del servidor en lenguajes como PHP,Python, JAVA EE, NodeJS, Rubi, etc.

Entonces HABLEMOS DE FRONTEND...... y lo que esta moviendo la web actualmente..

HTML5 --- CSS3 --- JavaScript

Que trae de nuevo HTML5? --- Canvas2D API, Es el API para dibujar grficos 2D en una pgina web --- Timed media playback, Es el API para reproducir audio y video en HTML5 --- Web Storage, Es la capacidad de guardar informacin en el cliente --- MIME type and protocol handler registration, da la posibilidad de conectarse con protocolos de comunicacion como los SMS, IRC, etc --- Browser history, permite accede al historial del navegadr --- Drag & Drop, arrastrar y soltar --- Geolocation, geolocalizacion por wifi, gps y gsm --- Web SQL Database, permite crear una --- File API, API que permite ller y crear archivos en el cliente --- WebGL, permite crear grafics 3D --- SVG, soporte para formatos vectoriales svg --- CSS3, el estandar de hojas de estilo en cascada --- Web Workers, API que permite crear procesos en paralelo --- WebRTC, Api que permite la comunicacion en Tiempo Real, en escenaios como Streaming, videoconferencias, etc --- Web sockets, comunicacion bidireccional cliente servidor

---> NOVEDADES EN EL MARCADO

---> Declaracin simplificada <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html>

---> Nueva estructura de documento {+++Imagen+++}

---> Nueva cabecera

<html> <html lang="en"> <meta> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8" /> <link> <link rel=stylesheet|alternate|icon|license|prefetch| nofollow|noreferrer|pingback|search|sidebar|tag> ---> Etiquetas semnticas <header></header> <article></ article > <section></sectionr> <nav></nav> < aside ></aside> < footer ></footer>

<time> <time datetime="2011-03-17T17:59:37+01:00" pubdate> March 17, 2011 5:37pm GMT+1 </time> <mark> <p>This is <m>really important</m> to understand HTML5</p>

<meter> <p>G-force is <meter value="9.2" min="0" max="19.6" low="9.5" high="10.3" optimum="9.8">9.2</meter>. </p> <progress> <p>Downloaded: <progress value="1534602" max="4603807">33%</progress> </p>

---> MULTIMEDIA

<audio> <audio src="music.mp3" autoplay loop="3" controls preload /> <video> <video width="320" height="240" controls>

<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> </video>

---> CANVAS <canvas> <canvas id=area width=320 height=240> </canvas> <script> function draw() { var area = document.getElementById("area"); var ctx = area.getContext("2d"); ctx.fillRect(50, 25, 150, 100); } </script> Se pueden hacer muchas cosas: rectngulos, crculos, elipses, caminos, texto, imgenes, gradientes, transformaciones.

---> SVG

<svg id="flag" height="200" xmlns="http://www.w3.org/2000/svg"> <circle id="redcircle" cx="50" cy="50" r="50" fill="red" /> <rect id="redrect" width="300" height="100" fill="white" /> <line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:2"/> <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />

<polygon points="20,10 300,20, 170,50" fill="white" /> <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" /> </svg>

---> FORMULARIOS

<input> <input type="search" search box type="number" spinbox type="range" slider type="color" color picker type="tel" telephone number type="url" web address type="email" email address type="date|time|month|week|datetime" required autofocus placeholder=Type here... />

<datalist> <input type=text list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist> <keygen> <form action="signup.asp" method="post"> user: <input type="text" name="username" /> encryption: <keygen name="security" /> <input type="submit" /> </form>

---> ETIQUETAS INTERACTIVAS

<menu> + <command> <menu> <command onclick="alert('first!')" label="Do 1st Command"/> <command onclick="alert('second!')" label="Do 2nd Command"/> <command onclick="alert('third!')" label="Do 3rd Command"/> </menu> <datagrid> <datagrid> <table ...> </datagrid>

<details> Dive into HTML5 <details open> <legend>Pilgrim, M. (2011)</legend> <p> Mark Pilgrim, Dive into HTML5, <a href=http://diveintohtml5.org>updated!</a>. </p> </details>

---> OTRAS ETIQUETAS

<figcaption> <figure> <img src=fig1.jpg title=Graphic /> <figcaption>Figure 1. Overall scores.</figcaption> </figure> <wbr> <p>You can break the line here<wbr> or here<wbr>, or even here<wbr>.</p>

---> PERO PARA QUE TANTO CUENTO? ---> LA MAGIA ESTA EN JAVASCRIPTY CSS3] ---> EN CSS3

---> Nuevos selectores http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ ---> Transformaciones http://dev.w3.org/csswg/css3-transforms/

---> Transiciones http://www.w3.org/TR/css3-transitions/ ---> Animaciones http://www.w3.org/TR/css3-animations/ ---> @font-face http://www.font-face.com

---> EN JAVASCRIPT ---> Geolocalizacin ---> Offline / online ---> Local Storage ---> Web History

Timing control for script-based animations (RequestAnimationFrame) Web Audio API / Audio Data API Fullscreen API

---> getUserMedia() ---> Pointer Lock API ---> WebRTC ---> Timed track API (WebVTT, WebSRT) ---> Server-Sent Events (EventSource)

---> Y HASTA SE PUEDEN HACER MEZCLAS ---> Audio Data API + WebGL = insane http://videos.mozilla.org/serv/blizzard/audio-slideshow ---> Todo esto, para cundo?

Para el 2014 http://www.xataka.com.mx/web-20/html5-estara-terminado-para-el-2014

RANKING DE NAVEGADORES

http://www.desarrolloweb.com/de_interes/ranking-navegadores-noviembre-2012-7756.html

Links modernizr ---- http://modernizr.com/ bootstrap --- http://twitter.github.com/bootstrap/ html5rocks --- http://www.html5rocks.com/en/ html5demos --- http://html5demos.com/ w3schools --- http://www.w3schools.com/