Crear una plantilla profesional en Symfony2

Bienvenidos Amigos!
 

En este pequeño tutorial vamos a ver como usar en Symfony2 una plantilla profesional de las muchas que podemos encontrar por la red. Recordar antes de usar una plantilla, es necesario revisar la licencia de uso, para que se adapte al objetivo de vuestro proyecto y no cometamos ilegalidades.
 

Recuerda que al final de la página tienes el vídeo para que veas en detalle el proceso.
 

El uso de una plantilla para un proyecto web tiene 3 principales motivaciones:

  • Dar un estilo profesional.
  • Unificar la apariencia de nuestra web.
  • Facilitar el desarrollo de nuevas páginas.

 

La forma de poder trabajar con una plantilla que nos brinda Symfony2 y Twig, es separar esta en distintos niveles, y que unos niveles dependan de otros. Normalmente dividiremos la plantilla en 3 niveles:

  • Una base
  • Frontend
  • Contenido

 

De esa maneras todas las paginas tendrán una misma base (1º Nivel).
 

Luego se puede dar una estructura similar a todas las paginas de un mismo módulo que compartan un mismo objetivo, como puede ser la parte visible para los visitantes, otra apariencia para los usuarios registrados, etc. (2º Nivel).
 

Por último se puede usar una plantilla para el contenido final (3º Nivel), es posible que haya que crear varios 3-niveles si queremos que sean distintos en función del nivel 2.
 

Básicamente para poder separar una plantilla tenemos que identificar cada una de las partes que componen una página básica, para ello conviene tener claro los conceptos de html y como se suelen articular el uso de las etiquetas web.
 

Para usar el concepto de extensión de niveles, y que un nivel extienda de otro nivel, tendremos que usar la palabra reservada de twig extends:

{% extends 'FrontendBundle:Default:frontend.html.twig' %}

 

Para definir bloques, (zonas de la página que queremos que se implementen en otro nivel), tendremos que realizarlo con «block»:

{% block nombreBloque %}
{% endblock %}

También nos interesa publicar los assets de nuestra plantilla. Los assets como los «complementos» de nuestra plantilla, es decir, los ficheros css, js, imagenes.. que acompañan la plantilla. Para publicar los assets tenemos que copiarlos al directorio «…src\NombreDeNuestroBundle\Resources\public» y para publicarlos tenemos que llamar a la consola de symfony de la siguiente manera:

php app\console assets:install

Una vez publicado, los ficheros que tuviéramos en la carpeta «public» se duplicarán a la carpeta «web\bundles\NombreDeNuestroBundle», esta carpeta es accesible desde el navegador cuando se accede a nuestro sitio web.
 

A continuación os dejo el vídeo donde se muestra todos los pasos con más detalle, espero que os guste y si es así darle al like 😉
 


 

Te animo a que crees tu propio proyecto de Symfony2 (puedes ver el tutorial que he escrito sobre ello) y utilices una plantilla profesional.
También puedes ver todo el código en github
 

Un saludo!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *