Symfony2: Interacción con CSS, JS y HTML5

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 /

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

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

Vistas en Symfony2 <!DOCTYPE html> <html> <head> <title>Ejemplo</title> </head> <body> Hola {{ name }} ! </body> </html> hello.html.twig

Vistas en Symfony2 <?xml version="1.0" encoding="UTF-8" ?> <noticias> {% for noticia in noticias %} <noticia> <titulo> {{ noticia.titulo }} </titulo> <fecha> {{ noticia.fecha }} </fecha> </noticia> {% endfor %} </noticias> noticias.xml.twig

Assets Imágenes, scripts JS y hojas de estilos CSS <img src=" {{ asset('images/logo.png') }} " /> <link href=" {{ asset('css/estilos.css') }} " rel="stylesheet" /> <script src=" {{ asset('js/scripts.js') }} "></script>

Assetic Gestión de assets + filtros {% javascripts '@TestBundle/Resources/public/js/lib/jquery.js' '@TestBundle/Resources/public/js/*' %} <script src=" {{ asset_url }} "></script> {% endjavascripts %}

Assetic Ventajas: Los assets pueden estar almacenados en rutas distintas a las que se sirve. Mejor organización en bundles. Se pueden aplicar filtros para optimizar imágenes, preprocesar, combinar...

HTML5 ≈ HTML + CSS3 + JS APIS

HTML 5: Tags <html> <head> </head> <body> <div id=”header”></div> <div id=”content”></div> <div id=”footer”></div> </body> </html>

HTML 5: Tags <html lang="es"> <head> </head> <body> <header></header> <div id=”content”></div> <footer></footer> </body> </html>

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>

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>

HTML 5: Tags <section id=”noticias”> <article id=”noticia-1”> .... </article> </section> <aside> <p>Destacados</p> <ul>...</ul> </aside> <section>, <article> y <aside>

HTML 5: Tags <figure> <img src="estadisticas.jpg" /> <figcaption> Estadísticas de uso </figcaption> </figure> <figure>

HTML 5: Tags <progress value="50" max="100">50%</progress> <progress>

HTML 5: Tags <input list="componentes"/> <datalist id="componentes"> <option value="Twig" /> <option value="YAML" /> <option value="Validator"/> <option value="Console"/> </datalist> <datalist>

HTML 5: Tags <input type="text" required placeholder =”Introduce texto” /> <input type=" email " /> | <input type=" url " /> <input type=" date " min="2011-11-25" max="2011-11-26" value="2011-11-26" /> <input type=" range " min="0" max="10" value="5" /> <input type="color" /> Nuevos atributos/campos de formulario

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 algunos frameworks como jQuery mobile o Twitter Bootstrap JS, para definir comportamientos sin necesidad de escribir nada de JS.

HTML 5: data-* attributes <div id="persona1" data-id="1" data-name="Raul”></div> // jQuery mobile <a href="index.html" data-role="button" data-icon="delete">Delete</a> // Twitter bootstrap JS <button class="btn" data-loading-text="loading stuff..." >...</button>

HTML 5: Almacenamiento offline Permite almacenar información en el navegador, en forma de datos independientes o en bases de datos (SQLite).

HTML 5: Almacenamiento offline Información básica: // guardar info window. localStorage .setItem('name', 'Raúl Fraile'); // obtener info window. localStorage .getItem('name');

HTML 5: Almacenamiento offline Base de datos var db = window. openDatabase ("facultia", "1.0", "description", 5*1024*1024); db.transaction(function(tx) { tx.executeSql("SELECT * FROM usuarios", [], successCallback, errorCallback); });

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...

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.

HTML 5: Notificaciones // solicitar permisos window. webkitNotifications .requestPermission(); // generar notificación window. webkitNotifications .createNotification('imagen.png', 'título','texto').show();

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).

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.

HTML 5: Geolocalización navigator. geolocation .getCurrentPosition(function(position) { alert(position.coords.latitude + position.coords.longitude); }, errorHandler);

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)...

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 = "#ffc821"; context.fill();

HTML 5: Audio y vídeo Nuevos tags para reproducir audio y vídeo en el navegador, sin necesidad de reproductores Flash. <audio id="audio" src="musica.mp3" controls></audio> // document.getElementById("audio").muted = false; <video id="video" src="video.mp4" controls></video> // document.getElementById("video").play();

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.

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.

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

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”>

¡Gracias! E-mail: [email_address] Twitter: @raulfraile Github: raulfraile http://www.slideshare.net/raulfraile ¿Preguntas?

Symfony2: Interacción con CSS, JS y HTML5

Más contenido relacionado

La actualidad más candente

Similar a Symfony2: Interacción con CSS, JS y HTML5

Más de Raul Fraile

Último

Symfony2: Interacción con CSS, JS y HTML5