WhatsApp Business o página web: cuál necesita primero tu negocio (y por qué los dos juntos venden más)

Esta es, posiblemente, la duda más común que me llega por WhatsApp cada semana (qué apropiado, ¿no?): "Lili, tengo un negocio pequeño. ¿Invierto primero en WhatsApp Business o en una página web?"

La respuesta corta: depende de dónde te encuentran tus clientes hoy. La respuesta larga es la que vale la pena leer, porque te va a ahorrar dinero y tiempo.

¿Necesito una página web para mi negocio?

Si llegaste aquí, probablemente tu primo, tu contador o algún amigo emprendedor ya te dijo "necesitas una página web". Y tú asientes con la cabeza, pero por dentro piensas: "¿de verdad la necesito? ¿no basta con Instagram y WhatsApp?"

Te voy a contar la verdad sin adornos, desde 22 años desarrollando sitios web para negocios como el tuyo: no todos los negocios necesitan una página web hoy, pero casi todos la van a necesitar mañana. La diferencia está en saber identificar en qué momento estás.

Plantillas para WP Store Locator

He instalado el plugin WP Store Locator pero su plantilla original no se ve muy bien.  lo mejor es crear nuestras propias plantillas para esto seguimos estos pasos:


  1. Crear una carpeta dentro de la actual plantilla activa de wordpress.  En mi caso utilizó plantillas hijo para no tener problemas con las actualizaciones de la plantilla general.  Se debe tener acceso a los archivos.

    En este caso vamos a crear las carpetas usando cpanel. Buscamos el administrador de archivo y encontramos las carpetas donde está la plantilla activa para nuestro caso estamos usando la plantilla

    Plantilla para WP Store Locator
  2. Creamos una carpeta llamada wpsl-templates  dentro de la carpeta de nuestra plantilla activa de wordpress

  3. Dentro de esta carpeta creamos un archivo custom.php.

  4. Copiamos dentro de este archivo el mismo código que encontramos en wp-content/plugins/wp-store-locator/frontend/templates/default.php e iniciamos desde aquí a personalizar el código.
  5. Para activar nuestra plantilla debemos adicionar el siguiente código en el archivo functios.php de nuestra plantilla activa.


  6. El código anterior habilita la plantilla custom, para ser usada en nuestros sitio, ahora desde el administrador de wordpress en:


Cómo crear borde multicolores con CSS puro

Para lograr el efecto borde multicolor con CSS seguimos el siguiente código.

En este código realmente vamos a utilizar el selectro AFTER al cual le aplicaremos un BACKGROUND linear-gradient, primero vamos a ir a un  CSS Gradient Generator y construimos los colores según lo necesitemos. 

Luego usamos el código en nuestro CSS aquí les dejo el código completo 

Contact Form 7 Formularios Dinamicos

Un cliente me ha solicitado crear un formulario que según la selección de persona natural o persona jurídica me muestres diferentes opciones.   Uso wordpress y para formularios tengo instalado el plugin contact form 7, me di a la tarea de investigar y efectivamente existe la forma de agrupar opciones que según una selección muestre uno u otro campo.

No puedo agregar otra cuenta a mi correo en Gmail

Añadir otra dirección de correo tuya
Functionality not enabled.
Cuando envías correos con la cuenta cuenta@adicionalnueva.com, tienes que utilizar los servidores SMTP de adicionalnueva.com. Sin embargo, tu cuenta no dispone de esta función. Consulta al administrador de tu dominio.

¿Si está frente a este problema y no sabe que hacer?

Primero debe ingresar por la cuenta administrador del dominio.   Sabemos que la cuenta es la administradora del dominio, si entrando por gmail ingresando en el icono de configuración encontramos administrar este dominio.


Una vez dentro del administrador de Dominio, Ingresamos por Aplicaciones 


Luego Google APP



Seleccionamos Gmail


Vamos hasta configuraciones avanzadas


Asegúrese de tener chequeada la opción Permitir pasarelas de salida por usuario Esto soluciona el problema en la mayoría de los casos





Traducción con CSS en wordpress

Si se desea realizar una traducción sencilla en un sitio web desarrollado bajo wordpress y no se encuentra una mejor forma de hacerlo (como en mi caso que siempre uso loco-translate, pero me tope con una plantilla que no tenía toda la traducción bien configurada ) algunas palabras me quedaban en inglés.   Busque está solución que les comparto y que funciona bien para palabras.


Para este ejemplo vamos a usar un boton.
 
  

.social-share {
  text-indent: -9999px;
  line-height: 0; /* colapso la línea origina */
}

.social-share:after {
  content: "Compartir:";
  text-indent: 0;
  display: block;
  line-height: initial; /* El nuevo contenido toma el lugar de la linea original */
}

HTML5 Manejo del Atributo 'required' usando JQuery

El atributo "required" de HTML5 es una mejora importante, que reduce el tiempo de validación en formularios, mejorando la experiencia de usuarios.


      En el HTML: 

Los valores del atributo "required" son validados automaticamente por JQuery, pero esto depende del navegador, en navegadores muy antiguos esto no está soportado.   Si el navegador lo soporta, la respuesta debe ser algo como esto:


Es necesario tener en cuenta todos los navegadores por esto adicionamos la siguiente función de javascript que remplaza los valores de "required" por una clase, y genera un código adicional de validación, para los navegadores que no soportan esta característica.

Aquí un ejemplo de como realizar un manejo de esto, y su respectiva función javascript para valir en caso de que el navegador no soporte está característica.


See the Pen HTML5 Manejo del Atributo 'required' usando JQuery by Lili López Gutiérrez (@creandoweb) on CodePen.

Incluir Font Awesome en input de un Formulario con CSS

Me tope con la necesidad de decorar un poco un formulario, existen muchos resultados en la web para lo que necesitaba pero decidí hacer uno propio utilizando Font Awesome y este fue el resultado.


See the Pen Formulario con Font Awesome by Lili López Gutiérrez (@creandoweb) on CodePen.


Agregar Ajax en un Plugin de Wordpress


Para los que desean crear un plugin en wordpress que ejecute una función utilizando Ajax este es el código a ejecutar.


En este ejemplo vamos a usar un archivo .js en la misma carpeta de nuestro plugin que ejecute las sentencias jquery en wordpress 

Vamos a tener un botón que al dar clic ejecute una función en wordpress y retorne un valor usando Ajax. El botón lo vamos a incluir como un Shorcode Wordpress
 


//  Activa el shortcode [cwBotonprueba] 

add_shortcode('cwBotonprueba', 'pintar_el_boton');
   

function pintar_el_boton () {
     
      // Código para agregar el archivo .js al usar el el shortcode
      wp_register_script ('cw_script.js', plugins_url('ruta/cw_script.js', _FILE_),  array(jquery));
      wp_enqueue_script('jquery'); // Incluimos también el Jquery
      wp_enqueue_script('cw_script.js');
     
      // pintamos el botón
      print "Clic en el botón para ejecutar ajax ";
      print "
"; }
Para activar una acción que se ejecute con Ajax usamos add_action creando una nueva acción siempre con el prefijo "wp_ajax_", el código quedará así
 

    add_action( 'wp_ajax_cw_nombre_a_usar', 'cw_funcion_que_retorna_en_ajax' );

    function cw_funcion_que_retorna_en_ajax () {
              
              $loquepasamos = $_POST['PasamosUnaVariable']
 
              print   "Este es el valor retornado en Ajax y el valor de la variable ". $loquepasamos ; 
              wp_die(); // Esto es requerido para terminar y retornar apropiadamente la respuesta 
    }

Por último revisemos el archivo .js que es el encargado de ejecutar la acción y retornar el valor. Pasamos "activo" que es la función que creamos sin el prefijo, la enviamos Post, utilizando una variable que desde la versión 2.8 está definida en el "header" del administrador de wordpress y da la ruta a admin-ajax.php, para versiones anteriores debemos usar la ruta completa al archivo. En este pintamos con JQuery la respuesta en un div. Al fina al oprimir el botón del shortcode, este debe retornar "Este es el valor retornado en Ajax y el valor de la variable 1"
 
jQuery(function($) {
    $("#selectordepaises").change(function() {
        
  var data = {
   'action': 'cw_tabla_paises', // Valor de la función definida quitando el prefijo
   'PasamosUnaVariable': '1';
  };
  
  $.post(ajaxurl, data, function(response) {
   $("#DivRecibeRespuesta").html(response);
  });
        
    });
}); 

Cómo crear Shortcodes anidados en WordPress

Los Shortcodes o accesos cortos en WordPress son funciones agregadas que nos permiten imprimir en wordpress salidas en nuestras páginas o entradas. Existen unos shortcode predefinidos para wordpress (Listado de Shortcode), pero también podemos crear nuestros propios shortcode.

Tabla de precios HTML CSS

Luego de mucho buscar no encontré una tabla de precios que reuniera todas las caracteristicas que yo deseaba, así que he creado está.

See the Pen Tabla de Precios by Lili López Gutiérrez (@creandoweb) on CodePen.

Probar código HTML CSS y JS en línea

Muchas veces he necesitado probar código antes de ubicarlo en directamente en la web, tal vez como mala práctica, cuando me piden cambios rápidos en un sitio siempre lo hago de esta forma, encontré este sitio que me permite probar mi código.

http://codepen.io/



See the Pen Hguzc by Lili López Gutiérrez (@creandoweb) on CodePen.

Diseño cuenta de cobro persona natural en word para Colombia






Desde hace algún tiempo he buscado un diseño aceptable y profesional para enviar las cuentas de cobro a mis clientes, así que hoy me di a la tarea de crear un diseño, y me agrado tanto el resultado que deseo compartirlo con ustedes.

Solamente estoy ofreciendo un formato, no hay programación.

Dominios gratuitos en español

Los dominios gratuitos .tk, son la solución si no se cuenta con dinero para comprar un dominio, permiten una completa configuración. Clic sobre la siguiente imagén y comienza a buscar tu dominio

Codigo Youtube Ajustable (Responsive)

Si desean incluir un vídeo dentro de una plantilla de diseño adaptable (responsive), es posible que se encuentren con el inconveniente que el vídeo conserva la medida en ancho y alto que es generada en el código de YouTube. Para resolver esto solo debemos aplicar lo siguiente:
  1. Adicionamos un div contenedor de video con la clase video-contenedor
             
         
    Código de iframe generado en youtube
  2. Aplicamos las siguientes reglas css
    .video-contenedor {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px; height: 0; overflow: hidden;
    }
    
    .video-contenedor iframe,
    .video-contenedor object,
    .video-contenedor embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
               
Y listo con este código tenemos un vídeo que se ajusta a nuestro diseño!!

Generar font face en linea

Muchas veces cuando me solicitan un tipo especial de letra en un desarrollo web, lo incluyo directamente desde las fuentes de Google. (http://www.google.com/fonts/) Si la fuente está dentro de las opciones de Google, doy clic en uso rápido y el me da todas las opciones de insertar la fuente dentro de la web.


En la siguiente pantalla simplemente seleccionamos como deseamos insertar, estandar dentro del header de nuestra web, importando dentro de nuestro archivo css o incrustando con javascript.   Copiamos el código según vamos a usar.   Y luego aplicamos la fuente dentro de nuestro css en donde deseemos incluir esta fuente.



Si la fuente no se encuentra dentro de Google Font pero tenemos el archivo de la fuente, podemos generar un kit en el siguiente sitio web:  http://www.fontsquirrel.com/tools/webfont-generator

Pasos para usar el Kit de fuente:


  1. Descomprima los archivos dentro de su carpeta css. 
  2. Localizamos el archivo stylesheet que incluye el @font-face lo copiamos y pegamos dentro de nuestro archivos css. 
  3. Usamos esta fuente donde corresponde. 


Generadores de CSS, ayuda con css

Cuando diseño sitios web siempre me apoyo en estos sitios que generan código CSS perfecto y fácil de usar.

Tamaños para Media Queries en diferentes dispositivos

A continuación presento algunas medidas estándar para los más comunes dispositivos a los que nos podemos enfrentar a la hora de diseñar sitios web adaptables.

Que es "CSS3 Media Queries"

Nos permite escribir CSS (hojas de estilo), que reconocen el tipo de medio por el cual se está visualizando nuestro sitio web. Con CSS se pregunta sobre el tipo de medio, detectando ciertas condiciones y permitiendo crear estilos especiales para cada salida que reconoce.