jueves, 16 de enero de 2020

Minería de datos ejemplo de Spotify

En estos días pasados he visto publicaciones de los artistas mostrando cuantas canciones, cuantas horas, cuantos usuarios y en cuantos países los han escuchado, yo creo que ustedes también han visto imágenes como esta:


Cuando yo las veo que detrás hay un equipo de Tecnologías de la Información y Mercadotecnia que están haciendo Minería de datos que es el tema del post de hoy. 
La minería de datos es el nombre que se le da al proceso de:

  • Definir que datos se quieren conocer y almacenar 
  • Consolidar información en una base de datos
  • Después generar los querys o consultas para extraer la información 
  • Presentar información en un reporte o template para toma de decisiones o estrategias de negocio 

Sigamos con el ejemplo de Spotify, ellos tienen los datos de sus usuarios como son:correo, edad, género, país, nuestras listas de reproducción


  • Pensemos en una base de datos y les dejo que me imagino yo en un diagrama entidad relación :





Este diagrama se leería así: Un artista tiene muchas canciones, una canción puede estar en mas de una playlist, una playlist puede ser de 1 o más usuarios. La historia de las canciones y de cada cuando se toca me lo imagino en una tabla de historia.
Aclaro este es un ejemplo de como pienso que puede ser, pero en realidad debe ser más complejo.

Por cierto el diagrama lo dibuje en la página https://www.lucidchart.com/ , ahí pueden hacer diagramas online, les puede servir para diagramas UML, de Red, etc.


  • Luego la consulta de la información para saber cuantas veces se escucho una canción de un artista en 2019


Select count(*), artist.name
from History_play
Inner join artist on artist.artist_id = History_play.artist_id
WHERE YEAR(history_play.date) = 2019
Group by id_artist


  • Después me imagino a un diseñador WEB armando el template o plantilla para solo cambiar las imágenes y datos para mostrar la información y solo colocar la imagen del artista y los datos que le corresponden. Claro después de un gran trabajo con CSS, HTML, Javascript o algún otro lenguaje FRON-END.
  • Luego un ingeniero de software tomando la información del Query e insertándola en los campos del template correspondiente, con agluna herramienta BACK-END como PHP, ASP, Java.

La minería de datos o datamaning es buscar patrones, es conocer y entender a los usuarios, conocerlos, saber sus gustos por ejemplo en Spotify :
  • Mejorar su experiencia con la App
  • Para que los artistas sigan publicando sus canciones con ellos
  • Para que los usuarios que escuchan la música, busque al artista más popular
  • Saber que género es el mas escuchado por cada rango de edad
  • Proponerte nuevas playlist
  • Para poder hacer SpotifyAdwards, lo cuales se llevaran a cabo el 5 de marzo 2020 en CDMX (lugar donde más personas escuchan Spotify del mundo)


Este ejemplo es muy bueno para explicar el proceso de minería de datos, pero es mucho más complejo y seguramente Spotify tiene una gran infraestructura y tecnología para todo el proceso de streaming y datamaning.
Hay técnicas para extracción de la información, se necesita definir que información se quiere conocer, como transformar la información para presentarla, hay software dedicado a la minería de datos.

También eso sirve para el proceso de CRM (Customer Relation Management), que es manera general el contacto con los clientes, entenderlos, conocerlos para poder brindarles un mejor servicio que es lo que hace, cada empresa tiene definido el alcance a este servicio, en mi primer trabajo formal trabaje en una empresa dedicada a CRM donde en base a la explotación de la información se diseñaban campañas de publicidad que eran enviadas por correo electrónico o SMS, también se trabajaba con puntos de lealtad utilizando monederos electrónicos. 

Algunos software dedicados a Minería de datos son:
  1. Rapid Miner. Availability: Open source. ...
  2. Orange. Availability: Open source. ...
  3. Weka. Availability: Free software. ...
  4. KNIME. Availability: Open Source. ...
  5. Sisense. Availability: Licensed. ...
  6. Apache Mahout. ...
  7. Oracle Data Mining. ...
  8. DataMelt.
Tomado de https://www.softwaretestinghelp.com/data-mining-tools/ yo adicionaría a Tableu, SalesForce y PowerBI 

Les comparto algunos libros o artículos para que puedan conocer más


También les comparto unas vacantes que encontré para que vean las opciones de empleo que tienen si se capacitan en minería de datos

jueves, 9 de enero de 2020

Página PHP: Comparador de Propuestas Salariales

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:



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.

jueves, 19 de diciembre de 2019

OWASP, Consejos de Seguridad en Desarrollos de Software

Buena semana, hoy tenemos al último invitado de este año 2019, que es el Ingeniero Omar Gilbaja, tuve la oportunidad de trabajar con él hace unos 2 años, él tiene mucha experiencia en desarrollo de Software desde hace 10 años principalmente .NET , ha dado clases a nivel Universidad, conoce varios ERP's (Epicor, QAD...) , ha realizado desarrollos en la industria privada, pymes, etc.., su página WEB es https://flashiqro.com/ para que puedan contactarlo.

https://flashiqro.com/

El tema del que nos va a platicar Omar es como desarrollar aplicaciones más seguras dándonos algunos consejos, estamos seguros que les será de utilidad, los dejo con Omar:


Si eres del área de TI por ende alguna vez te has cuestionado si los sistemas son seguros, quizás hasta te has respondido “mi seguridad es de lo mejor, mi firewall detiene todo, el login de X sistema esta mas que probado” y yo refutaría tus comentarios preguntándote ¿Qué estándares de seguridad de la información tienes? ¿Desarrollas correctamente? ¿Tienes un token? ¿Puedes haber omitido o ignorado la seguridad en algún sistema con información sensible (datos personales, nominas, transacciones monetarias, etc.)?  Se que la respuesta automática será un estado de duda debido a que no todas las organizaciones o personas conocen las vulnerabilidades que sus sistemas hechos en casa, comprados o proveídos por un tercero.

Existe una organización sin fines de lucro que se dedica a ayudar, recolectar y compartir documentación, recomendaciones y algunas herramientas sobre vulnerabilidades de seguridad que se pueden presentar en los sistemas informáticos y las organizaciones, dichas vulnerabilidades pueden ser aprovechadas por algún hacker para fines maliciosos, aunque no necesitamos irnos tan lejos también el usuario funcional puede aprovecharlas en su beneficio y así omitir pasos de un proceso en algún sistema que maneje, etc.

OWASP es la organización que ha estado documentando estas vulnerabilidades en el desarrollo o implementación de software para fines prácticos y de prevención, es importante entender que no se señala un software específico ni se divulga cuál es su vulnerabilidad, solo se documenta y detalla el error para evitarlo o corregirlo en la aplicación y futuros desarrollos. Existen diversos tipos de vulnerabilidades que tienden a ser mas comunes de los que crees.
Hasta el momento OWASP tiene documentados cerca de 63 tipos de vulnerabilidades de diversas complejidades y/o afectaciones.


¿Cuáles son los riesgos de seguridad de aplicaciones?
Los atacantes pueden utilizar diferentes rutas a través de tu aplicación para perjudicar el negocio u organización. Cada uno de estos caminos representa un riesgo que puede o no ser suficientemente grave como para merecer atención oportuna o inmediata.




Brevemente escribiré un top 5 de las principales vulnerabilidades que en mi experiencia he encontrado y resuelto sobre los proyectos de desarrollo de software en los que he trabajado y algunos consejos prácticos de como prevenirlas ya sea que desarrolles software o al menos tengas conciencia de los riesgos que pudieran suscitarse.

1.       Inyección.
Para que tengas un punto de referencia una de las mas comunes es la validación de entrada o acceso de un usuario, pero concretamente ¿a que se refiere esto? No existe un login y/o no valida correctamente las credenciales de acceso a la aplicación.
Aquí hago una pregunta muy simple, si tienes un login, ¿Cómo haces la validación? Espero que dentro del back de tu aplicación no hagas consultas directas a BD, y sobre todo que tu respuesta no sea la siguiente “SELECT dato FROM tabla WHERE usuario = campoTexto1 AND Contraseña == campoTexto2”. Si es así, con urgencia cambia a esa lógica y utiliza Store Procedures para hacer consultas a BD y evites tener vulnerabilidad de Inyección de SQL.
Recomendación:
·         Validar, filtrar y sanitizar las entradas antes de hacer las consultas.
·         Utilizar Store Procedures, no consultas directas a los manejadores o sistemas.
·         Control de acceso con privilegios.
·         Usar una capa de datos, intermediario entre la entrada de datos y el manejador.

2.       Perdida de Autenticación
Cuando no se implementa correctamente la autenticación en la aplicación puede llevar a un problema de escalación de privilegios, robo de sesión pudiendo asumir la identidad de otros usuarios de manera temporal o permanente.
El software queda vulnerable al permitir contraseñas débiles, almacenar contraseñas en texto plano, sesiones sin límite de tiempo, información de sesión visible, no utilizar protocolos de cifrado o cifrado antiguo o débil, no utilizar un token y la mas común, falta de capacitación al personal en temas de seguridad y protección de información.
Recomendaciones:
·         Política de construcción de contraseñas.
·         Gestión de sesiones.
·         Uso de certificados de seguridad.
·         Implementación de tokens.
·         Manejo y control de errores por defecto.
·         Evitar utilizar cookies y variables de sesión.

3.       Exposición de datos sensibles
Por descuido u omisión se muestran datos sensibles como información personal, financiera, confidencial, etc. y con ello algún atacante puede utilizar técnicas como escaneos pasivos para encontrar esta información expuesta y explotarla para su beneficio.
Los atacantes pueden robar o modificar estos datos protegidos inadecuadamente para llevar a cabo fraudes con tarjetas de crédito, robos de identidad u otros delitos. Los datos sensibles requieren métodos de protección adicionales, como el cifrado en almacenamiento y tránsito.
Mas de una vez escuche y vi gente que coloca información de mas “por si el usuario lo necesita”, eso es un error común que puede exponer información aun y cuando no sea mostrada directamente en la pantalla de la aplicación.
Recomendación:
·         No almacenar datos sensibles o información innecesaria a nivel de aplicación.
·         Cifrado de información.
·         Uso de protocolos de comunicación segura.
·         Delimitar conexión.
·         Deshabilitar cache.
·         Control y gestión de información que está expuesta (no mostrar información de más)


4.       Entidades Externas XML
Muchos procesadores XML antiguos o mal configurados evalúan referencias a entidades externas en documentos XML. Las entidades externas pueden utilizarse para revelar archivos internos mediante la URL o archivos internos en servidores no actualizados, escanear puertos de la LAN, ejecutar código de forma remota y realizar ataques de denegación de servicio (DoS), todo eso el poder ingresar código malicioso dentro del XML que se ejecute al ser cargado.
Recomendación:
·         Utilizar tecnologías JSON y REST APIs
·         Actualización de SOAP 1.2 o superior
·         Validación del archivo xml previo su elección.


5.       Secuencia de Comandos en Sitios Cruzados
Los XSS ocurren cuando una aplicación toma datos no confiables y los envía al navegador web sin una validación y codificación apropiada; o actualiza una página web existente con datos suministrados por el usuario utilizando una API que ejecuta JavaScript en el navegador. Permiten ejecutar comandos en el navegador de la víctima y el atacante puede secuestrar una sesión, modificar (defacement) los sitios web, o redireccionar al usuario hacia un sitio malicioso.

·         En caso de una web siempre utilizar certificados de seguridad (HTTPS)
·         Habilitar una Política de Seguridad de Contenido (CSP) es una defensa profunda para la mitigación de vulnerabilidades XSS.
Content-Security-Policy: policy
·         Aplicar codificación sensitiva al contexto, cuando se modifica el documento en el navegador del cliente, ayuda a prevenir DOM XSS

Te dejo algunas pequeñas recomendaciones que también he aplicado y espero te sirvan.
·         Siempre utiliza Store Procedures, evita el Sql Inyection.
·         Controla la apertura y cierre de conexiones y peticiones a BD.
Si desarrollas web utiliza lo siguiente:
·         HTTPS con una versión de SSL actual.
·         No guardes en cache
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
·         Siempre codifica en UTF-8, otras codificaciones son vulnerables a inserciones de código.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

·         Coloca el tipo de archivo y la codificación en CSS y JS.

<link href="./sistema/css/style.css" rel="stylesheet" type="text/css" charset="utf-8" />

<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="application/javascript" charset="utf-8"></script>

·         Implementa token en lugar de variables de sesión, de esta forma cada transacción que hagas tendrá que validar el token y eso garantizara que el usuario tiene acceso y permiso a realizar dicha transacción.

En conclusión, cómo buen desarrollador debes considerar como buena práctica el conocer, prevenir y/o minimizar estas vulnerabilidades de seguridad en el software que produces, al final del día es tu creación, ese pequeño hijo del que quieres estar orgulloso y no preocupado porque sea vulnerable a algún ataque mal intencionado.
Si quieres conocer información más detallada siéntete libre de escribirme un mail a ogilbaja@flashiqro.com, con tus dudas y/o comentarios y con gusto poder orientarte en base a mi experiencia.

viernes, 13 de diciembre de 2019

Especial Navideño dibujar Árbol de Navidad con Javascript

Buen día, bienvenidos a este blog de programación, como ya estamos en época Navideña, me gustaría compartirles un ejemplo de como  dibujar un Pino y una Corona de Navidad (con imaginación) en un lenguaje que ya vimos previamente que es Javascript.
Para esto vamos a utilizar las etiquetas de Canvas que son soportadas en HTML5 y en los siguientes navegadores, Canvas es un termino para decir que es nuestra área de trabajo o nuestro lienzo donde vamos a dibujar, es soportado en los siguientes Browse:





  • Para dibujar un circulo tenemos la función arc que tiene los siguiente parámetros

context.arc(x,y,r,sAngle,eAngle,counterclockwise);


  • coordenada x dentro del canvas 
  • coordenada y dentro del canvas
  • Valor del radio
  • El angulo  inicial
  • El angulo final
  • Para especificar si es dentro o fuera la función 


  • Para dibujar un arbolito es mediante líneas y mover sin despejar el lápiz para crear nuestro triángulo 

En la siguiente liga esta muy bien explicado como hace el proceso de recorrido 

https://www.kirupa.com/html5/drawing_triangles_on_the_canvas.htm


  • Luego un rectángulo como base la función rect que tiene los siguientes parámetros:

context.rect(x,y,width,height);


  • coordenada x en el canvas
  • coordenada y en el canvas
  • El valor del largo del rectángulo
  • El valor del ancho del rectángulo 

Código

<html>
<head>
<title>Especial Navideño Programacionparatodos</title>
</head>
<body>
<p>Una Corona Navideña
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script >
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI, false);
ctx.fillStyle = 'green';
ctx.fill();
ctx.stroke();
var d = document.getElementById("myCanvas2");
var ctx2 = d.getContext("2d");
ctx2.arc(220, 75, 50, 0, 2 * Math.PI, false);
ctx2.fillStyle = 'red';
ctx2.fill();
ctx2.stroke();
</script> 
<p>Un pino de navidad
<canvas id="myCanvas3" width="350" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script >
var e = document.getElementById("myCanvas3");
var ctx3 = e.getContext("2d");
ctx3.fillStyle = "#FFCC00";
ctx3.fillRect(175, 300, 50, 50);
ctx3.beginPath();
ctx3.fillStyle = "green";
ctx3.strokeStyle = 'green';
ctx3.lineWidth = 1;
ctx3.moveTo(200, 100);
ctx3.lineTo(100, 300);
ctx3.lineTo(300, 300);
ctx3.stroke();
ctx3.fill();
</script> 
</body>
<html>





Ejecución


Si desean ver  ustedes mismo la página es:




Pueden encontrar mas ejemplos y probar su propio código en: https://www.w3schools.com/tags/canvas_arc.asp


Como pueden ver la programación no solo es hacer cálculos matemáticos o guardar o validar datos, también nos sirve para poder hacer gráficos o dibujos.


Saludos y felices fiestas!!! mis mejores deseos para esta Navidad mucha paz y un Prospero 2020!! No olviden compartirnos :)