Easy web tips: primer capítulo

Como su propio nombre indica, va a ser una sección de pequeños trucos de HTML/CSS que hemos ido descubriendo con el paso del tiempo. Quizás para los que ya sabéis algo os va a resultar poca cosa pero en principio pretendemos que sean interesantes para todos.

Imágenes que no descuadren la página

Vais a pensar: "Bua, ahora tendré que cambiarlas una a una". Pues no, no es necesario.

Simplemente añadir las siguientes líneas al CSS de vuestra página o blog.

    img{ max-width:100%;}

De este modo no ocuparán más del tamaño que tenga el div que las contiene. En este blog está puesto así y funciona bien. Consigues unas imágenes responsive de una manera sencilla.

Poner un fondo que cubra perfectamente

Esto lo descubrí al hacer exámenes durante este curso. Es una de las cosas que ya se instauraron en mi mente de manera fija, que ni me hace falta mirarlo. 

Si quieres poner una imagen grande de fondo, que no se repita, que quede centrada, que aunque la pantalla sea muy grande se vea solo una y sin espacios en blanco, debes utilizar este código.

    body{
       background: url('AQUÍ LA DIRECCIÓN') no-repeat center center fixed;
       background-size: cover;

       -webkit-background-size: cover;

       -moz-background-size: cover;

       -o-background-size: cover;

    }

Podéis ver un ejemplo aquí. Se ve claramente que funciona correctamente cuando se reduce el zoom del navegador (por ejemplo con CTRL y la rueda del ratón).

Las cosas raras de webkit, moz y o son para que funcione correctamente en todos los navegadores.

¡Cambia lo que quieras!

Algo que debería conocer cualquier persona que le guste, aunque sea mínimamente, el mundo de las webs o blogs es el uso del F12. Si pulsas la tecla aparecerá una consola extraña con el código de la página en la que estés en ese momento.

Ahí podéis cotillear e incluso hacer cambios temporales en el código para probar cosas. El uso de esta herramienta daría para una entrada entera, si os interesa la haremos, pero así a rasgos generales diremos un ejemplo respecto a este blog (probadlo también si no lo habéis usado nunca o no tenéis mucha idea).

Situación que suele ser muy habitual: no decidirse por el color de algún elemento. 

Pinchamos en la flecha que hay a la izquierda de todo y a continuación seleccionamos un elemento de la página, por ejemplo la cabecera, pero no en la foto. Se ilumina la zona por la que va pasando el ratón y es una buena forma de saber cuanto ocupa un elemento. 

Una vez seleccionado un elemento aparecen los estilos que tiene. Si pinchas justo en el cuadradito del color ocurre algo así: 

¿Que te gusta leer un blog pero quieres cambiar el fondo? Pues puedes de manera sencilla, incluso cambiar la fuente. Sobretodo sin miedo alguno, que no vais a romper nada.

Esta herramienta se utiliza para muchas cosas, esta solo es la más sencilla. Si queréis implementar definitivamente los cambios tendrán que ser trasladados al código original.

Añade iconos o imágenes con enlaces

Es de lo más sencillo y de lo primero que se aprende al personalizar un poco el espacio digital. Tan solo hay que añadir un gadget HTML/JavaScript si es en un blog, o si es en web añadir el código donde corresponda.

<a href="URL" target="_blank"><img src="URL" title="título" alt="Esto es una foto"/></a>

Esa sería la versión más sencilla. Si por ejemplo quieres darle tamaño a la imagen y que esté centrada, sería así:

<div style="text-align:center;"><a href="URL" target="_blank"><img src="URL" title="título" alt="Esto es una foto" width="60px"/></a></div>

---

¿Qué os han parecido? ¿Demasiado sencillos? ¿Demasiado difíciles? Cualquier sugerencia de contenido es bienvenida :)

La próxima entrada irá sobre cómo cambiarse de ordenador comprándolo por piezas. De paso conoceréis las características de mi nuevo compañero de trabajo ^_^