Friki Work

El diseño de juego inspirado en Duolingo es un caso maestro de cómo la visión visual puede aumentar significativamente la experiencia del usuario. El sistema de diseño utilizado por Duolingo se centra en elementos como el verde olivo brillante, sombras gruesas y tipografías confiantes. Este artículo explora cómo replicar estos elementos utiliza ...

Primera Interacción con HTML Entorno de desarrollo Uso de VS Code Uso de Sublime Text Concepto de HTML ¿Qué significa "hipertexto"? ¿Por qué se llama "lenguaje de marcado"? HTML como herramienta para definir significado semántico Historia de HTML Términos clave en HTML Creación de tu primer documento HTML Estructura básica ...

CSS (Hojas de Estilo en Cascada) es un lenguaje utilizado para definir la presentación visual de documentos estructurados como HTML. Los archivos CSS utilizan la extensión .css y permiten controlar aspectos como colores, fuentes, espaciado y diseño. Métodos para incluir CSS en HTML Existen tres formas principales de aplicar estilos CSS a docume ...

Este artículo describe la creación de un componente de interfaz de usuario para presentar texto largo de manera compacta. El objetivo principal es mostrar una sola línea de texto, aplicando puntos suspensivos cuando el contenido excede el espacio asignado. Una característica clave es la inclusión de un indicador visual en forma de flecha, que s ...

Acelerando el Desarollo HTML con Emmet: Una Guía de Sintaxis Emmet es una potente herramienta que transforma la manera en que los desarrolladores web escriben código HTML y CSS, permitiendo generar estructuras complejas con una mínima cantidad de pulsaciones de teclado. Esta guía explora las reglas de sintaxis fundamentales de Emmet, diseñada p ...

En el desarrollo web, ciertos estilos en CSS se transfieren automáticamente de los elementos padres a sus hijos, un concepto conocido como herencia. Por lo genarel, las propiedades relacionadas con la presentación del texto —como el color, la fuente y el tamaño— se heredan por defecto. Esto permite mantener una coherencia visual sin necesidad d ...

Las bibliotecas de arrastrar y soltar (drag-and-drop) como Sortable.js son fundamentales para crear interfaces interactivas. Sin embargo, los desarrolladores a menudo se enfrentan a problemas de fluidez y tartamudeo durante las operaciones de arrastre. Este cuello de botella en el rendimiento suele ser el resultado de cálculos costosos de reflu ...

Diseño de la Página del Cantro de Servicios Código de diseño <html> <head> <meta charset="utf-8"> <title>Centro de Servicios--Diseño</title> <style> *{ margin: 0; padding: 0; } .contenedor{ width: 800px; height: 670px; margin: 0px auto; border: 2px solid; } ...

Introducción al proyecto Este proyecto corresponde a una tarea académica centrada en el desarrollo web frontend, donde se presenta una página web dedicada a la ciudad de Shenyang, capital de la provincia de Liaoning en China. El diseño utiliza tecnologías fundamentales como HTML, CSS y JavaScript para estructurar y dar estilo al contenido. El c ...

Al configurar layouts que ocupan toda la pantalla, es común encontrarse con la aparición inesperada de barras de desplazamiento. Este problema suele surgir al aplicar dimensiones relativas del 100% a los elementos principales: html, body { width: 100%; height: 100%; } La causa raíz de este comportamiento no es la declaración del 100% ...