sábado, 25 de julio de 2015

Ejemplo de consulta cruzada SQL

Una consulta cruzada es una consulta MySQL que toma datos de varias tablas que comparten campos. Por ejemplo, la tabla ps_product contiene un campo id_product, al igual que la tabla ps_product_lang.


En la siguientes consultas intervienen varias tablas de Prestashop. Hemos tenido que hacer varias consultas parecidas para nuestros módulos personalizados de la versión 1.4, y nos encontramos actualizando estos módulos a la nueva versión (1.6), con lo que hemos de revisar estas consultas.

Para leer sobre más formas de combinar las tablas (INNER JOIN, RIGHT JOIN): https://es.wikipedia.org/wiki/Join

Os invito a probar estas consultas en vuestro PHPMyAdmin.

SELECT DISTINCT ppl.id_product AS IDPRODUCT,
ppl.name AS NAME,
pp.active AS ACTIVE,
pp.reference AS REFERENCIA,

pcl.name AS NOMBRECAT
 

FROM ps_product_lang ppl

LEFT JOIN ps_product pp ON ppl.id_product=pp.id_product
LEFT JOIN ps_category_lang pcl ON pp.id_category_default=pcl.id_category

WHERE ppl.id_lang=3 AND pcl.id_lang=3
ORDER BY pp.reference ASC



**


SELECT DISTINCT pal.name AS PALNAME,
pal.id_attribute AS PALIDATTRIBUTE,
ppac.id_product_attribute AS PPACIDPRODATTRIBUTE,
ppa.id_product AS PPAIDPROD

FROM ps_attribute_lang pal
          
LEFT JOIN ps_product_attribute_combination ppac ON pal.id_attribute=ppac.id_attribute
LEFT JOIN ps_product_attribute ppa ON ppac.id_product_attribute=ppa.id_product_attribute

WHERE pal.id_lang=1
ORDER BY ppa.id_product ASC 



**


SELECT DISTINCT pal.name AS PALNAME,
pal.id_attribute AS PALIDATTRIBUTE,
ppac.id_product_attribute AS PPACIDPRODATTRIBUTE,
ppa.id_product AS PPAIDPROD,
pa.id_attribute_group AS PAIDATTRIBGROUP
 

FROM ps_attribute_lang pal

LEFT JOIN ps_product_attribute_combination ppac ON pal.id_attribute=ppac.id_attribute 
LEFT JOIN ps_product_attribute ppa ON ppac.id_product_attribute=ppa.id_product_attribute
LEFT JOIN ps_attribute pa ON pal.id_attribute=pa.id_attribute
           

WHERE pal.id_lang=1 AND pag.id_group=4
ORDER BY ppa.id_product ASC

martes, 7 de abril de 2015

Modificar una plantilla de Prestashop 1.6

Versión 1.6
En mi anterior entrada sobre modificar una pantilla de Prestashop (1.4) expliqué lo más básico para poder conocer y editar los archivos necesarios para que nuestra tienda online adquiera el aspecto que queramos.

Me detendré en las diferencias desde aquella entrada: de Prestashop 1.4.3 a 1.6.0.6 - también abordaremos el trabajo con más conocimientos de programación y documentándonos más en foros y en el dashboard.

Primeras impresiones de la nueva versión

La instalación sigue siendo sencilla y rápida. El .rar descargado de la página oficial sigue siendo bastante liviano. Sin problemas para instalar en local.

Herramienta de personalización: Esto es una cosa que siempre faltaba en todas las versiones. Puede ser muy útil para probar distintas combinaciones de color en la plantilla antes de decidirse por una. La herramienta está un poco limitada por los pocos colores que ofrece y lo limitado de las fuentes, aunque muy bien escogidas.

Herramienta de personalización
Cambios en la plantilla del Back-Office: No hay más que ver la plantilla para intuir algunas mejoras en la organización y el diseño, con un menú lateral (que siempre he preferido al horizontal) con efecto hover desplegable para los submenús. Un apunte sobre las estadísticas: el enlace a la cuenta de Google Analytics.

Vistazo breve al Back Office, estadísticas

(Un saludo a JordiOb - http://jordiob.com/2014/02/prestashop16/)

Mejora del acceso rápido: Lo de "añadir esta página" es simplemente muy útil.



Multitienda:  Esta versión de Prestashop admite multitienda, algo que hemos de tener en cuenta en el caso en que necesitemos importar tablas bases de datos de otras versiones a la nueva versión. Algunas tablas incorporan un campo id_shop o una tabla más con el sufijo _shop para mejor gestión entre tiendas. Por ejemplo, podemos mencionar las tablas relativas a las características de productos, o features.

Y muchas otras cosas que no nos da tiempo a comentar... relativas a la nueva distribución de archivos y carpetas, a rendimiento o al SEO.

En esta ocasión trataremos de no realizar todos los cambios directamente en el archivo gobal.css, sino que haremos los cambios usando la carpeta override y/o módulos extra para cargar el nuevo estilo. Pero antes tenemos que tener una copia a salvo del tema original. Así que vamos a crear un tema personalizado de Prestashop 1.6 a partir del tema default-bootstrap que viene instalado por defecto.

Crear el tema nuevo

Desde el B.O. > Preferencias > Temas, elegimos la opción Añadir Tema de la parte superior. Esto nos permite crear un tema a partir de otro existente (haciendo scroll hacia abajo lo podremos ver), que es realmente lo que nos interesa.

Borrar la caché

Parámetros avanzados > Rendimiento.
A veces es aconsejable reiniciar un módulo que no funcione bien después de un cambio de tema o de una intalación de un tema nuevo - por ejemplo, a mi menú horizontal le fallaba el CSS después de instalar un neuvo tema personalizado, y se solucionó así.

Usar Override


(Contenido original: http://prestadb.com/prestashop-override-controllers-tutorial/)


Módulo Configurador de Temas

Este módulo viene instalado por defecto y nos ayuda a modificar las imágenes del tema. El tema incorpora unas imágenes fijas que quedan bastante bien en el diseño por defecto, pero que es muy probable que queramos cambiar o quitar. Desde el módulo Configurador de Temas podemos incluso asignar una imagen a cada idioma instalado. También tendremos una sencilla manera de agregar o quitar el banner superior, amén de otras opciones que merece la pena revisar.

Algunos tweaks y fixes

Es decir, pequeños retoques rápidos a la plantilla para modificar detalles del aspecto de la tienda. Algunos de ests retoques no están orientados al diseño de producción final, sino sólo a una vista previa provisional mientras se decide el aspecto final del tema.

Quitar pestañas "populares" y "nuevos" del módulo homefeatured

- http://www.prestashop.com/forums/topic/342514-como-eliminar-barra-nuevos-populares/

- Cambiar la línea del CSS:

#home-page-tabs {
padding: 10px 0;
margin: 0 0 0 -18px;
display: none;
}



Cambiar número de productos por fila en homefeatured

Resumen de los pasos a seguir para lograr cambiar el número de productos por fila de la página de inicio. Puede servir como pequeña guía para lograr el msimo efecto en otras páginas de productos - como categorías o productos más vistos.

1 - Crear un estilo css como el que sigue:

.col-md-23 {
     width: 20%;
}


Un 20% nos permitirá mostrar 5 productos por fila. Lo insertamos entre .col-md-2 y .col-md-3
Para mostrar 4 productos por fila en categorías, no necesitamos más CSS del que ya está especificado en la plantilla.

2- Editar product-list.tpl

{if $page_name !='index' && $page_name !='product'}
{assign var='nbItemsPerLine' value=4}
{assign var='nbItemsPerLineTablet' value=2}
{assign var='nbItemsPerLineMobile' value=3}
{else}
{assign var='nbItemsPerLine' value=5}
{assign var='nbItemsPerLineTablet' value=3}
{assign var='nbItemsPerLineMobile' value=2}
{/if}


3- Cambio del tamaño de las imágenes

En Preferencias > Imágenes cambiamos el tamaño de las imágenes home_default de 250 x 250 a 200 x 250. Regeneramos las miniaturas correspondientes en la misma sección.

4- Uso de la clase css que hemos creado (en product-list.tpl)

Original:

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-4{/if}

Modificado:

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-10 col-sm-4 col-md-23{else} col-xs-12 col-sm-4 col-md-3{/if}

5- Notas relativas al sistema grid:

Prestashop 1.6 usa un sistema de rejills (grid) en la que el ancho máximo es de 12 columnas. Las clases para index.php son

col-xs-12 col-sm-4 col-md-3

Esto significa

col-sm-4 para tablets (= 3 columnas) => 3x4=12
col-md-3 para PC (= 4 columnas) => 4x3=12

Es necesario cambiar las clases para obtener un número de columnas distinto, o bien crear clases nuevas.

Fuente: https://www.prestashop.com/forums/topic/316622-how-to-add-more-columns-to-product-list-on-ps-16/

martes, 24 de marzo de 2015

SEO Prestashop - metaetiquetas de idiomas - hreflang

Esta modificación genera unas metaetiquetas en la sección head de cada página de nuestra tienda online Prestashop. Testado en la versión 1.4.


Hemos encontrado que se indexan páginas de otros idiomas en los buscadores, para evitar esto hacemos uso de las etiquetas hreflang, que ayudan a los buscadores a organizar nuestra información traducida y dirigida a determinadso idiomas/regiones. En nuestro ejemplo usamos una versión simplificada de estas etiquetas, ya que sólo nos interesa gerenar metaetiquetas para los visitantes según su idioma.

Así, para una página en 3 idiomas, tenemos tres URL para la misma página:
  • www.mipaginaweb.com/es/el-contenido
  • www.mipaginaweb.com/en/the-content
  • www.mipaginaweb.com/fr/le-content
Por lo que las etiquetas se podrían mostrar de la siguiente manera:
  • <link href="http://www.mipaginaweb.com/en/" hreflang="en" rel="alternate">
  • <link href="http://www.mipaginaweb.com/fr/" hreflang="fr" rel="alternate">
  • <link href="http://www.mipaginaweb.com/es/" hreflang="es" rel="alternate">
Mediante MySQL, hacemos una consulta a la base de datos para mostrar las URL alternativas de cada página de nuestro sitio. Incluimos esta consulta en la cabecera de nuestro sitio, dentro de la sección head. Concretamente, en Prestashop debemos modificar el archivo header.tpl.

Añadir código PHP con MySQL a nuestro header.tpl es la forma más sencilla de implementar este cambio. Para una modificación más avanzada se recomienda hacer uso del override (de cara a futuras actualizaciones), o incluso crear una función en las clases de Prestashop (/classes/Meta.php) para que al mostrar las metaetiquetas de las descripciones o las palabras clave se mustren también los hreflang.

lunes, 23 de marzo de 2015

Colaboración con www.psicologoelpuerto.com - Psicología y Neurofeedback

Los líderes de grupo sincronizan su actividad cerebral con sus seguidores durante la comunicación

Los grandes líderes son a menudo buenos comunicadores. En el proceso de la comunicación, las relaciones entre líderes y sus seguidores se desarrollan espontáneamente, según una nueva investigación del Instituto Max Planck para el Conocimiento Humano y las Ciencias Cerebrales (...). Cuando un miembro se convierte en un líder de grupo su actividad cerebral en la conjunción tempo-parietal, conocida como el estado mental que representa a otras personas, empieza a sincronizarse con las de sus seguidores. Basado en una sincronización interpersonal neuronal, los investigadores fueron incluso capaces de predecir quién podría emerger como líder de grupo, y cuándo. Los descubrimientos sugierén también que la sincronización interpersonal neuronal es más debido a las habilidades de comunicación del líder y menos debido a cuánto hablan. Así, en un grupo de iguales, el individuo que dice lo correcto en el momento adecuado usualmente emerge como el líder.

(...)

***

Texto original:

Leaders of a group synchronize their brain activity with that of their followers during communication

Great leaders are often good communicators. In the process of communication, the relationship between leaders and their followers develops spontaneously according to new research from the Max Planck Institute for Human Cognitive and Brain Sciences in Leipzig and the State Key Laboratory of Cognitive Neuroscience and Learning and IDG/McGovern Institute for Brain Research in Beijing. When a member becomes the group leader, the leader's brain activity in the left temporo-parietal junction, known as representing others' mental states, begins to synchronize with that in the same area of their followers. Based on interpersonal neural synchronization, the researchers were even able to predict who would emerge as leader of a group, and when. The findings also suggest that interpersonal neural synchronization is more likely due to the communication skills of the leader and less likely due to how much they speak. Thus, in a group of peers, the individual who says the right things at the right time usually emerges as the leader.


Texto completo y fuente:

http://medicalxpress.com/news/2015-03-leaders-group-synchronize-brain.html

jueves, 5 de marzo de 2015

Comando Send, Google Chrome, OCR. Autoit

Comando Send de Autoit *

- Para enviar un valor ASCII (Cuando se usan 2 dígitos de código ASCII deben ir precedidos de un 0, de otro modo es usado la página de código obsoleta 437).
Send("{ASC 065}")

- Para enviar caracteres UNICODE
Send("{ASC 2709}")

- Teclas repetidas
Send("{DEL 4}") ;se presiona la tecla DEL 4 veces
Send("{S 30}") ;se envían 30 caracteres 'S'
Send("+{TAB 4}");se presiona SHIFT+TAB 4 veces

- Mantener una tecla presionada
Send("{a down}"); tecla A pulsada
Send("{a up}"); tecla A soltada

- También pueden usarse variables
$n = 4
Send("+{TAB " & $n & "}")

- Muchos teclados netbook y portátiles tienen una tecla especial Fn. Esta tecla no puede ser simulada.

- Ejemplo de navegación por carpetas con Send:
Send("{TAB}") Navega hacia el próximo control (boton, checkbox, etc)
Send("+{TAB}") Navega al control anterior
Send("^{TAB}") Naveha hacia la próxima pestaña de la ventana (en ventanas de pestañas)
Send("^+{TAB}") Navega hacia la pestaña anterior
Send("{SPACE}") Puede ser usado para marcar un checkbox o hacer click en un botón
Send("{+}") Usualmente marca un checkbox (si es un checkbox "real")
Send("{-}") Usualmente desmarca un checkbox
Send("{NumPadMult}") Recursivamente expande las carpetas en un árbol de tipo SysTreeView32

- Use combinaciones Alt-tecla para acceder a los item en un menú. También, abra Notepad y pruebe lo siguiente:
Send("!f") Envía Alt+f, tecla de acceso para el menú Archivo de Notepad. Pruebe otras teclas!

Send("{DOWN}") Moverse hacia abajo en un menú
Send("{UP}") Moverse hacia arriba en un menú
Send("{LEFT}") Moverse hacia la izquierda a un nuevo menú o expandir un submenú
Send("{RIGHT}") Moverse hacia la derecha a un nuevo menú o contraer un submenú

Ver la Ayuda de Windows--presione Win+F1--para una completa lista de métodos abreviados por teclado para saber usar Alt+F4, PrintScreen, Ctrl+C, y otros.


Lista de comandos para Send (flag = 0)

{!} !
{#} #
{+} +
{^} ^
{{} {
{}} }
{SPACE} SPACE (espacio)
{ENTER} ENTER key on the main keyboard (enter del teclado principal)
{ALT} ALT
{BACKSPACE} or {BS} BACKSPACE
{DELETE} or {DEL} DELETE (suprimir)
{UP} Up arrow (cursos arriba)
{DOWN} Down arrow (cursos abajo)
{LEFT} Left arrow (cursor izquierda)
{RIGHT} Right arrow (cursor derecha)
{HOME} HOME (inicio)
{END} END (fin)
{ESCAPE} or {ESC} ESCAPE (escape)
{INSERT} or {INS} INS (insertar)
{PGUP} PGUP (página arriba)
{PGDN} PGDN (página abajo)
{F1} - {F12} Function keys (teclas de funciones)
{TAB} TAB (tabular)
{PRINTSCREEN} PRINTSCR
{LWIN} Left Windows key (tecla windows izquierda)
{RWIN} Right Windows key (tecla windows derecha)
{NUMLOCK} NUMLOCK (tecla activar teclado)
{CTRLBREAK} Ctrl+Break
{PAUSE} PAUSE (pausa)
{CAPSLOCK} CAPSLOCK (mayúscula)
{NUMPAD0} - {NUMPAD9} Numpad digits (dígitos del teclado numérico)
{NUMPADMULT} Numpad Multiply (multiplicar del teclado numérico)
{NUMPADADD} Numpad Add (adicionar del teclado numérico)
{NUMPADSUB} Numpad Subtract (sustraer del teclado numérico)
{NUMPADDIV} Numpad Divide (dividor del teclado numñerico)
{NUMPADDOT} Numpad period (punto del teclado numérico)
{NUMPADENTER} Enter key on the numpad (tecla enter del teclado numérico)
{APPSKEY} Windows App key
{LALT} Left ALT key (tecla Alt izquierda)
{RALT} Right ALT key (tecla Alt derecha)
{LCTRL} Left CTRL key (tecla Control izquierda)
{RCTRL} Right CTRL key (tecla Control derecha)
{LSHIFT} Left Shift key (tecla Shift izquierda)
{RSHIFT} Right Shift key (tecla Shift derecha)
{SLEEP} Computer SLEEP key (tecla Suspender )
{ALTDOWN} La tecla ALT key down until e ue ue ue ue ue ue ue ue ue {ALTUP} is sent
{SHIFTDOWN} La tecla SHIFT es presionada hasta que {SHIFTUP} es enviado
{CTRLDOWN} La tecla CTRL es presionada hasta que {CTRLUP} es enviado
{LWINDOWN} La tecla izquierda de Windows es presionada hasta que {LWINUP} es enviado
{RWINDOWN} La tecla derecha de Windows es presionada hasta que {RWINUP} es enviado
{ASC nnnn} Envía combinaciones de teclas ALT+nnnn

{BROWSER_BACK} Sólo en 2000/XP: Seleccionar el botón "Atras" del navegador
{BROWSER_FORWARD} Sólo en 2000/XP: Seleccionar el botón "Previo" del navegador
{BROWSER_REFRESH} Sólo en 2000/XP: Seleccionar el botón "Actualizar" del navegador
{BROWSER_STOP} Sólo en 2000/XP: Seleccionar el botón "Detener" del navegador
{BROWSER_SEARCH} Sólo en 2000/XP: Seleccionar el botón "búsqueda " del navegador
{BROWSER_FAVORITES} Sólo en 2000/XP: Seleccionar el botón "Favoritos" del navegador
{BROWSER_HOME} Sólo en 2000/XP: Inicia el navegador y carga la página de inicio
{VOLUME_MUTE} Sólo en 2000/XP: Fija el volumen a cero
{VOLUME_DOWN} Sólo en 2000/XP: Reduce el volumen
{VOLUME_UP} Sólo en 2000/XP: Incrementa el columen
{MEDIA_NEXT} Sólo en 2000/XP: Selecciona "próxima pista" en el media player
{MEDIA_PREV} Sólo en 2000/XP: Selecciona "previa pista" en el media player
{MEDIA_STOP} Sólo en 2000/XP: Detiene el media player
{MEDIA_PLAY_PAUSE} Sólo en 2000/XP: Reproduce/pausa el media player
{LAUNCH_MAIL} Sólo en 2000/XP: Inicia la aplicación de email
{LAUNCH_MEDIA} Sólo en 2000/XP: Inicia el media player
{LAUNCH_APP1} Sólo en 2000/XP: Inicia la aplicación1 de usuario
{LAUNCH_APP2} Sólo en 2000/XP: Inicia la aplicación2 de usuario

*Fuente: https://foro.udtools.net/showthread.php?9473-Referencia-r%E1pida-para-comandos-Send(-quot-keys-quot-flag-)-Ctrl-!-Alt-Sh7

UDF Google Chrome - Autoit *

Descargar:
https://docs.google.com/file/d/0B_6JmwNIIZ06enotRTVFNVdKOXM/edit
AutoIT for Google Chrome.crx
Es una extensión de Chrome. Se puede instalar por medio de drag & drop en la sección de extensiones del navegador. Hay que permitirle el acceso ala rchivos (opción visible desde chrome al instalarlo).

Descargar y ejecutar:
https://docs.google.com/file/d/0B_6JmwNIIZ06eDgxaVJPNUNxa28/edit?usp=sharing

Meter el archivo chrome.aue3 en la carpeta include de AutoIT (C:\Program Files\AutoIt3\Include),
se descarga del msimo post: http://www.autoitscript.com/forum/topic/154439-chrome-udf/

Y cerrar el Chrome. (¿Y cómo desinstalar?...)

*Fuente: http://www.autoitscript.com/forum/topic/154439-chrome-udf/

OCR con Autoit gracias al open source; Tesseract *

Disponible en Google: https://code.google.com/p/tesseract-ocr/

*Fuente: http://www.autoitscript.com/forum/topic/154439-chrome-udf/

martes, 17 de febrero de 2015

Correos Express - Integración con Prestashop

Para la integración de nuestra tienda online con la empresa de transportes Correos Express, hemos elaborado un módulo que genera un documento compatible con su software, una plataforma llamada AlerEti. Este documento debe cumplir las especificaciones que el transportista indica a la hora de hacer la integración, como el número de campos y la longitud y caracteres permitidos en los mismos.


Para ello hemos elaborado un módulo en Prestashop que permite generar este fichero (en formato CSV) relleno con los datos de los pedidos que le indiquemos.

Algunas normas sobre el fichero a generar:

  • El fichero debe ser un CSV separado por espacios, aunque se permite elegir el carácter separador (usaremos el delimitado por punto y coma).
  • Pueden fijarse campos que siempre tengan el mismo valor en la plataforma.
  • El nombre del fichero y la ruta no pueden contener espacios.
  • Otras especificaciones indicadas por la empresa de transportes, específicas de los servicios prestados a cada empresa.
  • Si la dirección del destinatario excede los caracteres que el campo requiere (40), hay un campo "observaciones" que se puede utilizar para completar la dirección.

Si estás interesado/a en el módulo y necesitas ayuda, ponte en contacto y veremos cómo podemos ayudarte.
Para comprar el módulo es necesario realizar un donativo para la causa de este blog: formar al visitante en la programación, diseño web y comercio electrónico. Indiquen su correo electrónico para el envío del módulo.

domingo, 14 de septiembre de 2014

Imágenes en la web

A la hora de utilizar imágenes en el diseño de una página web, es necesario tener en cuenta varios factores que permitan su apropiada visibilidad y consumo de recursos.

  • Tamaño (ancho x alto).
  • Proporciones (ancho : alto).
  • Puntos por pulgada (se aconsejan 72 ppp para visualizar en pantalla).
  • Modo de color (RGB 8 bits).
  • Formato de archivo, que identificamos por la extensión: jpg, gif, png. Derivado de esto, tener en cuenta los canales alfa, si las hubiera (hay formatos que no admiten).
  • Tener en cuenta el formato del archivo según los distintos navegadores con los que testear el diseño y la usabilidad de la página.
  • Alineación con el texto.
  • Atributo HTML alt.
  • Atributo HTML title.
  • Especificación del tamaño real de la imagen en clase o identificador CSS para optimizar la carga de la página.
  • Ajuste de calidad de la imagen para minimizar espacio en disco.  Si se han tenido en cuenta las reglas anteriores, esta quizá está de más.