3 trucos para personalizar tu sitio web

He juntado unos trucos para completar la clase bonus sobre Materialize que he dado en Platzi Comunidad hace poco:

Tu propio “logo” como favicono

Un logo siempre va a ser la forma de transmitir una o más palabras, ideas y emociones con una sola imagen. Por ejemplo, piensa en la marca Apple: no necesitan escribir en todos lados “Apple”, “Costoso”, “Buena Calidad”, etc. Solo colocan una manzana mordida y nosotros rápidamente entendemos qué significa esa manzana detrás de un dispositivo electrónico y nos viene a la mente todo lo que significa la empresa “Apple”.
Cuando estés creando tu imagen, piensa que debe ser algo que te identifique rápidamente. Debe ser relevante para la gente que te conozca, pero sobre todo, para la que solo haya escuchado hablar de ti: tu objetivo es que aun así sepan que se trata de ti.
También deberías familiarizarte con los siguientes conceptos:
categorias logo
Para hacer funcionar tu logo como favicono en un sitio web, te recomiendo encarecidamente lo siguiente:
  • Si pretendes hacer un isotipo o isologo, hágalos cuadrados, porque no quieres que tu logo se vea así:
1
sino así:
2
  • Ten en cuenta que el fondo de la pestaña es blanco; procura no hacerlo blanco con fondo transparente, porque se verá así:
3
  • La resolución que te recomiendo es de 72 x 72 px – como dije, cuadrado.
  • El formato del icono que nuevamente te recomiendo es .png, porque es muy fácil de manipular y no pierde calidad.
Ahora, para insertarlo dentro de tu página web, debes escribir la siguiente etiqueta dentro de tu <head>:
  1. <link rel="icon" type="image/png" href="RUTA DE TU ICONO">

Colorea la barra de tu sitio web en Chrome para móviles

Actualmente cuando visitamos un sitio web desde Chrome en nuestro smartphone, en algunos sitios web vemos que la barra de navegación tiene un color. ¿Truco de magia? ¿Automáticamente se colorea de acuerdo al contenido de nuestro sitio web? ¿Función pro de Chrome? ¿Brujería oscura arcana de la antigua tierra del Ragnarök?
No, posiblemente algunos usen brujería, pero nosotros somos programadores de bien, y esto solo se logra con una bonita línea de código:
  1. <meta name="theme-color" content="CLAVE DE COLOR">

Más que un link, un “evento”

Hoy en día la necesidad de hacer la vida de nuestro usuarios mucho más fácil ha llevado a la creación de hipervínculos más “inteligentes” como los siguientes:
– Deja llamar automáticamente con un clic (funciona muy bien desde un smartphone):
Solo escribimos lo siguiente:
  1. <a href="tel:+522721685230">Llámame</a>
– Envía al usuario directo a su aplicación de correo electrónico:
Puedes indicar automáticamente la dirección de correo electrónico a la que se enviará con:
  1. <a href="mailto:edymanonek@hotmail.con">Envíame un mail</a>
Pero no solo eso, además puedes indicar “cc”, “cco”, “asunto” y hasta escribir un mensaje automáticamente, todo eso con:
  1. <a href="mailto:edymanonek@hotmail.com?cc=edymanonek@gmail.com&subject=Vi%20tu%20clase%20bonus&body=Aprendí%20a%20redactar%20automaticamente%20mensajes%con%20ayuda%20de%20tu%20material%20extra%20de%20la%20clase%bonus.">Envíame un mail</a>
– Por si todo lo anterior no fuera suficiente, también podemos ejecutar JavaScript como si de un vínculo se tratara. Lo único que hay que hacer es insertar una acciónJavaScript dentro del hipervínculo, así:
  1. <a href="javascript:alert('Esto es muy genial. ¡WOOW!')">Cliquéame</a>