AlexisMauriz /
mini-proyecto-chat-whatsapp
Mini Proyecto/Diseño de Chat de WhatsApp escrito con HTML y CSS.
27/100 healthActive repository
CSSNo license
⑂ 0 forks◯ 0 issuesUpdated Oct 6, 2023
Loading repository data…
ivancidev / repository
chat-collaborative
Proyecto de chat colaborativo en tiempo real con Python y WebSocket, desarrollado como parte de la materia de Sistemas Colaborativos. Permite múltiples usuarios, historial de mensajes y notificaciones de conexión y desconexión.
Live repository statistics
★ 1Stars
⑂ 0Forks
◯ 0Open issues
◉ 1Watchers
27/100
OPENREPOHUB HEALTH SIGNAL
Limited signals
A transparent discovery signal based on current public GitHub metadata.
Recent activity35% weight
10
Community adoption25% weight
0
Maintenance state20% weight
100
License clarity10% weight
0
Project information10% weight
35
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
README preview
Chat Colaborativo WebSocket
Requisitos
- Python 3.7 o superior
- pip (gestor de paquetes de Python)
- Git
Instalación
- Clonar el repositorio:
git clone https://github.com/ivancidev/chat-collaborative
cd chat-collaborative
- Crear y activar entorno virtual:
En Windows:
# Crear el entorno virtual
python -m venv venv
# Activar el entorno virtual
.\venv\Scripts\activate
# Verificar que está activado (deberías ver (venv) al inicio de la línea de comandos)
En Linux/Mac:
# Crear el entorno virtual
python3 -m venv venv
# Activar el entorno virtual
source venv/bin/activate
# Verificar que está activado (deberías ver (venv) al inicio de la línea de comandos)
- Instalar todas las dependencias del proyecto:
pip install -r requirements.txt
Ejecución
- Iniciar el servidor:
python src/server.py
El servidor WebSocket estará corriendo en Servidor WebSocket corriendo en ws://localhost:12345
- Iniciar el cliente:
Hay varias formas de abrir el cliente HTML:
a) Usando Python (servidor HTTP simple):
python -m http.server 8000
Luego abre en tu navegador: http://localhost:8000/src/client.html
b) Usando Live Server en VS Code:
- Instala la extensión "Live Server"
- Click derecho en
src/client.html - Selecciona "Open with Live Server"
c) Abriendo directamente el archivo:
- Navega a la carpeta
src - Haz doble clic en
client.htmlpara abrirlo en tu navegador predeterminado
Capturas de Pantalla
-Al abrir el cliente debe pedirte el nombre de usuario:
-Demostración de mensajes entre usuarios:
Notas
- Para desactivar el entorno virtual cuando termines, simplemente escribe
deactivateen la terminal - Si cierras la terminal, necesitarás activar el entorno virtual nuevamente usando los comandos del paso 2
ALGORITHMICALLY RELATED
Similar Open-Source Projects
Selected from shared topics, language and repository description—not editorial ratings.
★ 1
marcosd59 /
chatbot-ui
Este proyecto desarrolla una interfaz de usuario para un chatbot, utilizando HTML, CSS y JavaScript para facilitar su integración en cualquier sitio web.
29/100 healthActive repository
CSSNo license#chatbot#javascript#user-interface-design
⑂ 0 forks◯ 0 issuesUpdated May 24, 2024
kreye /
Proyecto.
<div class="container py-5"> <h1 class="h2">¿Qué es HTML?</h1> <a class="btn btn-primary" href="index.html1.html" rel="noopener noreferrer" target="_blank"> Ejemplo de formulario HTML-------> <a class="btn btn-primary" href="index.html" rel="noopener noreferrer" target="_blank"> DAR CLICK PARA VER PROYECTO----------> <div Empecemos a hablar ahora de las diferentes partes del código de una página en HTML. Lo primero es la estructura básica de un documento HTML. Hay variantes en cuyos matices no quiero entrar por no dispersarnos, pero para mantener las cosas simples, te recomiendo usar siempre esta plantilla: <!DOCTYPE HTML> <html lang="es"> </title> <meta charset="UTF-8"> <meta name="description" content="Descripción de la página…"> </head> </div </html> <h1> Estructura básica de un documento HTML</h1> <p> </p> <p> Elegir un buen editor para crear páginas HTML Ahora que ya hemos visto la teoría básica y un pequeño ejemplo concreto, es hora de ponerse manos a la obra. Para ello, lo que necesitas ahora es un editor. Puedes editar HTML en cualquier editor, incluso en el Notepad de Windows, si me apuras, puesto que, como has podido ver, el código HTML es simple texto. Sin embargo, no es lo conveniente. Te conviene usar un editor HTML especializado. Así que veamos cuáles hay y cuál de ellos puede ser una buena opción para ti. <span class="text-danger">♥</span></p> </div> <!doctype html> <html lang="en"> <head> <img src="IMAGEN.1.jpg" class="col-form-label"" alt="..."> </title> </head> <!DOCTYPE html> <html lang="es"> <head> <h1 class="displa y-1"> Creando un contenido para tu página web</h1> <div <body> <IMG SRC="msTKl.png" ALIGN=LEFT WIDTH=500 HEIGHT=400 > </body> <> <h1> ¿Cual es la función del html y css? <div Antes de meternos a lleno quiero asegurarme que entiendas bien cual es la función del html y css. No te voy a aburrir con ninguna de esas definiciones tediosas que solo expertos entienden. Básicamente quiero que entiendas que el html es un lenguaje de marcado con el cual le das la estructura a una pagina web. Mientras que el css es un lenguaje de estilo que define la presentación de un documento html. </h1> <body background="FONDO.jpg"></body> <div <body background="FONDO.jpg" bgcolor="FFCE"> <p> Esto se puede hacer de una manera más purista en modo texto trabajado directamente con el código HTML, o bien, de una manera más visual y amigable con un editor HTML especializado, muy parecido a cómo se trabaja también en un editor como Microsoft Word, por ejemplo. A partir de aquí, el proceso (que iré desglosando y será lo que aprenderás a lo largo del post) sería: Aprender el principio fundamental de HTML: crear documentos estructurados con etiquetas. Elegir el mejor editor para tu caso concreto. la estructura básica de tu página HTML: la cabecera y el cuerpo. Crear el contenido y aplicarle formato con las etiquetas HTML: títulos, párrafos de texto, enlaces, imágenes, tablas, audio y vídeo embebido, etc. Si los necesitas, integrar también los elementos interactivos (formularios). Implementar, en su caso, en el servidor la lógica para responder a los formularios. Publicar (hacer visible) la página en Internet o en local. </p> <style> a { color: rgba(58, 2, 39, 0.767) ; } /* CSS link color */ </style> </head> <body> <A HREF="Aprende_lenguaje_html.jpg" ISMAP></A> </body> <br> <body> <a href="http://example.com/" style="color:#0a0106;"> <IMG SRC="IMAGEN/SCC.png" USEMAP="#nombre1"> </a> </body> <div class="border border-success p-2 mb-2"> DOCTYPE HTML: Es la etiqueta que define que el documento es HTM</div> <div class="border border-success p-2 mb-2 border-opacity-75"> HTML: Es la principal etiqueta de una página HTML;</div> <div class="border border-success p-2 mb-2 border-opacity-50"> HEAD: Es la etiqueta que abre el bloque de información sobre la web;</div> <div class="border border-success p-2 mb-2 border-opacity-25"> TITLE: Acá, escribimos el título genial que daremos a la página web. Ese que aparece en el borde de la ventana del navegador.</div> <br> <body> <img src="Aprende_lenguaje_html.jpg" class="col-form-label"" alt="..."> <div> <body> <video autoplay controls src="y2mate.com - 1 Crear una página Web con Visual Studio Code_1080p.mp4"> </video> <div <br <div class="col-8"> CREA TU PÁGINA CON ESTILO </div class="card-body"> <body> <body> <a href="http://example.com/" style="color:rgb(2, 20, 10);"> <a href="https://chat.whatsapp.com/GzWc1FDWtuq6dfPzblTwlg">Envíanos un mensaje de WhatsApp</a> </body> <p>GRACIAS POR SU ATECIÓN! <span class="text-danger">♥</span></p>