Skip to content

Instantly share code, notes, and snippets.

View Heipry's full-sized avatar
馃彔
Working from home

Javier D铆az Garrido Heipry

馃彔
Working from home
13 followers · 8 following
View GitHub Profile
@Heipry
Heipry / prompting.md
Created September 1, 2025 15:03
Este documento resume los principios fundamentales para interactuar eficazmente con modelos de IA generativa, bas谩ndose en la metodolog铆a de Google.

Google Prompting Essentials: Fundamentos Clave

Dise帽a prompts que funcionen

Para empezar a usar la IA, sigue el marco de 5 pasos. Una forma de recordarlo es con la frase: "Thoughtfully Create Really Excellent Inputs".

  • Tarea: Describe claramente lo que quieres que la herramienta de IA generativa te ayude a hacer. Especifica una persona y un formato para la respuesta.
  • Contexto: Proporciona todos los detalles necesarios para que la IA entienda tu petici贸n.
  • Referencias: Si est谩n disponibles, incluye ejemplos para que la herramienta de IA los utilice en la creaci贸n de su salida.
  • Evaluar: Revisa la salida para ver si es 煤til.
@Heipry
Heipry / commit-message-cheatsheet.md
Created August 29, 2025 09:34
Cheat sheet de mensajes de commit en Git: tipos, ejemplos y buenas pr谩cticas

Cheat Sheet de mensajes para Commits

Tipos de commits y ejemplos

Tipo Uso Ejemplo
feat Nueva funcionalidad feat: a帽ade buscador en productos
fix Correcci贸n de bugs fix: corrige c谩lculo de impuestos
docs Documentaci贸n docs: actualiza README con ejemplos API
style Formato / limpieza (sin afectar l贸gica) style: aplica prettier en todos los archivos
@Heipry
Heipry / imagen-lightbox-solo-css.markdown
Last active August 18, 2025 16:49
Imagen LightBox solo css

Imagen LightBox con solo css

HTML & CSS: Lightbox sin JavaScript

Este Codepen muestra una soluci贸n de lightbox completamente funcional usando solo HTML y CSS. Aprovecha la sem谩ntica de la etiqueta y el selector CSS :checked para crear un efecto de pantalla completa al hacer clic en una imagen, sin necesidad de una sola l铆nea de JavaScript.

Es un ejemplo ingenioso de c贸mo se pueden lograr funcionalidades interactivas complejas utilizando los recursos nativos de la web, ideal para proyectos donde se busca la m谩xima simplicidad y rendimiento.

La clave de este truco est谩 en la l铆nea input:checked ~ .lightbox-overlay. El selector ~ (virgulilla o tilde) se llama "selector de hermanos generales" y significa "selecciona cualquier .lightbox-overlay que sea un hermano posterior del elemento input:checked".

@Heipry
Heipry / Publicacion-webs.md
Last active August 18, 2025 16:51
Recursos sobre la Publicaci贸n de P谩ginas Web

馃摎 Recursos sobre la Publicaci贸n de P谩ginas Web

Este documento recopila recursos t茅cnicos y actualizados que complementan el temario sobre la publicaci贸n de p谩ginas web. Incluye gu铆as, herramientas y buenas pr谩cticas esenciales para desarrolladores web.

馃攼 1. Seguridad en la Publicaci贸n de P谩ginas Web

Conociendo los sistemas de archivos

@Heipry
Heipry / ayuda-con-webs.md
Last active August 18, 2025 16:53
Recursos sobre validaci贸n y optimizaci贸n de webs
@Heipry
Heipry / ayuda-con-js.md
Last active March 6, 2025 09:18
Lenguajes de gui贸n. Recursos 煤tiles
@Heipry
Heipry / test-usuario-web.md
Last active August 18, 2025 16:54
Ejemplo de test de usuario

Ejemplo de test de usuario para evaluar la usabilidad de un sitio web. En este caso, se comprueba si el usuario puede encontrar la cantidad de especies que habitan en un parque natural, siguiendo una tarea guiada. Incluye pasos, posibles resultados y mejoras sugeridas, sirviendo como base para crear otros tests similares.

Objetivo del Test:

Evaluar si el usuario puede encontrar la cantidad de especies en el parque dentro del sitio web.

Tarea:

"Encuentra cu谩ntas especies hay en el parque."

@Heipry
Heipry / mapa-navegacion.md
Last active August 18, 2025 16:52
Ejemplo de mapa de navegaci贸n

Ejemplo de mapa de navegaci贸n para un sitio web, mostrando la estructura jer谩rquica de sus p谩ginas y secciones principales. Este recurso sirve como referencia para planificar la arquitectura de la informaci贸n y facilitar la experiencia de usuario, pudiendo adaptarse a distintos tipos de proyectos web.

Mapa del Sitio: Parque Natural

1. Landing Page (index.html)

  • Encabezado
@Heipry
Heipry / guia-usuario.md
Last active August 18, 2025 16:54
Gu铆a de usuario de sitio web

Gu铆a de usuario de un sitio web, dise帽ada para orientar a los visitantes en el uso de sus secciones y funcionalidades. Estructurada como plantilla, puede adaptarse f谩cilmente a otros proyectos web con distinta tem谩tica, manteniendo un enfoque claro y f谩cil de seguir.

Gu铆a de Usuario: Sitio Web del Parque Natural

Bienvenidos al sitio web del Parque Natural. Esta gu铆a est谩 dise帽ada para ayudarte a navegar por las secciones del sitio y aprovechar todas sus funcionalidades. A continuaci贸n, encontrar谩s un resumen de las principales p谩ginas y caracter铆sticas del sitio.

1. P谩gina de Inicio (Landing Page)

Descripci贸n

@Heipry
Heipry / documento-funcional.md
Last active August 18, 2025 16:54
Documento funcional de sitio web

Documento funcional de sitio web , detallando sus elementos principales, funcionalidades y estructura. Incluye navegaci贸n entre p谩ginas y la organizaci贸n de las secciones clave. Sirve como referencia o plantilla para definir requisitos funcionales en otros proyectos web.

Documento Funcional: Sitio Web del Parque Natural

Este documento describe los elementos principales, funcionalidades y estructura del sitio web, incluyendo la navegaci贸n hacia otras p谩ginas para las secciones de "Rutas" y "Fauna".

1. Objetivo del Sitio Web

El sitio web tiene como objetivo proporcionar informaci贸n relevante sobre el Parque Natural, permitiendo a los usuarios explorar las actividades disponibles, obtener informaci贸n sobre la fauna y las rutas, y realizar reservas de manera sencilla.