Apuntes varios de diseño web

Apuntes varios de diseño web

No sé si publicar esto, pero hay cosas que se aprenden día tras día en el diseño web y luego se olvidan, es una pena no tener todo esto a disposición, por esto crearé esta entrada. Son cosas más que todo técnicas que seguramente le ayudarán a algún diseñador a salir de un aprieto o quizás finalmente me de cuenta que no voy a anotar cosas en este post porque no tengo tiempo, pero quizás sea de ayuda, entonces por ahora lo voy a usar.

Mi web se mueve en celulares cómo solucionarlo

– Es fácil busca en el head de tu tema y entre las etiquetas head añade este código, esto hará que la web se adapte a la pantalla y no se le pueda hacer zoom.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Las etiquetas básicas en media queries son:

– Ejemplo uno : @media (max-width: 600px)
– Ejemplo dos : @media only screen and (max-width: 600px)
– Ejemplo tres de intervalos:
@media only screen and (max-width: 340px) and (min-width: 5px)

Colocar código en html y que se muestre en forma de texto

O en palabras más técnicas “cómo convertir texto html en texto plano” usa esta herramienta: http://nosetup.org/php_on_line/convertir_html_texto

Robots no rastreen este enlace

Esta es muy sencilla pero se olvida con facilidad: Para que los enlaces no sean seguidos por los buscadores usa rel=”nofollow”

Tener información del php de tu sitio

La mejor forma es crear un archivo con el nombre info.php e incluir esta información:

<?php
phpinfo();
?>

Luego ubicarlo en la raíz de la página web acceder a http://dominio.tl/phpinfo.php y listo tendrás esta valiosa información (recuerda borrar el archivo) que servirá para pedirle a tu hosting que haga mejoras como pueden ser :

upload_max_filesize = 1000M
post_max_size = 2000M
memory_limit = 3000M
file_uploads = On

Hacer que un video de Youtube sea responsive

Crea un contenedor div que encierre el iframe y dale esta clase:
<div class="video-container"><iframe…….></iframe></div>

Y dale estas clases, con esto funcionará:

.videoresponsive {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}

.videoresponsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Comentarios en CSS y HTML

Comentarios en HTML: <!– y finaliza por –>
Comentarios en CSS: /* y termina con */

Plugin para sitemap de imágenes

-Advanced Image Sitemap.

Botón flotante para comunicarse gratis y sin plugins

https://whatshelp.io/widget

Links útiles diseño SEO y demás

Seo Google Rankig factors : https://backlinko.com/google-ranking-factors

Compartir:

Leave a Reply

Your email address will not be published.