martes, 26 de abril de 2016

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 ^_^




4 comentarios:

  1. Que genial post. Yo no puedo vivir sin el inspector de elementos (el F12) cuando hago web generalmente comienzo a moverle de ahí y luego ya solo pego el código jajajaja

    xoxo!

    ResponderEliminar
    Respuestas
    1. Muchas gracias ♥
      La verdad es que es muy útil para eso sí xDD
      A mí me costó utilizarlo. Al principio solo para pequeñas cosas pero este año ya le di caña para hacer debug xD
      Tiene tantas opciones... por eso dije lo de una entrada dedicada XDDD

      Eliminar
  2. Anda pues, parecerá una tontería pero he aprendido algo nuevo. El inspector lo conocía, claro, pero lo que no sabía es que dándole al cuadrado de color se abría el selector de colores; yo iba probando colores con alguna app de edición gráfica e iba cambiando el color hexadecimal para ver qué tal quedaba. Es una pérdida de tiempo, viéndolo ahora así, pero nunca caí en que hubiera otra forma de hacerlo, pensé que el cuadrado era una pequeña "muestra" para que supieras qué color era. En fin, *se esconde detrás de una pared para que no le vean*. xD

    ResponderEliminar
    Respuestas
    1. Siempre se puede aprender algo :D me alegro de que así sea, que ya que nos lees XD
      Yo eso lo descubrí el otro día no te creas jajajaja bueno, me lo dijo Carlos >.<
      Me pareció algo interesante para decir y no me equivocaba :)
      Que tranquilo, que yo estaba igual que tú xDD

      Eliminar

Escribe tu comentario

------ ------------