Cómo hacer tu propio tablero de criptomonedas

Anuncio

Con todas las conversaciones de bifurcación, estafas, sitios web que roban tu CPU para extraer altcoinsy la volatilidad de los precios locos, las criptomonedas ("cripto") ciertamente se están volviendo más convencionales.

Si ha invertido o está considerando comprar criptomonedas, necesitará una forma de controlar sus precios en tiempo real. Afortunadamente, puedes construir fácilmente un tablero de cifrado usando nada más que HTML y CSS Aprenda HTML y CSS con estos tutoriales paso a paso¿Tienes curiosidad por HTML, CSS y JavaScript? Si cree que tiene una habilidad especial para aprender a crear sitios web desde cero, aquí hay algunos tutoriales paso a paso que vale la pena probar. Lee mas .

Nota: Comprar criptomonedas es una inversión altamente especulativa. Nunca invierta más de lo que puede pagar, y esté preparado para perderlo todo de la noche a la mañana.

Empezando

Este panel de control funciona con un widget gratuito proporcionado por coinmarketcap.com. Este excelente sitio web muestra estadísticas y precios actuales de miles de criptomonedas. Comience seleccionando la moneda de su elección o ingresando una moneda en el servicio de búsqueda en la parte superior derecha.

Una vez seleccionado, serás llevado a resumen de monedas página, donde se muestran varias estadísticas, gráficos y análisis sobre la moneda elegida. Dirígete a la Herramientas lengüeta. Aquí es donde verá un widget listo para usar, que muestra datos específicos sobre la moneda elegida. Siéntase libre de experimentar con el Personaliza este widget configuración, pero por ahora, el widget básico es suficiente. Copie el código de la Widget del sitio web cuadro o mantenga la página abierta para su uso posterior.

Así es como se ve el código del widget para Bitcoin:

Si te gusta Bitcoin, Ethereum, Onda, Dogecoin, o cualquier otro de los más de 1,000 alternativa (alt) monedas disponibles, este proceso es exactamente el mismo: encuentra una moneda, luego copia el código del widget.

Si quieres ponerte elegante con la automatización, puedes usar el API Ticker y una herramienta de programación como Cron Cómo programar tareas en Linux con Cron y CrontabLa capacidad de automatizar tareas es una de esas tecnologías futuristas que ya está aquí. Cada usuario de Linux puede beneficiarse del sistema de programación y las tareas del usuario, gracias a cron, un servicio en segundo plano fácil de usar. Lee mas para realizar casi todo lo que quieras. Está un poco más allá del alcance de este artículo, pero podría crear una alerta por correo electrónico si el precio cae por debajo de cierto umbral, por ejemplo.

Construyendo la página web

Ahora que tiene el widget, debe crear una página HTML básica para mostrarlo. Usando su editor de texto favorito, cree un nuevo archivo HTML llamado dashboard.html.

Aquí está el código de inicio que necesita:

Pegue su código de widget HTML entre el cuerpo Etiquetas Volviendo a Bitcoin, todo el código se ve así:

Eso es todo al respecto. Realmente es así de simple para crear su propio tablero de criptomonedas.

Haciéndolo bonito

Si bien este tablero es técnicamente terminado, no es genial. El widget llena la pantalla horizontalmente, pero no es muy alto verticalmente. Vamos a diseñarlo con Hojas de estilo en cascada 5 pasos de bebé para aprender CSS y convertirse en un hechicero CSS increíbleCSS es el cambio más importante que las páginas web han visto en la última década, y allanó el camino para la separación de estilo y contenido. En la forma moderna, XHTML define la estructura semántica ... Lee mas (CSS)

Debajo de la título, Agrega un estilo etiqueta:

Dentro de estas etiquetas de estilo es donde escribirás tu CSS. Esto es lo que necesitas:

.coinmarketcap-currency-widget {ancho: 33%; margen: 100px automático; }

Este simple CSS hace dos cosas. Utilizando el Modelo de objeto de documento JavaScript y desarrollo web: uso del modelo de objetos de documentoEste artículo le presentará el esqueleto del documento con el que funciona JavaScript. Con un conocimiento práctico de este modelo de objeto de documento abstracto, puede escribir JavaScript que funcione en cualquier página web. Lee mas (DOM), apunta al coinmarketcap-currency-widget clase. Esta clase es el contenedor principal para el widget, por lo que este comando le indica a su navegador web que aplique los siguientes estilos a ese elemento en particular.

El ancho del widget se establece en 33%, lo que garantiza que ya no se vea estirado cuando se deja en la opción predeterminada (que es 100% en este caso).

Finalmente, se agrega un margen de 100 píxeles en la parte superior e inferior, con el margen izquierdo y derecho obteniendo un margen de auto. Esto aleja el widget de la parte superior de su navegador y lo centra horizontalmente.

Casi no hay límite en cuanto a qué tan lejos puede llegar con su estilo de este widget. ¿Quizás te gusta el texto rojo o el fondo azul? ¿Qué tal un texto intermitente? ¡El cielo realmente es el límite!

Agregar más monedas

Ahora que has clavado lo básico, es hora de agregar más monedas. Incluso si solo posee una moneda, diversificar su tablero tiene varios beneficios.

Como un regla suelta (aunque cualquier cosa puede suceder en el salvaje oeste de las criptomonedas), las monedas alternativas suben cuando Bitcoin baja, aparte de cuando Bitcoin se hunde absolutamente, se lleva todo lo demás.

Al monitorear otras monedas, a menudo puede ver claramente que el dinero fluye de una a otra. Si está buscando comprar una nueva moneda, agregarla a su tablero de instrumentos significa que posiblemente pueda detectar una tendencia o un mínimo diario para obtener una ganga.

Siguiendo los pasos anteriores, siga adelante y obtenga el código del widget para cualquier otra moneda que desee rastrear. Simplemente péguelos debajo del rastreador de Bitcoin de esta manera:

No necesitas el currency.js para cada widget Solo lo necesita una vez por página.

Si vuelve a cargar su tablero, verá que no se ve muy bien. ¡Todas las monedas están apiladas verticalmente, y hay grandes espacios entre ellas! Deberá modificar el CSS para que estos widgets se vean mejor para varias monedas.

Al ajustar el ancho y el margen de cada contenedor de widgets, puede alinear múltiples widgets horizontalmente, de esta manera:

ancho: 23%; margen: 10px 1%; flotador izquierdo;

Con este mismo CSS, es posible apilar tantos widgets como desee, aunque es posible que deba modificarlo ligeramente después de unos 12 widgets.

Un último toque final es hacer que el tablero se recargue automáticamente, asegurando que siempre tenga los últimos precios.

Dentro de cabeza etiquetas en la parte superior de su documento, pegue esta metaetiqueta:

Esto actualizará su página cada X segundos, donde X se especifica dentro contenido. El código anterior actualizará la página cada 60 segundos. Cambie esto a lo que quiera, siempre que ingrese el número en segundos.

Mantenerse cuerdo

Ahora que su tablero de criptomonedas está completo, ya no tiene que verificar coinmarketcap.como coinbase.como cualquier sitio web que use para controlar sus compras. Simplemente no te vuelvas loco comprobando los precios cada minuto.

Déjelo funcionando en su computadora, o tal vez incluso configúrelo en un Raspberry Pi y haz que se ejecute en tu pasillo!

Si está buscando verificar los precios en movimiento, eche un vistazo a nuestra guía para las mejores aplicaciones de Android de criptomonedas Manténgase actualizado sobre su criptomoneda con estas aplicaciones de AndroidHacer un seguimiento del cambio de moneda virtual y el comercio diario puede ser divertido y una forma de aumentar sus ganancias después de un buen día de extracción. Lee mas , y no olvides leer nuestra guía sobre todo lo que necesitas saber antes de comprar criptomonedas.

¿Has construido un tablero criptográfico? ¿Dónde pusiste el tuyo? ¡Háganos saber en los comentarios a continuación!