Diseño y maquetación

Optimización de WordPress

Mejorando el redimiento, el tiempo de carga y la puntuación de Page Speed de tu WordPress

0

Ya tienes tu WordPress instalado, configurado y con un estupendo tema. Le has instalado entre media y una docena de plugins, ya sean para añadir nuevas características a la administración, o para el frontend. Le has añadido un montón de contenidos para que, en cuanto lo subas a producción, los usuarios se queden maravillados de lo bien que escribes, de los productos que vendes, de los trabajos que realizas, etc. Has contratado al mejor analista SEO de todo el mundo para conseguir estar en los primeros puestos y comerte a la competencia. Tienes una campaña de marketing para radio, televisión, prensa e internet, que ni los de Nike.

Y lo subes a producción.

Y aunque tendrás visitas, venderás tus productos, y los usuarios te conocerán gracias a la campaña de marketing, el negocio no termina de despegar. Empiezas a preguntarte qué sucede. Pides informes, análisis, reuniones, cambios, mejoras. Pero nada lo soluciona.

Continue reading “Mejorando el redimiento, el tiempo de carga y la puntuación de Page Speed de tu WordPress” »

Obtener la altura de una capa con contenido oculto (overflow:hidden)

0

Hay veces que nos encontramos con capas con alturas dinámicas a causa de su contenido, pero que no podemos redimensionarlas debido a que tenemos una altura fija, o hay otros elementos que impiden su visualización completa. Las soluciones que he podido encontrar me resultaban un poco chapuceras, ya que se limitaban a crear una capa fuera del area visible de la pantalla (valores negativos para top y left) con el contenido que iba a tener la capa y obtener su altura, obviamente después se eliminaba, pero no me convencía del todo.

La solución que propongo no es precisamente la mejor, pero es algo más elegante que crear contenido duplicado. Veamoslo:

Creamos la capa :

<div class=”contenido” id=”contenido”></div>

Y le damos formato:

.contenido{ width:400px; height:auto; overflow:hidden; }

Supongamos que la capa ya dispone de tal cantidad de contenido que se desborda y no podemos verlo a causa del atributo ‘overflow’. Con javascript hariamos lo siguiente:

Justo antes de cargar el contenido y al tener el atributo ‘height’ en auto tendremos que ocultar la capa:

var capa_contenido = document.getElementById(‘contenido’)

capa_contenido..style.visibility = ‘hidden’;

De esta manera el usuario no verá la capa, pero tampoco el contenido que se le fuese a añadir a continuación.

Una vez añadido el contenido, procedemos a obtener la altura de la capa, ponerle la altura correcta y volverla visible:

var altura = capa_contenido.offsetHeight;

capa_contenido.style.height = ‘400px’;
capa_contenido.style.visibility = ‘visible’;

Ya podemos trabajar con la altura dinámica de la capa. Esto es muy útil, sobre todo, a la hora de trabajar con ajax o con capas con barra de desplazamiento y no se quiere usar el atributo ‘overflow:scroll’;.

PD: Antes de esto, estuve mirando jQuery pero las propiedades que me ofrecía (position() y offSet) no funcionan con capas o contenido oculto.

Imprimir con saltos de página en javascript

1

Todos los que nos dedicamos a la programación web sabemos que para imprimir una página web, es necesario usar la función  print() de javascript, pero si deseamos imprimir documentos (como nóminas, albaranes, facturas, documentación oficial, etc), habitualmente necesitaremos imprimir esos documentos por triplicado o en hojas diferentes, y la manera más óptima de realizarlo sería crear un pdf que el usuario podría o bien descargar o visualizar para su impresión.

Pero gracias a CSS podemos imprimir varias páginas sin necesidad de usar pdf (a no ser que también quisieramos tener una copia en este formato 😉 )

CSS tiene varias propiedades para impresión:

page-break-after: Sirve para forzar un salto de linea después del elemento al que se le ha aplicado.
page-break-before: Sirve para forzar un salto de linea antes del elemento al que se le ha aplicado.

Ejemplo:

  1. #salto_pagina_despues{
  2.  
  3. page-break-after:always;
  4.  
  5. }
  6.  
  7. #salto_pagina_anterior{
  8.  
  9. page-break-before:always;
  10.  
  11. }

Forma de utilización:

  1. <div id="salto_pagina_despues">Este elemento se imprimirá en la primera página.</div>
  2. <div>Este elemento se imprimirá en la segunda página.</div>
  3. <div id="salto_pagina_anterior">Este elemento se imprimirá en la tercera página.</div>

Explicación:

La primera capa se imprimirá en la primera página, por que le hemos indicado que después del elemento con el id “salto_pagina_despues” se genere un salto de página. El segundo “div” se imprimirá en la segunda página porque le hemos indicado a la capa con el id “salto_pagina_anterior” que antés de procesar el contenido de la capa con ese id, genere un salto de linea.

Es algo muy útil he intuitivo. Espero que os sirva. XD

Packs de iconos para diseño web gratuitos

0

– Pack de 100 iconos gratis: http://blog.iconspedia.com/icons/100-free-icons-weby-icon-set-192/

– 50 packs de iconos web para diseño: http://speckyboy.com/2009/02/02/50-of-the-best-ever-web-development-design-and-application-icon-sets/

– 21 packs de iconos para diseño web: http://webdesignledger.com/freebies/21-best-icon-sets-for-designing-web-apps

– Pack de 17 iconos web: http://vectortuts.com/articles/news/vectortuts-exclusive-freebie-announcement-17-web-icons/

– 22 packs de iconos de alta calidad: http://elitebydesign.com/free-high-quality-icons-sets/

Mootools y position:absolute;

0

Estoy creando un menú desplegable para una web con el framework mootools, el problema surje cuando quería colocar el submenú en una posición absoluta.

La solución es bien sencilla, se crea una capa por encima del código del submenú, y es esa capa la que tendrá la posición como absoluta y a través de las propiedades top y left de esa capa podremos colocar el submenú donde queramos.

Espero haberos ahorrado un par de horas 🙂

Scripts Ajax hasta hartarse

0

Buscando información sobre la posible salida de una nueva versión de Appserv (suite PHP+MySQL+Apache) he encontrado un gran listado de script Ajax disponibles para su descarga.

http://www.appservnetwork.com/ajax/index.php?page=1

Directo a favoritos.

Página principal de myfonts.com

Formas de saber el nombre de una tipografía (o una fuente o un tipo de letra)

1

A veces, un cliente nos llega con una creatividad o una publicidad con un tipo de letra que quiere en su proyecto, pero de la que no dispone del más mínimo dato. Excepto que quiere esa tipografía.

Otras veces, nos encontramos con que para hacer nuestro proyecto necesitamos un tipo de letra concreto, que tal vez usamos alguna vez con anterioridad, pero no recordamos su nombre, o solo una parte, volviéndonos locos buscando la tipografía en internet.

Así a primera vista podríamos pensar, que la única forma de encontrar esa tipografía sería ir comprobando una por una las fuentes de las que disponemos, pero es muy probable que, después de horas de prueba y error, no demos con ella.

Por suerte, en internet, siempre disponemos de herramientas para facilitarnos el trabajo.

Continue reading “Formas de saber el nombre de una tipografía (o una fuente o un tipo de letra)” »

Ir arriba