Skip to content

AI.md

Latest commit

 

History

History
420 lines (343 loc) · 11.1 KB

AI.md

File metadata and controls

420 lines (343 loc) · 11.1 KB

🤖 Plan de Mejoras para Sitio Web Personal

📋 Resumen de Requerimientos

Este documento detalla las mejoras técnicas necesarias para optimizar el sitio web personal de Rolando Avila, enfocándose en SEO, accesibilidad, rendimiento y experiencia de usuario.

🔍 SEO Básico

Meta Tags Esenciales

<!-- Meta tags optimizados -->
<meta name="description" content="Rolando Avila - Desarrollador Senior iOS y Web. Especialista en Swift, SwiftUI, Objective-C y C#. Portafolio de proyectos móviles y aplicaciones empresariales.">
<meta name="keywords" content="desarrollador iOS, Swift, SwiftUI, Objective-C, C#, portafolio Rolando Avila, desarrollador móvil Monterrey">
<meta name="author" content="Rolando Avila">
<meta name="robots" content="index, follow">

<!-- Open Graph -->
<meta property="og:title" content="Rolando Avila - Desarrollador iOS y Web">
<meta property="og:description" content="Desarrollador Senior especializado en iOS y aplicaciones web. Portafolio de proyectos móviles empresariales.">
<meta property="og:image" content="https://yoursite.com/assets/og-image.jpg">
<meta property="og:url" content="https://yoursite.com">
<meta property="og:type" content="website">

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Rolando Avila - Desarrollador iOS y Web">
<meta name="twitter:description" content="Desarrollador Senior especializado en iOS y aplicaciones web">
<meta name="twitter:image" content="https://yoursite.com/assets/twitter-image.jpg">

Estructura de Encabezados

  • H1: "Rolando Avila - Desarrollador Senior iOS y Web" (único por página)
  • H2: Secciones principales (Portafolio, Sobre mí, Contacto)
  • H3: Subsecciones y títulos de proyectos
  • H4-H6: Detalles específicos y contenido secundario

Alt Text en Imágenes

<!-- Ejemplos de alt text descriptivos -->
<img src="assets/proyectos/appRD.jpg" alt="App Ruta Directa - Aplicación móvil de mapas y GPS para iPhone y iPad">
<img src="assets/profile.jpg" alt="Foto de perfil de Rolando Avila, desarrollador iOS">

Archivos SEO

  • sitemap.xml: Lista de páginas para motores de búsqueda
  • robots.txt: Instrucciones para crawlers

Herramientas de Monitoreo

  • Google Search Console: Monitorear rendimiento en búsqueda
  • Google Analytics: Análisis de tráfico
  • Palabras clave objetivo: "portafolio Rolando Avila", "desarrollador iOS Monterrey", "Swift developer"

🌐 Open Graph y Twitter Cards

Implementación Completa

<!-- Open Graph para Facebook/LinkedIn -->
<meta property="og:title" content="Rolando Avila - Desarrollador iOS Senior">
<meta property="og:description" content="+10 años de experiencia desarrollando aplicaciones iOS para empresas líderes. Especialista en Swift, SwiftUI y arquitectura móvil.">
<meta property="og:image" content="https://yoursite.com/assets/og-featured.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yoursite.com">
<meta property="og:type" content="website">
<meta property="og:locale" content="es_MX">

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@erolando">
<meta name="twitter:creator" content="@erolando">
<meta name="twitter:title" content="Rolando Avila - iOS Developer">
<meta name="twitter:description" content="Desarrollador Senior iOS con experiencia en apps empresariales">
<meta name="twitter:image" content="https://yoursite.com/assets/twitter-featured.jpg">

Imágenes para Redes Sociales

  • Dimensiones recomendadas: 1200x630px (Open Graph)
  • Formato: JPG o PNG, <100KB
  • Contenido: Logo profesional, nombre claro, especialidad

♿ Accesibilidad (WCAG 2.1 Nivel AA)

Roles ARIA Esenciales

<!-- Navegación accesible -->
<nav role="navigation" aria-label="Menú principal">
  <ul class="main-nav">
    <li><a href="#home" aria-current="page">Inicio</a></li>
    <li><a href="#portfolio">Portafolio</a></li>
  </ul>
</nav>

<!-- Contenido principal -->
<main role="main" aria-label="Contenido principal">
  <section aria-labelledby="portfolio-heading">
    <h2 id="portfolio-heading">Portafolio de Proyectos</h2>
  </section>
</main>

<!-- Botones interactivos -->
<button id="lang-toggle" aria-label="Cambiar idioma entre español e inglés">
  <span class="sr-only">Idioma actual: </span>
  <span class="lang-text">ES</span>
</button>

Navegación por Teclado

  • Tab order: Lógico y secuencial
  • Skip links: Enlaces para saltar al contenido principal
  • Focus indicators: Visibles y claros
  • Atajos de teclado: Para funcionalidades principales

Screen Readers

<!-- Textos ocultos para screen readers -->
<span class="sr-only">Abrir menú de navegación</span>

<!-- Descripciones contextuales -->
<div role="img" aria-label="Captura de pantalla de la aplicación Ruta Directa mostrando interfaz de mapas">
  <img src="appRD.jpg" alt="">
</div>

Herramientas de Validación

  • WAVE: Validación accesibilidad
  • Lighthouse: Auditoría integrada
  • axe DevTools: Testing automatizado

🌙 Modo Oscuro

Implementación CSS

/* Variables CSS para temas */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --text-primary: #333333;
  --text-secondary: #666666;
  --accent: #6f42c1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --accent: #9b72ff;
  }
}

/* Toggle manual de tema */
[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
}

Toggle de Tema

// JavaScript para cambio de tema
const themeToggle = document.getElementById('theme-toggle');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
}

themeToggle.addEventListener('click', () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  setTheme(currentTheme === 'dark' ? 'light' : 'dark');
});

⚡ Optimización de Imágenes y Archivos

Compresión de Imágenes

  • Herramientas: TinyPNG, Squoosh, ImageOptim
  • Formatos modernos: WebP para navegadores compatibles
  • Responsive images: srcset para diferentes resoluciones
  • Lazy loading: loading="lazy" nativo
<!-- Imágenes optimizadas -->
<picture>
  <source srcset="assets/proyectos/appRD.webp" type="image/webp">
  <source srcset="assets/proyectos/appRD.jpg" type="image/jpeg">
  <img src="assets/proyectos/appRD.jpg" 
       alt="App Ruta Directa - Aplicación móvil de mapas"
       loading="lazy"
       width="300" height="200">
</picture>

Minificación

  • CSS: CSSNano, CleanCSS
  • JavaScript: UglifyJS, Terser
  • HTML: HTMLMinifier
  • Build process: Gulp/Grunt o Webpack

Métricas de Rendimiento

  • Tiempo de carga objetivo: <3 segundos
  • First Contentful Paint: <1.5s
  • Largest Contentful Paint: <2.5s
  • Cumulative Layout Shift: <0.1

🚀 Caching y CDN

Caching en Navegador

# Configuración Nginx
location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

location ~* \.(html)$ {
  expires 1h;
  add_header Cache-Control "public";
}

CDN Implementación

  • Cloudflare: Plan gratuito disponible
  • Netlify/Vercel: CDN integrado
  • GitHub Pages: JSDelivr para assets

Service Worker

// Caching básico con Service Worker
const CACHE_NAME = 'portfolio-v1';
const urlsToCache = [
  '/',
  '/css/style.css',
  '/js/main.js',
  '/assets/profile.jpg'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

🖼️ Lazy Loading

Implementación Nativa

<!-- Lazy loading nativo -->
<img src="placeholder.jpg" 
     data-src="real-image.jpg" 
     loading="lazy"
     alt="Descripción de la imagen"
     class="lazy">

<!-- Lazy loading para videos -->
<iframe src="video-placeholder.jpg" 
        data-src="https://youtube.com/embed/VIDEO_ID"
        loading="lazy"
        class="lazy-video">
</iframe>

JavaScript Fallback

// Intersection Observer para lazy loading
const lazyImages = document.querySelectorAll('img.lazy');

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      imageObserver.unobserve(img);
    }
  });
});

lazyImages.forEach(img => imageObserver.observe(img));

📊 Métricas y Monitoreo

Google PageSpeed Insights

  • Mobile: >90 puntos objetivo
  • Desktop: >95 puntos objetivo
  • Core Web Vitals: Todos en verde

Lighthouse CI

{
  "ci": {
    "collect": {
      "numberOfRuns": 3,
      "settings": {
        "preset": "desktop",
        "throttling": {
          "rttMs": 40,
          "throughputKbps": 10240,
          "cpuSlowdownMultiplier": 1
        }
      }
    },
    "assert": {
      "assertions": {
        "categories:performance": ["warn", {"minScore": 0.9}],
        "categories:accessibility": ["error", {"minScore": 0.9}],
        "categories:best-practices": ["warn", {"minScore": 0.9}],
        "categories:seo": ["warn", {"minScore": 0.9}]
      }
    }
  }
}

🎯 Plan de Implementación

Fase 1: Fundamentos (Semana 1-2)

  • Meta tags y SEO básico
  • Open Graph y Twitter Cards
  • Sitemap.xml y robots.txt
  • Alt text en imágenes

Fase 2: Accesibilidad (Semana 3)

  • Roles ARIA y navegación
  • Testing con WAVE/Lighthouse
  • Navegación por teclado
  • Screen reader optimization

Fase 3: Rendimiento (Semana 4-5)

  • Optimización de imágenes
  • Minificación CSS/JS
  • Lazy loading implementation
  • Caching strategy

Fase 4: Experiencia Usuario (Semana 6)

  • Modo oscuro
  • Service Worker
  • CDN setup
  • Testing final

📈 Herramientas Recomendadas

SEO

  • Google Search Console
  • Google Analytics
  • SEMrush/Ahrefs
  • Screaming Frog

Accesibilidad

  • WAVE (WebAIM)
  • axe DevTools
  • Lighthouse
  • Color Contrast Analyzer

Rendimiento

  • Google PageSpeed Insights
  • GTmetrix
  • WebPageTest
  • Lighthouse CI

Desarrollo

  • VS Code con extensiones accesibilidad
  • Prettier/ESLint para código limpio
  • GitHub Actions para CI/CD

🎉 Beneficios Esperados

SEO

  • Mejor posicionamiento en búsquedas
  • Más tráfico orgánico
  • Mejor CTR en resultados

Accesibilidad

  • Audiencia más amplia
  • Cumplimiento normativo
  • Mejor experiencia general

Rendimiento

  • Tiempo de carga reducido
  • Mejor conversión
  • Menos rebote

UX

  • Experiencia personalizada
  • Navegación fluida
  • Profesionalismo incrementado

Última actualización: Enero 2026 Versión: 1.0