comparte el articulo 

Introducción al diseño de temas en Prestashop III

Actualizado el 14/09/2013 < > 1 Comentario

Resumen: Tercera parte del tutorial para la creación de un nuevo tema de Prestashop.

Hace ya varias semanas estamos analizando y creando las condiciones necesarias para la construcción de un tema de Prestashop. El tema que Prestashop tiene por defecto posee un estilo neutral, y validado con todas las normas de W3C, además está optimizado para la mayoría de los navegadores conforme a todas las normas establecidas, por lo que este tema nos servirá de referencia para la construcción de uno  nuevo.

Consideraciones iniciales para diseñar temas con Prestashop

Como ya habíamos hablado en otras ocasiones todos los temas están  ubicado en la carpeta /themes. Además una recomendación que nos hacen los desarrolladores de Prestashop es que modifiquemos el tema principal, ya que este cumple con todos los estándares que tiene que cumplir un tema de Prestashop.

Recomendamos estudien el artículo anterior donde está para qué es cada página del tema y otros detalles del layeado.

Es necesario además, si es posible, que los desarrolladores tengan integrados a sus navegadores alguna de las herramientas para  el tratamiento web como pueden ser: FireBug (Firefox), DragonFly (Opera), Chrome & Webkit’s Web Inspector (Chrome), entre otros.

Estructura del sitio

Estructura página inicial

Como vemos en la imagen inferior, la estructura de Prestashop es muy parecida al resto de los CMS, tiene una página superior, columna derecha e izquierda, contenido y pié de página. No obstante un detalle que quiero resaltar desde ahora es que esas son las regiones, cada una de estas regiones están compuestas por módulos más pequeños, esto nos permite modificar de una forma más fácil cada una de las regiones. Esto significa, que modificando cada una de las pequeñas regiones al final modificaremos todo.

Página Inicial. Estructura

Página Inicial. Estructura

Estructura de bloques.

Estructura de bloques.

Como pueden ver, cada bloque tiene un id y una carpeta, solo deben modificar el archivo .tpl con el mismo id, y en la carpeta están las imágenes.

Estructura de las páginas

Estructura de la página. Bloques de la página de inicio

Estructura de la página. Bloques de la página de inicio

Estructura de la página. Columna central de categoría

Estructura de la página. Columna central de categoría

Estructura de la página. Detalles del producto.

Estructura de la página. Detalles del producto.

Estructura de la página. Formulario de registro y orden de los pasos

Estructura de la página. Formulario de registro y orden de los pasos

Estructura de la página. Formulario de creación de cuentas.

Estructura de la página. Formulario de creación de cuentas.

Estructura de la página. Bloque de pedidos.

Estructura de la página. Bloque de pedidos.

Estructura de la página. Bloque de direcciones.

Estructura de la página. Bloque de direcciones.

Estructura de la página. Opción de transporte y términos y condiciones.

Estructura de la página. Opción de transporte y términos y condiciones.

Estructura de la página. Módulo de selección de pago.

Estructura de la página. Módulo de selección de pago.

Estructura de la página. Mapa del sitio.

Estructura de la página. Mapa del sitio.

Estructura de la página. Formulario de contacto

Estructura de la página. Formulario de contacto

Estructura de la página. Listado de tiendas.

Estructura de la página. Listado de tiendas.

Como pueden ver, ya estás listadas la mayor parte de las páginas con su ID. Solo deben hacer un layeado con el mismo ID y suficiente.

Esperamos que los tutoriales para hacer los temas de Prestashop hayan sido de su gusto. Como simpre esperamos sus comentarios.

Publicado el 11/11/2011, última actualización 14/09/2013.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia

Autor: Ronald Baby González

URL: LaWebera.es :: Diseño Paginas Web

Añadir Comentario (Subir al texto)

1 Comentario

  1. Marianela

    Hola! tenes algun tutorial para diseñar plantillas responsive design? Gracias

    Lunes, 17 de febrero 2014

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras