Dashboard de Tenis en Tiempo Real con WebSocket y JavaScript

Imagen
¿Por qué utilizar WebSocket en lugar de una API REST? El caso de Tennis API Cuando trabajamos con APIs, normalmente pensamos en solicitudes HTTP tradicionales donde una aplicación consulta información cada cierto tiempo. Sin embargo, para aplicaciones que requieren datos en tiempo real, existe una alternativa mucho más eficiente: WebSocket. Mientras exploraba las capacidades de Tennis API encontré su integración mediante Socket.IO, una tecnología que permite recibir actualizaciones en tiempo real sin necesidad de realizar consultas constantes al servidor. ¿Cómo funciona una API REST tradicional? Con una API REST, la aplicación debe preguntar periódicamente si existen nuevos datos. Por ejemplo: setInterval(async () => { const response = await fetch("/live-scores"); const data = await response.json(); console.log(data); }, 5000); En este caso la aplicación realiza una consulta cada 5 segundos. El problema es que muchas veces no existe información nue...

Comparador de Propuestas Laborales en PHP: Evalúa Ofertas de Empleo

Bienvenidos a este su blog, espero estén teniendo un buen día un buen inicio de año llenos de muchos propósitos, quizá buscar un nuevo trabajo o cambiar de sector, pensando en este post les quiero compartir una ejemplo de una página WEB dinámica hecha en PHP que les puede servir de apoyo para tomar una decisión importante en su vida profesional.

Hay veces que cuando recibimos una propuesta no sabemos muy bien como compararla para tomar una decisión o hay ocasiones que no recordamos todas las prestaciones que tenemos y en esta página tenemos las prestaciones más comunes en México que nos ayudan a tener a la mano la información y poder comparar de manera sencilla los montos.

Antes de comenzar con la parte de programación, les quiero compartir algunos datos:

  • Salario Bruto: es el salario antes de que te retengan impuestos.
  • Salario Neto: Es el salario ya libre o el que realmente te depositan.
  • Por La ley Federal de trabajo se deben otorgar como mínimo 15 días de aguinaldo y debe pagarse antes del 20 de Diciembre de cada año si trabajaste el año completo con la misma empresa, si no te deben dar el monto proporcional al tiempo trabajado.
  • Los días de Vacaciones como mínimo  por Ley en México son el primer año trabajado 6 días, segundo año  8 días, 3 años 10 días, 4 años 12 días , 5 a 9 años 14 días, de 10 a 14 años 16 días, de 15 a 19 años 18 días, de 20 a 24 20 días, de 25 a 29 años son 22 días, 30 a 34 años 24 días
  • PTU es Participación de los Trabajadores en las Utilidades,debe entregarse entre mayo y junio
  • La prima vacacional por Ley es de por lo menos 25% de los salarios que correspondan las vacaciones (punto anterior)

Objetivo de la página

Permitir comparar una propuesta salarial vs el sueldo actual, esto ingresando los montos de cada prestación por mes, esta página WEB lo que hará será calcular el por año los importes y al final mostrarnos un mensaje de la diferencia entre los monto.NOTA: El programa no guarda la información ingresada 


Código

Página WEB

<html>
    <head>
        <meta charset='utf-8' > 
 <title>Comparar Propuesta Salarial</title>
    </head>
<body>
<p>
Página para comparar tu salario actual vs una Propuesta de un nuevo empleo
<p>
Ingresa los montos o porcentajes de tu prestación actual y de la nueva propuesta
<p>
Para la sección de otras prestaciones solo coloca una X si lo tienes o tendras 
<p>
<br><img src="https://ejemploprogramacionparatodos.000webhostapp.com/salarios.png" height="300" width="300" aling = "center" > <br>

<form action="CompSalario.php" method="GET">
 <table>
 <td>
   <tr>
<td>Monto Prestación</td>
<td>Sueldo Actual</td>
<td>Propuesta Salarial</td>
   </tr>
   <tr>
        <td>Salario Mensual con impuestos</td> 
<td><input type="text" id="vsalact"   name="campo1" placeholders="Ingresa el monto de tu salario actual con impuestos o salario bruto"/></td>
<td><input type="text" id="vsalnuv" name="campo2" placeholders="Ingresa el monto de tu nuevo salario con impuestos o salario bruto"/> </td>
   </tr>
   <tr>
        <td>Vales de Despensa</td> 
<td><input type="text" id="vdesact"   name="campo3" placeholders="Ingresa el monto de vales de despensa"/></td>
<td><input type="text" id="vdecnuv" name="campo4" placeholders="Ingresa el nuevo monto de vales de despensa"/> </td>
   </tr>
   <tr>
        <td>Días Aguinaldo</td> 
<td><input type="text" id="vagnact"   name="campo5" placeholders="Ingresa el numero de dias de aguinaldo"/></td>
<td><input type="text" id="vagnnuv" name="campo6" placeholders="Ingresa el nuevo numero de dias de aguinaldo"/> </td>
   </tr>
   <tr>
        <td>% Prima Vacacional</td> 
<td><input type="text" id="vprmact"   name="campo7" placeholders="Ingresa el Porcentaje de tu prima vacaional actual"/></td>
<td><input type="text" id="vprmnuv" name="campo8" placeholders="Ingresa el Porcentaje de tu nueva prima vacaional"/> </td>
   </tr>
   <tr>
        <td>Días de Vacaciones</td> 
<td><input type="text" id="vvacact"   name="campo9" placeholders="Ingresa tus dias de vacaiones el primer año"/></td>
<td><input type="text" id="vvacnuv" name="campo10" placeholders="Ingresa tus dias de vacaiones el primer año"/> </td>
   </tr>
   <tr>
        <td>Aportación mensual empresa al Fondo de Ahorro</td> 
<td><input type="text" id="vfaact"   name="campo11" > </td>
<td><input type="text" id="vfanuv" name="campo12"  /> </td>
   </tr>
   
   <tr>
        <td>Otras Prestaciones</td> 
<td></td>
<td></td>
   </tr>
   <tr>
        <td>Seguro de Gastos Medicos mayores</td> 
<td><select id="vsgmmact"   name="campo13">
      <option value="si">Si</option>
  <option value="no">No</option>
    </select>
</td>
<td><select id="vsgmmnuv" name="campo14" >
      <option value="si">Si</option>
  <option value="no">No</option>
    </select>
</td>
   </tr>
   <tr>
        <td>Seguro de Vida</td> 
<td><input type="text" id="vsvact"   name="campo15" /></td>
<td><input type="text" id="vsvnuv" name="campo16"   /></td>
   </tr>
   <tr>
        <td>Flex time</td> 
<td><input type="text" id="vftact"   name="campo17" /></td>
<td><input type="text" id="vftnuv" name="campo18"   /></td>
   </tr>
   <tr>
        <td>Vales de gasolina</td> 
<td><input type="text" id="vgasact"   name="campo19"/></td>
<td><input type="text" id="vgasnuv" name="campo20"  /></td>
   </tr>
   
 </table>
 <input type="submit" value="Enviar"/>
</form>

<p>Hay datos que debes saber por ley en México la prima vacaional es de 25%<p>
<p>Los día de aguinaldo por ley son 15 <p>
</body>
</html>


Programa PHP 

 <?php
 $salnuv = $_GET["campo2"] ; 
 $salact = $_GET["campo1"] ;
$Salario = ($salnuv * 12) - ($salact * 12);
echo "Diferencia Salario Actual: ". $Salario . "<p>";
 $valnuv = $_GET["campo4"] * 12; 
 $valact = $_GET["campo3"] * 12;
$Vales = $valnuv - $valact;
echo "Diferencia vales despensa: ". $Vales . "<p>";
 $agunuv = ($salnuv / 30 ) * $_GET["campo6"] ; 
 $aguact = ($salact / 30 ) * $_GET["campo5"] ;
$Aguinaldo = $agunuv - $aguact;
echo "Diferencia Aguinaldo: ". $Aguinaldo . "<p>";
 $dianuv = ($salnuv / 30) * $_GET["campo10"]; 
 $diaact = ($salact / 30) * $_GET["campo9"];
$Dias = $dianuv - $diaact;
echo "Dias de Vacaciones: ". $Dias . "<p>";
 $prinuv = ($_GET["campo8"] / 100) * $dianuv; 
 $priact = ($_GET["campo7"] / 100) * $diaact;
$Prima = $prinuv - $priact;
echo "Diferencia Prima Vacacional: ". $Prima . "<p>";
 $fonnuv = $_GET["campo12"] * 12;
 $fonact = $_GET["campo11"] * 12; 
$Fondo = $fonnuv - $fonact;
echo "Diferencia Fondo de Ahorro: ". $Fondo . "<p>";
$Totalact = $salact + $valact + $aguact + $priact + $fonact + $diaact;
$Totalnue = $salnuv + $valnuv + $agunuv + $prinuv + $fonnuv + $dianuv; 
$porincre = (( $Totalnue * 100 ) /  $Totalact ) - 100  ;
echo "Sueldo Actual Anual: " . $Totalact . "<p>";
echo "Sueldo Nuevo Anual: " . $Totalnue . "<p>";
echo "Porcentaje de incremento: <strong>" . ROUND($porincre,2) . "% </strong>  <p>";
IF  ($Totalnue > $Totalact) 
echo "<font color='green'>Tendras un sueldo anual mayor por: </font> <strong>" .  ($Totalnue - $Totalact). " </strong> <p>";
else
echo "<font color='red'> Debes negociar la nueva oferta</font>  ". ($Totalnue - $Totalact). " <p>";
?>  


Ejecución de la Pagina


Ingresamos los datos
Después de ingresar los datos






La liga para que puedan utilizar esta página es:



La liga anterior ya no esta disponible , te compartimos la nueva liga , utilizando HTML y JAVAscript

Pueden acceder también desde su celular 


Una propuesta de un nuevo trabajo no solo debe considerar el tema económico, deben tomar en cuenta otros puntos personales como: 

  • Ambiente de trabajo 
  • Tiempos de traslados
  • Plan de crecimiento
  • Calidad de Vida

Espero les sea de utilidad y les sirva de referencia, que logren todas sus metas este 2020 y nos compartan. 



Lo plasmado en este blog es de carácter educativo e informativo, por lo que no nos hacemos responsables de su uso.


Pueden seguirnos también en nuestra página de Facebook

Comentarios

🚀 Mantener este blog funcionando requiere tiempo y café. ¡Puedes contribuir con uno aquí!

Entradas más populares de este blog

Guía Práctica: Ejemplo Completo de ASPX para Desarrolladores Web

👉 Cómo obtener el tipo de cambio en Excel con API de Banxico (paso a paso)

Macro en Word para automatizar documentos: genera diplomas en segundos (con código VBA)