Parece ser que no encuentra determinados archivos al usar el comando dirname o $path, es simplemente que con ese comando no sabe guardarse correctamente las rutas…..

El Error que suele aparecer hace referencia a:
require_once httpdocs/admin/init.php)

Tendremos que abrir el archivo header.inc.php de nuestro admin y cambiar:
require_once(dirname(__FILE__).’/init.php’);

cambiar por:
require_once(getcwd().’/init.php’);

Posiblemente al cambiar esto tengamos que cambiar otra linea en Init.php si nos sigue saliendo la pantalla de error o en blanco.
if ($theme[0] != ‘.’ AND file_exists($path.$theme.’/admin.css’))
cambiar por:
if ($theme[0] != ‘.’ AND file_exists(getcwd().’/admin.css’))

Como comentábamos en artículos anteriores, apostamos por el uso de las CSS a la hora de maquetar nuestros diseños web. El uso de tablas para este propósito es algo que ha quedado desfasado totalmente y las ventajas de realizar la maquetación de nuestros diseños web mediante CSS son muchas más, además favoreciendo el código limpio y el posicionamiento de la pagina web.
El CSS es algo que va evolucionando y desde que apareció la versión 3 aportó nuevas características que nos hará más fácil el diseño web.
Con CSS3 ampliamos nuestro control sobre el diseño de las páginas web que maquetamos adquiriendo nuevas opciones que antes había que realizar mediante trucos que podían alterar el contenido de nuestro diseño y que luego podían presentar problemas según el navegador donde viéramos nuestro diseño web. Gracias a estos nuevos mecanismos que aporta CSS3 nos ahorraremos tener que realizar esos trucos que podían complicar nuestro diseño web.
También es importante destacar la velocidad que ganamos y productividad a la hora de maquetar las webs al tener estos elementos ya incluidos en la CSS.

Por citar algunas de las nuevas cualidades del CSS3, ahora disponemos de la posibilidad de usar en la maquetación de nuestros diseños web directamente elementos como esquinas redondeadas o gradientes, evitando tener que andar con estos trucos gráficos que antes comentábamos y que podían presentar problemas en el diseño de nuestras páginas web.
Por lo tanto las ventajas del CSS3 aparte del mayor control en el diseño, es que la creación de nuestras webs va a a ser más rápida, mejoraremos en el peso y en el tiempo de carga, factor que google valora para el posicionamiento de las paginas web.
Aquí van algunos ejemplos de los nuevos elementos que podemos utilizar al maquetar nuestros diseños web.

BORDES CON DEGRADADOS

Puedes obtener bordes con degradados usando: -moz-border-radius / -webkit-border property.

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

ESQUINAS REDONDEADAS O BORDES REDONDEADOS

Ahora es muy fácil implantar esquinas redondeadas o bordes sin trucos gráficos en la maquetación.

background-color: #DAE8EC;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #B8CB99;
padding: 10px;

BORDES CON IMAGEN

Ahora si quieres utilizar las imágenes para los bordes, CSS3 soporta imagen en los bordes a través de las propiedades border-image y border-corner-image.

border-image: url(border.png) 27 27 27 27 round round;

MÚLTIPLES COLUMNAS (MULTIPLE COLUMNS)

Tenemos la posibilidad también de poder colocar textos que sean muy largos en columnas pudiendo así distribuir mucho mejor el espacio .

CSS 3 Multiple Columns (Count)
#my_CSS3_id {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #c4c8cc;
}

Esto son solo algunas de las novedades que trae la nueva versión de CSS3 por destacar algunas, ya que la lista completa de novedades que podemos utilizar en nuestros diseños web es bastante larga.

En resumen vemos que las novedades solo aportan mejoras en cuanto a diseño y posicionamiento en nuestras paginas web

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}

¿Que es CSS SPRITE? Css Sprite es una técnica de maquetación de páginas web en la que se reduce la carga de imágenes en la web, no es lo mismo cargar 10 imágenes de 10kb que 1 imagen de 100kb, aunque el peso en Kb es similar, el número de peticiones es de solo una, aquí radica el potencial de la técnica css sprite.

La principales ventajas de usar esta técnica son las siguientes:

• Reducción de transferencia y recursos del servidor.
• Mayor velocidad de la página web al realizar menos peticiones Http

Esta técnica aparece en los años 80 cuando se diseñaban los juegos en 2 dimensiones, en la actualidad se usan para realizar juegos para móviles debido a que necesitan ser muy livianos. Y desde hace unos años a irrumpido en el desarrollo web.

En los videojuegos la técnica consiste en crear en una secuencia con todas las imágenes necesarias para realizar una animación, en el caso de la web consistiría en incluir el mayor número de imágenes en un solo archivo, mediante cambios css en el background conseguiremos desplazar la posición de la misma para que se muestre unicamente la parte de imagen que necesitamos.

Un ejemplo muy gráfico sería Google, si realizamos una búsqueda y nos deplazamos al pie de página , en donde figuran los resultados y está la páginación si guardamos la imagen de fondo (botón derecho del raton sobre la G de Google), podremos ver que todas las imágenes que usa Google en su web , realmente es solo una.

El código básico para comprender la forma de diseñar una página web sería la siguiente. En una lista por ejemplo primero asignaremos la imagen y le daremos el tamaño que necesitamos.
#contenedor{
background-image: url(‘imagenes/imagensprite.png’) no-repeat;
height: 16px;width:16px;
display:block;
padding-left:5px;
}
Y a cada elemento individual le aplicariamos un desplazamiento del fondo para conseguir que se muestre exactamente el trozo que necesitamos:

#contenedor lista1{background-position:0px 0px; }
#contenedor lista2{background-position:-26px 0px;}
#contenedor lista3{background-position: -43px 0px ;}
#contenedor lista4 { background-position : -68px 0px ;}
#contenedor lista5 { background-position : -94px 0px ;}

Recursos automáticos de CSS Sprites:

• Css Sprittes

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.

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.

1. Hojas de ayuda de wordpress.
2. Jquery.
3. Php Básico.
4. Photoshop.
5. Hojas de ayuda CSS.
6. Códigos de color RGB.
7. Hojas de ayuda HTML.
8. Carácteres HTML.
9. Fuentes.
10. Atajos de Flash.
11. Dreamweaver.
12. Fireworks.
13. Illustrator.
14. Indesign.
15. Mod_rewrite y HTTACCES , para hacer reescritura.

Os dejo una colección de 25 herramientas imprescindibles que cualquier diseñador deberia conocer, son todas online y nos facilitan la vida, desde el famoso lorem lipsum con el cual rellenamos nuestros páginas antes de entregarlas, hasta generadores de stripes, o herramientas para tratar imagenes, o códigos css para realizar bordes.

Podéis visualizar el contenido aquí