Symfony2, interacción con CSS, JS y HTML5 Raúl Fraile Beneyto
¿Quién soy? Raúl Fraile Beneyto Co-fundador del proyecto Facultia Programador PHP/Symfony Symfony2 “Evangelist”
Estructura aplicación web GET /
Estructura aplicación web con SF2 GET /
MVC
Modelo Vista Controlador (MVC) Patrón de arquitectura de software que separa los datos, la presentación y la lógica de neg...
Modelo Vista Controlador (MVC) En la misma aplicación, podemos generar diferentes vistas utilizando los mismos controlador...
Vistas en Symfony2
Vistas en Symfony2
Vistas en Symfony2 <!DOCTYPE html> <html> <head> <title>Ejemplo</title> </head> <body> Hola  {{ name }} ! </body> </html> ...
Vistas en Symfony2 <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <noticias> {% for noticia in noticias %} <n...
Assets en Symfony2
Assets Imágenes, scripts JS y hojas de estilos CSS <img src=&quot; {{ asset('images/logo.png') }} &quot; /> <link href=&qu...
Assetic Gestión de assets + filtros {% javascripts '@TestBundle/Resources/public/js/lib/jquery.js' '@TestBundle/Resources/...
Assetic <ul><li>Ventajas: </li></ul><ul><li>Los assets pueden estar almacenados en rutas distintas a las que se sirve. </l...
 
HTML5  ≈  HTML  +  CSS3  +  JS APIS
HTML 5 Nuevos tags
HTML 5: Tags
HTML 5: Tags <html> <head> </head> <body> <div id=”header”></div> <div id=”content”></div> <div id=”footer”></div> </body>...
HTML 5: Tags <html lang=&quot;es&quot;> <head> </head> <body> <header></header> <div id=”content”></div> <footer></footer>...
HTML 5: Tags <hgroup> <h1> Noticias de HTML 5 </h1> <h2> Últimas noticias </h2> </hgroup> … <hgroup> <h1> Publicado nuevo ...
HTML 5: Tags <nav> <ul> <li><a href=”/”>Inicio</a></li> <li><a href=”/contacto”>Contacto</a></li> <li><a href=”/productos”...
HTML 5: Tags <section id=”noticias”>  <article id=”noticia-1”> .... </article> </section> <aside> <p>Destacados</p> <ul>.....
HTML 5: Tags <figure> <img src=&quot;estadisticas.jpg&quot; /> <figcaption> Estadísticas de uso </figcaption> </figure> <f...
HTML 5: Tags <progress value=&quot;50&quot; max=&quot;100&quot;>50%</progress> <progress>
HTML 5: Tags <input list=&quot;componentes&quot;/> <datalist id=&quot;componentes&quot;> <option value=&quot;Twig&quot; />...
HTML 5: Tags <input type=&quot;text&quot;  required placeholder =”Introduce texto” /> <input type=&quot; email &quot; /> |...
HTML 5: Tags Ventajas de disponer de “input type” en móviles: text number email tel
HTML 5: data-* attributes Se pueden definir atributos personalizados para guardar información extra. Muy utilizado en algu...
HTML 5: data-* attributes <div id=&quot;persona1&quot; data-id=&quot;1&quot; data-name=&quot;Raul”></div> // jQuery mobile...
HTML 5 Almacenamiento offline
HTML 5: Almacenamiento offline Permite almacenar información en el navegador, en forma de datos independientes o en bases ...
HTML 5: Almacenamiento offline Información básica: // guardar info window. localStorage .setItem('name', 'Raúl Fraile'); /...
HTML 5: Almacenamiento offline Base de datos var db = window. openDatabase (&quot;facultia&quot;, &quot;1.0&quot;, &quot;d...
HTML 5 Comunicación
HTML 5: Web workers/sockets Con los web workers podemos realizar tareas complejas en el navegador sin bloquearlo (hilos). ...
HTML 5: Notificaciones Podemos notificar al usuario con ventanas emergentes, que se mostrarán aunque no estemos en la mism...
HTML 5: Notificaciones // solicitar permisos window. webkitNotifications .requestPermission(); // generar notificación win...
HTML 5 Ficheros / Hardware
HTML 5: Drag&Drop Proporciona drag&drop nativo (controlado mediante JS), así como drag-in y drag-out en el navegador. Por ...
HTML 5: Geolocalización Es posible conocer la posición del usuario sin necesidad de librerías o servicios externos, simple...
HTML 5: Geolocalización navigator. geolocation .getCurrentPosition(function(position) { alert(position.coords.latitude +  ...
HTML 5 Multimedia
HTML 5: Canvas Nuevo tag  <canvas> , que podemos utilizar como lienzo para crear imágenes. Con JS podemos utilizar funcion...
HTML 5: Canvas var width = 125;  // ancho var height = 105; // alto var padding = 20; context.beginPath(); context.moveTo(...
HTML 5: Audio y vídeo Nuevos tags para reproducir audio y vídeo en el navegador, sin necesidad de reproductores Flash. <au...
HTML 5: SVG SVG (Scalable Vector Graphics) es un formato para definir imágenes vectoriales en XML. Una de las grandes vent...
HTML 5: WebGL WebGL (Web-based Graphics Library) es una librería que permite mostrar gráficos en 3D, acelerados por hardwa...
HTML 5 Estado actual
caniuse.com
html5readiness.com
HTML 5: Estado actual Si no lo soportan todos los navegadores...  ¿podemos usarlo? Sí, para mejorar la experiencia del usu...
HTML 5: Estado actual Disponemos de herramientas para detectar si el navegador dispone de una u otra característica de HTM...
¡Gracias! E-mail:  [email_address] Twitter: @raulfraile Github: raulfraile http://www.slideshare.net/raulfraile ¿Preguntas?
Upcoming SlideShare
Loading in …5
×

Symfony2: Interacción con CSS, JS y HTML5

14,669 views

Published on

Presentación utilizada en las Jornadas de Symfony2 en Vigo, organizadas por GALPON.

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
14,669
On SlideShare
0
From Embeds
0
Number of Embeds
4,952
Actions
Shares
0
Downloads
306
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Symfony2: Interacción con CSS, JS y HTML5

  1. 1. Symfony2, interacción con CSS, JS y HTML5 Raúl Fraile Beneyto
  2. 2. ¿Quién soy? Raúl Fraile Beneyto Co-fundador del proyecto Facultia Programador PHP/Symfony Symfony2 “Evangelist”
  3. 3. Estructura aplicación web GET /
  4. 4. Estructura aplicación web con SF2 GET /
  5. 5. MVC
  6. 6. Modelo Vista Controlador (MVC) Patrón de arquitectura de software que separa los datos, la presentación y la lógica de negocio. Puede generar HTML, JSON, XML, JS, CSS, imágenes, PDFs... dinámicamente. + Assets
  7. 7. Modelo Vista Controlador (MVC) En la misma aplicación, podemos generar diferentes vistas utilizando los mismos controladores. Por ejemplo: versión web + versión móvil + API
  8. 8. Vistas en Symfony2
  9. 9. Vistas en Symfony2
  10. 10. Vistas en Symfony2 <!DOCTYPE html> <html> <head> <title>Ejemplo</title> </head> <body> Hola {{ name }} ! </body> </html> hello.html.twig
  11. 11. Vistas en Symfony2 <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <noticias> {% for noticia in noticias %} <noticia> <titulo> {{ noticia.titulo }} </titulo> <fecha> {{ noticia.fecha }} </fecha> </noticia> {% endfor %} </noticias> noticias.xml.twig
  12. 12. Assets en Symfony2
  13. 13. Assets Imágenes, scripts JS y hojas de estilos CSS <img src=&quot; {{ asset('images/logo.png') }} &quot; /> <link href=&quot; {{ asset('css/estilos.css') }} &quot; rel=&quot;stylesheet&quot; /> <script src=&quot; {{ asset('js/scripts.js') }} &quot;></script>
  14. 14. Assetic Gestión de assets + filtros {% javascripts '@TestBundle/Resources/public/js/lib/jquery.js' '@TestBundle/Resources/public/js/*' %} <script src=&quot; {{ asset_url }} &quot;></script> {% endjavascripts %}
  15. 15. Assetic <ul><li>Ventajas: </li></ul><ul><li>Los assets pueden estar almacenados en rutas distintas a las que se sirve. </li></ul><ul><li>Mejor organización en bundles. </li></ul><ul><li>Se pueden aplicar filtros para optimizar imágenes, preprocesar, combinar... </li></ul>
  16. 17. HTML5 ≈ HTML + CSS3 + JS APIS
  17. 18. HTML 5 Nuevos tags
  18. 19. HTML 5: Tags
  19. 20. HTML 5: Tags <html> <head> </head> <body> <div id=”header”></div> <div id=”content”></div> <div id=”footer”></div> </body> </html>
  20. 21. HTML 5: Tags <html lang=&quot;es&quot;> <head> </head> <body> <header></header> <div id=”content”></div> <footer></footer> </body> </html>
  21. 22. HTML 5: Tags <hgroup> <h1> Noticias de HTML 5 </h1> <h2> Últimas noticias </h2> </hgroup> … <hgroup> <h1> Publicado nuevo draft de HTML5 </h1> <h2> El W3C lo publicó ayer </h2> </hgroup> <hgroup>
  22. 23. HTML 5: Tags <nav> <ul> <li><a href=”/”>Inicio</a></li> <li><a href=”/contacto”>Contacto</a></li> <li><a href=”/productos”>Productos</a></li> <li><a href=”/ayuda”>Ayuda</a></li> </ul> </nav> <nav>
  23. 24. HTML 5: Tags <section id=”noticias”> <article id=”noticia-1”> .... </article> </section> <aside> <p>Destacados</p> <ul>...</ul> </aside> <section>, <article> y <aside>
  24. 25. HTML 5: Tags <figure> <img src=&quot;estadisticas.jpg&quot; /> <figcaption> Estadísticas de uso </figcaption> </figure> <figure>
  25. 26. HTML 5: Tags <progress value=&quot;50&quot; max=&quot;100&quot;>50%</progress> <progress>
  26. 27. HTML 5: Tags <input list=&quot;componentes&quot;/> <datalist id=&quot;componentes&quot;> <option value=&quot;Twig&quot; /> <option value=&quot;YAML&quot; /> <option value=&quot;Validator&quot;/> <option value=&quot;Console&quot;/> </datalist> <datalist>
  27. 28. HTML 5: Tags <input type=&quot;text&quot; required placeholder =”Introduce texto” /> <input type=&quot; email &quot; /> | <input type=&quot; url &quot; /> <input type=&quot; date &quot; min=&quot;2011-11-25&quot; max=&quot;2011-11-26&quot; value=&quot;2011-11-26&quot; /> <input type=&quot; range &quot; min=&quot;0&quot; max=&quot;10&quot; value=&quot;5&quot; /> <input type=&quot;color&quot; /> Nuevos atributos/campos de formulario
  28. 29. HTML 5: Tags Ventajas de disponer de “input type” en móviles: text number email tel
  29. 30. HTML 5: data-* attributes Se pueden definir atributos personalizados para guardar información extra. Muy utilizado en algunos frameworks como jQuery mobile o Twitter Bootstrap JS, para definir comportamientos sin necesidad de escribir nada de JS.
  30. 31. HTML 5: data-* attributes <div id=&quot;persona1&quot; data-id=&quot;1&quot; data-name=&quot;Raul”></div> // jQuery mobile <a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;>Delete</a> // Twitter bootstrap JS <button class=&quot;btn&quot; data-loading-text=&quot;loading stuff...&quot; >...</button>
  31. 32. HTML 5 Almacenamiento offline
  32. 33. HTML 5: Almacenamiento offline Permite almacenar información en el navegador, en forma de datos independientes o en bases de datos (SQLite).
  33. 34. HTML 5: Almacenamiento offline Información básica: // guardar info window. localStorage .setItem('name', 'Raúl Fraile'); // obtener info window. localStorage .getItem('name');
  34. 35. HTML 5: Almacenamiento offline Base de datos var db = window. openDatabase (&quot;facultia&quot;, &quot;1.0&quot;, &quot;description&quot;, 5*1024*1024); db.transaction(function(tx) { tx.executeSql(&quot;SELECT * FROM usuarios&quot;, [], successCallback, errorCallback); });
  35. 36. HTML 5 Comunicación
  36. 37. HTML 5: Web workers/sockets Con los web workers podemos realizar tareas complejas en el navegador sin bloquearlo (hilos). Los web sockets proporcionan un canal bidireccional entre el navegador (cliente) y el servidor. Gran ventaja de los sockets: solamente se envía/recibe la información necesaria, sin cabeceras HTTP, cookies, etc...
  37. 38. HTML 5: Notificaciones Podemos notificar al usuario con ventanas emergentes, que se mostrarán aunque no estemos en la misma pestaña, e incluso, en otro programa. El usuario primero debe dar permisos para poder recibir notificaciones.
  38. 39. HTML 5: Notificaciones // solicitar permisos window. webkitNotifications .requestPermission(); // generar notificación window. webkitNotifications .createNotification('imagen.png', 'título','texto').show();
  39. 40. HTML 5 Ficheros / Hardware
  40. 41. HTML 5: Drag&Drop Proporciona drag&drop nativo (controlado mediante JS), así como drag-in y drag-out en el navegador. Por ejemplo: Gmail permite arrastrar archivos desde el escritorio para adjuntarlos (usando la API de ficheros).
  41. 42. HTML 5: Geolocalización Es posible conocer la posición del usuario sin necesidad de librerías o servicios externos, simplemente con JS. Dependiendo del dispositivo, la información de localización se obtendrá por GPS, IP, puntos WiFi, etc.
  42. 43. HTML 5: Geolocalización navigator. geolocation .getCurrentPosition(function(position) { alert(position.coords.latitude + position.coords.longitude); }, errorHandler);
  43. 44. HTML 5 Multimedia
  44. 45. HTML 5: Canvas Nuevo tag <canvas> , que podemos utilizar como lienzo para crear imágenes. Con JS podemos utilizar funciones de alto nivel como arc (pintar un arco), beginPath/closePath (dibujar formas)...
  45. 46. HTML 5: Canvas var width = 125; // ancho var height = 105; // alto var padding = 20; context.beginPath(); context.moveTo(padding + width/2, padding); context.lineTo(padding + width, height + padding); context.lineTo(padding, height + padding); context.closePath(); context.fillStyle = &quot;#ffc821&quot;; context.fill();
  46. 47. HTML 5: Audio y vídeo Nuevos tags para reproducir audio y vídeo en el navegador, sin necesidad de reproductores Flash. <audio id=&quot;audio&quot; src=&quot;musica.mp3&quot; controls></audio> // document.getElementById(&quot;audio&quot;).muted = false; <video id=&quot;video&quot; src=&quot;video.mp4&quot; controls></video> // document.getElementById(&quot;video&quot;).play();
  47. 48. HTML 5: SVG SVG (Scalable Vector Graphics) es un formato para definir imágenes vectoriales en XML. Una de las grandes ventajas (además de ser vectorial) es la posibilidad de animarlo, accediendo a sus elementos mediante JS.
  48. 49. HTML 5: WebGL WebGL (Web-based Graphics Library) es una librería que permite mostrar gráficos en 3D, acelerados por hardware, usando simplemente Javascript.
  49. 50. HTML 5 Estado actual
  50. 51. caniuse.com
  51. 52. html5readiness.com
  52. 53. HTML 5: Estado actual Si no lo soportan todos los navegadores... ¿podemos usarlo? Sí, para mejorar la experiencia del usuario, pero sin olvidarnos del resto
  53. 54. HTML 5: Estado actual Disponemos de herramientas para detectar si el navegador dispone de una u otra característica de HTML 5: Modernizr HTML5 Boilerplate html5 shiv O “simularla”: HTML5 Cross Browser Polyfills <html class=”js flexbox canvas webgl no-touch geolocation websqldatabase history draganddrop websockets textshadow opacity csstransitions fontface video audio localstorage webworkers svg inlinesvg”>
  54. 55. ¡Gracias! E-mail: [email_address] Twitter: @raulfraile Github: raulfraile http://www.slideshare.net/raulfraile ¿Preguntas?

×