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

Busca en el head de tu tema y entre las etiquetas head añade este código:

<meta name="viewport" content="width=device-width, initial-scale=1">

Esto hará que la web se adapte a la pantalla y no se le pueda hacer zoom.

Medidas para hacer una web responsive – BREAKS

Mobile : Under 768
Tablet pequeña : 769 – 991
Tablet larga : 992 – 1199
Desktop : 1200 +

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)
@media all and (max-width: 800px)

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:

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:

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:
Comentarios en CSS: /* y termina con */

Plugin para sitemap de imágenes

-Advanced Image Sitemap.

Calendario gratuito para wordpress

Home

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
Protocolo para crear bien SITEMAPS https://www.sitemaps.org/protocol.html
Creador de sitemap aparentemente limpio http://www.web-site-map.com/

Desactivar las actualizaciones automáticas de WordPress:

Utiliza estos códigos dentro de tu archivo wp-config.php, para:

  • Desactivar las actualizaciones automáticas de WordPress:
    define( 'WP_AUTO_UPDATE_CORE', false );
  • Desactivar únicamente las versiones «medianas» (4.X), pero sí incluir las menores (4.9.X), el siguiente:
    define( 'WP_AUTO_UPDATE_CORE', 'minor' );
  • Desactivar TODAS las actualizaciones automáticas (temas, plugins, traducciones o WordPress), el siguiente:
    define( 'AUTOMATIC_UPDATER_DISABLED', true );

Transferir una web creada en WordPress a otro hosting

https://bit.ly/2Ps23NL

  1. Hacer una copia de todos los archivos de public-html
  2. Exportar la base de datos desde phpmyadmin
  3. Subir los archivos de tu web al otro hosting.
  4. Crear una base de datos en tu nuevo hosting.
  5. Importar la base de datos
  6. Configurar el archivo wp-config.php
  7. Cambiar DNS

Referencias de otras páginas

Selectores CSS: https://uniwebsidad.com/libros/css/capitulo-2/selectores-basicos

Plugins para recordar

Chat con aplicación : https://www.tidio.com/

Plugin que permite crear un sistema de reservas basado en citas, días y horas específicas, ideal para profesionales médicos y quizás restaurantes.

https://preview.codecanyon.net/item/booked-appointments-appointment-booking-for-wordpress/full_screen_preview/9466968?_ga=2.212842388.1432167823.1583981370-798710076.1583288988

Cómo invertir el orden de las columnas en responsive design y WpBakery Builder

.invertir {flex-wrap: wrap-reverse !important;}

Compartir:

Leave a Reply

Your email address will not be published.