Frontend

Limpia, repara y alarga la vida de tu mouse. 1024 576 juangmuelas
limpieza mouse

Limpia, repara y alarga la vida de tu mouse.

Quienes pasamos nuestros días frente a la pantalla, muchas veces nos encontramos con funcionamientos inesperados o malas respuestas desde nuestro «ratón».

Y muchas veces vienen provocados por un mal mantenimiento de este. Como el resto, necesita de mantenimiento y limpieza, por lo que hoy vamos a intentar poner remedio a esto.

Estos dispositivos han cambiado mucho en los últimos años y han ido añadiendo distintas características, mejoras de ergonomía y otras ayudas configurables para mejorar la experiencia de usuario.

Porqué limpiar

Esto en muchos casos va acompañado de un presupuesto, no siempre bajo, que en mi opinión, merece aceptar algunos riesgos para prolongar su vida útil y ayudar a reducir la basura tecnológica que aumenta día a día.

El tiempo me ha demostrado que muchos de los fallos en pulsaciones o en scroll no vienen derivados de fallos en el hardware. O sea, siendo llano, no hay piezas rotas. Por lo que volver a utilizarlo de forma normal, es cuestión de minutos.

En este momento, me estaban fallando dos en el scroll, así que vamos a ello.

Antes de empezar

Aparte de un poco de espacio libre para operar sin problemas, ¿Qué vamos a necesitar?

  • Destornilladores adecuados (PZ0 y PZ1 en muchos casos).
  • Hisopos. Alcohol.
  • Paño microfibra.
  • Algo de paciencia.

Por si acaso:

  • Pinzas.
  • Alicates pequeños.
  • Cinta doble cara.

Accede al interior del dispositivo

Comenzamos retirando los tornillos. Esto en cada modelo cambia, y en algunos será un solo tornillo y en otros habrá varios distribuidos, normalmente, bajo las almohadillas o bajo alguna pegatina (se notan al tacto en ese caso).

Para retirar las almohadillas, podemos ayudarnos de alguna herramienta lisa y fina. Un pequeño destornillador plano o una pequeña navaja pueden valer para ayudarnos en ese paso.

parte trasera mouse

Con un poco de paciencia podemos localizar los tornillos.

Ahora con cuidado intentamos separar las dos partes principales de la carcasa, para asegurarnos que no queda ningún elemento de fijación sin descubrir.

mouse abierto lateralmente

Observamos si ya hay vía libre.

En este caso, además de la placa, tenemos un conector que podemos separar con cuidado tirando de él y un par de tornillos internos.

mouse abierto y placa visible

Parte más interna.

Tras esto, ya tenemos a este pequeño preparado para su mantenimiento, con sus distintas partes separadas.

Carcasas y placa.

Carcasas y placa.

Mecanismos de acción

Si nunca has abierto un mouse verás que la rueda de scroll apoya en uno de sus laterales en un interruptor (que es el que manda la orden cuando pulsas en la rueda) y además están los interruptores de los botones derecho e izquierdo.

Interruptores y rueda.

Interruptores y rueda.

Por el otro lado apreciamos además, la parte que recoge los movimientos de la rueda.

Interruptores y rueda.

Interruptores y rueda.

Trabajando sobre el scroll

Si cogemos la rueda podemos extraerla sin ningún problema por su lado más libre.

Extrayendo rueda.

Extrayendo rueda.

Podemos apreciar como la rueda tiene por el lateral más estrecho forma hexagonal para que se puedan detectar mejor nuestros movimientos.

Detalle lateral rueda

Detalle lateral.

Detalle interior hexagonal.

Detalle interior hexagonal.

Normalmente, con limpiar correctamente con un poco de alcohol en un hisopo y en el paño de microfibra, cada parte que hemos desmontado, es suficiente para poder recuperar el uso.

En este caso estaba bastante limpio porque hago las limpiezas de forma periódica, pero suele pasar que nos encontremos con los mismos tipos de restos que en un teclado.

En el peor de los escenarios, tendremos que desmontar la última pieza que veíamos, y es lo que voy a trabajar en el segundo mouse que tenía preparado para revisión hoy.

Como vemos, es muy similar en su interior al anterior, demostrando que esto que vemos hoy, es aplicable a la mayoría.

Comparando placas.

Comparando placas.

Desmontamos rueda.

Desmontamos rueda.

Podemos ver como esta pieza donde alojamos la rueda, tiene una pequeñas patillas metálicas que sujetan las partes móviles.

Con bastante cuidado para evitar una presión demasiado fuerte sobre ellas y que puedan romper (el metal es relativamente elástico, pero si nos pasamos podría fallar en la parte curva), abrimos un poco esa patillas, ayudados de un pequeño destornillador plano y una pequeña navaja. En mi caso, tengo una para abrir relojes (ya comentaremos ese hobby otro día 😅), muy útil en momentos así, pero sirve lo demás.

Detalle de patillas abiertas para permitir la extracción.

Detalle de patillas abiertas para permitir la extracción.

Extraemos las dos partes móviles con cuidado para que no se pierda nada.

Interior desmontado.

Interior desmontado.

Arandela y rueda interna.

Arandela y rueda interna.

Si observamos bien, en el interior hay unas pequeñas patillas metálicas que son las que transmiten nuestros giros, y que con el tiempo, se van aplanando.

Tres patillas reflejan nuestros giros de scroll.

Tres patillas reflejan nuestros giros de scroll.

Si nos ayudamos de la navaja o destornillador de antes, podemos levantarlas un poco para que ofrezcan más contacto contra el otro lateral.

Si detectas partes «grasas» puedes añadir un poco de vaselina a los mismos y tras esto, deshacer los pasos anteriores.

Colocamos de nuevo la pieza plástica.

Colocamos de nuevo la pieza plástica.

Asentamos la arandela bien antes de plegar el conjunto.

Asentamos la arandela bien antes de plegar el conjunto.

Tras esto, apretamos con los alicates las garras metálicas y montamos de nuevo nuestro mouse.

Como último consejo, antes de colocar los tornillos de las carcasas, aprovechar a comprobar que todo va correctamente, por si hay que revisar algún paso.

Si todo va según lo esperado, ponemos los tornillos.

Si todo va según lo esperado, ponemos los tornillos.

Conclusiones

Si bien es verdad que a veces se puede complicar un poco, gastar media hora de un día festivo o tiempo libre en detalles así, pueden ayudar a que estos amigos nos acompañen bastante tiempo y no tener que salir corriendo a comprar otro mouse.

Mice preparados para una nueva temporada.

Mice preparados para una nueva temporada.

Espero que pueda ser una ayuda visual para quienes lo hayan pensado y no se atrevieran en su momento por miedo a hacer un daño peor 🙂.

No dudéis en comentar!.

Animando tu web con SVG 1024 576 juangmuelas
Esfera Svg

Animando tu web con SVG

En cada diseño, intentamos mostrar elementos diferenciadores y que llamen la atención del visitante en algún apartado del sitio creado.

Los SVG (gráficos vectoriales escalables) son una opción muy interesante que además de mejorar visualmente nuestro diseño, lo hacen con un impacto mínimo sobre los navegadores.

La pega es que no son tan sencillos de crear ni manejar a la hora del diseño, como pueden ser los tradicionales formatos de imagen.

Personalmente, he tenido que googlear mucho, para acabar comenzando a aprender gracias a un par de artículos y algunas webs que he ido encontrando por la experiencia.

Tendremos que acostumbrarnos a sus etiquetas (están basados en XML), a su propiedad viewbox donde añadir la ubicación y a su path, donde no sólo se “dibuja” nuestro diseño, sino donde podemos modificar aspectos como el color a través de las propiedades fill o stroke.

captura fill Svg

No voy a ahondar mucho en esa parte, pues todavía soy muy novato en ello (esto no pretende ser una biblia del SVG 😅), pero quiero mostraros sitios donde poder aprender a jugar con ellos, familiarizarnos con su sintaxis y luego aprender sobre sus animaciones.

Familiarízate con los SVG

El primer sitio que creo que deberías visitar es smooth donde puedes crear atractivas olas para incorporar a tus diseños y comprobar sus propiedades en el svg resultante.

svg wave generator

Cuando tengas eso un poco claro, puedes dar un paso más en getwaves y en blobmaker donde creas formas de lo más diversas mientras sigues aprendiendo.

Os recomiendo visitarlos y probar cosas en ellos, porque estoy seguro, que lo acabaréis usando en vuestros proyectos.

Animando nuestros SVG

Ahora que ya vamos asimilando las bases de los SVG, pasamos a la animación.

La mayor parte de las animaciones que hagamos con nuestros SVG van a ser sencillas, por lo que en muchos casos, nos bastará con conocer las animaciones básicas en CSS a través de animate y sus propiedades:

css animate

Para animaciones más complejas como variaciones en las formas, CSS se queda bastante corto hasta donde he podido aprender, con herramientas descontinuadas y pasos adelante y atrás por parte de los navegadores por intentar adaptarse a ello, de los que seguro habréis leído bastante hasta la fecha.

Por tanto, si queremos dar un paso más, tenemos a nuestro infatigable JavaScript y varios frameworks que nos ayudarán:

Animejs es uno de ellos con muchos ejemplos y documentación más que decente. Para mí, son una referencia al respecto y por eso una imagen de su web, presenta este artículo.

Otra, es vivus donde podemos crear animaciones a modo de dibujo, muy atractivas y que en cuanto lo visitéis, os mantendrá haciendo pruebas un buen rato seguro.

web de Vivus

Por último, tengo “deberes” con Snap Snapsvg, del que he leído muy buenos artículos y comentarios, pero acaba siendo de esas cosas que quedan en el cajón (quizás vosotros ya tengáis experiencia con este sitio y podáis darme más feedback).

Para acabar, quería dejaros una web con algunos de los ejemplos más chulos y que seguro habéis visto en más de un sitio web. Es la web de Javi Niguez y su artículo sobre animaciones en SVG.

svg-niguez

Seguro os gustará.

Como siempre, espero que este artículo pueda servir de ayuda y apoyo para muchos de vosotros y, por supuesto, si tenéis otras fuentes o sitios de donde aprender a manejarnos con los SVG, estaré encantado de leeros!.

El clásico manual para limpiar tu teclado mecánico. 1024 576 juangmuelas
limpiando tu teclado

El clásico manual para limpiar tu teclado mecánico.

Si bien estoy seguro que se pueden encontrar un montón de recursos sobre como dejar nuestros teclados como el primer día, he querido aprovechar la limpieza de mi teclado actual para dejar constancia de mis métodos, recogidos de otros muchos vídeos y artículos que encontré en su momento, así como algún que otro consejo a raíz de fallos que también cometí 🤭. Vamos a ello!.

¿Qué necesitaré?

Los básicos para estas labores son sencillos:

  • Paciencia y tiempo libre: No te fíes de esos manuales de limpieza en 10 minutos. Piensa en un día donde no tocarás ese teclado en horas.
  • Para la extracción de teclas: Lo más simple, tus manos. Lo más pro, algún extractor de teclas (a veces vienen con el mismo teclado, pero sino, los hay por la web de un montón de precios, a gusto de los friki o tiquismiquis que seamos).
  • Para la limpieza: Una brocha, un viejo cepillo de dientes o el de la antigua afeitadora, isopos de algodón, alcohol (isopropílico a poder ser), bayeta microfibra y jabón de la vajilla (queremos quitar grasa, verdad?). Hay quienes utilizan por ejemplo, pastillas para las dentaduras, por ser más sencillo el tema aclarado, pero como decía antes, dependerá de gustos.

Pasos previos

Ante todo, reserva algo de espacio para hacer las cosas con tranquilidad y comodidad.

Comprueba antes de desconectar nada, si todas las teclas funcionan debidamente, por si además de la limpieza, necesitamos lubricar algún switch (no será el caso hoy). Tras ello, lo desconectamos.

Doy por hecho que, como yo, habitualmente haces una limpieza superficial con la brocha, la bayeta con algo de alcohol y por supuesto, unos pequeños golpecitos con el teclado al revés para intentar recuperar esas migas, frutos secos y demás 😅. También podemos probar con el aspirador.

Hacemos esa pequeña limpieza previa y le sacamos foto para recordar como era todo antes de nuestra épica jornada de limpieza y para saber, obviamente, donde va cada tecla.

foto general de teclado

Evitar el habitual fallo de dejar una parte sin retratar y ganaréis tiempo buscando en red o manuales 😅

La limpieza

Tras el trabajo previo, podemos comenzar a extraer las teclas. Como os decía antes, con vuestras yemas (si están curtidas o forjadas en el abismo de Helm) o con el extractor, comenzamos a tirar con cuidado de las teclas.

La mayoría se extraen muy bien, aunque algunas de mayor tamaño, suelen traer unas patillas que anclan en unos alambres internos. No hay que tenerles un miedo mayor que al resto, pero hay que hacerlo con cuidado.

tecla sencilla

Tecla sencilla

tecla espaciadora

Tecla espaciadora y sus patillas inferiores.

Estaremos atentos también a teclas muy similares y que puedan tener forma distinta, para así volver a ubicarlas luego en su lugar de forma correcta y que nuestros dedos sigan volando.

Ojo a las formas

Ojo a esas formas.

Tras retirar todas las teclas, es el momento de preparar en un recipiente, algo de agua templada y el limpiador que hayamos seleccionado. Tras eso, comienza el remojo!.

Teclas a remojo

Si puedes, déjalas unas horas, removiéndolas de vez en cuando para que entre ellas se rocen, limpien y suelten la suciedad.

Mientras tanto, podemos volver a nuestro teclado, ya desnudo para afrontar la parte más delicada.

Si eres de los míos, harás ahora «la pausa que refresca» para un café o lo que creas necesario 😎.

Volviendo a la faena, en mi caso, puedo ver como las limpiezas superficiales han tenido su efecto en este año, y está bastante bien, aunque no siempre será así, ¿verdad?.

Teclado listo para limpieza

Yo en este momento, vuelvo a sacudirlo ligeramente y le paso la brocha de nuevo. Si hay suciedad algo más incrustada, quizás el viejo cepillo de dientes muy ligeramente humedecido en el alcohol, sea una buena solución.

A continuación, humedecemos un poco un hisopo y comenzamos a pasear por entre las teclas, con mucho cuidado (puedes también ayudarte de una lupa en sitios sensibles si la luz, la vista o ambas, no están en el mejor momento).

Cambia el hisopo las veces que sean necesarias según la suciedad que acumulen.

Para las partes más abiertas, utilizamos el alcohol y la bayeta.

También, puedes aprovechar este tiempo para, en su caso, lubricar las teclas que observaras en mal estado (con suerte, en otro momento, hablamos de esa parte).

Cuando lo creas conveniente, aclaras las teclas con mucho cuidado y las pones a secar. De nuevo, pensemos en que esto lleva su tiempo y debemos asegurar que cuando vuelvan al teclado, estarán secas del todo.

Yo, por ejemplo, las he dejado toda la noche sobre bayeta y papel. Si va a pasar mucho tiempo, tapa con otra bayeta el teclado, para evitar que, especialmente en verano cuando tenemos todo abierto, le caiga polvo y suciedad nueva.

ambién puedes aprovechar y dejar ya colocadas las teclas en su posición para ganar tiempo

También puedes aprovechar y dejar ya colocadas las teclas en su posición para ganar tiempo.

Terminado el trabajo

Al día siguiente y tras los prescriptivos cafés (acabas de limpiar el teclado, así que evitemos hacerlo encima del mismo 😅), procedemos a colocar con tranquilidad y ejerciendo un poco de presión, cada tecla.

Si las hemos ordenado anteriormente, confío en que además, estén es su posición correcta, pues podemos sorprendernos con alguna girada (te estás riendo, pero pasa).

No lo parece, pero la barra espaciadora está del revés.

No lo parece, pero está del revés.

Atendiendo a esos detalles y cuidando que las teclas con patillas entren correctamente (se escucha y pequeño clic al enganchar de nuevo en el alambre), vamos una a una.

Personalmente, suelo al acabar con todas, darles un par de pulsaciones para comprobar que suenan «redondas» y reviso de nuevo que cada cosa está en su lugar.

Tras ello, una última pasada con la bayeta humedecida. Hay quienes disuelven una parte de suavizante de ropa en 4 de agua para «mejorar» el resultado y que tarde más en adherirse nuevo polvo. Yo soy más austero en ese aspecto y lo dejo así.

Ya podemos entonces conectarlo de nuevo y comenzar a disfrutar de su alegre sonido.

teclado limpio

Confío en que si no te habías lanzado a limpiar tu teclado, si lees esto te pueda servir para abordarlo con tranquilidad profesional!.

Y si tienes cualquier comentario o duda al respecto. Te leo!!.

Envía Emails desde HTML5 con FormSubmit 1024 576 juangmuelas
formsubmit+html5

Envía Emails desde HTML5 con FormSubmit

Corría mayo del 2021 cuando escribí un artículo en mi perfil de LinkedIn sobre como enviar datos desde un formulario de tu web utilizando solo frontend con la librería SmtpJS.

Puedes recordarlo aquí .

La había utilizado varias veces durante la pandemia por COVID19 por ser muy sencilla y rápida de implementar.

Incluso la utilicé en mi primer sitio web.

Por desgracia hubo cambios importantes con los servidores admitidos, y muchos dejamos de aprovechar sus bondades.

Hace no mucho conocí un nuevo proyecto, y tras varias pruebas, decidí usarlo para mi sitio web: FormSubmit.

FormSubmit?

Así es. Desde este proyecto han conseguido crear una herramienta con la que puedas enviar emails con solo crear un formulario en Html. Sólo debemos vincular nuestro email a su endpoint y que ellos manden el correo de forma gratuita.

¿Cómo es este proceso entonces?

Muy sencillo.

Puedes diseñarlo desde cero, aprovechar el ejemplo que ellos tienen en su documentación para poder probarlo desde la web, o aprovechar plantillas.

Para ello debes vincular el atributo action a su sitio, y añadir el email donde quieres que se envíen los datos.

También, nos aseguramos que todos nuestros elementos del formulario tengan el atributo name para asociar a los datos a enviar.

Aquí nos muestran un ejemplo.

Captura formulario de ejemplo

Lo siguiente, es darle al botón de enviar y probarlo 🧙!

Y ahora, ¿qué?

Lo primero que veremos, es que nos redirige a la url que hayamos puesto en el action y nos mostrará un Captcha que debemos resolver.

Tras aceptar o resolver el Captcha propuesto, nos mostrará una página de agradecimiento, y nos devolverá a la url original.

En nuestra bandeja, podremos ver ya el envío del formulario.

recepción de envío en correo

Bien. En el primer envío, nos mostrará un aviso para que activemos nuestro formulario en su sitio web.

Aviso de activación

Si revisamos nuestra bandeja de entrada, podremos ver el correo que nos han enviado (para el ejemplo, está en local).

Correo de activación

Si tras activar, copiamos el código random que nos ha generado para asociarlo a nuestro formulario, podemos sustituir nuestra cuenta de correo por este string en el action, para que no sea visible a terceros.

Código de activación en nuestro action

¿Qué más podemos hacer?

Es bastante personalizable y en la documentación te muestran varias cosas muy interesantes para añadir a tu formulario.

¿Quieres que no se muestre el captcha porque ya implementas otra seguridad?. Se puede.

Añade esta línea y resuelto:

etiqueta no captcha

¿Quieres que envíe a otra página o url en la redirección?

El atributo name con valor _next se encarga de ello.

etiqueta next

¿Qué envíe un correo automáticamente al remitente?

Con _autoresponse y el mensaje personalizado, está hecho.

Etiqueta autoresponse

Hay más, pero creo que es mejor que las explores directamente!.

¿Vas a utilizarlo?

Clona con éxito un proyecto Laravel desde GitHub 1024 576 juangmuelas
banner-clon-git-laravel-vscode

Clona con éxito un proyecto Laravel desde GitHub

En ocasiones, clonar un proyecto desde GitHub para poder seguir aprendiendo, suele ser la salida rápida para muchas personas.

Sin embargo, en muchos casos (y especialmente cuando no cuenta con un archivo README suficientemente detallado) acaba siendo un callejón sin salida, pues como usuarios o desarrolladores noveles, nos faltan destrezas para revisar documentación o hacer la búsqueda correcta en nuestro navegador.

Laravel, es un framework muy bien documentado y con una amplia comunidad de desarrolladores que han nutrido la web de ayudas a casi cualquier error que podamos tener, pero aún así, es común ver personas que se atascan en cuestiones básicas.

Por ello, y tras un problema de un usuario en un grupo de Telegram, decidí crearles un documento que pudiera ser de ayuda -dando por hecho que se tiene instalado de forma global Composer, que se tengan conocimientos básicos sobre PHP, el framework Laravel o el uso de GitHub y Visual Studio Code– y de paso compartirlo desde este artículo, esperando reforzar poco a poco mis propios conocimientos y destrezas además de servir como apoyo para instalaciones futuras.

Primeros pasos.

Tras abrir nuestro editor suelo abrir una consola para así, situarnos en el directorio donde queremos alojar el proyecto y comenzar con el primer comando:

git clone [url-github-project]

Para este ejemplo, tomaré uno de los archivos de dicho grupo:

git clone https://github.com/TexvnOnline/Punto-de-venta-Texvn-Online.git

Con este paso, ya tenemos acceso al proyecto en sí, pero al estar trabajando con Laravel, vamos necesitar dar unos cuantos pasos más.

Instala las dependencias del proyecto.

Al clonar desde GitHub, el archivo .gitignore nos «quita» la carpeta vendor con las librerías que usa el proyecto. Necesitaremos que nos lea cuales son desde nuestro archivo composer.json. Voy a seguir los pasos «a prueba de novatos», esperando incluso posibles errores.

Nos situamos en el directorio clonado y pasamos por consola la siguiente instrucción:

composer install

Vemos que necesitamos actualizar nuestras versiones, por lo que corremos un comando más:

composer update

Con este comando nos termina de instalar las librerías declaradas en el proyecto clonado.

Generando archivo .env y la key del proyecto.

No sólo deja sin carpeta vendor el proyecto descargado cuando lo estamos compartiendo desde git, también nos faltará por motivos obvios de seguridad, el archivo de configuración .env

Por suerte, si que estará en el directorio el archivo .env.example, que podemos tomar como guía.

Podemos hacerlo del modo tradicional con un nuevo archivo y copia-pega, o por línea de comando con la instrucción:

cp .env.example .env

Añado al archivo generado la key de seguridad.

php artisan key:generate

Si te queda algo para personalizar el .env, es el momento

Lo dicho.

Desde el nombre de nuestra aplicación, a la conexión de la base de datos, o cualquier otra variable global que ya tengas disponible (ej: paypal, stripe…).

No creo que sea necesario recordarlo, pero ahí vamos: O ya tienes una base de datos creada, o debes crearla con el nombre que pongas en tu .env .

Crea el enlace simbólico y la carga automática de tus clases

Vas a guardar imágenes, pdf’s… Por ello, necesitarás comunicar tu carpeta storage con tu carpeta public. Por suerte, es con un sólo comando:

php artisan storage:link

Seguro que hay más de un helper añadido para trabajar con las clases creadas, y deben agregarse al cargador automático (queremos evitar los típicos errores de clase no encontrada, verdad?).

composer dump-autoload

Se nos pasaba ya que habrá migraciones con las tablas para nuestra BBDD.

php artisan migrate

🛑Espera!. Revisa si en tu carpeta database hay seeders y factories con datos para llenarla!. Si es el caso, mucho mejor este comando!:

php artisan migrate –seed

Si surgiera algún error con los seeders, es muy posible que sea este:

BadMethodCallException: This cache store does not support tagging.

En ese supuesto iremos a nuestro .env, ya que la configuración de ejemplo suele venir con el campo CACHE_DRIVER=file es incompatible con las tags

Podemos cambiar ese valor a :

CACHE_DRIVER=array o por CACHE_DRIVER=memcache

Probando, probando… 1..2.. si…

Ha llegado la hora de la verdad.

php artisan serve

Ups! 🤦♂️. Por lo visto, algo falló y aunque la consola nos decía que había generado la clave, no lo hizo.

Por suerte, el modo debug:true de nuestro .env nos «canta» lo que pasa y la solución.

Recuerda que la herramienta de debug de Laravel, no solo da muy buenas pistas para saber que error estamos teniendo, sino que además, te suele mostrar la posibilidad de buscar más información a través de Google o Stackoverflow, por ejemplo.

Volvemos a correr el comando php artisan key:generate

Esta vez, ya podemos ver como ha generado la clave de forma automática y correcta.

¿Tendremos nuevos errores?: Lo sabremos volviendo a refrescar nuestro server:

Ya tenemos nuestro clon

Creo que ya podemos decir: Eureka!…

Al menos de momento.

Es hora de seguir avanzando y aprendiendo!.

Muchas gracias al Proyecto de Cristian Castro (TextOnline), que ha servido de apoyo !.
Hola, mundo! 1024 768 juangmuelas
set up y café

Hola, mundo!

¡Hola a todos! Soy Juan Antonio García Muelas (o Jag Molar en redes, como muchos ya sabéis), un apasionado de la programación y el desarrollo que lleva 9 años sumergido en este fascinante mundo.

Comencé pasados los cuarenta años, pensando que este mundillo podría arrollarme, que quizás era mayor para un cambio de rumbo laboral. Ese sentir se esfumó con mis primeras líneas de código y me comenzó a enganchar.

Desde entonces, no he parado de aprender y enseñar (cuando he podido) en comunidad. Como uno más.

A través de este blog, al igual que he intentado siempre en redes, quiero compartir mis conocimientos y experiencias, desde los conceptos más básicos hasta los proyectos más avanzados. Aquí espero mostrar tutoriales, análisis de código y reflexiones sobre las últimas tendencias en desarrollo web. ¡Hagamos este viaje juntos!

Al comenzar con este primer artículo, se me ha propuesto un (para nosotros) famoso ‘Hola, mundo!’. Este simple mensaje es el primer programa que escribimos la mayoría de los programadores. Todos en verdad 🤩.

Aunque parezca trivial, es una excelente manera de familiarizarse con un nuevo lenguaje de programación. Veamos entonces cómo se escribe en algunos de los lenguajes más populares de la web:

HTML: Si. Esa eterna y clásica discusión: No es un lenguaje de programación… Pero es la estructura básica de una web.

<p>Hola, mundo!</p>

CSS: Se utiliza para darle estilo a las páginas web. Podemos así, por ejemplo, cambiar el color o el tamaño de la fuente del texto «Hola, mundo!».

p {

color: aliceblue;

font-size: 1.2rem;

}

JavaScript: El lenguaje de programación que se utiliza para hacer que las páginas web sean interactivas. El rey en este aspecto. Podemos crear la clásica alerta que diga «Hola, mundo!» al cargar la página.

alert("Hello world!");

React: Seguramente la biblioteca de JavaScript más famosa para crear interfaces. Podemos crear un componente que nos devuelva un encabezado.

function HelloWorld() {

return <h1>Hola, mundo!</h1>;

}

export default HelloWorld;

Node.js: el entorno de ejecución de JavaScript fuera del navegador. Esto seguro que te suena en la salida de consola:

console.log("Hola, mundo!");

PHP: Ejecutado en el lado del servidor e incrustado en nuestro HTML. ¿Quién no ha hecho una función echo para imprimir esta salida?

<?php echo "Hola, mundo!"; ?>

Python: Conocido por su sintaxis clara y concisa es utilizado en todos los ámbitos de la programación.

print("Hola, mundo!")

Ruby: Como Python, tiene una sintaxis elegante. Y tiene una sencilla función (puts) para imprimir en consola y hacer un salto de línea.

puts "Hola, mundo!"

Java: Hablando de saltos de línea. Seguro que has utilizado un println() de este famoso (e inmortal como PHP) lenguaje de programación orientado a objetos:

public class HolaMundo {

public static void main(String[] args) {

System.out.println("Hola, mundo!");

}

}

Estos son solo algunos ejemplos básicos, llenos de funcionalidades y formas de conseguir estos resultados. Un motivo más para que sea algo apasionante y en lo que nunca pueda dejar de aprender. Y por eso, me defino como eterno junior. No es un síndrome del impostor, ni una manera de minusvalorar lo aprendido y conseguido hasta hoy. Es una manera de sentirme unido a mi comunidad, leeros, debatir y seguir aprendiendo y creciendo.

Si has llegado hasta aquí, espero que sea porque te ha gustado esta primera entrada. Si tienes alguna pregunta o sugerencia, no dudes en dejarme un comentario. ¡Suscríbete a mi blog para ver todas las novedades!.

Aúpa developers (no quiero que quien conozca esta expresión la eche de menos) y ¡Hasta la próxima!.

Jag Molar
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.