anchor.diff:  }
   ----
   
  -Desplegad los cambios en WildFly y comprobad que el nuevo aspecto de la pantalla es similar a éste:
  +Desplegad los cambios en WildFly y comprobad que el nuevo aspecto de la pantalla sea similar a éste:
   
   image::https://raw.githubusercontent.com/lametaweb/lametaweb.github.io/master/images/009/post009-fig015.png[]
   
   NOTE: Existe una herramienta muy interesante que evita los redespliegues en el servidor de desarrollo durante la implementación de una aplicación. Se trata de JRebel, http://zeroturnaround.com/software/jrebel/. Es una herramienta de pago pero ofrecen una modalidad gratuita en http://my.jrebel.com[esta dirección].
   
  -Para terminar movemos el contenido de index.html a consulta-inicial.xhtml y dejamos index.xhtml con un fondo de pantalla limpio como pantalla inicial de la aplicación, añadiendo una imagen de fondo.
  -
  -Para el próximo Post voy a preparar una lista en un formato de Preguntas y repuestas, Q&A, para aclarar distintas partes del código de la aplicación jDrone y no dejarnos nada en el tintero. Hasta pronto!+En el próximo Post terminaremos de analizar el código de las pantallas de gestión de Trabajos esta vez bajando al detalle de cada técnica usada. . Hasta pronto!
positive.code:     </ui:composition>
  ----
  
  El contenido de la zona variable _central_ se define en la página en general al principio para mayor claridad dado que aquí el orden no afecta. La zona del logo la hacemos también insertable aunque en todas las páginas aparecerá como un include, esto nos da la posibilidad de tener páginas especiales que prescindan del logo si por ejemplo necesitamos espacio extra.
  
  Veamos ahora un ejemplo práctico de uso de plantilla, y que mejor manera que adaptando la pantalla del Post anterior, de consulta de drones disponibles en una fecha, al nuevo diseño de pantalla. Lo primero que haremos es mover el contenido desde el fichero _index.xhtml_, que ahora pasará a ser la pantalla inicial de la aplicación, al fichero _consulta-inicial.xhtml_.
  
  Luego tendremos que crear el panel para el logo, podéis ir al código de la aplicación y ver que su raíz es un elemento _<ui:composition... >_ ya que irá inyectado en la plantilla, pero sin embargo no contiene elementos `<ui:define...>` ya que no se trata de una página pública que hace uso de la plantilla. He incluido aquí una sencilla animación realizada con la librería JS jQuery para que, si aún no la conocéis, tengáis una primera toma de contacto. Es muy importante conocerla al máximo ya que ahorra mucho tiempo de desarrollo en la parte de cliente. Además que Primefaces esté basado en jQuery es otro motivo más para dedicarle tiempo. Como nuestro proyecto incluye Primemefaces y éste incluye jQuery no tenemos ni debemos de añadir la librería de manera explícita. 
  
  No es habitual, pero si una página de nuestro proyecto no usa ninguna estiqueta de Primefaces entonces tendremos que incluir de manera explícita la librería jQuery embebida en Primefaces añadiendo:
  
  [source,xhtml,indent=0]
  ----
  
negative.code: 
  Antes de empezar a implementar lo mejor es tomar lápiz y papel o una herramienta como Inkscape y dibujar un boceto del layout de la página completa que queremos y así tener claro los _divs_ que voy a necesitar para crear las áreas de la pantalla.
  
  Una plantilla es una página XHTML privada que define la estructura y el contenido común de todas las páginas de la aplicación que la usan y una serie de elementos _<ui:insert...> para definir los puntos de inserción del contenido variable. Podéis consultar el contenido de la plantilla usada en jDrone abriendo el fichero _\jdrone\src\main\webapp\WEB-INF\plantillas\plantilla.xhtml_.
  
  Por otro lado tenemos las páginas públicas de la aplicación, que ban a usar la plantilla incluyendo el contenido variable mediante la inclusión de elementos _<ui:define...>_. Básicamente una página tendrá este aspecto:
  
  [source,xhtml,indent=0]
  ----
  