Formas en CSS.

Desde las formas geométricas básicas (círculos, triángulos, estrellas… hasta una lupa, un ribete o incluso un Pac-Man. Muy útil para algunos diseños un tanto complejos. Lo puedes encontrar en este enlace.

Iconos.

Pueden ser usados directamente (hay un enlace de descarga que permite usarlos como si fueran una fuente tipográfica) o bien pueden ser tomados como inspiración. Una completa galería de iconos de todo tipo, totalmente adaptados para las características del CSS (colores, sombras…), escalables, sencillos y precisos: Font Awesome.

Flechas

Otro amplio catálogo, esta vez de flechas, con sus respectivos códigos para ser usadas en HTML. Por ejemplo:

← ↗ ↛ ↜ ↪ ↳ ↺ ⇎ ⇜ ⇡ ⇪ ➠ ➳ ➽ ⤸ ⤵ ➻ ➶ ⇫ ⇊ ⇀ ↶ ↨

Lo encontrarás aquí.

Redondear bordes

A veces queremos que las esquinas de nuestros diseños tengan un suave (o no tan suave) redondeo. Es fácil hacer esto con CSS, pero si queremos que no todas las esquinas tengan el mismo redondeo y además que la fórmula valga para todos los navegadores es algo más complicado. Esta página nos lo pone mucho más fácil, basta con rellenar los cuadrados de las esquinas con la curvatura deseada y obtendremos el código CSS. Por ejemplo, si quisiéramos que la esquina superior izquierda tenga un redondeo de 5px, la superior derecha de 10px, la inferior izquierda de 23px y la inferior derecha de 15px la cosa quedaría así:
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 23px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 23px;
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 23px;


En border-radius.com.

Generar favicon.ico.

Para generar la imagen que aparecerá en la pestaña de nuestra página en los navegadores. Esta página (http://www.favicon.cc/) permite dibujarlo sobre una cuadrícula, mientras que esta otra (http://www.genfavicon.com/es/) permite subir una imagen y usarla como favicon.

Fondos

Si no tenemos tiempo para crear un fondo nosotros mismos en esta página encontramos un buen número de fondos elegantes que podemos usar y modificar: http://subtlepatterns.com/ Como curiosidad, aquí tenemos una web que nos permite crear y descargar un estampado escocés para utilizar como fondo: http://www.tartanmaker.com/

Lorem Ipsum

Un generador de texto para rellenar mientras el cliente se decide a generar algún contenido para su página. A alguno habrá que explicarle después que ese texto no va a ir realmente en su página, que es algo temporal Aquí un generador: http://es.lipsum.com/
Y para los más cachondos, el Chiquito Ipsum (¡Jarl!) que generará automáticamente varias líneas de texto como estas:
Lorem fistrum se calle ustée quietooor no puedor condemor no te digo trigo por no llamarte Rodrigor tiene musho peligro la caidita caballo blanco caballo negroorl fistro por la gloria de mi madre. Por la gloria de mi madre torpedo amatomaa benemeritaar. Pecador hasta luego Lucas hasta luego Lucas va usté muy cargadoo sexuarl está la cosa muy malar benemeritaar a gramenawer. Mamaar diodeno no te digo trigo por no llamarte Rodrigor torpedo. Tiene musho peligro mamaar ese pedazo de me cago en tus muelas fistro pecador.

Añadir imágenes.

Se usa el botón “Añadir objeto”, justo encima de las opciones de edición de texto. Al pulsarlo, aparecerá una nueva pantalla, como la que se ve en la imagen de arriba.

Si queremos subir una imagen que tenemos en nuestro ordenador seleccionaremos «Subir archivos». En la pantalla que aparece podremos o bien arrastrar el archivo hasta esta pantalla o bien pulsar «Seleccionar archivo» y buscarlo en nuestro ordenador.

Una vez seleccionada la imagen que queremos poner en nuestro post miraremos a la columna de la derecha donde pone «DETALLES DE ADJUNTOS». Allí escribiremos el título de la imagen, su leyenda o pie de foto (si es que deseamos que lo tenga),  un texto alternativo a la imagen (es importante rellenar este campo, dado que será el texto que aparezca si existe algún problema con nuestras imágenes o el visitante las tiene desactivadas, aunque, si se deja en blanco, WordPress se encargará de poner el título de la foto como texto alternativo) y la descripción de la imagen e iremos a la parte de abajo, donde pone «AJUSTES DE LA PANTALLA DE ADJUNTOS». Elegiremos la alineación que queremos para nuestra imagen (izquierda, derecha o centrada) y el tamaño. Si  queremos realizar alguna leve modificación, hay que tener en cuenta que, en esa misma columna, contamos con la opción «Editar imagen», que nos llevará a un sencillo editor donde podremos recortar la imagen, voltearla, cambiar su tamaño, modificar la escala… Cuando tengamos la imagen subida y hayamos rellenado los campos y elegido las opciones deseadas, tan sólo pulsaremos «Insertar en la entrada» y tendremos la imagen en nuestro post.

Añadir vídeos.

Si queremos incluir vídeos de páginas externas (como youtube o vimeo), bastará con pegar la dirección del enlace (por ejemplo, http://www.youtube.com/watch?v=pl3vxEudif8) directamente en el editor de texto, en un párrafo nuevo:

Hay otras formas de insertar vídeos, pero esta es la más cómoda y rápida y es compatible con una enorme lista de servicios, además, si por cualquier problema no puede verse el vídeo, siempre se verá el enlace hacía el mismo.

Publicar.

Antes de publicar nuestro artículo nos fijamos en el bloque que está debajo del bloque «Publicar», el de «Categorías». Seleccionamos las categorías y subcategorías en las que será incluido nuestro post. Así, cuando un visitante de nuestra página indique la categoría que quiere visitar solo le aparecerán los posts relativos a esta categoría. En el siguiente post de esta serie veremos cómo crear categorías y subcategorías, así como el funcionamiento de las etiquetas.

Una vez que tenemos nuestro post con el formato que queremos,volvemos al menú «Publicar», en la columna de la derecha.

Si no estamos editando un post ya publicado, es decir, el post no ha sido publicado aún, veremos el botón «Guardar Borrador». Este botón sirve para ir guardando los cambios que hacemos mientras editamos nuestro post. A su derecha está el botón «Vista previa», que abrirá una ventana en la que podremos ver cómo se verá nuestra entrada una vez sea publicada. Abajo, en este mismo bloque, encontramos la opción «Publicar», al pulsar este botón, el artículo verá la luz en el blog.

Como hemos señalado antes, en los siguientes posts iremos explicando otras funciones de WordPress, como la creación de categorías, etiquetas y demás funcionalidades que nos ayudan a mantener un blog bien organizado y atractivo para el lector.

Inicio.

Normalmente, para acceder al panel de control de nuestra web o blog deberemos teclear en la barra de direcciones el nombre de nuestro dominio y le añadimos a este «/wp-admin». Introducimos entonces el nombre y la contraseña que nos ha adjudicado nuestro webmaster y pulsamos el botón para entrar. Aparecemos en la página de inicio del panel de administración de WordPress (pulsar en imagen para ampliar). A la izquierda aparece una columna con un menú y en la parte principal de la página podemos observar diversos datos sobre nuestra web.

Añadir una nueva entrada o artículo.

En la columna de la izquierda vamos a donde pone «Entradas» y pulsamos en «Añadir nueva». Tenemos un panel como el que muestra la siguiente imagen:

En este no tenemos más que introducir un título para nuestro artículo y copiar en la caja de debajo el contenido de éste, como vemos en la siguiente imagen:

Edición del contenido.

En este punto vemos que hay 2 pestañas («visual» y «texto»). La edición visual funciona como cualquier editor de texto (Word, por ejemplo). Texto funciona como un editor de código HTML en el que podremos añadir etiquetas HTML a nuestro texto. Al estar explicando esto para un supuesto cliente que «no tiene ni idea de ordenadores» continuaremos con la pestaña visual marcada.
Las opciones de edición son las que aparecen en la imagen de debajo, que pasamos a detallar (algunas se explican por sí solas), de izquierda a derecha y de arriba a abajo:

a) Poner el texto en negrita.
b) Poner el texto en cursiva.
c) Tachar el texto.
d) Hacer una lista sin numerar.
e) Hacer una lista numerada.
f) Indicar que el texto es una cita. Por ejemplo:

Code is poetry.

-Wordpress

g) Alinear a la izquierda.
h) Alinear al centro.
i) Alinear a la derecha.
j) Añadir enlace. Seleccionamos la parte de texto que queremos convertir en un hipervínculo y pulsamos este botón. Nos aparece una nueva pantalla en la que se nos pide la URL de la página que queremos enlazar con nuestro texto, es decir, su dirección (por ejemplo: http://www.pixandlab.com/productos) y un título, que será lo que aparezca en un pequeño recuadro amarillo al pasar el ratón por encima del enlace (por ejemplo: «Productos que ofrece PIX & LAB»). Debajo hay una opción para que la página que estamos enlazando se abra en una pestaña distinta. Es recomendable que esta opción esté desactivada.
k) Anular un hipervínculo realizado anteriormente.
l) Etiqueta more. Si queremos que sólo aparezca una parte del contenido de nuestro post y un botón para que el lector acceda al texto completo se coloca el cursor en el texto, en la parte donde queremos que se corte el texto y se inserta esta etiqueta.
m) Activar/desactivar el corrector. En la flecha hacia abajo que hay al lado de este botón seleccionamos el idioma de nuestro artículo. Si este botón está activado subrayará en rojo aquellas palabras de nuestro texto que no estén bien escritas o estén escritas en otros idiomas.
n) Modo de escritura sin distracciones. Al pulsar este botón se abrirá una pantalla en la que desaparecen la columna de la izquierda y de la derecha para trabajar solo con el editor de texto.
ñ) Mostrar/Ocultar opciones avanzadas. Si está activado se muestran debajo más opciones para dar formato al texto. Son las siguientes:
o) Distintos formatos preconfigurados para aplicar a todo el texto.
p) Subrayar el texto.
q) Alineado justificado.
r) Cambiar el color del texto.
s) Pegar como texto plano. Al pegar textos sacados de otras páginas o aplicaciones aparecen con algunas características del formato que tenían en su origen (negritas, cursivas, hipervínculos…). Usaremos esta opción para pegar un texto tal cual, sin formato.
t) Copiar archivo de Word.
u) Eliminar formato.
v) Insertar caractéres especiales. Por ejemplo: €, ©, …
w) Ampliar el margen. Amplía el margen izquierdo. Al lado tiene un botón desactivado que se activará al usar este, y que sirve para anular la ampliación de margen que hemos realizado antes.
x) Deshacer. Es un ctrl+Z (cmd+Z en Mac).
y) Rehacer.
z) Botón de ayuda.
Próximamente hablaremos de otros aspectos a la hora de administrar un blog en WordPress (añadir imágenes, categorías, etiquetas, etc.), pero si quieres ver tu texto editado no tienes más que pulsar «Vista previa» en la columna de la derecha.

Qué son

En realidad se trata de una especie de código de barras bidimensional: la información es almacenada en una matriz de píxeles. Fueron creados en 1994 por Denso Wave, orientados en un principio a la gestión de repuestos en la industria del motor. Después su utilización se fue extendiendo a otras industrias y, con la aparición de los smartphones, al ámbito de la publicidad.

Composición

Lo primero que destaca son los tres cuadrados que ocupan tres de las esquinas de nuestro código. Estos se llaman finder pattern, y sirven para que el dispositivo que está leyendo el código conozca el tamaño de éste, la orientación y el ángulo en el que está siendo escaneado. En la esquina que queda libre, hacia dentro, hay otro recuadro (alignment pattern) que permite al lector saber si el código está distorsionado (puede estar doblado o situado en una superficie que no sea plana). Otras partes del dibujo ayudan a reconocer la versión, el tipo de datos que estamos utilizando, etc. Otros píxeles de la matriz representan la información que queremos transmitir (un enlace, un texto, una imagen…).

Tipos

Existen varias formas de clasificar los códigos QR. Más allá de las diferencias de contenido (por ejemplo: un enlace a Google Maps, un número de teléfono) es interesante la distinción entre códigos estáticos (mantienen siempre la misma información) y dinámicos (la información puede cambiar de un momento a otro). Un ejemplo de QR dinámico sería uno que ofreciera información metereológica, que variaría dependiendo del momento de la consulta. La imagen del QR en realidad no cambia, pero este está enlazando a herramientas del servidor que permiten cambiar el contenido de este.

QR vs. BIDI

Estos 2 términos han llegado a causar confusión (¡incluso en el Ministerio de Hacienda!). No son lo mismo. Un código BIDI es cerrado y privado, se necesita una aplicación de la compañía que lo creó (aunque ésta sea gratuita) para interpretarlo. El QR es un código abierto, es un estándar internacional (ISO/I6C18004) de libre uso.

Usos

Desde una simple dirección, un teléfono, un eslogan hasta un hipervínculo con todas sus posibilidades (un enlace a nuestra web, hacer «me gusta» en una página o seguir en Twitter…), pasando por añadir a la agenda telefónica, descargar aplicaciones…
También ha sido utilizado en otros ámbitos como el artístico o el ajedrecístico.

Generadores

Existen muchas webs que generan automáticamente nuestro QR, pero la que nos ha parecido más completa y destacable es beqrious. En primer lugar tendremos que seleccionar el tipo de QR que queremos generar (enlace, correo electrónico, teléfono, texto, vCard, SMS o diversas redes sociales). Después hay una opción para elegir el color de nuestro código QR y por último solo tenemos que descargarlo en el formato que queramos.
También existe la posibilidad de personalizar nuestro código QR de varias maneras:
-De forma que los píxels que configuran la información «dibujen» una foto de nuestra elección: en esta web.
-Si realizamos códigos para redes sociales, cabe la posibilidad de poner el logo de la red social a la que conduce este. Se puede hacer, por ejemplo, desde aqui.
-Incluyendo en el dibujo una foto (por ejemplo, el logo de tu empresa): aquí (es la misma web que la del anterior punto) o aquí si quieres tener muchas más posibilidades de edición (hay que registrarse, que es gratis, pero el acceso a algunos paneles de edición es de pago).
En la imagen de abajo se pueden ver ejemplos de códigos generados en algunas de estas páginas.

Futuro

La implantación del código QR ha sido mucho menor de lo que se esperaba en un principio, especialmente en Europa. Hay autores, como Enrique Dans, que incluso lo han dado por muerto. También existen datos que parecen indicar un despertar del uso de esta tecnología en el viejo continente.

Pensábamos escribir una sesuda entrada para celebrar los diez años transcurridos desde el lanzamiento de WordPress. Un artículo que hablase de su historia y características, comentar en tiempo real las palabras de Matt Mullenweg, su fundador, sobre el acontecimiento y hacer meticulosos cálculos estadísticos a partir de nuestras herramientas de medición globales.

Pero se dió la casualidad de que Facebook falló y no nos avisó de la efeméride a tiempo y, en un día, se nos han adelantado unos cuantos cientos de sitios, en un buen puñado de idiomas, a lo largo y ancho del mundo. Por este motivo tendremos que conformarnos con ofreceros la extraordinaria infografía que los chicos de MarketPress han elaborado resumiendo los éxitos de WordPress en el transcurso de estos diez años y con felicitar, y desear muchos más años de alegrías, a este maravilloso sistema de gestión de contenido (CMS) del que, por cierto, se sirve este blog, además de los sitios de otras grandes compañias.

Validador HTML y CSS de W3C

Analiza si nuestra página se adecúa a los estándares HTML y nos informa de errores que podamos haber cometido (desde etiquetas mal cerradas o comillas sin cerrar hasta errores de sintaxis). Nos ofrece 3 formas de validar nuestra página: tecleando la URL, subiendo el archivo HTML o copiando directamente el código fuente de nuestra web. Es muy importante tener una página bien estructurada y de acuerdo a los estándares de cara al posicionamiento en buscadores y para tener más seguridad de que nuestra web se ve de la misma forma en cualquier navegador, aunque también hay que tener en cuenta que algunos errores son causados por elementos que añadimos a nuestra web (por ejemplo, algunos botones de redes sociales) o por necesidades del diseño (por ejemplo: transparencias para navegadores concretos) y no pueden solucionarse a menos que renunciemos a incluirlos en la página. Recuerda también que el análisis del HTML se realiza solo para una única página. Lo suyo es realizar esta validación antes de colgar nuestra web.

Analizadores

Realizan análisis más o menos pormenorizados de diversos aspectos nuestra web y algunos nos indican qué cosas podemos corregir o mejorar. Existen muchas páginas de este tipo; estas son algunas de las más recomendables (y gratuitas) que hemos encontrado:
–Woorank: realiza un análisis verdaderamente minucioso de nuestra web. Divide el análisis en secciones (Las 5 prioridades, Visitantes, Redes Sociales, Móvil, Lo esencial de SEO…) y en cada una desgrana los aspectos susceptibles de ser mejorados y las mejoras que podemos incluir a la página (incluir una página de error 404, mapas del sitio, análisis de los encabezados…). En español.
–The Escape: del tipo de la anterior pero muchísimo más sencillo y resumido. Para tener una idea general de los puntos fuertes y débiles de nuestra web. En inglés.
–Alexa: en esta página puedes observar datos como la posición que ocupa tu web en el ranking de tráfico de tu ciudad, de tu país o en todo el mundo; las webs que han añadido enlaces a la tuya y estadísticas acerca del nivel de alcance de tu web, visitas, etc. En inglés.
–Cool Social: información acerca de cómo lo estamos haciendo con las redes sociales; resumen y estadísticas de nuestra actividad en estas. En inglés.
–Pagerank: hay muchas webs que nos ofrecen la posibilidad de conocer el pagerank de nuestra página. El pagerank es un valor de 0 a 10 calculado por Google mediante una fórmula basada en el número de páginas que enlazan a la tuya y el propio pagerank de estas. Por ejemplo: aquí o aquí.
–Cómo ve mi página un motor de búsqueda: al introducir nuestra URL se nos presenta la página según es interpretada por los buscadores. Es decir, vemos los textos, los nombres de las imágenes, la jerarquía… pero no colores, márgenes, etc. Por ejemplo esta.
–Cuánto vale mi página web: aplicaciones web que realizan una estimación del dinero que valdría una página en el mercado, en base a distintas variables. 2 ejemplos: Site value check y My website worth. Aunque casi todas las páginas que hemos encontrado se basan en muchas variables similares (tráfico del sitio, relevancia del contenido) los resultados son bastante dispares, por lo que no podemos otorgarles demasiada fiabilidad.

La barra de Web Developer, que en Firefox aparece bajo la barra de direcciones y en Chrome pinchando en la rueda dentada junto a la misma (una vez instalada la extensión, por supuesto), se divide en una serie de pestañas con nombres muy representativos de las herramientas que van contener:

– Disable (inhabilitar): En esta pestaña encontraremos opciones para inhabilitar elementos en la carga de la página: la cache, java, javascript, pop-up, redirecciones, colores… La mayor parte sirven para comprobar el comportamiento de la página en diferentes configuraciones del navegador.

– Cookies: Contiene herramientas que permiten añadir, modificar, borrar o inhabilitar cookies.

– CSS: Completo juego de herramientas para las hojas de estilo. Podemos inhabilitarlas, comparar páginas de estilo diferentes, modificarlas y guardarlas mientras vemos los cambios , ver la aplicación para diferentes medios… Además, cuenta con un inspector que permite ver independientemente el estilo de cada elemento de la página.

– Forms (formularios): Borrar el contenido de un formulario, añadírselo, realizar cambios en su código… En definitiva, herramientas para hacer comprobaciones rápidas en los formularios sin tener que utilizar programas ajenos al navegador.

– Information (información): Dividida en dos secciones. Las opciones pertenecientes a la primera (precedidas de la palabra display) muestran la información en la propia página sobre la que realizamos la consulta. Las de la segunda sección (precedidas de la palabra view) abren una pestaña nueva con la información requerida. El conjunto de opciones permite obtener casi cualquier dato que podamos necesitar referente a una página de una forma rápida y ordenada.

– Miscellaneous (miscelánea): Herramientas y opciones que no tenían cabida en ninguna de las demás pestañas. Así, en esta podemos, desde editar el código html, hasta mostrar una regla para tomar medidas de la página (otra opción más que añadir a las que sugerimos en el anterior artículo de Herramientas útiles para el desarrollo web), pasando por mostrar guías o marcar los enlaces como visitados. En esta sección encontraremos una de las pocas diferencias entre la versión de Chrome y la de Firefox. Así, la versión de Chrome añade un selector de color (también mencionados en la entrega anterior de esta serie de entradas), mientras que en Firefox no aparece dicha herramienta, pero sí lo hace una lupa para ver detalles, omitida en la versión del navegador de Google.

– Outline (perfilar): Perfila con diferentes colores diversos elementos de la página para resaltar visualmente la estructura de la misma.

– Resize (cambiar de tamaño): Esta pestaña contiene varias opciones relacionadas con el tamaño de la ventana. Así, tenemos la opción de ver el tamaño actual, tanto de la ventana del navegador como del área de visualización así como de redimensionar el tamaño de la ventana a las medidas que deseemos o a algún tamaño previamente establecido. También añade una función para el diseño adaptativo, pulsando en View Responsive Layout nos envía a una página en la que vemos como se comportaría la página en la que nos encontramos en diferentes tamaños de pantalla (tiene unos tamaños preestablecidos, pero se pueden modificar y/o añadir nuevos). En PIX & LAB, tener esta herramienta en la barra del navegador, nos llena el corazón de regocijo.

– Tools (herramientas): Contiene enlaces a diversos validadores para comprobar que la página cumple con los estándares (dichos enlaces son configurables, es decir, si conoces un validador de CSS mejor que el de w3.org, que es el que viene por defecto, puedes sustituirlo). En la versión de Firefox se añaden un inspector de DOM (requiere de una extensión extra) y una consola de errores.

– View Source (ver fuente): Nos permite ver el código de la página en la que nos encontremos o enviarlo a la aplicación que elijamos para editarlo.

– Options (opciones): En esta pestaña se nos permite configurar las herramientas de Web Developer que son modificables y elegir algunas opciones del comportamiento de la extensión en el navegador (solamente en Firefox).

En resumen, Web Developer nos parece un completísimo conjunto de herramientas. Algunas de ellas son de uso marginal o nulo, pero la mayoría son tremendamente útiles y, en su conjunto, permiten aumentar la productividad del desarrollador web de una forma considerable. Además, su distribución es intuitiva y permite la configuración de atajos de teclado, por lo que la curva de aprendizaje y la velocidad de ejecución son significativamente reducidos. Si en PIX & LAB tuviésemos un sistema de estrellas o una escala numérica a la hora de criticar herramientas y utilidades, esta extensión, sin duda, recibiría la máxima puntuación.

Inspector de elementos del navegador.

En su forma más elemental nos permite recorrer el código HTML de la página para ver los estilos que están siendo aplicados a cada elemento. Esto nos deja, por un lado, observar como funcionan los elementos de una página. Por otro lado, existe la posibilidad de realizar cambios en el CSS desde el propio navegador, con lo que podremos hacer distintas pruebas de estilo sobre nuestra web para comprobar el efecto que producen. Otra de sus muchas utilidades es la de ofrecer un esquema general de cada elemento, en donde se nos muestran sus medidas y las del padding, border y margin que tiene aplicados (ver imagen arriba). Esto puede parecer algo trivial, pero, si los estilos son muy complejos, nos da una idea de por qué un elemento no se está comportando como queremos. La mayoría de los navegadores incluyen un inspector de elementos junto a otras herramientas para el desarrollo web. En Mozilla Firefox se encuentra en Desarrollo web > Inspeccionar, en Google Chrome en Herramientas > Herramientas para desarrolladores, en Internet Explorer (desde IE7) abrimos las herramientas de desarrollador pulsando F12, en Safari hay que activar el menú de desarrollo y desde este acceder al inspector web…

Selectores de color.

Es una herramienta que, en su forma más básica, funciona igual que el cuentagotas de muchos programas de diseño gráfico, es decir, es un puntero que indica los códigos hexadecimal y RGB que representan el color del píxel en donde está señalando. Si en tu web has usado varios colores distintos puede ser útil saber en un momento dado qué color es cada cual, o bien para saber qué colores se usan en una web con esa combinación que tanto te gusta… En fin, el uso es más que obvio, y no está de más tener una herramienta de este tipo instalada. IE trae su propio selector de color en sus herramientas de desarrollo (F12) en el menú de herramientas, sin embargo en Chrome y en Firefox hay que recurrir a extensiones, la mas famosa es colorzilla, pero existen otras muchas extensiones para realizar esta tarea. Si deseas probar alguna de ellas o prefieres instalar una aplicación de escritorio, bien porque no sólo quieres utilizarla en tu navegador o porque tu navegador no tiene la posibilidad de instalar una, aquí tienes unas cuantas opciones para Chrome, Firefox, Windows, MacOS, Android e iOS, y aquí nuestra favorita para linux.

Medidor de píxeles.

Seguro que habéis adivinado para qué sirve… efectivamente, es una regla que mide cuántos píxeles hay de un extremo a otro de esta. Es de gran utilidad para corregir pequeños errores: esas veces que las imágenes no encajan como queremos, se descolocan elementos a pesar de que nuestros cálculos parecían perfectos. Pero la gran utilidad de tener una regla de píxeles es a la hora de realizar diseños web adaptativos y trabajamos con muchas resoluciones de pantalla, para saber en qué momento exacto un elemento deja de estar en su sitio. MeasureIt y Ruul son ejemplos de extensiones para medir pixeles en Firefox y Chrome respectivamente. Como aplicaciones de escritorio JR Screen Ruler para Windows, ScreenRuler para Linux con Gnome, KRuler para Linux con KDE y PixelStick para MacOS son algunas opciones aunque, como siempre, buscar, probar y utilizar lo que más nos guste será la elección acertada.  Y como colofón, otra herramienta que nos facilitará la tarea será…

…una calculadora.

De las de toda la vida. Para llevar al milímetro cualquier aspecto de tu página web. Recuerda que cualquier objeto, además de las medidas que tenga o que le indiques va a tener padding, border y margin (y éstos pueden medir 0 o más). Por ello, a no ser que seas capaz de memorizar unas cuantas medidas en la cabeza, no está de más utilizar este útil instrumento que, por otro lado, viene de serie en cualquier sistema operativo.

El diseño adaptativo pretende evitar realizar una aplicación diferente para cada dispositivo (por ejemplo, una versión para móviles, otra para tablets…) y que la página quede estructurada para todos ellos con los mismos archivos de contenido y estilos. Esto se consigue mediante el uso de fluid grid (cuadrícula fluida), imagenes flexibles y la inclusión de Media Queries.

Cuando hablamos de fluid grid nos referimos al uso de porcentajes a la hora de definir el ancho de los elementos que estructuran el formato de la página (las columnas, bloques…). De esta forma dichos elementos se amoldarán al tamaño de la pantalla del dispositivo en el que se visualice la página en cuestión. Existe una formula muy sencilla que nos ayudará a saber el porcentaje que corresponde al ancho de cada uno de los elementos que utilicemos que consiste en dividir su ancho original en pixeles entre el ancho del contexto, el resultado será la proporción del elemento respecto a la unidad, que multiplicada por cien dará como resultado el porcentaje que debemos utilizar. Así, si dentro de un contenedor con un ancho máximo de 960px queremos colocar un contenido principal que ocupe 660px y una columna lateral de 300px en su máxima expansión, lo calcularemos de la siguiente forma:

Contenido principal: 660 / 960 = 0,6875 , es decir, el ancho del contenido principal sería del 68,75%
Columna lateral: 300 / 960 = 0,3125 , por lo que su ancho en la hoja de estilo sería 31,75%

Teniendo esto en cuenta la hoja de estilos sería así:

#contenedor_principal {
width:100%;
max-width:960px;
}
#contenido_principal {
width:68,75%;
}
#columna_lateral {
width:31,25%;
}

El uso de fluid grid es verdaderamente interesante para mantener la proporciones en resoluciones parecidas, pero cuando hay grandes diferencias entre las mismas (por ejemplo, la diferencia entre la pantalla de una pc y de un teléfono móvil) es conveniente el uso de Media Queries.

Las Media Queries son preguntas que se hacen desde la hoja de estilo al dispositivo en el que se ejecuta para poder aplicar diferentes reglas dependiendo de sus respuestas. Así, las media queries nos permiten hacer variaciones en el diseño desde la misma hoja de estilo dependiendo de si el dispositivo tiene pantalla (o es un proyector, una impresión…), de la resolución de la misma, de su orientación, de la relación de aspecto o de sus colores. Su uso más habitual en el diseño adaptativo es como acotación de la resolución a la que va a afectar el código CSS que estará incluido en ella. De esta forma se puede optimizar de forma sencilla el diseño para cada dispositivo. Por ejemplo:

@media screen and (min-width: 480px) and (max-width: 950px) {
nav#menu_principal {
margin:0 auto;
width:90%;
}}

En este caso, en los dispositivos con una resolución de pantalla entre 480px y 950px el menú principal ocupará un 90% del ancho de pantalla y estará centrado.

El último elemento que compone el diseño adaptativo son las imágenes flexibles, es decir, imágenes que adecúan su tamaño al de la resolución con la que se esté visualizando en ese momento la página, de esta forma:

img {
max-width: 100%;
height: auto;
}

Así, la imagen se mostrará en su tamaño original hasta que la resolución de la página sea menor que este; en ese momento se irá reduciendo, pasando a ocupar el 100% del ancho de la resolución que tenga en ese momento la página.

Esta página web está diseñada para adaptarse a cualquier dispositivo, si no tienes un móvil o tablet a mano puedes comprobarlo arrastrando con el ratón desde la esquina inferior derecha, reduciendo el ancho de la misma; verás como los distintos elementos se van adaptando automáticamente al ancho de la página en cada momento.

Este blog es nuestro último proyecto. Esta es su primera entrada en la que simplemente queremos darte la bienvenida, plantear algunos objetivos y describir el funcionamiento del mismo.

Queremos crear una comunidad que sirva de ayuda y punto de encuentro para aficionados y profesionales del diseño y el desarrollo web, así como de otros visitantes que busquen otro tipo de contenidos, ya que este no va a ser un blog enfocado únicamente a cuestiones de carácter técnico, sino que será actualizado con información de todo tipo que nos parezca que merece ser compartida con vosotros. Es nuestra intención también conseguir una comunicación fluida a través de los comentarios, que permitan actualizar, modificar y contrastar opiniones.

El funcionamiento no difiere del de cualquier blog; nosotros, y en un futuro puede que algún colaborador externo, publicaremos entradas bien de cosecha propia o bien cosas interesantes que veamos por ahí y vosotros podréis realizar vuestras aportaciones a modo de comentario. Estos comentarios se pueden realizar de forma anónima (bastará con que indiquéis el nombre, una dirección de correo y hagáis el comentario en un formulario al final de cada entrada) o bien indentificándoos a través de otras herramientas (WordPress, Facebook, Twitter…). Los temas están organizados de diversas maneras: mediante categorías, etiquetas, por fecha… para facilitar la búsqueda de entradas. En la columna de la derecha* tenéis un menú donde encontraréis estas formas de acceder a los posts además de un buscador para realizar la consulta a partir de una o varias palabras concretas. En este menú lateral también hay una lista con una serie de enlaces a webs y blogs de amigos, conocidos o completos desconocidos que consideramos interesantes.

Esperamos que este blog os resulte tan entretenido, interesante y útil como a nosotros nos lo han parecido otros muchos, que son los que nos han lanzado a querer publicar uno propio. Así pues, nos despedimos hasta el próximo post.

*ACTUALIZACIÓN 12/03/2013: Este blog está diseñado para adaptarse a la resolución de cualquier dispositivo, por lo que las personas que nos visiten a través del móvil, tablets u otros dispositivos de menor resolución no verán ninguna columna a la derecha. Pronto actualizaremos el blog con un menú especial para estos visitantes.