Hack Your Life: Cómo hacer tu propia tarjeta de presentación digital

[Actualización 29 de septiembre de 2018: Liwei y yo lanzamos https://firstnamebasis.app/ - un servicio gratuito para generar su tarjeta de visita digital personal]

Las tarjetas de visita son bastante difíciles de llevar.

Nunca se sabe cuántos llevar a una reunión o un evento relacionado con el trabajo. Y está ese momento incómodo a mitad del apretón de manos cuando te das cuenta de que no tienes tarjetas de visita.

A pesar de todo el alboroto, las tarjetas de presentación siguen siendo una gran herramienta para intercambiar información de contacto. ¿Pero podemos hacer esto sin necesidad de tarjetas de visita físicas?

Escanear y guardar

¿Qué pasa si todo lo que se necesitó para intercambiar información de contacto fue un simple escaneo y guardar?

Imagínese esto: está tratando de obtener información de contacto de la persona A. La persona A muestra un código QR en su teléfono, y todo lo que tiene que hacer es escanear su teléfono usando la cámara de su iPhone. Su información de contacto se muestra automáticamente en su teléfono y usted presiona el botón Guardar. Voila, ahora tienes su información de contacto en tu lista de Contactos.

Si actualmente está en su computadora de escritorio / portátil, es posible que desee tomar su teléfono para probarlo.

Código QR para mi tarjeta de visita digitalInformación de contacto que se muestra en el sitio web móvil (izquierda) y VCF en la aplicación Contactos después de la descarga (derecha)

Todos los campos en el sitio web móvil son interactivos. Si tocaste el campo del número de contacto, marcarías automáticamente el número que se muestra (no mi número de teléfono móvil real).

Después de hacer clic en el botón de descarga, se descargará un archivo de contacto virtual (VCF) y se sincronizará con su aplicación de contactos al instante.

Bastante simple, ¿no es así?

Tutorial: 7 pasos sencillos

¡Ahora puede crear su propia tarjeta de visita digital! No necesita tener experiencia en codificación para hacer esto. Le explicaré qué hacer exactamente. ¡Siéntase libre de dejar comentarios si se atasca!

Paso 1: crea una cuenta de GitHub (si aún no tienes una)

Comencemos creando una cuenta de GitHub e iniciando sesión. La mayor parte de nuestro trabajo se realizará en GitHub.

https://github.com/join

¿Qué es el GitHub?
GitHub es una plataforma utilizada tradicionalmente por los ingenieros de software para almacenar su código y realizar un seguimiento de los cambios que se han realizado a lo largo del tiempo (también conocido como control de versiones).
Pero para nuestros propósitos, tratemos a GitHub como un gigantesco documento de Word que almacena toda nuestra información de contacto. Aquí también es donde haremos cambios en el código.

Paso 2: bifurcar desde mi repositorio de código (repo)

En este paso, vamos a hacer un tenedor, una copia, de mi repositorio. Queremos hacer esto para que pueda reemplazar mi información de contacto con la suya.

¿Qué es un repositorio?
Un repositorio, o repositorio para abreviar, es un lugar donde se guardan los archivos. Imagínelo como un cubo o carpeta que contiene un montón de documentos de código.
¿Qué es un tenedor?
Una bifurcación es una copia de un repositorio. Bifurcar un repositorio le permite experimentar libremente con los cambios sin afectar el proyecto original.

Abra la ventana de su navegador y vaya a la siguiente url (asegúrese de haber iniciado sesión en su cuenta de GitHub): https://github.com/prestonlimlianjie/digital-namecard

Repositorio de GitHub que contiene todos los archivos relevantes.

Haga clic en el botón "Bifurcación" en la esquina superior derecha de la página. ¡Espera unos momentos!

Bifurcación en progreso! Me encanta cómo hay un tenedor literal en la imagen.

Debería ver un repositorio idéntico, pero en lugar de tener un nombre de prestonlimlianjie / digital-namecard en la parte superior izquierda, el repositorio ahora será [your_username] / digital-namecard. En mi caso, es preston-test / digital-namecard. ¡Ahora ha creado un tenedor que le pertenece solo a usted!

¡Tu repositorio recién bifurcado!

¡Felicidades, has creado un tenedor a partir de mi repositorio! Ahora solo tenemos un último paso preparatorio antes de saltar al código.

Paso 3: sube tu foto de perfil y el logotipo de tu empresa

Deberá preparar una foto de perfil y el logotipo de la empresa, ya sea en .png, o .jpg, o .svg.

Haga clic en el botón "Cargar archivos" en la esquina superior derecha.

El botón

Llegará a la pantalla de carga. ¡Arrastra y suelta tu foto de perfil y el logotipo de tu empresa!

La página de carga.

Mi foto de perfil es user.png y el logotipo de mi empresa es icon.png.

Una vez que los archivos se hayan cargado en la página, haga clic en el botón "Confirmar cambios" para guardar los archivos en el repositorio.

¡No olvides guardar!

Debería ver sus archivos en la página principal del repositorio ahora.

user.png e icon.png ahora se pueden encontrar en el repositorio.

Y ahora estamos listos para sumergirnos en el código. Pero antes de hacerlo, tomemos un pequeño desvío sobre cómo funciona la tarjeta de presentación digital. Hay 3 componentes principales:

  1. El código QR que, una vez escaneado, lleva al usuario al sitio web de su tarjeta de presentación digital
  2. El sitio web principal para dispositivos móviles que muestra la tarjeta de presentación digital con su información de contacto; esto se crea principalmente utilizando HTML.
  3. El archivo de contacto virtual (VCF) que se descargará del sitio web móvil y se guardará en la aplicación Contactos del teléfono.

Tendremos que hacer cambios en los 3 componentes para hacer suya la tarjeta de presentación digital.

Pero demos un paso a la vez, comenzando con el HTML.

Paso 4: edite el HTML

¿Qué es el HTML?
HyperText Markup Language (HTML) es el lenguaje responsable de los sitios web.
Cuando utiliza un navegador (Chrome, Firefox, Safari, etc.) para acceder a un sitio web, el navegador realmente recibe HTML, que es un montón de código. El navegador luego lee el HTML y crea los sitios web visualmente atractivos que estamos acostumbrados a ver.
Sitio web como lo ve un usuario (izquierda) y el código HTML subyacente (derecha) leído por el navegador para generar la versión del sitio web que se ve a la izquierda.

Comencemos abriendo index.html en GitHub. Para ello, haga clic en las palabras index.html en el repositorio.

Ahora verá el archivo HTML en toda su gloria.

No te asustes, HTML no morderá.

Para editarlo, debemos hacer clic en el botón de edición, el que tiene el ícono de lápiz en la parte superior izquierda.

¡El editor de GitHub está listo para usar!

Hay algunas cosas que tenemos que editar en el HTML. ¡He resaltado las áreas en el código que debes reemplazar!

Nota:
La mayoría de los lenguajes de codificación, incluido HTML, son bastante particulares sobre la sintaxis. Así que haz tu mejor esfuerzo para reemplazar solo partes del código que especifique.
Si borra accidentalmente un carácter, recuerde esta regla: el código funciona como una puerta: si abre algo, debe cerrarlo. Por ejemplo, si hubiera una llave angular de apertura <, también tendría que haber una llave de cierre>.

La foto de perfil (preston.jpg) y el logotipo (assets / govtech-logo-blue.svg)

Reemplace preston.jpg con el nombre de su foto de perfil que desea usar.
Reemplace assets / govtech-logo-blue.svg con el nombre de su archivo de logotipo.

¡Pan comido!

El nombre (Preston Lim), el título (Ingeniero de software asociado) y el nombre de la empresa (División de ciencia de datos, GovTech)

Reemplace Preston Lim con su nombre.
Reemplace ingeniero de software asociado con su título.
Reemplace la División de Ciencia de Datos, GovTech con el nombre de su empresa.

Lentamente avanzando!

Ahora viene una parte un poco complicada. Tienes que hacer cada uno de estos pasos dos veces. ¡Presta mucha atención!

La dirección de correo electrónico (preston@data.gov.sg), el número de teléfono (+659123–4567), la URL del sitio web (tech.gov.sg) y la dirección de la empresa (1 Fusionopolis, Sandcrawler, # 09-01, 135877)

Reemplace preston@data.gov.sg con su dirección de correo electrónico. Haga esto en los dos lugares resaltados a continuación.

¡Hazlo dos veces!

Reemplace +6591234567 con su número de teléfono. Haga esto en los dos lugares resaltados a continuación. (Sé que son un poco diferentes, pero en realidad no importa)

¡Dos veces más!

Reemplace https://www.tech.gov.sg con la URL de su sitio web. Haga esto en los dos lugares resaltados a continuación.

Ya casi!

Y ahora presta mucha atención. Reemplazaremos 1 Fusionopolis, Sandcrawler, # 09-01, 135877 con la dirección de su empresa (esta es la segunda cosa que se destaca).

El primer bloque resaltado es la URL de una búsqueda en Google Maps de la dirección de su empresa. Lo que quiere hacer ahora es ir a Google Maps e ingresar la dirección de su empresa, y copiar y pegar la URL resultante. Reemplace el bloque de código resaltado con la URL.

¡El último lo prometo!

¡Desplácese hasta el final de la página y presione "Confirmar cambio"!

¡Hurra!

¡Ahora hemos terminado de editar el HTML!

Paso 5: Crea tu sitio web usando las páginas de GitHub

¡Ya hemos terminado de editar el sitio web principal para dispositivos móviles! Sin embargo, tenemos un problema: el sitio web actualmente se encuentra en el repositorio de GitHub como un archivo HTML. ¿Cómo lo hacemos para que el archivo HTML se muestre a cualquiera que quiera verlo?

Tenemos que alojar nuestro sitio.

¿Qué es el hosting?
El alojamiento es el proceso de conectar sus archivos HTML (y, por lo tanto, su sitio web) a Internet. Su sitio web obtiene una URL, una dirección a la que las personas pueden acceder en Internet si desean acceder a su sitio web.

Afortunadamente, GitHub tiene un servicio de alojamiento llamado GitHub Pages. ¡Procedamos a alojar nuestro archivo HTML!

Hagamos clic en el botón Configuración en algún lugar en la parte superior y central de la página.

¿Puedes encontrar el botón Configuración? Está cerca del botón

Debería ver una página similar a la que se muestra a continuación. Desplácese hacia abajo hasta que vea "Páginas de GitHub".

Página de configuración de su repositorio.

Haga clic en el botón "Ninguno" en el campo Fuente. Debería ver un menú desplegable.

Configuración de páginas de GitHub: seleccione la rama maestra como fuente

Seleccione "rama maestra". Al hacerlo, le estás diciendo a las páginas de GitHub que conviertan tu repositorio en un sitio web en vivo.

Haz clic en Guardar. Se generará una URL. Esta es la URL de su sitio móvil que contiene la tarjeta de visita digital.

Haga clic en la URL: ¡debería ver un sitio web lleno de sus datos de contacto!

Voila!

Paso 6: Edite el VCF

Ahora, procedemos a modificar el VCF.

El VCF es el archivo que se descarga y guarda en la aplicación Contactos cuando alguien hace clic en el botón "Descargar" en el sitio web.

Regrese a la página principal del repositorio. Haga clic en el archivo user.vcf.

Debe llegar a la página de vista previa para el VCF. Haga clic en el botón editar (el icono del lápiz en la parte superior derecha de la página).

He resaltado las regiones que deben reemplazarse con su información de contacto. ¡Tenga mucho cuidado de no eliminar los punto y coma!

Nota sobre la sintaxis de VCF:
Si desea insertar una nueva línea, debe agregar \ n en la línea.
Si desea insertar una coma, debe agregar \, en la línea.

Estos son los campos que deben editarse y lo que significan:

N: nombre
FN: Nombre completo
ORG: Organización
TÍTULO: Título del trabajo (\ n es la sintaxis de una nueva línea)
CORREO ELECTRÓNICO: Dirección de correo electrónico
TEL: Número de móvil
item1.ADR: Dirección
item2.URL: URL del sitio web

¡Haga clic en el botón "Confirmar cambios" para guardar el VCF!

Ahora que hemos terminado con 2 de los 3 pasos principales: editar el HTML y el VCF, ¡todo lo que nos queda por hacer es crear el código QR que guía a sus usuarios a su sitio web!

Paso 6: cree el código QR para su tarjeta de presentación digital

Vaya a cualquier sitio web gratuito de generador de códigos QR. Utilicé qr-code-generator.com.

Una vez que esté allí, ingrese la URL de su sitio web de páginas de GitHub y genere el código QR. ¡Recuerde descargarlo y guardarlo!

Genere el código QR específico para la URL de sus páginas de GitHub

Ahora que tiene el código QR, escanee con su teléfono móvil. ¡Su tarjeta de presentación digital ya está lista para usar! Tome una foto o descárguela en su teléfono / computadora.

¡Felicitaciones, tiene su propia tarjeta de presentación digital! Eso no fue tan malo, ¿verdad? Si lo encuentra fácil, puede echar un vistazo al siguiente paso opcional a continuación: ¡más personalización!

Paso 7 (opcional): ¡hazlo tuyo!

Esto es para usted si desea hacer un esfuerzo adicional y personalizar aún más su tarjeta de visita digital. Puede cambiar el color del sitio web haciendo ediciones en el archivo main.css en el mismo repositorio. Le dejaré que lo resuelva, y debe usar Google para buscar la documentación de CSS.

¿Qué es el CSS?
Hojas de estilo en cascada o CSS es un lenguaje que determina cómo se ve su sitio web HTML.
Aquí hay una analogía divertida. Si un sitio web era un ser humano, el HTML es la estructura esquelética del ser humano, y el CSS es la piel y el cabello del ser humano.

Solo para darle una idea de lo que se puede hacer: he hecho algunas variaciones del diseño de la tarjeta de presentación digital que ve arriba usando una herramienta de diseño llamada Figma.

Diseños alternativos del sitio web en Figma

Pensamientos finales

Ahora que ya tiene su tarjeta de presentación digital funcionando sin esfuerzo, ¡le desafío a imaginar qué más puede construir con las mismas herramientas!

¡Gracias por darle una puñalada a este tutorial! ¡Espero que hayas disfrutado el tutorial y te haya gustado la creación de una tarjeta de presentación digital personalizada tanto como a mí!

Si tiene algún comentario o pregunta, ¡envíeme un mensaje! ¡Es la primera vez que escribo un tutorial, y espero escuchar lo que piensan ustedes!