Friki Work

Propiedades de Posicionamiento Valores disponibles: static, fixed, absolute, relative absolute: Elimina el elemento del flujo normal. Las propiedades top, bottom, left y right establecen posición absoluta relativa al contenedor más cercano con posición no estática. Si top y bottom coexisten, top prevalece. Mismo comportamiento para left sobre r ...

Este artículo presenta la creación de un sitio web estático dedicado al festival tradicional chino Qingming (清明节), utilizando tecnologías web modernas como HTML5, CSS3 y JavaScript básico. El proyecto se enfoca en una implementación responsive con un diseño limpio y estructurado, ideal para fines educativos o demostrativos. Estructura del pr ...

Estandarización y Semántica en HTML Declaración DOCTYPE y Modo Estándar Omitir la declaración <!DOCTYPE> fuerza a los navegadores a renderizar la página en "modo quirks", lo que provoca inconsistencias graves en el modelo de caja y el layout. La declaración de HTML5 es concisa, universal y garantiza el modo estándar en todos los ...

Thimble: Herramienta educativa para desarrollo web con vista previa en tiempo real Nota importante: El proyecto Thimble ya no se encuentra en mantenimiento activo. Se recomienda el uso de Glitch.com como alternativa principal. El código fuente original se puede encontrar en el repositorio del proyecto. Thimble fue un entorno de desarrollo en lí ...

Transiciones CSS Las transiciones permiten aplicar efectos visuales gradualmente al cambiar el estilo de un elemento, sin depender de tecnologías externas como JavaScript o Flash. Este mecanismo facilita transiciones suaves entre estados, como al interactuar con el cursor. Propiedad Descripción Valores transition-property Especifica la p ...

En las entrevistas de desarrollo front end, es común evaluar el conocimiento profundo de JavaScript, el DOM y CSS. A continuación, se presenta una serie de problemas y conceptos técnicos fundamentales. Alcance de variables y funciones Analiza el resultado del siguiente código: let valorInicial = 50; actualizarValor(valorInicial); function actu ...

El desarrollo de interfaces web para la preservación cultural requiere una combinación equilibrada de diseño visual y una estructura técnica sólida. En este proyecto, se aborda la creación de un sitio web informativo dedicado a la ópera tradicional (estilo Xiju), utilizando estándares de HTML5 y CSS3. El objetivo es implementar un diseño limpio ...

1.1 Cabecera del sitio <template> <el-container> <el-header> <el-row> <el-col :span="4"> <img src="/assets/logos/company_logo.png" alt="Logo de la empresa"/> </el-col> <el-col :span="20" class="menu-column&quot ...

En el desarrollo de interfaces de usuario modernas, los componentes nativos frecuentemente necesitan personalizaciones avanzadas para cumplir con directrices de diseño específicas. Un requerimiento habitual es la integración de microinteracciones, como un efecto visual de expansión al interactuar con un elemento. A continuación, se detalla la c ...

Implementación del Botón Interactivo Este artículo explica cómo crear un botón de "Me Gusta" con una animación de corazón fluida y atractiva utilizando CSS puro. Se emplean pseudo-elementos, transformaciones y animaciones para lograr el efecto. Conceptos Clave Uso de :before y :after para formar la forma del corazón. Aplicación de tr ...