Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares
•Télécharger en tant que PPTX, PDF•
0 j'aime•13,982 vues
Construcción de frontend para aplicaciones web y de escritorio utilizando estandares
Recommandé
Contenu connexe
En vedette
Similaire à Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares
Similaire à Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares (20)
Plus de Juan David Gómez
Dernier
Dernier (10)
Devcamps 2014 Construcción de frontends para aplicaciones web y de escritorio usando estandares
- 1. Construcción de front ends para aplicaciones web y de escritorio usando estándares Juan David Gómez Caicedo
- 2. Agenda 1) Últimos estándares web 2) Librerías JavaScript 3) MV* (KnockoutJS, Angular)
- 3. Últimos estándares web HTML5 + CSS3 = Magic!
- 4. HTML5
- 5. Que es HTML5? Un nuevo estándar para una nueva web Un lenguaje con soporte para variedad de dispositivos Concepto purista: HTML4+1, CSS, ECMAScript Marketing:
- 6. Porque preocuparse? Los navegadores se han vuelto realmente poderosos Estándar significa enfocarse en las funcionalidades, no en el navegador
- 7. 7
- 9. Detección de rostro Juegos C/C++ compilados en JS Codepen
- 11. Mapa de los estándares para navegadores Estándar Base
- 12. Construyendo con estándares Modern.ie Can I Use Bootstrap Modernizer CSS Resets (Normalize.css) Html5 Rocks 13
- 13. Nuevos elementos de marcado HTML5 <div class=“header”></div> <div class=“nav”></div> From this: <header></header> <nav></nav> To this:
- 14. 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 Accesibilidad Estandarizar etiquetas Porque?
- 15. Canvas •Los métodos para dibujar incluyen: caminos, cajas, círculos, texto y rasterizar imágenes
- 16. HTML 5 <video> •El estándar es MPEG-4/H.264 video •HTML content, images, SVG graphics
- 17. 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
- 18. Acompáñanos mañana en EAFIT en el Bloque 19, Piso 4 desde las 9 a.m. Evento de Comunidad
- 20. JavaScript
- 21. Quienes usan jQuery? http://trends.builtwith.com/javascript/jQuery Mas de 59 millones de sitios 66.2% del top 10k
- 22. jQuery – porque tan popular? Fácil de aprender Plugins Potente para consultas Ligero Soporte de una comunidad
- 24. Fundamentos de jQuery Encuentra algo, haz algo Sintaxis funcional Manipulamos el DOM Generamos cambios de eventos
- 25. Demo jQuery
- 26. Aplicaciones de una sola página
- 29. Knockout.js
- 30. Demo KnockoutJS
- 31. Resumen Últimos estándares web Librerías Javascript MV* (KnockoutJS, Angular)
Notes de l'éditeur
- Presentación. Microsoft StudentPartner, .NetDeveloper en GlobantAutor del curso de Webmatrix en MVABackend, frontend, diseño, UX, usabilidad, posicionamiento, estrategia, arquitectura y muchos otros términos componen el diseño y desarrollo web moderno. Lejos está la época donde un "webmaster" hacía todo el trabajoA menos que seas un genio cuyos padres fueron asesinados, juraste venganza, estudiaste cinco años en un templo samurai de la W3C, destruiste el templo y volviste para cambiar el mundo. Con aplicaciones webUn programador tiende a ser backend. Es la labor de ingeniería que compone el acceso a bases de datos y generación de plantillas del lado del servidor. En backend se encargan de implementar cosas como MySQL, Postgres, SQL Server o MongoDB. Luego, un lenguaje como PHP o JSP, o frameworks como RoR,Django, Node.JS o .NET se conectan a la base de datos. A través de estos lenguajes y frameworks se recibe, procesa y envía información al navegador del usuario. En código HTML (que crea el frontend) o enviando datos puros en XML, RSS o JSON, para ser procesados por Javascript. En Facebook, por ejemplo, PHP manda la estructura básica del sitio web, pero son múltiples programas y servidores hechos en C++ o Erlang que procesan la información en tiempo real (como chat, comentarios, notificaciones) y las envían y reciben a través de Javascript en el navegador. Los frontends tienden a ser programadores, pero hay diseñadores genios que también hacen frontend. Son los encargados de maquetar la estructura semántica del contenido (HTML), codificar el diseño en hojas de estilo (CSS) y agregar la interacción con el usuario (Javascript).Por último, Javascript y sus frameworks añaden el componente de interactividad y conexión al servidor. Es posible comunicarse con el backend y la base de datos sin recargar la página usando AJAX o WebSockets, recibir esos datos y cambiar el diseño entero del sitioPero el tiempo paso y los usuarios se volvieron mas exigentes y ellos mismos empezaron a consumir otra clase de software donde no solo importaba que hiciera lo que debía sino que también luciera bien.Digamos que las apps, el Revisar esta lectura http://msdn.microsoft.com/es-es/library/dn508273.aspxEste video http://channel9.msdn.com/Events/Microsoft-Campus-Days/Microsoft-Campus-Days-2013/The-moden-front-end-toolbox
- En este rato hablaremos…Y mi propósito es si no los conocen que se antojen, que si los conocen veamos algunas cosas interesantes y si ya los usan pues compartir algo de experiencia. Personalmente no soy avido del diseño, pero disponemos de una cantidad de recursos hechos por una cantidad de peludos que definitivamente nos facilitan la vida y un proyecto sencillo puede verse profesional con el uso de unas cuantas librerías.Diria que me apasiona el desarrollo de software, pero me gusta aun mas cuando el software que hacemos hace lo que debe y además se ve hermoso, transfiere al usuario parte de la belleza (que solo nosotros vemos en el código) a un lenguaje que el entienda.
- Los últimos
- SatyaNadella…. (cuando no era aun CEO de Microsoft) Un poco de historiaRecordemos a la W3C y queporallá en 1997 definiosuprimera version de xhtml 1 que era como HTML pero mas estricto, en el sentidoXHTML trata de separar totalmente la forma del contenido, además se estaba obligado a especificar cosas como el juego de caracteres, el DTD utilizado en el doctype, además todas las etiquetas debían estar bien anidadas, todas las etiquetas debían cerrarse, las etiquetas eran sensibles a mayúsculas, los script debían ponerse en bloques CDATA. XHTML 2 seguía por el mismo camino, pero había algo sobre todo que incomodaba a algunas empresas involucradas en la evolución de este estándar y era que XHTML exigía algo llamado “manejo draconiano de errores”. Su origen se debe a Draco o Dracón, un legislador ateniense del siglo VIII a.C. famoso por su crueldad, que fue encargado de redactar el código penal. La legislación draconiana castigaba casi todos los delitos, hasta los más leves, con la pena de muerte. Popularmente se decía que sus leyes no estaban escritas con tinta, sino con sangre.Este manejo Draconiano era similar, el browser al encontrar un problema en el documento debía detener la visualición y mostrar un mensaje al usuario presentando el error. Esto quizás se buscaba precisamente para tener una web mas estándar, sin errores pero considerando que incluso el 99% de las web actuales pueden tener al menos un error en su estructura (w3c validator) Para Junio de 2004 tres involucrados con desarrollos (Mozilla Fundation y Opera Software) presentan algunos puntos que para ellos son los importantes para el futuro de la web (una evolución del HTML4 incluyendo capacidades nuevas). En ese workshop pierden 8 contra 11 y sus ideas de evolución se ven cortadas. ¿Qué hacer entonces? Bueno si la W3C no quiere montemos nuestro propio grupo con juegos de azar y mujerzuelas.Así nace WHATWG.org y su HTML5 (la revolución que da sus primeros brillos en el Safari de Iphone ) uno de los primeros en mostrar los nuevos controles
- Purista: La evolución de HTML4 con nuevos tags como video, canvas, audio, sectionLa que mas me gusta: La purista + Javascript moderno + CSS3 (con montones de funcionalidades nuevas)Es un nuevo estándar para la web moderna, una web que ahora es interactiva y llega a mas usuarios que están además acostumbrados a poder acceder a ella además desde multiples dispositivos!! Ahora contamos con móviles. Así que lo que pensaron los del WHAT por allá en el 2004 era muy acorde a lo que estamos ahora viviendo. http://msdn.microsoft.com/es-es/library/dn508273.aspx
- Pero porque nos preocupamos de exigir mas y llevar mas cosas a la web? SiPoderosos: Presentes en todo SO, de hecho se han vuelto el punto base para las aplicaciones (Caso iOS, Windows 8) Motores Javascript: V8 de Google y Chakcra de MicrosoftEstamos tendiendo a los estandares, por lo que ya no deberíamos preocuparnos de forma individual por cada navegador (y en los casos que un sucedan hay buenas herramientas que nos ayudan al trabajo) Ahora el Browser es nuestro entorno, el lugar donde nuestras aplicaciones se desenvuelven, lugar donde ademas los usarios queremos poder usarlas completamente independiente del navegador. Esto es un HECHO, es hacia donde vemos que se esta acercando la industria y las principales compañias están apoyando.Es mas fijémonos un momento en Facebook, pero miremoslo como una aplicación y fíjense lo enormente compleja que se convierte, pensemos en experiencia, todo lo que podemos hacer, hablamos de tiempo real, responsive, puedo tener fotografías, puedo tener video, puedo tener grupos, enviar archivos, compartir.Es decir que si estamos en un momento, donde bueno toda la manipulación de datos se hace en el servidor, el cliente. Developers que aun no se dan cuenta que podemos correr aplicaciones en el browserEs mas fijemonos un poco como esta construido Windows 8 para reforzar la integración del navegador con el Sistema operativo
- WinJS: La proyección de lenguaje para JavaScript que nos permite desarrollar apps para WinRTY el título de Joya de la Corona es muy bien ganado, porque esta es la primera implementación en el mundo que permite acceder de manera nativa e ilimitada a los recursos de la máquina en la que se ejecuta. Así que todo el hardware y funciones especiales del sistema operativo están abiertos para ser llamados desde código JavaScript. (La historia se remonta a IE9, en donde se permitió al objeto Canvas del browser poder dibujar animaciones usando la aceleración de hardware nativa de la máquina en la que estaba corriendo, gracias al esquema integrado que tiene el browser con Windows, produciendo animaciones de hasta 60fps)Esto es una gran ventaja frente al acercamiento tradicional de JavaScript en otros browsers, pues estos corren en un sandbox limitado que no da acceso a funciones críticas del sistema como dispositivos de almacenamiento, tarjeta de video o en Windows 8 por ejemplo, el acceso a los charms que traen los contratos de búsqueda o de share entre otros.
- Pero todo eso es carreta! Mejor vamos a ver el código! Miremos esas demos que valen la pena para ver hasta donde podemos llevar a HTML5ContreJour : Utiliza las posibilidades de las pantallas táctiles, el multipunto especialmente, entonces este es especialmente Bonito de probar allí Juan David Nichollssitios web completamente interactivos => http://www.pixijs.com/projects/
- Juan David Nichollssitios web completamente interactivos => http://www.pixijs.com/projects/JavascriptGames de Juan David Nicholls
- Visual Studio OnlineSe ha podido llevar las aplicaciones al punto que en este momento tenemos IDE en línea. Este es el caso de Visual Studio Monaco, con el podemos empezar a trabajar en cuestión de minutos, sin la necesidad de configurar un servidor, incluyendo repositorio como GITS, herramientas de seguimiento de proyectos incluso involucrar integración continua en el proyecto.DEMOCrear un sitio en Azure, el de ejemplo BakeryHabilitar en configuración la opción de visual studio online (eso esta en CONFIGURAR) luego entrar al panel y ver la opción desplegada a la derecha.(La contraseña que pide es la recién creada)Entrar al proyecto, decirle que inicialice el repositorioHacer CommitMostrar con cambios en la pagina AboutUs el autocompletadoCon un H2, un P y una table con tabtabMostrar la consola con un help (tenemos disponible NPM y Nuget)nugetinstalljQuery.validationMostrar paquetes de Nuget (http://www.nuget.org/packages)Mostrar el editor de CSS del sitio, mostrar las propiedades en colores y los resaltados. Usar un color CSS 3Hacer Commit, mostrar los cambiosHay otros… como Koding, openShift pero VS es de los mejores gracias a que tenemos toda la potencia de Azure tras el.
- ECMAScript es una especificación de lenguaje de programación publicada por ECMA International. El desarrollo empezó en 1996 y estuvo basado en el popular lenguaje JavaScript propuesto como estándar por NetscapCommunicationsCorporationECMAScript define las base de lo que debe poder hacer el lenguaje, así como a que objetos del DOM podemos acceder. Sin embargo cada navegador implementa su “sabor” de ECMAScript, en la mayoría llamados Javascript y en otros como Internet Explorer Jscript. Cada navegador tiene extensiones propias al estándar ECMAScript, pero cualquier código que se adecue al estándar debería funcionar en todos ellos.Como dato curiosoActionScript de Adobe es también una implementación de ECMAScript
- Estas son algunas herramientas útiles que nos permiten facilitar nuestro trabajo.Recuerdan que hace un rato hablamos que en ultimas la implementación de ECMASCRIPT depende del navegador, por eso a veces encontrábamos ligeras diferencias de porque Javascript hacia algunas cosas en un navegador y en el otro no.Por fortuna estas diferencias se han empezado a borrar con el tiempo.Los Reset CSS son unas hojas de estilo en cascada que se suelen incluir al comienzo de un documento HTML, y cuya función es la de minimizar, en la medida de lo posible, las múltiples diferencias visuales que se dan a la hora de mostrar una misma página web, en diferentes navegadores, causa de que cada navegador implementa su hoja de estilos propia e interna, con determinados valores por defecto, que no siempre siguen la recomendación de la organización W3C. Modernizr no es el típico frameworkJavascript, aunque podríamos llamarle así. Me explico. En realidad no es una librería que nos permita implementar con menor esfuerzo proyectos avanzados, sino un paquete de detección de las capacidades de un navegador relativas a HTML5 y CSS3. Dicho de otro modo, Modernizr es una librería Javascript que nos informará cuáles de las novedosas capacidades de estos lenguajes están disponibles en el navegador del usuario, para utilizarlas, o no, en cada caso. Ademas nos permite implementar Polyfills, que son emulaciones de funcionalidades de HTML5 para que las etiquetas funcionen en un navegador antiguo.
- Ahora…. Quizás los cambios mas evidentes tienen que ver con las etiquetas. Y una parte tiene que ver con ayudarnos a darle una estructura semántica al documento (darle un significado).Por un lado nos ayuda a ser mas organizados (div para todo) y nos ayuda frente al posicionamiento en los buscadores. Con las etiquetas semánticas el buscador puede darle un mejor sentido a la información que esta encontrando.
- Y estas nuevas etiquetas son realmente poderosas pues van desde video, audio, graficos y quizás una de las que mas me gusta.Etiquetas especiales para formularios! Los nuevos inputEmail, url, tel, number, date, month, time, color. Todos estos con validación, es decir ni siquiera tendría que usar Jquery, el browser solo es capaz de reconocer que debe hacer una validación sobre estos. Y además son realmente hermosos cuando se usan desde un móvil, porque cuando entras al control el teclado cambia para ajustarse a la clase de entrada de información (No mas datapickers!!) Accesibilidad… es algo que se olvida, y es permitirle a personas con alguna clase de discapacidad también ser participes de nuestras aplicaciones. Lectores de texto a voz
- Incluso podemos agregar subtitulos, ajustar el volumen, indicar desde que segundo se debe reproducir el video, ponerlo a la espera de algún evento por parte del usuario.Y eso es lo mas extraordinario y es la excelente capacidad de poder manipular el control a nuestro gusto. Ademas de tener las ventajas de tener un control que también funciona en dispositivos móviles.Digamos que la barrera que podríamos a llegar a encontrar respecto a esto va mas del lado de como adaptamos el video a cada uno de los dispositivos en los que podría el usuario estar viendo este video.Explicación de diferentes resoluciones, diferente procesamiento, diferente ancho de banda!Invitación a la charla de mañana de Azure Media Services
- Bootstrap: http://getbootstrap.com/Mostrar algunas etiquetas HTML5 en la estructura del index_SiteLayout (La cabecera HTML)Cambiar el featureproduct (Quitar el id)(El resto de propiedades del video ponerlos progresivamente) <video width="920" heigth="300" autoplay="true" preload="true" controls="true“ > <source src="https://mediasvc3pjmvqntj5fgb.blob.core.windows.net/asset-998741cd-b62c-4a3d-810e-9de6da94a7d0/Publix%20Bread%20Commercial.mov_H264_4500kbps_AAC_und_ch2_128kbps.mp4?sv=2012-02-12&st=2014-03-24T15%3A49%3A25Z&se=2016-03-23T15%3A49%3A25Z&sr=c&si=fd77e640-cd75-4976-834c-a7b7a1a97b25&sig=0wRkItKBlaKelVI5LGstM9GILxXUc8zhsPZmM5FffmU%3D" type="video/mp4" > Your browser does not support the video tag. </video>Agregarle la propiedad poster = (para mostrarunaimagen del pan) y mostrarque el VS online nos da previsualizacion de imagenesAgregar un estilo.video{ border-radius: 5px 5px5px5px;}Mostrar como puede verse mi sitio en Browserstack
- La revolución de Javascript, el niño feo de los 90 Nos damos cuenta de lo protagónico que es JS en HTML5. Lo malo es que JS es un lenguaje impresionantemente FEO, es horrible, pero los programadores dijeron algo como eres tan feo que te voy a hacer bonito a patadas!
- jQuery nos permite agregar efectos y funcionalidades complejas a nuestra aplicación web, como por ejemplo: galerías de fotos dinámicas y elegantes, validación de formularios, calendarios y mucho mas!!!. Otra ventaja sin duda es la posibilidad que nos brinda de trabajar con AJAX, sin preocuparnos de los detalles complejos de la programación. Además cuenta con la posibilidad de agregar plugins, facilitando mas aun nuestro trabajo...
- Acá hay una animación
- Sitios de pruebahttp://jsfiddle.net/donejs/wMN7G/light/ Ejemplo de carga información y mostrarlo de nuevo en el formulariohttp://jsfiddle.net/qpr48/2/https://plugins.jquery.com/http://devrama.com/static/devrama-book/Estos son muy útiles cuando necesitamos probar un código que no estamos muy seguros si servirá o no. O cuando necesitamos escribir una idea rápida de lo que queremos hacer sin introducirlo aun dentro del proyecto que estamos trabajando.Ejemplo de un mostrar mas…(Recordar poner al final el script)<div id="slideMe"> Texto textotexto </div>$('#mostrarMas').click(function() { $('#slideMe').slideToggle('fast');});Ahora también hay otras librerías Javascript que son muy poderosas, por ejemplo ExtJS cuyos componentes de Gráficos y Tablas son de los mejores del mercado.Gráficos: http://www.sencha.com/products/extjs/examples/#sample-4Tablas: http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#cell-editingExisten también otros framework MUY poderosos:ExtJS y YIU (YahooUser Interface) Ambos con unos de los controles de datagrid mas poderosos del Mercado
- “En una sola página”, es decir que se carga la página inicial y luego todas las nuevas peticiones son vía AJAX.
- Importante, el tiempo que esta la página en blanco.Por ejemplo casos donde tenemos una tabla paginada, es mejor cuando en lugar de recargar toda la página solo cambia el control
- son ese tipo de paginas que se carga toda de una con todas sus secciones no hacen post back de toda la pagina solo cargan el contenido que necesitan refrescan con AjaxEjemplos:Facebook, Gmail, Outlook,
- Knockout.js es una biblioteca javascript, que nos ayuda a implementar este modelo MVVM. Dentro de las características especiales, tal cual indica en su página, nos permite:Realizar Binding DeclarativosRefresco automático de los elementos del UI, como decía, cuando se actualiza el modelovista, nuestra UI se actualiza automáticamenteTracking de Dependencias, detecta los cambios realizados en la vista o en el modelo y es capaz de propagarlos .
- AngularJS es un framework de JavaScript de código abierto, mantenido por Google, que ayuda con la gestión de lo que se conoce como aplicaciones de una sola página. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles.Ahora bien, si hemos trabajado en MVC sabemos que respecto al binding generalmente necesitamos código adicional para decirle al modelo que la información ha cambiado en la vista, esto se le conoce como OneWayBinding y requiere de código adicional para hacer la actualización. Una de las ventajas de angular es precisamente que no requiere de código adicional. JavaScript del cliente. Podíamos manipular el DOM de una forma más sencilla, añadir efectos, llamadas AJAX, etc… pero no teníamos un patrón a seguir. Todo el código JS iba en funciones que íbamos creando según necesitáramos, lo que provocaba que con el tiempo el código fuera difícilmente manejable y se convirtiese en el temido “SpaguettiCode“Importante:Angular es una solución completa para hacer aplicaciones (generación de vistas, rutas, módulos, comunicación del servidor)Si lo que se esta buscando hacer una página donde prime el contenido, el html cristalino simplemente no esta diseñado para esoLo buenoEl sistema de databinding es muy completohttp://pluralsight.com/training/Courses/TableOfContents/angularjs-dotnet-developers
- Demo de Knockout.JS -> http://jsfiddle.net/48m7a/Revisemos un poco el código antes de continuar, puedes ver que construimos un objeto javascript que tiene 3 atributos, estos atributos se van a bindear a los elementos span que tienen el tag data-bind , el cual, si bien no es nativo de html5, es compatible con él.Como puedes ver se ha hecho el render en tagsspan con el atributo data-bind, ahora veamos un ejemplo con binding bidireccional, para eso vamos a incluir un input text, de manera que al escribir y/o cambiar la edad sobre este elemento, se modifique de manera inmediata el ViewModel.JsHintCSS Lint
- Necesitamos herramientas para mantenernos productivosEstas están cambiando cada 6 mesesPor ello es bueno conocerlas, según lo que estemos haciendo pueden ayudarnos a mejorar nuestra productividad de forma significativaHay muchas cosas mas afuera, mi mensaje es que tenemos a disposición muchas cosas que nos permiten trabajar para front-end, hay que elegiar la adecuada según el proyecto, el equipo y la necesidad