Friki Work

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 ...

Los menús desplegables son componentes esenciales en el diseño web, permitiendo organizar contenido de manera compacta. A continuación, se detallan métodos para crearlos utilizando HTML, CSS y JavaScript. Menú Desplegable Mediante CSS La estructura HTML define la jerarquía del menú: <div id="contenedor-nav"> <ul> &lt ...

Introducción a la Arquitectura de Move.js Move.js es una biblioteca de JavaScript diseñada para simplificar la creación de animaciones CSS3 complejas mediante una API fluida y encadenable. En lugar de manipular directamente las propiedades de estilo en cada fotograma, la librería aprovecha las transiciones y transformaciones nativas de CSS3, ga ...

Estructura semántica con HTML5 La base de una página de login accesible radica en una estructura HTML semántica. La declaración del doctype y las etiquetas meta para codificación y viewport son esenciales. <form action="/autenticar" method="POST" role="form" aria-label="Formulario de acceso"> < ...