HTML Tutoriales

En este laboratorio (Lab), entrarás al mundo del desarrollo web a través de los ojos de Alex, un desarrollador web en formación encargado de crear un seguimiento dinámico de finanzas personales. El objetivo es construir una aplicación amigable para el usuario que permita a los usuarios ingresar y seguir sus gastos e ingresos diarios. El objetivo es claro: desarrollar una interfaz que sea intuitiva y atractiva, asegurando que los usuarios puedan administrar fácilmente sus finanzas sin problemas. Este proyecto no solo busca simplificar la gestión de finanzas personales, sino también introducirte a los conceptos fundamentales de JavaScript y la manipulación del DOM.

Este proyecto te guía a través del proceso de implementar un modelo MobileNetV2 pre-entrenado utilizando TensorFlow.js dentro de una aplicación web Flask. MobileNetV2 es una red neuronal profunda ligera utilizada principalmente para la clasificación de imágenes. TensorFlow.js permite ejecutar modelos de aprendizaje automático directamente en el navegador, lo que posibilita aplicaciones web interactivas. Flask, un marco web de Python, servirá como el backend para alojar nuestra aplicación. Al final de este proyecto, tendrás una aplicación web en funcionamiento que clasifica imágenes en tiempo real utilizando el modelo MobileNetV2.

En este proyecto, aprenderás a solucionar los problemas de visualización de un sitio web y a asegurarte de que esté adecuadamente diseñado y estructurado. El objetivo es tomar un sitio web sin terminar y hacer que se vea como el producto final deseado.

En este proyecto, aprenderá a crear un juego Whack-a-Mole utilizando HTML, CSS y JavaScript. El juego consiste en golpear a los topitos que aparecen al azar de los agujeros dentro de un límite de tiempo especificado. Creará los archivos HTML, CSS y JavaScript necesarios e implementará la lógica del juego paso a paso.

En este Laboratorio, la jornada de Alex en el desarrollo del seguidor de finanzas personales entra en una etapa avanzada, centrándose en mejorar la interactividad de la aplicación a través de técnicas sofisticadas de manejo de eventos. La escena se desarrolla en una sesión de sesiones de idea generación en la startup tecnológica, donde Alex propone agregar una característica de arrastrar y soltar para reordenar los registros financieros. Esta ambiciosa meta tiene como objetivo brindar a los usuarios una forma intuitiva de organizar sus registros, reflejando la naturaleza fluida de la gestión de finanzas personales. Lograr esto requiere que Alex explore los eventos DOM avanzados y manipule los elementos de una manera que sea atractiva visualmente y amigable para el usuario.

En este proyecto, crearemos paso a paso una simple aplicación web de tablero de dibujo. Cada paso se construirá sobre el anterior, lo que te permitirá agregar funcionalidad a la aplicación gradualmente. Al final de este proyecto, tendrás un tablero de dibujo completamente funcional donde los usuarios pueden dibujar, cambiar el color del pincel, ajustar el tamaño del pincel y limpiar el lienzo.

Bienvenido a este proyecto sobre la construcción de un sencillo juego de rompecabezas deslizante utilizando JavaScript. Al final de esta guía, tendrás un juego de rompecabezas deslizante 3x3 funcional que podrás jugar en tu navegador. El juego tendrá fichas numeradas, un temporizador y controles para iniciar, pausar y reiniciar el juego.

En el proyecto anterior, desarrollamos un escáner de puertos en Python que utilizaba hilos y sockets para escanear puertos TCP. Aunque es efectivo, hay margen de mejora utilizando paquetes de terceros.

En este proyecto paso a paso, crearemos una aplicación web moderna y visualmente atractiva de división de gastos utilizando HTML, CSS y JavaScript. Esta aplicación te permitirá dividir los gastos entre un grupo de personas y calcular quién debe qué a quién. Empezaremos desde cero y cubriremos cada paso para construir el proyecto progresivamente.

En este proyecto, aprenderás a crear un juego de Tres en Raya (Tic-Tac-Toe) utilizando HTML, CSS y JavaScript. El Tres en Raya es un juego para dos jugadores donde se turnan para marcar X o O en una cuadrícula de 3x3. El objetivo es conseguir tres marcas en línea, ya sea horizontal, vertical o diagonalmente. Crearás los archivos HTML, CSS y JavaScript necesarios e implementarás la lógica del juego paso a paso.

En este proyecto, crearemos un sencillo editor de Markdown basado en la web que ofrece una vista previa HTML en vivo a medida que escribes. Utilizando bibliotecas como Ace Editor, marked y highlight.js, desarrollarás un editor intuitivo que no solo permite escribir en Markdown, sino que también guarda datos a través de las sesiones del navegador y resalta fragmentos de código en la vista previa.

Este proyecto te guiará a través del proceso de creación de una herramienta simple de recorte de imágenes. Al final, tendrás una aplicación interactiva que permite a los usuarios subir, mostrar y recortar imágenes.

Este proyecto te guía a través de la creación de un servicio simple de acortador de URLs utilizando Flask y MySQL. Aprenderás a configurar una base de datos, diseñar una interfaz web y implementar funcionalidades para acortar URLs, buscar URLs por etiquetas y ver análisis. El proyecto es amigable para principiantes y ofrece una visión integral del desarrollo web con Python y la gestión de bases de datos.

En este proyecto, aprenderás a crear un gráfico de líneas utilizando la biblioteca ECharts. El gráfico mostrará la cantidad de horas que el usuario pasa en su teléfono cada día de la semana.

En este proyecto paso a paso, aprenderás a crear una aplicación web de temporizador de tareas utilizando HTML, CSS y JavaScript. Esta aplicación web permitirá a los usuarios agregar tareas, iniciar y detener temporizadores para cada tarea y eliminar tareas. Al final de este proyecto, tendrás una aplicación web de temporizador de tareas completamente funcional con una interfaz moderna y amigable para el usuario.

Este proyecto, el 'Juego de rompecabezas Flip con jQuery', ofrece una experiencia práctica en el desarrollo web, centrándose en JavaScript, jQuery y Bootstrap. Implica la programación orientada a objetos en JavaScript y aborda el problema común del enlace de 'this' en el contexto del desarrollo web. El juego se implementa utilizando jQuery y Bootstrap 3 para la interfaz de usuario. Si bien es útil tener conocimientos de Bootstrap, la lógica central del proyecto se construye con jQuery y JavaScript.

En este laboratorio, aprenderás los conceptos básicos de JavaScript, incluyendo cómo incrustarlo directamente en un archivo HTML y cómo enlazar un archivo JavaScript externo.

En este proyecto, construiremos un juego de evasión de bloques divertido y sencillo utilizando HTML, CSS y JavaScript. Este juego implica bloques que se mueven y el jugador debe hacer clic en los bloques negros para obtener puntos y evitar hacer clic en los bloques blancos. Comencemos a construirlo paso a paso!