Alternativas a XPath en Selenium: Cómo localizar elementos de manera eficiente

En Selenium, puedes localizar elementos usando diferentes estrategias además de By.XPATH. Aquí te dejo las alternativas y cómo obtenerlas en cada caso.


🔹 Alternativas a By.XPATH y cómo obtenerlas

Método Descripción Ejemplo
By.ID Busca por el atributo id del elemento. By.ID, "miElemento"
By.NAME Busca por el atributo name del elemento. By.NAME, "usuario"
By.CLASS_NAME Busca por el atributo class del elemento. By.CLASS_NAME, "boton-login"
By.TAG_NAME Busca por el tipo de etiqueta HTML. By.TAG_NAME, "button"
By.LINK_TEXT Busca enlaces (<a>) por su texto exacto. By.LINK_TEXT, "Iniciar sesión"
By.PARTIAL_LINK_TEXT Busca enlaces por una parte del texto. By.PARTIAL_LINK_TEXT, "Iniciar"
By.CSS_SELECTOR Busca usando selectores CSS. By.CSS_SELECTOR, ".clase .subclase"

Ejemplo con cada alternativa:

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# Espera hasta que el elemento esté presente usando diferentes métodos
elemento_id = WebDriverWait(self.driver, 10).until(EC.presence_of_element_located((By.ID, "miElemento")))
elemento_name = WebDriverWait(self.driver, 10).until(EC.presence_of_element_located((By.NAME, "usuario")))
elemento_class = WebDriverWait(self.driver, 10).until(EC.presence_of_element_located((By.CLASS_NAME, "boton-login")))
elemento_tag = WebDriverWait(self.driver, 10).until(EC.presence_of_element_located((By.TAG_NAME, "button")))
elemento_link = WebDriverWait(self.driver, 10).until(EC.presence_of_element_located((By.LINK_TEXT, "Iniciar sesión")))
elemento_partial_link = WebDriverWait(self.driver, 10).until(EC.presence_of_element_located((By.PARTIAL_LINK_TEXT, "Iniciar")))
elemento_css = WebDriverWait(self.driver, 10).until(EC.presence_of_element_located((By.CSS_SELECTOR, ".clase .subclase")))

🔹 ¿Cómo obtener estos valores en la web?

Puedes inspeccionar los elementos en el navegador (F12 → "Inspeccionar elemento") y obtenerlos de la siguiente manera:

  1. ID → Busca id="miElemento" en el HTML.
  2. NAME → Busca name="usuario".
  3. CLASS_NAME → Usa .clase si tiene class="boton-login".
  4. TAG_NAME → Usa button, input, div, etc.
  5. LINK_TEXT → Usa el texto visible de un enlace (<a>).
  6. PARTIAL_LINK_TEXT → Usa parte del texto del enlace.
  7. CSS_SELECTOR → Usa selectores CSS como .clase, #id, [atributo="valor"], etc.

🔥 ¿Cuándo usar cada uno?

  • ID → La mejor opción si el elemento tiene un id único.
  • NAME → Útil si hay varios elementos con el mismo nombre (ejemplo: formularios).
  • CLASS_NAME → Bueno si la clase es específica y única.
  • TAG_NAME → Si buscas todos los elementos de un tipo (button, input).
  • LINK_TEXT → Si es un enlace (<a>) con texto fijo.
  • PARTIAL_LINK_TEXT → Si el enlace tiene texto variable.
  • CSS_SELECTOR → Más rápido que XPath en muchos casos, útil para estructuras complejas.
  • XPATH → Más flexible para navegar por estructuras complejas.

Si el id o name están disponibles, úsalos en lugar de XPATH para un mejor rendimiento. 🚀

find_element en Selenium no funciona: causas y soluciones

Si el botón existe pero el código no funciona, aquí hay varias razones posibles y soluciones:

1. El botón aún no está disponible en el DOM

Aunque el botón exista, puede que Selenium intente encontrarlo antes de que esté completamente cargado. Prueba usar WebDriverWait:

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

elemento = WebDriverWait(self.driver, 10).until(
    EC.presence_of_element_located((By.XPATH, xpath_boton_login))
)

🔹 Esto espera hasta 10 segundos a que el botón aparezca en el DOM antes de continuar.


2. El botón no es interactuable

Puede que el botón esté en el DOM, pero todavía no sea clickeable. Usa element_to_be_clickable:

elemento = WebDriverWait(self.driver, 10).until(
    EC.element_to_be_clickable((By.XPATH, xpath_boton_login))
)

🔹 Esto espera a que el botón sea interactuable antes de seleccionarlo.


3. Hay un iframe que lo bloquea

Si el botón está dentro de un iframe, necesitas cambiar el foco:

self.driver.switch_to.frame("id_del_iframe")
elemento = self.driver.find_element(By.XPATH, xpath_boton_login)
self.driver.switch_to.default_content()  # Volver al contexto principal si es necesario

4. El botón está oculto por otro elemento

Si el botón está en el DOM pero no visible, prueba hacer scroll hasta él:

from selenium.webdriver.common.action_chains import ActionChains

elemento = self.driver.find_element(By.XPATH, xpath_boton_login)
self.driver.execute_script("arguments[0].scrollIntoView();", elemento)

🔹 Esto lo lleva a la vista antes de intentar interactuar con él.


5. Hay múltiples elementos con el mismo XPath

Si xpath_boton_login selecciona varios elementos, find_element podría estar encontrando el incorrecto. Prueba find_elements:

elementos = self.driver.find_elements(By.XPATH, xpath_boton_login)
if elementos:
    elemento = elementos[0]  # Seleccionar el primero

presence_of_element_located

Para hacer que el programa espere hasta que el elemento esté presente en el DOM antes de continuar, usa WebDriverWait con presence_of_element_located.

Código para esperar hasta que el elemento esté presente:

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# Esperar hasta que el elemento esté presente en el DOM (máximo 10 segundos)
elemento = WebDriverWait(self.driver, 10).until(
    EC.presence_of_element_located((By.XPATH, xpath_boton_login))
)

🔹 Explicación:

  1. WebDriverWait(self.driver, 10): Espera hasta 10 segundos antes de lanzar una excepción.
  2. until(EC.presence_of_element_located((By.XPATH, xpath_boton_login))):
    • Verifica que el elemento esté en el DOM, pero no necesariamente visible o interactuable.

Si también necesitas que el botón sea clickeable antes de continuar, usa element_to_be_clickable en lugar de presence_of_element_located.


Código para esperar hasta que sea clickeable:

elemento = WebDriverWait(self.driver, 10).until(
    EC.element_to_be_clickable((By.XPATH, xpath_boton_login))
)

Este código espera que el botón esté en el DOM y listo para ser presionado.

Si el tiempo de espera se agota sin encontrar el elemento, lanzará un TimeoutException.

Cómo descargar videos de Facebook utilizando el inspector de código en Google Chrome

Cómo descargar videos de Facebook utilizando el inspector de código en Google Chrome

  1. Accede al video en Facebook: Inicia sesión en tu cuenta de Facebook y navega hasta la publicación que contiene el video que deseas descargar.

  2. Abre las herramientas de desarrollador: Haz clic derecho en cualquier parte de la página (preferiblemente sobre el video) y selecciona "Inspeccionar" en el menú desplegable. Alternativamente, puedes presionar Ctrl + Shift + I en Windows o Cmd + Option + I en Mac para abrir las herramientas de desarrollador.

  3. Ve a la pestaña "Red": En la ventana de herramientas de desarrollador que se abre, selecciona la pestaña "Red" o "Network".

  4. Filtra por contenido multimedia: Dentro de la pestaña "Red", encontrarás una opción para filtrar los tipos de archivos. Haz clic en "Medios" o "Media" para mostrar únicamente los archivos multimedia que se cargan en la página.

  5. Reproduce el video: Vuelve a la página de Facebook y reproduce el video que deseas descargar. Mientras el video se reproduce, la pestaña "Red" comenzará a llenarse con diferentes archivos que se están cargando.

  6. Identifica el archivo de video: Busca en la lista de archivos un elemento que tenga una extensión de video común, como .mp4. Este archivo suele ser el video que se está reproduciendo.

  7. Copia la URL del video: Haz clic derecho en el archivo identificado y selecciona "Copiar URL" o "Copy URL".

  8. Abre el video en una nueva pestaña: Abre una nueva pestaña en tu navegador, pega la URL copiada en la barra de direcciones y presiona Enter. El video debería cargarse y reproducirse en esta nueva pestaña.

  9. Descarga el video: Haz clic derecho sobre el video en la nueva pestaña y selecciona "Guardar video como..." o "Save video as...". Elige la ubicación en tu computadora donde deseas guardar el archivo y confirma la descarga.

  10. Puedes probar quitando "&bytestart=466691&byteend=581710" al final de la URL y pegandolo en una nueva pestaña.


01100110 01101001 01101110 00100000 01100100 01100101 00100000 01100011 01101111 01100100 01101001 01100111 01101111

RETURN


Crear el entorno virtual

Sí, es recomendable crear un entorno virtual para tu proyecto de Python antes de empaquetarlo. Esto te permite aislar las dependencias y asegurarte de que el ejecutable no tenga problemas al ejecutarse en otras computadoras.


1️⃣ Crear el entorno virtual

Ejecuta el siguiente comando en la terminal (CMD o PowerShell) dentro de la carpeta de tu proyecto:

python -m venv venv
py -3.8 -m venv venv (para python 3.8)

Esto creará una carpeta llamada venv que contendrá el entorno virtual.


2️⃣ Activar el entorno virtual

En Windows (CMD)

venv\Scripts\activate

En PowerShell

venv\Scripts\Activate.ps1

Si te da un error de permisos en PowerShell, prueba con:

Set-ExecutionPolicy Unrestricted -Scope Process

3️⃣ Instalar las dependencias

Ahora instala las librerías que usa tu programa. Por ejemplo:

pip install pyinstaller
pip install pyqt5

Si tienes un archivo requirements.txt con las dependencias, usa:

pip install -r requirements.txt

4️⃣ Empaquetar con PyInstaller

Una vez que tu entorno virtual está listo y tiene las dependencias, puedes crear el ejecutable con:

pyinstaller --noconsole --onefile --add-data "carpeta_datos;carpeta_datos" script.py

Esto generará un ejecutable en la carpeta dist/.


5️⃣ Desactivar el entorno virtual (opcional)

Si ya terminaste, puedes desactivar el entorno con:

deactivate

📌 ¿Por qué usar un entorno virtual?

✅ Asegura que tu programa use las versiones correctas de las librerías.
✅ Evita conflictos con otras instalaciones de Python en la PC.
✅ Permite empaquetar el ejecutable con PyInstaller sin problemas.



01100110 01101001 01101110 00100000 01100100 01100101 00100000 01100011 01101111 01100100 01101001 01100111 01101111

RETURN


Crear un instalador con Inno Script Studio (varios archivos)

Si tu programa depende de varios archivos, entonces lo mejor es crear un instalador con Inno Script Studio. Aquí te dejo los pasos detallados para lograrlo:


1️⃣ Generar los archivos ejecutables con PyInstaller

Antes de usar Inno Script Studio, debes convertir tu script de Python en un ejecutable.

🔹 Ejecuta este comando en la terminal (CMD o PowerShell) en la carpeta de tu script:

pyinstaller --noconsole --onefile --add-data "carpeta_datos;carpeta_datos" script.py

🔹 Explicación de las opciones:

  • --noconsole → Oculta la consola (ideal para programas con interfaz gráfica).
  • --onefile → Empaqueta todo en un solo .exe.
  • --add-data → Incluye archivos adicionales como imágenes, bases de datos, etc.

📌 Salida esperada:
Se creará una carpeta llamada dist/ donde estará tu ejecutable (script.exe).


2️⃣ Preparar la carpeta para el instalador

Crea una carpeta llamada Instalador y dentro coloca:
✅ El ejecutable (script.exe) de la carpeta dist/.
✅ Otras carpetas con archivos que necesite tu programa (imágenes, bases de datos, etc.).

📁 Estructura recomendada:

Instalador/
│── script.exe
│── datos/       # Carpeta con datos adicionales
│── config/      # Archivos de configuración
│── README.txt   # Instrucciones opcionales

3️⃣ Configurar Inno Script Studio

Ahora que tienes listos los archivos, abre Inno Script Studio y sigue estos pasos:

1. Crear un nuevo script

  • Abre Inno Script Studio y selecciona "Nuevo Proyecto".
  • Define el nombre de tu aplicación, versión, empresa y el nombre del instalador (setup.exe).

2. Agregar archivos al instalador

  • Ve a la pestaña "Files" y haz clic en "Add Files".
  • Selecciona script.exe y otros archivos/carpetas necesarias.
  • Asegúrate de que la ruta de instalación sea algo como:
    {app}\MiPrograma
    

3. Configurar accesos directos

  • Ve a "Icons" → Agrega un acceso directo en el escritorio y en el menú inicio.
  • Define que el acceso directo apunte a {app}\MiPrograma\script.exe.

4. Configurar desinstalador

  • Ve a la pestaña "Uninstall" y marca la opción para agregar una entrada en "Agregar o quitar programas" de Windows.

5. Compilar el instalador

  • Presiona "Build" para generar el setup.exe.
  • El archivo de instalación estará en la carpeta de salida (Output).

4️⃣ Probar el instalador

🔹 Ejecuta setup.exe en una PC de prueba y verifica que:
✅ Se copien todos los archivos a C:\Program Files\MiPrograma.
✅ Se creen los accesos directos en el menú de inicio y escritorio.
✅ El programa se abra correctamente.
✅ Se pueda desinstalar desde "Agregar o quitar programas".


01100110 01101001 01101110 00100000 01100100 01100101 00100000 01100011 01101111 01100100 01101001 01100111 01101111

RETURN

Crear un instalador con Inno Script Studio

Cuando creas un instalador con Inno Script Studio, hay dos enfoques principales para distribuir tu programa en Windows:

  1. Un solo ejecutable (.exe) portable
  2. Un instalador que coloca varios archivos en el sistema

Cuándo usar solo un ejecutable (.exe portable)

Usar un solo .exe es útil cuando:
✅ Tu aplicación es sencilla y no requiere instalación.
✅ No depende de archivos externos (como librerías DLL, imágenes, configuraciones, bases de datos externas).
✅ No necesita accesos directos en el menú de inicio o en el escritorio.
✅ Quieres que el usuario pueda ejecutarlo sin permisos de administrador.

Ejemplo: Una calculadora simple hecha en Python que solo usa tkinter.

📌 Herramientas para crear un ejecutable portable:

  • pyinstaller --onefile script.py
  • auto-py-to-exe (interfaz gráfica de PyInstaller)

Cuándo usar un instalador (setup.exe con Inno Script Studio)

Debes usar un instalador cuando:
✅ Tu aplicación tiene múltiples archivos (DLLs, imágenes, bases de datos, configuraciones).
✅ Requiere dependencias específicas (como Python, librerías de terceros).
✅ Quieres que el usuario lo instale en C:\Program Files con accesos directos.
✅ Necesitas modificar el registro de Windows o crear servicios.

Ejemplo: Un programa que usa SQLite para guardar datos y necesita librerías externas como PyQt5.

📌 Proceso con Inno Script Studio:

  1. Usa pyinstaller --noconsole --add-data "carpeta_datos;carpeta_datos" script.py
  2. Empaqueta los archivos generados en un instalador con Inno Script Studio.
  3. Configura accesos directos, desinstalador y permisos de instalación.

¿Cuál opción elegir?

Si tu programa es simple y autónomo, usa un solo .exe portable.
Si tu programa depende de varios archivos, usa un instalador con Inno Script Studio. (ir aca)


01100110 01101001 01101110 00100000 01100100 01100101 00100000 01100011 01101111 01100100 01101001 01100111 01101111

RETURN

IAs Utiles

codigo varios: 


Button

Button

@Composable
fun Button(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean =
true,
shape: Shape = ButtonDefaults.
shape,
colors: ButtonColors = ButtonDefaults.
buttonColors(),
elevation: ButtonElevation? = ButtonDefaults.
buttonElevation(),
border: BorderStroke? =
null,
contentPadding: PaddingValues = ButtonDefaults.
ContentPadding,
interactionSource: MutableInteractionSource =
remember { MutableInteractionSource() },
content:
@Composable RowScope.() -> Unit
) {
val containerColor = colors.containerColor(enabled).value
val contentColor = colors.contentColor(enabled).value
val shadowElevation = elevation?.shadowElevation(enabled, interactionSource)?.value ?: 0.dp
val tonalElevation = elevation?.tonalElevation(enabled, interactionSource)?.value ?: 0.dp
Surface(
onClick = onClick,
modifier = modifier.semantics { role = Role.Button },
enabled = enabled,
shape = shape,
color = containerColor,
contentColor = contentColor,
tonalElevation = tonalElevation,
shadowElevation = shadowElevation,
border = border,
interactionSource = interactionSource
) {
CompositionLocalProvider(LocalContentColor provides contentColor) {
ProvideTextStyle(value = MaterialTheme.typography.labelLarge) {
Row(
Modifier
.
defaultMinSize(
minWidth = ButtonDefaults.MinWidth,
minHeight = ButtonDefaults.MinHeight
)
.padding(contentPadding),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,
content = content
)
}
}
}
}

ejemplo simple de una aplicación Node.js que utiliza Express.js

Aquí te proporcionaré un ejemplo simple de una aplicación Node.js que utiliza Express.js para crear un servidor web y manejar el ingreso de usuarios y contraseñas de manera básica. Para este ejemplo, utilizaremos una matriz (array) para almacenar usuarios y contraseñas en memoria, lo cual no es seguro para una aplicación en producción, pero es útil para fines de demostración.

Asegúrate de tener Node.js instalado en tu sistema antes de continuar.

1. Crea una carpeta para tu proyecto y accede a ella en tu línea de comandos:

```bash
mkdir node-login-app
cd node-login-app
```

2. Inicializa un proyecto Node.js ejecutando el siguiente comando e instalando las dependencias necesarias:

```bash
npm init -y
npm install express express-session body-parser
```

3. Crea un archivo llamado `app.js` en la carpeta de tu proyecto y agrega el siguiente código:

```javascript
const express = require('express');
const session = require('express-session');
const bodyParser = require('body-parser');

const app = express();

// Configurar middleware
app.use(bodyParser.urlencoded({ extended: true }));
app.use(session({
  secret: 'secret-key',
  resave: true,
  saveUninitialized: true
}));

// Datos de usuarios (en un entorno real, esto debería almacenarse de forma segura en una base de datos)
const users = [
  { username: 'usuario1', password: 'contrasena1' },
  { username: 'usuario2', password: 'contrasena2' }
];

// Rutas
app.get('/', (req, res) => {
  res.send('Bienvenido al sistema de inicio de sesión');
});

app.get('/login', (req, res) => {
  res.sendFile(__dirname + '/login.html');
});

app.post('/login', (req, res) => {
  const { username, password } = req.body;
  
  const user = users.find(u => u.username === username && u.password === password);

  if (user) {
    req.session.loggedin = true;
    req.session.username = username;
    res.redirect('/home');
  } else {
    res.send('Credenciales incorrectas. <a href="/login">Intenta de nuevo</a>');
  }
});

app.get('/home', (req, res) => {
  if (req.session.loggedin) {
    res.send(`¡Hola, ${req.session.username}! Has iniciado sesión. <a href="/logout">Cerrar sesión</a>`);
  } else {
    res.redirect('/login');
  }
});

app.get('/logout', (req, res) => {
  req.session.destroy(err => {
    if (err) {
      console.error(err);
    } else {
      res.redirect('/');
    }
  });
});

// Iniciar servidor
const port = 3000;
app.listen(port, () => {
  console.log(`Servidor escuchando en el puerto ${port}`);
});
```

4. Crea un archivo llamado `login.html` en la misma carpeta y agrega el siguiente código HTML para la página de inicio de sesión:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Iniciar sesión</title>
</head>
<body>
  <h1>Iniciar sesión</h1>
  <form action="/login" method="POST">
    <label for="username">Usuario:</label>
    <input type="text" id="username" name="username" required><br>
    <label for="password">Contraseña:</label>
    <input type="password" id="password" name="password" required><br>
    <button type="submit">Iniciar sesión</button>
  </form>
</body>
</html>
```

5. Ejecuta la aplicación:

```bash
node app.js
```

La aplicación estará disponible en `http://localhost:3000`. Puedes acceder a la página de inicio de sesión y probar con los usuarios y contraseñas definidos en el código. Este es solo un ejemplo básico, y en una aplicación real, deberías utilizar una base de datos para almacenar y autenticar usuarios de manera segura.
En Jetpack Compose, el objeto `Modifier` proporciona una variedad de propiedades que puedes utilizar para aplicar modificadores a tus componentes de interfaz de usuario y controlar su diseño y comportamiento. A continuación, se muestran algunas de las propiedades más comunes que puedes utilizar con `Modifier`:

1. Tamaño y Diseño:
   - `size(width: Dp, height: Dp)`: Establece el ancho y el alto del componente.
   - `fillMaxWidth()`: Hace que el componente ocupe todo el ancho disponible.
   - `fillMaxHeight()`: Hace que el componente ocupe todo el alto disponible.
   - `requiredWidth(width: Dp)`: Requiere que el componente tenga un ancho específico.
   - `requiredHeight(height: Dp)`: Requiere que el componente tenga una altura específica.
   - `offset(x: Dp, y: Dp)`: Desplaza el componente en el eje X e Y.

2. Margen y Espaciado:
   - `padding(all: Dp)`: Agrega márgenes iguales en todos los lados.
   - `padding(horizontal: Dp, vertical: Dp)`: Agrega márgenes horizontales y verticales.
   - `padding(start: Dp, top: Dp, end: Dp, bottom: Dp)`: Agrega márgenes en lados específicos.

3. Alineación:
   - `align(alignment: Alignment)`: Alinea el componente dentro de su contenedor.
   - `alignBy(alignmentLine: AlignmentLine)`: Alinea el componente por una línea específica (por ejemplo, la línea base de un texto).

4. Fondo y Color:
   - `background(color: Color)`: Establece un color de fondo para el componente.
   - `border(border: BorderStroke)`: Agrega un borde al componente.

5. Interacción:
   - `clickable(onClick: () -> Unit)`: Hace que el componente sea interactivo y responde a clics.
   - `pointerInput` y `pointerInteropFilter`: Permite gestionar eventos de entrada personalizados.

6. Comportamiento Scroll:
   - `scrollable`: Hace que el componente sea desplazable.

7. Flujo de Contenido:
   - `fillMaxSize()`: Hace que el componente ocupe todo el espacio disponible en su contenedor.
   - `weight(weight: Float)`: Distribuye el espacio disponible en un `Row` o `Column` según el peso relativo.

8. Transformación y Rotación:
   - `scale(scaleX: Float, scaleY: Float)`: Escala el componente en el eje X e Y.
   - `rotate(degrees: Float)`: Rota el componente por un ángulo específico.

9. Clips y Recortes:
   - `clip(shape: Shape)`: Aplica un clip a la forma del componente.
   - `clipToBounds()`: Recorta el contenido que se desborda del componente.

10. Interacción táctil:
    - `swipeable()`: Hace que el componente sea deslizable.

Estas son solo algunas de las propiedades más comunes que puedes utilizar con `Modifier` en Jetpack Compose. Puedes combinar y anidar modificadores para lograr el diseño y el comportamiento específicos que necesites para tus componentes de interfaz de usuario. El uso de estos modificadores te permite crear interfaces de usuario flexibles y personalizadas en Compose.

------ Aquí te proporcionaré ejemplos de código para algunas de las propiedades comunes que se pueden aplicar utilizando el modificador Modifier en Jetpack Compose: Tamaño y Diseño: size(width: Dp, height: Dp):
    
        
Box(
    modifier = Modifier
        .size(100.dp, 100.dp)
        .background(Color.Blue)
) {
    // Contenido del componente
}
        
    
Margen y Espaciado: padding(all: Dp):

Box(
    modifier = Modifier
        .padding(16.dp)
        .background(Color.Green)
) {
    // Contenido del componente con margen en todos los lados
}
     
Alineación: align(alignment: Alignment):

Box(
    modifier = Modifier
        .size(100.dp, 100.dp)
        .background(Color.Red)
        .align(Alignment.Center)
) {
    // Contenido del componente alineado en el centro
}

Fondo y Color: background(color: Color):

Box(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.Yellow)
) {
    // Contenido del componente con color de fondo
}

Interacción: clickable(onClick: () -> Unit):

var text by remember { mutableStateOf("Haz clic en mí") }

Box(
    modifier = Modifier
        .size(100.dp, 100.dp)
        .background(Color.Magenta)
        .clickable {
            text = "¡Haz hecho clic!"
        }
) {
    Text(text)
}

Flujo de Contenido: fillMaxSize():

Column(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.Cyan)
) {
    Text("Elemento 1")
    Text("Elemento 2", modifier = Modifier.fillMaxWidth())
    Text("Elemento 3")
}

Clips y Recortes: clip(shape: Shape):

Box(
    modifier = Modifier
        .size(100.dp, 100.dp)
        .clip(RoundedCornerShape(16.dp))
        .background(Color.Orange)
) {
    // Contenido del componente con esquinas redondeadas
}

Interacción táctil: swipeable():

val swipeState = rememberSwipeableState(initialValue = 0)
Box(
    modifier = Modifier
        .size(100.dp, 100.dp)
        .background(Color.Purple)
        .swipeable(
            state = swipeState,
            anchors = mapOf(
                0f to 0,
                1000f to 1
            ),
            thresholds = { _, _ -> FractionalThreshold(0.5f) },
            orientation = Orientation.Horizontal
        )
) {
    Text("Desliza")
}

herramientas online HTML

Puedes utilizar una variedad de herramientas en línea para preparar texto, darle formato y luego obtener el código HTML resultante. Aquí hay algunas opciones populares:

Nombre URL
Dillinger [https://dillinger.io/]
StackEdit [https://stackedit.io/]
TinyMCE [https://www.tiny.cloud/]
CKEditor [https://ckeditor.com/ckeditor-4/]
Google Docs [https://docs.google.com/]
Microsoft Word Online [https://login.microsoftonline.com/]

Markdown to HTML Converters:

  • Dillinger: Dillinger es un editor en línea de Markdown que te permite escribir y dar formato a tu texto en Markdown y luego convertirlo a HTML con un solo clic.
  • StackEdit: StackEdit es un editor de Markdown en línea con una vista previa en tiempo real y la capacidad de exportar tu trabajo en HTML.

Editores en Línea con Exportación HTML:

  • TinyMCE: TinyMCE es un potente editor de texto enriquecido en línea que te permite dar formato a tu contenido y luego exportarlo como HTML.
  • CKEditor: CKEditor es otro editor enriquecido en línea con capacidades de exportación HTML.

Procesadores de Texto en Línea:

  • Google Docs: Puedes usar Google Docs para dar formato a tu texto y luego exportarlo a HTML. Ve a “Archivo” > “Descargar” > “Web Page (.html, zipped)”.
  • Microsoft Word Online: Si prefieres Microsoft Word, puedes usar Microsoft Word Online y luego descargar tu documento en formato HTML.

Editores de HTML en Línea:

  • HTML Editor Online: HTML Editor Online es un editor de HTML en línea que te permite escribir y dar formato a código HTML directamente.

Plataformas de Blogging:

Si estás escribiendo contenido para un blog, muchas plataformas de blogging como WordPress, Blogger y Medium tienen editores de texto con funciones de formato y la capacidad de publicar en formato HTML.

Conversores de Texto a HTML:

Puedes utilizar herramientas en línea como Text to HTML Converter para convertir texto sin formato en HTML.
Estas herramientas pueden ayudarte a dar formato a tu contenido de manera eficiente y luego obtener el código HTML resultante para su uso en tu sitio web o blog. Elige la que mejor se adapte a tus necesidades y preferencias.

???

https://youtube.com/shorts/6mLN39EE5hE?si=ptldeUKRZ9jqJdvK

@Preview - JetPackCompose

@Preview(showBackground = true)


@Preview(name = "Preview1", heightDp = 50, widthDp = 200, showBackground = true, showSystemUi = true)




Android - Cómo escribir mensajes de registro

La clase Log te permite crear mensajes de registro que aparecerán en Logcat. Todos los mensajes de registro de Android tienen una etiqueta y una prioridad asociadas a ellos. La etiqueta de un mensaje de registro del sistema es una string breve que indica el componente del sistema a partir del cual se origina el mensaje.

Usa los siguientes métodos de acceso, ordenados de mayor a menor prioridad:



aboutToQuit

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QAction
from PyQt5.QtCore import QObject, pyqtSignal

class MyMainWindow(QMainWindow):
    def __init__(self):
        super().__init__()

        self.initUI()

    def initUI(self):
        # Crear una acción para salir de la aplicación
        exit_action = QAction('Salir', self)
        exit_action.triggered.connect(self.close)

        # Agregar la acción al menú Archivo
        file_menu = self.menuBar().addMenu('Archivo')
        file_menu.addAction(exit_action)

    def closeEvent(self, event):
        # Se emite la señal aboutToQuit antes de salir
        self.aboutToQuit.emit()
        super().closeEvent(event)

La señal aboutToQuit se emite cuando la aplicación está a punto de salir. Puedes usar esta señal para realizar tareas de limpieza o guardar datos antes de que la aplicación se cierre. Aquí tienes un ejemplo de cómo puedes usarla:

class MyApp(QObject):
    aboutToQuit = pyqtSignal()

    def __init__(self):
        super().__init__()

        # Crear la ventana principal
        self.window = MyMainWindow()
        
        # Conectar la señal aboutToQuit de la ventana a la acción de limpieza
        self.window.aboutToQuit.connect(self.cleanUp)

    def cleanUp(self):
        # Realizar tareas de limpieza aquí antes de salir de la aplicación
        print("Tareas de limpieza realizadas antes de salir.")

if __name__ == '__main__':
    app = QApplication(sys.argv)
    my_app = MyApp()
    sys.exit(app.exec_())


En este ejemplo, hemos creado una clase MyApp que representa una aplicación PyQt5. Hemos conectado la señal aboutToQuit de la ventana principal (MyMainWindow) a un método cleanUp en la clase MyApp. Cuando se emite la señal aboutToQuit, el método cleanUp se ejecutará, lo que te permite realizar tareas de limpieza antes de que la aplicación se cierre. En este caso, simplemente se muestra un mensaje en la consola, pero puedes agregar tus propias tareas de limpieza según tus necesidades.

INDICE