Diseño Web

Diseño Web, Trucos

Mover tu tienda Prestashop de directorio

/

Como ya tenemos algo parecido en WordPress, vamos a hacerlo ahora en Prestashop. En el ejemplo lo haremos para mover una tienda del directorio /prestashop a la raíz (/), pero es extrapolable a otras situaciones. Y lo hemos hecho en la versión 1.5 Antes de todo haz una copia de seguridad de la base de datos y de los ficheros. No debería pasar nada pero siempre hay que poder volver atrás en caso de error. Lo primero que tienes que hacer es copiar todos los directorios y archivos (salvo htaccess) del subdirectorio /prestashop a la raiz). El archivo htaccess te aconsejo que lo guardes en local como copia. Si no tienes espacio en el servidor (algo que pasa bastante en las tiendas con imágenes grades), o prefieres hacerlo así, copia todo en local, bórralo del FTP y luego sube la copia a la raíz. De hecho yo lo hago en local primero y así tengo una copia de seguridad. Después hay que entrar en la administración de nuestra tienda hay que ir a Preferencias -> SEO Y URLS  y ahí en “Establecer Url de la tienda” tenemos 3 opciones: Dominio de la tienda:   elqueseatudominio.loquesea Dominio SSL: el que sea, en caso de dudas el mismo que el anterior. Base URI: esto es lo importante. En nuestro ejemplo estaría en /prestashop. Hay que ponerlo en / Guarda los cambios.  En el mismo apartado (Preferencias  -> SEO Y URLS) conviene desactivar (al final) la opción de Urls amigables y luego activarlo otra vez. Vete a la tienda y mira si está poniendo Urls amigables (los artículos tienen que tener el nombre del artículo). Si no abre tu htaccess anterior y modifícalo cambiando la BaseURL a /. Después ponlo en la raíz. Así debería funcionar. Después puedes (si lo has hecho así) borrar el antiguo (una vez verificado que todo funciona). Nota: Recuerda mandar el nuevo sitemap a Google y que durante unos días avisará de “url no encontradas” (porque lo hemos cambiado de sitio). Dale tiempo.

Diseño Web, Gráficos y Fotografía

Optimizador de imágenes online

/

Si quieres hacer que las imágenes de tu cámara no ocupen tanto para poder subirlo (por ejemplo) a webs, podéis usar compresores u optimizadores de imágenes. Ya hemos comentado algunos en el blog, tanto de plugins de wordpress como para Windows. Hoy os dejamos dos soluciones online. No dan resultados tan buenos como el de escritorio pero quitan de un apuro: Image Optimizer: Muy sencillo de usar, sube la imagen, selecciona la calidad y el tamaño y dale a optimizar. Kraken:  Otro fácil de usar, donde te deja elegir dos tipos de opitmización y varios orígenes de la imagen.    

Diseño Web, Webs

Quackit: tutoriales para hacer webs

/

Hoy os dejamos http://www.quackit.com una web para aprender a programar en HTML, CSS etc.  Es decir para aprender a diseñar páginas web. Y todo gratis. No hay nada muy avanzado, pero es bueno para el que empieza o quiere revisar algo. Hoy en día no se hacen las webs desde cero salvo proyectos específicos. Pero siempre hay que retocar algo, programar o diseñar. Y para eso es necesario conocer html, css, java, xml etc.

Diseño Web, Webs

¿Es tu web “responsive”?

/

Hemos escrito algún artículo sobre webs que te permiten ver cómo se vería tu página en otros dispositivos como iPhone, iPad etc. Hoy os dejamos dos páginas que en mi opinión son muchos mejores para ver si tu web es “responsive”, algo muy de moda hoy en día. Es decir si puede adaptarse bien a los diferentes formatos de tamaño de imagen de los diferentes dispositivos. De hecho hemos descubierto que estas web nos emulan mejor las tablets que los propios emuladores. http://responsivepx.com/  Estupenda web con dos scrollers que puedes mover para modificar la altura y la anchura y ver los cambios según se realizan. Además puedes navegar por tu web para ver diferentes subpáginas. http://quirktools.com/screenfly/ Esta tiene menos opciones ya que directamente presenta unos iconos que puedes pinchar para cambiar a modo ordenador, teléfono, tablet, tv o personalizado. Una GRAN ayuda hoy en día para los diseñadores web.

Diseño Web, Gestores de contenidos, Trucos

Evitar que los textos se salgan de elementos con ancho fijo. CSS3

/

Cuando hemos diseñado una plantilla html con elementos de ancho fijo (por ejemplo con tablas), al introducir un texto largo este se puede salir del contenedor. Sobre todo en pantallas más pequeñas (móviles, tablets etc).   Obviamente una solución es intentar usar ancho variable, no fijo lo que hace las páginas más “responsive”. Pero si no queda más remedio o te empeñas en ancho fijo CSS3 nos da varias soluciones . word-break: break-all rompe (salta de línea) una palabra pero ignora los espacios. Pueden quedar letras sueltas word-wrap:break-word   intenta “romper” la palabra en comas, espacios y guiones. Si no puede corta la palabra. Por lo tanto a mi me suele gustar más usar word-wrap que no deja una letra suelta si puede evitarlo. A esto le podemos añadir el uso de guiones. Os lo pongo ya para cualquier navegador: -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; Así que con word break quedaría: -ms-word-break: break-all; word-break: break-all; /* Non standard for webkit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; Y con word wrap: word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; Con word-wrap en Firefox y Opera a veces hay que usar overflow: hidden;  

Diseño Web, Webs

Mete contenido externo en tus webs: Embed Responsively

/

Para los que usamos páginas webs (tanto diseñando como escribiendo artículos como la web de tu empresa), muchas veces meter contenido externo es un problema. Que si no coge bien el código, que si no se ve bien….Al final retocando lo consigues….pero pierdes mucho tiempo. Esto intenta resolver http://embedresponsively.com/ , una página en la que pones la url del vídeo de Youtube, Vimeo, Dailymotion…o la url de Google Maps, Instagram y alguno más y te da exactamente el código necesario para meterlo en tu web y cómo se vería. Sencillo y sin romperse la cabeza. También puedes descargar embedresonsively y modificarlo tu desde Github.  

Android, Diseño Web, Sistemas, Smartphones

Monitorizar una web desde tu móvil

/

Para los que trabajamos con webs, en ocasiones es interesante saber, durante periodos de tiempos concretos, cuándo se ha caído para dar un tiempo de respuesta rápido a esa caída. Tiempos en los que que la web esté online sea esencial. Por ejemplo puedes tener una tienda de la que dependan tus ventas y no quieras que se caiga, o un evento durante el cual todos los asistentes acudan a la misma. Por ejemplo hora tenemos un cliente con un evento que dura dos semanas y durante las cuales es esencial que la web esté arriba. Para monitorizar existen muchas soluciones. El servidor puede avisarte (pero y si se “congela”), puedes poner soluciones cliente/servidor (pero cargas el servidor) o puedes usar soluciones de Internet (como algunas que diremos en los próximos días).  Pero una solución muy útil es tener una aplicación en el móvil que te avise cuando se caiga la web. Porque al fin y al cabo el móvil es lo que llevas encima siempre. Os doy dos: Website Monitor: El que estoy usando ahora. Muy útil, permite agregar varias webs, y avisa cuando recibe un estado diferente de 200 (HTTP OK). Puedes poner cada cuanto tiene que comprobar el estado y el tipo de aviso (tipo de tono de llamada). Además puedes decirle que avise hasta que le des a la tecla para que pare (tipo alarma). A veces el servicio me da algún error pero por lo demás funciona sin problemas.   Site Checker:  Muy similar al anterior con opciones casi idénticas y también dispone de una versión pro por si quieres usar los servicios añadidos de la misma.      

Diseño Web, Webs

Color Scheme designer: elige colores para tu web

/

Una de las cosas que más nos cuesta a la gente técnica a la hora de tratar temas de diseño es elegir colores. Yo distingo poco más que los colores básicos 😀 Pero evidentemente esto no es suficiente cuando estás haciendo el proyecto de un cliente. Así que usamos herramientas que faciliten un poco la vida, como esta de Color Scheme Designer. La herramienta en modo básico es muy sencilla de usar, eliges un color y te da la gama cromática que puedes usar alrededor de ella con sus códigos de color. Puedes ver los resultados hasta desde el punto de vista de gente con daltonismo. Y luego exportar a paletas de GIMP y Photoshop. Para cosas más avanzadas os dejo un vídeo sobre como usarlo.

Diseño Web, Webs

Emuladores de iPad online

/

En ocasiones nos piden que probemos cómo se ven ciertas web en iPad. Nosotros no tenemos iPad ni queremos tenerlos, así que, aunque puede haber ciertas diferencias, os dejamos aquí una serie de emuladores online desde los que podéis ver cómo se vería en uno de estos dispositivos: http://ipad-emulator.org/  Básico, sólo para ver webs pero suficiente. http://www.alexw.me/ipad2/  Alucinante, emula hasta desbloquear la pantalla. Se lo han currado. http://ipadpeek.com/  También muy bueno.

Buscadores, Diseño Web, SEO

Herramientas para comprobar enlaces

/

Una de las cosas que más cuentan en el SEO son los enlaces (de calidad). Al principio es difícil conseguir enlaces, y una manera de sacar ideas para ello es hacer “ingeniería inversa” con la competencia. Es decir mirar dónde ha puesto la competencia (competencia que tenga buen posicionamiento claro) los enlaces y hacer lo mismo. Copia lo que esté funcionando bien. Eso si, cuidado que algunos están ahí por enlaces “fraudulentos” que “hayan colado” en Google hasta ahora pero que con las revisiones continuas de Google pueden penalizar. Usad vuestro sentido común y poned enlaces RELEVANTES. Os dejamos algunas herramientas para ello. La mayoría te deja hacer un análisis sin registrarte, o uno al día. Muchos de ellos te permiten ampliar eso gratis una vez que te registras. Recomiendo usar más de una en tu web: Open Site Explorer: Muy recomendable…sólo una al día. Ahrefs: Muy sencillo y claro de usar. Majestic SEO: Hay que registrarse (gratis) pero es de las más recomendables. Link Diagnosis. Rapid Searchmetrics.

Scroll al inicio