Entradas

Mostrando las entradas de marzo 23, 2025

flexbox basico

-
<style> *{afont-size: 2rem} .contenedor-flexbox{ display:flex; justify-content: flex-start; align-items: flex-start; /*es igual a stretch solo que extiende la caja de todos los elementos segun el maximo altura de un elemento*/ } h1,h2,p {margin:0; padding:0;} h1{ background-color:yellow} h2{ background-color:skyblue} p{ background-color:pink} </style> <div class="contenedor-flexbox"> <h1>hola</h1> <h2>hola</h2> <p>hola</p> <img src="mavuika1.jpg" width="400"> </div>
Publicar un comentario
Leer más

como usar imagenes flexibles

-
 <style> .contenedor-flex{display:flex; flex-wrap:wrap; background-color:pink; padding:1rem; align-items:flex-start; justify-content: flex-start; } img{flex:1; min-width: 0; /*object-fit: contain; es para mantener la proporcion alto ancho, luego verificar el ambito de aplicacion*/ } </style> <figure class="contenedor-flex"> <img src="mavuika1.jpg"> <img src="mavuika2.jpg"> <img src="mavuika3.jpg"> </figure>
Publicar un comentario
Leer más

soy el maestro del flexbox

-
 empecemos la clase para que un contenedor tenga elementos flexibles, es decir que se puedean mover hacia la derecha, izquierda arriba abajo espacios entre medio, todos los elementos en una linea horizontal, o todos en una linea vertical primero empezamos poniendo propiedades y reglas al contenedor flexible .contenedor-flexible{     display: flex;     justifiy-content: space-between;     align-items: center;     flex-wrap: wrap; } asi los elementos se alinean horizontal segun su anchura y bajan abajo si no caben en la linea y alineados verticalmente centrado esto es lo basico solo se los distribuje en lina o varias lineas pero no se modifica su tamaño segundo es poner espacios entre cada elemento fijo aqui se usa la propiedad gap:20px; pero este gap causa conflicto con la propiedad justify-content: space-between, pero uno lo puede soportar por tener espacios entre el medio fijos y bueno utulizar otra alineacion no el space-between para hacer ...
Publicar un comentario
Leer más

Curso businesse intelligence

-
  Recolección y Análisis de Datos en Excel (Método Más Sencillo) Excel es una de las herramientas más accesibles y usadas para recolectar y analizar datos sin necesidad de software adicional. A continuación, explico paso a paso cómo hacerlo. 1. Obtener y Cargar Datos en Excel A. Exportar o Crear un Archivo CSV/Excel Supongamos que un negocio tiene un sistema de ventas y exporta un archivo ventas.xlsx con la siguiente información: Si el negocio no tiene un sistema, puede ingresar los datos manualmente en Excel. B. Abrir el Archivo en Excel Abrir Excel . Ir a Archivo > Abrir y seleccionar ventas.xlsx . Se visualizarán los datos en una hoja de cálculo. 2. Limpieza y Preparación de Datos Antes de analizar, es importante asegurarse de que los datos sean correctos. A. Revisar y Corregir Errores Eliminar filas vacías: Seleccionar la fila vacía, clic derecho > Eliminar . Convertir formatos: Si la columna de Fecha está como texto, seleccionarla > Formato de ...
Publicar un comentario
Leer más

header responsivo html css

-
 <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devide-width, initial-scale=1.0"> <style> body{ font-family: arial sans-serif; margin: 0; padding: 0; color: #333;} .cabeza{ padding: 1rem; background-color: #333; display: flex; justify-content: space-between; align-items: center; color: white } .cabeza__boton-menu{ display:none; } .cabeza__logo{ font-size: 3rem; color: white; } .cabeza__titulo{  font-size:2.5rem; margin: 0; color:white; } .cabeza__nav{ display: block; } .cabeza__nav-lista{ margin: 0; padding: 0; list-style: none; display: flex; } .cabeza__nav-elemento{ margin-left: 1.5rem; font-size: 1.3rem; } /*estilos css para telefonos*/ @media( max-width:700px){ .cabeza__boton-menu{ display: block; margin: 0; padding: 0; border: 0; background: none; color: white; font-size: 2.5rem; cursor: pointer; } ...
Publicar un comentario
Leer más

CUANDO USAR FIGURE EN HTML

-
No es obligatorio usar <figure> en todas las webs, pero sí es recomendable cuando usas imágenes con un propósito descriptivo o informativo . 📌 Cuándo usar <figure> ✅ En informes, artículos o contenido educativo (como tu informe sobre células). ✅ En blogs y noticias (para agrupar imágenes con descripciones). ✅ En portfolios (cuando cada imagen necesita un título o explicación). ✅ En tiendas online (para mostrar productos con una descripción). ✅ En galerías de imágenes (para agrupar imágenes con pies de foto). ❌ Cuándo NO es obligatorio Si solo usas imágenes decorativas sin relevancia semántica (como íconos o fondos). Si la imagen es parte del diseño sin necesidad de una descripción. Si la imagen es independiente y no necesita un pie de foto. 🔥 Ejemplo en una landing page (NO necesita <figure> en todas las imágenes) html Copiar Editar < header > < img src = "logo.png" alt = "Logo de la empresa" > <!-- No n...
Publicar un comentario
Leer más

usar figure y figcaption para usar imagenes con descripcion para el seo web

-
  📌 ¿Qué es <figure> y <figcaption> ? Son etiquetas semánticas en HTML que permiten agrupar imágenes y sus descripciones. ✅ <figure> : Es un contenedor para imágenes, gráficos o cualquier contenido visual. ✅ <figcaption> : Es la etiqueta que proporciona una descripción o pie de imagen dentro del <figure> . 🔍 Ejemplo básico html Copiar Editar < figure > < img src = "celula.jpg" alt = "Estructura de una célula" width = "300" > < figcaption >Figura 1: Representación de una célula. </ figcaption > </ figure > 🎯 ¿Por qué usar <figure> en lugar de solo <img> ? Mejora la accesibilidad: Permite agregar contexto a la imagen sin afectar el atributo alt . Mejor SEO: Google puede interpretar mejor la relación entre la imagen y su descripción. Diseño más organizado: Facilita aplicar estilos con CSS (alineaciones, márgenes, etc.). Si solo usas <img> , la de...
Publicar un comentario
Leer más

teoria del diseño web, porque no se usan los tamaños predefinidos del h1 css

-
  ¿Por qué ya no se usan los tamaños predeterminados? Los defaults son genéricos : Ejemplo de tamaños por defecto (sin CSS): <h1> : 2em (~32px en navegadores estándar). <h2> : 1.5em (~24px). <p> : 1em (~16px). Estos tamaños no suelen reflejar la jerarquía visual que exigen los diseños actuales (muy conservadores). Demanda de mayor impacto visual : Los usuarios esperan diseños  memorables y emocionales , lo que se logra con tipografías más grandes y jerarquías audaces. Ejemplo real: Un  <h1>  en el hero de una web moderna suele rondar  3.5rem - 5rem  (56px - 80px en desktop). Un  <p>  en body:  1.125rem - 1.25rem  (18px - 20px), no 16px. Adaptación a dispositivos móviles : Los textos pequeños son difíciles de leer en pantallas táctiles, por lo que se aumentan los tamaños base. Ejemplo: Un  <li>  en móvil hoy suele ser  1rem - 1.125rem  (16px - 18px), no 14px. Tendencias actuales en t...
Publicar un comentario
Leer más

teoria de diseño web, codigo y la semantica textual visual

-
¡Perfecto! Vamos a estructurar una  web personal  desde el punto de vista de sus elementos, con ejemplos de redacción textual y buenas prácticas de diseño. Usaré un enfoque claro y profesional, siguiendo las pautas mencionadas (unidades en  rem , jerarquía, accesibilidad). Estructura y Redacción de una Web Personal (Basado en HTML5 y CSS moderno) 1.  Header (Cabecera) Elementos : Logo : Iniciales, avatar o ícono. Título del sitio : Nombre personal o profesión. Navegación : Enlaces clave (Inicio, Sobre mí, Portafolio, Contacto). Ejemplo de redacción : html Copy < header > < div class = " logo " > JD </ div > <!-- Iniciales --> < h1 class = " site-title " > Juan Díaz · Diseñador UX/UI </ h1 > < nav > < ul class = " nav-menu " > < li > < a href = " #inicio " > Inicio </ a > </ li > < li > < a href = " #proyectos " > Proyect...
Publicar un comentario
Leer más