Análisis de un sitio web y una plataforma web, observando cómo se organiza su contenido, qué ocurre durante el scroll, cómo se distribuyen sus columnas y cómo cambia el layout al reducir la pantalla.
2026Sitio web · sii.cl
Se analizó la página de inicio del Servicio de Impuestos Internos. Esta funciona como un portal institucional que reúne trámites, noticias, información tributaria y distintos accesos.
Para observar su estructura también se utilizaron las herramientas de desarrollador del navegador.
Visitar sitio ↗Tipo de layout
La página utiliza un layout multicolumna. Esta organización permite separar una gran cantidad de información en distintos bloques.
En la portada aparecen sectores con dos y tres columnas, además de partes que utilizan todo el ancho disponible.
Las distintas secciones mantienen una alineación común y se organizan dentro de un contenedor central.
Scroll y posición
En la parte superior se utiliza un header que contiene el logo del SII, el acceso a Mi Sii, el menú principal y el buscador.
Al hacer scroll, el header se mueve junto con el contenido y deja de estar visible. No utiliza una posición sticky.
También aparecen carruseles que permiten cambiar los banners mostrados dentro de un mismo espacio.
Distribución de columnas
Al revisar la página con DevTools se puede observar que el contenido está separado en filas y columnas.
Aparecen clases como
col-md-6 y
col-xs-12, que permiten cambiar
el espacio que ocupa cada elemento dependiendo
del tamaño de la pantalla.
También se encontraron algunos componentes organizados mediante Flexbox.
Aunque visualmente existen estructuras parecidas a una grilla, en la portada inspeccionada no se detectó el uso de CSS Grid.
col-md-6 →
el elemento ocupa parte de la fila.
col-xs-12 →
en una pantalla pequeña pasa a ocupar todo el ancho.
Adaptación a móvil
Al reducir la pantalla, las columnas dejan de ubicarse principalmente una al lado de la otra y pasan a ordenarse verticalmente.
El menú superior cambia a un menú hamburguesa y los banners pasan a ocupar prácticamente todo el ancho.
Las secciones “Destacados” y “Noticias” dejan de compartir una misma fila y aparecen una después de la otra.
El footer también cambia de cinco columnas a bloques desplegables, evitando comprimir todos sus enlaces en una pantalla pequeña.
Navegación
Al final de la página aparece el footer, utilizado para reunir enlaces y navegación secundaria.
En escritorio se divide en cinco columnas con categorías como valores, normativa, redes sociales, sitios de interés e información sobre el SII.
En móvil estas columnas cambian a bloques desplegables, simplificando la navegación.
Evaluación y ajustes
Plataforma web · Google Drive
Se analizó Google Drive como una plataforma web destinada a guardar, organizar, compartir y administrar archivos y carpetas.
Su interfaz funciona como un espacio de trabajo, manteniendo disponibles distintas herramientas y formas de navegación.
Visitar plataforma ↗Tipo de layout
Google Drive utiliza un layout de tipo interfaz de software o dashboard.
En la parte superior aparece un header con el buscador y distintas herramientas de la cuenta.
A la izquierda se encuentra una sidebar con las principales opciones de navegación y al centro está el área de trabajo donde aparecen las carpetas y archivos.
También existe una barra secundaria a la derecha con accesos a otras herramientas de Google.
Scroll y posición
El scroll ocurre principalmente dentro del área central de trabajo, donde se encuentran los archivos.
Al desplazarse, el header superior y la barra lateral izquierda continúan visibles.
También se mantienen el título “Mi unidad” y los filtros superiores, permitiendo cambiar de sección o buscar archivos sin tener que volver al inicio.
A diferencia del SII, la navegación permanece disponible mientras el contenido central se mueve.
Distribución de columnas
Al revisar Google Drive con DevTools se pueden observar distintos contenedores organizados mediante Flexbox y CSS Grid.
La estructura principal divide visualmente la pantalla entre la barra lateral izquierda, el área central de trabajo y la barra secundaria de la derecha.
Dentro del área principal los archivos también se ordenan mediante una grilla, permitiendo distribuir varios elementos por fila.
Grid / Grid Lanes → utilizado en distintos contenedores de la interfaz.
Flexbox →
también aparece en la estructura principal,
incluyendo #drive-main-page.
Adaptación a móvil
Al reducir el ancho de la pantalla, Google Drive mantiene gran parte de su estructura de dashboard.
La barra lateral izquierda continúa visible, mientras que el área central se hace más angosta.
La grilla de archivos reduce la cantidad de columnas y pasa a mostrar menos elementos por fila.
El header y los filtros superiores también se compactan para adaptarse al espacio disponible.
Navegación
La barra lateral izquierda funciona como la navegación principal de Google Drive.
Desde esta zona se puede acceder a Página principal, Mi unidad, Compartidos conmigo, Recientes, Destacados y Papelera.
La sección actual se muestra mediante un estado activo. En este caso “Mi unidad” aparece destacada con un fondo azul, ayudando al usuario a reconocer dónde se encuentra.
Evaluación y ajustes
Volver
Inicio →