Un poco de contexto… me encontraba trabajando en nuevo proyecto donde quiero compartir plantillas. En el sitio web quiero que al hacer clic se pueda entonces descargar un archivo, pero quiero que estos archivos estén almacenados en Google Drive.

Compartir un enlace en Google Drive tradicional es sencillo clic derecho en el archivo, luego a compartir y de ahí a obtener enlace.

Ahora seleccionamos que cualquier persona con el enlace puede acceder y ya tendríamos un enlace funcional.

Este enlace basta y sobra en la mayoría de los casos. ¿El problema? Que si utilizamos este enlace así como lo genera Google Drive, el visitante al hacer clic será redirigido al sitio de Google Drive (cosa que no nos conviene porque abandona nuestra web)

Imagina quieres ponerlo en un botón. Cuando el usuario haga clic se ira a otra pagina. Por ejemplo este botón:

(este es el botón malo mas abajo esta el modificado )

Entonces lo que necesitamos es crear un enlace de descarga directa. Para que al hacer clic el usuario descargue el archivo y no sea redireccionado.

¿Cómo lo hacemos?

Como crear un enlace de descarga directa de Google Drive

La clave para crear un enlace de descarga directa es el formato del enlace.

Por defecto el formato del enlace de Google Drive es para compartir. En el caso de los archivos de Office, por defecto pensado en abrirlos en su versión de docs google:

https://docs.google.com/spreadsheets/d/1e-n7sUy4Gajhamo8HkqjwZ-ZVFHm3r59/edit?usp=share_link&ouid=104655543325426634114&rtpof=true&sd=true

Y si se tratara de otro tipo de archivo, pensado para mostrar una ventana previa antes de la descarga:

https://drive.google.com/file/d/1h7Fuw20oqDADo0Gre8Vb1conwG9z2I8w/view?usp=share_link

Para convertir ambos enlaces a un enlace de descarga directa debemos copiar el código que se encuentra justo después de /d/ ese es el ID de nuestro archivo

Aquí puedes verlo resaltado en negrita:

https://drive.google.com/file/d/1h7Fuw20oqDADo0Gre8Vb1conwG9z2I8w/view?usp=share_link

Y debemos copiarlo al siguiente enlace:

https://drive.google.com/uc?export=download&id=NUESTRO_ID

Al reemplazar nos quedaría de la siguiente forma el enlace de descarga directa de Google Drive:

https://drive.google.com/uc?export=download&id=1h7Fuw20oqDADo0Gre8Vb1conwG9z2I8w

y listo ya hemos creado en enlace de descarga directa de Google Drive

Ahora mira la diferencia con el botón ya con un enlace de descarga directa de Google Drive:

La descarga incluso aparece que es desde nuestro dominio

Convertidor de enlaces online

Si no quieres hacer el proceso de forma manual Dont Worry!

He creado un convertidor de enlaces a enlaces de descarga directa de Google Drive

Puedes acceder desde el menú o haciendo clic aquí

Hoy no podrás decir que no haga cosas guay para ti

La entrada Crear enlaces de Descarga Directa de Google Drive se publicó primero en Hugo Parrales.

Agregar dominio de Cosmotown a BanaHosting

Hasta ese momento no había escuchado de ellos. Como sabes yo uso BanaHosting para mis webs, entonces es necesario configurar los Nameserver para que apunten a BanaHosting.

Aunque el ejemplo lo hare con BanaHosting, vale aclarar que el procedimiento es el mismo para la mayoría de Hosting

Configurar NameServer en Cosmotown

Los pasos a seguir son los siguientes:

1. Ingresa a tu cuenta de Cosmotown
2. Haz clic en la opción del menú lateral que dice Domains
3. Haz clc sobre el dominio que deseas configurar
4. Ahora haremos clic en la opción que dice Manage Domain

5. En el menu desplegable haremos clic en la primera opción «Domain Nameservers»

6. Esto nos mostrara una pantalla donde podremos introducir nuestros Nameservers

La opción que nos da Cosmotown es de hasta 4 Nameserver y 2 campos para subdominios. La mayoría de Hosting solo proveen 2 Nameservers de modo que los demas campos quedaran vacíos.

7. Ahora solo hacemos clic en «Save» y listo

Ahora solo es de esperar un poco a que se propaguen las DNS y configurar nuestro dominio a nuestro gusto.

Vale aclarar que también podríamos haber realizado la transferencia del dominio hacia otro registrador como Godaddy, Namecheap, Name, pero en todos los casos implica una inversión adicional.

¿Cuanto tiempo tarda Cosmotown en actualizar las DNS?

Por lo general el proceso es rápido y en cuestión de un par de minutos las DNS ya se han propagado.

Sin embargo ten en cuenta que en términos generales podría llegar a tardar hasta 24 horas.

La entrada Como configurar los Nameserver en Cosmotown se publicó primero en Hugo Parrales.

CSS para efecto de volteo o giro

Lo primero que debemos hacer es crear la clase en CSS que usaremos para la carta boca abajo (visión trasera) y crear una para la carta boca arriba (visión frontal). Ademas debemos crear un efecto de giro lo que también haremos con un poco de código en CSS

CSS del contenedor

1. El primer paso es establecer un contenedor. La estructura donde definiremos el resto de los campos del código

.container {
  perspective: 3000px;
  max-width: 960px;
  margin: 2em auto;
  text-align: center;
  font-size: 3em;
  display: flex;
  flex-wrap: wrap;
}

En este caso estamos usando unos parámetros básicos como max-width para establecer el tamaño máximo de nuestro contenedor. Establecemos un margen, un tamaño y centrado de texto.

Pero si observamos hemos colocado 2 aspectos importante. El primero display flex que básicamente es un modulo flexible y declaramos un flex-wrap de tipo wrap que básicamente para no complicarnos nos ayudara con los elementos que queremos colocar dentro de nuestro contenedor.

CSS de la carta o elemento

Ahora creamos el CSS de la carta o elemento que deseamos que gire

.card {
  width: 100px;
  height: 150px;
  transform-style: preserve-3d;
  transition: transform .5s;
  cursor: pointer;
  margin: 15px;
  margin-top: 30px;
  border-radius: 5px;
}

Aqui estamos creando 2 campos importantes el primero un width y un heigth que marcan el tamaño exacto de nuestra carta. Segundo los parámetros de transform-style donde colocamos preserve-3d para mantener la forma 3D al girar la carta y el tiempo en el que queremos que esta gire lo establecemos con transition. En este ejemplo 0.5 segundos

CSS de la figura

Este segundo elemento «Figure» lo usaremos para crear el contenedor propio de cada una de las imágenes que usaremos en la carta. La visión trasera y frontal.

.card figure {
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: auto;
    backface-visibility: hidden;
    box-shadow: 0 0 10px #4a4e69;
    border-radius: 5px;
}

CSS de la Imagen

Ahora haremos que la imagen que coloquemos vaya acorde al contenedor que hemos declarado en Figure

.image-custom {
  max-height: 100%;
  object-fit: cover;
  overflow: hidden;
  border-radius: 5px;
}

CSS del giro

El ultimo tramo de código CSS que usaremos sera para la carta en vista frontal y el efecto de giro.

.front {
  transform: rotateY(180deg);
}

.flipped {
  transform: rotateY(180deg);
}

Observa que ambos los usamos con el efecto que genera transform y en este caso con un rotate en Y. En este caso en 180 grados para lograr el efecto de giro de la carta.

HTML de la carta a girar

Ahora colocamos el código en HTML que corresponde a la carta que queremos girar

 <div id="carta" class="card" onclick="giro()">
    <figure class="back" >
      <img src="https://hugoparrales.com/wp-content/uploads/2022/12/bocaabajo.jpg" class="image-custom">
    </figure>
    <figure class="front">
      <img src="https://hugoparrales.com/wp-content/uploads/2022/12/dragonazul.jpg" class="image-custom">
    </figure>
  </div>

Función Javascript para voltear la carta

Si observas el código en HTML nosotros estamos llamando a la función en el div con id=»carta» y al declarar la función onclick (al hacer clic) llamada giro.

Entonces nuestra función en JS queda:

function giro() { 
   var invocation = document.getElementById("carta");
   invocation.classList.add("flipped");
}

Esta función sencilla en Javascript lo que hace es tomar el elemento con ID «carta» y le añade el atributo CSS «flipped»

Al hacer esto ocurre la magia con CSS donde se genera el efecto de volteo o giro de carta

Resultado Final

A continuación te dejo el efecto ya funcional con Yu-Gi-Oh de ejemplo

La entrada Efecto de volteo de carta con CSS y Javascript se publicó primero en Hugo Parrales.

Agregar dominio de Namecheap a BanaHosting

Para este arituculo usaremos a BanaHosting como ejemplo, pero el proceso de configuración es el mismo para todos los Hosting.

Configurar Nameserver o DNS personalizados

Lo que debemos hacer entonces para que nuestro dominio registrado en Namecheap apunte a nuestro Hosting externo es configurar los NS o DNS personalizados. Para ello solo sigue estos sencillos pasos.

1. Ingresa a tu panel de control en Namecheap
2. Haz en clic en Dominios
3. Ubica y haz clic en el dominio que deseas configurar con tus Nameserver
4. En la opción NAMESERVERS haz clic en la flecha para desplegar todas las opciones y selecciona Custom DNS

5. Ahora solo debes colocar los 2 Nameservers de tu Hosting

Los Nameserver usualmente son la dirección que comienza con ns(seguido de 4 números) seguido de tu Hosting

6. Ahora solo debes hacer clic en el cheque y listo haz completado la configuración de tus Namserver en Namecheap

¿Cuanto tiempo tarda Namecheap en actualizar las DNS?

El tiempo es variable. Sin embargo en la mayoría de los casos el proceso es de apenas unos 10 a 15 minutos.

No te desesperes si ves que ha pasado mas de este tiempo. Los cambios de DNS pueden tardar hasta 24 horas, de forma que es solo cuestión de tener paciencia.

La entrada Como configurar los Nameserver en Namecheap se publicó primero en Hugo Parrales.

Para que no te pase a ti te dejo en este rápido articulo como sumar 2 valores en Javascript de la forma correcta.

Función parseInt y parseFloat

Resulta que para poder sumar en javascript es necesario utilizar una función en concreto para números enteros y otra para numerosos decimales.

No es valido simplemente utilizar un operador aritmético como (+) dado que Javascript lo tomara como 2 lineas de texto y simplemente las concatenara (unira)

Entonces si nosotros tenemos este código:

var x = "2";
var y = "4";

var respuesta = x + y;

El resultado no sera 6 (que seria lo lógico porque 2 + 4 es 6) sino que será 24.

Si… esto porque Javascript toma por defecto a las variables como texto y no como numero. Entonces para poder sumar 2 números en Javascript necesitamos primero indicarle que esas variables son números.

Usaremos la función parseInt si los números que buscamos sumar son números enteros

Mientras que parseFloat la usaremos si la suma es con números decimales.

El código entonces quedaria asi:

var x = "2";
var y = "6";

var suma = parseInt(x) + parseInt(y);

Ahora si obtendremos la respuesta correcta que es 6.

Es importante aclarar que en este ejemplo lo hemos simplificado a unas variables textuales. Pero puede hacerse en combinación con procesos como el

document.getElementById("x").value;  

Lo que puede resultar muy útil por ejemplo para cálculos en tiempo real. Estos procesos son los que he aplicado por ejemplo en la Calculadora de salario.

La entrada Como sumar 2 valores en Javascript se publicó primero en Hugo Parrales.

Condicionales en Javascript

En Javascript al igual que en otros lenguajes de programación contamos con los llamados condicionales.

Los condicionales son elementos que permiten establecer una secuencia de paso a partir del valor o comparación con un valor de una variable que nosotros definimos.

Las condiciones básicas de Javascript son: if, else, else if, y switch

Condición if en Javascript

La condición if es una condición simple que determina si una declaración o statment es verdadera.

La estructura es simple:

if (condición) {
  //  Aqui va todo lo que pasara si la condición es verdadera :)
}

Establecer la condición queda a criterio del programador. Se pueden emplear variables dinámicas o fijas para poder ejecutar código.

Por ejemplo con una variable fija como una hora en especifico del dia:

if (new Date().getHours() < 12) {
  document.getElementById("demo").innerHTML = "Buenos dias!";
}

En el ejemplo anterior la función new Date().getHours() devuelve la hora actual y la compara con una variable fija que es el 12.

La función if en javascript también puede aplicarse con variables dinamicas

var n = document.getElementById("contador").value;
var x = document.getElementById("respuesta").value;
if (n < x) {
  var y = "La respuesta esta en tu corazon";
}

En el ejemplo anterior se utilizan dos variables dinámicas que salen de 2 elementos con Id establecido. La condición las compara y determina mediante una expresión y comparación matemática. En este ejemplo se busca determinar si «x» es mayor que «n»

Si se cumple que la condición if es verdadera entonces la variable «y» toma el texto que hemos establecido. Al cumplirse la condición if en nuestro código también podríamos ejecutar alguna función o llamar a algún elemento.

La entrada if en Javascript se publicó primero en Hugo Parrales.

Ya sea porque el Diseño lo amerita o porque es una petición puntual del cliente. En mas de una ocasión tendremos la necesidad de utilizar una Tipografía que no se encuentra dentro del repertorio de WordPress. Para ello te presento las siguientes soluciones:

Plugins de Tipografias Personalizadas para WordPress.

La forma mas sencilla de utilizar Fuentes Personalizadas en WordPress es mediante los Plugins. A continuación te muestro los mejores:

WP Google Fonts.

El Plugin WP Google Fonts es uno de los plugins mas populares para aumentar el repertorio de fuentes de Tipografía en nuestra instalación de WordPress.

La instalación de este sencillo plugin proveerá a nuestro WordPress mas de 700 fuentes Tipográficas listas para ser utilizadas con tan solo un par de clics.

Es importante recordar que si utilizamos una Tipografía Personalizada nuestro WordPress puede cargar mas lento. Por lo que es requerido realizar una optimizacion del mismo para no perjudicar nuestro SEO On Page.

Custom Fonts.

En ocasiones puede que las mas de 700 fuentes de Google Fonts no sean la solución. Debido a que la Tipografía que deseamos utilizar no se encuentra incluida dentro de Google Fonts o porque es una creación propia.

En estos casos (como el mío) el mejor Plugin es Custom Fonts.

Este plugin a diferencia del anterior nos permite cargar de forma directa a nuestro WordPress una Fuente Tipográfica Personalizada en formato woff, woff2, ttf, eot, otf, svg.

En lo personal el tipo de fuente que mejor se adapta es el «otf». De forma que si al cargar una nueva Fuente Tipográfica te da problemas al momento de visualizar la web, la solución suele ser convertir la Tipografía en formato «otf».

Para utilizar este plugin, basta con instalarlo desde el repertorio de plugins de WordPress y luego ir Apariencia y seleccionar Custom Fonts.

Una vez ahí, el proceso es tan sencillo como cargar la nueva Fuente Personalizada en nuestro WordPress seleccionado el formato respectivo y asignando un nombre a la misma. En la imagen puedes ver como yo he creado las fuentes «Colonna» y «University Roman».

Tipografía Personalizada en WordPress con CSS.

Si no eres muy partidario de los Plugins y prefieres mantener tu WordPress lo mas limpio posible utilizar un poco de CSS es la mejor solución.

Lo primero que debemos hacer es descargar la Fuente de Tipografía que usaremos en nuestro WordPress y generar el código CSS respectivo. Para ello te recomiendo que utilices Fontsquirrel.

Al ingresar debemos subir nuestra Tipografía y seleccionar la opción «Optimal». El proceso es automático y al finalizar nos mostrara el botón para descargar el Kit.

Al descargarse el archivo, este viene comprimido en .ZIP por lo que deberás descomprimirlo. Eso te generara una carpeta como la que te muestro en la imagen.

Deberemos subir el contenido de dicha carpeta al directorio de nuestro sitio web. Lo ideal es hacerlo en una carpeta llamada «Fuentes» u otro nombre que sea fácil de recordar.

Dentro de la carpeta deberemos modificar el archivo «stylesheet.css». El cual te mostrara un código como el siguiente:

@font-face {
    font-family: 'university-roman-normalRg';
    src: url('university-roman-normal-webfont.woff2') format('woff2'),
         url('university-roman-normal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

Debemos remplazar las url por la dirección exacta de nuestro sitio web y ubicación donde hemos subido los archivos de la Tipografía Personalizada. De forma que el código quedaría de la siguiente forma:

@font-face {
    font-family: 'university-roman-normalRg';
    src: url('https://AQUI VA EL NOMBRE DE TU WEB.com/fuentes/university-roman-normal-webfont.woff2') format('woff2'),
         url('https://AQUI VA EL NOMBRE DE TU WEB.com/fuentes/university-roman-normal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

Ahora ya tenemos el código listo para utilizar nuestra Tipografía Personalizada en WordPress. Pero ¿Donde colocamos el código?

Para esto existen varias alternativas y dependerá del Tema que estemos utilizando. Sin embargo, la solución mas sencilla es insertar el código dentro de la opción «Código CSS Personalizado» que incluye la mayoría de temas de WordPress.

Recuerda que el único inconveniente de esto es que al actualizar el Tema puede que se pierdan los cambios personalizados. Para evitar esto puedes utilizar un Child Theme.

La entrada Fuentes Personalizadas en WordPress se publicó primero en Hugo Parrales.

Existen varias formas de convertir un Tabla de HTML a Excel utilizando Php. En este articulo te mostrare como hacerlo de la forma mas simple. Sin la necesidad de recurrir a librerías externas.

Código para convertir HTML a Excel

El código que utilizaremos para pasar una Tabla en HTML al formato Xls (Excel) es el siguiente:

/* HTML a Excel
Autor: Hugo Parrales
Website: hugoparrales.com
version: 0.1
*/ 
//establecemos el timezone para obtener la hora local
date_default_timezone_set('America/El_Salvador');
 
//la fecha y hora de exportación sera parte del nombre del archivo Excel
$fecha = date("d-m-Y H:i:s");
 
//Inicio de exportación en Excel
header('Content-type: application/vnd.ms-excel');
header("Content-Disposition: attachment; filename=Convertido_$fecha.xls"); //Indica el nombre del archivo resultante
header("Pragma: no-cache");
header("Expires: 0");

//Aqui va la tabla HTML
echo "<table>
  <tr>
                      <th style='background:#CCC; color:#000'>
                      Codigo
                      </th>
                      <th style='background:#CCC; color:#000'>
                      Producto
                      </th>
                      <th style='background:#CCC; color:#000'>
                      Precio
                      </th>
  </tr>
  <tr>
                      <td>
                      CD008
                      </td>
                      <td>
                      Maquina #1
                      </td>
                      <td>
                      $1000
                      </td>
  </tr>
  <tr>
                      <td>
                      CX018
                      </td>
                      <td>
                      Maquinas #2
                      </td>
                      <td style='background:yellow'>
                      $700
                      </td>
  </tr>
  <tr>
                      <td>
                      FX078
                      </td>
                      <td>
                      Maquinas #3
                      </td>
                      <td>
                      $150
                      </td>
  </tr>
  <tr>
                      <td>
                      CA-862
                      </td>
                      <td>
                      Maquinas #4
                      </td>
                      <td>
                      $785.50
                      </td>
  </tr>
  </table>";

El código es sencillo y fácil de implementar. Ademas el contenido de tabla HTML puede ser dinámico y ser extraído de tu Base de Datos.

Código explicado paso a paso

Para poder convertir una Tabla HTML a Excel utilizando Php debemos incluir las siguientes lineas de header:

header('Content-type: application/vnd.ms-excel');
header("Content-Disposition: attachment; filename=Convertido_$fecha.xls"); //Indica el nombre del archivo resultante
header("Pragma: no-cache");
header("Expires: 0");

La primera linea indica el tipo de aplicación que deseamos obtener. La segunda linea es la que da el nombre al archivo convertido. Como puedes ver después del «filename» he utilizado una combinación de variables.

filename=Convertido_$fecha.xls

La variable ($fecha) me permite que cada vez que el archivo sea convertido tenga un nombre diferente y no me genere duplicados. Por ello ademas en el código he incluido la siguiente instrucción:

$fecha = date("d-m-Y H:i:s");

El ultimo paso es incluir el contenido de tu Tabla HTML en un Echo

//Aqui va la tabla HTML
echo "<table>
  <tr>
                      <th style='background:#CCC; color:#000'>
                      Codigo
                      </th>
                      <th style='background:#CCC; color:#000'>
                      Producto
                      </th>
                      <th style='background:#CCC; color:#000'>
                      Precio
                      </th>
  </tr>
  <tr>
                      <td>
                      CD008
                      </td>
                      <td>
                      Maquina #1
                      </td>
                      <td>
                      $1000
                      </td>
  </tr>
  <tr>
                      <td>
                      CX018
                      </td>
                      <td>
                      Maquinas #2
                      </td>
                      <td style='background:yellow'>
                      $700
                      </td>
  </tr>
  <tr>
                      <td>
                      FX078
                      </td>
                      <td>
                      Maquinas #3
                      </td>
                      <td>
                      $150
                      </td>
  </tr>
  <tr>
                      <td>
                      CA-862
                      </td>
                      <td>
                      Maquinas #4
                      </td>
                      <td>
                      $785.50
                      </td>
  </tr>
  </table>";

Como implementar el código para pasar una Tabla HTML a Xls

Para poder convertir una Tabla de HTML a Excel utilizando el código Php mostrado lo que debemos hacer es crear un archivo y luego enviarle las variables al mismo. Por ejemplo yo nombrare a este archivo como «convertir-excel.php»

Ahora lo que debemos hacer es desde nuestra pagina con la Tabla HTML enviar el contenido de la misma a nuestro archivo «convertir-excel.php»

La descarga del archivo inicia de forma automática con el nombre y la hora que hemos colocado en el código previamente.

Ejemplo de como pasar una Tabla HTML a Excel

A continuación te muestro un ejemplo practico. Deseo pasar la siguiente tabla a un archivo de Excel.

Para convertir la Tabla HTML a Excel haz clic en el siguiente botón:

Al hacer clic sobre el botón, la descarga iniciara automáticamente y te generara un archivo llamado «Convertido_(aqui muestra le fecha y hora).

Al abrir el archivo es probable que te aparezca un mensaje como el siguiente:

El mensaje es normal y lo único que debemos hacer es hacer clic en «Si» para que Excel nos muestro nuestra Tabla convertida.

Como darle estilo a la Tabla convertida en Excel con Php

Los estilos que podemos aplicar utilizando este código son limitados, sin embargo pueden ser mas que suficientes si lo que buscamos en una solución rápida.

Para aplicar estilos a nuestra Tabla Convertida debemos incluirlos dentro del código HTML impreso en nuestro Echo.

echo "<table>
  <tr>
                      <th style='background:#CCC; color:#000'>
                      Codigo
                      </th>
                      <th style='background:#CCC; color:#000'>
                      Producto
                      </th>
                      <th style='background:#CCC; color:#000'>
                      Precio
                      </th>
  </tr>

Como puedes ver en el código en el encabezada de mi Tabla HTML he colocado un estilo con «background: #CCC».

Si deseas por ejemplo que tu Tabla ocupe el 100% de la hoja visible de Excel y tenga bordes, debieras utilizar el siguiente codigo:

<table style='border: 1px solid black; border-collapse: collapse;' width='100%'>

Ademas recuerda que también puedes imprimir tus H1 y H2 dentro del archivo de Excel e inclusive saltos de linea con <br> y <hr> colocando:

echo "<h2 style='color:#006c3c'> hugoparrales.com </h2>";
echo "<h4> San Salvador, El Salvador <br> <hr>";

echo "Please complete the following products with unit prices and final prices in order to assess the purchase and import of the same<br>";

Dando un resultado mas atractivo:

Existen soluciones mas completas para convertir HTML a Excel como por ejemplo la librera PhpExcel. Sin embargo, la que te muestro aquí es la forma mas rápida de exportar y utilizar tus tablas en Excel.

Como puedes ver convertir HTML al formato de Excel utilizando Php no es complicado. ¿Tienes dudas? déjalas en los comentarios y tratare de ayudarte.

La entrada Tabla HTML a Excel con Php se publicó primero en Hugo Parrales.