Firebug

Hasta hace unos días nunca había oido hablar de este addon (Firebug) de Mozilla, creado por FirebugWorkingGroup, pero decidí probarlo y es de fácil usar y muy útil. Te saca el código de la página y lo separa en código HTML, CSS, JS, Flash... con lo cual se puede decir que es como la opción de ver el código del propio navegador pero con este plugin se ve todo ordenado con lo cual se facilita la visión de los tags y averiguar la estructura de la página web. Además de todo eso tiene una consola que ayuda mucho a ver y corregir los errores.

WebDeveloper

Otra herramienta muy útil para los desarrolladores de paginas web, llamada WebDeveloper es un complemento de Mozilla creado por Chrispederick. Es una herramienta con multitud de opciones, la mayoría de ellas es mostrar y ocultar, es decir, mostrar las marcas div, ó mostrar los enlaces, ó ocultar css además de validación de codigos. Cualquier desarrollador web debería probarla e incluso tenerla a mano.

MeasureIt

También siguiendo el consejo de Victor, otro complemento de Mozilla, que es el MeasureIt, creado por Kevin Freitas. Es un plugin sencillo y sirve para sacar el tamaño de los objetos de una página web. Es tan fácil como hacer click en un punto de la pantalla y arrastrar el ratón hacía el otro. Nos marca el tamaño en todo momento, con lo cual no tienes que ir a las propiedades de la imágen cuando no te acuerdas de su tamaño.

Colorzilla

Hace unos años cuando estudiaba en Grado Medio, un profesor muy bueno, Victor (www.victornuno.com), que nos daba desarrollo de aplicaciones web, me aconsejó un complemento de Mozilla que es el Colorzilla, creado por Alex Sirota. Es un plugin muy sencillo que ayuda a sacar el código de los colores de la web. Con tan solo un click sobre cualquier punto de la página ya  tienes el código del color en varios formatos. En las últimas versiones integran algunas funciones más una de ellas es la paleta de colores, con lo cual ni hace falta utilizar el PhotoShop.

Ojos azules

Codigos HTML

Soporte en todos los navegadores

HTML HTML Simbolo Numero Nombre Descripcion ! " # $ % & ' ( ) * + , - . /   ! " # $ % & ' ( ) * + , - . / " & espacio signo de cierre de exclamacion / admiracion comillas dobles signo de numero signo de dolar signo de porcentaje signo "&" / ampersand comilla / apostrofe parentesis izquierdo parentesis derecho asterisco signo de mas / adicion coma signo de menos / sustraccion / guion / raya punto barra oblicua - barra de division

Leer más...

5 Maneras de reiniciar el CSS

¿Por qué es aconsejable reiniciar el CSS antes de hacer nada? Porque por defecto cada navegador toma ciertos valores, los cuales varian en cada navegador. Por eso para que nuestra página we vea igual en cualquier navegador (Mozilla, Chrome, Opera, Internet Explorer...) se vea igual, es aconsejable reiniciar los estilos.

Realmente los que suelo utilizar son: normalize.css o modernizr.

1. Reinicio del CSS por Chris Poteet

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;

Leer más...