• Cargar el CSS mínimo visible.
• Mantener el mínimo número de ficheros CSS posibles.
• Cargar los js bloqueantes al final del body.
• Minificar el CSS.
• Minificar el JS.
• Habilitar la compresión de tu sitio web con GZIP.
• Optimizar imágenes.

Estas y otras técnicas más nos las facilita la herramienta PageSpeed Insight de Google, sin embargo, como ocurre con las imágenes conocer la solución puede ser en ocasiones demasiado complicado.

¿CÓMO OPTIMIZAR IMaGENES DE un SITIO WEB?

Lo primero que debemos tener en cuenta a la hora de mostrar imágenes en nuestro sitio web es que la resolución de las mismas no sea superior al área que van a ocupar. Esto es obvio aunque puede no serlo tanto si además queremos optimizar nuestras imágenes para visualizarse correctamente en las pantallas retina.

¿cómo optimizar imagenes para las pantallas retina?

A modo general podemos decir que las pantallas Retina Display son aquellas que tienen alta definición gracias a que duplican la cantidad de píxeles en pantalla.

Esto nos afectará directamente a la hora de diseñar nuestro sitio web y a la hora de tratar las imágenes que mostraremos en el mismo. Sin embargo con el siguiente truco tus imágenes se verán también tanto en pantallas normales con el pantallas Retina Display.

El truco:

Para mantener la calidad en las imágenes que se visualizan en nuestro sitio web guardaremos las imágenes al doble de resolución de que se van a mostrar y al 50% de calidad. Recuerda añadir el  tamaño correcto en tu etiqueta

optimizar imagenes con optimizilla

Optimizilla es una herramienta muy sencilla de utilizar que nos permitirá una compresión óptima de nuestras imágenes. Por tanto, teniendo en cuenta lo que comentamos en el punto anterior, deberemos subir las imágenes a esta herramienta al doble de tamaño del que pretendamos mostrar en nuestro sitio web y ajustar la calidad al 50%.

Una vez hecho esto podremos guardarlas en nuestro PC listo para ser subidas a nuestro sitio web.

The post Optimizar imagenes: aumenta la velocidad de carga de tu web appeared first on Blog Developando.

Getkee es una empresa de Madrid que se encarga de la gestión 2.0 de inmuebles. Entre los servicios que nos ofrece esta empresa destaca:

• Alquiler de viviendas, oficinas y locales [Getkee alquileres]
• Venta de viviendas, oficinas y locales[Getkee venta]
• Diseño de interiores Low-Cost [Getkee diseño]

En su web podrás ver los últimos pisos de Madrid que están esperando un inquilino o un propiertario. Tambien dispone de un blog en que irán publicando noticias y consejos que serán de utilidad tanto para propietarios, como para los inquilinos. Cualquiera que quiera vender o alquilar su vivienda debería contactar con Getkee y pedirles asesoramiento.

Accede a Getkee:

Web Getkee

Desde Developando agradecemos la confianza de Getkee, y les deseamos un gran éxito.

The post Nuevo trabajo, Getkee gestión de inmuebles appeared first on Blog Developando.

Para realizar esta “página en construccion” en WordPress vamos a utilizar el plugin WP Maintenance Mode. Con este plugin crearemos una página que será la única a la que podrán acceder nuestros visitantes mientras el “modo mantenimiento” esté activado.

Lo primero que hay que hacer es instalar el plugin. Para ello iremos a la opción ‘Plugins->Añadir nuevo’ del escritorio de administración de Worpress. Una vez ahí deberemos buscar el plugin “WP Maintenance Mode” y haremos clic en “Instalar ahora”:

WordPress modo mantenimiento

Tras el instalar el plugin debemos activarlo. Al activarlo no estaremos en “modo mantenimiento” todavía. Para ello hay que configurar una opción dentro de los ajustes del plugin.

Configuración plugin modo mantenimiento

Tras activar el plugin vamos a ver las diferentes configuraciones que se pueden aplicar. En la siguiente imagen se muestran todos los ajustes del plugin:

WordPress ajustes modo mantenimiento

A continuación vamos a explicar los ajustes que se pueden configurar:

• ‘Plugin activado‘: aquí es donde se indica si nuestro Worpress está en modo mantenimiento o no. Si esta opción está configurada como “Activado” entonces los visitantes únicamente podrán ver la página de mantenimiento que hemos creado. Si está “Desactivado” nuestro sitio será accesible a todo el mundo. Cuando se desee cambiar este estado es importante acordarse de hacer clic en el botón “Actualizar”.
• ‘Cuenta atrás‘: para que en la página de mantenimiento aparezca una cuenta atrás donde se indique el tiempo que falta para que el sitio web sea publicado de nuevo.
• ‘Enlace‘: añade un enlace a la web del autor del plugin en nuestra página de mantenimiento.
• ‘Enlace a Administración‘: para añadir un enlace al escritorio de administración de WordPress.
• ‘CSS Style‘: que estilo queremos configurar para la página de mantenimiento. El plugin tiene definidas diferentes plantillas, o si lo preferimos podemos utilizar nuestros propios estilos. En este enlace podrás ver las diferentes plantillas que tiene configurado el plugin.
• ‘Own CSS Style URL‘: si queremos utilizar nuestros propios estilos deberemos indicar aquí la URL del fichero CSS donde estén definidos.
• ‘noindex, nofollow‘: activarlo para que la página NO sea indexada por los buscadores.
• ‘Título‘: título de la página de mantenimiento.
• Si hemos seleccionado alguno de las plantillas que acompañan al plugin, deberemos rellenar los textos que se mostrarán en ellas con los siguientes campos:
  • ‘Cabecera‘: texto que aparecerá en la cabecera de la plantilla.
  • ‘Encabezamiento‘: encabezamiento de la plantilla.
  • ‘Texto‘: contenido con el que se rellenará la plantilla.
• ‘Texto‘: si hemos escogido utilizar nuestros propios estilos, en este campo deberemos añadir el contenido HTML que tendrá nuestra página de mantenimiento.
• ‘Bypass for Search Bots‘: permitir a los buscadores acceder a nuestro sitio aunque tengamos  el modo mantenimiento activado para que puedan indexar nuestros contenidos.
• ‘Backend rol‘: indicar el rol que deben tener los usuarios para que puedan acceder al escritorio de administración de WordPress. El resto de usuarios no podrá acceder.
• ‘Frontend rol‘: rol que deben tener los visitantes para poder acceder a todos los contenidos y vistas de nuestro sitio web. El que no tenga este rol únicamente verá la página de mantenimiento que hemos creado.
• ‘Redirección‘: página a la que debemos redirigir a los usuarios tras el login.
• ‘Avisos‘: permite activar un aviso en el escritorio de administración indicando que está activado el modo de mantenimiento:
  

  WordPress aviso modo mantenimiento activado

Tras configuarar todos estos parámetros, y activar el modo mantenimiento, todos los visitantes que no tengan el rol que hemos configurado únicamente podrán ver la página de mantenimiento recién creada.

Recordad que si están logado como administrador y accedes al sitio web, verás la página con todas sus vistas activas. Si accedes desde otro navegador, o cierras sesión, si podrás ver la página de mantenimiento que has creado.

The post WordPress, modo mantenimiento y página en construcción appeared first on Blog Developando.

Hoy os presentamos Quark que se integra dentro de los conocidos como “Worpress Starter Theme”, estos frameworks nos permiten crear nuestros propios theme de una manera sencilla y rápida.

temas worpress fáciles con quark

Quark está basado en Underscores (_s) y en el tema TwentyTwelve esto hace que sea muy flexible y muy fácil de personalizar. Básicamente el creador (Anthony Hortin) después de migrar al formato de rejilla de 12 columnas añadió las características que usaba para los themes que desarrollaba para sus clientes. Teniendo una base sólida como es _s le permitió crear su propia plantilla base para arrancar cualquier proyecto. Ahí nace Quark.

Características de quark

• Por supuesto es Responsive por defecto.
• Rejilla de 12 columnas. El tamaño de las mismas se establece mediante porcentajes teniendo un max-width por defecto de 1200 píxeles.
• Tamaño de fuentes con em. 
• Incorpora Normalize.js (v.2.1.3) y Modernizr (v.2.7.1) para ofrecer las capacidades de HTML5 y CSS3 de una manera más consistente en todos los navegadores.
• Incluye el plugin Options Framework que nos permitirá gestionar las características de nuestro theme de una manera sencilla.
• Incluye 300 iconos font-face compatibles con pantallas retina creados por Font Awasome. Estos iconos son muy fácilmente escalables y editables vía CSS.
• Emplea box-sizing:border-box para darle un diseño más natural además de incorporar algunas características de diseño propias de HTML5 Boilerplate.
• Gran cantidad de breakpoints media queries para adaptar el diseño que creemos a la gran variedad de dispositivos móviles y tamaños de los mismos.
• Implementar la característica de menú desplegable tan solo tendremos que descomentar dos líneas del fichero functions.php (esta característica se activa yendo a la línea 403 del fichero donde encontraréis las líneas y el comentario indicativo)
• Implementa el editor WYSIWYG TinyMCE Editor para la creación de páginas y posts.
• Shortcodes activados por defecto.
• Incluye Menu WP Nav para permitir extender el estilo para los menús con múltiples niveles hijo.
• Se incluye tanto Custom Background como Custom Header para facilitar el mantenimiento de estilos básico desde el panel de control.
• En la pantalla de perfil de usuario encontramos las extensiones para conectar con nuestras cuentas de Twitter, Facebook y Google+.
• Plantillas de página y de post. Incluye un amplio abanico de posibilidades para que la creación de páginas y de entradas sea más sencilla y rápida.

instalando quark

Para poder instalarlo puedes obtener el instalable directamente del directorio de themes de wordpress aquí y subirlo desde el menú de Apariencia > Temas como cualquier otro theme. Es compatible con la última versión de WordPress.

resumen

Como hemos visto Quark se nos presenta como una herramienta potente para crear nuestros themes de worpress propios. Su característica fundamental está descrita en la introducción y es que su creador ha llegado hasta aquí gracias a trabajar en la creacios de temas para wordpress lo que le ha llevado a crear esta herramienta para ahorrar tiempo en el arranque de un nuevo trabajo y poder dedicarse al 100% a la edición del tema.

La semana próxima profundizaremos un poco más en la configuración de Quark.

The post Crear un theme para WordPress fácilmente con Quark appeared first on Blog Developando.

¿Qué es UNDERSCORES O _S?

Underscores es una creación de la gente de Automattic para proporcionar un framework a partir del cual construir Theme de WordPress. Para ello han creado un sitio web (underscores.me) desde el que poder descargar el framework listo para iniciar nuestro trabajo con él.

Sus características son las siguientes:

• Una hoja de estilos mínima con lo básico en style.css.
• Una template para el  encabezado personalizado en inc/custom-header.php.
• Plantillas de etiquetas personalizadas en inc/template-tags.php para evitar código duplicado.
• Un script en js/navigation.js que hace que tu menú pase a ser un menú desplegable como el habitual de Bootstrap para pantallas de smartphones o tablets, extensible con tu CSS.
• 2 CCS de ejemplo con sidebar a cada lado del contenido principal. 
• Preparado para la traducción.
• Licencia publicada bajo GPLv2 (econtrarás información sobre esta licencia aquí).

Puedes encontrar más información en su web o bien en su sitio de github.

 ¿Qué es bootstrap 3?

Bootstrap es un framework para la maquetación de la vista de una web. Fue creado por el equipo de Twitter y liberado para el uso y disfrute de todos los mortales.

Está enfocado al diseño responsive y en su última versión está orientada hacia el diseño mobile first, en el enlace encontraréis más información sobre esta filosofía de diseño.

MANOS A LA OBRA

Lo primero que haremos será descargar el framework _s desde el sitio de underscores rellenando un nombre para nuestro nuevo theme, por ejemplo, lumenhaus que es un cliente nuestro ;).

Descomprime el contenido descargando en RUTA-WORPRESS/wp-content/themes.

A continuación descargamos Bootstrap 3 desde su sitio web

Descomprime el contenido en la ruta que desees y entra en la carpeta con el contenido de Bootstrap. Dentro de la carpeta /dist encontrarás las carpetas /css, /fonts y /js

A continuación deberás copiar estas carpetas a RUTA-WORPRESS/wp-content/themes/lumenhaus

Ahora abre el fichero functions.php que se encuentra en ese mismo directorio y modifica la función lumenhaus_scripts(), recuerda sustituir lumenhaus por el nombre que le hayas dado a tu template. Deberás añadir estas tres líneas al final de la función:

wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array( ), false, 'all' ); wp_enqueue_script('jquery'); wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.js', array( ), false, 'all' );

A continuación descargamos desde aquí la barra de navegación que implementa los estilos de Bootstrap 3 https://github.com/twittem/wp-bootstrap-navwalker y copiamos el archivo wp_bootstrap_navwalker.php a nuestro directorio RUTA-WORPRESS/wp-content/themes/lumenhaus

Ahora añadimos la dependencia en nuestro fichero functions.php para lo cuál añadimos la siguiente línea en la parte superior:

require_once('wp_bootstrap_navwalker.php');

Para finalizar debemos dirigirnos al fichero header.php para añadir el código HTML siguiente de tal forma que el código nos quede de la siguiente manera:

Si ahora accedes a tu Worpress ya tendrás la barra de navegación y los estilos de Bootstrap 3. Ahora el resto queda modificarlo echándole imaginación.

The post Integrar Underscores y Bootstrap 3 appeared first on Blog Developando.

Gracias a HTML5 y a sus nuevos ‘Input types’ o ‘tipos de entrada’ facilitaremos a los usuarios la tarea de rellenar dichos campos.

¿Qué ventajas tiene utilizar tipos de entrada?

Cuando se define un tipo de entrada para un campo, cuando el usuario vaya a introducir los datos en él, su terminal le mostrará en pantalla el teclado con las teclas que le faciliten la entrada de datos. Por ejemplo, si queremos escribir una dirección de correo, sería de utilidad que en el teclado ya apereciese por defecto el carácter ‘@’ y ‘.com’ ya que son carácteres comunes en toda cuenta de correo.

Listado de tipos de entrada definidos en HTML5

A continuación mostraremos capturas de pantallas de un terminal Android con los diferentes teclados. Como iréis viendo algunos tienen un color distinto. Esto es debido a que no todos los tipos de entrada de datos son compatibles con todos los navegadores. Para ver las compatibilidades consultar la tabla que añadimos al final del tutorial.

Número

Este código creará un campo de entrada de datos que sólo permitirá introducir números:

Edad: <input type="number" name="edad" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir su edad:

Tipo de entrada – Número

Email

Para crear un campo de entrada para dirección de correo se debe añadir la siguiente línea:

Correo electónico: <input type="email" name="email" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir la dirección de correo:

Tipo de entrada – Email

Teléfono

Para crear un campo donde solicitar un teléfono se debe añadir la siguiente línea:

Correo electónico: <input type="tel" name="telefono" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir un número de teléfono:

Tipo de entrada – Teléfono

Búsqueda

Para crear un campo de búsqueda se debe añadir la siguiente línea:

Buscar: <input type="search" name="buscador" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir los datos a buscar:

Tipo de entrada – Búsqueda

URL

Para crear un campo donde solicitar una URL se debe añadir la siguiente línea:

Correo electónico: <input type="url" name="web" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir los datos a buscar:

Tipo de entrada – Url

Fecha

Para crear un campo donde solicitar una fecha se debe añadir la siguiente línea:

Correo electónico: <input type="date" name="fecha" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir la fecha:

Tipo de entrada – Fecha

Hora

Para crear un campo donde solicitar una hora se debe añadir la siguiente línea:

Correo electónico: <input type="time" name="hora" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir la hora:

Tipo de entrada – Hora

Mes

Para crear un campo donde solicitar un mes se debe añadir la siguiente línea:

Correo electónico: <input type="month" name="mes" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir el mes:

Tipo de entrada – Mes

Semana

Para crear un campo donde solicitar una semana se debe añadir la siguiente línea:

Correo electónico: <input type="week" name="semana" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir la semana:

Tipo de entrada – Semana

Rango numérico

Crea un selector de número comprendido entre cierto rango, para ello utlizar esta línea:

Puntuación[0-10]: <input type="range" name="puntuación" min="1" max="10" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el selector que le aparezca para elegir la puntuación entre 0 y 10:

Tipo de entrada – Range

Color

Para crear un campo donde solicitar un color se debe añadir la siguiente línea:

Color favorito: <input type="color" name="color" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para seleccionar el color. Las imagenes a continuación muestran el selector de color para dos navegadores diferentes:

Tipo de entrada – Color

Tipo de entrada – Color

Ejemplo de un formulario completo

Edad:

Correo electónico:

Buscar:

Página web:

Teléfono:

Fecha:

Hora:

Mes:

Semana:

Puntuación[0-10]:

Color favorito:

The post HTML5 Input type touch friendly, nuevos campos de entrada con sus diferentes teclados appeared first on Blog Developando.

Parece algo trivial, pero os aseguramos que la repercusión que tendrán los colores escogidos en tus visitantes y clientes es algo muy importante y que deberás tener en cuenta al desarrollar tu sitio web.

Accede a esta publicación y coméntanos si algún día has tenido problemas, o inquietudes sobre qué colores serían los apropiados para tu sitio web.

The post Diseño web para Emprendedores: ¿Cómo elegir la paleta de colores para mi web? appeared first on Blog Developando.

1. Descargar GIMP
2. Abrir la imagen con GIMP
3. Hacer click con el botón derecho sobre la imagen y pulsar en: Capa > Transparencia > Añadir canal Alfa
4. Hacer click con el botón derecho sobre la imagen y pulsar: Seleccionar > Por Color
5. Hacer click en el fondo de la imagen.
6. Pulsar Suprimir.
7. Guardar la nueva imagen

The post Eliminar el fondo de una imagen con gimp appeared first on Blog Developando.

El ‘grid’ de Metro

La rejilla se compone de unidades y sub-unidades. La unidad básica de medición es la unidad. Una unidad equivale a 20 × 20 píxeles. Cada unidad se divide en sub-unidades de 5 × 5 píxeles. Hay 16 sub-unidades por unidad de superficie. La imagen siguiente muestra la red en la esquina superior izquierda de la pantalla. La imagen se amplía para mostrar píxeles, sub-unidades, y las unidades.

Unidades de la rejilla del estilo Metro de Windows 8

Encabezado de página

La línea de base de la cabecera de la página debe ser de 5 unidades, o 100 píxeles desde la parte superior. El margen izquierdo de la cabecera de la página es de 6 unidades, o 120 píxeles.

Cabecera estilo Metro

Área de contenido

El área de contenido tiene un margen superior de 7 unidades, o 140 píxeles. El margen izquierdo es de 6 unidades, o 120 píxeles. El margen inferior es flexible. Para paneo horizontal de contenido, debe ser no más de 6,5 unidades (130 píxeles), y no menos de 2,5 unidades (50 píxeles). Para el alineamiento vertical de contenidos, los márgenes superior e izquierdo son los mismos. No hay margen inferior especificado por el desplazamiento del contenido de la pantalla.

Área de Contenido

  ESPACIADO horizontal

El espaciado horizontal entre los elementos de contenido varía en función de los bloques. Bloques de información como imágenes tienen 2 subunidades, o 10 píxeles, de relleno entre el ’tile’ y el texto que lo acompaña. Las listas tienen 2 unidades o 40 píxeles de relleno entre las columnas. 

Espaciado horizontal entre componentes

Espaciado vertical

El espaciado vertical entre los bloques de contenido depende del tipo de contenido como en el caso del espaciado horizontal. Así bloques de color y listas de texto tienen 1 unidad, o 20 píxeles de espaciado vertical entre ellos. Cuando se trate de elementos similares de alto peso, como dos bloques de color tendrán 2 subunidades, o 10 píxeles, de espaciado entre fila y fila.

Espaciado vertical de elementos

Espaciado horizontal entre grupos

El espaciado entre grupos será de 4 unidades, o 80 píxeles. Este espaciado debe ser lo suficientemente significativo para diferenciar fácilmente un grupo del siguiente.

Espaciado entre grupos

Diseño web al estilo Metro

Actualmente existen un par de plantillas con bastante tirón para llevar el estilo Metro a nuestras web, a saber Metro UI CSS y BootMetro. Por el momento developando ha probado la primera en su diseño del backoffice para el mantenimiento de la aplicación móvil que estamos desarrollando para Café &  Té Las Rozas.

Seguramente la comprensión del ‘grid’ y de la estructuras de las pantallas nos permite adoptar el estilo Metro de una manera sencilla, ya que precisamente, la sencillez es una de las bazas de este estilo.

Ambas plantillas combinan elementos CSS y Javascript para ofrecer un aspecto muy similar al de las aplicaciones que podemos ver en Windows 8. No hay que dejar pasar por alto que este estilo está orientado a navegación táctil.

En Developando seguiremos profundizando en los conocimientos de ambas plantillas para traeros nueva información.

Fuente: Grid Windows 8

The post Diseño de aplicaciones con el estilo Metro de Windows 8 appeared first on Blog Developando.

El módulo ‘homeslider’, por defecto, se utilza en Prestashop para mostrar una serie de imagenes como diapositivas en la página inicial de la tienda. Pero como todos los módulos de Prestashop, se puede configurar en qué área de trabajo se quiere situar.

El problema que presenta el módulo ‘homeslider‘ es que inicialmente no viene configurado con la posibilidad de moverlo a ese aŕea de trabajo de la cabecera de la página, conocido como ‘hookDisplayTop’.

Para poder hacerlo, hay que realizar unos cambios en el fichero que se encuentra en el raíz de la instalación de Prestashop, dentro de la carpeta ‘~/module/homeslider/homeslider.php‘.

Si vemos el contenido del fichero, veremos que sólo tiene definido como área de trabajo  ‘hookDisplayHome‘. Esta área de trabajo es la que se muestra en el panel central de la página. Ahora le que queremos hacer es añadir también el área de trabajo ‘hookDisplayTop‘.

Configurar la plantilla del módulo para permitir mover ‘homelslider’ al area de trabajo ‘hookDisplayTop’

Para configurar que el módulo pueda ser mostrado en el área de trabajo ‘hookDisplayTop’ debemos introducir las siguiente líneas al final en el fichero:

‘~/module/homeslider/homeslider.php‘

public function hookDisplayTop($param) {
 
if(!$this->_prepareHook()){
     return;
}
 
// Comprobar si se trata del tema para móviles
if ($this->context->getMobileDevice() != false){
     return false;
}
 
// Añadir los ficheos Js y Css que se necesitan
$this->context->controller->addJS($this->_path.'js/jquery.bxSlider.min.js');
$this->context->controller->addCSS($this->_path.'bx_styles.css');
$this->context->controller->addJS($this->_path.'js/homeslider.js');
 
// Fichero con la template del homeslider
return $this->display(__FILE__, 'homeslider.tpl');
 
}

Una vez realizado este paso, hay que compilar las plantillas. Prestashop permite configurar esta compilación para que se realice automáticamente. Para ver si está configurado así hay que ir al menú  ‘Parametros avanzados > Rendimiento‘ y comprobar si está marcada esta opción de complicación:

Prestashop compilar plantilla

Mover el módulo homeslider a la nueva posición

El siguien paso es proceder a mover el módulo ‘homeslider’.  Para ello hay que:

1. Acceder a la pestaña ‘Módulos->Posiciones‘. En esta ventana se muestran los módulos activos y las posiciones en las que se están mostrando dentro de la página.
2. Eliminar el módulo ‘homeslider‘ de la posición en la que se encuentra actulamente.
   

   Homeslider trasladar hook

3. Hacer click en el botón ‘Trasladar un módulo‘ como se indica en la siguiente imagen:
   

   Trasladar un módulo prestashop

4. En la siguiente vista seleccionar el módulo que se va a mover, identificado por ‘Image de control deslizante para su página web’,  y la posición en la que se quiera dejar, en este caso debería quedar de la siguiente forma:
   

   Seleccionar la posición a la que mover un módulo

5. Haciendo click en el botón ‘Guardar‘ el módulo ‘homeslider’ aparecerá en la nueva posición. Si todo ha ido bien deberemos ver el siguiente mensaje ‘Módulo copiado correctamente al hook‘. En caso de ver un mensaje que diga que el módulo no se puede mover a ese hook, revisar que estén recompiladas las plantillas y eliminar el módulo de la posición en la que se encuentra actualmente y repetir de nuevo los pasos de este tutorial.

Si accedemos de nuevo a la tienda Prestashop, veremos que el homerslider de imágenes aparece ahora en la parte superior de la ventana. Para centarlo horizontalmente habría que editar editar el CSS:

Vista principal tras trasladar el módulo al top

NOTA: en caso de acceder a la vista y ver nuestra página con un aspecto similar al que muestra la siguiente imagen, en la que no se vería el ‘homeslider’ en la posición que hemos configurado, deberemos borrar la caché de nuestra tienda, eliminado lo que haya en la carpeta ‘~/cache/’. Hecho esto si volvermos a entrar en la tienda ya veremos en homeslider como en la imagen superior:

Homeslider no se muestra en el top de la página

Centrar el módulo ‘homeslider’ en la ventana, editar estilos css

El fichero que hay que editar ahora es ‘~/modules/homeslider/bx_styles.css‘.

El primer cambio es añadir:

.bx-wrapper {
    margin-bottom:20px;
    height:300px;
    clear:both;
}

Tras este cambio, la imágen se verá ya en su tamaño original, con los números de las diapositivas a la derecha. Ahora entrar en la configuración del módulo y editar las imágenes y el resto de parámetros.

Muestra el homeslider de prestashop tras moverlo al top

Por defecto, el ancho del módulo ‘homeslider’ es de 979px, este ancho está configurado en los estilos de todos  los ‘grids‘ en el fichero de estilos ‘global.css‘.

Como únicamente queremos cambiar la propiedad el ancho para el módulo ‘homeslider’, podemos añadir la siguiente línea al fichero ‘~/module/homeslider/js/homeslider.js‘ indicándole el ancho que se quiera configurar (500px en este ejemplo):

$(".bx-wrapper,.bx-window").width("500px");

Con estos pasos ya tendremos el módulo ‘homeslider’ en la parte superior de la ventana y centrado horizontalmente.

Si tienes dudas, comentarios o sugerencias no dudes en dejarnoslos.

The post Mover módulo homeslider en prestashop al hook top de la página appeared first on Blog Developando.