Diseño Web

Diseño Web, Navegadores, Webs

Browsershots: consigue pantallazos de tu web en varios navegadores

/

Hoy en día es casi imposible hacer una web que se vea igual en cada navegador. Hay muchos y cada uno va a su historia sin hacer mucho caso de estándares ni nada parecido. Lo único que puedes hacer es conseguir que se vea bien en “casi todos” (aunque si quitas IE casi consigues el 100% jejeje). Por  lo tanto los diseñadores se ven forzados a tener abiertos varios navegadores e ir probando. Browsershots es un servicio gratuito que saca pantallazos de tu web en varios navegadores y varios sistemas operativos. No lo veo muy funcional mientras estás haciendo la web (ahí tendrás que seguir probando el código, pero si antes de entregar la web al cliente o como muestra para el cliente de compatibilidad. Otro recurso más.

Diseño Web, Gestores de contenidos, Trucos, Webs

Añadir vídeos de Facebook en WordPress

/

No es fácil añadir vídeos de Facebook a tu blog de WordPress, al menos no es inmediato. Hay algún plugin para ello, que no funcionan todo lo bien que deberían (seguro que alguno si, no he probado todos). Pero es que además no me gusta ralentizar mis webs con plugins excesivos para luego colgar 1 o 2 vídeos. También hay una manera editando la plantilla y poniendo una función….pero tampoco me gusta andar tocando código si no es necesario. Así que os pongo una manera rápida. Hay que hacerlo desde la pestaña html (no la Visual) para que wordpress no elimine el código. Tenemos que pegar lo siguiente: <object width=”400″ height=”224″ > <param name=”allowfullscreen” value=”true” /> <param name=”allowscriptaccess” value=”always” /> <param name=”movie” value=”http://www.facebook.com/v/xxxxxx” /> http://www.facebook.com/v/xxxxxx </object> Luego mira en el vídeo que quieres compartir, será del estilo: http://www.facebook.com/photo.php?v=zzzzzzzzzzzzz    Donde las “zzzzz” son números. Estos números son los que tienes que substituir en las xxxxx del código. Y ya está. Puedes cambiar los valores del tamaño (height y width ) hasta que se ajusten a lo que quieras (cuidado no distorsiones mucho el vídeo) y ya lo tienes.

Diseño Web, Gestores de contenidos, Soporte, Trucos, Webs

Sitio multilenguaje en WordPress: Plugin qtranslate

/

Acabamos de hacer un sitio multilenguaje en WordPress, y como ha dado alguna complicación (leve), dejamos la solución que hemos aplicado por si ayuda a otros. Existen varios plugins y varios enfoques para esto. De los que hemos probado el que más nos gusta es qtranslate. Puede que ralentice algo el sistema (todavía es pronto para verlo) pero no requiere instalaciones extra ni tocar plantillas. El plugin, tras la instalación, te crea otra pestaña en las entradas con el idioma (o idiomas) que hayas creado. Es decir, en el mismo post creas el texto de los diferentes idiomas. También te crea otra línea para el título de cada idioma. También instala un widget que te permite poner un apartado con banderas, o texto para cambiar de idioma. Por último, si requieres que cambien los títulos de menús, o cualquier otra cosa que hayas puesto manualmente (texto etc) puedes hacerlo fácilmente con este código: <!–:es–>Inicio<!–:–><!–:en–>Home<!–:–> El plugin se encarga de cambiar utomáticamente los textos y los títulos al pinchar en el otro idioma. Sencillo, cómodo y muy efectivo.

Diseño Web, Gestores de contenidos, Webs

Prestadesigner: Buenas plantillas de Prestashop y un soporte estupendo

/

Los que nos leéis asiduamente sabréis que somos unos aficionados a Prestashop como solución de tienda online por su facilidad de uso, presonalización, su comunidad de soporte, por sus módulos y …por ser gratis. Hay muchísimas páginas para comprar temas. Hoy os dejamos una que nos ha sorprendido muy gratamente: Presta Designer  Nos ha sorprendido por dos motivos: 1) Sus temas son simples, limpios, elegantes y funcionan muy bien.Además el coste es bajísimo. 2) Tuvimos una duda con una de sus plantillas y el soporte fue fuera de lo común. Los desarrolladores se pusieron en contacto con nosotros enseguida y buscaron una solución al problema. Hecharon horas y ganas, la verdad es que nos sorprendieron muy gratamente. Así que si tenéis que poner una plantilla  a una tienda…ya sabéis, los recomiendo.

Diseño Web, Trucos

Un truco (de varios) para centrar objetos CSS

/

Aunque parezca mentira, y con toda la potencia y versatilidad de las webs con CSS, centrar objetos (DIVs o imágenes) en una web para todas las resoluciones y todos los navegadores no es nada fácil. Y es que, por alguna razón, te permite alinear a la derecha y a la izquierda (float:right y left) pero no al centro (absurdo). Aquí os dejo un pequeño truco que funciona en alguno de los casos (no todos). Se trata de esto: En vez de intentar centrar la imagen o div entera, piensa sólo en la esquina superior izqierda del mismo. Vamos a intentar centrarla, y luego desplazarla a la izquierda la mitad de la anchura del objeto. Así centraremos el mismo. Para ello crearemos un código: .centered { position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; } Como véis esto colocará la parte superior izquierda un 50% del ancho de la página. Luego   lo desplazaremos la mitad de la anchura del objeto (200) a la izquierda y la mitad de la altura (100) hacia abajo. Origen del artículo: http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ A veces hay problemas con la altura. Esto se puede solucionar así (ver código de la página): http://exanimo.com/examples/css/vertical-centering-with-a-floated-shim.html

Blogs, Diseño Web, Webs

Habilitar las miniaturas (post-thumbnails) en tu plantilla de WordPress

/

Desde WordPress 2.9 podemos poner una miniatura en nuestros posts, para mostrarla luego en un widget, en una columna o en las redes sociales.  Es la llamada Imagen Destacada. Varios plugins hacen ahora uso de esta función, pero si tu plantilla no estaba preparada para ello, no lo tendrás activado. La buena noticia es que se puede activar en la mayoría de los casos. ¿Cómo? Así: Aviso: Los cambios en los ficheros de tu plantillla pueden hacer que tu web se vuelva inaccesible. Ten siempre una copia de seguridad para volver a dejarlo como estaba si te equivocas. No nos hacemos responsables de las consecuencias del mal uso de esta información en tu web. Tienes que ir al menú Apariencia>Editor y seleccionar el archivo (en la derecha) functions.php Si no está editable (pone un botón azul debajo que dice Actualizar archivo) tienes que cambiar los permisos del mismo por FTP (664 te vale). Al final del fichero pon las siguientes líneas : if ( function_exists( ‘add_theme_support’ ) ) { add_theme_support( ‘post-thumbnails’ ); } Actualiza el archivo y ve a una de tus entradas a ver si tienes la nueva opción en la columna de la derecha. No te llevará mucho tiempo saber usarla. Más información aquí: http://codex.wordpress.org/Post_Thumbnails  

Diseño Web, Webs

Generador de border-radius: CSS

/

Border-radius es un elemento de CSS que nos permite crear bordes redondeados en los elementos de nuestra página web de manera muy sencilla (no os podéis imaginar los líos que había que hacer antes).Esto mejora el aspecto drásticamente. Border-radius Generator (generador de … para los de los colegios “bilingües” de ahora) es una web que nos permite crear los bordes de un elemento y ver cómo queda en tiempo real. Podemos cambiar cada borde independientemente y , cuando nos satisfaga el resultado, copiar el código y pegarlo en nuestra web. Algo que a los diseñadores les puede ahorrar bastante tiempo.Gracias @TrixarDesign.

Scroll al inicio