Cambiar resolución de Pantalla en Google Chrome

Para los diseñadores web es muy importante entender que las personas que visitan sitios o páginas lo hacen desde muchos diferentes navegadores y que para cada uno pueden existir normas distintas de visualización, por lo que se debe tener cuidado en plantillas y ediciones con CSS. Pero también hay algo que es muy importante y es la resolución. Actualmente muchas personas tienen en sus hogares u oficinas pantallas de última tecnología, y de diferentes y variadas resoluciones como 1280×800, 1440×900, 1024×768 entre muchas otras.

Por estas razones es bastante importante que cuando se finalice un diseño se pruebe bajo todos los criterios posibles ya que de lo bien que quede, será un buen punto de partida para atraer al público hacia el. Un diseño mal hecho o que no se acomode a la resolución ni navegador usado, es muy seguramente un sitio web que no volverá a tener visitas. Hoy les quiero compartir una excelente extensión para Google Chrome, que es un navegador bastante usado ya para edición web, la cual permite tener diferentes resoluciones, y con las cuales se puede ver instantáneamente como se ven nuestros sitios en 13 tamaños distintos (Pueden agregarse más manualmente), dándonos una idea muy exacta de que debemos tener en cuenta o que debemos corregir. Las resoluciones disponibles por defecto son:

Como dato adicional, se considera que cualquier diseño web debe encajar mínimo en una resolución de 1024×768. Con esta extensión entonces se puede revisar si se cumple con este dato. Espero les sea de mucha utilidad.

Descargar Extensión

Alinear una Imagen al Centro con CSS

Al no existir un método en CSS para centrar las imágenes de nuestros sitios web tan fácil como lo hacemos con los textos, o con las mismas imágenes pero con HTML, existe una opción verdaderamente sencilla que permite centrar una imagen y hacerla visible en cualquiera de los navegadores más recientes (probado en IE 9, Firefox 5 y Chrome 12) correctamente.

Hay que tener en cuenta el lugar donde se quieran centrar las imágenes, ya que si se hace en la plantilla general, se centrarán todas las imágenes del sitio y se dañará la estructura. Por lo general la clase de las imágenes en CSS es img, entonces pueden usar las demás clases para hacer que solo determinadas partes del sitio centren las imágenes.

A modo de ejemplo, voy a explicar como centrar las imágenes únicamente del cuerpo del Post. Para mi theme la clase que define el estilo del Post es #content .single por lo que para hacer el procedimiento utilizo este código y le agrego el img que es la que representa las imágenes en mi tema. Creo entonces una nueva línea en mi style.css que quedaría:

#content .single img {

}

Ahora para centrar las imágenes que contengan el anterior parámetro, basta con agregar dos líneas.

  • display: block;
  • margin: auto;
En general, las 2 anteriores líneas son las que se deben usar para centrar cualquier imagen. La primera hace que las imágenes se muestren en bloque generando un nuevo renglón entre el cuerpo del texto, y la segunda hace que el margen para todos los lados se automatice haciendo que quede igual arriba, abajo, a la izquierda y a la derecha. De esta forma la imagen queda centrada y es muy útil en mi caso por ejemplo, para centrar todas las imágenes de los Artículos automáticamente.
El código finalmente entonces debe quedar así:
#content .single img {
display: block;
margin: auto;
}

Espero que este sencillo tutorial les funcione a la perfección en sus Blogs o Sitios web. Cualquier duda será atendida a la menor brevedad.