Antiguamente en diseño web se utilizaban las tablas para maquetar todas las páginas , esta forma de realizar páginas ha quedado en desuso y no se debería seguir este método de trabajo, actualmente las páginas web se maquetan con div y CSS, gracias a esto nos permiten separar lo que es contenido de lo que serían los estilos.
Pero esto no quiere decir que no podamos usar tablas en nuestras páginas web, las tablas en diseño web nacieron con el propósito de tabular datos, por lo tanto para estos casos podemos usar tablas, por ejemplo para comparar resultados de las elecciones políticas, listar tallas o precios o cualquier otro dato.

Estructura básica de una tabla

<table></table>: El elemento table es necesario para indicar al navegador que queréis organizar el contenido de una manera tabular.

<tr></tr>: El elemento tr establece una fila de la tabla. Esto permite que el navegador organice todo el contenido que hay entre las etiquetas <tr> y </tr> dde una manera horizontal, todas ellas en una fila.

<td></td>: El elemento td define la celda de la tabla o cada uno de los espacios individuales para el contenido dentro de la fila. Utilizad sólo las celdas de tabla td necesarias según los datos que se quieran incluir.

<caption></caption>: El elemento caption permite añadir un título a los datos de la tabla.

<th></th>: El elemento th define el contenido que hay entre estas etiquetas como encabezamiento para la columna correspondiente de la tabla.

<thead>: Identifica el título de la tabla

<tbody>: Identifica el cuerpo de la tabla, donde se insertan los datos

<tfooter> : Identifica el pie de la tabla, donde se suelen colocar los créditos o paginación.

colspan: El atributo colspan permite combinar varias celdas en la misma fila.

<td colspan=”3></td>

colrow: El atríbuto colrwo permite cominar varias celdas en la misma columna

<td colrow=”5”></td>

scope: Se utiliza siempre dentro de la etiqueta th para indicar el título de las columnas.

Esta forma de tabular datos es la existente a día de hoy y habría que usar estos elementos para realizarlo correctamente.

Css son las siglas de lo que se conoce como hojas de estilo en cascada. Las hojas de estilo nos permiten controlar el diseño de nuestras páginas web de forma general. Con ellas podemos tener control sobre el texto, las imágenes y otros elementos que forman el diseño de las páginas web, como puede ser la estructura. En definitiva, nos permiten maquetar nuestras páginas de una manera eficaz dándole estilo a nuestro código HTML en un documento aparte.

Ventajas para usar CSS en lugar de tablas.

• Una de las principales ventajas de utilizar CSS para el diseño de nuestras páginas web es que puedes hacer modificaciones en varias páginas a la vez solo realizando un cambio en nuestra hoja de estilo. Por ejemplo si necesitamos cambiar el color del encabezado en las diferentes páginas que componen una web, no es lo mismo tener que cambiarlo en las 50 páginas internas que cambiarlo en un único documento que es la hoja de estilos y que automáticamente ese cambio se aplique en las 50 páginas internas.
• Además nos proporciona un código más limpio, eficaz y cómodo para trabajar al poder tenerlo todo en un solo archivo y al poder usar nombres para cada uno de los elementos de una página, por lo que el contenido real de una página web está solo en un único archivo y los diferentes estilos se adjuntan en otro documento de estilos.
• También conseguimos eliminar mucho código innecesario y obsoleto del HTML, permitiendo así mejorar tiempos de carga en los navegadores.
• Añadimos a esto que los CSS se quedan almacenados en la cache de los navegadores, permitiendo reducir el tiempo de carga de nuestros sitios.
• El buen uso de CSS mejora la accesibilidad y la lectura que tienen los motores de búsqueda sobre un sitio web, favoreciendo el posicionamiento de nuestras páginas web.

Validar páginas por W3C.
W3C es una organización que rige los estándares y recomendaciones de una web bien hecha. Gracias a esta organización, podemos comprobar que el diseño de nuestra página web es correcto y sigue los estándares actuales.
Tener el código limpio y claro es algo que siempre nos va a ayudar a posicionar mejor, ya que a google le encantan las paginas así , y  una manera de poder hacer esto es cumplir los estándares de W3C en todos nuestros diseños web.
Realizar una validación en W3C , nos proporcionará la calidad de un trabajo bien hecho, aunque en determinados trabajos pueden existir alguna incoherencia con esta organización por requerimientos del proyecto, es recomendable siempre que sea posible realizar la validación.

Ventajas de maquetar css con respecto al SEO
Las ventajas de maquetar páginas web con CSS para nuestro posicionamiento web, conocido también como SEO son muchísimas. Al tener un código tan limpio lleno de contenido, ayuda a que nuestro de diseño web sea semánticamente más correcto y aparezca mejor posicionada en los buscadores, entro los principales motivos destacan dos:

• Separación del código html del css, el código que se usa es el que realmente necesita el buscador para posicionar, los estilos de toda la página van en otro documento anexo.
• Velocidad de carga, desarrollar página web con css tiene la ventajas que los elementos cargan mediante caché, por lo que la velovidad de carga de la página web , es muy superior a otra página que tiene los estilos en el mismo documento html, está demostrado que Google tiene en cuenta la carga de las páginas web.

Recomendación antes de empezar.
Los que nos dedicamos a el diseño de páginas web y la maquetación de estas mismas sabemos lo difícil que es encontrar la compatibilidad entre todos los navegadores que existen, Internet Explorer, Firefox, Chrome, Safari,etc…, o por lo menos los más importantes. Esto viene porque los navegadores no interpretan el código de la misma manera y entre ellos hay pequeñas variaciones. Aquí entra en juego el reset de Eric Meyer, que es un código de los más conocidos de los que disponemos para poder resetear el CSS de nuestro diseño web. Al resetear digamos que ponemos a cero esos valores que pueden crear discrepancias entre navegadores y así poder empezar a dar el formato y a maquetar nuestras páginas web que nosotros queramos sin que el navegador haga su propia interpretación.

Otro proyecto interesante es Css Zen Garden, donde la comunidad con un único archivo html, crea páginas totalmente diferentes, mostrando el verdadero potencial que tiene maquetar páginas web mediante CSS.

Muchas veces por tema de diseño web nos hemos encontrado con la dificultad que necesitamos ver en los listados de los productos los precios sin rebajar,  normalmente aparece tachado, y los precios actuales que están rebajados sin tachar , ya que es el precio final, realizar esto en Prestashop es un poco complejo.

Os dejo como conseguí solucionar este problema, tenemos que abrir el archivo del tema donde se muestran los productos, en nuestro caso product_list.tpl, retirar los precios antiguos para que no se mezcle con el núevo código.

Con este código consiguiréis mostrar en Prestashop, el precio antiguo, el precio actual (el rebajado) y el porcentaje de descuento que se le aplica.

        {if ($product.reduction_price != 0 || $product.reduction_percent != 0) && ($product.reduction_from == $product.reduction_to OR ($smarty.now|date_format:'%Y-%m-%d' <= $product.reduction_to && $smarty.now|date_format:'%Y-%m-%d' >= $product.reduction_from))}{assign var='special' value='1'}{else}{assign var='special' value='0'}{/if}                       
 
{if !$priceDisplay || $priceDisplay == 2}
 
<div class="price_container">{l s='Precio:'} <span class="old_price">{if $special}{if $product.reduction_price != 0}{convertPrice price=$product.price+$product.reduction_price}{elseif $product.reduction_percent != 0}{math assign='product_price' equation='p / (1 - (r / 100))' p=$product.price r=$product.reduction_percent}{convertPrice price=$product_price}{/if}{/if}</span><span class="price" style="margin-left: -12px;">{convertPrice price=$product.price}</span>{if $priceDisplay == 2} {l s='+Tx'}{/if}
 
{if $special}<span class="price">({if $product.reduction_price != 0}{math equation='round((r / (p + r)) * 100)' p=$product.price r=$product.reduction_price}%{elseif $product.reduction_percent != 0}{$product.reduction_percent|floatval}%{/if})</span>{/if}</div>
 
 
{/if}
 
{if $priceDisplay}
 
<div class="price_container">{l s='Precio:'} <span class="old_price">{if $special}{if $product.reduction_price != 0}{convertPrice price=$product.price_tax_exc+$product.reduction_price}{elseif $product.reduction_percent != 0}{convertPrice price=$product.price_tax_exc+$product.reduction_price}{elseif $product.reduction_percent != 0}{math assign='product_price' equation='p / (1 - (r / 100))' p=$product.price_tax_exc r=$product.reduction_percent}{convertPrice price=$product_price}{/if}{/if}</span><span class="price">{convertPrice price=$product.price_tax_exc}</span>{if $priceDisplay == 2} {l s='-Tx'}{/if}{if $special}
 
<div class="reduction_percent">{if $product.reduction_price != 0}{math equation='round((r / (p + r)) * 100)' p=$product.price r=$product.reduction_price}%{elseif $product.reduction_percent != 0}{$product.reduction_percent|floatval}%{/if}</div>
 
 
{/if}</div>
 
 
{/if}

Cuando realizamos una  instalación de Prestashop uno de los primeros pasos que tenemos que hacer es otorgar permisos de escritura a los archivos para que la aplicación, o sea, nuestra tienda online, se pueda instalar correctamente, es muy importante realizar aparte que no nos dejará avanzar, la explicación de el porque debemos hacerlo es sencilla, cualquier tipo de modificación que queramos realizar en la tienda desde el panel de administración , permitira que el mismo Prestashop pueda escribir sobre los archivos y no tengamos que realizar los cambios manualmente, por ejemplo en el caso de las traduccciones.

Derechos en escritura en los archivos y carpetas :

• /config
• /tools/smarty/compile
• /sitemap.xml

Derechos en escritura en las carpetas (y sus subcarpetas) :

• /img
• /mails
• /modules
• /themes/prestashop/lang
• /translations
• /upload
• /download

Cuando realizamos una migración también deberemos borrar el contenido de la carpeta:

• tools/smarty/compile/

Podemos activar los errores en cofing.inc.php pasando la linea

@ini_set(‘display_errors’, ‘off’); a on

En las últimas versiones de Prestashop la 1.4 y posteriores las carpetas a cambiar permisos son las siguientes:

• /config
• /tools/smarty/compile
• /tools/smarty/cache
• /tools/smarty_v2/compile
• /tools/smarty_v2/cache
• /sitemap.xml
• /log

En escritura en las carpetas (y sus subcarpetas) :

• /img
• /mails
• /modules
• /themes/prestashop/lang
• /themes/prestashop/cache
• /translations
• /upload
• /download

Una vez hemos finalizado el diseño de nuestra página web o el diseño de nuestra tienda online deberemos realizar el alta en los buscadores y optimizar al máximo las prestaciones de nuestra web para conseguir salir en las primeras posiciones de los buscadores.
Uno de los pasos más importantes es dar el alta en buscadores y configurar nuestro dominio preferido para evitar caer en penalizaciones por tener contenido duplicado.
Configurar nuestro dominio preferido no es otra cosa que elegir entre que todas tus páginas aparezcan como www.tudominio.com o que aparezcan como tudominio.com, si no configuramos esta opción todas las páginas de nuestro sitio aparecerán duplicadas.
Una vez explicada la teoría pasemos a la práctica:

1º) Accederemos A HERRAMIENTAS DE WEBMASTER de Google:
Una vez dentro deberemos entra a la opción “CONFIGURACIÓN”, donde nos aparecerá la opción para elegir nuestro dominio preferido. Es indistinto que elijamos con www o sin www, lo importante es elegir una de las dos opciones y convertir todas la direcciones a este formato.
Es posible que al intentarlo nos pida que debemos verificar el sitio, para realizar esto deberemos dar de alta el domonio que no esté dado de alta.

2º) Convertir todas la url al dominio preferido:
Este es el paso más importante, incluso más que el paso anterior ya que lo que hará será eliminar una de las dos opciones. Para ello deberemos escribir una serie de comandos en el .htacces que tengamos en nuestro servidor , el servidor deberá disponer de mod_rewrite activado, sino no podremos poner en práctica esta técnica.
Lo que vamos a hacer es mandar a todos los usuarios que entren a la web por el dominio NO PREFERIDO y le diremos que la página a la que intenta accceder se ha movido al DOMINIO PREFERIDO, así tanto si entra una persona o un robot sabrá que la página que buscaba está en nuestro dominio preferido.
Para ello deberemos escribir en nuestro .htacces. Una buena página para generar urls dinámicas es GENERATE IT! . En nuestro caso no será necesario ya que la sentencia es sencilla , para escribiremos el siguiente código:

MOSTRAR LA PÁGINA CON WWW.
RewriteCond %{HTTP_HOST} ^tudominio.com [NC]
RewriteRule (.*) http://www.tudominio.com/$1 [L,R=301]

MOSTRAR LA PÁGINA SIN WWW.
RewriteCond %{HTTP_HOST} ^www.tudominio.com [NC]
RewriteRule (.*) http://tudominio.com/$1 [L,R=301]

Eso es todo, es un proceso sencillo pero que todo el mundo debería realizar en su página web.

Mucho tiempo buscando y buscando un editor de textos con un mínimo de prestaciones, casi siempre he usado o ckeditor, fckeditor o tinymce, estos editores son lo más profesional que he encontrado gratuito para usar en mis diseños de páginas web, aunque siempre me he encontrado con el problema que los gestores de archivos no eran gratuitos, con lo cual, siempre tenía que pagar licencias o usar gestores propios, poco potentes o bastante antiguos.

Eirte es un editor WYSIWYG realizado con JQUERY, totalmente libre y sin ninguna licencia, por lo que lo podrás usar en el desarrollo de sitios web, sean comerciales o no, se distribuye con la licencia BSD.

Es compatible con Firefox 3.5+, Internet Explorer 7 y 8, Safari 4, Opera 10, destaca que no es compatible con IE6, al ser una herramienta de administración y ser un navegador obsoleto, considero que los requerimientos mínimos son más que suficientes.

Pero la característica destacada es elfinder, el gestor de archivos de este editor de textos que igualmente es gratuito y bastante potente. Inspirado en Finder el gestor de archivos de Mac (ahí ya me han tocado la fibra…), eso sí, requiere que el servidor disponga de la utilidad mogrify o bien el módulo GD/Imagick.
Por supuesto todos nuestros servidores disponen de estos requerimientos… .

Viva por lo desarrolladores que ofrecen herramientas gratuitas!!

Descarga:

Eirte editor WYSIWYG

Elfinder gestor de archivos

Actualmente a la velocidad que van las tiendas online, y más concretamente a la velocidad con que aparecen nuevas versiones de Prestashop, nos encontramos con el dilema de actualizar a las últimas versiones con el fín de tratar de corregir errores o simplemente ampliar nuevas posibilidades que en anteriores versiones no existian.
Aquí os dejo el método para actualizaros vuestra tienda realizada en Prestashop, deberéis tener unos conocimientos mínimos de programación o herramientas web, por lo que sino entiendes algún punto, lo mejor es que contrates a un profesional o una empresa para realizarte este proceso, sobre todo si es una tienda que se encuentra en producción…

• Lo primero es guardar el idioma de la página y las traducciones, mediante la herramienta que dispone Prestashop, todas las traducciones que hayamos cambiado las podremos restaurar.
  Back Office > Herramientas > Traducciones> Exportar Idioma.
• Realizar una copia de seguridad de la base de datos antigua, hay que curarse en salúd, no sea que el procesa salga mal y perdamos toda la información.
• Una vez realizado esto a través del FTP descargarse todos los archivos o bien introducir todo el contenido en una nueva carpeta por seguridad, (por ejemplo, http://www.mysite.com/prestashop/, pasarlo a otra dirección como, http://www.mysite .com / prestashop_old /).
• Descargate  la última versión de PrestaShop, actualmente la versión 1.3.2
• Descomprimir el nuevo PrestaShop en cualquier lugar de tu disco duro.
• Subir a través de FTP los nuevos archivos PrestaShop , ¡¡¡ los archivos , no la carpeta!!!, que nos conocemos…
• La carpeta MAILS, si ha realizado modificaciones habría que volver a resubir los antiguos para que que quedase de la misma manera.
• Reemplazar la nueva carpeta /img por la antigua carpeta que teniamos con todas las imágenes y que se llama de la misma manera,  /img .
• Si ha añadido algún módulo adicional a su versión predeterminada de PrestaShop, copiar los módulos añadidos de la copia de seguridad a la nueva carpeta de módulos. Lo ideal para no perder la configuración de cada módulo es borrar la carpeta y reemplazar dichos módulos enteros.
• Si previamente había modificado el archivo htaccess., copiar el contenido del .httaces al nuevo, y dejar el contenido nuevo que figure, borrando el contenido duplicado.  No sustituya uno con el otro
• Si está usando un tema personalizado copie el antiguo a la carpeta raíz de sus temas. www.misitio.com/themes/
  Posiblemente tenga que configurar ciertos aspectos del mismo para conseguir el mismo resultado.
• Copie el archivo settings.inc.php de la carpeta de copia de seguridad / config a la nueva construcción de / config carpeta.
• En su navegador, inicie el programa de instalación mediante ladirección URL  www.sutienda.com/install/ .

IMPORTANTE ->Después de varias actualizaciones tengo que decir que puede ocurrir que módulos que usamos en veriones antiguas no funcionen en la nuevas, por lo que es posible que haya que modificar programación ,reinstalar o reconfigurar módulos.

Sigue las instrucciones, y una vez finalice habrás conseguido instalar la nueva versión.

Podéis ver una demo de los botones css3.

Os imaginais hacer estos fantásticos botones redondeados , con degradados y sombras con este simple código:
<a href="#">Botón</a>
Pues con CSS3 es posible y en caso que el usuario no tenga soportado el navegador podrá ver el botón, aunque sea de diferentes formas. La ventaja de usar CSS3 es que practicamente no pesa por lo que cargarán rapidamente en tu página web.

/* creamos el botón */
.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}</code>
 
.bigrounded {
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
.medium {
font-size: 12px;
padding: .4em 1.5em .42em;
}
.small {
font-size: 11px;
padding: .2em 1em .275em;
}
 
/* APLICAMOS DEGRADADO COLOR NEGRO */
 
.black {
color: #d7d7d7;
border: solid 1px #333;
background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
background: -moz-linear-gradient(top,  #666,  #000);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top,  #444,  #000);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
color: #666;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top,  #000,  #444);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}

Bueno este módulo para Prestashop posiblemente sea el que más estoy usando ultimamente, puedo decir que en el 100% de todos mis proyectos, por lo que se ha convertido en un módulo imprescindible en el diseño de tiendas online bajo Prestashop.

El módulo en cuestión permite personalizar totalmente el menú superior, podremos agregar enlaces personalizados , mostrar todas las categorías y subcategorías mediante un desplegable, añadir una barra de búsqueda, el carrito, el nombre de usuario, por lo que en la parte superior dispondremos de los elementos principales de cualquier tienda online.

Próximamente os propondré un módulo exclusivo y único para Preatashop , desarrollado por nuestro equipo para nuestros usuarios, por lo que estar atentos.

DESCARGAR MÓDULO MENÚ HORIZONTAL

Debo reconocer que este truco me costo mucho trabajo descubrir,  conseguir que en las descripciones de las categorías en Prestashop salieran unas negritas, un parrafo, un enlace. Ya que si lo intentamos en la página se imprimira directamente el código HTML sin ningún estilo.

Pues bien, para solucionar este error debemos realizar lo siguiente, en el archivo “admin/tabs/adminCategories.php”

Hay que buscar el campo de textarea para añadir una clase para que capte el editor de archivos TinyMCE

<textarea class="rte" name="description_'.$language['id_lang'].'" rows="5" cols="40"&gt;'.htmlentities($this-&gt;getFieldValue($obj, 'description', intval($language['id_lang'])), ENT_COMPAT, 'UTF-8').'</textarea>

Posteriormente tenemos que buscar justo donde acaba la etiqueta del formulario y añadir el siguiente código,en caso que no se muestre el editor debéis ir a adminCMS.php y buscar este código y copiarlo .

// TinyMCE
        echo '
        < script type="text/javascript" src="'.__PS_BASE_URI__.'js/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></ script>
        < script type="text/javascript">
        function tinyMCEInit(element)
        {
            $().ready(function() {
                $(element).tinymce({
                    // Location of TinyMCE script
                    script_url : \''.__PS_BASE_URI__.'js/tinymce/jscripts/tiny_mce/tiny_mce.js\',
                    // General options
                    theme : "advanced",
                    plugins : "safari,pagebreak,style,layer,table,advimage,advlink,inlinepopups,media,searchreplace,contextmenu,paste,directionality,fullscreen",
                    // Theme options
                    theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
                    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,,|,forecolor,backcolor",
                    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,media,|,ltr,rtl,|,fullscreen",
                    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,pagebreak",
                    theme_advanced_toolbar_location : "top",
                    theme_advanced_toolbar_align : "left",
                    theme_advanced_statusbar_location : "bottom",
                    theme_advanced_resizing : false,
                    content_css : "'.__PS_BASE_URI__.'themes/'._THEME_NAME_.'/css/global.css",
                    document_base_url : "'.__PS_BASE_URI__.'",
                    width: "582",
                    height: "auto",
                    font_size_style_values : "8pt, 10pt, 12pt, 14pt, 18pt, 24pt, 36pt",
                    // Drop lists for link/image/media/template dialogs
                    template_external_list_url : "lists/template_list.js",
                    external_link_list_url : "lists/link_list.js",
                    external_image_list_url : "lists/image_list.js",
                    media_external_list_url : "lists/media_list.js",
                    elements : "nourlconvert",
                    convert_urls : false,
                    language : "'.(file_exists(_PS_ROOT_DIR_.'/js/tinymce/jscripts/tiny_mce/langs/'.$iso.'.js') ? $iso : 'en').'"
                });
            });
        }
        tinyMCEInit(\'textarea.rte\');
        </ script>
        ';
';

Con esto el editor de archivos ya se mostraría, pero si intentamos introducir estilos a los textos o añadir imágenes comprobaremos que no se puede y que cualquier texto se inserta como texto plano.

Por lo cual tendremos que ir al archivo Category.php que se encuentra en el directorio Clases, y buscaremos el siguiente código, debemos aclarar que en función de la versión que tengáis instalada este código puede variar por lo que os recomiendo lo busquéis manualmente.

 public function getTranslationsFieldsChild()
{
parent::validateFieldsLang();
return parent::getTranslationsFields(array('name', 'description', 'link_rewrite', 'meta_title', 'meta_keywords', 'meta_description'));
}

Una vez encontrado el código deberemos sustituirlo por el siguiente código, que se encargará de mostrar descripciones a todo color en HTML en las tiendas online Prestashop, está probado tanto en Prestashop 1.2.5 como en 1.3.1:

public function getTranslationsFieldsChild()
    {
        parent::validateFieldsLang();
 
        $fieldsArray = array('name', 'link_rewrite', 'meta_title', 'meta_keywords', 'meta_description');
        $fields = array();
        $languages = Language::getLanguages();
        $defaultLanguage = Configuration::get('PS_LANG_DEFAULT');
        foreach ($languages as $language)
        {
            $fields[$language['id_lang']]['id_lang'] = $language['id_lang'];
            $fields[$language['id_lang']][$this->identifier] = intval($this->id);
            $fields[$language['id_lang']]['description'] = (isset($this->description[$language['id_lang']])) ? pSQL($this->description[$language['id_lang']], true) : '';
            foreach ($fieldsArray as $field)
            {
                if (!Validate::isTableOrIdentifier($field))
                    die(Tools::displayError());
 
                /* Check fields validity */
                if (isset($this->{$field}[$language['id_lang']]) AND !empty($this->{$field}[$language['id_lang']]))
                    $fields[$language['id_lang']][$field] = pSQL($this->{$field}[$language['id_lang']]);
                elseif (in_array($field, $this->fieldsRequiredLang))
                    $fields[$language['id_lang']][$field] = pSQL($this->{$field}[$defaultLanguage]);
                else
                    $fields[$language['id_lang']][$field] = '';
            }
        }
        return $fields;
 
    }

Hasta hoy no era importante el tiempo de carga en una página web, pero ultimamente se habla mucho en la red de uno de los nuevos factores que ha incluido Google a la hora de posicionar una página web ,el tiempo de carga, si esto es cierto (que realmente pienso que sí o en breve lo será), tendremos que optimizar todas nuestras imágenes y archivos de texto, incluidos las Css.

Está claro que serán una factor importante en nuestros diseños de páginas web , aunque no decisivo, pero puede hacernos avanzar alguna posición, por lo que si estamos en la posición 11 decidirá si aparecemos en la primera página o en la segunda, como siempre estar o no estar.

Si comprimimos un archivo con GZIP conseguiremos una ahorro de carga del 80%, un archivo que pesa 80kb puede llegar a pesar 10kb, con lo que conseguiremos que nuestro servidor tenga menor carga, mayor velocidad de descarga y si nuestro servidor tiene límite de transferencia mensual también conseguiremos un buen ahorro en este concepto. Deberiamos comprimir los archivos CSS, HTML, PHP,JS…

Para poder realizar las compresiones con GZIP es imprescindible que nuestro servidor posea el módulo mod_gzip (APACHE 1.3), sino no podremos realizarlas y deberemos usar alguna herramienta gratuita como puede ser cleancss.

Una vez comprobado que tenemos GZIP activado, tan sólo tendremos que incluir en nuestro archivo .htacces el siguiente código:

 
 
      mod_gzip_on Yes
 
      mod_gzip_item_include file \.html$
 
      mod_gzip_item_include file \.php$
 
      mod_gzip_item_include file \.css$
 
      mod_gzip_item_include file \.js$
 
      mod_gzip_item_include mime ^application/javascript$
 
      mod_gzip_item_include mime ^application/x-javascript$
 
      mod_gzip_item_include mime ^text/.*
 
      mod_gzip_item_include handler ^application/x-httpd-php
 
      mod_gzip_item_exclude mime ^image/.*

Con apache 2.X el proceso se realizaría con el siguiente código:

# BEGIN GZIP
 
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
 
# END GZIP

Para comprobar en cuanto quedaría nuestra web comprimida podéis usar la siguiente herrmaienta: compresión

Y esta para comprobar si está funcionando, otra.

Dios Santo!!!!! podemos estar una semana entera creando combinaciones….Estamos de suerte porque Prestashop incluye una herramienta que genera automáticamente todas las posibles combinaciones que pueda tener un producto para diferentes atributos, incluso con variaciones de precio o peso, o imágenes independientes para cada combinación.

Para poder realizar este proceso debemos seguir los siguientes pasos:

1 – Define los grupos y atributos de producto, las características que quieres que tenga el producto, donde el grupo por ejemplo sería “TALLAS” y las tallas en sí (40,41,42,43,..), serían los atributos.

2 – Continuaremos creando el producto, rellenando los campos que necesitamos y subiendo las imágenes al servidor. Una vez creado y guardado aparecerá en la ficha del producto nuevas opciones , entre ellas hay una que se llama COMBINACIONES.

3- A partir de aquí podemos seguir dos métodos:

• Método manual: Combina los atributos o combinaciones de los productos y ves añadiendolas individualmente pulsando el boton “Añadir”. Una vez añadidas, podemos adjuntarle una imagen para cada atributo, o bien, asignarles un impacto sobre el precio o sobre el preso. En caso que queramos que haya una imagen por defecto , o en caso que haya una combinación que sea la inicial del producto debemos marcar la opción por “Por defecto”.
  Una vez realizado esto deberemos pulsar “Añadir esta combinación”.
  Ya tenemos creada nuestra primera combinación en la tiendas online!! , ahora solo tienes que repetirlo para todas las combinaciones que desées.

• Método automático: Cuando haya que generar muchas combinaciones, lo ideal es que Prestashop se encargue de todo, para ello pulsaremos en la pestaña combinaciones sobre “Generador de combinaciones de productos”.
  Una vez en la nueva pestaña, debemos seleccionar las opciones de la columna derecha y añadirlas. Una vez agregados todos las atributos del producto , tan solo tenemos que pulsar el botón “Añadir” y Prestashop creara todas las variantes posibles.

1. En vuestro panel de administración debéis abrir el fichero /vuestro-admin/tabs/AdminOrders.php
2. En la linea 23 aproximadamente dependerá de la versión tenéis que añadir el siguiente código: $this->delete = true;

Hoy os daré una serie de consejos o guia para realizar envios de newsletters correctamente a nuestros suscriptores, no entramos en como se debe diseñar un boletín, sino una serie de pautas que deberiamos seguir para que vuestras newsletter puedan visualizarse correctamente.

1. Sé directo , no distraigas la atención del lector.
Hoy en día recibimos una gran cantidad de correo electrónico de spam, por lo que tenemos que ser directos y atraer la atención del lector con  un buen encabezado y buenos titulares, no introduzcas más información de la necesaría ya que es posible que nuestro usuario la próxima vez que la reciba ni siquiera se moleste en abrirla.

2. Respeta a tus suscriptores.
Recuerda que es muy importante que los receptores de los correos electrónicos nos hayan dado su autorización para enviarles información. Y por supuesto, todas las newsletter deben incluir links para darse de baja de manera sencilla. Que un suscriptor reciba continuamente correos de una empresa que no desea o con información irrelevante , lo único que va a originar es una mala impresión o quejas de spam.

3. Código HTML sin CSS.
En este sentido nuestros boletines deben estar diseñados como haciamos antiguamente las páginas web, debemos tener en cuenta que cada suscriptor puede tener un cliente de correo diferente, con opciones diferentes, por lo que aunque nosotros lo veamos bien , otros pueden verlo mal. Bienvenidos a los años 90 , rescatemos las tablas, podemos diseñar con div, aunque generalmente deberiamos hacerlo con tablas, ya que con divs, si tenemos que hacer flotar ciertos elementos podemos encontrar dificultades y se podría interpretar diferente según el cliente de correo que estemos usando.

Muy importante usar estilos CSS en linea, no podemos vincular los estilos a hojas externas, hay una herramienta css ,o bien esta otra ,que nos puede ayudar para insertar los estilos online.

3.Incluir texto plano o sin formato.
Debemos incluir en nuestras newsletter texto sin formato o plano, ya que pueden haber clientes de correo que sean muy antiguos y no puedan leer correctamente nuestras newsletter. Vendría a ser lo mismo a escribir en un txt, en el cual no podemos seleccionar el tipo de letra, ni el tamaño, ni el color.

4. Recuerda subir las imágenes a un servidor.
Recuerda que las imagenes deber estar alojadas en un servidor para que el suscriptor pueda visualizarla. Si nos fijamos en la siguiente imagen, veremos que aparece completamente en negro, esto es debido a que el diseñador realizó la newsletter y aunque en local (en su ordenador), se visualizaba correctamente, al realizar el envio el suscriptor no ha podido visualizarla correctamente porque no tenía las imagenes. Por tanto, es muy importante que todas las imágenes incluidas en nuestras newsletters posean rutas absolutas.

Por ejemplo. <img src=”www.dominio.com/imagen.jpg” />

Debemos recordar que aunque realicemos correctamente el proceso de inclusión de imagenes en nuestros boletines, el suscriptor puede tener desactivado el código html o puede ser que no acepte la descarga de imagenes a su ordenador, por lo que seguirá visualizandose incorrectamente.

Por último le aconsejamos seguir estas pautas:

• Evite las imágenes de contenido importante, como titulares, los enlaces.
• Debería agregar un enlace a una versión web de su boletín informativo (por si el suscriptor no la visualiza correctamente).
• Intentar que los destinatarios te añadan a su libreta de direcciones o lista de correo seguro.
• Utilice el atributo alt para todas las imágenes.
• Especificar la altura y la anchura de las imágenes para asegurarse de que los marcadores de posición en blanco no descuadren el diseño.
• Recomendable usar imágenes en formato .jpg o .gif evitanto utilizar .png

5.Por último recuerde probar su boletín antes de enviarlo a sus suscriptores.
Es imprescindible que realice las pruebas necesarias para comprobar que las correos se reciben correctamente, pasan los filtros de spam y que nuestro diseño se visualiza correctamente en diferentes clientes de correo.