comparte el articulo 

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

Actualizado el 26/10/2011 < > 2 Cometarios

Resumen: Analizamos la estructura y elementos básicos a tener en cuenta en la etapa de planificación y diseño de un tema de Prestashop.

En nuestro artículo anterior comenzamos la introducción al desarrollo de temas para Prestashop, para estos manuales estamos siguiendo las recomendaciones de los desarrolladores del sistema, aunque en cada caso explicamos a detalle cada una de sus recomendaciones.

En  este artículo analizaremos la estructura y elementos básicos a tener en cuenta en la etapa de planificación y diseño de un tema de Prestashop

Antes de comenzar la construcción del tema de Prestashop con Gimp o Photoshop, debemos conocer la estructura del CMS, así como las páginas principales que debemos crear en nuestra tienda.

Estructura de archivos del tema:

Antes de comenzar a trabajar en un nuevo tema, debemos conocer cuales son las páginas que debemos construir así como cuales es la estructura del tema. Antes de seguir es necesario recomendar que todos los ficheros .tpl pertenecen al sistema de plantillas.

Ficheros/Carpetas Descripción
preview.jpg Esta es la imagen que se usa para la identificación del tema. Ésta es un screenshot de como se ve el tema cuando está activo. Debemos siempre poner una imagen real y de buen ver, ya que esta será la que se verá cada vez que se elija el tema.
404.tpl Esta es la plantilla del error 404 (HTTP error 404).
address.tpl Se utiliza para la gestión de la dirección del cliente.
addresses.tpl Se utiliza para el listado de las direcciones de los clientes.
authentication.tpl Se utiliza cuando se identifica el usuario o se crea un nuevo usuario.
best-sales.tpl Cuando se listan los elementos más vendidos.
breadcrumb.tpl Se utiliza para mostrar la ruta de navegación.
category.tpl Se utilizan para listar todos los productos en una categoría
category-tree-branch.tpl Se utiliza solo en la bloque de categorías.
thickbox.tpl
Es la que se usa cuando se le hace zoom a una imagen
cms.tpl Usado para las páginas de información  (“Herramientas” > “CMS”).
contact-form.tpl Es el que se usa para formulario de contacto.
discount.tpl Se utiliza cuando se listan todas las entradas con descuento para un único cliente.
errors.tpl Es la que se usa cuando se muestra algún error, esta página tiene una importancia muy  grande ya que es llamada por cualquier otra a la aparición de un error.
footer.tpl La plantilla del pié de página.
guest-tracking.tpl Es la página que se usa para el seguimiento del pedido de un cliente que no tiene cuenta en el sitio. El fin de esta página es cuando e cliente decide comprar y tiene que ingresar como usuario registrado.
header.tpl Cabecera del sitio.
history.tpl Se usa para listar el histórico de pedidos de un cliente.
identity.tpl Usado cuando los clientes editan su página de identificación personal.
index.php Fichero en blanco, previene que los visitantes vean el contenido de la carpeta. Es uno de los mecanismos de seguridad que ofrece Prestashop.
index.tpl Página de Bienvenida.
maintenance.tpl Se usa cuando el sitio está en modo de mantenimiento.
manufacturer.tpl Usada cuando se listan los productos de un solo fabricante.
manufacturer-list.tpl Cuando se usan todos los productores.
my-account.tpl Página de bienvenida para la cuenta de los clientes.
new-products.tpl Se usan cuando se listan los últimos productos añadidos al carro de compras.
order-address.tpl Usado durante el proceso de pedido: Paso 1, se escoge la dirección de pedido (entrega, facturación).
order-carrier.tpl Usado durante el proceso de pedido: Paso 2, escogiendo el método de entrega.
order-confirmation.tpl Usado durante el proceso de pedido: Último paso, confirmando el pedido (luego del pago).
order-detail.tpl Usado para mostrar los detalles de un pedido de un cliente.
order-follow.tpl Se utiliza cuando un cliente quiere solicitar una devolución del producto.
order-payment.tpl Usado durante el proceso de pedido: Paso 2, escogiendo el método de pago.
order-return.tpl Se utiliza para mostrar los detalles de los productos devueltos.
order-slip.tpl Se utiliza para mostrar los detalles de las compras.
order-steps.tpl Barra de progreso del proceso de compra.
pagination.tpl Usado por todas las páginas que listan productos. Se muestran los elementos de paginación.
password.tpl Usado cuando un cliente necesita cambiar su contraseña.
prices-drop.tpl Se utiliza para enumerar todas las promociones actuales.
product.tpl Se utiliza para mostrar los detalles de un producto individual.
product-list.tpl Usado por todas las páginas que listan productos. Muestra la lista de productos actuales.
product-sort.tpl Usado por todas las páginas que listan productos. Habilita el menú para organizar o filtrar los productos.
products-comparison.tpl
scenes.tpl Se utiliza para mostrar los detalles de una escena dentro de una categoría de producto.
search.tpl Usado para listar el resultado de una búsqueda.
shopping-cart.tpl Usado para listar productos en el carrito de compra del cliente.
shopping-cart-product-line.tpl Usado para mostrar un producto simple en el carrito de compra del usuario.
sitemap.tpl Muestra el mapa del sitio.
store_infos.tpl Muestra la información de todas nuestras tiendas.
stores.tpl Muestra todas nuestras tiendas.
supplier.tpl Se utiliza para listar los productos de un solo proveedor.
supplier-list.tpl Se utiliza para mostrar todos los proveedores.
/cache
/css Contiene todas las hojas de estilo (.css). El archivo global.css contiene la mayoría del layeado de todas las páginas del sitio.
/img Contiene todas las imágenes del tema.
/js Contiene todos los JavaScript del sitio.
/lang Contiene todos los archivos de traducción del sitio. Estos archivos son generados de forma automático por lo que no es recomendable que sean modificados.

Cuando haga la planificación del desarrollo recuerda que debes realizar cada uno de los elementos planeados anteriormente.

Recomendaciones técnicas

Colores

No uses el modelo de colores CMYK, ya que este solo está adaptado a impresión. Usa siempre el modelo de colores RVB.

Fuentes

La recomendación fundamental en este aspecto es usar siempre fuentes estándares, recuerda que no todos tienen instalados tu mismo paquete de fuentes, mantén siempre tu sitio legible.

Los textos estándares (títulos, subtítulos, texto regular) deben estar limitados a las siguientes fuentes, con el objetivo de que todos los visitantes puedan verlos de la misma forma:

  • Arial
  • Verdana
  • Helvetica
  • Georgia
  • Tahoma
  • Times News Roman

Ah! recuerda que siempre debes mantener el número de fuentes usadas al mínimo.

Unidad de medida

Recuerda que la unidad básica de medida para el diseño Web es el pixel. Nunca diseñes páginas en función de centímetros, picas u otros.

Tamaño de texto

Recuerda que en dependencia de la resolución y el navegador del cliente el tamaño de las fuentes pueden variar, por lo que hay que no solo ser muy cuidadoso con el tamaño del texto sino también dentro de lo posible revisar su visibilidad en diferentes entornos.

Normalmente los tamaños que se usan son:

  • 10 to 12pxpara texto regular.
  • 14px para subtítulos.
  • 18px para títulos.

Transparencias

Antes del uso de las imágenes transparentes es importante que tengas que en cuenta que las imágenes con transparencias no se ven bien en los navegadores antiguos como Internet Explorer.

En nuestro próximo artículo comenzaremos la construcción del tema desde cero paso a paso. Les recordamos que si tienen alguna duda pueden postearla como comentario.

Publicado el 26/10/2011, última actualización 26/10/2011.

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)

2 Cometarios

  1. Rafael

    Hola, interesante el curso, pero el link al tema 3 esta roto ¿podrias verificarlo? gracias. Saludos !!!

    Miércoles, 11 de septiembre 2013

  2. Verónica Milán

    Hola Rafael, corregido. Gracias por avisar ;)

    Sábado, 14 de septiembre 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras